Call monitoring requests on copy events

packages/ui/package.json

@@ -14,6 +14,7 @@
     "@mui/icons-material": "^5.14.13",
     "@mui/material": "^5.14.13",
     "@rollup/plugin-inject": "^5.0.5",
+    "excellentexport": "^3.9.9",
     "marked": "^12.0.1",
     "mui-markdown": "^1.1.11",
     "prism-react-renderer": "^2.3.1",
@@ -25,6 +26,7 @@
   },
   "devDependencies": {
     "@babel/preset-react": "^7.24.1",
+    "@svgr/webpack": "^8.1.0",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react": "^4.2.1",

packages/ui/src/components/ChatBox/AIAnswer.jsx

@@ -3,7 +3,7 @@ import { Box, Typography } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import ListItem from '@mui/material/ListItem';
 import { styled, useTheme } from '@mui/material/styles';
-import Markdown from '../Markdown';
+import Markdown, {MarkdownProvider} from '../Markdown';
 import CopyIcon from '../Icons/CopyIcon';
 import DeleteIcon from '../Icons/DeleteIcon';
 import RegenerateIcon from '../Icons/RegenerateIcon';
@@ -118,6 +118,7 @@ const AIAnswer = React.forwardRef((props, ref) => {
     participant,
     created_at,
     interaction_uuid,
+    exception,
   } = props
   const theme = useTheme();
   const [showActions, setShowActions] = useState(false);
@@ -217,9 +218,11 @@ const AIAnswer = React.forwardRef((props, ref) => {
             </StyledTooltip>
           }
         </ButtonsContainer>}
-        <Markdown interaction_uuid={interaction_uuid}>
-          {answer}
-        </Markdown>
+        <MarkdownProvider interaction_uuid={interaction_uuid}>
+          <Markdown>
+            {!exception ? (answer || '') : 'LLM exception: ```text\n' + exception + '\n```'}
+          </Markdown>
+        </MarkdownProvider>
         {isLoading && <AnimatedProgress
           sx={{
             fontWeight: "400",

packages/ui/src/components/ChatBox/ApplicationAnswer.jsx

@@ -1,7 +1,7 @@
 import React, {useState, useCallback} from 'react';
 import { Box, Typography } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
-import Markdown from '../Markdown';
+import Markdown, {MarkdownProvider} from '../Markdown';
 import CopyIcon from '../Icons/CopyIcon';
 import DeleteIcon from '../Icons/DeleteIcon';
 import RegenerateIcon from '../Icons/RegenerateIcon';
@@ -151,9 +151,11 @@ const ApplicationAnswer = React.forwardRef((props, ref) => {
               </StyledTooltip>
             }
           </ButtonsContainer>}
-          <Markdown interaction_uuid={interaction_uuid}>
-            {!exception ? answer : 'Agent exception!'}
-          </Markdown>
+          <MarkdownProvider interaction_uuid={interaction_uuid}>
+            <Markdown>
+              {!exception ? answer : 'Agent exception: ```text\n' + exception + '\n```'}
+            </Markdown>
+          </MarkdownProvider>
           {isLoading && <AnimatedProgress
             sx={{
               fontWeight: "400",

packages/ui/src/components/ChatBox/ChatBox.jsx

@@ -190,7 +190,7 @@ const ChatBox = forwardRef(({
   const participantRef = useRef(participant);
   const chatWithRef = useRef(chatWith);
 
-  const { interaction_uuid } = useInteractionUUID();
+  const { interaction_uuid, setInteractionUUID, firstRenderUUID } = useInteractionUUID();
 
   useEffect(() => {
     participantRef.current = participant
@@ -217,7 +217,9 @@ const ChatBox = forwardRef(({
     if (chatHistory.length) {
       onDeleteAll();
     }
-  }, [chatHistory.length, onDeleteAll])
+    firstRenderUUID.current = true;
+    setInteractionUUID('');
+  }, [chatHistory.length, firstRenderUUID, setInteractionUUID])
 
   useImperativeHandle(boxRef, () => ({
     onClear: onClickClearChat,
@@ -585,7 +587,11 @@ const ChatBox = forwardRef(({
             <ActionButtons
               isStreaming={isStreaming}
               onStopAll={onStopAll}
-              onRefresh={loadCoreData}
+              onRefresh={() => {
+                loadCoreData();
+                firstRenderUUID.current = true;
+                setInteractionUUID('');
+              }}
             />
             <ActionButton
               data-testid="ClearTheChatButton"

packages/ui/src/components/ChatBox/useMonitorOnCopyEvent.js

@@ -4,23 +4,25 @@ import DataContext from "@/context/DataContext.jsx";
 
 
 export const useInteractionUUID = () => {
-  const firstRender = useRef(true)
+  const firstRenderUUID = useRef(true)
   const [interaction_uuid, setInteractionUUID] = useState('')
 
   useEffect(() => {
-    if (firstRender.current) {
-      firstRender.current = false;
+    if (firstRenderUUID.current) {
+      firstRenderUUID.current = false;
       if (!interaction_uuid) {
         setInteractionUUID(uuidv4())
       }
     }
   }, [interaction_uuid])
   return {
-    interaction_uuid
+    interaction_uuid,
+    setInteractionUUID,
+    firstRenderUUID
   }
 }
 
-export default function useMonitorOnCopyEvent({ interaction_uuid, onCopy }) {
+export default function useMonitorOnCopyEvent({ interaction_uuid, onCopy, onDownload }) {
   const { providerConfig } = useContext(DataContext);
 
   const onMonitorCopy = useCallback(
@@ -46,9 +48,20 @@ export default function useMonitorOnCopyEvent({ interaction_uuid, onCopy }) {
     },
     [onCopy, onMonitorCopy],
   )
-
+
+  const onClickDownload = useCallback(
+    (params) => {
+      onDownload && onDownload(params)
+      if (interaction_uuid) {
+        onMonitorCopy(null, 'download')
+      }
+    },
+    [interaction_uuid, onDownload, onMonitorCopy],
+  )
+
   return {
     onMonitorCopy,
-    onClickCopy
+    onClickCopy,
+    onClickDownload
   }
 }