Merge branch 'main' into FS-104/Fix-Webagent

ScottLogic · Dec 6, 2024 · 48fdc0e · 48fdc0e
2 parents f0b63aa + 785f13f
commit 48fdc0e
Show file tree

Hide file tree

Showing 8 changed files with 1,162 additions and 98 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -45,6 +45,7 @@
   "dependencies": {
     "classnames": "^2.5.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.1"
   }
 }
diff --git a/frontend/src/app.module.css b/frontend/src/app.module.css
@@ -28,15 +28,65 @@
   border-radius: 24px;
   background-color: var(--white);
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  position: relative;
 }
 
 .sidepanel {
   position: relative;
-  height: 100%;
+  max-height: 100%;
+  overflow-x: hidden;
+  word-wrap: break-word;
+  padding-left: 8px;
+  padding-right: 24px;
+  font-size: 16px;
+  overflow-y: auto;
+  flex: 1;
 }
 
 .close_container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 56px;
+  padding-left: 32px;
+  padding-right: 24px;
   position: absolute;
-  top: -32px;
-  right: -16px;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.close_container h1 {
+  font-size: 24px;
+  font-weight: bold;
+  margin: 0;
+  flex-grow: 1;
+}
+
+.custom_hr {
+  margin: 32px -24px 12px -24px;
+  border: none;
+  height: 1px;
+  background-color: var(--grey-200);
+}
+
+.sidepanel::-webkit-scrollbar {
+  width: 5px;
+}
+
+.sidepanel::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 24px;
+}
+
+.sidepanel::-webkit-scrollbar-thumb:hover {
+  cursor: pointer;
+}
+
+.sidepanel::-webkit-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 24px;
 }
diff --git a/frontend/src/app.tsx b/frontend/src/app.tsx
@@ -6,9 +6,11 @@ import { useMessages } from './useMessages';
 import { NavBar } from './components/navbar';
 import closeIcon from './icons/close.svg';
 import { IconButton } from './components/icon-button';
