@sales-bot-llm/sdk 0.2.0

package/src/react/use-sales-bot.tsx

@@ -0,0 +1,182 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { SalesBotClient } from '../core/client'
+import { SalesBotError, isSalesWorkflowTool } from '../core/types'
+import type {
+  SalesBotClientOptions,
+  AskOptions,
+  Message,
+  DeltaEvent,
+  MessageCompleteEvent,
+  TurnStartedEvent,
+  ToolCallStartedEvent,
+} from '../core/types'
+
+export interface UseSalesBotOptions extends SalesBotClientOptions {
+  /** Optional initial conversationId (e.g. restored from URL hash) */
+  conversationId?: string
+  /**
+   * Fires when a sales-workflow tool call starts (e.g. quotes__send_as_pdf).
+   * Convenience over manually filtering tool_call_started events via
+   * isSalesWorkflowTool. Pass-through; receives the same payload.
+   */
+  onSalesToolCall?: (event: ToolCallStartedEvent) => void
+}
+
+export interface UseSalesBotResult {
+  ask: (message: string, opts?: AskOptions) => Promise<void>
+  messages: Message[]
+  isStreaming: boolean
+  error: SalesBotError | null
+  conversationId: string | null
+  visitorToken: string
+  reset: () => void
+}
+
+let msgCounter = 0
+function nextId(): string {
+  return `msg-${++msgCounter}`
+}
+
+export function useSalesBot(opts: UseSalesBotOptions): UseSalesBotResult {
+  // Stable client reference — never re-created on re-render
+  const clientRef = useRef<SalesBotClient | null>(null)
+  if (clientRef.current === null) {
+    clientRef.current = new SalesBotClient(opts)
+    if (opts.conversationId) {
+      clientRef.current.setConversationId(opts.conversationId)
+    }
+  }
+  const client = clientRef.current
+
+  const [messages, setMessages] = useState<Message[]>([])
+  const [isStreaming, setIsStreaming] = useState(false)
+  const [error, setError] = useState<SalesBotError | null>(null)
+  const [conversationId, setConversationId] = useState<string | null>(
+    opts.conversationId ?? null,
+  )
+
+  // Keep latest onSalesToolCall in a ref so the event bus subscription can
+  // call the current handler without resubscribing on every render.
+  const onSalesToolCallRef = useRef<UseSalesBotOptions['onSalesToolCall']>(
+    opts.onSalesToolCall,
+  )
+  useEffect(() => {
+    onSalesToolCallRef.current = opts.onSalesToolCall
+  }, [opts.onSalesToolCall])
+
+  // Subscribe once for the client's lifetime; the ref above means we don't
+  // tear down + re-subscribe whenever a caller passes an inline callback.
+  useEffect(() => {
+    const off = client.on('tool_call_started', (e: ToolCallStartedEvent) => {
+      const cb = onSalesToolCallRef.current
+      if (!cb) return
+      if (isSalesWorkflowTool(e.name)) {
+        cb(e)
+      }
+    })
+    return () => {
+      off()
+    }
+  }, [client])
+
+  const ask = useCallback(
+    async (message: string, askOpts?: AskOptions): Promise<void> => {
+      setError(null)
+      setIsStreaming(true)
+
+      // Append user message immediately
+      const userMsgId = nextId()
+      setMessages((prev) => [
+        ...prev,
+        { id: userMsgId, role: 'user', content: message },
+      ])
+
+      // Create a placeholder for the streaming assistant message
+      const assistantMsgId = nextId()
+      let assistantContent = ''
+      let assistantAdded = false
+
+      try {
+        for await (const event of client.ask(message, askOpts)) {
+          switch (event.event) {
+            case 'turn_started': {
+              const data = event.data as TurnStartedEvent
+              setConversationId(data.conversationId)
+              break
+            }
+            case 'delta': {
+              const data = event.data as DeltaEvent
+              assistantContent += data.content
+              if (!assistantAdded) {
+                assistantAdded = true
+                setMessages((prev) => [
+                  ...prev,
+                  { id: assistantMsgId, role: 'assistant', content: assistantContent, streaming: true },
+                ])
+              } else {
+                setMessages((prev) =>
+                  prev.map((m) =>
+                    m.id === assistantMsgId
+                      ? { ...m, content: assistantContent }
+                      : m,
+                  ),
+                )
+              }
+              break
+            }
+            case 'message_complete': {
+              const data = event.data as MessageCompleteEvent
+              // Replace with the canonical content from the backend
+              setMessages((prev) =>
+                prev.map((m) =>
+                  m.id === assistantMsgId
+                    ? { ...m, content: data.content, streaming: false }
+                    : m,
+                ),
+              )
+              break
+            }
+            case 'done':
+              setIsStreaming(false)
+              break
+            case 'error':
+              // Will be caught below if it throws; otherwise set error state
+              break
+          }
+        }
+      } catch (err) {
+        const sbErr =
+          err instanceof SalesBotError
+            ? err
+            : new SalesBotError({ code: 'internal', message: String(err), retryable: false })
+        setError(sbErr)
+        // Remove the incomplete assistant message if nothing was streamed
+        if (!assistantAdded) {
+          setMessages((prev) => prev.filter((m) => m.id !== assistantMsgId))
+        }
+      } finally {
+        setIsStreaming(false)
+      }
+    },
+    [client],
+  )
+
+  const reset = useCallback(() => {
+    setMessages([])
+    setError(null)
+    setConversationId(null)
+    client.setConversationId(null)
+  }, [client])
+
+  return {
+    ask,
+    messages,
+    isStreaming,
+    error,
+    conversationId,
+    visitorToken: client.getVisitorToken(),
+    reset,
+  }
+}

