feat(Assistant): Show instant message sorted by position

src/assistant/AssistantProvider.jsx

@@ -1,15 +1,14 @@
 import React, { useMemo, useContext, useState, useCallback } from 'react'
+import set from 'lodash/set'
 
 import { useClient } from 'cozy-client'
 import useRealtime from 'cozy-realtime/dist/useRealtime'
 
 import { CHAT_EVENTS_DOCTYPE, CHAT_CONVERSATIONS_DOCTYPE } from './queries'
+import { pushMessagesIdInState, isMessageForThisConversation } from './helpers'
 
 export const AssistantContext = React.createContext()
 
-export const makeConversationId = () =>
-  `${Date.now()}-${Math.floor(Math.random() * 90000) + 10000}`
-
 export const useAssistant = () => {
   const context = useContext(AssistantContext)
 
@@ -19,21 +18,10 @@ export const useAssistant = () => {
   return context
 }
 
-const pushMessagesIdInState = (res, setState) => {
-  const messagesId = res.messages.map(message => message.id)
-  setState(v => ({
-    ...v,
-    messagesId
-  }))
-}
-
-const isMessageForThisConversation = (res, messagesId) =>
-  messagesId.includes(res._id)
-
 const AssistantProvider = ({ children }) => {
   const client = useClient()
   const [assistantState, setAssistantState] = useState({
-    message: '',
+    message: {},
     status: 'idle',
     messagesId: []
   })
@@ -70,9 +58,11 @@ const AssistantProvider = ({ children }) => {
         }
 
         if (res.object === 'delta') {
+          const message = set(assistantState.message, res.position, res.content)
+
           setAssistantState(v => ({
             ...v,
-            message: v.message + res.content,
+            message,
             status: 'writing'
           }))
         }
@@ -83,7 +73,7 @@ const AssistantProvider = ({ children }) => {
   const clearAssistant = useCallback(
     () =>
       setAssistantState({
-        message: '',
+        message: {},
         status: 'idle',
         messagesId: []
       }),

src/assistant/Conversations/ChatConversation.jsx

@@ -4,6 +4,7 @@ import { useQuery, isQueryLoading } from 'cozy-client'
 
 import { buildChatConversationQueryById } from '../queries'
 import { useAssistant } from '../AssistantProvider'
+import { getInstantMessage } from '../helpers'
 import ChatUserItem from './ChatUserItem'
 import ChatAssistantItem from './ChatAssistantItem'
 import ChatRealtimeAnswer from './ChatRealtimeAnswer'
@@ -67,7 +68,7 @@ const ChatConversation = ({ conversation, myself }) => {
       {showLastConv && (
         <ChatRealtimeAnswer
           isLoading={assistantState.status === 'pending'}
-          label={assistantState.message}
+          label={getInstantMessage(assistantState)}
         />
       )}
     </div>

src/assistant/Search/SearchBar.jsx

@@ -5,7 +5,8 @@ import flag from 'cozy-flags'
 import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 import { useSearch } from './SearchProvider'
-import { makeConversationId, useAssistant } from '../AssistantProvider'
+import { useAssistant } from '../AssistantProvider'
+import { makeConversationId } from '../helpers'
 import SearchBarMobile from './SearchBarMobile'
 import SearchBarDesktop from './SearchBarDesktop'
 

src/assistant/Views/SearchDialog.jsx

@@ -5,7 +5,8 @@ import flag from 'cozy-flags'
 import { FixedDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 
 import SearchProvider from '../Search/SearchProvider'
-import { makeConversationId, useAssistant } from '../AssistantProvider'
+import { useAssistant } from '../AssistantProvider'
+import { makeConversationId } from '../helpers'
 import ResultMenuContent from '../ResultMenu/ResultMenuContent'
 import { useSearch } from '../Search/SearchProvider'
 import SearchBar from '../Search/SearchBar'

src/assistant/helpers.js

@@ -0,0 +1,19 @@
+export const getInstantMessage = assistantState =>
+  Object.keys(assistantState.message)
+    .sort((a, b) => a - b)
+    .map(key => assistantState.message[key])
+    .join('')
+
+export const makeConversationId = () =>
+  `${Date.now()}-${Math.floor(Math.random() * 90000) + 10000}`
+
+export const pushMessagesIdInState = (res, setState) => {
+  const messagesId = res.messages.map(message => message.id)
+  setState(v => ({
+    ...v,
+    messagesId
+  }))
+}
+
+export const isMessageForThisConversation = (res, messagesId) =>
+  messagesId.includes(res._id)