@botonic/react 0.41.0 → 0.42.0-alpha.0

package/lib/esm/index-types.d.ts

@@ -52,9 +52,17 @@ interface AddBotResponseArgs {
 interface AddSystemResponseArgs {
     response: any;
 }
+export interface MinimalHubtypeMessage {
+    id: string;
+    type: string;
+    action: string;
+    text: string;
+}
 export interface PreviewUtils {
     getChunkIdsGroupedBySource: (chunkIds: string[]) => Promise<ChunkIdsGroupedBySourceData[]>;
     onClickOpenChunks: (chunkIdsGroupedBySource: ChunkIdsGroupedBySourceData[]) => void;
+    getMessageById: (messageId: string) => Promise<MinimalHubtypeMessage>;
+    trackPreviewEventOpened: (eventProperties: Record<string, unknown>) => void;
 }
 export interface WebchatArgs {
     theme?: Partial<WebchatTheme>;

package/lib/esm/index-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"index-types.js","sourceRoot":"","sources":["../../src/index-types.ts"],"names":[],"mappings":"AAqJA,MAAM,CAAN,IAAY,OAKX;AALD,WAAY,OAAO;IACjB,sBAAW,CAAA;IACX,wBAAa,CAAA;IACb,0BAAe,CAAA;IACf,4BAAiB,CAAA;AACnB,CAAC,EALW,OAAO,KAAP,OAAO,QAKlB;AAED,MAAM,CAAN,IAAY,MAGX;AAHD,WAAY,MAAM;IAChB,0BAAgB,CAAA;IAChB,4BAAkB,CAAA;AACpB,CAAC,EAHW,MAAM,KAAN,MAAM,QAGjB"}
+{"version":3,"file":"index-types.js","sourceRoot":"","sources":["../../src/index-types.ts"],"names":[],"mappings":"AA8JA,MAAM,CAAN,IAAY,OAKX;AALD,WAAY,OAAO;IACjB,sBAAW,CAAA;IACX,wBAAa,CAAA;IACb,0BAAe,CAAA;IACf,4BAAiB,CAAA;AACnB,CAAC,EALW,OAAO,KAAP,OAAO,QAKlB;AAED,MAAM,CAAN,IAAY,MAGX;AAHD,WAAY,MAAM;IAChB,0BAAgB,CAAA;IAChB,4BAAkB,CAAA;AACpB,CAAC,EAHW,MAAM,KAAN,MAAM,QAGjB"}

package/lib/esm/webchat/context/index.js

@@ -69,6 +69,20 @@ export const WebchatContext = createContext({
         return;
     },
     webchatState: {},
+    previewUtils: {
+        trackPreviewEventOpened: () => {
+            return;
+        },
+        getChunkIdsGroupedBySource: () => __awaiter(void 0, void 0, void 0, function* () {
+            return [];
+        }),
+        onClickOpenChunks: () => {
+            return;
+        },
+        getMessageById: () => __awaiter(void 0, void 0, void 0, function* () {
+            return {};
+        }),
+    },
     trackEvent: () => __awaiter(void 0, void 0, void 0, function* () {
         return;
     }),

package/lib/esm/webchat/context/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/webchat/context/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAKrC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAsB;IAC/D,UAAU,EAAE,GAAG,EAAE;QACf,OAAM;IACR,CAAC;IACD,gBAAgB,EAAE,GAAG,EAAE;QACrB,OAAM;IACR,CAAC;IACD,YAAY,EAAE,GAAS,EAAE;QACvB,OAAM;IACR,CAAC,CAAA;IACD,WAAW,EAAE,GAAG,EAAE;QAChB,OAAM;IACR,CAAC;IACD,WAAW,EAAE,GAAG,EAAE;QAChB,OAAM;IACR,CAAC;IACD,mBAAmB,EAAE,GAAG,EAAE;QACxB,OAAM;IACR,CAAC;IACD,iBAAiB,EAAE,GAAG,EAAE;QACtB,OAAM;IACR,CAAC;IACD,qBAAqB,EAAE,GAAG,EAAE;QAC1B,OAAM;IACR,CAAC;IACD,cAAc,EAAE,GAAS,EAAE;QACzB,OAAM;IACR,CAAC,CAAA;IACD,SAAS,EAAE,GAAS,EAAE;QACpB,OAAM;IACR,CAAC,CAAA;IACD,WAAW,EAAE,GAAS,EAAE;QACtB,OAAM;IACR,CAAC,CAAA;IACD,QAAQ,EAAE,GAAS,EAAE;QACnB,OAAM;IACR,CAAC,CAAA;IACD,oBAAoB,EAAE,GAAG,EAAE;QACzB,OAAM;IACR,CAAC;IACD,aAAa,EAAE,GAAG,EAAE;QAClB,OAAM;IACR,CAAC;IACD,iBAAiB,EAAE,GAAG,EAAE;QACtB,OAAM;IACR,CAAC;IACD,oBAAoB,EAAE,GAAG,EAAE;QACzB,OAAM;IACR,CAAC;IACD,wBAAwB,EAAE,GAAG,EAAE;QAC7B,OAAM;IACR,CAAC;IACD,iBAAiB,EAAE,GAAG,EAAE;QACtB,OAAM;IACR,CAAC;IACD,aAAa,EAAE,GAAG,EAAE;QAClB,OAAM;IACR,CAAC;IACD,aAAa,EAAE,GAAG,EAAE;QAClB,OAAM;IACR,CAAC;IACD,UAAU,EAAE,GAAG,EAAE;QACf,OAAM;IACR,CAAC;IACD,wBAAwB,EAAE,GAAG,EAAE;QAC7B,OAAM;IACR,CAAC;IACD,YAAY,EAAE,EAAkB;IAChC,UAAU,EAAE,GAAS,EAAE;QACrB,OAAM;IACR,CAAC,CAAA;IACD,mBAAmB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;IAC9B,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;IAChC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;IAC5B,yBAAyB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;IAC5C,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;CAC9B,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/webchat/context/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAOrC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAsB;IAC/D,UAAU,EAAE,GAAG,EAAE;QACf,OAAM;IACR,CAAC;IACD,gBAAgB,EAAE,GAAG,EAAE;QACrB,OAAM;IACR,CAAC;IACD,YAAY,EAAE,GAAS,EAAE;QACvB,OAAM;IACR,CAAC,CAAA;IACD,WAAW,EAAE,GAAG,EAAE;QAChB,OAAM;IACR,CAAC;IACD,WAAW,EAAE,GAAG,EAAE;QAChB,OAAM;IACR,CAAC;IACD,mBAAmB,EAAE,GAAG,EAAE;QACxB,OAAM;IACR,CAAC;IACD,iBAAiB,EAAE,GAAG,EAAE;QACtB,OAAM;IACR,CAAC;IACD,qBAAqB,EAAE,GAAG,EAAE;QAC1B,OAAM;IACR,CAAC;IACD,cAAc,EAAE,GAAS,EAAE;QACzB,OAAM;IACR,CAAC,CAAA;IACD,SAAS,EAAE,GAAS,EAAE;QACpB,OAAM;IACR,CAAC,CAAA;IACD,WAAW,EAAE,GAAS,EAAE;QACtB,OAAM;IACR,CAAC,CAAA;IACD,QAAQ,EAAE,GAAS,EAAE;QACnB,OAAM;IACR,CAAC,CAAA;IACD,oBAAoB,EAAE,GAAG,EAAE;QACzB,OAAM;IACR,CAAC;IACD,aAAa,EAAE,GAAG,EAAE;QAClB,OAAM;IACR,CAAC;IACD,iBAAiB,EAAE,GAAG,EAAE;QACtB,OAAM;IACR,CAAC;IACD,oBAAoB,EAAE,GAAG,EAAE;QACzB,OAAM;IACR,CAAC;IACD,wBAAwB,EAAE,GAAG,EAAE;QAC7B,OAAM;IACR,CAAC;IACD,iBAAiB,EAAE,GAAG,EAAE;QACtB,OAAM;IACR,CAAC;IACD,aAAa,EAAE,GAAG,EAAE;QAClB,OAAM;IACR,CAAC;IACD,aAAa,EAAE,GAAG,EAAE;QAClB,OAAM;IACR,CAAC;IACD,UAAU,EAAE,GAAG,EAAE;QACf,OAAM;IACR,CAAC;IACD,wBAAwB,EAAE,GAAG,EAAE;QAC7B,OAAM;IACR,CAAC;IACD,YAAY,EAAE,EAAkB;IAChC,YAAY,EAAE;QACZ,uBAAuB,EAAE,GAAG,EAAE;YAC5B,OAAM;QACR,CAAC;QACD,0BAA0B,EAAE,GAAS,EAAE;YACrC,OAAO,EAAmC,CAAA;QAC5C,CAAC,CAAA;QACD,iBAAiB,EAAE,GAAG,EAAE;YACtB,OAAM;QACR,CAAC;QACD,cAAc,EAAE,GAAS,EAAE;YACzB,OAAO,EAA2B,CAAA;QACpC,CAAC,CAAA;KACF;IAED,UAAU,EAAE,GAAS,EAAE;QACrB,OAAM;IACR,CAAC,CAAA;IACD,mBAAmB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;IAC9B,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;IAChC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;IAC5B,yBAAyB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;IAC5C,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;CAC9B,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/react",
-  "version": "0.41.0",
+  "version": "0.42.0-alpha.0",
   "license": "MIT",
   "description": "Build Chatbots using React",
   "main": "./lib/cjs",
@@ -21,7 +21,7 @@
     "lint_core": "../../node_modules/.bin/eslint_d --cache --quiet '.*.js' '*.js' 'src/**/*.js*' --fix"
   },
   "dependencies": {
-    "@botonic/core": "^0.41.0",
+    "@botonic/core": "0.42.0-alpha.0",
     "axios": "^1.12.2",
     "emoji-picker-react": "^4.12.0",
     "lodash.merge": "^4.6.2",

package/src/components/system-debug-trace/debug-message.tsx

@@ -1,13 +1,21 @@
 import { EventAction } from '@botonic/core'
-import React, { useRef, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 
+import { WebchatContext } from '../../webchat/context'
 import {
   getAiAgentEventConfig,
+  getBotActionEventConfig,
+  getConditionalChannelEventConfig,
+  getConditionalCountryEventConfig,
+  getConditionalCustomEventConfig,
+  getConditionalQueueStatusEventConfig,
   getFallbackEventConfig,
   getHandoffSuccessEventConfig,
   getKeywordEventConfig,
   getKnowledgeBaseEventConfig,
+  getRedirectFlowEventConfig,
   getSmartIntentEventConfig,
+  getWebviewActionTriggeredEventConfig,
 } from './events'
 import { useLastLabelPosition } from './hooks/use-last-label-position'
 import { CaretDownSvg, CaretUpSvg } from './icons'
@@ -38,6 +46,20 @@ const getEventConfig = (
       return getKnowledgeBaseEventConfig(debugEvent)
     case EventAction.Fallback:
       return getFallbackEventConfig(debugEvent)
+    case EventAction.BotAction:
+      return getBotActionEventConfig(debugEvent)
+    case EventAction.ConditionalChannel:
+      return getConditionalChannelEventConfig(debugEvent)
+    case EventAction.ConditionalCountry:
+      return getConditionalCountryEventConfig(debugEvent)
+    case EventAction.ConditionalCustom:
+      return getConditionalCustomEventConfig(debugEvent)
+    case EventAction.ConditionalQueueStatus:
+      return getConditionalQueueStatusEventConfig(debugEvent)
+    case EventAction.RedirectFlow:
+      return getRedirectFlowEventConfig(debugEvent)
+    case EventAction.WebviewActionTriggered:
+      return getWebviewActionTriggeredEventConfig(debugEvent)
     default:
       return undefined
   }
@@ -51,7 +73,7 @@ interface DebugMessageProps {
 export const DebugMessage = ({ debugEvent, messageId }: DebugMessageProps) => {
   const [isExpanded, setIsExpanded] = useState(false)
   const wrapperRef = useRef<HTMLDivElement>(null)
-
+  const { previewUtils } = useContext(WebchatContext)
   const eventConfig = getEventConfig(debugEvent)
 
   useLastLabelPosition({
@@ -61,6 +83,12 @@ export const DebugMessage = ({ debugEvent, messageId }: DebugMessageProps) => {
     isCollapsible: eventConfig?.collapsible ?? false,
   })
 
+  useEffect(() => {
+    if (isExpanded) {
+      previewUtils?.trackPreviewEventOpened?.({ action: debugEvent.action })
+    }
+  }, [previewUtils, isExpanded, debugEvent])
+
   if (!eventConfig) {
     return null
   }

package/src/components/system-debug-trace/events/bot-action.tsx

@@ -0,0 +1,28 @@
+import { EventAction } from '@botonic/core'
+import React from 'react'
+
+import { CodeSvg } from '../icons/code'
+import { DebugEventConfig } from '../types'
+
+export interface BotActionDebugEvent {
+  action: EventAction.BotAction
+  payload: string
+}
+
+export const getBotActionEventConfig = (
+  data: BotActionDebugEvent
+): DebugEventConfig => {
+  const title = (
+    <>
+      Bot action triggered <span>- {data.payload}</span>
+    </>
+  )
+
+  return {
+    action: EventAction.BotAction,
+    title,
+    component: null,
+    icon: <CodeSvg />,
+    collapsible: false,
+  }
+}

package/src/components/system-debug-trace/events/conditional-channel.tsx

@@ -0,0 +1,28 @@
+import { EventAction } from '@botonic/core'
+import React from 'react'
+
+import { SplitSvg } from '../icons/split'
+import { DebugEventConfig } from '../types'
+
+export interface ConditionalChannelDebugEvent {
+  action: EventAction.ConditionalChannel
+  channel: string
+}
+
+export const getConditionalChannelEventConfig = (
+  data: ConditionalChannelDebugEvent
+): DebugEventConfig => {
+  const title = (
+    <>
+      Channel checked <span>- {data.channel}</span>
+    </>
+  )
+
+  return {
+    action: EventAction.ConditionalChannel,
+    title,
+    component: null,
+    icon: <SplitSvg />,
+    collapsible: false,
+  }
+}

package/src/components/system-debug-trace/events/conditional-country.tsx

@@ -0,0 +1,28 @@
+import { EventAction } from '@botonic/core'
+import React from 'react'
+
+import { SplitSvg } from '../icons/split'
+import { DebugEventConfig } from '../types'
+
+export interface ConditionalCountryDebugEvent {
+  action: EventAction.ConditionalCountry
+  country: string
+}
+
+export const getConditionalCountryEventConfig = (
+  data: ConditionalCountryDebugEvent
+): DebugEventConfig => {
+  const title = (
+    <>
+      Country checked <span>- {data.country}</span>
+    </>
+  )
+
+  return {
+    action: EventAction.ConditionalCountry,
+    title,
+    component: null,
+    icon: <SplitSvg />,
+    collapsible: false,
+  }
+}

package/src/components/system-debug-trace/events/conditional-custom.tsx

@@ -0,0 +1,29 @@
+import { EventAction } from '@botonic/core'
+import React from 'react'
+
+import { SplitSvg } from '../icons/split'
+import { DebugEventConfig } from '../types'
+
+export interface ConditionalCustomDebugEvent {
+  action: EventAction.ConditionalCustom
+  conditional_variable: string
+  variable_format: string
+}
+
+export const getConditionalCustomEventConfig = (
+  data: ConditionalCustomDebugEvent
+): DebugEventConfig => {
+  const title = (
+    <>
+      Custom condition checked <span>- {data.conditional_variable}</span>
+    </>
+  )
+
+  return {
+    action: EventAction.ConditionalCustom,
+    title,
+    component: null,
+    icon: <SplitSvg />,
+    collapsible: false,
+  }
+}

package/src/components/system-debug-trace/events/conditional-queue-status.tsx

@@ -0,0 +1,37 @@
+import { EventAction } from '@botonic/core'
+import React from 'react'
+
+import { SplitSvg } from '../icons/split'
+import { DebugEventConfig } from '../types'
+
+export interface ConditionalQueueStatusDebugEvent {
+  action: EventAction.ConditionalQueueStatus
+  queue_id: string
+  queue_name: string
+  is_queue_open: boolean
+  is_available_agent: boolean
+}
+
+export const getConditionalQueueStatusEventConfig = (
+  data: ConditionalQueueStatusDebugEvent
+): DebugEventConfig => {
+  const queueStatus = data.is_queue_open ? 'Open' : 'Closed'
+  const agentStatus = data.is_available_agent ? 'Available' : 'Unavailable'
+
+  const title = (
+    <>
+      Queue status checked{' '}
+      <span>
+        - {queueStatus} (Agent {agentStatus})
+      </span>
+    </>
+  )
+
+  return {
+    action: EventAction.ConditionalQueueStatus,
+    title,
+    component: null,
+    icon: <SplitSvg />,
+    collapsible: false,
+  }
+}

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

@@ -7,9 +7,13 @@ export const LABELS = {
   KNOWLEDGE_GATHERED: 'Knowledge gathered',
   EXECUTED_TOOLS: 'Executed tools',
   NO_TOOLS_EXECUTED: 'No tools executed',
+  AUTO_ASSIGN_ON: 'ON',
+  AUTO_ASSIGN_OFF: 'OFF',
   EXIT: 'Exit',
   ERROR: 'Error',
   QUEUE: 'Queue',
+  AUTO_ASSIGN: 'Auto-assign',
+  NOTE: 'Note',
   KNOWLEDGE_BASE_FAIL_REASON: 'Knowledge Base Fail Reason',
   SEE_CHUNKS_BUTTON: 'See chunks',
 } as const

package/src/components/system-debug-trace/events/handoff-success.tsx

@@ -1,6 +1,7 @@
 import { EventAction } from '@botonic/core'
-import React from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 
+import { WebchatContext } from '../../../webchat/context'
 import { HeadSetSvg } from '../icons'
 import {
   StyledDebugDetail,
@@ -14,14 +15,51 @@ export interface HandoffSuccessDebugEvent {
   action: EventAction.HandoffSuccess
   handoff_queue_name: string
   handoff_is_queue_open: boolean
+  handoff_has_auto_assign: boolean
+  handoff_note_id: string
 }
 
 export const HandoffSuccess = (props: HandoffSuccessDebugEvent) => {
+  const { previewUtils } = useContext(WebchatContext)
+  const [noteMessage, setNoteMessage] = useState<string>()
+
+  useEffect(() => {
+    const fetchNoteMessage = async () => {
+      if (!previewUtils || !props.handoff_note_id) {
+        return
+      }
+      const noteMessage = await previewUtils.getMessageById(
+        props.handoff_note_id
+      )
+      if (!noteMessage) {
+        return
+      }
+      setNoteMessage(noteMessage.text)
+    }
+    fetchNoteMessage()
+  }, [previewUtils, props.handoff_note_id])
+
   return (
-    <StyledDebugDetail>
-      <StyledDebugLabel>{LABELS.QUEUE}</StyledDebugLabel>
-      <StyledDebugValue>{props.handoff_queue_name}</StyledDebugValue>
-    </StyledDebugDetail>
+    <>
+      <StyledDebugDetail>
+        <StyledDebugLabel>{LABELS.QUEUE}</StyledDebugLabel>
+        <StyledDebugValue>{props.handoff_queue_name}</StyledDebugValue>
+      </StyledDebugDetail>
+      <StyledDebugDetail>
+        <StyledDebugLabel>{LABELS.AUTO_ASSIGN}</StyledDebugLabel>
+        <StyledDebugValue>
+          {props.handoff_has_auto_assign
+            ? LABELS.AUTO_ASSIGN_ON
+            : LABELS.AUTO_ASSIGN_OFF}
+        </StyledDebugValue>
+      </StyledDebugDetail>
+      {Boolean(noteMessage) && (
+        <StyledDebugDetail>
+          <StyledDebugLabel>{LABELS.NOTE}</StyledDebugLabel>
+          <StyledDebugValue>{noteMessage}</StyledDebugValue>
+        </StyledDebugDetail>
+      )}
+    </>
   )
 }
 
@@ -36,8 +74,7 @@ export const getHandoffSuccessEventConfig = (
       </>
     ),
     icon: <HeadSetSvg />,
-    // TODO: Disable component and collapsible for now because we are only showing the queue name
-    component: null,
-    collapsible: false,
+    component: HandoffSuccess,
+    collapsible: true,
   }
 }

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

@@ -1,7 +1,14 @@
 export * from './ai-agent'
+export * from './bot-action'
+export * from './conditional-channel'
+export * from './conditional-country'
+export * from './conditional-custom'
+export * from './conditional-queue-status'
 export * from './fallback'
 export * from './handoff-success'
 export * from './keyword'
 export * from './knowledge-base'
 export * from './knowledge-bases-types'
+export * from './redirect-flow'
 export * from './smart-intent'
+export * from './webview-action-triggered'

package/src/components/system-debug-trace/events/redirect-flow.tsx

@@ -0,0 +1,31 @@
+import { EventAction } from '@botonic/core'
+import React from 'react'
+
+import { ArrowProgressSvg } from '../icons/arrow-progress'
+import { DebugEventConfig } from '../types'
+
+export interface RedirectFlowDebugEvent {
+  action: EventAction.RedirectFlow
+  flow_id: string
+  flow_name: string
+  flow_target_id: string
+  flow_target_name: string
+}
+
+export const getRedirectFlowEventConfig = (
+  data: RedirectFlowDebugEvent
+): DebugEventConfig => {
+  const title = (
+    <>
+      Redirected to flow <span>- {data.flow_target_name}</span>
+    </>
+  )
+
+  return {
+    action: EventAction.RedirectFlow,
+    title,
+    component: null,
+    icon: <ArrowProgressSvg />,
+    collapsible: false,
+  }
+}

package/src/components/system-debug-trace/events/webview-action-triggered.tsx

@@ -0,0 +1,29 @@
+import { EventAction } from '@botonic/core'
+import React from 'react'
+
+import { WindowRestoreSvg } from '../icons/window-restore'
+import { DebugEventConfig } from '../types'
+
+export interface WebviewActionTriggeredDebugEvent {
+  action: EventAction.WebviewActionTriggered
+  webview_target_id: string
+  webview_name: string
+}
+
+export const getWebviewActionTriggeredEventConfig = (
+  data: WebviewActionTriggeredDebugEvent
+): DebugEventConfig => {
+  const title = (
+    <>
+      Webview action triggered <span>- {data.webview_name}</span>
+    </>
+  )
+
+  return {
+    action: EventAction.WebviewActionTriggered,
+    title,
+    component: null,
+    icon: <WindowRestoreSvg />,
+    collapsible: false,
+  }
+}

package/src/components/system-debug-trace/icons/arrow-progress.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const ArrowProgressSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill={color}>
+      <path
+        d='M294.8 97.8C303.8 94.1 314.1 96.1 321 103L361 143C370.4 152.4 370.4 167.6 361 176.9L321 216.9C314.1 223.8 303.8 225.8 294.8 222.1C285.8 218.4 280 209.7 280 200L280 192L176 192C149.5 192 128 213.5 128 240C128 266.5 149.5 288 176 288L464 288C525.9 288 576 338.1 576 400C576 446.4 547.8 486.1 507.7 503.2C498.4 527.1 475.2 544 448 544C412.7 544 384 515.3 384 480C384 444.7 412.7 416 448 416C466.6 416 483.4 423.9 495 436.6C505.4 427.8 512 414.7 512 400C512 373.5 490.5 352 464 352L176 352C114.1 352 64 301.9 64 240C64 178.1 114.1 128 176 128L280 128L280 120C280 110.3 285.8 101.5 294.8 97.8zM480 96C515.3 96 544 124.7 544 160C544 195.3 515.3 224 480 224C444.7 224 416 195.3 416 160C416 124.7 444.7 96 480 96zM215.4 512C204.3 531.1 183.7 544 160 544C124.7 544 96 515.3 96 480C96 444.7 124.7 416 160 416C183.7 416 204.4 428.9 215.4 448L248 448L248 440C248 430.3 253.8 421.5 262.8 417.8C271.8 414.1 282.1 416.1 289 423L329 463C338.4 472.4 338.4 487.6 329 496.9L289 536.9C282.1 543.8 271.8 545.8 262.8 542.1C253.8 538.4 248 529.7 248 520L248 512L215.4 512z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/components/system-debug-trace/icons/code.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const CodeSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill={color}>
+      <path
+        d='M392.8 65.2C375.8 60.3 358.1 70.2 353.2 87.2L225.2 535.2C220.3 552.2 230.2 569.9 247.2 574.8C264.2 579.7 281.9 569.8 286.8 552.8L414.8 104.8C419.7 87.8 409.8 70.1 392.8 65.2zM457.4 201.3C444.9 213.8 444.9 234.1 457.4 246.6L530.8 320L457.4 393.4C444.9 405.9 444.9 426.2 457.4 438.7C469.9 451.2 490.2 451.2 502.7 438.7L598.7 342.7C611.2 330.2 611.2 309.9 598.7 297.4L502.7 201.4C490.2 188.9 469.9 188.9 457.4 201.4zM182.7 201.3C170.2 188.8 149.9 188.8 137.4 201.3L41.4 297.3C28.9 309.8 28.9 330.1 41.4 342.6L137.4 438.6C149.9 451.1 170.2 451.1 182.7 438.6C195.2 426.1 195.2 405.8 182.7 393.3L109.3 320L182.6 246.6C195.1 234.1 195.1 213.8 182.6 201.3z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/components/system-debug-trace/icons/split.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const SplitSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill={color}>
+      <path
+        d='M467.8 66.4C479.8 61.4 493.5 64.2 502.7 73.3L566.7 137.3C572.7 143.3 576.1 151.4 576.1 159.9C576.1 168.4 572.7 176.5 566.7 182.5L502.7 246.5C493.5 255.7 479.8 258.4 467.8 253.4C455.8 248.4 448 236.9 448 224L448 192L410.5 192C402 192 393.9 195.4 387.9 201.4L269.3 320L387.9 438.6C393.9 444.6 402 448 410.5 448L448 448L448 416C448 403.1 455.8 391.4 467.8 386.4C479.8 381.4 493.5 384.2 502.7 393.3L566.7 457.3C572.7 463.3 576.1 471.4 576.1 479.9C576.1 488.4 572.7 496.5 566.7 502.5L502.7 566.5C493.5 575.7 479.8 578.4 467.8 573.4C455.8 568.4 448 556.9 448 544L448 512L410.5 512C385 512 360.6 501.9 342.6 483.9L210.7 352L96 352C78.3 352 64 337.7 64 320C64 302.3 78.3 288 96 288L210.7 288L342.6 156.1C360.6 138.1 385 128 410.5 128L448 128L448 96C448 83.1 455.8 71.4 467.8 66.4z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/components/system-debug-trace/icons/window-restore.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const WindowRestoreSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill={color}>
+      <path
+        d='M544 160L192 160C192 124.7 220.7 96 256 96L544 96C579.3 96 608 124.7 608 160L608 352C608 387.3 579.3 416 544 416L496 416L496 352L544 352L544 160zM32 288C32 252.7 60.7 224 96 224L384 224C419.3 224 448 252.7 448 288L448 480C448 515.3 419.3 544 384 544L96 544C60.7 544 32 515.3 32 480L32 288zM96 328C96 341.3 106.7 352 120 352L360 352C373.3 352 384 341.3 384 328C384 314.7 373.3 304 360 304L120 304C106.7 304 96 314.7 96 328z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

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

@@ -120,13 +120,14 @@ export const StyledDebugLabel = styled.strong`
 `
 
 export const StyledDebugValue = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
   font-weight: 600;
   font-size: 12px;
   color: ${COLORS.N700};
   line-height: 1.5;
+  width: 100%;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
 
   > svg {
     width: 14px;
@@ -134,7 +135,9 @@ export const StyledDebugValue = styled.div`
     min-width: 14px;
     min-height: 14px;
     flex-shrink: 0;
-    display: block;
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 8px;
   }
 `
 

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

@@ -2,11 +2,18 @@ import React from 'react'
 
 import {
   AiAgentDebugEvent,
+  BotActionDebugEvent,
+  ConditionalChannelDebugEvent,
+  ConditionalCountryDebugEvent,
+  ConditionalCustomDebugEvent,
+  ConditionalQueueStatusDebugEvent,
   FallbackDebugEvent,
   HandoffSuccessDebugEvent,
   KeywordDebugEvent,
   KnowledgeBaseDebugEvent,
+  RedirectFlowDebugEvent,
   SmartIntentDebugEvent,
+  WebviewActionTriggeredDebugEvent,
 } from './events'
 
 export interface IconProps {
@@ -21,6 +28,13 @@ export type DebugEvent =
   | FallbackDebugEvent
   | SmartIntentDebugEvent
   | HandoffSuccessDebugEvent
+  | BotActionDebugEvent
+  | ConditionalChannelDebugEvent
+  | ConditionalCountryDebugEvent
+  | ConditionalCustomDebugEvent
+  | ConditionalQueueStatusDebugEvent
+  | RedirectFlowDebugEvent
+  | WebviewActionTriggeredDebugEvent
 
 export interface DebugEventConfig {
   action: string

package/src/index-types.ts

@@ -81,6 +81,13 @@ interface AddSystemResponseArgs {
   response: any
 }
 
+export interface MinimalHubtypeMessage {
+  id: string
+  type: string
+  action: string
+  text: string
+}
+
 export interface PreviewUtils {
   getChunkIdsGroupedBySource: (
     chunkIds: string[]
@@ -88,6 +95,8 @@ export interface PreviewUtils {
   onClickOpenChunks: (
     chunkIdsGroupedBySource: ChunkIdsGroupedBySourceData[]
   ) => void
+  getMessageById: (messageId: string) => Promise<MinimalHubtypeMessage>
+  trackPreviewEventOpened: (eventProperties: Record<string, unknown>) => void
 }
 
 export interface WebchatArgs {

package/src/webchat/context/index.tsx

@@ -1,5 +1,7 @@
 import { createContext } from 'react'
 
+import { ChunkIdsGroupedBySourceData } from '../../components/system-debug-trace/events/knowledge-bases-types'
+import { MinimalHubtypeMessage } from '../../index-types'
 import { WebchatContextProps, WebchatState } from './types'
 
 export { ClientSession, WebchatState } from './types'
@@ -73,6 +75,21 @@ export const WebchatContext = createContext<WebchatContextProps>({
     return
   },
   webchatState: {} as WebchatState,
+  previewUtils: {
+    trackPreviewEventOpened: () => {
+      return
+    },
+    getChunkIdsGroupedBySource: async () => {
+      return [] as ChunkIdsGroupedBySourceData[]
+    },
+    onClickOpenChunks: () => {
+      return
+    },
+    getMessageById: async () => {
+      return {} as MinimalHubtypeMessage
+    },
+  },
+
   trackEvent: async () => {
     return
   },