package/src/vanilla/index.ts

@@ -0,0 +1,38 @@
+/**
+ * Vanilla / IIFE entry point.
+ * Bundled by tsup as an IIFE exposing `window.SalesBot = { init, widget }`.
+ *
+ * Usage (plain HTML):
+ *   <script src="dist/vanilla.global.js"></script>
+ *   <script>
+ *     const client = SalesBot.init({ embedKey: 'pk_live_...' })
+ *     // or
+ *     SalesBot.widget({ embedKey: 'pk_live_...' })
+ *   </script>
+ */
+
+import { SalesBotClient } from '../core/client'
+import { createWidget } from '../widget/widget'
+import type { SalesBotClientOptions, WidgetOptions, WidgetInstance } from '../core/types'
+
+export interface SalesBotGlobal {
+  /** Create a bare SalesBotClient for full programmatic control */
+  init(opts: SalesBotClientOptions): SalesBotClient
+  /** Mount the floating chat widget */
+  widget(opts: WidgetOptions): WidgetInstance
+}
+
+const SalesBot: SalesBotGlobal = {
+  init(opts: SalesBotClientOptions): SalesBotClient {
+    return new SalesBotClient(opts)
+  },
+
+  widget(opts: WidgetOptions): WidgetInstance {
+    return createWidget(opts)
+  },
+}
+
+export default SalesBot
+
+// For IIFE global assignment — tsup globalName handles the window.SalesBot assignment
+export { SalesBot }

package/src/vue/index.ts

@@ -0,0 +1,2 @@
+export { useSalesBot } from './use-sales-bot'
+export type { UseSalesBotOptions, UseSalesBotResult } from './use-sales-bot'

package/src/vue/use-sales-bot.ts

@@ -0,0 +1,152 @@
+import { onUnmounted, ref } from 'vue'
+import type { Ref } from 'vue'
+import { SalesBotClient } from '../core/client'
+import { SalesBotError, isSalesWorkflowTool } from '../core/types'
+import type {
+  SalesBotClientOptions,
+  AskOptions,
+  Message,
+  DeltaEvent,
+  MessageCompleteEvent,
+  TurnStartedEvent,
+  ToolCallStartedEvent,
+  Unsubscribe,
+} from '../core/types'
+
+export interface UseSalesBotOptions extends SalesBotClientOptions {
+  conversationId?: string
+  /**
+   * Fires when a sales-workflow tool call starts (e.g. quotes__send_as_pdf).
+   * Convenience over manually filtering tool_call_started events via
+   * isSalesWorkflowTool. Pass-through; receives the same payload.
+   */
+  onSalesToolCall?: (event: ToolCallStartedEvent) => void
+}
+
+export interface UseSalesBotResult {
+  ask: (message: string, opts?: AskOptions) => Promise<void>
+  messages: Ref<Message[]>
+  isStreaming: Ref<boolean>
+  error: Ref<SalesBotError | null>
+  conversationId: Ref<string | null>
+  visitorToken: string
+  reset: () => void
+}
+
+let msgCounter = 0
+function nextId(): string {
+  return `vmsg-${++msgCounter}`
+}
+
+export function useSalesBot(opts: UseSalesBotOptions): UseSalesBotResult {
+  const client = new SalesBotClient(opts)
+  if (opts.conversationId) {
+    client.setConversationId(opts.conversationId)
+  }
+
+  const messages = ref<Message[]>([])
+  const isStreaming = ref(false)
+  const error = ref<SalesBotError | null>(null)
+  const conversationId = ref<string | null>(opts.conversationId ?? null)
+
+  // Track all unsubscribe functions for cleanup
+  const unsubs: Unsubscribe[] = []
+
+  // Optional sales-workflow tool callback. Subscribe once for the client's
+  // lifetime; we read opts.onSalesToolCall at call time so callers don't have
+  // to memoize the reference.
+  unsubs.push(
+    client.on('tool_call_started', (e: ToolCallStartedEvent) => {
+      const cb = opts.onSalesToolCall
+      if (!cb) return
+      if (isSalesWorkflowTool(e.name)) {
+        cb(e)
+      }
+    }),
+  )
+
+  async function ask(message: string, askOpts?: AskOptions): Promise<void> {
+    error.value = null
+    isStreaming.value = true
+
+    // Append user message immediately
+    const userMsgId = nextId()
+    messages.value = [...messages.value, { id: userMsgId, role: 'user', content: message }]
+
+    const assistantMsgId = nextId()
+    let assistantContent = ''
+    let assistantAdded = false
+
+    try {
+      for await (const event of client.ask(message, askOpts)) {
+        switch (event.event) {
+          case 'turn_started': {
+            const data = event.data as TurnStartedEvent
+            conversationId.value = data.conversationId
+            break
+          }
+          case 'delta': {
+            const data = event.data as DeltaEvent
+            assistantContent += data.content
+            if (!assistantAdded) {
+              assistantAdded = true
+              messages.value = [
+                ...messages.value,
+                { id: assistantMsgId, role: 'assistant', content: assistantContent, streaming: true },
+              ]
+            } else {
+              messages.value = messages.value.map((m) =>
+                m.id === assistantMsgId ? { ...m, content: assistantContent } : m,
+              )
+            }
+            break
+          }
+          case 'message_complete': {
+            const data = event.data as MessageCompleteEvent
+            messages.value = messages.value.map((m) =>
+              m.id === assistantMsgId ? { ...m, content: data.content, streaming: false } : m,
+            )
+            break
+          }
+          case 'done':
+            isStreaming.value = false
+            break
+        }
+      }
+    } catch (err) {
+      const sbErr =
+        err instanceof SalesBotError
+          ? err
+          : new SalesBotError({ code: 'internal', message: String(err), retryable: false })
+      error.value = sbErr
+      if (!assistantAdded) {
+        messages.value = messages.value.filter((m) => m.id !== assistantMsgId)
+      }
+    } finally {
+      isStreaming.value = false
+    }
+  }
+
+  function reset(): void {
+    messages.value = []
+    error.value = null
+    conversationId.value = null
+    client.setConversationId(null)
+  }
+
+  // Clean up event bus subscriptions on unmount
+  onUnmounted(() => {
+    for (const unsub of unsubs) unsub()
+    unsubs.length = 0
+  })
+
+  return {
+    ask,
+    messages,
+    isStreaming,
+    error,
+    conversationId,
+    visitorToken: client.getVisitorToken(),
+    reset,
+  }
+}

