Moved stream status into the last message object

1FF · May 9, 2024 · 027af43 · 027af43
1 parent 5d1d89e
commit 027af43
Show file tree

Hide file tree

Showing 14 changed files with 2,052 additions and 2,051 deletions.
diff --git a/__tests__/feature/chat-history.spec.jsx b/__tests__/feature/chat-history.spec.jsx
@@ -187,7 +187,6 @@ describe('Chat-history event works and visualizes items accordingly', () => {
 
     const { chat } = root.store.getState();
     expect(chat.isLoading).toBe(false);
-    expect(chat.isStreaming).toBe(false);
   });
 
   test('email form submitted does not submit the email when the field is empty', async () => {
@@ -293,7 +292,6 @@ describe('Chat-history event works and visualizes items accordingly', () => {
 
     const { chat } = root.store.getState();
     expect(chat.isLoading).toBe(false);
-    expect(chat.isStreaming).toBe(false);
   });
 
   test('on chat-history event with errors in the callback visualizes the error', async () => {

diff --git a/dist/index.es.js b/dist/index.es.js
diff --git a/dist/index.es.js.map b/dist/index.es.js.map
diff --git a/dist/index.umd.js b/dist/index.umd.js
diff --git a/dist/index.umd.js.map b/dist/index.umd.js.map
diff --git a/src/components/Stream/assistant.tsx b/src/components/Stream/assistant.tsx
@@ -4,7 +4,7 @@ import Markdown from 'react-markdown';
 import { Definition } from '../../config/enums';
 import { useAppSelector } from '../../hooks';
 import { AssistantProps } from '../../interfaces/component';
-import { getChat, getLastHistoryId, sortBySequence } from '../../store/slices/chat';
+import { getLastHistoryId, sortBySequence } from '../../store/slices/chat';
 import { getMeta } from '../../store/slices/meta';
 import { extractVideoCode, uuidV4 } from '../../utils';
 import { replaceNewRowSymbols } from '../../utils/formatting';
@@ -14,27 +14,24 @@ import OptionList from './options';
 import { flickerEffect } from './variants';
 
 const Assistant = ({ message, itemId }: AssistantProps) => {
-  const { isStreaming } = useAppSelector(getChat);
   const { pd } = useAppSelector(getMeta);
   const isLast = useAppSelector(getLastHistoryId) === itemId;
-  const { base: baseFlicker } = flickerEffect({ isTyping: isStreaming && isLast });
+  const { base: baseFlicker } = flickerEffect({ isTyping: !!message.isStreaming });
   const sortedContent = [...message.content].sort(sortBySequence);
 
   return (
     <>
       {sortedContent.map((it) => {
         if (it.type === Definition.text) {
           return (
-            <div
-              key={uuidV4()}
-              className="tw--flex tw--flex-col tw--space-y-[10px]"
-              data-e2e="assistant-text"
-            >
+            <div key={uuidV4()} className="tw--flex tw--flex-col tw--space-y-[10px]" data-e2e="assistant-text">
               <span className={baseFlicker()}>
                 <Markdown
                   key={uuidV4()}
                   components={{
-                    a(props) { return <MarkdownLink properties={props} />; },
+                    a(props) {
+                      return <MarkdownLink properties={props} />;
+                    },
                   }}
                 >
                   {replaceNewRowSymbols(it[it.type] || '')}
@@ -85,7 +82,6 @@ const Assistant = ({ message, itemId }: AssistantProps) => {
         if (it.type === Definition.email) {
           return it[it.type];
         }
-
       })}
     </>
   );

diff --git a/src/components/Stream/bubble.tsx b/src/components/Stream/bubble.tsx
@@ -11,32 +11,31 @@ import { streamBubble as variant } from './variants';
 const StreamBubble = ({ itemId }: { itemId: string }) => {
   const record = useAppSelector(getRecordById(itemId));
 
-  return (record && (
-    <div className={variant({ type: record.role }).base()}
-      data-e2e={record.role === Roles.assistant ? 'stream-assistant-msg' : 'user-msg'}
-    >
-      {record.role === Roles.assistant
-        ? (
-          <MemoizedAssistant
-            message={record}
-            itemId={itemId}
-          />
-        )
-        :
-        [...record.content].map((record) =>
-          <User
-            key={uuidV4()}
-            record={{
-              text: record.text || '',
-              resend: record.resend || false,
-              sent: record.sent || true,
-              groupId: record.groupId || '',
-              itemId
-            }}
-          />)
-      }
-    </div>
-  ));
+  return (
+    record && (
+      <div
+        className={variant({ type: record.role }).base()}
+        data-e2e={record.role === Roles.assistant ? 'stream-assistant-msg' : 'user-msg'}
+      >
+        {record.role === Roles.assistant ? (
+          <MemoizedAssistant message={record} itemId={itemId} />
+        ) : (
+          [...record.content].map((record) => (
+            <User
+              key={uuidV4()}
+              record={{
+                text: record.text || '',
+                resend: record.resend || false,
+                sent: record.sent || true,
+                groupId: record.groupId || '',
+                itemId,
+              }}
+            />
+          ))
+        )}
+      </div>
+    )
+  );
 };
 
 export const MemoizedStreamBubble = React.memo(StreamBubble);

diff --git a/src/hooks/foot.ts b/src/hooks/foot.ts
@@ -9,7 +9,7 @@ import { useAppSelector } from '.';
 export const useFootProps = () => {
   const { cid, systemType, marketing, pd } = useAppSelector(getMeta);
   const { translations, purpose, specialUrls } = useAppSelector(getConfig);
-  const { isLoading, isStreaming, record, error: streamError, thread } = useAppSelector(getChat);
+  const { isLoading, record, error: streamError, thread } = useAppSelector(getChat);
 
   // @ts-expect-error passing only the needed prop
   const currentThread = getThreadId({ chat: { thread } });
@@ -30,7 +30,7 @@ export const useFootProps = () => {
     currentEmail,
     translations,
     pd,
-    isStreaming,
+    isStreaming: false,
     isPaymentButtonVisible: false,
     isPaymentFormVisible: false,
     isEmailFormVisible: false,
@@ -51,6 +51,10 @@ export const useFootProps = () => {
   const hasPaymentIntent = lastMsg && lastMsg?.content.find((m) => m.payment);
   const hasEmailIntent = lastMsg && lastMsg?.content.find((m) => m.email);
 
+  if (lastMsg && 'isStreaming' in lastMsg) {
+    staticProps.isStreaming = !!lastMsg.isStreaming;
+  }
+
   if (isLastAssistantMsg && hasPaymentIntent) {
     return {
       ...staticProps,

diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
@@ -146,10 +146,11 @@ export interface UserHistoryDataFiller {
 
 export interface AssistantHistoryDataFiller {
   id: string;
-  content?: AssistantRecord;
-  sequence?: number;
+  isStreaming: boolean;
   term: string;
   threadId: string;
+  sequence?: number;
+  content?: AssistantRecord;
 }
 
 export interface AssistantHistoryInitialMessage {

diff --git a/src/interfaces/store.ts b/src/interfaces/store.ts
@@ -13,6 +13,7 @@ export interface ChatRecord {
   id: string;
   role: string;
   time?: number;
+  isStreaming?: boolean;
   content: Array<MessageProperties>;
 }
 
@@ -24,7 +25,6 @@ export interface ChatState {
   lastGroupId: string;
   connected: boolean;
   closed: boolean;
-  isStreaming: boolean;
   record: {
     [key: string]: {
       historyData: Record<string, ChatRecord>;

diff --git a/src/middleware/socket.ts b/src/middleware/socket.ts
@@ -26,7 +26,6 @@ import {
   setConnected,
   setError,
   setIsLoading,
-  setIsStreaming,
   setLastGroupPointer,
   setOutgoing,
   setTypingTimeoutExpired,
@@ -59,7 +58,9 @@ const chatMiddleware: Middleware = (store) => (next) => (action) => {
   };
 
   const handleMessageSending = (data: ClientMessage): void => {
-    if (action.$isSync) { return; }
+    if (action.$isSync) {
+      return;
+    }
 
     if (data.role === Roles.user) {
       store.dispatch(setIsLoading());
@@ -189,7 +190,6 @@ const chatMiddleware: Middleware = (store) => (next) => (action) => {
     Events.chatHistory,
     ({ history: servedHistory, errors, region, term: servedTerm, threadId }: ServerData) => {
       store.dispatch(resetIsLoading());
-      store.dispatch(setIsStreaming(false));
       store.dispatch(setRegion(region));
       store.dispatch(initiateThread({ threadId, term: servedTerm }));
 
@@ -233,7 +233,6 @@ const chatMiddleware: Middleware = (store) => (next) => (action) => {
   );
 
   socket.on(Events.streamStart, ({ id, term, threadId }: { id: string; term: string; threadId: string }) => {
-    store.dispatch(setIsStreaming(true));
     store.dispatch(resetIsLoading());
     store.dispatch(resetOutgoing());
     store.dispatch(resetError());
@@ -242,6 +241,7 @@ const chatMiddleware: Middleware = (store) => (next) => (action) => {
         id,
         term,
         threadId,
+        isStreaming: true,
       }),
     );
   });
@@ -262,6 +262,7 @@ const chatMiddleware: Middleware = (store) => (next) => (action) => {
           sequence: data.sequence,
           term: data.term,
           threadId: data.threadId,
+          isStreaming: true,
           content: {
             type: data.type,
             [data.type]: data[data.type],
@@ -277,7 +278,14 @@ const chatMiddleware: Middleware = (store) => (next) => (action) => {
   );
 
   socket.on(Events.streamEnd, ({ id, term, threadId }: { id: string; term: string; threadId: string }) => {
-    store.dispatch(setIsStreaming(false));
+    store.dispatch(
+      fillAssistantHistoryData({
+        id,
+        term,
+        threadId,
+        isStreaming: false,
+      }),
+    );
   });
 
   socket.on(Events.streamError, onError);

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -32,7 +32,6 @@ export const store = configureStore({
       intentionsMiddleware,
       createStateSyncMiddleware({
         whitelist: [
-          'chat/setIsStreaming',
           'chat/resetIsLoading',
           'chat/resetOutgoing',
           'chat/resetError',

diff --git a/src/store/initialState.ts b/src/store/initialState.ts
@@ -55,7 +55,6 @@ export const chat: ChatState = {
   lastGroupId: uuidV4(),
   connected: false,
   closed: false,
-  isStreaming: false,
   record: {},
   thread: {},
 };

diff --git a/src/store/slices/chat.ts b/src/store/slices/chat.ts
@@ -75,7 +75,12 @@ const configSlice = createSlice({
         for (let i = 0; i < serverIds.length; i++) {
           const currentId = serverIds[i];
 
-          if (!clientIds.includes(currentId)) {
+          if (clientIds.includes(currentId)) {
+            draft.record[threadId].historyData[currentId] = {
+              ...draft.record[threadId].historyData[currentId],
+              isStreaming: false,
+            };
+          } else {
             clientIds.splice(i, 0, currentId);
 
             draft.record[threadId].historyData[currentId] = history[i];
@@ -103,20 +108,23 @@ const configSlice = createSlice({
     },
     fillAssistantHistoryData(
       state,
-      { payload: { id, content, sequence, threadId } }: PayloadAction<AssistantHistoryDataFiller>,
+      { payload: { id, content, sequence, threadId, isStreaming } }: PayloadAction<AssistantHistoryDataFiller>,
     ) {
       return produce(state, (draft: Draft<ChatState>) => {
         if (draft.record[threadId] && !draft.record[threadId].historyData[id]) {
-          draft.record[threadId].historyData[id] = { id, role: Roles.assistant, content: [] };
+          draft.record[threadId].historyData[id] = { id, role: Roles.assistant, isStreaming, content: [] };
           draft.record[threadId].historyIds.push(id);
           return;
         }
 
+        if (draft.record[threadId]?.historyData[id]) {
+          draft.record[threadId].historyData[id].isStreaming = isStreaming;
+        }
+
         if (!content) {
           return;
         }
 
-
         if (!draft.record[threadId]) {
           return;
         }
@@ -129,7 +137,7 @@ const configSlice = createSlice({
         ) {
           draft.record[threadId].historyData[id].content = getUnifiedSequence(
             draft.record[threadId].historyData[id].content as Array<AssistantRecord>,
-            content
+            content,
           );
           return;
         }
@@ -232,9 +240,6 @@ const configSlice = createSlice({
     resetError(state) {
       state.error = initialState.error;
     },
-    setIsStreaming(state, { payload }: PayloadAction<boolean>) {
-      state.isStreaming = payload;
-    },
     resetHistory(state, { payload: { thread } }) {
       state.record[thread] = { historyData: {}, historyIds: [] };
     },
@@ -291,7 +296,6 @@ export const {
   setClosed,
   showResendIcon,
   resendMessage,
-  setIsStreaming,
   fillAssistantHistoryData,
   fillUserHistoryData,
   resetHistory,