From bd869ed54a5f0f25ff0a147de21687c611a6ae26 Mon Sep 17 00:00:00 2001
From: Mike Smith <mic-smith@users.noreply.github.com>
Date: Thu, 28 Nov 2024 10:23:28 +0000
Subject: [PATCH] FS-73 Show message in sidebar

---
 frontend/src/app.tsx                       | 21 +++++++++++++-------
 frontend/src/components/chat.tsx           | 17 ++++++++++++++--
 frontend/src/components/message.module.css |  7 +++++++
 frontend/src/components/message.tsx        | 23 +++++++++++++++++++++-
 frontend/src/useMessages.ts                |  5 +++++
 5 files changed, 63 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app.tsx b/frontend/src/app.tsx
index a36cdb3d..33f22b40 100644
--- a/frontend/src/app.tsx
+++ b/frontend/src/app.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import styles from './app.module.css';
 import { Chat } from './components/chat';
 import { Input } from './components/input';
@@ -15,10 +15,10 @@ export const App = () => {
     suggestions,
     resetMessages,
     initSuggestions,
+    selectMessage,
+    selectedMessage,
   } = useMessages();
 
-  const [showSidebar, setShowSidebar] = useState(false);
-
   useEffect(() => {
     initSuggestions();
   }, []);
@@ -27,23 +27,30 @@ export const App = () => {
     <>
       <NavBar startNewConversation={resetMessages} />
       <div className={styles.container}>
-        {showSidebar && (
+        {selectedMessage && (
           <div className={styles.column}>
             <div className={styles.sidepanel}>
               <div className={styles.close_container}>
                 <IconButton
                   icon={closeIcon}
                   altText="Close"
-                  onClick={() => setShowSidebar(false)}
+                  onClick={() => selectMessage(null)}
                 />
               </div>
-              <p>Sidebar content</p>
+              <p>id: {selectedMessage.id}</p>
+              <p>message: {selectedMessage.content}</p>
+              <p>time: {selectedMessage.time}</p>
             </div>
           </div>
         )}
         <div className={styles.column}>
           <div className={styles.chatContainer}>
-            <Chat messages={messages} waiting={waiting} />
+            <Chat
+              messages={messages}
+              waiting={waiting}
+              selectedMessage={selectedMessage}
+              selectMessage={selectMessage}
+            />
             <Input
               key={messages?.[0]?.time}
               sendMessage={sendMessage}
diff --git a/frontend/src/components/chat.tsx b/frontend/src/components/chat.tsx
index 3fbb1092..24c4c404 100644
--- a/frontend/src/components/chat.tsx
+++ b/frontend/src/components/chat.tsx
@@ -8,9 +8,12 @@ import {
   Message as wsMessage,
 } from '../session/websocket-context';
 import { Confirmation, ConfirmModal } from './confirm-modal';
+
 export interface ChatProps {
   messages: Message[];
   waiting: boolean;
+  selectedMessage: Message | null;
+  selectMessage: (message: Message | null) => void;
 }
 
 const mapWsMessageToConfirmation = (
@@ -23,7 +26,12 @@ const mapWsMessageToConfirmation = (
   return { id: parts[0], requestMessage: parts[1], result: null };
 };
 
-export const Chat = ({ messages, waiting }: ChatProps) => {
+export const Chat = ({
+  messages,
+  waiting,
+  selectedMessage,
+  selectMessage,
+}: ChatProps) => {
   const containerRef = React.useRef<HTMLDivElement>(null);
   const { lastMessage, send } = useContext(WebsocketContext);
   const [chart, setChart] = useState<string | undefined>(undefined);
@@ -55,7 +63,12 @@ export const Chat = ({ messages, waiting }: ChatProps) => {
       />
       <div ref={containerRef} className={styles.container}>
         {messages.map((message, index) => (
-          <MessageComponent key={index} message={message} />
+          <MessageComponent
+            key={index}
+            message={message}
+            selectedMessage={selectedMessage}
+            selectMessage={selectMessage}
+          />
         ))}
         {chart && <img src={chart} alt="Generated chart" />}
         {waiting && <Waiting />}
diff --git a/frontend/src/components/message.module.css b/frontend/src/components/message.module.css
index 223576e0..6df39961 100644
--- a/frontend/src/components/message.module.css
+++ b/frontend/src/components/message.module.css
@@ -71,3 +71,10 @@
   font-size: 16px;
   white-space: pre-wrap;
 }
+
+.selectMessage {
+  margin-left: 72px;
+  margin-bottom: 8px;
+  position: relative;
+  top: -4px;
+}
diff --git a/frontend/src/components/message.tsx b/frontend/src/components/message.tsx
index 40c970c5..56d01b74 100644
--- a/frontend/src/components/message.tsx
+++ b/frontend/src/components/message.tsx
@@ -4,6 +4,8 @@ import styles from './message.module.css';
 import UserIcon from '../icons/account-circle.svg';
 import BotIcon from '../icons/logomark.svg';
 import ChevronIcon from '../icons/chevron.svg';
+import OpenGridIcon from '../icons/open-grid.svg';
+import { Button } from './button';
 
 export enum Role {
   User = 'User',
@@ -20,6 +22,8 @@ export interface Message {
 
 export interface MessageProps {
   message: Message;
+  selectedMessage: Message | null;
+  selectMessage: (message: Message | null) => void;
 }
 
 export interface MessageStyle {
@@ -38,7 +42,11 @@ const roleStyleMap: Record<Role, MessageStyle> = {
   },
 };
 
-export const MessageComponent = ({ message }: MessageProps) => {
+export const MessageComponent = ({
+  message,
+  selectMessage,
+  selectedMessage,
+}: MessageProps) => {
   const { content, role, reasoning } = message;
 
   const { class: roleClass, icon } = roleStyleMap[role];
@@ -51,6 +59,19 @@ export const MessageComponent = ({ message }: MessageProps) => {
         <img src={icon} className={styles.iconStyle} />
         <p className={styles.messageStyle}>{content}</p>
       </div>
+      {role == Role.Bot && (
+        <div className={styles.selectMessage}>
+          <Button
+            isOutline
+            isPressed={message === selectedMessage}
+            text="Select message"
+            icon={OpenGridIcon}
+            onClick={() =>
+              selectMessage(message === selectedMessage ? null : message)
+            }
+          />
+        </div>
+      )}
       {role == Role.Bot && reasoning && (
         <>
           <div
diff --git a/frontend/src/useMessages.ts b/frontend/src/useMessages.ts
index 935447df..0b45421e 100644
--- a/frontend/src/useMessages.ts
+++ b/frontend/src/useMessages.ts
@@ -28,15 +28,18 @@ export interface UseMessagesHook {
   sendMessage: (message: string) => void;
   resetMessages: () => void;
   initSuggestions: () => void;
+  selectMessage: (message: Message | null) => void;
   messages: Message[];
   suggestions: string[];
   waiting: boolean;
+  selectedMessage: Message | null;
 }
 
 export const useMessages = (): UseMessagesHook => {
   const [waiting, setWaiting] = useState<boolean>(false);
   const [messages, setMessages] = useState<Message[]>([starterMessage]);
   const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [selectedMessage, selectMessage] = useState<Message | null>(null);
 
   const fetchSuggestions = useCallback(async () => {
     const newSuggestions = await getSuggestions();
@@ -90,5 +93,7 @@ export const useMessages = (): UseMessagesHook => {
     waiting,
     resetMessages,
     initSuggestions: fetchSuggestions,
+    selectedMessage,
+    selectMessage,
   };
 };