(refactor:conv) wrap msgs separately

frontend/src/conversation/Conversation.tsx

@@ -1,23 +1,19 @@
-import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
-import Hero from '../Hero';
 import { useDropzone } from 'react-dropzone';
 import DragFileUpload from '../assets/DragFileUpload.svg';
-import ArrowDown from '../assets/arrow-down.svg';
 import newChatIcon from '../assets/openNewChat.svg';
 import Send from '../assets/send.svg';
 import SendDark from '../assets/send_dark.svg';
 import ShareIcon from '../assets/share.svg';
 import SpinnerDark from '../assets/spinner-dark.svg';
 import Spinner from '../assets/spinner.svg';
-import RetryIcon from '../components/RetryIcon';
 import { useDarkTheme, useMediaQuery } from '../hooks';
 import { ShareConversationModal } from '../modals/ShareConversationModal';
 import { selectConversationId } from '../preferences/preferenceSlice';
 import { AppDispatch } from '../store';
-import ConversationBubble from './ConversationBubble';
 import { handleSendFeedback } from './conversationHandlers';
 import { FEEDBACK, Query } from './conversationModels';
 import {
@@ -32,6 +28,7 @@ import {
 } from './conversationSlice';
 import Upload from '../upload/Upload';
 import { ActiveState } from '../models/misc';
+import ConversationMessages from './ConversationMessages';
 
 export default function Conversation() {
   const queries = useSelector(selectQueries);
@@ -42,9 +39,7 @@ export default function Conversation() {
   const conversationRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [isDarkTheme] = useDarkTheme();
-  const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
   const fetchStream = useRef<any>(null);
-  const [eventInterrupt, setEventInterrupt] = useState(false);
   const [lastQueryReturnedErr, setLastQueryReturnedErr] = useState(false);
   const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
   const { t } = useTranslation();
@@ -91,16 +86,6 @@ export default function Conversation() {
     },
   });
 
-  const handleUserInterruption = () => {
-    if (!eventInterrupt && status === 'loading') setEventInterrupt(true);
-  };
-  useEffect(() => {
-    !eventInterrupt && scrollIntoView();
-    if (queries.length == 0) {
-      resetConversation();
-    }
-  }, [queries.length, queries[queries.length - 1]]);
-
   useEffect(() => {
     const element = document.getElementById('inputbox') as HTMLTextAreaElement;
     if (element) {
@@ -115,19 +100,6 @@ export default function Conversation() {
     }
   }, [queries[queries.length - 1]]);
 
-  const scrollIntoView = () => {
-    if (!conversationRef?.current || eventInterrupt) return;
-
-    if (status === 'idle' || !queries[queries.length - 1].response) {
-      conversationRef.current.scrollTo({
-        behavior: 'smooth',
-        top: conversationRef.current.scrollHeight,
-      });
-    } else {
-      conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
-    }
-  };
-
   const handleQuestion = ({
     question,
     isRetry = false,
@@ -146,7 +118,6 @@ export default function Conversation() {
     } else {
       question = question.trim();
       if (question === '') return;
-      setEventInterrupt(false);
       !isRetry && dispatch(addQuery({ prompt: question })); //dispatch only new queries
       fetchStream.current = dispatch(fetchAnswer({ question }));
     }
@@ -215,57 +186,6 @@ export default function Conversation() {
     if (queries && queries.length > 0) resetConversation();
   };
 
-  const prepResponseView = (query: Query, index: number) => {
-    let responseView;
-    if (query.response) {
-      responseView = (
-        <ConversationBubble
-          className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'}`}
-          key={`${index}ANSWER`}
-          message={query.response}
-          type={'ANSWER'}
-          sources={query.sources}
-          toolCalls={query.tool_calls}
-          feedback={query.feedback}
-          handleFeedback={(feedback: FEEDBACK) =>
-            handleFeedback(query, feedback, index)
-          }
-        ></ConversationBubble>
-      );
-    } else if (query.error) {
-      const retryBtn = (
-        <button
-          className="flex items-center justify-center gap-3 self-center rounded-full py-3 px-5  text-lg text-gray-500 transition-colors delay-100 hover:border-gray-500 disabled:cursor-not-allowed dark:text-bright-gray"
-          disabled={status === 'loading'}
-          onClick={() => {
-            handleQuestion({
-              question: queries[queries.length - 1].prompt,
-              isRetry: true,
-            });
-          }}
-        >
-          <RetryIcon
-            width={isMobile ? 12 : 12} // change the width and height according to device size if necessary
-            height={isMobile ? 12 : 12}
-            fill={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
-            stroke={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
-            strokeWidth={10}
-          />
-        </button>
-      );
-      responseView = (
-        <ConversationBubble
-          className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'} `}
-          key={`${index}ERROR`}
-          message={query.error}
-          type="ERROR"
-          retryBtn={retryBtn}
-        ></ConversationBubble>
-      );
-    }
-    return responseView;
-  };
-
   const handleInput = () => {
     if (inputRef.current) {
       if (window.innerWidth < 350) inputRef.current.style.height = 'auto';
@@ -276,23 +196,9 @@ export default function Conversation() {
       )}px`;
     }
   };
-  const checkScroll = () => {
-    const el = conversationRef.current;
-    if (!el) return;
-    const isBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 10;
-    setHasScrolledToLast(isBottom);
-  };
-  useEffect(() => {
-    handleInput();
-    window.addEventListener('resize', handleInput);
-    conversationRef.current?.addEventListener('scroll', checkScroll);
-    return () => {
-      window.removeEventListener('resize', handleInput);
-      conversationRef.current?.removeEventListener('scroll', checkScroll);
-    };
-  }, []);
+
   return (
-    <div className="flex flex-col gap-1 h-full justify-end ">
+    <div className="flex flex-col gap-1 h-full justify-end">
       {conversationId && queries.length > 0 && (
         <div className="absolute top-4 right-20">
           <div className="flex mt-2 items-center gap-4">
@@ -327,64 +233,23 @@ export default function Conversation() {
             </button>
           </div>
           {isShareModalOpen && (
-            <div className="fixed inset-0 z-50 flex items-center justify-center">
-              <div className="absolute inset-0 bg-black/50 dark:bg-gray-alpha" />
-              <div className="relative z-50 w-full max-w-md rounded-3xl">
-                <ShareConversationModal
-                  close={() => {
-                    setShareModalState(false);
-                  }}
-                  conversationId={conversationId}
-                />
-              </div>
-            </div>
+            <ShareConversationModal
+              close={() => {
+                setShareModalState(false);
+              }}
+              conversationId={conversationId}
+            />
           )}
         </div>
       )}
-      <div
-        ref={conversationRef}
-        onWheel={handleUserInterruption}
-        onTouchMove={handleUserInterruption}
-        className="flex justify-center w-full overflow-y-auto h-screen sm:mt-12"
-      >
-        {queries.length > 0 && !hasScrolledToLast && (
-          <button
-            onClick={scrollIntoView}
-            aria-label="scroll to bottom"
-            className="fixed bottom-40 right-14 z-10 flex h-7 w-7  items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 bg-opacity-50 dark:bg-purple-taupe md:h-9 md:w-9 md:bg-opacity-100 "
-          >
-            <img
-              src={ArrowDown}
-              alt="arrow down"
-              className="h-4 w-4 opacity-50 md:h-5 md:w-5"
-            />
-          </button>
-        )}
 
-        {queries.length > 0 ? (
-          <div className="w-full md:w-8/12">
-            {queries.map((query, index) => {
-              return (
-                <Fragment key={index}>
-                  <ConversationBubble
-                    className={'first:mt-5'}
-                    key={`${index}QUESTION`}
-                    message={query.prompt}
-                    type="QUESTION"
-                    handleUpdatedQuestionSubmission={handleQuestionSubmission}
-                    questionNumber={index}
-                    sources={query.sources}
-                  ></ConversationBubble>
-
-                  {prepResponseView(query, index)}
-                </Fragment>
-              );
-            })}
-          </div>
-        ) : (
-          <Hero handleQuestion={handleQuestion} />
-        )}
-      </div>
+      <ConversationMessages
+        handleQuestion={handleQuestion}
+        handleQuestionSubmission={handleQuestionSubmission}
+        handleFeedback={handleFeedback}
+        queries={queries}
+        status={status}
+      />
 
       <div className="flex flex-col items-end self-center rounded-2xl bg-opacity-0 z-3 w-[calc(min(742px,92%))] h-auto py-1">
         <div