From 1e40cf429686fccf13e1961ef82c765c21c3e7d1 Mon Sep 17 00:00:00 2001
From: Jay Hodgson <jay.hodgson@sagebase.org>
Date: Fri, 8 Nov 2024 09:25:19 -0600
Subject: [PATCH] SWC-7148

---
 .../SynapseChatInteraction.test.tsx           | 36 +++++++++++++++++++
 .../SynapseChat/SynapseChatInteraction.tsx    | 14 ++++++--
 .../src/mocks/chat/mockChat.ts                |  2 +-
 3 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 packages/synapse-react-client/src/components/SynapseChat/SynapseChatInteraction.test.tsx

diff --git a/packages/synapse-react-client/src/components/SynapseChat/SynapseChatInteraction.test.tsx b/packages/synapse-react-client/src/components/SynapseChat/SynapseChatInteraction.test.tsx
new file mode 100644
index 0000000000..2cf5b5f3a9
--- /dev/null
+++ b/packages/synapse-react-client/src/components/SynapseChat/SynapseChatInteraction.test.tsx
@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import SynapseChatInteraction, {
+  SynapseChatInteractionProps,
+} from './SynapseChatInteraction'
+
+const defaultProps: SynapseChatInteractionProps = {
+  userMessage: 'hello world',
+}
+
+function renderComponent(props?: Partial<SynapseChatInteractionProps>) {
+  render(<SynapseChatInteraction {...defaultProps} {...props} />)
+}
+describe('SynapseChatInteraction tests', () => {
+  it('Chat response is rendered', async () => {
+    renderComponent({
+      chatResponseText: 'here is a response',
+    })
+
+    const text = await screen.findByText('here is a response')
+    expect(text).toBeInTheDocument()
+  })
+
+  it('Custom LLM ML elements are removed, and tool_name content is deleted', async () => {
+    renderComponent({
+      chatResponseText:
+        '<function_results>\n<result>\n<tool_name><REDACTED>tool-name</tool_name>\n<stdout>  Content is cleaned up \n</stdout>\n</result>\n',
+    })
+
+    const text = await screen.findByText('Content is cleaned up')
+    expect(text).toBeInTheDocument()
+    expect(screen.queryByText('tool-name')).not.toBeInTheDocument()
+    // html should be removed in 2 ways (by the DOMParser cleanup in SynapseChatInteraction as well as the xss html sanitizer in MarkdownSynapse)
+    expect(screen.queryByText('<result>')).not.toBeInTheDocument()
+  })
+})
diff --git a/packages/synapse-react-client/src/components/SynapseChat/SynapseChatInteraction.tsx b/packages/synapse-react-client/src/components/SynapseChat/SynapseChatInteraction.tsx
index 5b6e83fe91..f8162fc013 100644
--- a/packages/synapse-react-client/src/components/SynapseChat/SynapseChatInteraction.tsx
+++ b/packages/synapse-react-client/src/components/SynapseChat/SynapseChatInteraction.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
 import { Alert, Box, ListItem, ListItemText } from '@mui/material'
 import { useTheme } from '@mui/material'
 import { ColorPartial } from '@mui/material/styles/createPalette'
@@ -31,6 +31,14 @@ export const SynapseChatInteraction: React.FunctionComponent<
     }
   }, [ref])
 
+  const textContent = useMemo(() => {
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(chatResponseText ?? '', 'text/html')
+    const elementsToRemove = doc.querySelectorAll('tool_name')
+    elementsToRemove.forEach(element => element.remove())
+    return doc.body.textContent ?? ''
+  }, [chatResponseText])
+
   return (
     <>
       <ListItem
@@ -49,7 +57,7 @@ export const SynapseChatInteraction: React.FunctionComponent<
       >
         <ListItemText primary={userMessage} />
       </ListItem>
-      {chatResponseText && (
+      {textContent && (
         <ListItem
           sx={{
             display: 'grid',
@@ -80,7 +88,7 @@ export const SynapseChatInteraction: React.FunctionComponent<
               maxWidth: '100%',
             }}
           >
-            <MarkdownSynapse markdown={chatResponseText} />
+            <MarkdownSynapse markdown={textContent} />
           </Box>
         </ListItem>
       )}
diff --git a/packages/synapse-react-client/src/mocks/chat/mockChat.ts b/packages/synapse-react-client/src/mocks/chat/mockChat.ts
index 698c7b3e2e..cc2a5cb70c 100644
--- a/packages/synapse-react-client/src/mocks/chat/mockChat.ts
+++ b/packages/synapse-react-client/src/mocks/chat/mockChat.ts
@@ -45,7 +45,7 @@ export const mockAgentChatRequest: AgentChatRequest = {
 export const mockAgentChatResponse: AgentChatResponse = {
   sessionId: mockChatSessionId,
   responseText:
-    'Hm, please elaborate to improve the accuracy of my response...',
+    'This is the only response this agent is told to respond with.  \n\n<function_results>\n<result>\n<tool_name><REDACTED>_get_description</tool_name>\n<stdout>  **Adapt**: You can remix, transform, and build upon the material **Attribution:** You must acknowledge the Data Contributor using the acknowledgment statement below:  **Non-Commercial**: You may not use the material for commercial purposes. \n\nThe TOPACIO study was a phase 2 clinical trial of the investigational drug OPB-51602 in patients with advanced solid tumors. The study was sponsored by Oncopia Therapeutics, Inc. and conducted at multiple sites in the United States between 2013 and 2015.\n\nThis dataset contains de-identified clinical data, biomarker data, and pharmacokinetic/pharmacodynamic (PK/PD) data from the TOPACIO study. Specific data files include:\n\n- Demographics and baseline characteristics\n- Adverse events \n- Tumor response data\n- Pharmacokinetic data\n- Pharmacodynamic biomarker data\n\nThe data has been de-identified in accordance with HIPAA regulations. Please see the study protocol and data dictionary files for more details on the collected data and definitions.\n\n**Acknowledgment Statement**: The TOPACIO study data was contributed by Oncopia Therapeutics, Inc. Please use the following text to acknowledge the source of the data: "The results published here are in part based upon data generated by the TOPACIO clinical trial, provided by Oncopia Therapeutics, Inc."\n</stdout>\n</result>\n',
 }
 
 export const mockSessionHistoryResponse: SessionHistoryResponse = {