From c2c2ff1694daef111db19fae9dbd2a39e18a1c50 Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Mon, 30 Dec 2024 12:24:29 +0100
Subject: [PATCH 1/3] fix: Preserve chatbot feedback after data change #2442

---
 ui/src/chatbot.test.tsx | 25 +++++++++++++++++++++++++
 ui/src/chatbot.tsx      |  5 ++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/ui/src/chatbot.test.tsx b/ui/src/chatbot.test.tsx
index 3b8c2b1c08..1ce26183d0 100644
--- a/ui/src/chatbot.test.tsx
+++ b/ui/src/chatbot.test.tsx
@@ -267,6 +267,31 @@ 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 }} />)
 
diff --git a/ui/src/chatbot.tsx b/ui/src/chatbot.tsx
index ef51146213..837e383721 100644
--- a/ui/src/chatbot.tsx
+++ b/ui/src/chatbot.tsx
@@ -191,7 +191,10 @@ 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(processData(props.data))
+      // 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

From 9a9dc02deb20d45c3ecd0e5d09b00dcad68a1935 Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Mon, 30 Dec 2024 12:25:44 +0100
Subject: [PATCH 2/3] fix: Append actual fix #2442

---
 ui/src/chatbot.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/src/chatbot.tsx b/ui/src/chatbot.tsx
index 837e383721..a13960034f 100644
--- a/ui/src/chatbot.tsx
+++ b/ui/src/chatbot.tsx
@@ -192,8 +192,7 @@ export const XChatbot = (props: Chatbot) => {
       }
     }, [props.events, props.name]),
     onDataChange = React.useCallback(() => {
-      if (props.data) setMsgs(processData(props.data))
-      // if (props.data) setMsgs(prevMsgs => processData(props.data).map((msg, idx) => ({ ...msg, positive: prevMsgs?.[idx]?.positive })))
+      if (props.data) setMsgs(prevMsgs => processData(props.data).map((msg, idx) => ({ ...msg, positive: prevMsgs?.[idx]?.positive })))
     }, [props.data]),
     handlePositive = (id: I) => {
       setMsgs(messages => {

From 6f5aa5e2034ead65586ade3988e1d543351f3590 Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Mon, 30 Dec 2024 12:26:38 +0100
Subject: [PATCH 3/3] chore: Formatting #2442

---
 ui/src/chatbot.test.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/ui/src/chatbot.test.tsx b/ui/src/chatbot.test.tsx
index 1ce26183d0..e25a4c0d9a 100644
--- a/ui/src/chatbot.test.tsx
+++ b/ui/src/chatbot.test.tsx
@@ -268,9 +268,7 @@ describe('XChatbot', () => {
   })
 
   it('Preserve feedback on data change', () => {
-    const { container,
-      getByRole, getByTestId,
-      rerender } = render(<XChatbot {...{ ...model, data, events: ['feedback'] }} />)
+    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()