feat(frontend): Add ThoughtsButton component for displaying thoughts (#2624)

This pull request adds a new component called ThoughtsButton for
displaying thoughts in the chat messages. The ThoughtsButton component
is used to show a tooltip with the thoughts text when the user hovers
over the button.

frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/MessageRow.tsx

@@ -4,6 +4,7 @@ import { useChat } from "@/app/chat/[chatId]/hooks/useChat";
 import { useChatApi } from "@/lib/api/chat/useChatApi";
 import { CopyButton } from "@/lib/components/ui/CopyButton";
 import Icon from "@/lib/components/ui/Icon/Icon";
+import { ThoughtsButton } from "@/lib/components/ui/ThoughtsButton";
 import { Source } from "@/lib/types/MessageMetadata";
 
 import styles from "./MessageRow.module.scss";
@@ -23,6 +24,7 @@ type MessageRowProps = {
   children?: React.ReactNode;
   metadata?: {
     sources?: Source[];
+    thoughts?: string;
   };
   brainId?: string;
   index?: number;
@@ -175,6 +177,12 @@ export const MessageRow = React.forwardRef(
             </div>
 
             <div className={styles.icons_wrapper}>
+              {metadata?.thoughts && metadata.thoughts.trim() !== "" && (
+                <ThoughtsButton
+                  text={metadata.thoughts}
+                  size="normal"
+                />
+              )}
               <CopyButton handleCopy={handleCopy} size="normal" />
               <Icon
                 name="thumbsUp"

frontend/app/chat/[chatId]/types/index.ts

@@ -21,6 +21,7 @@ export type ChatMessage = {
   brain_id?: UUID;
   metadata?: {
     sources?: Source[];
+    thoughts?: string;
   };
   thumbs?: boolean;
 };

frontend/lib/components/ui/ThoughtsButton.tsx

@@ -0,0 +1,21 @@
+
+import Icon from "@/lib/components/ui/Icon/Icon";
+import Tooltip from "@/lib/components/ui/Tooltip/Tooltip";
+import { IconSize } from "@/lib/types/Icons";
+
+
+type ThoughtsButtonProps = {
+  text: string;
+  size: IconSize;
+};
+
+export const ThoughtsButton = ({ text, size }: ThoughtsButtonProps): JSX.Element => {
+
+  return (
+      <Tooltip tooltip={text}>
+        <div>
+          <Icon name="question" size={size} color="black" handleHover={true}/>
+        </div>
+      </Tooltip>
+  );
+};

frontend/lib/components/ui/Tooltip/Tooltip.module.scss

@@ -9,4 +9,7 @@
   padding: Spacings.$spacing03;
   border-radius: Radius.$normal;
   font-size: Typography.$small;
-}
+  white-space: pre-wrap;
+  overflow: hidden;
+  max-width: 300px;
+}

frontend/lib/helpers/iconList.ts

@@ -17,6 +17,7 @@ import {
   FaKey,
   FaLinkedin,
   FaMoon,
+  FaQuestionCircle,
   FaRegFileAlt,
   FaRegKeyboard,
   FaRegStar,
@@ -129,6 +130,7 @@ export const iconList: { [name: string]: IconType } = {
   options: SlOptions,
   paragraph: BsTextParagraph,
   prompt: FaRegKeyboard,
+  question: FaQuestionCircle,
   redirection: BsArrowRightShort,
   radio: IoIosRadio,
   read: MdMarkEmailRead,

frontend/lib/types/MessageMetadata.ts

@@ -4,4 +4,5 @@ export interface Source {
   name: string;
   source_url: string;
   type: string;
+  thoughts: string;
 }