rasa-pro 3.14.0.dev20250731__py3-none-any.whl → 3.14.0.dev20250825__py3-none-any.whl

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

@@ -5,7 +5,7 @@ import {
   useColorModeValue,
   useToast,
 } from '@chakra-ui/react'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useCallback } from 'react'
 import axios from 'axios'
 import { useOurTheme } from './theme'
 import { Welcome } from './components/Welcome'
@@ -23,6 +23,7 @@ import {
 } 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'
 
 export function App() {
@@ -35,6 +36,7 @@ export function App() {
   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)
@@ -127,6 +129,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(
@@ -175,6 +184,21 @@ 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({
@@ -188,8 +212,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}>
@@ -222,11 +263,16 @@ export function App() {
           slots={slots}
         />
       </GridItem>
-      {shouldShowTranscript && (
-        <GridItem>
-          <Chat events={events || []} />
-        </GridItem>
-      )}
+      <GridItem overflow="hidden">
+        <Grid sx={rightColumnSx}>
+          <LatencyDisplay latency={latency} sx={boxSx} />
+          {shouldShowTranscript && (
+            <GridItem sx={chatContainerSx}>
+              <Chat events={events || []} />
+            </GridItem>
+          )}
+        </Grid>
+      </GridItem>
     </Grid>
   )
 }

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

@@ -5,6 +5,7 @@ import { Command, Event } from '../types'
 
 interface Props extends FlexProps {
   events: Event[]
+  hasLatencyDisplay?: boolean
 }
 
 export const Chat = ({ sx, events, ...props }: Props) => {
@@ -12,9 +13,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
@@ -110,7 +111,7 @@ export const Chat = ({ sx, events, ...props }: Props) => {
           borderRadius: '10px',
           border: 'none',
           width: columnWidth,
-          height: maxHeight,
+          height: '100%',
         }}
         history={messages}
         demo={true}

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/LatencyDisplay.tsx

@@ -0,0 +1,268 @@
+import {
+  Box,
+  Flex,
+  FlexProps,
+  Text,
+  useColorModeValue,
+  Tooltip,
+  Table,
+  Tbody,
+  Tr,
+  Td,
+} from '@chakra-ui/react'
+import { useOurTheme } from '../theme'
+import { LatencyData } from '../types'
+
+interface Props extends FlexProps {
+  latency: LatencyData
+}
+
+/**
+ * Simple latency display for text-only conversations.
+ * Shows a single response time value.
+ */
+const MinimalDisplay = ({ latency, sx, ...props }: Props) => {
+  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);
+
+  return (
+    <Flex sx={containerSx} {...props}>
+      <Text fontSize="md" color={useColorModeValue('gray.700', 'gray.300')}>
+        Response latency:
+        <Text as="span" ml={2} fontWeight="bold" color={color}>
+          {value}ms
+        </Text>
+      </Text>
+    </Flex>
+  )
+}
+
+/**
+ * Detailed latency waterfall chart for voice conversations.
+ * Displays processing times for ASR, Rasa, and TTS components.
+ */
+const WaterfallDisplay = ({ latency, sx, ...props }: Props) => {
+  const { rasaSpace } = useOurTheme()
+
+  const containerSx = {
+    ...sx,
+    flexDirection: 'column',
+    gap: rasaSpace[1],
+  }
+  
+  const headerSx = {
+    fontSize: 'sm',
+    fontWeight: 'bold',
+    color: useColorModeValue('gray.700', 'gray.300'),
+  }
+  
+  const waterfallBarSx = {
+    height: '24px',
+    borderRadius: '4px',
+    overflow: 'hidden',
+    border: '1px solid',
+    borderColor: useColorModeValue('gray.200', 'gray.600'),
+  }
+  
+  const legendTableSx = {
+    size: 'sm',
+    mt: rasaSpace[0.5]
+  }
+
+  const getLatencyColor = (type: string) => {
+    const colors: { [key: string]: string } = {
+      asr: 'blue.500',
+      rasa: 'purple.500',
+      tts_first: 'orange.500',
+      tts_complete: 'green.500',
+    }
+    return colors[type] || 'gray.500'
+  }
+
+  const getLatencyDescription = (type: string) => {
+    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.'
+    }
+    return descriptions[type] || ''
+  }
+
+  // Metrics for proportional display (only actual processing latencies)
+  const chartMetrics = [
+    latency.asr_latency_ms && {
+      type: 'asr',
+      label: 'ASR',
+      value: latency.asr_latency_ms,
+    },
+    latency.rasa_processing_latency_ms && {
+      type: 'rasa',
+      label: 'Rasa',
+      value: latency.rasa_processing_latency_ms,
+    },
+    latency.tts_complete_latency_ms && {
+      type: 'tts_complete',
+      label: 'TTS',
+      value: latency.tts_complete_latency_ms,
+    },
+  ].filter(Boolean)
+
+  // All metrics for legend display
+  const allMetrics = [
+    latency.asr_latency_ms && {
+      type: 'asr',
+      label: 'ASR',
+      value: latency.asr_latency_ms,
+    },
+    latency.rasa_processing_latency_ms && {
+      type: 'rasa',
+      label: 'Rasa',
+      value: latency.rasa_processing_latency_ms,
+    },
+    latency.tts_first_byte_latency_ms && {
+      type: 'tts_first',
+      label: 'TTS First Byte',
+      value: latency.tts_first_byte_latency_ms,
+    },
+    latency.tts_complete_latency_ms && {
+      type: 'tts_complete',
+      label: 'TTS Complete',
+      value: latency.tts_complete_latency_ms,
+    },
+  ].filter(Boolean)
+
+  // Calculate total for proportional sizing (only processing latencies)
+  const totalLatency = chartMetrics.reduce(
+    (sum: number, metric: any) => sum + metric.value,
+    0,
+  )
+
+  // Calculate total latency for title (Rasa + TTS First Byte)
+  const totalDisplayLatency = 
+    (latency.rasa_processing_latency_ms || 0) + 
+    (latency.tts_first_byte_latency_ms || 0);
+    
+  return (
+    <Flex sx={containerSx} {...props}>
+      <Text sx={headerSx}>
+        Response latency: ~{Math.round(totalDisplayLatency)}ms
+      </Text>
+
+      {/* Waterfall Bar */}
+      <Box>
+        <Flex sx={waterfallBarSx}>
+          {chartMetrics.map((metric: any) => {
+            const widthPercentage =
+              totalLatency > 0 ? (metric.value / totalLatency) * 100 : 0
+            return (
+              <Tooltip
+                key={metric.type}
+                label={
+                  <Box>
+                    <Text fontWeight="bold">
+                      {metric.label}: {Math.round(metric.value)}ms
+                    </Text>
+                    <Text fontSize="xs" mt={1}>
+                      {getLatencyDescription(metric.type)}
+                    </Text>
+                  </Box>
+                }
+                hasArrow
+                placement="top"
+              >
+                <Box
+                  bg={getLatencyColor(metric.type)}
+                  width={`${widthPercentage}%`}
+                  height="100%"
+                  minWidth="40px" // Increased minimum width for better visibility
+                  cursor="pointer"
+                  _hover={{ opacity: 0.8 }}
+                />
+              </Tooltip>
+            )
+          })}
+        </Flex>
+
+        {/* Legend */}
+        <Table sx={legendTableSx}>
+          <Tbody>
+            {/* Split metrics into pairs for 2x2 table */}
+            {Array.from(
+              { length: Math.ceil(allMetrics.length / 2) },
+              (_, rowIndex) => (
+                <Tr key={rowIndex}>
+                  {allMetrics
+                    .slice(rowIndex * 2, rowIndex * 2 + 2)
+                    .map((metric: any) => (
+                      <Td key={metric.type} p={rasaSpace[0.25]} border="none">
+                        <Flex align="center" gap={rasaSpace[0.25]}>
+                          <Box
+                            width="8px"
+                            height="8px"
+                            bg={getLatencyColor(metric.type)}
+                            borderRadius="2px"
+                            flexShrink={0}
+                          />
+                          <Text
+                            fontSize="xs"
+                            color={useColorModeValue('gray.600', 'gray.400')}
+                            noOfLines={1}
+                          >
+                            {metric.label}: {Math.round(metric.value)}ms
+                          </Text>
+                        </Flex>
+                      </Td>
+                    ))}
+                  {/* Fill empty cell if odd number of metrics */}
+                  {allMetrics.length % 2 !== 0 &&
+                    rowIndex === Math.ceil(allMetrics.length / 2) - 1 && (
+                      <Td p={rasaSpace[0.25]} border="none" />
+                    )}
+                </Tr>
+              ),
+            )}
+          </Tbody>
+        </Table>
+      </Box>
+    </Flex>
+  )
+}
+
+/**
+ * Displays processing latency information for the conversation.
+ * Shows either a detailed waterfall chart for voice conversations or 
+ * a simpler display for text-only conversations.
+ */
+export const LatencyDisplay = ({
+  sx,
+  latency,
+  ...props
+}: Props) => {
+  if (!latency) {
+    console.warn('Latency data is not available')
+    return null
+  }
+
+  // Show waterfall if voice metrics are available, otherwise show minimal display
+  const isVoiceMetricsAvailable =
+    latency.asr_latency_ms && latency.tts_complete_latency_ms
+
+  if (isVoiceMetricsAvailable) {
+    return <WaterfallDisplay latency={latency} sx={sx} {...props} />
+  }
+
+  return <MinimalDisplay latency={latency} sx={sx} {...props} />
+}

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

