fix(#591): prevent duplicate message id issue

Signed-off-by: James <[email protected]>

Author: James

web/containers/Providers/EventHandler.tsx

@@ -24,6 +24,7 @@ import {
 import { downloadingModelsAtom } from '@/helpers/atoms/Model.atom'
 import { MessageStatus, toChatMessage } from '@/models/ChatMessage'
 import { pluginManager } from '@/plugin'
+import { ChatMessage, Conversation } from '@/types/chatMessage'
 
 let currentConversation: Conversation | undefined = undefined
 

web/helpers/atoms/ChatMessage.atom.ts

@@ -2,7 +2,7 @@ import { atom } from 'jotai'
 
 import { getActiveConvoIdAtom } from './Conversation.atom'
 
-import { MessageStatus } from '@/models/ChatMessage'
+import { ChatMessage, MessageStatus } from '@/models/ChatMessage'
 
 /**
  * Stores all chat messages for all conversations

web/helpers/atoms/Conversation.atom.ts

@@ -1,3 +1,4 @@
+import { Conversation, ConversationState } from '@/types/chatMessage'
 import { atom } from 'jotai'
 
 // import { MainViewState, setMainViewStateAtom } from './MainView.atom'

web/hooks/useCreateConversation.ts

@@ -12,6 +12,7 @@ import {
   addNewConversationStateAtom,
 } from '@/helpers/atoms/Conversation.atom'
 import { pluginManager } from '@/plugin'
+import { Conversation } from '@/types/chatMessage'
 
 export const useCreateConversation = () => {
   const [userConversations, setUserConversations] = useAtom(

web/hooks/useGetInputState.ts

@@ -7,6 +7,7 @@ import { useActiveModel } from './useActiveModel'
 import { useGetDownloadedModels } from './useGetDownloadedModels'
 
 import { currentConversationAtom } from '@/helpers/atoms/Conversation.atom'
+import { Conversation } from '@/types/chatMessage'
 
 export default function useGetInputState() {
   const [inputState, setInputState] = useState<InputType>('loading')

web/hooks/useGetUserConversations.ts

@@ -10,6 +10,7 @@ import {
 } from '@/helpers/atoms/Conversation.atom'
 import { toChatMessage } from '@/models/ChatMessage'
 import { pluginManager } from '@/plugin/PluginManager'
+import { ChatMessage, ConversationState } from '@/types/chatMessage'
 
 const useGetUserConversations = () => {
   const setConversationStates = useSetAtom(conversationStatesAtom)

web/hooks/useSendChatMessage.ts

@@ -24,9 +24,10 @@ import {
   updateConversationAtom,
   updateConversationWaitingForResponseAtom,
 } from '@/helpers/atoms/Conversation.atom'
-import { toChatMessage } from '@/models/ChatMessage'
+import { MessageSenderType, toChatMessage } from '@/models/ChatMessage'
 
 import { pluginManager } from '@/plugin/PluginManager'
+import { ChatMessage, Conversation } from '@/types/chatMessage'
 
 export default function useSendChatMessage() {
   const currentConvo = useAtomValue(currentConversationAtom)
@@ -73,16 +74,13 @@ export default function useSendChatMessage() {
                 ...updatedConv,
                 name: updatedConv.name ?? '',
                 message: updatedConv.lastMessage ?? '',
-                messages: currentMessages.map<Message>((e: ChatMessage) => {
-                  return {
-                    // eslint-disable-next-line @typescript-eslint/naming-convention
-                    _id: e.id,
-                    message: e.text,
-                    user: e.senderUid,
-                    updatedAt: new Date(e.createdAt).toISOString(),
-                    createdAt: new Date(e.createdAt).toISOString(),
-                  }
-                }),
+                messages: currentMessages.map<Message>((e: ChatMessage) => ({
+                  _id: e.id,
+                  message: e.text,
+                  user: e.senderUid,
+                  updatedAt: new Date(e.createdAt).toISOString(),
+                  createdAt: new Date(e.createdAt).toISOString(),
+                })),
               })
           }
         }, 1000)
@@ -98,16 +96,14 @@ export default function useSendChatMessage() {
 
     const prompt = currentPrompt.trim()
     const messageHistory: MessageHistory[] = currentMessages
-      .map((msg) => {
-        return {
-          role: msg.senderUid === 'user' ? 'user' : 'assistant',
-          content: msg.text ?? '',
-        }
-      })
+      .map((msg) => ({
+        role: msg.senderUid,
+        content: msg.text ?? '',
+      }))
       .reverse()
       .concat([
         {
-          role: 'user',
+          role: MessageSenderType.User,
           content: prompt,
         } as MessageHistory,
       ])
@@ -116,14 +112,19 @@ export default function useSendChatMessage() {
       _id: generateMessageId(),
       conversationId: convoId,
       message: prompt,
-      user: 'user',
+      user: MessageSenderType.User,
       createdAt: new Date().toISOString(),
       history: messageHistory,
     }
 
     const newChatMessage = toChatMessage(newMessage)
     addNewMessage(newChatMessage)
 
+    // delay randomly from 50 - 100ms
+    // to prevent duplicate message id
+    const delay = Math.floor(Math.random() * 50) + 50
+    await new Promise((resolve) => setTimeout(resolve, delay))
+
     events.emit(EventName.OnNewMessageRequest, newMessage)
     if (!currentConvo?.summary && currentConvo) {
       const updatedConv: Conversation = {

web/screens/Chat/ChatItem/index.tsx

@@ -1,27 +1,26 @@
 import React, { forwardRef } from 'react'
 
 import SimpleTextMessage from '../SimpleTextMessage'
+import { ChatMessage } from '@/types/chatMessage'
 
 type Props = {
   message: ChatMessage
 }
 
 type Ref = HTMLDivElement
 
-const ChatItem = forwardRef<Ref, Props>(({ message }, ref) => {
-  return (
-    <div ref={ref} className="py-4 even:bg-secondary dark:even:bg-secondary/20">
-      <SimpleTextMessage
-        status={message.status}
-        key={message.id}
-        avatarUrl={message.senderAvatarUrl}
-        senderName={message.senderName}
-        createdAt={message.createdAt}
-        senderType={message.messageSenderType}
-        text={message.text}
-      />
-    </div>
-  )
-})
+const ChatItem = forwardRef<Ref, Props>(({ message }, ref) => (
+  <div ref={ref} className="py-4 even:bg-secondary dark:even:bg-secondary/20">
+    <SimpleTextMessage
+      status={message.status}
+      key={message.id}
+      avatarUrl={message.senderAvatarUrl}
+      senderName={message.senderName}
+      createdAt={message.createdAt}
+      senderType={message.messageSenderType}
+      text={message.text}
+    />
+  </div>
+))
 
 export default ChatItem

web/types/chatMessage.d.ts

@@ -6,7 +6,7 @@ enum MessageType {
   Error = 'Error',
 }
 
-enum MessageSenderType {
+export enum MessageSenderType {
   Ai = 'assistant',
   User = 'user',
 }