package/src/widget/index.ts

@@ -0,0 +1,3 @@
+export { createWidget } from './widget'
+export { renderMarkdown } from './markdown'
+export type { WidgetOptions, WidgetInstance, WidgetTheme } from '../core/types'

package/src/widget/markdown.ts

@@ -0,0 +1,69 @@
+/**
+ * Lightweight markdown renderer for assistant messages.
+ *
+ * Block-level: paragraphs (blank line separators), unordered lists (- or *),
+ * ordered lists (1. 2. …), line breaks inside paragraphs.
+ * Inline: **bold**, *italic*, `code`, [text](https://…).
+ *
+ * Streaming-safe: tolerates partial input (incomplete blocks at end). All
+ * source text is HTML-escaped first, so no XSS even when assistant content
+ * contains `<script>` etc.
+ *
+ * Intentionally small (≈120 lines, no external deps). For richer markdown
+ * (tables, code fences, headings) reach for marked / markdown-it.
+ */
+export function renderMarkdown(text: string): string {
+  // 1. Escape HTML first — every subsequent transform emits trusted tags only.
+  const escaped = text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+
+  // 2. Split into blocks on blank lines (one or more \n\s*\n).
+  const blocks = escaped.split(/\n\s*\n+/)
+  return blocks.map(renderBlock).filter(Boolean).join('')
+}
+
+function renderBlock(raw: string): string {
+  const trimmed = raw.replace(/^\s+|\s+$/g, '')
+  if (!trimmed) return ''
+
+  const lines = trimmed.split('\n')
+
+  // Unordered list: every non-empty line starts with - or * followed by space.
+  if (lines.every((l) => l.trim() === '' || /^[\-*]\s+/.test(l.trim()))) {
+    const items = lines
+      .filter((l) => l.trim())
+      .map((l) => `<li>${inline(l.trim().replace(/^[\-*]\s+/, ''))}</li>`)
+    return `<ul>${items.join('')}</ul>`
+  }
+
+  // Ordered list: every non-empty line starts with N. followed by space.
+  if (lines.every((l) => l.trim() === '' || /^\d+\.\s+/.test(l.trim()))) {
+    const items = lines
+      .filter((l) => l.trim())
+      .map((l) => `<li>${inline(l.trim().replace(/^\d+\.\s+/, ''))}</li>`)
+    return `<ol>${items.join('')}</ol>`
+  }
+
+  // Paragraph: inline-format each line, join with <br> for soft breaks.
+  const html = lines.map(inline).join('<br>')
+  return `<p>${html}</p>`
+}
+
+function inline(s: string): string {
+  return (
+    s
+      // **bold**
+      .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+      // *italic* (not inside bold)
+      .replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, '<em>$1</em>')
+      // `code`
+      .replace(/`([^`]+)`/g, '<code>$1</code>')
+      // [text](https://...) — only https links
+      .replace(
+        /\[([^\]]+)\]\((https:\/\/[^)]+)\)/g,
+        '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>',
+      )
+  )
+}