@@ -8,7 +8,11 @@ import {
 import { useOurTheme } from '../theme'
 import { createAudioConnection } from '../helpers/audio/audiostream.ts'
 
-export const LoadingSpinner = () => {
+interface LoadingSpinnerProps {
+  onLatencyUpdate?: (latency: any) => void
+}
+
+export const LoadingSpinner = ({ onLatencyUpdate }: LoadingSpinnerProps) => {
   const { rasaSpace } = useOurTheme()
   const isVoice = window.location.href.includes('browser_audio')
   const text = isVoice
@@ -27,7 +31,7 @@ export const LoadingSpinner = () => {
       {isVoice ? (
         <Button
           onClick={async () =>
-            await createAudioConnection(window.location.href)
+            await createAudioConnection(window.location.href, onLatencyUpdate)
           }
         >
           Go

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

@@ -187,7 +187,7 @@ const setupAudioPlayback = async (socket: WebSocket): Promise<AudioQueue> => {
 }
 
 const addDataToAudioQueue =
-  (audioQueue: AudioQueue) => (message: MessageEvent<any>) => {
+  (audioQueue: AudioQueue, onLatencyUpdate?: (latency: any) => void) => (message: MessageEvent<any>) => {
     try {
       const data = JSON.parse(message.data.toString())
       if (data['error']) {
@@ -199,6 +199,10 @@ const addDataToAudioQueue =
         const audioData = intToFloatArray(int32Data)
         audioQueue.write(audioData)
       } else if (data['marker']) {
+        if (data['latency'] && onLatencyUpdate) {
+          onLatencyUpdate(data['latency'])
+        }
+        console.log('Voice Latency Metrics:', data['latency'])
         audioQueue.addMarker(data['marker'])
       }
     } catch (error) {
@@ -231,8 +235,9 @@ function getWebSocketUrl(baseUrl: string) {
  * Creates a WebSocket connection for browser audio and streams microphone input to the server
  *
  * @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) {
+export async function createAudioConnection(baseUrl: string, onLatencyUpdate?: (latency: any) => void) {
   const websocketURL = getWebSocketUrl(baseUrl)
   const socket = new WebSocket(websocketURL)
 
@@ -241,5 +246,5 @@ export async function createAudioConnection(baseUrl: string) {
   }
 
   const audioQueue = await setupAudioPlayback(socket)
-  socket.onmessage = addDataToAudioQueue(audioQueue)
+  socket.onmessage = addDataToAudioQueue(audioQueue, onLatencyUpdate)
 }

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

@@ -42,11 +42,19 @@ export interface Stack {
   ended: boolean
 }
 
+export interface LatencyData {
+  rasa_processing_latency_ms?: number
+  asr_latency_ms?: number
+  tts_first_byte_latency_ms?: number
+  tts_complete_latency_ms?: number
+}
+
 export interface Tracker {
   sender_id: string
   slots: { [key: string]: unknown }
   events: Event[]
   stack: Stack[]
+  latency?: LatencyData
 }
 
 export interface Flow {