@botonic/react 0.48.1 → 0.49.0-alpha.0

package/src/components/system-debug-trace/events/ai-agent-router/ai-agent-router.tsx

@@ -0,0 +1,75 @@
+import { EventAction } from '@botonic/core'
+import { AiRouterSvg, HandSvg, HeadSetSvg } from '../../icons'
+import {
+  StyledDebugDetail,
+  StyledDebugItemWithIcon,
+  StyledDebugLabel,
+  StyledDebugValue,
+  StyledGuardrailLabel,
+  StyledGuardrailValue,
+} from '../../styles'
+import type { DebugEventConfig } from '../../types'
+import { LABELS } from '../constants'
+import type { AiAgentRouterDebugEvent } from './types'
+
+export const AiAgentRouter = ({
+  input_guardrails_triggered,
+  available_specialists,
+  is_transferred_to_specialist,
+  last_agent_name,
+}: AiAgentRouterDebugEvent) => {
+  return (
+    <>
+      {available_specialists.length > 0 && (
+        <StyledDebugDetail data-line-end>
+          <StyledDebugLabel>{LABELS.SPECIALISTS_AVAILABLE}</StyledDebugLabel>
+          {available_specialists.map(h => (
+            <StyledDebugItemWithIcon key={h.name}>
+              <HeadSetSvg />
+              {h.name}
+            </StyledDebugItemWithIcon>
+          ))}
+        </StyledDebugDetail>
+      )}
+
+      <StyledDebugDetail>
+        {is_transferred_to_specialist ? (
+          <StyledDebugValue>
+            {LABELS.TRANSFERRED_TO}{' '}
+            <span style={{ fontWeight: 400 }}>- {last_agent_name}</span>
+          </StyledDebugValue>
+        ) : input_guardrails_triggered.length > 0 ? (
+          <>
+            {input_guardrails_triggered.map(guardrail => (
+              <StyledDebugItemWithIcon key={`input-guardrail-${guardrail}`}>
+                <HandSvg />
+                <StyledGuardrailLabel>
+                  {LABELS.GUARDRAIL_TRIGGERED}
+                </StyledGuardrailLabel>
+                <StyledGuardrailValue>- {guardrail}</StyledGuardrailValue>
+              </StyledDebugItemWithIcon>
+            ))}
+          </>
+        ) : (
+          <StyledDebugValue>{LABELS.NO_TRANSFER}</StyledDebugValue>
+        )}
+      </StyledDebugDetail>
+    </>
+  )
+}
+
+export const getAiAgentRouterEventConfig = (
+  data: AiAgentRouterDebugEvent
+): DebugEventConfig => {
+  return {
+    action: EventAction.AiAgentRouter,
+    title: (
+      <>
+        Router triggered <span>- {data.flow_node_content_id}</span>
+      </>
+    ),
+    component: AiAgentRouter,
+    icon: <AiRouterSvg />,
+    collapsible: true,
+  }
+}

package/src/components/system-debug-trace/events/ai-agent-router/index.ts

@@ -0,0 +1,2 @@
+export * from './ai-agent-router'
+export * from './types'

package/src/components/system-debug-trace/events/ai-agent-router/types.ts

@@ -0,0 +1,26 @@
+import type { EventAction } from '@botonic/core'
+import type { ToolExecuted } from '../ai-agent/types'
+import type { ChunkIdsGroupedBySourceData } from '../knowledge-bases-types'
+
+export type { ToolExecuted }
+
+export interface SpecialistDebugEvent {
+  name: string
+  description: string
+}
+
+export interface AiAgentRouterDebugEvent {
+  action: EventAction.AiAgentRouter
+  flow_node_content_id: string
+  tools_executed: ToolExecuted[]
+  memory_length: number
+  input_guardrails_triggered: string[]
+  output_guardrails_triggered: string[]
+  exit: boolean
+  starting_agent_name: string
+  last_agent_name: string
+  available_specialists: SpecialistDebugEvent[]
+  is_transferred_to_specialist: boolean
+  knowledge_base_chunks_with_sources?: ChunkIdsGroupedBySourceData[]
+  messageId?: string
+}

package/src/components/system-debug-trace/events/constants.ts

