Merge pull request #1360 from jay-hodgson/SWC-7148

SWC-7148

packages/synapse-react-client/src/components/SynapseChat/SynapseChatInteraction.test.tsx

@@ -0,0 +1,49 @@
+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()
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+  })
+
+  it('Error is shown in an alert', async () => {
+    const errorMessage =
+      'Sorry, AI has become uncontrollable and superintelligent leading to human existential risk'
+    renderComponent({
+      chatErrorReason: errorMessage,
+    })
+
+    const alertElement = await screen.findByRole('alert')
+    expect(alertElement).toBeInTheDocument()
+    expect(screen.queryByText(errorMessage)).toBeInTheDocument()
+  })
+})

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>
       )}

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 = {