feat(frontend): new chat interface

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/hooks/useChatInput.ts

@@ -7,11 +7,15 @@ export const useChatInput = () => {
   const [message, setMessage] = useState<string>("");
   const { addQuestion, generatingAnswer, chatId } = useChat();
 
-  const submitQuestion = useCallback(() => {
-    if (!generatingAnswer) {
-      void addQuestion(message, () => setMessage(""));
-    }
-  }, [addQuestion, generatingAnswer, message]);
+  const submitQuestion = useCallback(
+    (question?: string) => {
+      const finalMessage = question ?? message;
+      if (!generatingAnswer) {
+        void addQuestion(finalMessage, () => setMessage(""));
+      }
+    },
+    [addQuestion, generatingAnswer, message]
+  );
 
   return {
     message,

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

@@ -1,6 +1,6 @@
 import { ChatMessage } from "@/app/chat/[chatId]/types";
 
-import { MessageRow } from "./components";
+import { MessageRow } from "./components/MessageRow/MessageRow";
 import "./styles.css";
 
 type QADisplayProps = {
@@ -18,7 +18,6 @@ export const QADisplay = ({
     message_id,
     user_message,
     brain_name,
-    prompt_title,
     metadata,
     brain_id,
     thumbs,
@@ -30,15 +29,13 @@ export const QADisplay = ({
         key={`user-${message_id}`}
         speaker={"user"}
         text={user_message}
-        promptName={prompt_title}
         metadata={metadata} // eslint-disable-line @typescript-eslint/no-unsafe-assignment
       />
       <MessageRow
         key={`assistant-${message_id}`}
         speaker={"assistant"}
         text={assistant}
         brainName={brain_name}
-        promptName={prompt_title}
         brainId={brain_id}
         index={index}
         metadata={metadata} // eslint-disable-line @typescript-eslint/no-unsafe-assignment

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

@@ -1,56 +1,75 @@
 @use "@/styles/Radius.module.scss";
+@use "@/styles/ScreenSizes.module.scss";
 @use "@/styles/Spacings.module.scss";
+@use "@/styles/Transitions.module.scss";
 @use "@/styles/Typography.module.scss";
 
 .message_row_container {
   display: flex;
   flex-direction: column;
   padding-right: Spacings.$spacing05;
-  width: 85%;
-  padding-block: Spacings.$spacing03;
   gap: Spacings.$spacing03;
+  border-bottom: 1px solid var(--border-0);
+  padding-bottom: Spacings.$spacing05;
+  position: relative;
 
-  .message_row_content {
-    align-self: flex-end;
-    border-radius: Radius.$big;
-    width: fit-content;
-    padding-block: Spacings.$spacing03;
-    padding-inline: Spacings.$spacing05;
+  &.user {
+    font-size: Typography.$very_large;
+    font-weight: 500;
+    border-bottom: none;
   }
 
-  .message_header {
-    padding: Spacings.$spacing02;
-    overflow: hidden;
+  &.last {
+    border-bottom: none;
   }
 
-  &.user {
-    align-self: flex-end;
+  &.smaller {
+    font-size: Typography.$large;
+  }
 
-    .message_header {
-      align-self: flex-end;
-      display: flex;
-      gap: Spacings.$spacing02;
-      align-items: center;
-      color: var(--text-2);
+  @media screen and (max-width: ScreenSizes.$small) {
+    &.user {
+      font-size: Typography.$large;
     }
+  }
 
-    .message_row_content {
-      background-color: var(--background-2);
-    }
+  .icon_rotate {
+    position: absolute;
+    right: Spacings.$spacing04;
+    top: -(Spacings.$spacing05);
+    transition: transform 0.3s Transitions.$easeOutBack;
+  }
+
+  .icon_rotate_down {
+    transform: rotate(0deg);
+  }
+
+  .icon_rotate_up {
+    transform: rotate(-180deg);
+  }
+
+  .message_row_content {
+    border-radius: Radius.$big;
+    width: fit-content;
+    padding-block: Spacings.$spacing03;
+  }
+
+  .message_header_wrapper {
+    overflow: hidden;
   }
 
   &.brain {
     .message_header {
       display: flex;
       gap: Spacings.$spacing04;
       align-items: baseline;
+      @include Typography.H2;
     }
 
     .message_row_content {
       align-self: flex-start;
-      background-color: var(--background-special-0);
-      margin-left: 1px;
       position: relative;
+      padding: 0;
     }
 
     .metadata_wrapper {
@@ -65,64 +84,77 @@
         flex-direction: column;
         gap: Spacings.$spacing03;
         max-width: 100%;
+        padding-bottom: Spacings.$spacing05;
 
-        .sources {
+        .title_wrapper {
           display: flex;
+          align-items: center;
           gap: Spacings.$spacing03;
-          flex-wrap: wrap;
-          max-width: 100%;
-        }
 
-        .citations {
-          display: flex;
-          flex-direction: column;
-          gap: Spacings.$spacing02;
-          padding: Spacings.$spacing03;
-          border: 1px solid var(--primary-0);
-          border-radius: Radius.$big;
-          font-size: Typography.$small;
-
-          .file_name_wrapper {
-            display: flex;
-            gap: Spacings.$spacing03;
-            align-items: center;
-
-            .box_title {
-              padding-block: Spacings.$spacing02;
-              font-weight: 600;
-            }
-
-            .source {
-              font-size: Typography.$tiny;
-            }
+          .title {
+            @include Typography.H2;
           }
+        }
 
-          .box_title {
-            padding-block: Spacings.$spacing02;
-            font-weight: 600;
-          }
+        .sources {
+          display: flex;
+          column-gap: Spacings.$spacing06;
+          row-gap: Spacings.$spacing03;
+          flex-wrap: wrap;
+          max-width: 100%;
         }
       }
 
       .icons_wrapper {
-        visibility: hidden;
         display: flex;
-        gap: Spacings.$spacing03;
-
-        .sources_icon_wrapper {
-          cursor: pointer;
+        gap: Spacings.$spacing04;
+        padding-top: Spacings.$spacing03;
+        padding-bottom: Spacings.$spacing05;
+        width: 100%;
+        justify-content: flex-end;
+
+        .with_border {
+          border-bottom: 1px solid var(--border-0);
         }
+      }
+    }
+
+    .related_questions_wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: Spacings.$spacing03;
+      padding-block: Spacings.$spacing03;
+
+      .title_wrapper {
+        display: flex;
+        align-items: center;
+        gap: Spacings.$spacing03;
 
-        &.sticky {
-          visibility: visible;
+        .title {
+          @include Typography.H2;
         }
       }
-    }
 
-    &:hover {
-      .metadata_wrapper {
-        .icons_wrapper {
-          visibility: visible;
+      .questions_wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: Spacings.$spacing02;
+        font-size: Typography.$small;
+
+        .question {
+          display: flex;
+          align-items: center;
+          gap: Spacings.$spacing03;
+
+          .text {
+            color: var(--text-4);
+            transition: color 0.5s ease;
+
+            &:hover {
+              color: var(--text-3);
+              cursor: pointer;
+            }
+          }
         }
       }
     }