fix: Preserve chatbot feedback after data change #2442 (#2443)

Author: marek-mihok

ui/src/chatbot.test.tsx

@@ -267,6 +267,29 @@ describe('XChatbot', () => {
     expect(emitMock).toHaveBeenCalledTimes(1)
   })
 
+  it('Preserve feedback on data change', () => {
+    const { container, getByRole, getByTestId, rerender } = render(<XChatbot {...{ ...model, data, events: ['feedback'] }} />)
+    const likeButton = container.querySelector("i[data-icon-name='Like']") as HTMLLIElement
+    expect(likeButton).toBeInTheDocument()
+
+    fireEvent.click(likeButton)
+    const likeSolidButton = container.querySelector("i[data-icon-name='LikeSolid']") as HTMLLIElement
+    expect(likeSolidButton).toBeInTheDocument()
+
+    const input = getByRole('textbox')
+    fireEvent.change(input, { target: { value: 'Woohoo' } })
+    fireEvent.click(getByTestId(`${name}-submit`))
+
+    // TODO: "rerender" does not append new message
+    rerender(<XChatbot {...{
+      ...model, data: [...data,
+      { content: 'I like it!', from_user: false }
+      ], events: ['feedback']
+    }} />)
+
+    expect(container.querySelector("i[data-icon-name='LikeSolid']") as HTMLLIElement).toBeInTheDocument()
+  })
+
   it('Renders suggestions when specified', () => {
     const { getByText } = render(<XChatbot {...{ ...model, suggestions }} />)
 

ui/src/chatbot.tsx

@@ -191,7 +191,9 @@ export const XChatbot = (props: Chatbot) => {
         setIsInfiniteLoading(true)
       }
     }, [props.events, props.name]),
-    onDataChange = React.useCallback(() => { if (props.data) setMsgs(processData(props.data)) }, [props.data]),
+    onDataChange = React.useCallback(() => {
+      if (props.data) setMsgs(prevMsgs => processData(props.data).map((msg, idx) => ({ ...msg, positive: prevMsgs?.[idx]?.positive })))
+    }, [props.data]),
     handlePositive = (id: I) => {
       setMsgs(messages => {
         if (messages[id]?.positive) return messages