Fixed edit and resend issue

frontend/src/api/endpoints.ts

@@ -18,6 +18,7 @@ const endpoints = {
     FEEDBACK_ANALYTICS: '/api/get_feedback_analytics',
     LOGS: `/api/get_user_logs`,
     MANAGE_SYNC: '/api/manage_sync',
+    UPDATE_CONVERSATION_QUERIES: '/api/update_conversation_queries',
   },
   CONVERSATION: {
     ANSWER: '/api/answer',

frontend/src/api/services/conversationService.ts

@@ -27,6 +27,8 @@ const conversationService = {
     apiClient.get(endpoints.CONVERSATION.DELETE_ALL),
   update: (data: any): Promise<any> =>
     apiClient.post(endpoints.CONVERSATION.UPDATE, data),
+  update_conversation_queries: (data: any): Promise<any> =>
+    apiClient.post(endpoints.USER.UPDATE_CONVERSATION_QUERIES, data),
 };
 
 export default conversationService;

frontend/src/conversation/Conversation.tsx

@@ -15,6 +15,7 @@ import { ShareConversationModal } from '../modals/ShareConversationModal';
 import { setConversation, updateConversationId } from './conversationSlice';
 import { selectConversationId } from '../preferences/preferenceSlice';
 import { AppDispatch } from '../store';
+import conversationService from '../api/services/conversationService';
 import ConversationBubble from './ConversationBubble';
 import { handleSendFeedback } from './conversationHandlers';
 import { FEEDBACK, Query } from './conversationModels';
@@ -84,15 +85,33 @@ export default function Conversation() {
   const handleQuestion = ({
     question,
     isRetry = false,
+    updated = null,
+    indx = null,
   }: {
     question: string;
     isRetry?: boolean;
+    updated?: boolean | null;
+    indx?: number | null;
   }) => {
-    question = question.trim();
-    if (question === '') return;
-    setEventInterrupt(false);
-    !isRetry && dispatch(addQuery({ prompt: question })); //dispatch only new queries
-    fetchStream.current = dispatch(fetchAnswer({ question }));
+    if (updated === true) {
+      conversationService
+        .update_conversation_queries({
+          id: conversationId,
+          limit: indx,
+        })
+        .then((response) => response.json())
+        .then((data) => {
+          dispatch(setConversation(data));
+          !isRetry && dispatch(addQuery({ prompt: question })); //dispatch only new queries
+          fetchStream.current = dispatch(fetchAnswer({ question }));
+        });
+    } else {
+      question = question.trim();
+      if (question === '') return;
+      setEventInterrupt(false);
+      !isRetry && dispatch(addQuery({ prompt: question })); //dispatch only new queries
+      fetchStream.current = dispatch(fetchAnswer({ question }));
+    }
   };
 
   const handleFeedback = (query: Query, feedback: FEEDBACK, index: number) => {
@@ -103,8 +122,14 @@ export default function Conversation() {
     );
   };
 
-  const handleQuestionSubmission = () => {
-    if (inputRef.current?.value && status !== 'loading') {
+  const handleQuestionSubmission = (
+    updatedQuestion?: string,
+    updated?: boolean,
+    indx?: number,
+  ) => {
+    if (updated === true) {
+      handleQuestion({ question: updatedQuestion as string, updated, indx });
+    } else if (inputRef.current?.value && status !== 'loading') {
       if (lastQueryReturnedErr) {
         // update last failed query with new prompt
         dispatch(
@@ -289,6 +314,8 @@ export default function Conversation() {
                     key={`${index}QUESTION`}
                     message={query.prompt}
                     type="QUESTION"
+                    handleUpdatedQuestionSubmission={handleQuestionSubmission}
+                    questionNumber={index}
                     sources={query.sources}
                   ></ConversationBubble>
 
@@ -327,7 +354,7 @@ export default function Conversation() {
             <div className="mx-1 cursor-pointer rounded-full p-3 text-center hover:bg-gray-3000 dark:hover:bg-dark-charcoal">
               <img
                 className="ml-[4px] h-6 w-6 text-white "
-                onClick={handleQuestionSubmission}
+                onClick={() => handleQuestionSubmission()}
                 src={isDarkTheme ? SendDark : Send}
               ></img>
             </div>

frontend/src/conversation/ConversationBubble.tsx

@@ -13,6 +13,7 @@ import Document from '../assets/document.svg';
 import Like from '../assets/like.svg?react';
 import Link from '../assets/link.svg';
 import Sources from '../assets/sources.svg';
+import Edit from '../assets/edit.svg';
 import Avatar from '../components/Avatar';
 import CopyButton from '../components/CopyButton';
 import Sidebar from '../components/Sidebar';
@@ -36,36 +37,103 @@ const ConversationBubble = forwardRef<
     handleFeedback?: (feedback: FEEDBACK) => void;
     sources?: { title: string; text: string; source: string }[];
     retryBtn?: React.ReactElement;
+    questionNumber?: number;
+    handleUpdatedQuestionSubmission?: (
+      updatedquestion?: string,
+      updated?: boolean,
+      index?: number,
+    ) => void;
   }
 >(function ConversationBubble(
-  { message, type, className, feedback, handleFeedback, sources, retryBtn },
+  {
+    message,
+    type,
+    className,
+    feedback,
+    handleFeedback,
+    sources,
+    retryBtn,
+    questionNumber,
+    handleUpdatedQuestionSubmission,
+  },
   ref,
 ) {
   const chunks = useSelector(selectChunks);
   const selectedDocs = useSelector(selectSelectedDocs);
   const [isLikeHovered, setIsLikeHovered] = useState(false);
+  const [isEditClicked, setIsEditClicked] = useState(false);
   const [isDislikeHovered, setIsDislikeHovered] = useState(false);
+  const [isQuestionHovered, setIsQuestionHovered] = useState(false);
+  const [editInputBox, setEditInputBox] = useState<string>('');
+
   const [isLikeClicked, setIsLikeClicked] = useState(false);
   const [isDislikeClicked, setIsDislikeClicked] = useState(false);
   const [activeTooltip, setActiveTooltip] = useState<number | null>(null);
   const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
 
+  const handleEditClick = () => {
+    setIsEditClicked(false);
+    handleUpdatedQuestionSubmission?.(editInputBox, true, questionNumber);
+  };
   let bubble;
   if (type === 'QUESTION') {
     bubble = (
       <div
-        ref={ref}
-        className={`flex flex-row-reverse self-end flex-wrap ${className}`}
+        onMouseEnter={() => setIsQuestionHovered(true)}
+        onMouseLeave={() => setIsQuestionHovered(false)}
       >
-        <Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
         <div
-          style={{
-            wordBreak: 'break-word',
-          }}
-          className="ml-10 mr-2 flex items-center rounded-[28px] bg-purple-30 py-[14px] px-[19px] text-white max-w-full whitespace-pre-wrap leading-normal"
+          ref={ref}
+          className={`flex flex-row-reverse self-end flex-wrap ${className}`}
         >
-          {message}
+          <Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
+          {!isEditClicked && (
+            <div
+              style={{
+                wordBreak: 'break-word',
+              }}
+              className="ml-2 mr-2 flex items-center rounded-[28px] bg-purple-30 py-[14px] px-[19px] text-white max-w-full whitespace-pre-wrap leading-normal"
+            >
+              {message}
+            </div>
+          )}
+          {isEditClicked && (
+            <input
+              onChange={(e) => setEditInputBox(e.target.value)}
+              value={editInputBox}
+              className="ml-2 mr-2 rounded-[28px] py-[14px] px-[19px] border-[1.5px] border-black"
+            />
+          )}
+          <div
+            className={`  flex items-center ${isQuestionHovered ? 'visible' : 'invisible'}`}
+          >
+            <img
+              src={Edit}
+              alt="Edit"
+              className="cursor-pointer"
+              onClick={() => {
+                setIsEditClicked(true);
+                setEditInputBox(message);
+              }}
+            />
+          </div>
         </div>
+        {isEditClicked && (
+          <div className={`flex gap-3 self-end mt-3 sm:mt-0 `}>
+            <button
+              className="ml-2 mr-2 flex items-center rounded-[28px]  font-semibold hover:font-bold py-[14px] px-[19px] no-underline hover:underline  text-purple-500 max-w-full whitespace-pre-wrap leading-normal"
+              onClick={() => setIsEditClicked(false)}
+            >
+              Cancel
+            </button>
+            <button
+              className="ml-2 mr-2 flex items-center rounded-[28px] bg-purple-300 hover:bg-purple-100 font-bold py-[8px] px-[19px] text-purple-500 max-w-full whitespace-pre-wrap leading-normal"
+              onClick={() => handleEditClick()}
+            >
+              Update
+            </button>
+          </div>
+        )}
       </div>
     );
   } else {