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

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

@@ -5,28 +5,28 @@ 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 { DialogueHistoryStack } from './components/DialogueHistoryStack.tsx'
+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, Agent} from './types'
 import {
   createHistoricalStack,
   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()
@@ -148,13 +148,6 @@ 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(
@@ -204,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({
@@ -276,6 +254,7 @@ export function App() {
             slots={slots}
             events={events}
             story={story}
+            latency={latency}
           />
         </Grid>
       </GridItem>
@@ -287,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/DialogueHistoryStack.tsx

@@ -118,6 +118,7 @@ export const DialogueHistoryStack = ({
           <Tbody>
             {stack.length > 0 &&
               [...stack]
+                .filter(frame => !frame.agent_id)
                 .reverse()
                 .map((stack) => (
                   <StackRow

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/types.ts

@@ -28,7 +28,8 @@ export interface Event {
   timestamp: string
   update?: string
   parse_data?: { commands: Command[] }
-  metadata?: { utter_action?: string }
+  metadata?: { utter_action?: string; execution_times?: RasaLatency }
+  name?: string
 }
 
 export interface Command {
@@ -56,11 +57,16 @@ export interface Stack {
   state?: "waiting_for_input" | "interrupted"
 }
 
-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 RasaLatency {
+  command_processor: number
+  prediction_loop: number
+}
+
+export interface VoiceLatency {
+  rasa_processing_latency_ms: number
+  asr_latency_ms: number
+  tts_first_byte_latency_ms: number
+  tts_complete_latency_ms: number
 }
 
 export interface Tracker {
@@ -68,7 +74,6 @@ export interface Tracker {
   slots: { [key: string]: unknown }
   events: Event[]
   stack: Stack[]
-  latency?: LatencyData
 }
 
 export interface Flow {
@@ -117,3 +122,23 @@ interface Step {
   call?: string
   noop?: boolean
 }
+
+export function isRasaLatency(obj: any): obj is RasaLatency {
+  return (
+    obj !== null &&
+    typeof obj === 'object' &&
+    typeof obj.command_processor === 'number' &&
+    typeof obj.prediction_loop === 'number'
+  )
+}
+
+export function isVoiceLatency(obj: any): obj is VoiceLatency {
+  return (
+    obj !== null &&
+    typeof obj === 'object' &&
+    typeof obj.rasa_processing_latency_ms === 'number' &&
+    typeof obj.asr_latency_ms === 'number' &&
+    typeof obj.tts_first_byte_latency_ms === 'number' &&
+    typeof obj.tts_complete_latency_ms === 'number'
+  )
+}