add edit message functionality

api/index.py

@@ -1,3 +1,5 @@
+#api/index.py
+
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 from starlette.middleware.sessions import SessionMiddleware

api/models/conversation.py

@@ -1,3 +1,5 @@
+# api/models/conversation.py
+
 from datetime import datetime
 from typing import List
 from pydantic import BaseModel, Field

api/models/user.py

@@ -1,3 +1,4 @@
+#api/models/user.py
 from pydantic import BaseModel
 
 class User(BaseModel):

api/routes/conversation_routes.py

@@ -1,3 +1,5 @@
+#api/routes/conversation_routes.py
+
 from typing import List
 from fastapi import APIRouter, Depends, HTTPException
 from fastapi.responses import StreamingResponse

api/utils/conversation_utils.py

@@ -1,3 +1,5 @@
+# api/utils/conversation_utils.py
+
 from datetime import datetime, timezone
 from typing import List
 

app/components/AutoResizeTextArea.tsx

@@ -1,4 +1,4 @@
-// components/AutoResizeTextarea.tsx
+// app/components/AutoResizeTextarea.tsx
 import React, { useEffect, useRef } from "react";
 import { Textarea, TextareaProps } from "@chakra-ui/react";
 

app/components/ConversationMessages.tsx

@@ -1,3 +1,5 @@
+//app/components/ConversationMessages.tsx
+
 import React, { useEffect, useRef } from "react";
 import { Box, Text, VStack, Button, Center, Heading } from "@chakra-ui/react";
 import ReactMarkdown from "react-markdown";
@@ -19,6 +21,7 @@ interface ConversationMessagesProps {
   messages: Message[];
   handleHideMessage: (index: number) => Promise<void>;
   handleDeleteMessage: (index: number) => Promise<void>;
+  handleEditMessage: (index: number) => Promise<void>;
   userName?: string;
 }
 
@@ -32,6 +35,7 @@ const ConversationMessages: React.FC<ConversationMessagesProps> = ({
   messages,
   handleHideMessage,
   handleDeleteMessage,
+  handleEditMessage,
   userName = "User",
 }) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -157,6 +161,18 @@ const ConversationMessages: React.FC<ConversationMessagesProps> = ({
             >
               delete
             </Button>
+            {message.role === "user" && (
+              <Button
+                size="xs"
+                variant="ghost"
+                onClick={() => handleEditMessage(index)}
+                mt={4}
+                px={1}
+                color="gray.600"
+              >
+                edit
+              </Button>
+            )}
           </Box>
         ))
       )}

app/components/Sidebar.tsx

@@ -1,3 +1,5 @@
+//app/components/Sidebar.tsx
+
 import { useState } from "react";
 import {
   Box,

app/page.tsx

@@ -1,4 +1,6 @@
 "use client";
+
+// app/page.tsx
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useSearchParams } from "next/navigation";
@@ -26,6 +28,7 @@ import {
   fetchConversationById,
   handleHideMessage,
   handleDeleteMessage,
+  handleEditMessage,
 } from "./utils";
 import Link from "next/link";
 import { jwtDecode, JwtPayload } from "jwt-decode";
@@ -82,6 +85,19 @@ export default function Home() {
     }
   };
 
+    const handleEditMessageWrapper = async (index: number) => {
+      if (conversationId) {
+        await handleEditMessage(
+          index,
+          messages,
+          conversationId,
+          setMessages,
+          setTextValue,
+          cookies
+        );
+      }
+    };
+
   useEffect(() => {
     const token = searchParams.get("token");
 
@@ -199,6 +215,7 @@ export default function Home() {
               messages={messages}
               handleHideMessage={handleHideMessageWrapper}
               handleDeleteMessage={handleDeleteMessageWrapper}
+              handleEditMessage={handleEditMessageWrapper}
               userName={clientUserName}
             />
           </Box>

app/utils.ts

@@ -1,3 +1,5 @@
+//app/utils.ts
+
 import { Message } from "./components/ConversationMessages";
 import { LLMProviders } from "./llm_providers";
 
@@ -267,4 +269,35 @@ export const handleDeleteMessage = async (
   } catch (error) {
     console.error("Error deleting message:", error);
   }
+};
+
+
+export const handleEditMessage = async (
+  index: number,
+  messages: Message[],
+  conversationId: string,
+  setMessages: React.Dispatch<React.SetStateAction<Message[]>>,
+  setTextValue: React.Dispatch<React.SetStateAction<string>>,
+  cookies: { [key: string]: string }
+) => {
+  try {
+    const updatedMessages = messages.slice(0, 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);
+    setTextValue(messages[index].content);
+  } catch (error) {
+    console.error("Error editing message:", error);
+  }
 };