feat(shared): sync sources flow; clean up

frontend/src/conversation/SharedConversation.tsx

@@ -26,7 +26,6 @@ import {
   selectQueries,
 } from './sharedConversationSlice';
 import { useSelector } from 'react-redux';
-const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
 
 export const SharedConversation = () => {
   const navigate = useNavigate();
@@ -39,6 +38,7 @@ export const SharedConversation = () => {
   const status = useSelector(selectStatus);
 
   const inputRef = useRef<HTMLDivElement>(null);
+  const sharedConversationRef = useRef<HTMLDivElement>(null);
   const { t } = useTranslation();
   const dispatch = useDispatch<AppDispatch>();
 
@@ -60,38 +60,6 @@ export const SharedConversation = () => {
     }
   }, []);
 
-  function formatISODate(isoDateStr: string) {
-    const date = new Date(isoDateStr);
-
-    const monthNames = [
-      'Jan',
-      'Feb',
-      'Mar',
-      'Apr',
-      'May',
-      'June',
-      'July',
-      'Aug',
-      'Sept',
-      'Oct',
-      'Nov',
-      'Dec',
-    ];
-
-    const month = monthNames[date.getMonth()];
-    const day = date.getDate();
-    const year = date.getFullYear();
-
-    let hours = date.getHours();
-    const minutes = date.getMinutes();
-    const ampm = hours >= 12 ? 'PM' : 'AM';
-
-    hours = hours % 12;
-    hours = hours ? hours : 12;
-    const minutesStr = minutes < 10 ? '0' + minutes : minutes;
-    const formattedDate = `Published ${month} ${day}, ${year} at ${hours}:${minutesStr} ${ampm}`;
-    return formattedDate;
-  }
   useEffect(() => {
     if (queries.length) {
       queries[queries.length - 1].error && setLastQueryReturnedErr(true);
@@ -100,10 +68,17 @@ export const SharedConversation = () => {
   }, [queries[queries.length - 1]]);
 
   const scrollIntoView = () => {
-    endMessageRef?.current?.scrollIntoView({
+    if (!sharedConversationRef?.current || eventInterrupt) return;
+
+    if (status === 'idle' || !queries[queries.length - 1].response) {
+      sharedConversationRef.current.scrollTo({
         behavior: 'smooth',
-      block: 'start',
+        top: sharedConversationRef.current.scrollHeight,
       });
+    } else {
+      sharedConversationRef.current.scrollTop =
+        sharedConversationRef.current.scrollHeight;
+    }
   };
 
   const fetchQueries = () => {
@@ -202,7 +177,12 @@ export const SharedConversation = () => {
 
   return (
     <div className="flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden dark:bg-raisin-black">
-      <div className="flex w-full justify-center overflow-auto">
+      <div
+        ref={sharedConversationRef}
+        onWheel={handleUserInterruption}
+        onTouchMove={handleUserInterruption}
+        className="flex w-full justify-center overflow-auto"
+      >
         <div className="mt-0 w-11/12 md:w-10/12 lg:w-6/12">
           <div className="mb-2 w-full border-b pb-2 dark:border-b-silver">
             <h1 className="font-semi-bold text-4xl text-chinese-black dark:text-chinese-silver">

frontend/src/conversation/sharedConversationSlice.ts

@@ -6,7 +6,6 @@ import { createAsyncThunk } from '@reduxjs/toolkit';
 import {
   handleFetchSharedAnswer,
   handleFetchSharedAnswerStreaming,
-  handleSearchViaApiKey,
 } from './conversationHandlers';
 
 const API_STREAMING = import.meta.env.VITE_API_STREAMING === 'true';
@@ -45,22 +44,13 @@ export const fetchSharedAnswer = createAsyncThunk<Answer, { question: string }>(
               // set status to 'idle'
               dispatch(sharedConversationSlice.actions.setStatus('idle'));
               dispatch(saveToLocalStorage());
-
-              state.sharedConversation.apiKey &&
-                handleSearchViaApiKey(
-                  question,
-                  state.sharedConversation.apiKey,
-                  state.sharedConversation.queries,
-                ).then((sources) => {
-                  //dispatch streaming sources
-                  sources &&
+            } else if (data.type === 'source') {
               dispatch(
                 updateStreamingSource({
                   index: state.sharedConversation.queries.length - 1,
-                        query: { sources: sources ?? [] },
+                  query: { sources: data.source ?? [] },
                 }),
               );
-                });
             } else if (data.type === 'error') {
               // set status to 'failed'
               dispatch(sharedConversationSlice.actions.setStatus('failed'));
@@ -247,7 +237,8 @@ export const {
   updateStreamingSource,
 } = sharedConversationSlice.actions;
 
-export const selectStatus = (state: RootState) => state.conversation.status;
+export const selectStatus = (state: RootState) =>
+  state.sharedConversation.status;
 export const selectClientAPIKey = (state: RootState) =>
   state.sharedConversation.apiKey;
 export const selectQueries = (state: RootState) =>