feat(frontend): chat page ui/ux design

frontend/.eslintrc.js

@@ -170,13 +170,7 @@ module.exports = {
         "@typescript-eslint/no-unnecessary-type-arguments": "error",
         "@typescript-eslint/prefer-string-starts-ends-with": "error",
         "@typescript-eslint/switch-exhaustiveness-check": "error",
-        "@typescript-eslint/restrict-template-expressions": [
-          "error",
-          {
-            allowNumber: true,
-            allowBoolean: true,
-          },
-        ],
+        "@typescript-eslint/restrict-template-expressions": "off",
       },
     },
   ],

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx

@@ -1,7 +1,7 @@
 "use client";
-import { useTranslation } from "react-i18next";
 
-import Button from "@/lib/components/ui/Button";
+import Icon from "@/lib/components/ui/Icon/Icon";
+import { LoaderIcon } from "@/lib/components/ui/LoaderIcon/LoaderIcon";
 
 import { OnboardingQuestions } from "./components";
 import { ChatEditor } from "./components/ChatEditor/ChatEditor";
@@ -11,7 +11,11 @@ export const ChatInput = (): JSX.Element => {
   const { setMessage, submitQuestion, generatingAnswer, message } =
     useChatInput();
 
-  const { t } = useTranslation(["chat"]);
+  const handleSubmitQuestion = () => {
+    if (message.trim() !== "") {
+      submitQuestion();
+    }
+  };
 
   return (
     <>
@@ -21,30 +25,29 @@ export const ChatInput = (): JSX.Element => {
           data-testid="chat-input-form"
           onSubmit={(e) => {
             e.preventDefault();
-            submitQuestion();
+            handleSubmitQuestion();
           }}
           className="sticky bottom-0 bg-white dark:bg-black w-full flex items-center gap-2 z-20 p-2"
         >
           <div className="flex flex-1">
             <ChatEditor
               message={message}
               setMessage={setMessage}
-              onSubmit={submitQuestion}
+              onSubmit={handleSubmitQuestion}
             />
           </div>
-
-          <div className="flex flex-row items-center gap-4">
-            <Button
-              className="px-3 py-2 sm:px-4 sm:py-2 bg-primary border-0"
-              type="submit"
-              isLoading={generatingAnswer}
-              data-testid="submit-button"
-            >
-              {generatingAnswer
-                ? t("thinking", { ns: "chat" })
-                : t("chat", { ns: "chat" })}
-            </Button>
-          </div>
+          {generatingAnswer ? (
+            <LoaderIcon size="large" color="accent" />
+          ) : (
+            <Icon
+              name="followUp"
+              size="large"
+              color="accent"
+              disabled={!message}
+              handleHover={true}
+              onClick={handleSubmitQuestion}
+            />
+          )}
         </form>
       </div>
     </>

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

@@ -23,7 +23,6 @@ export const QADisplay = ({ content }: QADisplayProps): JSX.Element => {
         speaker={"user"}
         text={user_message}
         promptName={prompt_title}
-        brainName={brain_name}
         metadata={metadata} // eslint-disable-line @typescript-eslint/no-unsafe-assignment
       />
       <MessageRow

frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.module.scss

@@ -0,0 +1,71 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Spacings.module.scss";
+
+.message_row_container {
+  display: flex;
+  flex-direction: column;
+  padding-right: Spacings.$spacing05;
+  width: 85%;
+  padding-block: Spacings.$spacing03;
+
+  .message_row_content {
+    align-self: flex-end;
+    border-radius: 12px;
+    width: fit-content;
+    padding-block: Spacings.$spacing03;
+    padding-inline: Spacings.$spacing05;
+  }
+
+  .message_header {
+    padding: Spacings.$spacing02;
+  }
+
+  &.user {
+    align-self: flex-end;
+
+    .message_header {
+      align-self: flex-end;
+      display: flex;
+      gap: Spacings.$spacing02;
+      align-items: center;
+      color: Colors.$dark-grey;
+    }
+
+    .message_row_content {
+      background-color: Colors.$highlight;
+      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+    }
+  }
+
+  &.brain {
+    .message_header {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+
+      .left_wrapper {
+        display: flex;
+        gap: Spacings.$spacing05;
+        align-items: center;
+      }
+
+      .copy_button {
+        visibility: hidden;
+      }
+    }
+
+    .message_row_content {
+      align-self: flex-start;
+      background-color: Colors.$light-black;
+      margin-left: 1px;
+    }
+  }
+
+  &:hover {
+    .message_header {
+      .copy_button {
+        visibility: visible;
+      }
+    }
+  }
+}

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

@@ -1,9 +1,12 @@
 import React from "react";
 
+import Icon from "@/lib/components/ui/Icon/Icon";
+
+import styles from "./MessageRow.module.scss";
 import { CopyButton } from "./components/CopyButton";
-import { MessageContent } from "./components/MessageContent";
-import { QuestionBrain } from "./components/QuestionBrain";
-import { QuestionPrompt } from "./components/QuestionPrompt";
+import { MessageContent } from "./components/MessageContent/MessageContent";
+import { QuestionBrain } from "./components/QuestionBrain/QuestionBrain";
+import { QuestionPrompt } from "./components/QuestionPrompt/QuestionPrompt";
 import { useMessageRow } from "./hooks/useMessageRow";
 
 type MessageRowProps = {
@@ -22,43 +25,40 @@ export const MessageRow = React.forwardRef(
     { speaker, text, brainName, promptName, children }: MessageRowProps,
     ref: React.Ref<HTMLDivElement>
   ) => {
-    const {
-      containerClasses,
-      containerWrapperClasses,
-      handleCopy,
-      isCopied,
-      isUserSpeaker,
-      markdownClasses,
-    } = useMessageRow({
+    const { handleCopy, isCopied, isUserSpeaker } = useMessageRow({
       speaker,
       text,
     });
 
     const messageContent = text ?? "";
 
     return (
-      <div className={containerWrapperClasses}>
-        <div ref={ref} className={containerClasses}>
-          <div className="flex justify-between items-start w-full">
-            {/* Left section for the question and prompt */}
-            <div className="flex gap-1">
+      <div
+        className={`
+      ${styles.message_row_container ?? ""} 
+      ${isUserSpeaker ? styles.user ?? "" : styles.brain ?? ""}
+      `}
+      >
+        {!isUserSpeaker ? (
+          <div className={styles.message_header}>
+            <div className={styles.left_wrapper}>
               <QuestionBrain brainName={brainName} />
               <QuestionPrompt promptName={promptName} />
             </div>
-            {/* Right section for buttons */}
-            <div className="flex items-center gap-2">
-              {!isUserSpeaker && (
-                <>
-                  <CopyButton handleCopy={handleCopy} isCopied={isCopied} />
-                </>
-              )}
+            <div className={styles.copy_button}>
+              <CopyButton handleCopy={handleCopy} isCopied={isCopied} />
             </div>
           </div>
+        ) : (
+          <div className={styles.message_header}>
+            <Icon name="user" color="dark-grey" size="normal" />
+            <span className={styles.me}>Me</span>
+          </div>
+        )}
+        {}
+        <div ref={ref} className={styles.message_row_content}>
           {children ?? (
-            <MessageContent
-              text={messageContent}
-              markdownClasses={markdownClasses}
-            />
+            <MessageContent text={messageContent} isUser={isUserSpeaker} />
           )}
         </div>
       </div>

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

@@ -1,4 +1,4 @@
-import { FaCheckCircle, FaCopy } from "react-icons/fa";
+import Icon from "@/lib/components/ui/Icon/Icon";
 
 type CopyButtonProps = {
   handleCopy: () => void;
@@ -14,6 +14,11 @@ export const CopyButton = ({
     onClick={handleCopy}
     title={isCopied ? "Copied!" : "Copy to clipboard"}
   >
-    {isCopied ? <FaCheckCircle /> : <FaCopy />}
+    <Icon
+      name={isCopied ? "checkCircle" : "copy"}
+      color={isCopied ? "primary" : "black"}
+      size="normal"
+      handleHover={true}
+    />
   </button>
 );

frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss

@@ -0,0 +1,68 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Spacings.module.scss";
+@use "@/styles/Typography.module.scss";
+
+.markdown {
+  p {
+    margin: 0;
+    padding: 0;
+  }
+
+  ul {
+    list-style-type: disc;
+    margin-top: 0;
+    padding: 0;
+    margin-left: Spacings.$spacing05;
+  }
+
+  ol {
+    list-style-type: decimal;
+    padding-left: Spacings.$spacing05;
+    list-style-position: outside;
+
+    li {
+      white-space-collapse: collapse;
+    }
+  }
+
+  h1 {
+    @include Typography.H1;
+  }
+
+  h2 {
+    @include Typography.H2;
+  }
+
+  h3 {
+    @include Typography.H3;
+  }
+}
+
+.user {
+  color: Colors.$black;
+}
+
+.brain {
+  color: Colors.$white;
+}
+
+.thinking {
+  animation: pulse 1s infinite;
+  font-size: 2px;
+  line-height: 16px;
+  width: 16px;
+  display: flex;
+  justify-content: center;
+}
+
+@keyframes pulse {
+  0% {
+    font-size: 6px;
+  }
+  50% {
+    font-size: 16px;
+  }
+  100% {
+    font-size: 6px;
+  }
+}

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

@@ -1,12 +1,14 @@
 import { useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 
+import styles from "./MessageContent.module.scss";
+
 export const MessageContent = ({
   text,
-  markdownClasses,
+  isUser,
 }: {
   text: string;
-  markdownClasses: string;
+  isUser: boolean;
 }): JSX.Element => {
   const [showLog] = useState(true);
   const [isLog, setIsLog] = useState(true);
@@ -39,13 +41,19 @@ export const MessageContent = ({
   const { logs, cleanedText } = extractLog(text);
 
   return (
-    <div data-testid="chat-message-text" className="mt-2">
+    <div data-testid="chat-message-text">
       {isLog && showLog && logs.length > 0 && (
-        <div className="text-xs text-gray-600 bg-gray-100 p-2 rounded">
+        <div className="text-xs text-white p-2 rounded">
           <ReactMarkdown>{logs}</ReactMarkdown>
         </div>
       )}
-      <ReactMarkdown className={`text-base ${markdownClasses}`}>
+      <ReactMarkdown
+        className={`
+        ${styles.markdown} 
+        ${isUser ? styles.user : styles.brain}
+        ${cleanedText === "🧠" ? styles.thinking : ""} 
+        `}
+      >
         {cleanedText}
       </ReactMarkdown>
     </div>

frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss

@@ -0,0 +1,9 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Spacings.module.scss";
+
+.brain_name_wrapper {
+  display: flex;
+  align-items: center;
+  gap: Spacings.$spacing02;
+  color: Colors.$black;
+}