add hiding functionality

hack4impact-uiuc · Mar 29, 2024 · 998d448 · 998d448
1 parent a93ed98
commit 998d448
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 25 deletions.
diff --git a/app/components/ConversationMessages.tsx b/app/components/ConversationMessages.tsx
@@ -18,6 +18,7 @@ export interface Message {
 interface ConversationMessagesProps {
   messages: Message[];
   handleHideMessage: (index: number) => Promise<void>;
+  handleDeleteMessage: (index: number) => Promise<void>;
   userName?: string;
 }
 
@@ -30,13 +31,14 @@ type MathComponents = {
 const ConversationMessages: React.FC<ConversationMessagesProps> = ({
   messages,
   handleHideMessage,
+  handleDeleteMessage,
   userName = "User",
 }) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
+  }, [messages.length]);
 
   return (
     <VStack spacing={4} align="stretch" width="100%" mb={10}>
@@ -45,7 +47,10 @@ const ConversationMessages: React.FC<ConversationMessagesProps> = ({
           key={index}
           borderRadius="none"
           borderWidth="1px"
-          p={4}
+          pt={4}
+          pl={4}
+          pr={4}
+          pb={1}
           borderColor={message.hidden ? "gray.300" : "black"}
           alignSelf={message.role === "user" ? "flex-end" : "flex-start"}
           maxWidth="100%"
@@ -61,6 +66,11 @@ const ConversationMessages: React.FC<ConversationMessagesProps> = ({
             remarkPlugins={[remarkGfm, remarkMath]}
             components={
               {
+                p: ({ children }) => (
+                  <Text color={message.hidden ? "gray.500" : "inherit"}>
+                    {children}
+                  </Text>
+                ),
                 code({ node, className, children, ...props }) {
                   const match = /language-(\w+)/.exec(className || "");
                   return match ? (
@@ -98,10 +108,22 @@ const ConversationMessages: React.FC<ConversationMessagesProps> = ({
             size="xs"
             variant="ghost"
             onClick={() => handleHideMessage(index)}
-            ml="auto"
-            mt={2}
+            ml={-1}
+            mt={4}
+            px={1}
+            color="gray.600"
           >
-            hide
+            {message.hidden ? "show" : "hide"}
+          </Button>
+          <Button
+            size="xs"
+            variant="ghost"
+            onClick={() => handleDeleteMessage(index)}
+            mt={4}
+            px={1}
+            color="gray.600"
+          >
+            delete
           </Button>
         </Box>
       ))}

diff --git a/app/page.tsx b/app/page.tsx
@@ -24,6 +24,8 @@ import {
   handleModelChange,
   fetchConversations,
   fetchConversationById,
+  handleHideMessage,
+  handleDeleteMessage,
 } from "./utils";
 import Link from "next/link";
 
@@ -48,27 +50,27 @@ export default function Home() {
     setTextValue(event.target.value);
   };
 
-  const handleHideMessage = async (index: number) => {
-    try {
-      const updatedMessages = messages.map((msg, i) =>
-        i === index ? { ...msg, hidden: !msg.hidden } : msg
+  const handleHideMessageWrapper = async (index: number) => {
+    if (conversationId) {
+      await handleHideMessage(
+        index,
+        messages,
+        conversationId,
+        setMessages,
+        cookies
       );
-      await fetch(
-        `${process.env.BACKEND_URL}/conversations/${conversationId}/messages`,
-        {
-          method: "PUT",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${cookies.token}`,
-          },
-          body: JSON.stringify({ messages: updatedMessages }),
-          mode: "cors",
-          credentials: "include",
-        }
+    }
+  };
+
+  const handleDeleteMessageWrapper = async (index: number) => {
+    if (conversationId) {
+      await handleDeleteMessage(
+        index,
+        messages,
+        conversationId,
+        setMessages,
+        cookies
       );
-      setMessages(updatedMessages);
-    } catch (error) {
-      console.error("Error toggling message visibility:", error);
     }
   };
 
@@ -165,7 +167,8 @@ export default function Home() {
           <Box width="100%" pt={2} pb={2}>
             <ConversationMessages
               messages={messages}
-              handleHideMessage={handleHideMessage}
+              handleHideMessage={handleHideMessageWrapper}
+              handleDeleteMessage={handleDeleteMessageWrapper}
             />
           </Box>
         </VStack>

diff --git a/app/utils.ts b/app/utils.ts
@@ -206,3 +206,62 @@ export const handleModelChange = async (
     });
   }
 };
+
+
+export const handleHideMessage = async (
+  index: number,
+  messages: Message[],
+  conversationId: string,
+  setMessages: React.Dispatch<React.SetStateAction<Message[]>>,
+  cookies: { [key: string]: string }
+) => {
+  try {
+    const updatedMessages = messages.map((msg, i) =>
+      i === index ? { ...msg, hidden: !msg.hidden } : msg
+    );
+    await fetch(
+      `${process.env.BACKEND_URL}/conversations/${conversationId}/messages`,
+      {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${cookies.token}`,
+        },
+        body: JSON.stringify(updatedMessages),
+        mode: "cors",
+        credentials: "include",
+      }
+    );
+    setMessages(updatedMessages);
+  } catch (error) {
+    console.error("Error toggling message visibility:", error);
+  }
+};
+
+export const handleDeleteMessage = async (
+  index: number,
+  messages: Message[],
+  conversationId: string,
+  setMessages: React.Dispatch<React.SetStateAction<Message[]>>,
+  cookies: { [key: string]: string }
+) => {
+  try {
+    const updatedMessages = messages.filter((_, i) => i !== index);
+    await fetch(
+      `${process.env.BACKEND_URL}/conversations/${conversationId}/messages`,
+      {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${cookies.token}`,
+        },
+        body: JSON.stringify(updatedMessages),
+        mode: "cors",
+        credentials: "include",
+      }
+    );
+    setMessages(updatedMessages);
+  } catch (error) {
+    console.error("Error deleting message:", error);
+  }
+};