rasa-pro 3.14.0.dev20250922__py3-none-any.whl → 3.14.0rc2__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 } })
@@ -134,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)
@@ -217,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}

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/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
@@ -196,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']) {
@@ -218,7 +219,6 @@ const addDataToAudioQueue =
         audioQueue.clear()
         console.log('Audio queue cleared due to user interruption.')
       }
-
     } catch (error) {
       console.error('Error processing server incoming audio data:', error)
     }
@@ -251,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}`)
     })

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

@@ -1,5 +1,5 @@
-import { rasaColors } from '../theme/base/colors'
-import type { Event, Flow, Slot, Stack } from '../types'
+import {rasaColors} from '../theme/base/colors'
+import type {Event, Flow, Slot, Stack} from '../types'
 
 export function formatSlots(slots: { [key: string]: unknown }) {
   if (!slots) {
@@ -13,7 +13,7 @@ export function formatSlots(slots: { [key: string]: unknown }) {
         slotDuple[0] !== 'flow_hashes' &&
         slotDuple[1] != null,
     )
-    .map((slotDuple) => ({ name: slotDuple[0], value: slotDuple[1] }))
+    .map((slotDuple) => ({name: slotDuple[0], value: slotDuple[1]}))
 }
 
 export const formatTestCases = (events: Event[], sessionId: string) => {
@@ -85,11 +85,14 @@ export const formatFlow = (
     `flowchart TD
 classDef collect stroke-width:1px
 classDef action fill:#FBFCFD,stroke:#A0B8CF
+classDef noop fill:#FBFCFD
+classDef callstep fill:#FBFCFD
 classDef link fill:#f43
 classDef slot fill:#e8f3db,stroke:#c5e1a5
 classDef endstep fill:#ccc,stroke:#444
 classDef previous stroke:${rasaColors.rasaOrange[400]},stroke-width:1px
 classDef active stroke:${rasaColors.rasaOrange[400]},stroke-width:3px,fill:${rasaColors.warning[50]}
+classDef pulse animation:pulse 2s infinite
 `,
   ]
   try {
@@ -210,6 +213,24 @@ function renderStepSequence(
       )}"]:::slot\n`
     }
 
