rasa-pro 3.14.0.dev6__py3-none-any.whl → 3.14.0.dev8__py3-none-any.whl

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

@@ -5,32 +5,34 @@ import {
   useColorModeValue,
   useToast,
 } from '@chakra-ui/react'
-import { useEffect, useState, useCallback } 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 { LatencyDisplay } from './components/LatencyDisplay'
-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>('')
@@ -102,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 } })
@@ -129,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)
@@ -184,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({
@@ -240,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>
@@ -263,16 +266,11 @@ export function App() {
           slots={slots}
         />
       </GridItem>
-      <GridItem overflow="hidden">
-        <Grid sx={rightColumnSx}>
-          <LatencyDisplay latency={latency} sx={boxSx} />
-          {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}

@@ -52,8 +52,6 @@ function StackRow({
     },
   }
 
-  const agentOrStep = stack.agent_id ?? stack.step_id;
-
   return (
     <Tr
       sx={
@@ -67,19 +65,19 @@ function StackRow({
         </Tooltip>
       </Td>
       <Td>
-        {shouldShowTooltip(agentOrStep) ? (
-          <Tooltip label={`${agentOrStep} ${stack.agent_id && `(${stack.step_id})`}`} hasArrow>
-            <Text noOfLines={1}>{agentOrStep}</Text>
+        {shouldShowTooltip(stack.step_id) ? (
+          <Tooltip label={stack.step_id} hasArrow>
+            <Text noOfLines={1}>{stack.step_id}</Text>
           </Tooltip>
         ) : (
-          <Text noOfLines={1}>{agentOrStep}</Text>
+          <Text noOfLines={1}>{stack.step_id}</Text>
         )}
       </Td>
     </Tr>
   )
 }
 
-export const DialogueStack = ({
+export const DialogueHistoryStack = ({
   sx,
   stack,
   active,
@@ -107,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">
@@ -120,6 +118,7 @@ export const DialogueStack = ({
           <Tbody>
             {stack.length > 0 &&
               [...stack]
+                .filter(frame => !frame.agent_id)
                 .reverse()
                 .map((stack) => (
                   <StackRow
@@ -136,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')
+}

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

@@ -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 = []
+    },
   }
 }
 
@@ -204,7 +213,12 @@ 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)
     }

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}`)
     })