rasa-pro 3.14.0.dev5__py3-none-any.whl → 3.14.0.dev7__py3-none-any.whl

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

@@ -5,31 +5,34 @@ import {
   useColorModeValue,
   useToast,
 } from '@chakra-ui/react'
+import { useEffect, useState, useCallback } from 'react'
 import axios from 'axios'
-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 { useOurTheme } from './theme'
+import { Welcome } from './components/Welcome'
+import { DialogueHistoryStack } from './components/DialogueHistoryStack.tsx'
 import { DialougeInformation } from './components/DialogueInformation'
-import { DialogueStack } from './components/DialogueStack'
 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, Agent} from './types'
 import {
   createHistoricalStack,
-  flowStepTrail,
+  flowStepTrail, updateAgentsStatus,
   updatedActiveFrame,
 } from './helpers/utils'
-import { useOurTheme } from './theme'
-import { Event, Flow, SelectedStack, Slot, Stack, Tracker } from './types'
+import queryString from 'query-string'
+import { Chat } from './components/Chat'
+import { LatencyDisplay } from './components/LatencyDisplay'
+import useWebSocket, { ReadyState } from 'react-use-websocket'
+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 } })
@@ -141,6 +161,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)
@@ -239,19 +260,22 @@ 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>
@@ -265,6 +289,7 @@ export function App() {
       </GridItem>
       <GridItem overflow="hidden">
         <Grid sx={rightColumnSx}>
+          <LatencyDisplay latency={latency} sx={boxSx} />
           {shouldShowTranscript && (
             <GridItem sx={chatContainerSx}>
               <Chat events={events || []} />

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">
@@ -134,6 +134,7 @@ export const DialogueStack = ({
                   flow_id: '-',
                   step_id: '-',
                   ended: false,
+                  type: "flow"
                 }}
               />
             )}

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

@@ -13,14 +13,13 @@ 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 {
@@ -28,7 +27,6 @@ interface Props extends FlexProps {
   events: Event[]
   story: string
   slots: Slot[]
-  latency: any
 }
 
 export const DialougeInformation = ({
@@ -37,7 +35,6 @@ export const DialougeInformation = ({
   events,
   story,
   slots,
-  latency,
   ...props
 }: Props) => {
   const toast = useToast()
@@ -108,7 +105,6 @@ 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}>
@@ -164,11 +160,6 @@ export const DialougeInformation = ({
               </FullscreenButton>
             </HStack>
           </TabPanel>
-          <TabPanel sx={tabPanelSx}>
-            <Box sx={overflowBox}>
-              <LatencyDisplay latency={latency} />
-            </Box>
-          </TabPanel>
         </TabPanels>
       </Tabs>
     </Flex>

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`,
+    },
   },
 }

rasa/core/channels/inspector/src/types.ts

@@ -4,6 +4,16 @@ export interface Slot {
   value: any
 }
 
+export const AGENT_EVENT_TYPES = [
+  'agent_started',
+  'agent_completed',
+  'agent_interrupted',
+  'agent_resumed',
+  'agent_cancelled',
+] as const
+
+export type AgentEvents = typeof AGENT_EVENT_TYPES[number];
+
 export interface Event {
   event:
     | 'user'
@@ -13,6 +23,7 @@ export interface Event {
     | 'stack'
     | 'restart'
     | 'session_ended'
+    | AgentEvents
   text?: string
   timestamp: string
   update?: string
@@ -40,6 +51,9 @@ export interface Stack {
   collect?: string
   utter?: string
   ended: boolean
+  type: "flow" | "agent"
+  agent_id?: string
+  state?: "waiting_for_input" | "interrupted"
 }
 
 export interface LatencyData {
@@ -64,6 +78,11 @@ export interface Flow {
   steps: Step[]
 }
 
+export interface Agent {
+  name: string
+  status: "running" | "completed" | "interrupted" | "cancelled"
+}
+
 interface NextStepThen {
   action: string
   id: string
@@ -95,4 +114,6 @@ interface Step {
   reset_after_flow_ends: boolean
   utter: string
   set_slots?: unknown
+  call?: string
+  noop?: boolean
 }