fix: update based on suggestions

Author: lyjeileen

src/components/messageSpace/messageSpace.cy.tsx

@@ -26,6 +26,8 @@ import { getMockWebSocketClient } from '../mockWebSocket'
 import MessageSpace from './messageSpace'
 
 describe('MessageSpace Component', () => {
+  const messageCanvas = '[data-cy=message-canvas]'
+
   const supportedElements = {
     text: Text,
     streamingText: StreamingText,
@@ -169,7 +171,7 @@ describe('MessageSpace Component', () => {
         <MessageSpace
           ws={mockWsClient}
           sender={testUser}
-          messages={messages}
+          receivedMessages={messages}
           supportedElements={supportedElements}
           getProfileComponent={(message: Message) => {
             if (message.sender.name?.includes('Agent')) {
@@ -202,14 +204,14 @@ describe('MessageSpace Component', () => {
       })
     })
 
-    it(`can receive and render messages from websocket on ${viewport} screen`, () => {
+    it.only(`can receive and render messages from websocket on ${viewport} screen`, () => {
       setupWebSocketServer()
       cy.viewport(viewport)
       cy.mount(
         <MessageSpace
           ws={getMockWebSocketClient(webSocketUrl)}
           sender={testUser}
-          messages={[
+          receivedMessages={[
             {
               ...humanMessageData,
               id: getUUID(),
@@ -237,13 +239,16 @@ describe('MessageSpace Component', () => {
         'not.contain',
         'Sure! The text is displayed progressively.'
       )
+      cy.get(messageCanvas).should('have.length', 1)
       messagesToBeSent.forEach((message) => {
         cy.get(messageSpace).should('contain', message.data.text)
       })
       cy.get(messageSpace).should(
         'contain',
         'Sure! The text is displayed progressively.'
       )
+      const totalDisplayedMessages = 3
+      cy.get(messageCanvas).should('have.length', totalDisplayedMessages)
       teardownWebSocketServer()
     })
 
@@ -262,7 +267,7 @@ describe('MessageSpace Component', () => {
           <MessageSpace
             ws={mockWsClient}
             sender={testUser}
-            messages={messages}
+            receivedMessages={messages}
             supportedElements={supportedElements}
           />
         </div>

src/components/messageSpace/messageSpace.stories.tsx

@@ -65,7 +65,7 @@ function getProfileIconAndName(message: Message) {
 }
 
 meta.argTypes = {
-  messages: {
+  receivedMessages: {
     table: {
       type: {
         summary: 'Array of Message.\n',
@@ -86,6 +86,8 @@ meta.argTypes = {
     },
   },
   ws: {
+    description:
+      'WebSocket connection to send and receive messages to and from a backend. The onReceive prop will override the default handler once it is set. If you need to use the WebSocket for purposes other than chat, you will need to create a separate WebSocket connection.',
     table: {
       type: {
         summary: 'WebSocketClient',
@@ -203,7 +205,7 @@ export const Default = {
   args: {
     ws: { send: () => {} },
     sender: humanMessageData.sender,
-    messages: [
+    receivedMessages: [
       {
         ...humanMessageData,
         id: getUUID(),

src/components/messageSpace/messageSpace.tsx

@@ -18,7 +18,8 @@ export interface MessageSpaceProps extends MessageContainerProps {
   sender: Sender
   /** A component map contains message formats as keys and their corresponding React components as values. */
   supportedElements: ComponentMap
-  messages?: Message[]
+  /** Messages received before the component was mounted. These messages are rendered along with new messages received from the websocket. */
+  receivedMessages?: Message[]
   /** Text label for scroll down button. Default value is 'scroll down'. */
   scrollDownLabel?: string
 }
@@ -35,13 +36,28 @@ function getCombinedMessages(
   messages: { [key: string]: Message[] },
   message: Message
 ) {
-  const key = message.format.includes('update') ? message.threadId : message.id
+  let key = message.format.includes('update') ? message.threadId : message.id
+
   if (key) {
+    const newMessages = { ...messages }
     const existingMessages = messages[key] || []
-    const newMessages = {
-      ...messages,
-      [key]: existingMessages.concat(message),
+    const originalMessage = existingMessages[0]
+
+    // Check if sender is the same for update messages
+    if (
+      message.format.includes('update') &&
+      originalMessage &&
+      originalMessage.sender.id !== message.sender.id
+    ) {
+      key = message.id
+    }
+
+    if (!newMessages[key]) {
+      newMessages[key] = []
     }
+
+    newMessages[key] = newMessages[key].concat(message)
+
     return newMessages
   } else {
     return messages
@@ -51,7 +67,7 @@ function getCombinedMessages(
 /**
  The `MessageSpace` component uses `MessageCanvas` and `ElementRenderer` to render a list of messages. It serves as a container for individual message items, each encapsulated within a `MessageCanvas` for consistent styling and layout. It can receive and process messages to dynamically update the displayed content.
 
- The `MessageSpace` component can combine update messages with the original message and render them as a single message. For this to work, the `threadId` of the update message must match the `id` of the original message, and the format of the update message must include 'update'.
+ The `MessageSpace` component can combine update messages with the original message and render them as a single message. For this to work, the `threadId` of the update message must match the `id` of the original message, and the format of the update message should be prefixed with 'update'. For example, if the original message format is 'streamingText', the update message format should be 'updateStreamingText'.
  
  Note: For more information about the `getActionsComponent` and `getProfileComponent` fields, refer to the [MessageCanvas' docs](http://localhost:6006/?path=/docs/rustic-ui-message-canvas-message-canvas--docs).
 */
@@ -82,14 +98,6 @@ export default function MessageSpace(props: MessageSpaceProps) {
     }, hideScrollButtonDuration)
   }
 
-  function handleScrollDown() {
-    scrollEndRef.current?.scrollIntoView({
-      behavior: 'smooth',
-      block: 'end',
-    })
-    hideScrollButton()
-  }
-
   function getVideoStatus() {
     const videos = containerRef.current?.querySelectorAll('video')
     if (!videos || videos.length === 0) {
@@ -128,7 +136,7 @@ export default function MessageSpace(props: MessageSpaceProps) {
     }
   }, [isScrolledToBottom])
 
-  function scrollDownIfNeeded() {
+  function scrollDown() {
     if (getVideoStatus()) {
       const container = containerRef.current
       setAreVideosLoaded(true)
@@ -140,12 +148,12 @@ export default function MessageSpace(props: MessageSpaceProps) {
         }, 0)
       }
     } else {
-      setTimeout(scrollDownIfNeeded, 1)
+      setTimeout(scrollDown, 1)
     }
   }
 
   useEffect(() => {
-    scrollDownIfNeeded()
+    scrollDown()
   }, [areVideosLoaded])
 
   useEffect(() => {
@@ -155,20 +163,20 @@ export default function MessageSpace(props: MessageSpaceProps) {
 
     if (isScrolledToBottom && hasNewMessage) {
       hideScrollButton()
-      scrollDownIfNeeded()
+      scrollDown()
     }
   }, [isScrolledToBottom, Object.keys(chatMessages).length])
 
   useEffect(() => {
     let messageDict: { [messageId: string]: Message[] } = {}
 
-    props.messages?.forEach((message) => {
+    props.receivedMessages?.forEach((message) => {
       const newMessageDict = getCombinedMessages(messageDict, message)
       messageDict = newMessageDict
     })
 
     setChatMessages(messageDict)
-  }, [props.messages?.length])
+  }, [props.receivedMessages?.length])
 
   function handleIncomingMessage(message: Message) {
     setChatMessages((prevMessages) =>
@@ -214,7 +222,7 @@ export default function MessageSpace(props: MessageSpaceProps) {
           variant="rusticSecondary"
           className="rustic-scroll-down-button"
           size="medium"
-          onClick={handleScrollDown}
+          onClick={scrollDown}
           label={
             <>
               {props.scrollDownLabel}

src/components/promptBuilder/promptBuilder.stories.tsx

@@ -301,7 +301,7 @@ export const Default = {
               ws={boilerplateWs}
               sender={user}
               supportedElements={{ text: Text }}
-              messages={messageSpaceMessages}
+              receivedMessages={messageSpaceMessages}
               getProfileComponent={(message) => {
                 return <>{message.sender.name}</>
               }}