Add threads

src/components/Form/response.tsx

@@ -3,11 +3,11 @@ import { useEffect, useRef, useState } from 'react';
 import { IconBtn } from '../../components/Button';
 import { Input } from '../../components/Input';
 import { Roles } from '../../config/enums';
+import { TYPING_TIMEOUT } from '../../config/env';
 import { useAppDispatch, useAppSelector } from '../../hooks';
 import { fillUserHistoryData, getChat, setLastGroupPointer, setTypingTimeoutExpired } from '../../store/slices/chat';
 import { getQueryParam, uuidV4 } from '../../utils';
 import { layoutFoot as variant } from '../Layout/variants';
-import { TYPING_TIMEOUT } from '../../config/env';
 
 export const ResponseForm = () => {
   const dispatch = useAppDispatch();

src/components/Stream/assistant.tsx

@@ -6,18 +6,21 @@ import { useAppSelector } from '../../hooks';
 import { AssistantProps } from '../../interfaces/component';
 import { getChat, sortBySequence } from '../../store/slices/chat';
 import { getMeta } from '../../store/slices/meta';
-import { getQueryParam, extractVideoCode, uuidV4 } from '../../utils';
+import { extractVideoCode, getQueryParam, uuidV4 } from '../../utils';
+import { replaceNewRowSymbols } from '../../utils/formatting';
 import MarkdownLink from '../Markdown/link';
 import { Media } from '../Media';
 import OptionList from './options';
 import { flickerEffect } from './variants';
-import { replaceNewRowSymbols } from '../../utils/formatting';
 
 const Assistant = ({ message, itemId }: AssistantProps) => {
   const term = getQueryParam();
   const { isStreaming } = useAppSelector(getChat);
   const { pd } = useAppSelector(getMeta);
-  const isLast = useAppSelector((state) => state.chat.record[term].historyIds.length - 1 === state.chat.record[term].historyIds.indexOf(itemId));
+  const isLast = useAppSelector((state) => {
+    const threadId = state.chat.thread[term];
+    return state.chat.record[threadId].historyIds.length - 1 === state.chat.record[threadId].historyIds.indexOf(itemId)
+  });
   const { base: baseFlicker } = flickerEffect({ isTyping: isStreaming && isLast });
   const sortedContent = [...message.content].sort(sortBySequence);
 
@@ -72,7 +75,7 @@ const Assistant = ({ message, itemId }: AssistantProps) => {
               key={uuidV4()}
               e2e="assistant-img"
               image={it[it.type]?.url || ''}
-              background={'url("' + it[it.type]?.url + '")'}
+              background={`url("${it[it.type]?.url}")`}
               type={Definition.image}
               title={it[it.type]?.title}
             />

src/components/Stream/base.tsx

@@ -8,8 +8,15 @@ import { streamBase, streamRow } from './variants';
 export const StreamBase = () => {
   const { aiProfile } = useAppSelector(getConfig);
   const term = getQueryParam();
-  const historyIds = useAppSelector((state) => state.chat.record[term]?.historyIds || []);
-  const firstMessage = useAppSelector((state) => state.chat.record[term]?.historyData[historyIds[0]]);
+  const historyIds = useAppSelector((state) => {
+    const threadId = state.chat.thread[term];
+    return state.chat.record[threadId]?.historyIds || []
+  });
+  const firstMessage = useAppSelector((state) => {
+    const threadId = state.chat.thread[term];
+
+    return state.chat.record[threadId]?.historyData[historyIds[0]]
+  });
   const { base, second, date } = streamBase();
   const { base: baseRow } = streamRow();
   const time = formatDateByLocale(firstMessage?.time || new Date().getTime());

src/components/Stream/bubble.tsx

@@ -10,7 +10,10 @@ import { streamBubble as variant } from './variants';
 
 const StreamBubble = ({ itemId }: { itemId: string }) => {
   const term = getQueryParam();
-  const record = useAppSelector((state) => state.chat.record[term].historyData[itemId]);
+  const record = useAppSelector((state) => {
+    const threadId = state.chat.thread[term];
+    return state.chat.record[threadId].historyData[itemId];
+  });
 
   return (record && (
     <div className={variant({ type: record.role }).base()}

src/hooks/foot.ts

@@ -4,14 +4,14 @@ import { getChat } from '../store/slices/chat';
 import { getConfig } from '../store/slices/config';
 import { getEmailIntentions, getPaymentIntentions } from '../store/slices/intentions';
 import { getMeta } from '../store/slices/meta';
-import { useAppSelector } from '.';
 import { getQueryParam } from '../utils';
+import { useAppSelector } from '.';
 
 export const useFootProps = () => {
   const term = getQueryParam();
   const { cid, systemType, marketing, pd } = useAppSelector(getMeta);
   const { translations, purpose, specialUrls } = useAppSelector(getConfig);
-  const { isLoading, isStreaming, record } = useAppSelector(getChat);
+  const { isLoading, isStreaming, record, thread } = useAppSelector(getChat);
   const { error: streamError } = useAppSelector((store) => store.chat);
   const storedLink = useAppSelector((store) => store.intentions.link);
   const { error: emailError, current: currentEmail } = useAppSelector(getEmailIntentions);
@@ -39,12 +39,13 @@ export const useFootProps = () => {
     ctaHref: '',
   };
 
-  if (!record[term]) {
-    return staticProps
+  const currentThread = thread[term];
+  if (!currentThread) {
+    return staticProps;
   }
 
-  const lastMsgId = [...record[term].historyIds].pop();
-  const lastMsg = lastMsgId && record[term].historyData[lastMsgId];
+  const lastMsgId = [...record[currentThread].historyIds].pop();
+  const lastMsg = lastMsgId && record[currentThread].historyData[lastMsgId];
   const isLastAssistantMsg = lastMsg && lastMsg.role === Roles.assistant;
   const link = isLastAssistantMsg && storedLink;
   const noButtonChoices = !(lastMsg && lastMsg?.content.find((m) => m.buttons));

src/interfaces/index.ts

@@ -26,17 +26,17 @@ interface VideoProps {
 
 export interface VideoMessage {
   type: Definition.video;
-  video: VideoProps
+  video: VideoProps;
 }
 
 interface ImageProps {
   url: string;
-  title: string
-  alt: string | null
+  title: string;
+  alt: string | null;
 }
 export interface ImageMessage {
   type: Definition.image;
-  image: ImageProps
+  image: ImageProps;
 }
 
 export interface ButtonOptions {
@@ -49,22 +49,34 @@ export interface ButtonOptions {
 }
 
 export interface BaseOptions extends ButtonOptions {
-  id: string, link: string, noStream: boolean
+  id: string;
+  link: string;
+  noStream: boolean;
 }
 
 export interface OptionsListProps {
-  options: Array<BaseOptions> | undefined
+  options: Array<BaseOptions> | undefined;
 }
 
 export type AssistantMessageTypeUnion =
-  TextMessage | ButtonsMessage | EmailMessage | VideoMessage | ImageMessage | PaymentMessage;
+  | TextMessage
+  | ButtonsMessage
+  | EmailMessage
+  | VideoMessage
+  | ImageMessage
+  | PaymentMessage;
 
 export type SupportedMessageTypes =
-  Definition.text | Definition.buttons | Definition.payment | Definition.email | Definition.video | Definition.image;
+  | Definition.text
+  | Definition.buttons
+  | Definition.payment
+  | Definition.email
+  | Definition.video
+  | Definition.image;
 
 export interface AssistantRecord {
-  type: SupportedMessageTypes,
-  sequence: number,
+  type: SupportedMessageTypes;
+  sequence: number;
   text?: string;
   video?: VideoProps;
   image?: ImageProps;
@@ -109,18 +121,22 @@ export interface MessageProperties {
 }
 
 export type PredefinedMessagePayload = {
-  content: string,
-  buttons?: Array<ButtonOptions>,
-}
+  content: string;
+  buttons?: Array<ButtonOptions>;
+};
 
 export type UserMessageContent = {
-  groupId: string, sent: boolean, resend: boolean, text: string, sequence: number
-}
+  groupId: string;
+  sent: boolean;
+  resend: boolean;
+  text: string;
+  sequence: number;
+};
 
 export interface UserHistoryData {
   id: string;
   role: Roles.user;
-  content: Array<UserMessageContent>
+  content: Array<UserMessageContent>;
 }
 
 export interface UserHistoryDataFiller {
@@ -147,7 +163,7 @@ export interface AssistantHistoryInitialMessage {
 export interface ClientMessage {
   role: Roles.assistant | Roles.user;
   term: string;
-  user_id: string;
+  userId: string;
   message: string;
   messageId: string;
   region: string;

src/interfaces/store.ts

@@ -7,7 +7,7 @@ interface Outgoing {
   user_id: string;
   role: Roles.user;
   message: string;
-};
+}
 
 export interface ChatState {
   outgoing: Outgoing;
@@ -30,8 +30,11 @@ export interface ChatState {
         }
       >;
       historyIds: Array<string>;
-    }
-  }
+    };
+  };
+  thread: {
+    [key: string]: string;
+  };
 }
 
 export interface ConfigState {
@@ -78,15 +81,15 @@ export interface MetaState {
 
 export interface IntentionsState {
   email: {
-    current: string,
-    success: boolean,
-    error: boolean,
-    isLoading: boolean,
-  },
+    current: string;
+    success: boolean;
+    error: boolean;
+    isLoading: boolean;
+  };
   response: {
-    isFormVisible: boolean,
-    error: boolean,
-  },
+    isFormVisible: boolean;
+    error: boolean;
+  };
   payment: {
     isButtonVisible: boolean;
     isFormVisible: boolean;
@@ -96,5 +99,5 @@ export interface IntentionsState {
   messaging: {
     isVisible: boolean;
   };
-  link: string
+  link: string;
 }