rasa-pro 3.13.12__py3-none-any.whl → 3.14.0__py3-none-any.whl

rasa/core/channels/inspector/package.json

@@ -16,48 +16,48 @@
   "dependencies": {
     "@chakra-ui/icons": "^2.2.4",
     "@chakra-ui/react": "2.8.1",
-    "@emotion/react": "11.11.1",
-    "@emotion/styled": "11.11.0",
-    "axios": "1.8.2",
-    "deep-chat-react": "2.0.1",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
+    "axios": "1.12.2",
+    "deep-chat-react": "2.2.2",
     "framer-motion": "10.16.4",
-    "immutable-json-patch": "^6.0.1",
+    "immutable-json-patch": "^6.0.2",
     "mermaid": "10.9.3",
-    "query-string": "^9.0.0",
+    "query-string": "^9.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-syntax-highlighter": "15.5.0",
-    "react-use-websocket": "^4.8.1",
+    "react-syntax-highlighter": "15.6.6",
+    "react-use-websocket": "^4.13.0",
     "usehooks-ts": "2.9.1"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "6.1.4",
+    "@testing-library/jest-dom": "6.8.0",
     "@testing-library/react": "14.0.0",
     "@types/jest": "29.5.6",
     "@types/node": "16",
     "@types/react": "^18.2.15",
     "@types/react-dom": "18.2.7",
-    "@types/react-syntax-highlighter": "15.5.9",
+    "@types/react-syntax-highlighter": "15.5.13",
     "@typescript-eslint/eslint-plugin": "6.0.0",
     "@typescript-eslint/parser": "6.0.0",
     "@vitejs/plugin-react": "4.0.3",
     "eslint": "8.45.0",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-react-refresh": "0.4.3",
+    "eslint-plugin-react-refresh": "0.4.21",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "prettier": "^3.5.3",
-    "ts-jest": "29.1.1",
-    "ts-node": "10.9.1",
-    "typescript": "5.0.2",
+    "prettier": "^3.6.2",
+    "ts-jest": "29.4.4",
+    "ts-node": "10.9.2",
+    "typescript": "5.9.2",
     "vite": "4.5.12"
   },
   "resolutions": {
-    "cross-spawn": "7.0.5",
+    "cross-spawn": "7.0.6",
     "dompurify": "3.1.3",
     "braces": "3.0.3",
-    "ws": "8.17.1",
+    "ws": "8.18.3",
     "rollup": "3.29.5",
-    "@adobe/css-tools": "^4.3.2"
+    "@adobe/css-tools": "^4.4.4"
   }
 }

rasa/core/channels/inspector/src/App.tsx

@@ -5,36 +5,40 @@ import {
   useColorModeValue,
   useToast,
 } from '@chakra-ui/react'
-import { useEffect, useState } from 'react'
 import axios from 'axios'
-import { useOurTheme } from './theme'
-import { Welcome } from './components/Welcome'
-import { DialogueStack } from './components/DialogueStack'
+import queryString from 'query-string'
+import { useCallback, useEffect, useState } from 'react'
+import useWebSocket, { ReadyState } from 'react-use-websocket'
+import { Chat } from './components/Chat'
+import { DiagramFlow } from './components/DiagramFlow'
 import { DialougeInformation } from './components/DialogueInformation'
+import { DialogueHistoryStack } from './components/DialogueHistoryStack'
 import { LoadingSpinner } from './components/LoadingSpinner'
-import { DiagramFlow } from './components/DiagramFlow'
 import { RecruitmentPanel } from './components/RecruitmentPanel'
+import { Welcome } from './components/Welcome'
 import { formatSlots } from './helpers/formatters'
-import { Slot, Stack, Event, Flow, SelectedStack, Tracker } from './types'
 import {
   createHistoricalStack,
-  flowStepTrail,
+  flowStepTrail, updateAgentsStatus,
   updatedActiveFrame,
 } from './helpers/utils'
-import queryString from 'query-string'
-import { Chat } from './components/Chat'
-import useWebSocket, { ReadyState } from 'react-use-websocket'
+import { useOurTheme } from './theme'
+import { Event, Flow, SelectedStack, Slot, Stack, Tracker, Agent } from './types'
+import {DialogueAgentStack} from "./components/DialogueAgentStack.tsx";
+
 
 export function App() {
   const toast = useToast()
   const { rasaSpace, rasaRadii } = useOurTheme()
   const [rasaChatSessionId, setRasaChatSessionId] = useState<string>('')
   const [flows, setFlows] = useState<Flow[]>([])
+  const [agents, setAgents] = useState<Agent[]>([])
   const [slots, setSlots] = useState<Slot[]>([])
   const [events, setEvents] = useState<Event[]>([])
   const [story, setStory] = useState<string>('')
   const [stack, setStack] = useState<Stack[]>([])
   const [frame, setFrame] = useState<SelectedStack | undefined>(undefined)
+  const [latency, setLatency] = useState<any>(null)
 
   // State to control the visibility of the RecruitmentPanel
   const [showRecruitmentPanel, setShowRecruitmentPanel] = useState(true)
@@ -100,6 +104,23 @@ export function App() {
       })
   }, [toast])
 