+    if (step.call) {
+      const isAgentWaitingOnInput = !!currentStack?.agent_id && currentStack?.state === 'waiting_for_input'
+      mermaidTextFragment += `${mermaidId}["${encodeDoubleQuotes(
+        stepId,
+      )} 🤖"]:::callstep\n`
+
+      if (isAgentWaitingOnInput) {
+        mermaidTextFragment += `class ${mermaidId} pulse\n`
+      }
+    }
+
+    if (step.noop) {
+      mermaidTextFragment += `${mermaidId}["${parseFieldUsingStack(
+        stepId,
+        currentStack
+      )}"]:::noop\n`
+    }
+
     if (activeStep && stepId === activeStep) {
       mermaidTextFragment += `class ${mermaidId} active\n`
     } else if (stepTrail?.includes(stepId)) {

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

@@ -0,0 +1,127 @@
+import { updateAgentsStatus } from './utils'
+import type { Agent, Event } from '../types'
+
+// Helper to clone agents (immutability check)
+const clone = <T>(x: T): T => JSON.parse(JSON.stringify(x))
+
+describe('updateAgentsStatus', () => {
+  test('returns empty array when agents undefined', () => {
+    // @ts-expect-error testing runtime behavior with undefined
+    expect(updateAgentsStatus(undefined, [])).toEqual([])
+  })
+
+  test('returns same agents when agents empty', () => {
+    const agents: Agent[] = []
+    const events: Event[] = [
+      { event: 'agent_started', timestamp: '1' } as any,
+    ]
+    expect(updateAgentsStatus(agents, events)).toEqual([])
+  })
+
+  test('returns same agents when events empty', () => {
+    const agents: Agent[] = [
+      { name: 'alpha', status: 'completed' },
+    ]
+    const events: Event[] = []
+    expect(updateAgentsStatus(clone(agents), events)).toEqual(agents)
+  })
+
+  test('ignores non-agent events', () => {
+    const agents: Agent[] = [
+      { name: 'alpha', status: 'completed' },
+    ]
+    const events: Event[] = [
+      { event: 'user', text: 'hi', timestamp: '1' } as any,
+      { event: 'bot', text: 'hey', timestamp: '2' } as any,
+    ]
+    expect(updateAgentsStatus(clone(agents), events)).toEqual(agents)
+  })
+
+  test('uses latest event by timestamp per agent', () => {
+    const agents: Agent[] = [
+      { name: 'alpha', status: 'completed' },
+      { name: 'beta', status: 'completed' },
+    ]
+
+    const events: Event[] = [
+      { event: 'agent_started', agent_id: 'alpha', timestamp: 1 } as any,
+      { event: 'agent_interrupted', agent_id: 'alpha', timestamp: 2 } as any,
+      { event: 'agent_resumed', agent_id: 'alpha', timestamp: 3 } as any,
+      { event: 'agent_cancelled', agent_id: 'beta', timestamp: 5 } as any,
+    ]
+
+    const result = updateAgentsStatus(clone(agents), events)
+    expect(result).toEqual([
+      { name: 'alpha', status: 'running' },
+      { name: 'beta', status: 'cancelled' },
+    ])
+  })
+
+  test('later event wins when timestamps missing', () => {
+    const agents: Agent[] = [
+      { name: 'alpha', status: 'completed' },
+    ]
+
+    const events: Event[] = [
+      { event: 'agent_started', agent_id: 'alpha', timestamp: null } as any,
+      { event: 'agent_interrupted', agent_id: 'alpha', timestamp: null } as any,
+    ]
+
+    const result = updateAgentsStatus(clone(agents), events)
+    expect(result).toEqual([
+      { name: 'alpha', status: 'interrupted' },
+    ])
+  })
+
+  test('agent_completed maps to provided status and falls back to completed', () => {
+    const agents: Agent[] = [
+      { name: 'alpha', status: 'running' },
+      { name: 'beta', status: 'running' },
+    ]
+
+    const events: Event[] = [
+      { event: 'agent_completed', agent_id: 'alpha', status: 'completed', timestamp: 10 } as any,
+      { event: 'agent_completed', agent_id: 'beta', timestamp: 10 } as any,
+    ]
+
+    const result = updateAgentsStatus(clone(agents), events)
+    expect(result).toEqual([
+      { name: 'alpha', status: 'completed' },
+      { name: 'beta', status: 'completed' },
+    ])
+  })
+
+  test('unmatched agents remain unchanged', () => {
+    const agents: Agent[] = [
+      { name: 'alpha', status: 'running' },
+      { name: 'gamma', status: 'interrupted' },
+    ]
+
+    const events: Event[] = [
+      { event: 'agent_resumed', agent_id: 'alpha', timestamp: 1 } as any,
+      { event: 'agent_cancelled', agent_id: 'beta', timestamp: 2 } as any, // beta not in agents list
+    ]
+
+    const result = updateAgentsStatus(clone(agents), events)
+    expect(result).toEqual([
+      { name: 'alpha', status: 'running' },
+      { name: 'gamma', status: 'interrupted' },
+    ])
+  })
+
+  test('handles mixed timestamp types (string/number)', () => {
+    const agents: Agent[] = [
+      { name: 'alpha', status: 'completed' },
+    ]
+
+    const events: Event[] = [
+      { event: 'agent_started', agent_id: 'alpha', timestamp: '1' } as any,
+      { event: 'agent_interrupted', agent_id: 'alpha', timestamp: 2 } as any,
+    ]
+
+    const result = updateAgentsStatus(clone(agents), events)
+    expect(result).toEqual([
+      { name: 'alpha', status: 'interrupted' },
+    ])
+  })
+})

rasa/core/channels/inspector/src/helpers/utils.ts

@@ -1,4 +1,4 @@
-import { SelectedStack, Stack, Event } from '../types'
+import {SelectedStack, Stack, Event, Agent, AGENT_EVENT_TYPES} from '../types'
 import { immutableJSONPatch } from 'immutable-json-patch'
 
 export const shouldShowTooltip = (text: string) => {
@@ -146,3 +146,68 @@ export const updatedActiveFrame = (
     return previous
   }
 }
+
+export function updateAgentsStatus(agents: Agent[], events: Event[]): Agent[] {
+  if (!agents || agents.length === 0 || !events || events.length === 0) {
+    return agents || []
+  }
+
+  const agentEventTypes = new Set<Event['event']>(AGENT_EVENT_TYPES as unknown as Event['event'][] )
+
+  type AgentEventLite = Agent & {
+    agent_id: string
+    event: Event['event']
+    timestamp?: string | number | null
+  }
+  
+  const latestByAgent = new Map<string, AgentEventLite>()
+
+  for (let i = 0; i < events.length; i++) {
+    const event = events[i] as unknown as AgentEventLite
+    if (!event || !agentEventTypes.has(event.event)) continue
+
+    const agentId = event.agent_id
+    if (!agentId) continue
+
+    const previousEvent = latestByAgent.get(agentId)
+
+    const currentTimestamp = event.timestamp == null ? undefined : Number(event.timestamp)
+    const previousTimestamp = previousEvent?.timestamp == null ? undefined : Number(previousEvent.timestamp)
+
+    const isNewer =
+      previousEvent == null ||
+      (currentTimestamp != null && previousTimestamp != null && currentTimestamp > previousTimestamp) ||
+      (currentTimestamp != null && previousTimestamp == null)
+    // If both timestamps are missing, prefer later in the array (current)
+
+    if (isNewer || (currentTimestamp == null && previousTimestamp == null)) {
+      latestByAgent.set(agentId, event)
+    }
+  }
+
+  return agents.map((agent) => {
+    const latest = latestByAgent.get(agent.name)
+    if (!latest) return agent
+
+    let status = agent.status
+    switch (latest.event) {
+      case 'agent_started':
+      case 'agent_resumed':
+        status = 'running'
+        break
+      case 'agent_interrupted':
+        status = 'interrupted'
+        break
+      case 'agent_cancelled':
+        status = 'cancelled'
+        break
+      case 'agent_completed':
+        status = latest.status || 'completed'
+        break
+      default:
+        break
+    }
+
+    return { ...agent, status }
+  })
+}

rasa/core/channels/inspector/src/theme/base/styles.ts

@@ -1,4 +1,19 @@
-import { mode, StyleFunctionProps } from '@chakra-ui/theme-tools'
+import {mode, StyleFunctionProps} from '@chakra-ui/theme-tools'
+import {keyframes} from "@chakra-ui/react";
+
+
+const pulse = keyframes`
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+    100% {
+        opacity: 1;
+    }
+`;
+
 
 export const styles = {
   global: {
@@ -9,5 +24,8 @@ export const styles = {
       fontSize: theme.rasaFontSizes.md,
       letterSpacing: '0.025rem',
     }),
+    '.pulse': {
+      animation: `${pulse} 2s infinite`,
+    },
   },
 }