rasa-pro 3.14.0.dev20250901__py3-none-any.whl → 3.14.0rc1__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

@@ -12,24 +12,27 @@ import useWebSocket, { ReadyState } from 'react-use-websocket'
 import { Chat } from './components/Chat'
 import { DiagramFlow } from './components/DiagramFlow'
 import { DialougeInformation } from './components/DialogueInformation'
-import { DialogueStack } from './components/DialogueStack'
+import { DialogueHistoryStack } from './components/DialogueHistoryStack'
 import { LoadingSpinner } from './components/LoadingSpinner'
 import { RecruitmentPanel } from './components/RecruitmentPanel'
 import { Welcome } from './components/Welcome'
 import { formatSlots } from './helpers/formatters'
 import {
   createHistoricalStack,
-  flowStepTrail,
+  flowStepTrail, updateAgentsStatus,
   updatedActiveFrame,
 } from './helpers/utils'
 import { useOurTheme } from './theme'
-import { Event, Flow, SelectedStack, Slot, Stack, Tracker } from './types'
+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>('')
@@ -101,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 } })
@@ -128,19 +148,13 @@ export function App() {
       !rasaChatSessionId ||
       lastJsonMessage?.sender_id === rasaChatSessionId
     ) {
-      if (lastJsonMessage.latency) {
-        console.log('Latency update:', lastJsonMessage.latency)
-        setLatency((prevLatency: any) => ({
-          ...prevLatency,
-          ...lastJsonMessage.latency,
-        }))
-      }
       setSlots(formatSlots(lastJsonMessage.slots))
       setEvents(lastJsonMessage.events)
       const updatedStack = createHistoricalStack(
         lastJsonMessage.stack,
         lastJsonMessage.events,
       )
+      setAgents(prevAgents => updateAgentsStatus(prevAgents, lastJsonMessage.events))
       setStack(updatedStack)
       setFrame(updatedActiveFrame(frame, updatedStack, lastJsonMessage.events))
       setRasaChatSessionId(lastJsonMessage.sender_id)
@@ -183,21 +197,6 @@ export function App() {
       : 'max-content minmax(10rem, 17.5rem) minmax(10rem, auto)',
     gridRowGap: rasaSpace[1],
   }
-  const rightColumnSx = {
-    height: '100%',
-    overflow: 'hidden',
-    gridTemplateColumns: '1fr',
-    gridTemplateRows: 'max-content 1fr',
-    gridRowGap: rasaSpace[1],
-  }
-
-  const chatContainerSx = {
-    ...borderRadiusSx,
-    padding: rasaSpace[1],
-    bg: useColorModeValue('neutral.50', 'neutral.50'),
-    overflow: 'auto', // Allow scrolling for chat
-    height: '100%',
-  }
 
   const onFrameSelected = (stack: Stack) => {
     setFrame({
@@ -239,12 +238,16 @@ 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}
@@ -263,15 +266,11 @@ export function App() {
           slots={slots}
         />
       </GridItem>
-      <GridItem overflow="hidden">
-        <Grid sx={rightColumnSx}>
-          {shouldShowTranscript && (
-            <GridItem sx={chatContainerSx}>
-              <Chat events={events || []} />
-            </GridItem>
-          )}
-        </Grid>
-      </GridItem>
+      {shouldShowTranscript && (
+        <GridItem>
+          <Chat events={events || []} />
+        </GridItem>
+      )}
     </Grid>
   )
 }

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

@@ -5,7 +5,6 @@ import { Command, Event } from '../types'
 
 interface Props extends FlexProps {
   events: Event[]
-  hasLatencyDisplay?: boolean
 }
 
 export const Chat = ({ sx, events, ...props }: Props) => {
@@ -13,9 +12,9 @@ export const Chat = ({ sx, events, ...props }: Props) => {
     ...sx,
     p: 0,
     flexDirection: 'column',
-    height: '100%',
   }
 
+  const maxHeight = document.documentElement.scrollHeight - 64
   // 21 and 25 are the rem number we're using for the columns. We add 0.75rem for the padding
   // A potential improvement would be to add a onresize event for both width and height
   let remReference = 21.75
@@ -111,7 +110,7 @@ export const Chat = ({ sx, events, ...props }: Props) => {
           borderRadius: '10px',
           border: 'none',
           width: columnWidth,
-          height: '100%',
+          height: maxHeight,
         }}
         history={messages}
         demo={true}

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

@@ -95,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}>
@@ -166,7 +167,10 @@ export const DialougeInformation = ({
           </TabPanel>
           <TabPanel sx={tabPanelSx}>
             <Box sx={overflowBox}>
-              <LatencyDisplay latency={latency} />
+              <LatencyDisplay
+                voiceLatency={latency}
+                rasaLatency={rasaLatency}
+              />
             </Box>
           </TabPanel>
         </TabPanels>
@@ -194,3 +198,7 @@ const CustomTab = (props: TabProps) => {
     </Button>
   )
 }
+
+const getLastActionListenEvent = (events: Event[]): Event | undefined => {
+  return [...events].reverse().find((event) => event.name === 'action_listen')
+}

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

@@ -2,40 +2,47 @@ import {
   Box,
   Flex,
   FlexProps,
-  Text,
-  useColorModeValue,
-  Tooltip,
   Table,
   Tbody,
-  Tr,
   Td,
+  Text,
+  Tooltip,
+  Tr,
+  useColorModeValue,
 } from '@chakra-ui/react'
 import { useOurTheme } from '../theme'
-import { LatencyData } from '../types'
+import {
+  isRasaLatency,
+  isVoiceLatency,
+  RasaLatency,
+  VoiceLatency,
+} from '../types'
 
-interface Props extends FlexProps {
-  latency: LatencyData
+interface MinimalDisplayProps extends FlexProps {
+  latency: RasaLatency
 }
 
 /**
  * Simple latency display for text-only conversations.
  * Shows a single response time value.
  */
-const MinimalDisplay = ({ latency, sx, ...props }: Props) => {
+const MinimalDisplay = ({ latency, sx, ...props }: MinimalDisplayProps) => {
   const containerSx = {
     ...sx,
     display: 'flex',
     alignItems: 'center',
   }
-  
+
   const getLatencyColor = (latency: number) => {
     if (latency < 1500) return 'green.500'
     if (latency < 2500) return 'orange.500'
     return 'red.500'
   }
-  
-  const value = Math.round(latency.rasa_processing_latency_ms || 0);
-  const color = getLatencyColor(value);
+
+  const value = Math.round(
+    (latency.command_processor || 0) + (latency.prediction_loop || 0),
+  )
+  const color = getLatencyColor(value)
 
   return (
     <Flex sx={containerSx} {...props}>
@@ -49,11 +56,15 @@ const MinimalDisplay = ({ latency, sx, ...props }: Props) => {
   )
 }
 
+interface WaterfallDisplayProps extends FlexProps {
+  latency: VoiceLatency
+}
+
 /**
  * Detailed latency waterfall chart for voice conversations.
  * Displays processing times for ASR, Rasa, and TTS components.
  */
-const WaterfallDisplay = ({ latency, sx, ...props }: Props) => {
+const WaterfallDisplay = ({ latency, sx, ...props }: WaterfallDisplayProps) => {
   const { rasaSpace } = useOurTheme()
 
   const containerSx = {
@@ -61,13 +72,13 @@ const WaterfallDisplay = ({ latency, sx, ...props }: Props) => {
     flexDirection: 'column',
     gap: rasaSpace[1],
   }
-  
+
   const headerSx = {
     fontSize: 'sm',
     fontWeight: 'bold',
     color: useColorModeValue('gray.700', 'gray.300'),
   }
-  
+
   const waterfallBarSx = {
     height: '24px',
     borderRadius: '4px',
@@ -75,10 +86,10 @@ const WaterfallDisplay = ({ latency, sx, ...props }: Props) => {
     border: '1px solid',
     borderColor: useColorModeValue('gray.200', 'gray.600'),
   }
-  
+
   const legendTableSx = {
     size: 'sm',
-    mt: rasaSpace[0.5]
+    mt: rasaSpace[0.5],
   }
 
   const getLatencyColor = (type: string) => {
@@ -95,8 +106,10 @@ const WaterfallDisplay = ({ latency, sx, ...props }: Props) => {
     const descriptions: { [key: string]: string } = {
       asr: 'Time from the first Partial Transcript event to the Final Transcript event from Speech Recognition. It also includes the time taken by the user to speak.',
       rasa: 'Time taken by Rasa to process the text from the Final Transcript event from Speech Recognition until a text response is generated.',
-      tts_first: 'Time between the request sent to Text-to-Speech processing and the first byte of audio received by Rasa.',
-      tts_complete: 'Time taken by Text-to-Speech to complete audio generation. It depends on the length of the text and could overlap with the Bot speaking time.'
+      tts_first:
+        'Time between the request sent to Text-to-Speech processing and the first byte of audio received by Rasa.',
+      tts_complete:
+        'Time taken by Text-to-Speech to complete audio generation. It depends on the length of the text and could overlap with the Bot speaking time.',
     }
     return descriptions[type] || ''
   }
@@ -151,10 +164,10 @@ const WaterfallDisplay = ({ latency, sx, ...props }: Props) => {
   )
 
   // Calculate total latency for title (Rasa + TTS First Byte)
-  const totalDisplayLatency = 
-    (latency.rasa_processing_latency_ms || 0) + 
-    (latency.tts_first_byte_latency_ms || 0);
-    
+  const totalDisplayLatency =
+    (latency.rasa_processing_latency_ms || 0) +
+    (latency.tts_first_byte_latency_ms || 0)
+
   return (
     <Flex sx={containerSx} {...props}>
       <Text sx={headerSx}>
@@ -241,28 +254,43 @@ const WaterfallDisplay = ({ latency, sx, ...props }: Props) => {
   )
 }
 
+interface LatencyDisplayProps extends FlexProps {
+  voiceLatency?: any
+  rasaLatency?: any
+}
+
 /**
  * Displays processing latency information for the conversation.
- * Shows either a detailed waterfall chart for voice conversations or 
+ * Shows either a detailed waterfall chart for voice conversations or
  * a simpler display for text-only conversations.
  */
 export const LatencyDisplay = ({
   sx,
-  latency,
+  voiceLatency,
+  rasaLatency,
   ...props
-}: Props) => {
-  if (!latency) {
-    console.warn('Latency data is not available')
-    return null
+}: LatencyDisplayProps) => {
+  // We give priority to voice latency as most comprehensive.
+  if (isVoiceLatency(voiceLatency)) {
+    return <WaterfallDisplay latency={voiceLatency} sx={sx} {...props} />
   }
 
-  // Show waterfall if voice metrics are available, otherwise show minimal display
-  const isVoiceMetricsAvailable =
-    latency.asr_latency_ms && latency.tts_complete_latency_ms
+  // If voice latency is not available, we use rasa latency.
+  if (isRasaLatency(rasaLatency)) {
+    return <MinimalDisplay latency={rasaLatency} sx={sx} {...props} />
+  }
 
-  if (isVoiceMetricsAvailable) {
-    return <WaterfallDisplay latency={latency} sx={sx} {...props} />
+  // If rasa latency is not available, we are either waiting for first data from voice stream or the conversation is not started yet.
+  if (!rasaLatency) {
+    return <Text>Rasa latency data is not available yet</Text>
   }
 
-  return <MinimalDisplay latency={latency} sx={sx} {...props} />
+  // If rasa latency is available but did not pass type guard, we are in an unexpected state
+  // and we should log an error but gracefully fallback to showing no data.
+  console.warn(
+    `Latency data has unexpected format. Raw data of rasaLatency: ${rasaLatency},
+    raw data of voice latency: ${voiceLatency}`,
+  )
+
+  return <Text>Latency data is not available yet</Text>
 }

rasa/core/channels/inspector/src/helpers/audio/audiostream.ts

@@ -8,7 +8,7 @@ const audioOptions = {
   },
 }
 
-const arrayBufferToBase64 = (buffer: ArrayBuffer): string => {
+const arrayBufferToBase64 = (buffer: ArrayBufferLike): string => {
   let binary = ''
   const bytes = new Uint8Array(buffer)
   const len = bytes.byteLength
@@ -52,6 +52,7 @@ interface AudioQueue {
   addMarker: (id: string) => void
   reduceMarkers: (bytesRead: number) => void
   popMarkers: () => void
+  clear: () => void
 }
 
 const createAudioQueue = (socket: WebSocket): AudioQueue => {
@@ -108,6 +109,14 @@ const createAudioQueue = (socket: WebSocket): AudioQueue => {
         }
       })
     },
+
+    /**
+     * Clears the audio queue, removing all buffered audio and markers.
+     */
+    clear: function () {
+      this.buffer = new Float32Array(0)
+      this.marks = []
+    },
   }
 }
 
@@ -187,7 +196,8 @@ const setupAudioPlayback = async (socket: WebSocket): Promise<AudioQueue> => {
 }
 
 const addDataToAudioQueue =
-  (audioQueue: AudioQueue, onLatencyUpdate?: (latency: any) => void) => (message: MessageEvent<any>) => {
+  (audioQueue: AudioQueue, onLatencyUpdate?: (latency: any) => void) =>
+  (message: MessageEvent<any>) => {
     try {
       const data = JSON.parse(message.data.toString())
       if (data['error']) {
@@ -204,6 +214,10 @@ const addDataToAudioQueue =
         }
         console.log('Voice Latency Metrics:', data['latency'])
         audioQueue.addMarker(data['marker'])
+      } else if (data['interruptPlayback']) {
+        // User interrupted the bot, immediately clear the audio queue
+        audioQueue.clear()
+        console.log('Audio queue cleared due to user interruption.')
       }
     } catch (error) {
       console.error('Error processing server incoming audio data:', error)
@@ -237,7 +251,10 @@ function getWebSocketUrl(baseUrl: string) {
  * @param baseUrl - The base URL (e.g., "https://example.com" or "http://localhost:5005")
  * @param onLatencyUpdate - Optional callback function to receive latency updates
  */
-export async function createAudioConnection(baseUrl: string, onLatencyUpdate?: (latency: any) => void) {
+export async function createAudioConnection(
+  baseUrl: string,
+  onLatencyUpdate?: (latency: any) => void,
+) {
   const websocketURL = getWebSocketUrl(baseUrl)
   const socket = new WebSocket(websocketURL)
 

rasa/core/channels/inspector/src/helpers/formatters.test.ts

@@ -294,6 +294,7 @@ describe('helpers', () => {
           step_id: 'step_id',
           collect: fieldValue,
           ended: false,
+          type: 'flow',
         }),
       ).toEqual(fieldValue)
     })
@@ -307,6 +308,7 @@ describe('helpers', () => {
           flow_id: 'flow_id',
           step_id: 'step_id',
           ended: false,
+          type: 'flow',
         }),
       ).toEqual(fieldValue)
     })
@@ -321,6 +323,7 @@ describe('helpers', () => {
           step_id: 'step_id',
           collect: fieldValue,
           ended: false,
+          type: 'flow',
         }),
       ).toEqual(`${fieldValue} is not null`)
     })
@@ -335,6 +338,7 @@ describe('helpers', () => {
           step_id: 'step_id',
           collect: fieldValue,
           ended: false,
+          type: 'flow',
         }),
       ).toEqual(`not ${fieldValue}`)
     })