fix: ai chat

CS3219-AY2425S1 · Nov 13, 2024 · ecbf72a · ecbf72a
1 parent 59c5d17
commit ecbf72a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 17 deletions.
diff --git 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
@@ -364,29 +364,32 @@ export default function TextChatWidget({
           //   message: responseText,
           //   replyToId: replyToMessage?.messageId,
           // });
-
+          console.log({ aiButtonType });
           let message;
           message = `Q: ${messageToSend}
 
 _________________
 
 **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
@@ -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>;
     }