+  useEffect(() => {
+    axios
+      .get('/sub-agents', { params: { token } })
+      .then((response) => setAgents((response.data)))
+      .catch((error) => {
+        if (toast.isActive('agents')) return
+        toast({
+          id: 'agents',
+          title: 'Agents could not be retrieved',
+          description: error?.message || 'An unknown error happened.',
+          status: 'error',
+          duration: 4000,
+          isClosable: true,
+        })
+      })
+  }, [toast])
+
   function fetchStory() {
     axios
       .get(`/conversations/${rasaChatSessionId}/story`, { params: { token } })
@@ -133,6 +154,7 @@ export function App() {
         lastJsonMessage.stack,
         lastJsonMessage.events,
       )
+      setAgents(prevAgents => updateAgentsStatus(prevAgents, lastJsonMessage.events))
       setStack(updatedStack)
       setFrame(updatedActiveFrame(frame, updatedStack, lastJsonMessage.events))
       setRasaChatSessionId(lastJsonMessage.sender_id)
@@ -188,8 +210,25 @@ export function App() {
     setShowRecruitmentPanel(false)
   }
 
+  const onLatencyUpdate = useCallback((newLatency: any) => {
+    setLatency((prevLatency: any) => ({
+      ...prevLatency,
+      ...newLatency,
+    }))
+  }, [])
+
+  // Make latency update function available globally for audio stream
+  useEffect(() => {
+    if (window.location.href.includes('browser_audio')) {
+      ;(window as any).updateLatency = onLatencyUpdate
+    }
+    return () => {
+      delete (window as any).updateLatency
+    }
+  }, [onLatencyUpdate])
+
   if (!rasaChatSessionId && !window.location.href.includes('socketio'))
-    return <LoadingSpinner />
+    return <LoadingSpinner onLatencyUpdate={onLatencyUpdate} />
 
   return (
     <Grid sx={gridSx}>
@@ -199,18 +238,23 @@ export function App() {
           {showRecruitmentPanel && (
             <RecruitmentPanel onClose={handleCloseRecruitmentPanel} />
           )}
-          <DialogueStack
+          <DialogueHistoryStack
             sx={boxSx}
             stack={stack}
             active={frame?.stack}
             onItemClick={onFrameSelected}
           />
+          {agents.length > 0 ? (<DialogueAgentStack
+            sx={boxSx}
+            agents={agents}
+          />):null}
           <DialougeInformation
             sx={boxSx}
             rasaChatSessionId={rasaChatSessionId}
             slots={slots}
             events={events}
             story={story}
+            latency={latency}
           />
         </Grid>
       </GridItem>

rasa/core/channels/inspector/src/components/DiagramFlow.tsx

@@ -22,7 +22,7 @@ export const DiagramFlow = ({ stackFrame, stepTrail, flows, slots }: Props) => {
 
   const config = {
     startOnLoad: true,
-    logLevel: 'info',
+    logLevel: 'warning',
     flowchart: {
       useMaxWidth: false,
     },

rasa/core/channels/inspector/src/components/DialogueAgentStack.tsx

@@ -0,0 +1,108 @@
+import {
+  Box,
+  FlexProps,
+  Heading,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  Text,
+  Flex,
+} from '@chakra-ui/react'
+import { useOurTheme } from '../theme'
+import {Agent, Stack} from '../types'
+
+function mapStatusToHumanReadableName(status: Agent['status']) {
+  switch (status) {
+    case 'running':
+      return 'Running'
+    case 'completed':
+      return 'Completed'
+    case 'interrupted':
+      return 'Interrupted'
+    case 'cancelled':
+      return 'Cancelled'
+    default:
+      return '-'
+  }
+}
+
+interface Props extends FlexProps {
+  agents: Agent[]
+  active?: Stack
+  onItemClick?: (stack: Stack) => void
+}
+
+function AgentRow({
+  agent,
+}: {
+  agent: Agent
+}) {
+
+  return (
+    <Tr>
+      <Td>
+          <Text noOfLines={1}>{agent.name}</Text>
+      </Td>
+      <Td>
+          <Text noOfLines={1}>{mapStatusToHumanReadableName(agent.status)}</Text>
+      </Td>
+    </Tr>
+  )
+}
+
+export const DialogueAgentStack = ({
+  sx,
+  agents,
+  active,
+  onItemClick,
+  ...props
+}: Props) => {
+  const { rasaSpace } = useOurTheme()
+
+  const containerSx = {
+    ...sx,
+    pr: 0,
+    pb: 0,
+    flexDirection: 'column',
+  }
+  const overflowBox = {
+    height: '100%',
+    overflow: 'auto',
+    pr: rasaSpace[1],
+    pb: rasaSpace[0.5],
+  }
+
+  return (
+    <Flex sx={containerSx} {...props}>
+      <Flex>
+        <Heading size="lg" mb={rasaSpace[0.5]}>
+          Agents
+        </Heading>
+        <Text ml={rasaSpace[0.25]}>({agents.length} {agents.length === 1 ? 'agent' : 'agents'})</Text>
+      </Flex>
+      <Box sx={overflowBox}>
+        <Table width="100%" layout="fixed">
+          <Thead>
+            <Tr>
+              <Th>Name</Th>
+              <Th width="40%">Status</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {agents.length > 0 &&
+              [...agents]
+                .reverse()
+                .map((agent) => (
+                  <AgentRow
+                    agent={agent}
+                  />
+                ))}
+          </Tbody>
+        </Table>
+      </Box>
+    </Flex>
+  )
+}

rasa/core/channels/inspector/src/components/{DialogueStack.tsx → DialogueHistoryStack.tsx}

@@ -77,7 +77,7 @@ function StackRow({
   )
 }
 
-export const DialogueStack = ({
+export const DialogueHistoryStack = ({
   sx,
   stack,
   active,
@@ -105,7 +105,7 @@ export const DialogueStack = ({
         <Heading size="lg" mb={rasaSpace[0.5]}>
           History
         </Heading>
-        <Text ml={rasaSpace[0.25]}>({stack.length} flows)</Text>
+        <Text ml={rasaSpace[0.25]}>({stack.length} {stack.length === 1 ? 'flow' : 'flows'})</Text>
       </Flex>
       <Box sx={overflowBox}>
         <Table width="100%" layout="fixed">
@@ -118,6 +118,7 @@ export const DialogueStack = ({
           <Tbody>
             {stack.length > 0 &&
               [...stack]
+                .filter(frame => !frame.agent_id)
                 .reverse()
                 .map((stack) => (
                   <StackRow
@@ -134,6 +135,7 @@ export const DialogueStack = ({
                   flow_id: '-',
                   step_id: '-',
                   ended: false,
+                  type: "flow"
                 }}
               />
             )}

rasa/core/channels/inspector/src/components/DialogueInformation.tsx

@@ -13,13 +13,14 @@ import {
   useTab,
   useToast,
 } from '@chakra-ui/react'
+import { useEffect } from 'react'
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { useCopyToClipboard } from 'usehooks-ts'
+import { formatTestCases } from '../helpers/formatters'
 import { useOurTheme } from '../theme'
 import { Event, Slot } from '../types'
-import { formatTestCases } from '../helpers/formatters'
-import { useCopyToClipboard } from 'usehooks-ts'
-import { useEffect } from 'react'
 import { FullscreenButton } from './FullscreenButton'
+import { LatencyDisplay } from './LatencyDisplay'
 import { SlotTable, Slots } from './Slots'
 
 interface Props extends FlexProps {
@@ -27,6 +28,7 @@ interface Props extends FlexProps {
   events: Event[]
   story: string
   slots: Slot[]
+  latency: any
 }
 
 export const DialougeInformation = ({
@@ -35,6 +37,7 @@ export const DialougeInformation = ({
   events,
   story,
   slots,
+  latency,
   ...props
 }: Props) => {
   const toast = useToast()
@@ -92,6 +95,7 @@ export const DialougeInformation = ({
   }, [copiedText, toast])
 
   const testCases = formatTestCases(events, rasaChatSessionId)
+  const rasaLatency = getLastActionListenEvent(events)?.metadata?.execution_times
 
   return (
     <Flex sx={containerSx} {...props}>
@@ -105,6 +109,7 @@ export const DialougeInformation = ({
           <CustomTab>Slots</CustomTab>
           <CustomTab>End-2-end test</CustomTab>
           <CustomTab>Tracker state</CustomTab>
+          <CustomTab>Latency</CustomTab>
         </TabList>
         <TabPanels height="100%" overflow="hidden">
           <TabPanel sx={tabPanelSx}>
@@ -160,6 +165,14 @@ export const DialougeInformation = ({
               </FullscreenButton>
             </HStack>
           </TabPanel>
+          <TabPanel sx={tabPanelSx}>
+            <Box sx={overflowBox}>
+              <LatencyDisplay
+                voiceLatency={latency}
+                rasaLatency={rasaLatency}
+              />
+            </Box>
+          </TabPanel>
         </TabPanels>
       </Tabs>
     </Flex>
@@ -185,3 +198,7 @@ const CustomTab = (props: TabProps) => {
     </Button>
   )
 }
+
+const getLastActionListenEvent = (events: Event[]): Event | undefined => {
+  return [...events].reverse().find((event) => event.name === 'action_listen')
+}