From ecbf72afb4fc114531cf3c2e41df9d50db7f8ad6 Mon Sep 17 00:00:00 2001
From: hollag <marcussoh38@gmail.com>
Date: Thu, 14 Nov 2024 02:34:06 +0800
Subject: [PATCH] fix: ai chat

---
 .../Text/TextChatWidget.module.css            |  1 +
 .../Communication/Text/TextChatWidget.tsx     | 35 ++++++++++---------
 peer-prep/src/utils/utils.tsx                 | 16 ++++++++-
 3 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/peer-prep/src/components/Communication/Text/TextChatWidget.module.css b/peer-prep/src/components/Communication/Text/TextChatWidget.module.css
index f3db0c1b2f..720d1191da 100644
--- a/peer-prep/src/components/Communication/Text/TextChatWidget.module.css
+++ b/peer-prep/src/components/Communication/Text/TextChatWidget.module.css
@@ -124,6 +124,7 @@
     cursor: pointer;
 
     .textBox {
+      overflow: hidden;
       display: flex;
       flex-direction: column;
       padding-top: 0.5rem;
diff --git a/peer-prep/src/components/Communication/Text/TextChatWidget.tsx b/peer-prep/src/components/Communication/Text/TextChatWidget.tsx
index 460a350a9b..90338ca4ed 100644
--- a/peer-prep/src/components/Communication/Text/TextChatWidget.tsx
+++ b/peer-prep/src/components/Communication/Text/TextChatWidget.tsx
@@ -364,7 +364,7 @@ export default function TextChatWidget({
           //   message: responseText,
           //   replyToId: replyToMessage?.messageId,
           // });
-
+          console.log({ aiButtonType });
           let message;
           message = `Q: ${messageToSend}
 
@@ -372,21 +372,24 @@ _________________
 
 **Response from Gemini:**
 ${responseText}`;
-          // if (isAiChat) {
-          //   message = `${messageToSend}\n--------------\n${responseText}`;
-          // } else {
-          //   if (aiButtonType === AiAssistButtonType.GEN_HINTS) {
-          //     message = `Sure! Here are the hints to the question:\n\n${responseText}`;
-          //   } else if (aiButtonType === AiAssistButtonType.GEN_SOLUTION) {
-          //     message = `Sure! Here is the solution to the question:\n\n${responseText}`;
-          //   } else if (aiButtonType === AiAssistButtonType.CODE_EXPLANATION) {
-          //     message = `Sure! Here is the explanation of your current code:\n\n${responseText}`;
-          //   } else if (
-          //     aiButtonType === AiAssistButtonType.QUESTION_EXPLANATION
-          //   ) {
-          //     message = `Sure! Here is the explanation of the question:\n\n${responseText}`;
-          //   }
-          // }
+
+          if (aiButtonType === AiAssistButtonType.GEN_HINTS) {
+            message = `**Sure! Here are the hints to the question:**
+            _________________
+            ${responseText}`;
+          } else if (aiButtonType === AiAssistButtonType.GEN_SOLUTION) {
+            message = `**Sure! Here is the solution to the question:**
+            _________________
+            ${responseText}`;
+          } else if (aiButtonType === AiAssistButtonType.CODE_EXPLANATION) {
+            message = `**Sure! Here is the explanation of your current code:**
+            _________________
+            ${responseText}`;
+          } else if (aiButtonType === AiAssistButtonType.QUESTION_EXPLANATION) {
+            message = `**Sure! Here is the explanation of the question:**
+            _________________
+            ${responseText}`;
+          }
 
           socket.emit("chat-message", {
             roomId: roomId,
diff --git a/peer-prep/src/utils/utils.tsx b/peer-prep/src/utils/utils.tsx
index e577047bb6..1fe515437a 100644
--- a/peer-prep/src/utils/utils.tsx
+++ b/peer-prep/src/utils/utils.tsx
@@ -1,4 +1,5 @@
 import { CodeHighlight } from "@mantine/code-highlight";
+import { Accordion, AccordionItem, Collapse } from "@mantine/core";
 import ReactMarkdown from "react-markdown";
 
 /**
@@ -64,7 +65,7 @@ export function secondsToMsIfappropriate(s: number): string {
   return s < 0.1 ? `${s * 1000} ms` : `${s} s`;
 }
 
-export type FormattableTextOption = "plain" | "code";
+export type FormattableTextOption = "plain" | "code" | "collapse";
 
 export type FormattableText = {
   content: string;
@@ -79,6 +80,7 @@ export function splitTextIntoObjects(text: string): FormattableText[] {
     // Future patterns like bold, underline can be added here
     // bold: /\*\*([^*]+)\*\*/g,
     // underline: /__(.*?)__/g
+    // match [collapse]asdasd[collapse]
   };
 
   let lastIndex = 0;
@@ -183,6 +185,18 @@ export const generateReactObjects = (text: string) => {
         return <ReactMarkdown key={i}>{textObj.content}</ReactMarkdown>;
         // return <Text key={i}> {textObj.content} </Text>;
         break;
+      case "collapse":
+        return (
+          <Accordion>
+            <Accordion.Item value="aa">
+              <Accordion.Control>Click to open</Accordion.Control>
+              <Accordion.Panel>
+                <ReactMarkdown>{textObj.content}</ReactMarkdown>
+              </Accordion.Panel>
+            </Accordion.Item>
+          </Accordion>
+        );
+        break;
       default:
         return <ReactMarkdown key={i}>{textObj.content}</ReactMarkdown>;
     }