+import Markdown from 'react-markdown';
 
 export const App = () => {
   const {
+    appendMessage,
     sendMessage,
     messages,
     waiting,
@@ -29,17 +31,19 @@ export const App = () => {
       <div className={styles.container}>
         {selectedMessage && (
           <div className={styles.column}>
+            <div className={styles.close_container}>
+              <h1>{selectedMessage.sidePanelTitle}</h1>
+              <IconButton
+                icon={closeIcon}
+                altText="Close"
+                onClick={() => selectMessage(null)}
+              />
+            </div>
+            <hr className={styles.custom_hr} />
             <div className={styles.sidepanel}>
-              <div className={styles.close_container}>
-                <IconButton
-                  icon={closeIcon}
-                  altText="Close"
-                  onClick={() => selectMessage(null)}
-                />
+              <div className={styles.markdown_container}>
+                <Markdown>{String(selectedMessage.report)}</Markdown>
               </div>
-              <p>id: {selectedMessage.id}</p>
-              <p>message: {selectedMessage.content}</p>
-              <p>time: {selectedMessage.time}</p>
             </div>
           </div>
         )}
@@ -56,6 +60,7 @@ export const App = () => {
               sendMessage={sendMessage}
               waiting={waiting}
               suggestions={suggestions}
+              appendMessage={appendMessage}
             />
           </div>
         </div>

diff --git a/frontend/src/components/input.tsx b/frontend/src/components/input.tsx
@@ -12,15 +12,27 @@ import { FileUpload } from './fileUpload';
 import { UploadedFileDisplay } from './uploadedFileDisplay';
 import { Suggestions } from './suggestions';
 import { Button } from './button';
-import { uploadFileToServer } from '../server';
+import { ChatMessageResponse, uploadFileToServer } from '../server';
+import { Role } from './message';
 
 export interface InputProps {
+  appendMessage: (
+    response: ChatMessageResponse,
+    role: Role,
+    report?: string,
+    sidePanelTitle?: string,
+  ) => void;
   sendMessage: (message: string) => void;
   waiting: boolean;
   suggestions: string[];
 }
 
-export const Input = ({ sendMessage, waiting, suggestions }: InputProps) => {
+export const Input = ({
+  appendMessage,
+  sendMessage,
+  waiting,
+  suggestions,
+}: InputProps) => {
   const [userInput, setUserInput] = useState<string>('');
   const [uploadedFile, setUploadedFile] = useState<File | null>(null);
   const [uploadInProgress, setUploadInProgress] = useState<boolean>(false);
@@ -60,9 +72,14 @@ export const Input = ({ sendMessage, waiting, suggestions }: InputProps) => {
     setUploadInProgress(true);
 
     try {
-      const { filename, id } = await uploadFileToServer(file);
-      console.log(`File uploaded successfully: ${filename} with id ${id}`);
+      const { filename, report } = await uploadFileToServer(file);
       setUploadedFile(file);
+      appendMessage(
+        { answer: `Your ESG report for ${filename} is ready to view.` },
+        Role.Bot,
+        report,
+        `ESG Report - ${filename}`,
+      );
     } catch (error) {
       console.error(error);
     } finally {

diff --git a/frontend/src/components/message.tsx b/frontend/src/components/message.tsx
@@ -18,6 +18,8 @@ export interface Message {
   content: string;
   reasoning?: string;
   time: string;
+  report?: string;
+  sidePanelTitle?: string;
 }
 
 export interface MessageProps {
@@ -47,7 +49,7 @@ export const MessageComponent = ({
   selectMessage,
   selectedMessage,
 }: MessageProps) => {
-  const { content, role, reasoning } = message;
+  const { content, role, reasoning, report } = message;
 
   const { class: roleClass, icon } = roleStyleMap[role];
 
@@ -59,12 +61,12 @@ export const MessageComponent = ({
         <img src={icon} className={styles.iconStyle} />
         <p className={styles.messageStyle}>{content}</p>
       </div>
-      {role == Role.Bot && false && (
+      {report && (
         <div className={styles.selectMessage}>
           <Button
             isOutline
             isPressed={message === selectedMessage}
-            text="Select message"
+            text={report ? 'View report' : 'View data grid'}
             icon={OpenGridIcon}
             onClick={() =>
               selectMessage(message === selectedMessage ? null : message)

diff --git a/frontend/src/server.ts b/frontend/src/server.ts
@@ -79,7 +79,7 @@ export const resetChat = async (): Promise<Response> => {
 
 export const uploadFileToServer = async (
   file: File,
-): Promise<{ filename: string; id: string }> => {
+): Promise<{ filename: string; id: string; report: string }> => {
   const formData = new FormData();
   formData.append('file', file);
 

diff --git a/frontend/src/useMessages.ts b/frontend/src/useMessages.ts
@@ -25,6 +25,7 @@ const starterMessage: Message = {
 };
 
 export interface UseMessagesHook {
+  appendMessage: (response: ChatMessageResponse, role: Role) => void;
   sendMessage: (message: string) => void;
   resetMessages: () => void;
   initSuggestions: () => void;
@@ -49,7 +50,12 @@ export const useMessages = (): UseMessagesHook => {
   }, []);
 
   const appendMessage = useCallback(
-    (response: ChatMessageResponse, role: Role) => {
+    (
+      response: ChatMessageResponse,
+      role: Role,
+      report?: string,
+      sidePanelTitle?: string,
+    ) => {
       setMessages((prevMessages) => [
         ...prevMessages,
         {
@@ -58,6 +64,8 @@ export const useMessages = (): UseMessagesHook => {
           content: response.answer,
           reasoning: response.reasoning,
           time: new Date().toLocaleTimeString(),
+          report,
+          sidePanelTitle,
         },
       ]);
     },
@@ -87,6 +95,7 @@ export const useMessages = (): UseMessagesHook => {
   }, []);
 
   return {
+    appendMessage,
     sendMessage,
     messages,
     suggestions,