@botonic/react 0.40.1 → 0.41.0-alpha.0

package/src/components/system-debug-trace/hooks/use-knowledge-base-info.tsx

@@ -0,0 +1,170 @@
+import { KnowledgebaseFailReason } from '@botonic/core'
+import React, { useContext, useEffect, useMemo, useState } from 'react'
+
+import { ChunkIdsGroupedBySourceData } from '../../../index-types'
+import { WebchatContext } from '../../../webchat/context'
+import { HubtypeChunk, HubtypeSource } from '../events/knowledge-bases-types'
+import { FilePdfSvg, FileWordSvg, LinkSvg } from '../icons'
+
+interface UseKnowledgeBaseInfoParams {
+  sourceIds: string[]
+  chunkIds: string[]
+  messageId?: string
+  existingChunksWithSources?: ChunkIdsGroupedBySourceData[]
+  failReason?: string
+}
+
+export const useKnowledgeBaseInfo = ({
+  sourceIds,
+  chunkIds,
+  messageId,
+  existingChunksWithSources,
+  failReason,
+}: UseKnowledgeBaseInfoParams) => {
+  const { updateMessage, webchatState, previewUtils } =
+    useContext(WebchatContext)
+
+  // Check if we have cached data
+  const hasCachedData = existingChunksWithSources !== undefined
+
+  // Initialize state from existing chunks with sources if available
+  const initialChunksWithSources = existingChunksWithSources || []
+  const initialSources = initialChunksWithSources.map(item => item.source)
+  const initialChunks = initialChunksWithSources.flatMap(item => item.chunks)
+
+  const [chunksWithSources, setChunksWithSources] = useState<
+    ChunkIdsGroupedBySourceData[]
+  >(initialChunksWithSources)
+  const [sources, setSources] = useState<HubtypeSource[]>(initialSources)
+  const [chunks, setChunks] = useState<HubtypeChunk[]>(initialChunks)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const updateMessageWithKnowledgeData = (
+    fetchedChunksWithSources: ChunkIdsGroupedBySourceData[]
+  ) => {
+    if (!messageId) {
+      return
+    }
+
+    const message = webchatState.messagesJSON.find(m => m.id === messageId)
+    if (!message) {
+      return
+    }
+
+    // Parse the existing data if it's a string (shouldn't be, but handle it)
+    const parsedData =
+      typeof message.data === 'string' ? JSON.parse(message.data) : message.data
+
+    // Update with fetched chunks with sources and preserve original IDs
+    const updatedData = {
+      ...parsedData,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      knowledgebase_sources_ids: sourceIds,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      knowledgebase_chunks_ids: chunkIds,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      knowledge_base_chunks_with_sources: fetchedChunksWithSources,
+    }
+
+    // Update the message in webchat state - keep data as object
+    updateMessage({
+      ...message,
+      data: updatedData,
+    })
+  }
+
+  const fetchChunksWithSources = async () => {
+    if (chunkIds.length === 0 || !previewUtils) return []
+    setIsLoading(true)
+    try {
+      const fetchedChunksWithSources =
+        await previewUtils.getChunkIdsGroupedBySource(chunkIds)
+      return fetchedChunksWithSources
+    } catch (error) {
+      console.error('Error fetching chunks with sources:', error)
+      return []
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const getIconForSourceType = (source: HubtypeSource) => {
+    switch (source.type) {
+      case 'file':
+        if (source.activeExtractionJob.fileName.endsWith('.pdf')) {
+          return <FilePdfSvg />
+        } else {
+          return <FileWordSvg />
+        }
+      case 'url':
+        return <LinkSvg />
+      default:
+        return null
+    }
+  }
+
+  const { hasKnowledge, isFaithful } = useMemo(() => {
+    const typedFailReason = failReason as unknown as KnowledgebaseFailReason
+
+    if (typedFailReason === KnowledgebaseFailReason.NoKnowledge) {
+      return {
+        hasKnowledge: false,
+        isFaithful: false,
+      }
+    }
+    if (typedFailReason === KnowledgebaseFailReason.Hallucination) {
+      return {
+        hasKnowledge: true,
+        isFaithful: false,
+      }
+    }
+    return {
+      hasKnowledge: true,
+      isFaithful: true,
+    }
+  }, [failReason])
+
+  useEffect(() => {
+    // If we already have cached data (even if empty), don't fetch again
+    if (hasCachedData) {
+      return
+    }
+
+    // Only fetch if previewUtils is available
+    if (!previewUtils) {
+      return
+    }
+
+    // Otherwise, fetch the data
+    const fetchData = async () => {
+      const fetchedChunksWithSources = await fetchChunksWithSources()
+
+      // Extract sources and chunks from chunks with sources
+      const fetchedSources = fetchedChunksWithSources.map(item => item.source)
+      const fetchedChunks = fetchedChunksWithSources.flatMap(
+        item => item.chunks
+      )
+
+      setChunksWithSources(fetchedChunksWithSources)
+      setSources(fetchedSources)
+      setChunks(fetchedChunks)
+
+      // Always update the message with the fetched data (even if empty arrays)
+      // This marks the data as fetched so we don't fetch again
+      updateMessageWithKnowledgeData(fetchedChunksWithSources)
+    }
+
+    fetchData()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return {
+    sources,
+    chunks,
+    chunksWithSources,
+    isLoading,
+    getIconForSourceType,
+    hasKnowledge,
+    isFaithful,
+  }
+}

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

@@ -0,0 +1,94 @@
+import { RefObject, useEffect } from 'react'
+
+interface UseLastLabelPositionProps {
+  wrapperRef: RefObject<HTMLDivElement>
+  isExpanded: boolean
+  debugEvent: unknown
+  isCollapsible: boolean
+}
+
+export function useLastLabelPosition({
+  wrapperRef,
+  isExpanded,
+  debugEvent,
+  isCollapsible,
+}: UseLastLabelPositionProps) {
+  useEffect(() => {
+    // Only measure for collapsible events
+    if (!isCollapsible) {
+      return undefined
+    }
+
+    if (!isExpanded || !wrapperRef.current) {
+      if (wrapperRef.current) {
+        wrapperRef.current.style.setProperty('--last-label-bottom', '0px')
+      }
+      return undefined
+    }
+
+    const measure = () => {
+      const wrapper = wrapperRef.current
+      if (!wrapper) return
+
+      // Check if visible
+      const parent = wrapper.parentElement
+      if (parent && window.getComputedStyle(parent).display === 'none') {
+        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
+
+        // 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
+      })
+
+      if (allLabels.length === 0) return
+
+      // Get the last label
+      const lastLabel = allLabels[allLabels.length - 1]
+
+      // Calculate distance from wrapper top to label bottom
+      const wrapperTop = wrapper.getBoundingClientRect().top
+      const labelBottom = lastLabel.getBoundingClientRect().bottom
+      const labelBottomPosition = labelBottom - wrapperTop
+
+      // Set CSS variable for line height calculation
+      wrapper.style.setProperty(
+        '--last-label-bottom',
+        `${labelBottomPosition}px`
+      )
+    }
+
+    // Measure after render
+    const timeoutId = setTimeout(measure, 0)
+    const resizeObserver =
+      'ResizeObserver' in window ? new ResizeObserver(measure) : null
+
+    if (resizeObserver && wrapperRef.current) {
+      resizeObserver.observe(wrapperRef.current)
+    }
+
+    return () => {
+      clearTimeout(timeoutId)
+      resizeObserver?.disconnect()
+    }
+  }, [isExpanded, debugEvent, wrapperRef, isCollapsible])
+}

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

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const BrainSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill={color}>
+      <path
+        d='M184 120C184 89.1 209.1 64 240 64L264 64C281.7 64 296 78.3 296 96L296 544C296 561.7 281.7 576 264 576L232 576C202.2 576 177.1 555.6 170 528C169.3 528 168.7 528 168 528C123.8 528 88 492.2 88 448C88 430 94 413.4 104 400C84.6 385.4 72 362.2 72 336C72 305.1 89.6 278.2 115.2 264.9C108.1 252.9 104 238.9 104 224C104 179.8 139.8 144 184 144L184 120zM456 120L456 144C500.2 144 536 179.8 536 224C536 239 531.9 253 524.8 264.9C550.5 278.2 568 305 568 336C568 362.2 555.4 385.4 536 400C546 413.4 552 430 552 448C552 492.2 516.2 528 472 528C471.3 528 470.7 528 470 528C462.9 555.6 437.8 576 408 576L376 576C358.3 576 344 561.7 344 544L344 96C344 78.3 358.3 64 376 64L400 64C430.9 64 456 89.1 456 120z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/components/system-debug-trace/icons/caret-down.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const CaretDownSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' color={color}>
+      <path
+        d='M300.3 440.8C312.9 451 331.4 450.3 343.1 438.6L471.1 310.6C480.3 301.4 483 287.7 478 275.7C473 263.7 461.4 256 448.5 256L192.5 256C179.6 256 167.9 263.8 162.9 275.8C157.9 287.8 160.7 301.5 169.9 310.6L297.9 438.6L300.3 440.8z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/components/system-debug-trace/icons/caret-up.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const CaretUpSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' color={color}>
+      <path
+        d='M300.3 199.2C312.9 188.9 331.4 189.7 343.1 201.4L471.1 329.4C480.3 338.6 483 352.3 478 364.3C473 376.3 461.4 384 448.5 384L192.5 384C179.6 384 167.9 376.2 162.9 364.2C157.9 352.2 160.7 338.5 169.9 329.4L297.9 201.4L300.3 199.2z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/components/system-debug-trace/icons/circle-check.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const CircleCheckSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill={color}>
+      <path
+        d='M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 112C205.1 112 112 205.1 112 320C112 434.9 205.1 528 320 528C434.9 528 528 434.9 528 320C528 205.1 434.9 112 320 112zM390.7 233.9C398.5 223.2 413.5 220.8 424.2 228.6C434.9 236.4 437.3 251.4 429.5 262.1L307.4 430.1C303.3 435.8 296.9 439.4 289.9 439.9C282.9 440.4 276 437.9 271.1 433L215.2 377.1C205.8 367.7 205.8 352.5 215.2 343.2C224.6 333.9 239.8 333.8 249.1 343.2L285.1 379.2L390.7 234z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/components/system-debug-trace/icons/file-pdf.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const FilePdfSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill={color}>
+      <path
+        d='M128 64C92.7 64 64 92.7 64 128L64 512C64 547.3 92.7 576 128 576L208 576L208 464C208 428.7 236.7 400 272 400L448 400L448 234.5C448 217.5 441.3 201.2 429.3 189.2L322.7 82.7C310.7 70.7 294.5 64 277.5 64L128 64zM389.5 240L296 240C282.7 240 272 229.3 272 216L272 122.5L389.5 240zM272 444C261 444 252 453 252 464L252 592C252 603 261 612 272 612C283 612 292 603 292 592L292 564L304 564C337.1 564 364 537.1 364 504C364 470.9 337.1 444 304 444L272 444zM304 524L292 524L292 484L304 484C315 484 324 493 324 504C324 515 315 524 304 524zM400 444C389 444 380 453 380 464L380 592C380 603 389 612 400 612L432 612C460.7 612 484 588.7 484 560L484 496C484 467.3 460.7 444 432 444L400 444zM420 572L420 484L432 484C438.6 484 444 489.4 444 496L444 560C444 566.6 438.6 572 432 572L420 572zM508 464L508 592C508 603 517 612 528 612C539 612 548 603 548 592L548 548L576 548C587 548 596 539 596 528C596 517 587 508 576 508L548 508L548 484L576 484C587 484 596 475 596 464C596 453 587 444 576 444L528 444C517 444 508 453 508 464z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/components/system-debug-trace/icons/file-word.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const FileWordSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill={color}>
+      <path
+        d='M128 128C128 92.7 156.7 64 192 64L341.5 64C358.5 64 374.8 70.7 386.8 82.7L493.3 189.3C505.3 201.3 512 217.6 512 234.6L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 128zM336 122.5L336 216C336 229.3 346.7 240 360 240L453.5 240L336 122.5zM263.4 338.8C260.5 325.9 247.7 317.7 234.8 320.6C221.9 323.5 213.7 336.3 216.6 349.2L248.6 493.2C250.9 503.7 260 511.4 270.8 512C281.6 512.6 291.4 505.9 294.8 495.6L320 419.9L345.2 495.6C348.6 505.8 358.4 512.5 369.2 512C380 511.5 389.1 503.8 391.4 493.2L423.4 349.2C426.3 336.3 418.1 323.4 405.2 320.6C392.3 317.8 379.4 325.9 376.6 338.8L363.4 398.2L342.8 336.4C339.5 326.6 330.4 320 320 320C309.6 320 300.5 326.6 297.2 336.4L276.6 398.2L263.4 338.8z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

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

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const HandSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill={color}>
+      <path
+        d='M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V240c0 8.8-7.2 16-16 16s-16-7.2-16-16V64c0-17.7-14.3-32-32-32s-32 14.3-32 32V336c0 1.5 0 3.1 .1 4.6L67.6 283c-16-15.2-41.3-14.6-56.6 1.4s-14.6 41.3 1.4 56.6L124.8 448c43.1 41.1 100.4 64 160 64H304c97.2 0 176-78.8 176-176V128c0-17.7-14.3-32-32-32s-32 14.3-32 32V240c0 8.8-7.2 16-16 16s-16-7.2-16-16V64c0-17.7-14.3-32-32-32s-32 14.3-32 32V240c0 8.8-7.2 16-16 16s-16-7.2-16-16V32z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/components/system-debug-trace/icons/head-set.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const HeadSetSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill={color}>
+      <path
+        d='M320 128C241 128 175.3 185.3 162.3 260.7C171.6 257.7 181.6 256 192 256L208 256C234.5 256 256 277.5 256 304L256 400C256 426.5 234.5 448 208 448L192 448C139 448 96 405 96 352L96 288C96 164.3 196.3 64 320 64C443.7 64 544 164.3 544 288L544 456.1C544 522.4 490.2 576.1 423.9 576.1L336 576L304 576C277.5 576 256 554.5 256 528C256 501.5 277.5 480 304 480L336 480C362.5 480 384 501.5 384 528L384 528L424 528C463.8 528 496 495.8 496 456L496 435.1C481.9 443.3 465.5 447.9 448 447.9L432 447.9C405.5 447.9 384 426.4 384 399.9L384 303.9C384 277.4 405.5 255.9 432 255.9L448 255.9C458.4 255.9 468.3 257.5 477.7 260.6C464.7 185.3 399.1 127.9 320 127.9z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

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

@@ -0,0 +1,13 @@
+export * from './brain'
+export * from './caret-down'
+export * from './caret-up'
+export * from './circle-check'
+export * from './file-pdf'
+export * from './file-word'
+export * from './hand'
+export * from './head-set'
+export * from './life-ring'
+export * from './link'
+export * from './quote-right'
+export * from './screwdriver-wrench'
+export * from './wand'

package/src/components/system-debug-trace/icons/life-ring.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const LifeRingSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' color={color}>
+      <path
+        d='M431.2 476.5C399.9 498.9 361.5 512 320 512C278.5 512 240.1 498.9 208.8 476.5L266.8 418.5C282.6 427.1 300.8 432 320.1 432C339.4 432 357.5 427.1 373.4 418.5L431.4 476.5zM521.9 477.3C555.7 433.9 575.9 379.3 575.9 320C575.9 260.7 555.8 206.1 522 162.7C531 150.2 529.9 132.6 518.6 121.4C507.3 110.2 489.8 109 477.3 118C433.9 84.2 379.3 64 320 64C260.7 64 206.1 84.2 162.7 118C150.2 109 132.6 110.1 121.4 121.4C110.2 132.7 109 150.2 118 162.7C84.2 206.1 64 260.7 64 320C64 379.3 84.2 433.9 118 477.3C109 489.8 110.1 507.4 121.4 518.6C132.7 529.8 150.2 531 162.7 522C206.1 555.8 260.7 576 320 576C379.3 576 433.9 555.8 477.3 522C489.8 531 507.4 529.9 518.6 518.6C529.8 507.3 531 489.8 522 477.3zM476.4 431.2L418.4 373.2C427 357.4 431.9 339.2 431.9 319.9C431.9 300.6 427 282.5 418.4 266.6L476.4 208.6C498.9 240.1 512 278.5 512 320C512 361.5 498.9 399.9 476.5 431.2zM431.2 163.5L373.2 221.5C357.4 212.9 339.2 208 319.9 208C300.6 208 282.5 212.9 266.6 221.5L208.6 163.5C240.1 141.1 278.5 128 320 128C361.5 128 399.9 141.1 431.2 163.5zM221.5 373.3L163.5 431.3C141.1 399.9 128 361.5 128 320C128 278.5 141.1 240.1 163.5 208.8L221.5 266.8C212.9 282.6 208 300.8 208 320.1C208 339.4 212.9 357.5 221.5 373.4zM272 320C272 293.5 293.5 272 320 272C346.5 272 368 293.5 368 320C368 346.5 346.5 368 320 368C293.5 368 272 346.5 272 320z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

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

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const LinkSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill={color}>
+      <path
+        d='M451.5 160C434.9 160 418.8 164.5 404.7 172.7C388.9 156.7 370.5 143.3 350.2 133.2C378.4 109.2 414.3 96 451.5 96C537.9 96 608 166 608 252.5C608 294 591.5 333.8 562.2 363.1L491.1 434.2C461.8 463.5 422 480 380.5 480C294.1 480 224 410 224 323.5C224 322 224 320.5 224.1 319C224.6 301.3 239.3 287.4 257 287.9C274.7 288.4 288.6 303.1 288.1 320.8C288.1 321.7 288.1 322.6 288.1 323.4C288.1 374.5 329.5 415.9 380.6 415.9C405.1 415.9 428.6 406.2 446 388.8L517.1 317.7C534.4 300.4 544.2 276.8 544.2 252.3C544.2 201.2 502.8 159.8 451.7 159.8zM307.2 237.3C305.3 236.5 303.4 235.4 301.7 234.2C289.1 227.7 274.7 224 259.6 224C235.1 224 211.6 233.7 194.2 251.1L123.1 322.2C105.8 339.5 96 363.1 96 387.6C96 438.7 137.4 480.1 188.5 480.1C205 480.1 221.1 475.7 235.2 467.5C251 483.5 269.4 496.9 289.8 507C261.6 530.9 225.8 544.2 188.5 544.2C102.1 544.2 32 474.2 32 387.7C32 346.2 48.5 306.4 77.8 277.1L148.9 206C178.2 176.7 218 160.2 259.5 160.2C346.1 160.2 416 230.8 416 317.1C416 318.4 416 319.7 416 321C415.6 338.7 400.9 352.6 383.2 352.2C365.5 351.8 351.6 337.1 352 319.4C352 318.6 352 317.9 352 317.1C352 283.4 334 253.8 307.2 237.5z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/components/system-debug-trace/icons/quote-right.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const QuoteRightSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' color={color}>
+      <path
+        d='M544 360C544 426.3 490.3 480 424 480L416 480C398.3 480 384 465.7 384 448C384 430.3 398.3 416 416 416L424 416C454.9 416 480 390.9 480 360L480 352L416 352C380.7 352 352 323.3 352 288L352 224C352 188.7 380.7 160 416 160L480 160C515.3 160 544 188.7 544 224L544 360zM288 360C288 426.3 234.3 480 168 480L160 480C142.3 480 128 465.7 128 448C128 430.3 142.3 416 160 416L168 416C198.9 416 224 390.9 224 360L224 352L160 352C124.7 352 96 323.3 96 288L96 224C96 188.7 124.7 160 160 160L224 160C259.3 160 288 188.7 288 224L288 360z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/components/system-debug-trace/icons/screwdriver-wrench.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const ScrewdriverWrenchSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill={color}>
+      <path
+        d='M102.8 57.3C108.2 51.9 116.6 51.1 123 55.3L241.9 134.5C250.8 140.4 256.1 150.4 256.1 161.1L256.1 210.7L346.9 301.5C380.2 286.5 420.8 292.6 448.1 320L574.2 446.1C592.9 464.8 592.9 495.2 574.2 514L514.1 574.1C495.4 592.8 465 592.8 446.2 574.1L320.1 448C292.7 420.6 286.6 380.1 301.6 346.8L210.8 256L161.2 256C150.5 256 140.5 250.7 134.6 241.8L55.4 122.9C51.2 116.6 52 108.1 57.4 102.7L102.8 57.3zM247.8 360.8C241.5 397.7 250.1 436.7 274 468L179.1 563C151 591.1 105.4 591.1 77.3 563C49.2 534.9 49.2 489.3 77.3 461.2L212.7 325.7L247.9 360.8zM416.1 64C436.2 64 455.5 67.7 473.2 74.5C483.2 78.3 485 91 477.5 98.6L420.8 155.3C417.8 158.3 416.1 162.4 416.1 166.6L416.1 208C416.1 216.8 423.3 224 432.1 224L473.5 224C477.7 224 481.8 222.3 484.8 219.3L541.5 162.6C549.1 155.1 561.8 156.9 565.6 166.9C572.4 184.6 576.1 203.9 576.1 224C576.1 267.2 558.9 306.3 531.1 335.1L482 286C448.9 253 403.5 240.3 360.9 247.6L304.1 190.8L304.1 161.1L303.9 156.1C303.1 143.7 299.5 131.8 293.4 121.2C322.8 86.2 366.8 64 416.1 63.9z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

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

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { COLORS } from '../../../constants'
+import { IconProps } from '../types'
+
+export const WandSvg = ({ color = COLORS.N500 }: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill={color}>
+      <path
+        d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

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

@@ -0,0 +1,46 @@
+import { INPUT, isBrowser } from '@botonic/core'
+import React from 'react'
+
+import { ROLES } from '../../constants'
+import { Message } from '../message'
+import { DebugMessage } from './debug-message'
+
+interface SystemDebugTraceProps {
+  type: string
+  data: Record<string, any> | string
+  id?: string
+}
+
+const serialize = (props: SystemDebugTraceProps) => {
+  const { data } = props
+  // Return the event data as an object, ensuring it's not stringified
+  return typeof data === 'string' ? JSON.parse(data) : data
+}
+
+export const SystemDebugTrace = (props: SystemDebugTraceProps) => {
+  const { data, id, ...otherProps } = props
+
+  // Parse data if it's a string
+  const parsedData = typeof data === 'string' ? JSON.parse(data) : data
+
+  if (isBrowser()) {
+    const eventData = {
+      ...parsedData,
+    }
+
+    return (
+      <Message
+        role={ROLES.SYSTEM_DEBUG_TRACE_MESSAGE}
+        json={serialize(props)}
+        {...otherProps}
+        type={INPUT.SYSTEM_DEBUG_TRACE}
+        id={id}
+      >
+        <DebugMessage debugEvent={eventData} messageId={id} />
+      </Message>
+    )
+  }
+  return null
+}
+
+SystemDebugTrace.serialize = serialize