From 776a1d0659f03a643fb341bc84b33c68c28c425a Mon Sep 17 00:00:00 2001 From: SuperTurk Date: Tue, 24 Oct 2023 14:59:35 +0200 Subject: [PATCH] refactor: Remove old message handling --- libs/components/hooks/useChat/state.ts | 7 -- .../hooks/useChat/useChatInteract.ts | 15 +--- .../hooks/useChat/useChatMessages.ts | 4 +- .../hooks/useChat/useChatSession.ts | 78 +++---------------- libs/components/src/messages/Message.tsx | 4 +- .../src/messages/MessageContainer.tsx | 4 +- libs/components/src/messages/Messages.tsx | 4 +- .../src/messages/components/DetailsButton.tsx | 4 +- .../messages/components/FeedbackButtons.tsx | 6 +- libs/components/src/types/message.ts | 3 - libs/components/utils/message.ts | 63 +++++++-------- 11 files changed, 56 insertions(+), 136 deletions(-) diff --git a/libs/components/hooks/useChat/state.ts b/libs/components/hooks/useChat/state.ts index dfd2f42884..d6ca046687 100644 --- a/libs/components/hooks/useChat/state.ts +++ b/libs/components/hooks/useChat/state.ts @@ -7,7 +7,6 @@ import { IAvatarElement, IMessage, IMessageElement, - INestedMessage, ITasklistElement } from 'src/types'; import { v4 as uuidv4 } from 'uuid'; @@ -46,12 +45,6 @@ export const messagesState = atom({ default: [] }); -export const nestedMessagesState = atom({ - key: 'NestedMessages', - dangerouslyAllowMutability: true, - default: [] -}); - export const tokenCountState = atom({ key: 'TokenCount', default: 0 diff --git a/libs/components/hooks/useChat/useChatInteract.ts b/libs/components/hooks/useChat/useChatInteract.ts index 017eb8f1f1..8eb83c5ec8 100644 --- a/libs/components/hooks/useChat/useChatInteract.ts +++ b/libs/components/hooks/useChat/useChatInteract.ts @@ -1,7 +1,7 @@ import { useCallback } from 'react'; import { useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'; import { IAction, IFileElement, IMessage } from 'src/types'; -import { addNestedMessage } from 'utils/message'; +import { addMessages } from 'utils/message'; import { actionState, @@ -13,7 +13,6 @@ import { firstUserMessageState, loadingState, messagesState, - nestedMessagesState, sessionIdState, sessionState, tasklistState, @@ -31,7 +30,6 @@ const useChatInteract = () => { const setFirstUserMessage = useSetRecoilState(firstUserMessageState); const setLoading = useSetRecoilState(loadingState); const setMessages = useSetRecoilState(messagesState); - const setNestedMessages = useSetRecoilState(nestedMessagesState); const setElements = useSetRecoilState(elementState); const setAvatars = useSetRecoilState(avatarState); const setTasklists = useSetRecoilState(tasklistState); @@ -44,7 +42,6 @@ const useChatInteract = () => { resetSessionId(); setFirstUserMessage(undefined); setMessages([]); - setNestedMessages([]); setElements([]); setAvatars([]); setTasklists([]); @@ -56,10 +53,7 @@ const useChatInteract = () => { const sendMessage = useCallback( (message: IMessage, files?: IFileElement[]) => { - setMessages((oldMessages) => [...oldMessages, { ...message }]); - setNestedMessages((oldNestedMessages) => - addNestedMessage(oldNestedMessages, message) - ); + setMessages((oldMessages) => addMessages(oldMessages, message)); session?.socket.emit('ui_message', { message, files }); }, @@ -69,10 +63,7 @@ const useChatInteract = () => { const replyMessage = useCallback( (message: IMessage) => { if (askUser) { - setMessages((oldMessages) => [...oldMessages, { ...message }]); - setNestedMessages((oldNestedMessages) => - addNestedMessage(oldNestedMessages, message) - ); + setMessages((oldMessages) => addMessages(oldMessages, message)); askUser.callback(message); } }, diff --git a/libs/components/hooks/useChat/useChatMessages.ts b/libs/components/hooks/useChat/useChatMessages.ts index 588cbe8fb0..e1621c9fda 100644 --- a/libs/components/hooks/useChat/useChatMessages.ts +++ b/libs/components/hooks/useChat/useChatMessages.ts @@ -1,9 +1,9 @@ import { useRecoilValue } from 'recoil'; -import { firstUserMessageState, nestedMessagesState } from './state'; +import { firstUserMessageState, messagesState } from './state'; const useChatMessages = () => { - const messages = useRecoilValue(nestedMessagesState); + const messages = useRecoilValue(messagesState); const firstUserMessage = useRecoilValue(firstUserMessageState); return { diff --git a/libs/components/hooks/useChat/useChatSession.ts b/libs/components/hooks/useChat/useChatSession.ts index db788a3778..e69d8b0642 100644 --- a/libs/components/hooks/useChat/useChatSession.ts +++ b/libs/components/hooks/useChat/useChatSession.ts @@ -1,5 +1,4 @@ import debounce from 'lodash/debounce'; -import isEqual from 'lodash/isEqual'; import { useCallback } from 'react'; import { useRecoilState, @@ -11,7 +10,7 @@ import io from 'socket.io-client'; import { TFormInput } from 'src/inputs'; import { IAction, IElement, IMessage } from 'src/types'; import { - addNestedMessage, + addMessages, deleteMessageById, updateMessageById, updateMessageContentById @@ -27,7 +26,6 @@ import { firstUserMessageState, loadingState, messagesState, - nestedMessagesState, sessionIdState, sessionState, tasklistState, @@ -44,7 +42,6 @@ const useChatSession = () => { const setFirstUserMessage = useSetRecoilState(firstUserMessageState); const setLoading = useSetRecoilState(loadingState); const setMessages = useSetRecoilState(messagesState); - const setNestedMessages = useSetRecoilState(nestedMessagesState); const setAskUser = useSetRecoilState(askUserState); const setElements = useSetRecoilState(elementState); const setAvatars = useSetRecoilState(avatarState); @@ -105,22 +102,7 @@ const useChatSession = () => { }); socket.on('new_message', (message: IMessage) => { - setMessages((oldMessages) => { - const index = oldMessages.findIndex((m) => isEqual(m.id, message.id)); - if (index === -1) { - return [...oldMessages, message]; - } else { - return [ - ...oldMessages.slice(0, index), - message, - ...oldMessages.slice(index + 1) - ]; - } - }); - - setNestedMessages((oldNestedMessages) => - addNestedMessage(oldNestedMessages, message) - ); + setMessages((oldMessages) => addMessages(oldMessages, message)); }); socket.on('init_conversation', (message: IMessage) => { @@ -128,70 +110,30 @@ const useChatSession = () => { }); socket.on('update_message', (message: IMessageUpdate) => { - setNestedMessages((oldNestedMessages) => - updateMessageById(oldNestedMessages, message.id, message) + setMessages((oldMessages) => + updateMessageById(oldMessages, message.id, message) ); }); socket.on('delete_message', (message: IMessage) => { - setMessages((oldMessages) => { - const index = oldMessages.findIndex((m) => isEqual(m.id, message.id)); - - if (index === -1) return oldMessages; - return [ - ...oldMessages.slice(0, index), - ...oldMessages.slice(index + 1) - ]; - }); - - setNestedMessages((oldNestedMessages) => - deleteMessageById(oldNestedMessages, message.id) + setMessages((oldMessages) => + deleteMessageById(oldMessages, message.id) ); }); socket.on('stream_start', (message: IMessage) => { - setMessages((oldMessages) => { - const index = oldMessages.findIndex((m) => m.id === message.id); - if (index === -1) { - return [...oldMessages, message]; - } - return oldMessages; - }); - - setNestedMessages((oldNestedMessages) => - addNestedMessage(oldNestedMessages, message) - ); + setMessages((oldMessages) => addMessages(oldMessages, message)); }); socket.on('stream_token', ({ id, token, isSequence }: IToken) => { - setMessages((oldMessages) => { - const index = oldMessages.findIndex((m) => m.id === id); - if (index === -1) return oldMessages; - const oldMessage = oldMessages[index]; - const newMessage = { ...oldMessage }; - if (isSequence) { - newMessage.content = token; - } else { - newMessage.content += token; - } - return [ - ...oldMessages.slice(0, index), - newMessage, - ...oldMessages.slice(index + 1) - ]; - }); - - setNestedMessages((oldNestedMessages) => - updateMessageContentById(oldNestedMessages, id, token, isSequence) + setMessages((oldMessages) => + updateMessageContentById(oldMessages, id, token, isSequence) ); }); socket.on('ask', ({ msg, spec }, callback) => { setAskUser({ spec, callback }); - setMessages((oldMessages) => [...oldMessages, { ...msg }]); - setNestedMessages((oldNestedMessages) => - addNestedMessage(oldNestedMessages, msg) - ); + setMessages((oldMessages) => addMessages(oldMessages, msg)); setLoading(false); }); diff --git a/libs/components/src/messages/Message.tsx b/libs/components/src/messages/Message.tsx index f5c5b35687..128cc253d6 100644 --- a/libs/components/src/messages/Message.tsx +++ b/libs/components/src/messages/Message.tsx @@ -13,12 +13,12 @@ import { MessageContent } from './components/MessageContent'; import { IAction } from 'src/types/action'; import { IMessageElement } from 'src/types/element'; -import { INestedMessage } from 'src/types/message'; +import { IMessage } from 'src/types/message'; import { Messages } from './Messages'; interface Props { - message: INestedMessage; + message: IMessage; elements: IMessageElement[]; actions: IAction[]; indent: number; diff --git a/libs/components/src/messages/MessageContainer.tsx b/libs/components/src/messages/MessageContainer.tsx index daa4c33b79..536f851b58 100644 --- a/libs/components/src/messages/MessageContainer.tsx +++ b/libs/components/src/messages/MessageContainer.tsx @@ -5,7 +5,7 @@ import Box from '@mui/material/Box'; import { IAction } from 'src/types/action'; import { IMessageElement } from 'src/types/element'; -import { INestedMessage } from 'src/types/message'; +import { IMessage } from 'src/types/message'; import { IMessageContext } from 'src/types/messageContext'; import { Messages } from './Messages'; @@ -15,7 +15,7 @@ interface Props { autoScroll?: boolean; context: IMessageContext; elements: IMessageElement[]; - messages: INestedMessage[]; + messages: IMessage[]; setAutoScroll?: (autoScroll: boolean) => void; } diff --git a/libs/components/src/messages/Messages.tsx b/libs/components/src/messages/Messages.tsx index 65a86db950..ebc2b7352e 100644 --- a/libs/components/src/messages/Messages.tsx +++ b/libs/components/src/messages/Messages.tsx @@ -4,12 +4,12 @@ import { isLastMessage } from 'utils/message'; import { IAction } from 'src/types/action'; import { IMessageElement } from 'src/types/element'; -import { INestedMessage } from 'src/types/message'; +import { IMessage } from 'src/types/message'; import { Message } from './Message'; interface Props { - messages: INestedMessage[]; + messages: IMessage[]; elements: IMessageElement[]; actions: IAction[]; indent: number; diff --git a/libs/components/src/messages/components/DetailsButton.tsx b/libs/components/src/messages/components/DetailsButton.tsx index 5a426d9bfc..db6308f7ca 100644 --- a/libs/components/src/messages/components/DetailsButton.tsx +++ b/libs/components/src/messages/components/DetailsButton.tsx @@ -6,10 +6,10 @@ import ExpandLess from '@mui/icons-material/ExpandLess'; import ExpandMore from '@mui/icons-material/ExpandMore'; import CircularProgress from '@mui/material/CircularProgress'; -import { INestedMessage } from 'src/types/message'; +import { IMessage } from 'src/types/message'; interface Props { - message: INestedMessage; + message: IMessage; opened: boolean; loading?: boolean; onClick: () => void; diff --git a/libs/components/src/messages/components/FeedbackButtons.tsx b/libs/components/src/messages/components/FeedbackButtons.tsx index 0958db341f..fceac0168b 100644 --- a/libs/components/src/messages/components/FeedbackButtons.tsx +++ b/libs/components/src/messages/components/FeedbackButtons.tsx @@ -17,7 +17,7 @@ import ButtonGroup from '@mui/material/ButtonGroup'; import Stack from '@mui/material/Stack'; import Tooltip from '@mui/material/Tooltip'; -import { nestedMessagesState } from 'hooks/useChat/state'; +import { messagesState } from 'hooks/useChat/state'; import { IMessage } from 'src/types/message'; @@ -35,7 +35,7 @@ const FeedbackButtons = ({ message }: Props) => { const UpIcon = feedback === 1 ? ThumbUpAlt : ThumbUpAltOutlined; const [showFeedbackDialog, setShowFeedbackDialog] = useState(); const [commentInput, setCommentInput] = useState(); - const setNestedMessages = useSetRecoilState(nestedMessagesState); + const setMessages = useSetRecoilState(messagesState); const handleFeedbackChanged = (feedback: number, comment?: string) => { onFeedbackUpdated && @@ -43,7 +43,7 @@ const FeedbackButtons = ({ message }: Props) => { message.id, feedback, () => - setNestedMessages((prev) => + setMessages((prev) => updateMessageById(prev, message.id, { ...message, humanFeedback: feedback, diff --git a/libs/components/src/types/message.ts b/libs/components/src/types/message.ts index a7f9dd9915..a9a8f5ab4e 100644 --- a/libs/components/src/types/message.ts +++ b/libs/components/src/types/message.ts @@ -40,9 +40,6 @@ export interface IMessage { prompt?: IPrompt; streaming?: boolean; waitForAnswer?: boolean; -} - -export interface INestedMessage extends IMessage { subMessages?: IMessage[]; } diff --git a/libs/components/utils/message.ts b/libs/components/utils/message.ts index b6181d5d00..a2175d1bab 100644 --- a/libs/components/utils/message.ts +++ b/libs/components/utils/message.ts @@ -1,13 +1,13 @@ import isEqual from 'lodash/isEqual'; import { IMessageElement } from 'src/types/element'; -import { IMessage, IMessageContent, INestedMessage } from 'src/types/message'; +import { IMessage, IMessageContent } from 'src/types/message'; const addToParent = ( parentId: string | undefined, - child: INestedMessage, - nestedMessages: INestedMessage[], - lookup: Record + child: IMessage, + nestedMessages: IMessage[], + lookup: Record ): void => { if (parentId) { const parent = lookup[parentId]; @@ -20,12 +20,12 @@ const addToParent = ( }; // Nest messages based on parent id -const nestMessages = (messages: IMessage[]): INestedMessage[] => { - const nestedMessages: INestedMessage[] = []; - const lookup: Record = {}; +const nestMessages = (messages: IMessage[]): IMessage[] => { + const nestedMessages: IMessage[] = []; + const lookup: Record = {}; for (const message of messages) { - const nestedMessage: INestedMessage = { ...message }; + const nestedMessage: IMessage = { ...message }; if (message.id) lookup[message.id] = nestedMessage; } @@ -44,12 +44,12 @@ const nestMessages = (messages: IMessage[]): INestedMessage[] => { }; // Nest messages based on deprecated indent parameter -const legacyNestMessages = (messages: INestedMessage[]): INestedMessage[] => { - const nestedMessages: INestedMessage[] = []; - const parentStack: INestedMessage[] = []; +const legacyNestMessages = (messages: IMessage[]): IMessage[] => { + const nestedMessages: IMessage[] = []; + const parentStack: IMessage[] = []; for (const message of messages) { - const nestedMessage: INestedMessage = { ...message }; + const nestedMessage: IMessage = { ...message }; const messageIndent = message.indent || 0; if (messageIndent && !message.authorIsUser && !message.waitForAnswer) { @@ -76,7 +76,7 @@ const legacyNestMessages = (messages: INestedMessage[]): INestedMessage[] => { return nestedMessages; }; -const isLastMessage = (messages: INestedMessage[], index: number) => { +const isLastMessage = (messages: IMessage[], index: number) => { if (messages.length - 1 === index) { return true; } @@ -171,27 +171,24 @@ const prepareContent = ({ elements, message }: IMessageContent) => { // Nested messages utils -const addNestedMessage = ( - nestedMessages: INestedMessage[], - message: IMessage -): INestedMessage[] => { - if (hasMessageById(nestedMessages, message.id)) { - return updateMessageById(nestedMessages, message.id, message); +const addMessages = (messages: IMessage[], message: IMessage): IMessage[] => { + if (hasMessageById(messages, message.id)) { + return updateMessageById(messages, message.id, message); } else if (message.parentId) { - return addMessageToParent(nestedMessages, message.parentId, message); + return addMessageToParent(messages, message.parentId, message); } else if (message.indent && message.indent > 0) { - return addIndentMessage(nestedMessages, message.indent, message); + return addIndentMessage(messages, message.indent, message); } else { - return [...nestedMessages, message]; + return [...messages, message]; } }; const addIndentMessage = ( - messages: INestedMessage[], + messages: IMessage[], indent: number, newMessage: IMessage, currentIndentation: number = 0 -): INestedMessage[] => { +): IMessage[] => { const nextMessages = [...messages]; if (nextMessages.length === 0) { @@ -221,10 +218,10 @@ const addIndentMessage = ( }; const addMessageToParent = ( - messages: INestedMessage[], + messages: IMessage[], parentId: string, newMessage: IMessage -): INestedMessage[] => { +): IMessage[] => { const nextMessages = [...messages]; for (let index = 0; index < nextMessages.length; index++) { @@ -248,7 +245,7 @@ const addMessageToParent = ( return nextMessages; }; -const hasMessageById = (messages: INestedMessage[], messageId: string) => { +const hasMessageById = (messages: IMessage[], messageId: string) => { for (const message of messages) { if (isEqual(message.id, messageId)) { return true; @@ -260,10 +257,10 @@ const hasMessageById = (messages: INestedMessage[], messageId: string) => { }; const updateMessageById = ( - messages: INestedMessage[], + messages: IMessage[], messageId: string, updatedMessage: IMessage -): INestedMessage[] => { +): IMessage[] => { const nextMessages = [...messages]; for (let index = 0; index < nextMessages.length; index++) { @@ -284,7 +281,7 @@ const updateMessageById = ( return nextMessages; }; -const deleteMessageById = (messages: INestedMessage[], messageId: string) => { +const deleteMessageById = (messages: IMessage[], messageId: string) => { let nextMessages = [...messages]; for (let index = 0; index < nextMessages.length; index++) { @@ -305,11 +302,11 @@ const deleteMessageById = (messages: INestedMessage[], messageId: string) => { }; const updateMessageContentById = ( - messages: INestedMessage[], + messages: IMessage[], messageId: number | string, updatedContent: string, isSequence: boolean -): INestedMessage[] => { +): IMessage[] => { const nextMessages = [...messages]; for (let index = 0; index < nextMessages.length; index++) { @@ -339,7 +336,7 @@ const updateMessageContentById = ( export { addMessageToParent, - addNestedMessage, + addMessages, deleteMessageById, hasMessageById, isLastMessage,