@botonic/react 0.44.1-alpha.3 → 0.45.0-alpha.0

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

@@ -1,5 +1,6 @@
 import { EventAction } from '@botonic/core'
-import React, { useContext, useEffect, useRef, useState } from 'react'
+import type React from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 
 import { WebchatContext } from '../../webchat/context'
 import {
@@ -28,7 +29,7 @@ import {
   StyledDebugIcon,
   StyledDebugTitle,
 } from './styles'
-import { DebugEvent, DebugEventConfig } from './types'
+import type { DebugEvent, DebugEventConfig } from './types'
 
 const getEventConfig = (
   debugEvent: DebugEvent

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

@@ -1,5 +1,5 @@
 import { EventAction } from '@botonic/core'
-import React, { useContext, useMemo } from 'react'
+import { useContext, useMemo } from 'react'
 
 import { WebchatContext } from '../../../webchat/context'
 import { useKnowledgeBaseInfo } from '../hooks/use-knowledge-base-info'
@@ -10,10 +10,10 @@ import {
   StyledDebugLabel,
   StyledDebugValue,
 } from '../styles'
-import { DebugEventConfig } from '../types'
+import type { DebugEventConfig } from '../types'
 import { GuardrailList, SourcesSection } from './components'
 import { LABELS } from './constants'
-import { ChunkIdsGroupedBySourceData } from './knowledge-bases-types'
+import type { ChunkIdsGroupedBySourceData } from './knowledge-bases-types'
 
 interface ToolExecuted {
   tool_name: string

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

@@ -1,8 +1,7 @@
 import { EventAction } from '@botonic/core'
-import React from 'react'
 
 import { CodeSvg } from '../icons/code'
-import { DebugEventConfig } from '../types'
+import type { DebugEventConfig } from '../types'
 
 export interface BotActionDebugEvent {
   action: EventAction.BotAction

package/src/components/system-debug-trace/events/components/guardrail-item.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 import { HandSvg } from '../../icons'
 import {

package/src/components/system-debug-trace/events/components/sources-section.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 import {
   StyledDebugDetail,
@@ -9,7 +9,7 @@ import {
   StyledUrlSourceValue,
 } from '../../styles'
 import { LABELS } from '../constants'
-import { HubtypeChunk, HubtypeSource } from '../knowledge-bases-types'
+import type { HubtypeChunk, HubtypeSource } from '../knowledge-bases-types'
 
 interface SourcesSectionProps {
   sources: HubtypeSource[]
@@ -26,7 +26,9 @@ export const SourcesSection = ({
   onSeeChunks,
   label = LABELS.SOURCES,
 }: SourcesSectionProps) => {
-  if (sources.length === 0) return null
+  if (sources.length === 0) {
+    return null
+  }
 
   return (
     <StyledDebugDetail>

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

@@ -1,8 +1,7 @@
 import { EventAction } from '@botonic/core'
-import React from 'react'
 
 import { SplitSvg } from '../icons/split'
-import { DebugEventConfig } from '../types'
+import type { DebugEventConfig } from '../types'
 
 export interface ConditionalChannelDebugEvent {
   action: EventAction.ConditionalChannel

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

@@ -1,8 +1,7 @@
 import { EventAction } from '@botonic/core'
-import React from 'react'
 
 import { SplitSvg } from '../icons/split'
-import { DebugEventConfig } from '../types'
+import type { DebugEventConfig } from '../types'
 
 export interface ConditionalCountryDebugEvent {
   action: EventAction.ConditionalCountry

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

@@ -1,8 +1,7 @@
 import { EventAction } from '@botonic/core'
-import React from 'react'
 
 import { SplitSvg } from '../icons/split'
-import { DebugEventConfig } from '../types'
+import type { DebugEventConfig } from '../types'
 
 export interface ConditionalCustomDebugEvent {
   action: EventAction.ConditionalCustom

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

@@ -1,5 +1,4 @@
 import { EventAction } from '@botonic/core'
-import React from 'react'
 
 import { SplitSvg } from '../icons/split'
 import {
@@ -7,7 +6,7 @@ import {
   StyledDebugLabel,
   StyledDebugValue,
 } from '../styles'
-import { DebugEventConfig } from '../types'
+import type { DebugEventConfig } from '../types'
 import { LABELS } from './constants'
 
 export interface ConditionalQueueStatusDebugEvent {

package/src/components/system-debug-trace/events/fallback.tsx

@@ -1,8 +1,7 @@
 import { EventAction } from '@botonic/core'
-import React from 'react'
 
 import { LifeRingSvg } from '../icons/life-ring'
-import { DebugEventConfig } from '../types'
+import type { DebugEventConfig } from '../types'
 
 export interface FallbackDebugEvent {
   action: EventAction.Fallback

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

@@ -1,5 +1,5 @@
 import { EventAction } from '@botonic/core'
-import React, { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 
 import { WebchatContext } from '../../../webchat/context'
 import { HeadSetSvg } from '../icons'
@@ -8,7 +8,7 @@ import {
   StyledDebugLabel,
   StyledDebugValue,
 } from '../styles'
-import { DebugEventConfig } from '../types'
+import type { DebugEventConfig } from '../types'
 import { LABELS } from './constants'
 
 export interface HandoffSuccessDebugEvent {

package/src/components/system-debug-trace/events/keyword.tsx

@@ -1,8 +1,7 @@
 import { EventAction } from '@botonic/core'
-import React from 'react'
 
 import { QuoteRightSvg } from '../icons/quote-right'
-import { DebugEventConfig } from '../types'
+import type { DebugEventConfig } from '../types'
 
 export interface KeywordDebugEvent {
   action: EventAction.Keyword

package/src/components/system-debug-trace/events/knowledge-base.tsx

@@ -1,5 +1,5 @@
 import { EventAction } from '@botonic/core'
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 
 import { WebchatContext } from '../../../webchat/context'
 import { useKnowledgeBaseInfo } from '../hooks/use-knowledge-base-info'
@@ -11,10 +11,10 @@ import {
   StyledGuardrailItem,
   StyledGuardrailLabel,
 } from '../styles'
-import { DebugEventConfig } from '../types'
+import type { DebugEventConfig } from '../types'
 import { SourcesSection } from './components'
 import { LABELS } from './constants'
-import { ChunkIdsGroupedBySourceData } from './knowledge-bases-types'
+import type { ChunkIdsGroupedBySourceData } from './knowledge-bases-types'
 
 export interface KnowledgeBaseDebugEvent {
   action: EventAction.Knowledgebase

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

@@ -1,8 +1,7 @@
 import { EventAction } from '@botonic/core'
-import React from 'react'
 
 import { ArrowProgressSvg } from '../icons/arrow-progress'
-import { DebugEventConfig } from '../types'
+import type { DebugEventConfig } from '../types'
 
 export interface RedirectFlowDebugEvent {
   action: EventAction.RedirectFlow

package/src/components/system-debug-trace/events/smart-intent.tsx

@@ -1,8 +1,7 @@
 import { EventAction } from '@botonic/core'
-import React from 'react'
 
 import { BrainSvg } from '../icons'
-import { DebugEventConfig } from '../types'
+import type { DebugEventConfig } from '../types'
 
 export interface SmartIntentDebugEvent {
   action: EventAction.IntentSmart

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

@@ -1,8 +1,7 @@
 import { EventAction } from '@botonic/core'
-import React from 'react'
 
 import { WindowRestoreSvg } from '../icons/window-restore'
-import { DebugEventConfig } from '../types'
+import type { DebugEventConfig } from '../types'
 
 export interface WebviewActionTriggeredDebugEvent {
   action: EventAction.WebviewActionTriggered

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

@@ -1,9 +1,12 @@
 import { KnowledgebaseFailReason } from '@botonic/core'
-import React, { useContext, useEffect, useMemo, useState } from 'react'
+import { useContext, useEffect, useMemo, useState } from 'react'
 
-import { ChunkIdsGroupedBySourceData } from '../../../index-types'
+import type { ChunkIdsGroupedBySourceData } from '../../../index-types'
 import { WebchatContext } from '../../../webchat/context'
-import { HubtypeChunk, HubtypeSource } from '../events/knowledge-bases-types'
+import type {
+  HubtypeChunk,
+  HubtypeSource,
+} from '../events/knowledge-bases-types'
 import { FilePdfSvg, FileWordSvg, LinkSvg } from '../icons'
 
 interface UseKnowledgeBaseInfoParams {
@@ -74,7 +77,9 @@ export const useKnowledgeBaseInfo = ({
   }
 
   const fetchChunksWithSources = async () => {
-    if (chunkIds.length === 0 || !previewUtils) return []
+    if (chunkIds.length === 0 || !previewUtils) {
+      return []
+    }
     setIsLoading(true)
     try {
       const fetchedChunksWithSources =
@@ -155,7 +160,6 @@ export const useKnowledgeBaseInfo = ({
     }
 
     fetchData()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return {

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

@@ -1,4 +1,4 @@
-import { RefObject, useEffect } from 'react'
+import { type RefObject, useEffect } from 'react'
 
 interface UseLastLabelPositionProps {
   wrapperRef: RefObject<HTMLDivElement>
@@ -28,7 +28,9 @@ export function useLastLabelPosition({
 
     const measure = () => {
       const wrapper = wrapperRef.current
-      if (!wrapper) return
+      if (!wrapper) {
+        return
+      }
 
       // Check if visible
       const parent = wrapper.parentElement
@@ -41,7 +43,9 @@ export function useLastLabelPosition({
       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 (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)
@@ -60,7 +64,9 @@ export function useLastLabelPosition({
         return false
       })
 
-      if (allLabels.length === 0) return
+      if (allLabels.length === 0) {
+        return
+      }
 
       // Get the last label
       const lastLabel = allLabels[allLabels.length - 1]

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

@@ -1,10 +1,9 @@
-import React from 'react'
-
 import { COLORS } from '../../../constants'
-import { IconProps } from '../types'
+import type { IconProps } from '../types'
 
 export const ArrowProgressSvg = ({ color = COLORS.N500 }: IconProps) => {
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
     <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'

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

@@ -1,10 +1,9 @@
-import React from 'react'
-
 import { COLORS } from '../../../constants'
-import { IconProps } from '../types'
+import type { IconProps } from '../types'
 
 export const BrainSvg = ({ color = COLORS.N500 }: IconProps) => {
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
     <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'

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

@@ -1,10 +1,9 @@
-import React from 'react'
-
 import { COLORS } from '../../../constants'
-import { IconProps } from '../types'
+import type { IconProps } from '../types'
 
 export const CaretDownSvg = ({ color = COLORS.N500 }: IconProps) => {
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
     <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'

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

@@ -1,10 +1,9 @@
-import React from 'react'
-
 import { COLORS } from '../../../constants'
-import { IconProps } from '../types'
+import type { IconProps } from '../types'
 
 export const CaretUpSvg = ({ color = COLORS.N500 }: IconProps) => {
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
     <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'

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

@@ -1,7 +1,6 @@
-import React from 'react'
-
+/** biome-ignore-all lint/a11y/noSvgWithoutTitle: This is a SVG icon */
 import { COLORS } from '../../../constants'
-import { IconProps } from '../types'
+import type { IconProps } from '../types'
 
 export const CircleCheckSvg = ({ color = COLORS.N500 }: IconProps) => {
   return (

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

@@ -1,7 +1,6 @@
-import React from 'react'
-
+/** biome-ignore-all lint/a11y/noSvgWithoutTitle: This is a SVG icon */
 import { COLORS } from '../../../constants'
-import { IconProps } from '../types'
+import type { IconProps } from '../types'
 
 export const CodeSvg = ({ color = COLORS.N500 }: IconProps) => {
   return (

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

@@ -1,10 +1,9 @@
-import React from 'react'
-
 import { COLORS } from '../../../constants'
-import { IconProps } from '../types'
+import type { IconProps } from '../types'
 
 export const FilePdfSvg = ({ color = COLORS.N500 }: IconProps) => {
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
     <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'

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

@@ -1,10 +1,9 @@
-import React from 'react'
-
 import { COLORS } from '../../../constants'
-import { IconProps } from '../types'
+import type { IconProps } from '../types'
 
 export const FileWordSvg = ({ color = COLORS.N500 }: IconProps) => {
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
     <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'

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

@@ -1,10 +1,9 @@
-import React from 'react'
-
 import { COLORS } from '../../../constants'
-import { IconProps } from '../types'
+import type { IconProps } from '../types'
 
 export const HandSvg = ({ color = COLORS.N500 }: IconProps) => {
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
     <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'

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

@@ -1,10 +1,9 @@
-import React from 'react'
-
 import { COLORS } from '../../../constants'
-import { IconProps } from '../types'
+import type { IconProps } from '../types'
 
 export const HeadSetSvg = ({ color = COLORS.N500 }: IconProps) => {
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
     <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'

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

@@ -1,10 +1,9 @@
-import React from 'react'
-
 import { COLORS } from '../../../constants'
-import { IconProps } from '../types'
+import type { IconProps } from '../types'
 
 export const LifeRingSvg = ({ color = COLORS.N500 }: IconProps) => {
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
     <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'

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

@@ -1,10 +1,9 @@
-import React from 'react'
-
 import { COLORS } from '../../../constants'
-import { IconProps } from '../types'
+import type { IconProps } from '../types'
 
 export const LinkSvg = ({ color = COLORS.N500 }: IconProps) => {
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
     <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'

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

@@ -1,10 +1,9 @@
-import React from 'react'
-
 import { COLORS } from '../../../constants'
-import { IconProps } from '../types'
+import type { IconProps } from '../types'
 
 export const QuoteRightSvg = ({ color = COLORS.N500 }: IconProps) => {
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
     <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'

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

@@ -1,10 +1,9 @@
-import React from 'react'
-
 import { COLORS } from '../../../constants'
-import { IconProps } from '../types'
+import type { IconProps } from '../types'
 
 export const ScrewdriverWrenchSvg = ({ color = COLORS.N500 }: IconProps) => {
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
     <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'

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

@@ -1,10 +1,9 @@
-import React from 'react'
-
 import { COLORS } from '../../../constants'
-import { IconProps } from '../types'
+import type { IconProps } from '../types'
 
 export const SplitSvg = ({ color = COLORS.N500 }: IconProps) => {
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
     <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'

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

@@ -1,10 +1,9 @@
-import React from 'react'
-
 import { COLORS } from '../../../constants'
-import { IconProps } from '../types'
+import type { IconProps } from '../types'
 
 export const WandSvg = ({ color = COLORS.N500 }: IconProps) => {
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
     <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'

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

@@ -1,10 +1,9 @@
-import React from 'react'
-
 import { COLORS } from '../../../constants'
-import { IconProps } from '../types'
+import type { IconProps } from '../types'
 
 export const WindowRestoreSvg = ({ color = COLORS.N500 }: IconProps) => {
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: This is a SVG icon
     <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'

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

@@ -1,5 +1,4 @@
 import { INPUT, isBrowser } from '@botonic/core'
-import React from 'react'
 
 import { ROLES } from '../../constants'
 import { Message } from '../message'

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

@@ -1,6 +1,6 @@
-import React from 'react'
+import type React from 'react'
 
-import {
+import type {
   AiAgentDebugEvent,
   BotActionDebugEvent,
   ConditionalChannelDebugEvent,

package/src/components/text.tsx

@@ -1,9 +1,9 @@
 import { INPUT } from '@botonic/core'
-import React, { Children } from 'react'
+import { Children } from 'react'
 
 import { mapObjectNonBooleanValues } from '../util/react'
 import { COMPONENT_DISPLAY_NAMES } from './constants'
-import { TextProps } from './index-types'
+import type { TextProps } from './index-types'
 import { serializeMarkdown, toMarkdownChildren } from './markdown'
 import { Message } from './message'
 
@@ -12,18 +12,22 @@ const serializeText = children => {
   const text = children
     .filter(e => !e.type)
     .map(e => {
-      if (Array.isArray(e)) return serializeText(e)
-      else return String(e)
+      if (Array.isArray(e)) {
+        return serializeText(e)
+      } else {
+        return String(e)
+      }
     })
     .join('')
   return text
 }
 
 const serialize = (textProps: TextProps) => {
-  if (!textProps.markdown)
+  if (!textProps.markdown) {
     return {
       text: serializeText(textProps.children),
     }
+  }
   return { text: serializeMarkdown(textProps.children) }
 }
 
@@ -41,12 +45,13 @@ export const Text = (props: TextProps) => {
     ...{ children: Children.toArray(props.children) },
   })
 
-  if (!textProps.markdown)
+  if (!textProps.markdown) {
     return (
       <Message json={serialize(textProps)} {...textProps} type={INPUT.TEXT}>
         {textProps.children}
       </Message>
     )
+  }
   return (
     <Message json={serialize(textProps)} {...textProps} type={INPUT.TEXT}>
       {toMarkdownChildren(textProps.children)}

package/src/components/title.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 import styled from 'styled-components'
 
 import { renderComponent } from '../util/react'