@@ -25,4 +25,8 @@ export const LABELS = {
   OPEN: 'Open',
   CLOSED: 'Closed',
   AGENTS_AVAILABLE: 'Agents available',
+  AVAILABLE_TRANSFERS: 'Available transfers',
+  SPECIALISTS_AVAILABLE: 'Specialists available',
+  NO_TRANSFER: 'No transfer',
+  TRANSFERRED_TO: 'Transferred to',
 } as const

package/src/components/system-debug-trace/events/index.ts

@@ -1,4 +1,5 @@
 export * from './ai-agent'
+export * from './ai-agent-router'
 export * from './bot-action'
 export * from './conditional-channel'
 export * from './conditional-country'

package/src/components/system-debug-trace/hooks/use-last-label-position.ts

@@ -38,43 +38,53 @@ export function useLastLabelPosition({
         return
       }
 
-      // Find all label elements in order (both <strong> for DebugLabel and <span> for GuardrailLabel)
-      // We need to get them in DOM order to find the actual last one
-      const allElements = wrapper.querySelectorAll<HTMLElement>('strong, span')
-      const allLabels = Array.from(allElements).filter(el => {
-        // Include all <strong> elements (they're DebugLabels)
-        if (el.tagName === 'STRONG') {
-          return true
-        }
+      // If an explicit line-end marker exists, use its bottom edge
+      const lineEndMarker =
+        wrapper.querySelector<HTMLElement>('[data-line-end]')
+
+      let labelBottomPosition: number
 
-        // For <span>, only include if it's a direct child of a flex container (GuardrailLabel pattern)
-        // and has no child elements (just text)
-        if (
-          el.tagName === 'SPAN' &&
-          el.children.length === 0 &&
-          el.textContent?.trim()
-        ) {
-          const parent = el.parentElement
-          if (parent) {
-            const parentStyle = window.getComputedStyle(parent)
-            // GuardrailItem has display: flex
-            return parentStyle.display === 'flex'
+      if (lineEndMarker) {
+        const wrapperTop = wrapper.getBoundingClientRect().top
+        labelBottomPosition =
+          lineEndMarker.getBoundingClientRect().bottom - wrapperTop
+      } else {
+        // Find all label elements in order (both <strong> for DebugLabel and <span> for GuardrailLabel)
+        // We need to get them in DOM order to find the actual last one
+        const allElements =
+          wrapper.querySelectorAll<HTMLElement>('strong, span')
+        const allLabels = Array.from(allElements).filter(el => {
+          // Include all <strong> elements (they're DebugLabels)
+          if (el.tagName === 'STRONG') {
+            return true
           }
-        }
-        return false
-      })
 
-      if (allLabels.length === 0) {
-        return
-      }
+          // For <span>, only include if it's a direct child of a flex container (GuardrailLabel pattern)
+          // and has no child elements (just text)
+          if (
+            el.tagName === 'SPAN' &&
+            el.children.length === 0 &&
+            el.textContent?.trim()
+          ) {
+            const parent = el.parentElement
+            if (parent) {
+              const parentStyle = window.getComputedStyle(parent)
+              // GuardrailItem has display: flex
+              return parentStyle.display === 'flex'
+            }
+          }
+          return false
+        })
 
-      // Get the last label
-      const lastLabel = allLabels[allLabels.length - 1]
+        if (allLabels.length === 0) {
+          return
+        }
 
-      // Calculate distance from wrapper top to label bottom
-      const wrapperTop = wrapper.getBoundingClientRect().top
-      const labelBottom = lastLabel.getBoundingClientRect().bottom
-      const labelBottomPosition = labelBottom - wrapperTop
+        const lastLabel = allLabels[allLabels.length - 1]
+        const wrapperTop = wrapper.getBoundingClientRect().top
+        labelBottomPosition =
+          lastLabel.getBoundingClientRect().bottom - wrapperTop
+      }
 
       // Set CSS variable for line height calculation
       wrapper.style.setProperty(

package/src/components/system-debug-trace/icons/ai-router.tsx

@@ -0,0 +1,45 @@
+export const AiRouterSvg = () => {
+  return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='18'
+      height='18'
+      viewBox='0 0 18 18'
+      fill='none'
+    >
+      <path
+        d='M3.93749 3.63077C4.42648 3.63077 4.85794 3.22807 4.85794 2.71032C4.85794 2.22132 4.42648 1.78986 3.93749 1.78986C3.41974 1.78986 3.01703 2.22132 3.01703 2.71032C3.01703 3.22807 3.41974 3.63077 3.93749 3.63077ZM6.23863 2.71032C6.23863 3.74582 5.54828 4.63752 4.62783 4.92516V7.77282C5.20312 7.34136 5.92222 7.08248 6.69885 7.08248H9.46022C10.582 7.08248 11.5313 6.16202 11.5313 5.01145V4.92516C10.582 4.63752 9.92044 3.74582 9.92044 2.71032C9.92044 1.44469 10.9272 0.40918 12.2216 0.40918C13.4872 0.40918 14.5227 1.44469 14.5227 2.71032C14.5227 3.74582 13.8323 4.63752 12.9119 4.92516V5.01145C12.9119 6.93865 11.3586 8.4632 9.46022 8.4632H6.69885C5.54828 8.4632 4.62783 9.41237 4.62783 10.5342V10.6492C5.54828 10.9369 6.23863 11.8285 6.23863 12.8353C6.23863 14.1297 5.20312 15.1365 3.93749 15.1365C2.6431 15.1365 1.63635 14.1297 1.63635 12.8353C1.63635 11.8285 2.29793 10.9369 3.24715 10.6492V10.5342V4.92516C2.29793 4.63752 1.63635 3.74582 1.63635 2.71032C1.63635 1.44469 2.6431 0.40918 3.93749 0.40918C5.20312 0.40918 6.23863 1.44469 6.23863 2.71032ZM13.142 2.71032C13.142 2.22132 12.7106 1.78986 12.2216 1.78986C11.7038 1.78986 11.3011 2.22132 11.3011 2.71032C11.3011 3.22807 11.7038 3.63077 12.2216 3.63077C12.7106 3.63077 13.142 3.22807 13.142 2.71032ZM3.93749 13.7558C4.42648 13.7558 4.85794 13.3531 4.85794 12.8353C4.85794 12.3463 4.42648 11.9149 3.93749 11.9149C3.41974 11.9149 3.01703 12.3463 3.01703 12.8353C3.01703 13.3531 3.41974 13.7558 3.93749 13.7558Z'
+        fill='url(#ai-router-gradient-0)'
+      />
+      <path
+        d='M12.5839 10.0164C12.5285 9.89486 12.4069 9.81812 12.2748 9.81812C12.1427 9.81812 12.0211 9.89486 11.9657 10.0164L10.8337 12.4672L8.38215 13.5989C8.25851 13.6565 8.18176 13.778 8.18176 13.9101C8.18176 14.0422 8.25851 14.1637 8.38002 14.2191L10.8316 15.3508L11.9636 17.8017C12.019 17.9232 12.1405 17.9999 12.2727 17.9999C12.4048 17.9999 12.5264 17.9232 12.5818 17.8017L13.7137 15.3508L16.1653 14.2191C16.2868 14.1637 16.3636 14.0422 16.3636 13.9101C16.3636 13.778 16.2868 13.6565 16.1653 13.6011L13.7137 12.4694L12.5818 10.0185L12.5839 10.0164Z'
+        fill='url(#ai-router-gradient-1)'
+      />
+      <defs>
+        <linearGradient
+          id='ai-router-gradient-0'
+          x1='1.63635'
+          y1='7.77282'
+          x2='14.5227'
+          y2='7.77282'
+          gradientUnits='userSpaceOnUse'
+        >
+          <stop stopColor='#6E49FF' />
+          <stop offset='1' stopColor='#CC3559' />
+        </linearGradient>
+        <linearGradient
+          id='ai-router-gradient-1'
+          x1='8.18176'
+          y1='13.909'
+          x2='16.3636'
+          y2='13.909'
+          gradientUnits='userSpaceOnUse'
+        >
+          <stop stopColor='#6E49FF' />
+          <stop offset='1' stopColor='#CC3559' />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}

package/src/components/system-debug-trace/icons/index.ts

@@ -1,3 +1,4 @@
+export * from './ai-router'
 export * from './brain'
 export * from './caret-down'
 export * from './caret-up'
@@ -10,4 +11,5 @@ export * from './life-ring'
 export * from './link'
 export * from './quote-right'
 export * from './screwdriver-wrench'
+export * from './split'
 export * from './wand'

package/src/components/system-debug-trace/types.ts

@@ -2,6 +2,7 @@ import type React from 'react'
 
 import type {
   AiAgentDebugEvent,
+  AiAgentRouterDebugEvent,
   BotActionDebugEvent,
   ConditionalChannelDebugEvent,
   ConditionalCountryDebugEvent,
@@ -24,6 +25,7 @@ export interface IconProps {
 export type DebugEvent =
   | KeywordDebugEvent
   | AiAgentDebugEvent
+  | AiAgentRouterDebugEvent
   | KnowledgeBaseDebugEvent
   | FallbackDebugEvent
   | SmartIntentDebugEvent

package/src/debug-system-messages.ts

@@ -0,0 +1,276 @@
+/**
+ * Dev-only mock payloads for every SystemDebugTrace event type.
+ *
+ * Usage from dev-entry.ts:
+ *   import { DEBUG_SYSTEM_MESSAGES } from '@botonic/react/src/debug-system-messages'
+ *   app.addDebugSystemMessage(DEBUG_SYSTEM_MESSAGES.keyword)
+ *
+ * Usage from the browser console (window.Botonic is the DevApp instance):
+ *   Botonic.addDebugSystemMessage({ action: 'nlu_keyword', nlu_keyword_name: 'hello', ... })
+ *   // or use the pre-built fixtures exposed on the DevApp:
+ *   Botonic.addDebugSystemMessage(Botonic.debugSystemMessages.aiAgent)
+ */
+
+import { EventAction } from '@botonic/core'
+
+import type {
+  AiAgentDebugEvent,
+  AiAgentRouterDebugEvent,
+  BotActionDebugEvent,
+  ConditionalChannelDebugEvent,
+  ConditionalCountryDebugEvent,
+  ConditionalCustomDebugEvent,
+  ConditionalQueueStatusDebugEvent,
+  FallbackDebugEvent,
+  HandoffSuccessDebugEvent,
+  KeywordDebugEvent,
+  KnowledgeBaseDebugEvent,
+  RedirectFlowDebugEvent,
+  SmartIntentDebugEvent,
+  WebviewActionTriggeredDebugEvent,
+} from './components/system-debug-trace/events'
+import type { ChunkIdsGroupedBySourceData } from './components/system-debug-trace/events/knowledge-bases-types'
+
+const mockChunksWithSources: ChunkIdsGroupedBySourceData[] = [
+  {
+    source: {
+      id: 'src-mock-001',
+      name: 'Help Center',
+      type: 'url',
+      scrapingCountryCode: null,
+      createdAt: '2026-01-01T00:00:00Z',
+      createdBy: 'mock',
+      lastUpdatedAt: '2026-01-01T00:00:00Z',
+      lastUpdatedBy: 'mock',
+      activeExtractionJob: null as any,
+      lastExtractionJob: null as any,
+    },
+    chunks: [
+      {
+        id: 'chunk-mock-001',
+        text: 'To reset your password, go to Settings > Security > Reset Password.',
+      },
+    ],
+  },
+]
+
+export const DEBUG_SYSTEM_MESSAGES = {
+  keyword: {
+    action: EventAction.Keyword,
+    flow_id: 'flow-mock-001',
+    flow_node_id: 'node-mock-001',
+    nlu_keyword_is_regex: false,
+    nlu_keyword_name: 'hello',
+  } satisfies KeywordDebugEvent,
+
+  smartIntent: {
+    action: EventAction.IntentSmart,
+    nlu_intent_smart_title: 'Greeting smart intent',
+  } satisfies SmartIntentDebugEvent,
+
+  fallback: {
+    action: EventAction.Fallback,
+    user_input: "I don't understand this bot",
+    fallback_out: 1,
+    fallback_message_id: 'msg-mock-002',
+  } satisfies FallbackDebugEvent,
+
+  handoffSuccess: {
+    action: EventAction.HandoffSuccess,
+    handoff_queue_name: 'Support Team',
+    handoff_is_queue_open: true,
+    handoff_has_auto_assign: true,
+    handoff_note_id: '',
+  } satisfies HandoffSuccessDebugEvent,
+
+  botAction: {
+    action: EventAction.BotAction,
+    payload: 'custom-action-result',
+  } satisfies BotActionDebugEvent,
+
+  knowledgeBase: {
+    action: EventAction.Knowledgebase,
+    flow_id: 'flow-mock-001',
+    flow_node_id: 'node-mock-004',
+    knowledgebase_inference_id: 'inf-mock-001',
+    knowledgebase_fail_reason: '',
+    knowledgebase_sources_ids: ['src-mock-001'],
+    knowledgebase_chunks_ids: ['chunk-mock-001'],
+    user_input: 'How do I reset my password?',
+    knowledge_base_chunks_with_sources: mockChunksWithSources,
+  } satisfies KnowledgeBaseDebugEvent,
+
+  knowledgeBaseFailed: {
+    action: EventAction.Knowledgebase,
+    flow_id: 'flow-mock-001',
+    flow_node_id: 'node-mock-004',
+    knowledgebase_inference_id: 'inf-mock-002',
+    knowledgebase_fail_reason: 'no_relevant_content',
+    knowledgebase_sources_ids: [],
+    knowledgebase_chunks_ids: [],
+    user_input: 'What is the meaning of life?',
+    knowledge_base_chunks_with_sources: [],
+  } satisfies KnowledgeBaseDebugEvent,
+
+  conditionalChannel: {
+    action: EventAction.ConditionalChannel,
+    channel: 'whatsapp',
+  } satisfies ConditionalChannelDebugEvent,
+
+  conditionalCountry: {
+    action: EventAction.ConditionalCountry,
+    country: 'ES',
+  } satisfies ConditionalCountryDebugEvent,
+
+  conditionalCustom: {
+    action: EventAction.ConditionalCustom,
+    conditional_variable: 'user_plan',
+    variable_format: 'string',
+  } satisfies ConditionalCustomDebugEvent,
+
+  conditionalQueueStatus: {
+    action: EventAction.ConditionalQueueStatus,
+    queue_id: 'queue-mock-001',
+    queue_name: 'Support Team',
+    is_queue_open: true,
+    is_available_agent: true,
+  } satisfies ConditionalQueueStatusDebugEvent,
+
+  redirectFlow: {
+    action: EventAction.RedirectFlow,
+    flow_id: 'flow-mock-001',
+    flow_name: 'Main Flow',
+    flow_target_id: 'flow-mock-002',
+    flow_target_name: 'Billing Flow',
+  } satisfies RedirectFlowDebugEvent,
+
+  webviewActionTriggered: {
+    action: EventAction.WebviewActionTriggered,
+    webview_target_id: 'webview-mock-001',
+    webview_name: 'Payment Form',
+  } satisfies WebviewActionTriggeredDebugEvent,
+
+  aiAgent: {
+    action: EventAction.AiAgent,
+    flow_node_content_id: 'content-mock-001',
+    user_input: 'Can you help me with my subscription?',
+    tools_executed: [
+      {
+        tool_name: 'retrieve_knowledge',
+        tool_arguments: { query: 'subscription management' },
+        tool_results:
+          'Found 3 relevant articles about subscription management.',
+        knowledgebase_sources_ids: ['src-mock-001'],
+        knowledgebase_chunks_ids: ['chunk-mock-001'],
+      },
+      {
+        tool_name: 'get_user_subscription',
+        tool_arguments: { user_id: 'user-mock-001' },
+        tool_results: '{"plan": "pro", "renewal_date": "2026-06-01"}',
+      },
+    ],
+    input_guardrails_triggered: [],
+    output_guardrails_triggered: [],
+    exit: false,
+    error: false,
+    knowledge_base_chunks_with_sources: mockChunksWithSources,
+  } satisfies AiAgentDebugEvent,
+
+  aiAgentWithGuardrails: {
+    action: EventAction.AiAgent,
+    flow_node_content_id: 'content-mock-002',
+    user_input: 'Tell me something inappropriate',
+    tools_executed: [],
+    input_guardrails_triggered: ['content_safety', 'topic_restriction'],
+    output_guardrails_triggered: [],
+    exit: false,
+    error: false,
+  } satisfies AiAgentDebugEvent,
+
+  aiAgentError: {
+    action: EventAction.AiAgent,
+    flow_node_content_id: 'content-mock-003',
+    user_input: 'Hello',
+    tools_executed: [],
+    input_guardrails_triggered: [],
+    output_guardrails_triggered: [],
+    exit: false,
+    error: true,
+  } satisfies AiAgentDebugEvent,
+
+  aiAgentRouter: {
+    noTransfer: {
+      action: EventAction.AiAgentRouter,
+      flow_node_content_id: 'customer_support_router',
+      tools_executed: [],
+      memory_length: 2,
+      input_guardrails_triggered: [],
+      output_guardrails_triggered: [],
+      exit: false,
+      starting_agent_name: 'customer_support_router',
+      last_agent_name: 'customer_support_router',
+      available_specialists: [
+        {
+          name: 'billing_specialist',
+          description: 'Handles billing and invoice queries',
+        },
+        {
+          name: 'technical_support_specialist',
+          description: 'Handles technical issues',
+        },
+      ],
+      is_transferred_to_specialist: false,
+    } satisfies AiAgentRouterDebugEvent,
+
+    inputGuardrail: {
+      action: EventAction.AiAgentRouter,
+      flow_node_content_id: 'customer_support_router',
+      tools_executed: [],
+      memory_length: 0,
+      input_guardrails_triggered: ['is_competence'],
+      output_guardrails_triggered: [],
+      exit: false,
+      starting_agent_name: 'customer_support_router',
+      last_agent_name: 'customer_support_router',
+      available_specialists: [
+        {
+          name: 'billing_specialist',
+          description: 'Handles billing and invoice queries',
+        },
+        {
+          name: 'technical_support_specialist',
+          description: 'Handles technical issues',
+        },
+      ],
+      is_transferred_to_specialist: false,
+    } satisfies AiAgentRouterDebugEvent,
+
+    transfer: {
+      action: EventAction.AiAgentRouter,
+      flow_node_content_id: 'customer_support_router',
+      tools_executed: [],
+      memory_length: 3,
+      input_guardrails_triggered: [],
+      output_guardrails_triggered: [],
+      exit: true,
+      starting_agent_name: 'customer_support_router',
+      last_agent_name: 'billing_specialist',
+      available_specialists: [
+        {
+          name: 'billing_specialist',
+          description: 'Handles billing and invoice queries',
+        },
+        {
+          name: 'technical_support_specialist',
+          description: 'Handles technical issues',
+        },
+        {
+          name: 'sales_specialist',
+          description: 'Handles sales and pricing queries',
+        },
+      ],
+      is_transferred_to_specialist: true,
+      knowledge_base_chunks_with_sources: [],
+    } satisfies AiAgentRouterDebugEvent,
+  },
+}

package/src/dev-app.jsx

@@ -1,5 +1,7 @@
+import { INPUT } from '@botonic/core'
 import { createRoot } from 'react-dom/client'
 
+import { DEBUG_SYSTEM_MESSAGES } from './debug-system-messages'
 import { SENDERS } from './index-types'
 import { ReactBot } from './react-bot'
 import { onDOMLoaded } from './util/dom'
@@ -104,6 +106,28 @@ export class DevApp extends WebchatApp {
     })
   }
 
+  /** Pre-built mock payloads for every debug event type. Handy from the console:
+   *  Botonic.addDebugSystemMessage(Botonic.debugSystemMessages.aiAgent) */
+  get debugSystemMessages() {
+    return DEBUG_SYSTEM_MESSAGES
+  }
+
+  /**
+   * Inject a mock SystemDebugTrace event into the preview webchat.
+   * Accepts any DebugEvent payload (plain object with an `action` field).
+   *
+   * From code:
+   *   import { DEBUG_SYSTEM_MESSAGES } from '@botonic/react/src/debug-system-messages'
+   *   app.addDebugSystemMessage(DEBUG_SYSTEM_MESSAGES.aiAgent)
+   *
+   * From the browser console:
+   *   Botonic.addDebugSystemMessage(Botonic.debugSystemMessages.conditionalQueueStatus)
+   *   Botonic.addDebugSystemMessage({ action: 'nlu_keyword', nlu_keyword_name: 'hi', nlu_keyword_is_regex: false, flow_id: 'f1', flow_node_id: 'n1' })
+   */
+  addDebugSystemMessage(eventData) {
+    this.addSystemMessage({ type: INPUT.SYSTEM_DEBUG_TRACE, data: eventData })
+  }
+
   async onUserInput({ input, session, lastRoutePath }) {
     this.onMessage?.(this, {
       sentBy: SENDERS.user,

package/src/index.ts

@@ -1,6 +1,7 @@
 export { BotonicInputTester, BotonicOutputTester } from './botonic-tester'
 export * from './components'
 export * from './contexts'
+export { DEBUG_SYSTEM_MESSAGES } from './debug-system-messages'
 export { DevApp } from './dev-app'
 export * from './index-types'
 export { msgsToBotonic, msgToBotonic } from './msg-to-botonic'