@seed-ship/mcp-ui-solid 2.3.0 → 2.4.0

package/src/components/ChatPrompt.test.tsx

@@ -0,0 +1,280 @@
+/**
+ * Tests for ChatPrompt component
+ * Phase 2: choice, confirm, form subtypes
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, fireEvent, cleanup } from '@solidjs/testing-library'
+import { ChatPrompt } from './ChatPrompt'
+import type { ChatPromptConfig, ChatPromptResponse } from '../types/chat-bus'
+
+describe('ChatPrompt', () => {
+  beforeEach(() => cleanup())
+
+  // ─── Choice ──────────────────────────────────────────
+
+  describe('type: choice', () => {
+    const choiceConfig: ChatPromptConfig = {
+      type: 'choice',
+      title: 'Select format',
+      config: {
+        options: [
+          { value: 'pdf', label: 'PDF', icon: '📄' },
+          { value: 'csv', label: 'CSV' },
+          { value: 'json', label: 'JSON', description: 'Raw data' },
+        ],
+      },
+    }
+
+    it('renders title and all options', () => {
+      const { getByText } = render(() => (
+        <ChatPrompt config={choiceConfig} onSubmit={() => {}} />
+      ))
+
+      expect(getByText('Select format')).toBeDefined()
+      expect(getByText('PDF')).toBeDefined()
+      expect(getByText('CSV')).toBeDefined()
+      expect(getByText('JSON')).toBeDefined()
+    })
+
+    it('renders option icons and descriptions', () => {
+      const { getByText } = render(() => (
+        <ChatPrompt config={choiceConfig} onSubmit={() => {}} />
+      ))
+
+      expect(getByText('📄')).toBeDefined()
+      expect(getByText('Raw data')).toBeDefined()
+    })
+
+    it('calls onSubmit with value and label when option clicked', () => {
+      const onSubmit = vi.fn()
+      const { getByText } = render(() => (
+        <ChatPrompt config={choiceConfig} onSubmit={onSubmit} />
+      ))
+
+      fireEvent.click(getByText('CSV'))
+
+      expect(onSubmit).toHaveBeenCalledWith({
+        type: 'choice',
+        value: 'csv',
+        label: 'CSV',
+      })
+    })
+
+    it('supports vertical layout', () => {
+      const verticalConfig: ChatPromptConfig = {
+        ...choiceConfig,
+        config: { ...choiceConfig.config as any, layout: 'vertical' },
+      }
+      const { container } = render(() => (
+        <ChatPrompt config={verticalConfig} onSubmit={() => {}} />
+      ))
+
+      const body = container.querySelector('.flex-col')
+      expect(body).not.toBeNull()
+    })
+  })
+
+  // ─── Confirm ─────────────────────────────────────────
+
+  describe('type: confirm', () => {
+    const confirmConfig: ChatPromptConfig = {
+      type: 'confirm',
+      title: 'Delete 47 documents?',
+      config: {
+        message: 'This action cannot be undone.',
+        confirmLabel: 'Delete',
+        cancelLabel: 'Keep',
+        variant: 'danger',
+      },
+    }
+
+    it('renders title, message, and buttons', () => {
+      const { getByText } = render(() => (
+        <ChatPrompt config={confirmConfig} onSubmit={() => {}} />
+      ))
+
+      expect(getByText('Delete 47 documents?')).toBeDefined()
+      expect(getByText('This action cannot be undone.')).toBeDefined()
+      expect(getByText('Delete')).toBeDefined()
+      expect(getByText('Keep')).toBeDefined()
+    })
+
+    it('calls onSubmit with confirmed on confirm click', () => {
+      const onSubmit = vi.fn()
+      const { getByText } = render(() => (
+        <ChatPrompt config={confirmConfig} onSubmit={onSubmit} />
+      ))
+
+      fireEvent.click(getByText('Delete'))
+
+      expect(onSubmit).toHaveBeenCalledWith({
+        type: 'confirm',
+        value: 'confirmed',
+        label: 'Delete',
+      })
+    })
+
+    it('calls onSubmit with dismissed on cancel click', () => {
+      const onSubmit = vi.fn()
+      const onDismiss = vi.fn()
+      const { getByText } = render(() => (
+        <ChatPrompt config={confirmConfig} onSubmit={onSubmit} onDismiss={onDismiss} />
+      ))
+
+      fireEvent.click(getByText('Keep'))
+
+      expect(onSubmit).toHaveBeenCalledWith({
+        type: 'confirm',
+        value: 'cancelled',
+        label: 'Keep',
+        dismissed: true,
+      })
+      expect(onDismiss).toHaveBeenCalled()
+    })
+
+    it('uses default labels when not provided', () => {
+      const simpleConfig: ChatPromptConfig = {
+        type: 'confirm',
+        title: 'Are you sure?',
+        config: {},
+      }
+      const { getByText } = render(() => (
+        <ChatPrompt config={simpleConfig} onSubmit={() => {}} />
+      ))
+
+      expect(getByText('Confirm')).toBeDefined()
+      expect(getByText('Cancel')).toBeDefined()
+    })
+
+    it('uses danger styling for danger variant', () => {
+      const { getByText } = render(() => (
+        <ChatPrompt config={confirmConfig} onSubmit={() => {}} />
+      ))
+
+      const deleteBtn = getByText('Delete')
+      expect(deleteBtn.className).toContain('bg-red-600')
+    })
+  })
+
+  // ─── Form ────────────────────────────────────────────
+
+  describe('type: form', () => {
+    const formConfig: ChatPromptConfig = {
+      type: 'form',
+      title: 'Additional info',
+      config: {
+        fields: [
+          { name: 'title', label: 'Title', type: 'text', required: true, placeholder: 'Enter title' },
+          { name: 'category', label: 'Category', type: 'select', options: [{ label: 'Report', value: 'report' }, { label: 'Invoice', value: 'invoice' }] },
+          { name: 'notes', label: 'Notes', type: 'textarea' },
+        ],
+        submitLabel: 'Send',
+      },
+    }
+
+    it('renders all fields', () => {
+      const { getByText, getByPlaceholderText } = render(() => (
+        <ChatPrompt config={formConfig} onSubmit={() => {}} />
+      ))
+
+      expect(getByText('Title')).toBeDefined()
+      expect(getByText('Category')).toBeDefined()
+      expect(getByText('Notes')).toBeDefined()
+      expect(getByPlaceholderText('Enter title')).toBeDefined()
+    })
+
+    it('submit button is disabled when required fields empty', () => {
+      const { getByText } = render(() => (
+        <ChatPrompt config={formConfig} onSubmit={() => {}} />
+      ))
+
+      const submitBtn = getByText('Send')
+      expect(submitBtn.hasAttribute('disabled')).toBe(true)
+    })
+
+    it('submit button enables when required fields filled', async () => {
+      const { getByText, getByPlaceholderText } = render(() => (
+        <ChatPrompt config={formConfig} onSubmit={() => {}} />
+      ))
+
+      const titleInput = getByPlaceholderText('Enter title')
+      fireEvent.input(titleInput, { target: { value: 'My Report' } })
+
+      const submitBtn = getByText('Send')
+      expect(submitBtn.hasAttribute('disabled')).toBe(false)
+    })
+
+    it('calls onSubmit with form data on submit', async () => {
+      const onSubmit = vi.fn()
+      const { getByText, getByPlaceholderText } = render(() => (
+        <ChatPrompt config={formConfig} onSubmit={onSubmit} />
+      ))
+
+      fireEvent.input(getByPlaceholderText('Enter title'), { target: { value: 'Q4 Report' } })
+      fireEvent.click(getByText('Send'))
+
+      expect(onSubmit).toHaveBeenCalledWith({
+        type: 'form',
+        value: { title: 'Q4 Report' },
+        label: 'title: Q4 Report',
+      })
+    })
+
+    it('shows required indicator on required fields', () => {
+      const { container } = render(() => (
+        <ChatPrompt config={formConfig} onSubmit={() => {}} />
+      ))
+
+      const asterisks = container.querySelectorAll('.text-red-500')
+      expect(asterisks.length).toBeGreaterThan(0)
+    })
+  })
+
+  // ─── Dismiss ─────────────────────────────────────────
+
+  describe('dismiss', () => {
+    it('calls onSubmit with dismissed:true and onDismiss when X clicked', () => {
+      const onSubmit = vi.fn()
+      const onDismiss = vi.fn()
+      const config: ChatPromptConfig = {
+        type: 'choice',
+        title: 'Test',
+        config: { options: [{ value: 'a', label: 'A' }] },
+      }
+
+      const { getByLabelText } = render(() => (
+        <ChatPrompt config={config} onSubmit={onSubmit} onDismiss={onDismiss} />
+      ))
+
+      fireEvent.click(getByLabelText('Dismiss'))
+
+      expect(onDismiss).toHaveBeenCalled()
+      expect(onSubmit).toHaveBeenCalledWith({
+        type: 'choice',
+        value: '',
+        label: '',
+        dismissed: true,
+      })
+    })
+  })
+
+  // ─── Accessibility ───────────────────────────────────
+
+  describe('accessibility', () => {
+    it('has role="dialog" with title as label', () => {
+      const config: ChatPromptConfig = {
+        type: 'choice',
+        title: 'Pick one',
+        config: { options: [{ value: 'a', label: 'A' }] },
+      }
+
+      const { getByRole } = render(() => (
+        <ChatPrompt config={config} onSubmit={() => {}} />
+      ))
+
+      const dialog = getByRole('dialog')
+      expect(dialog.getAttribute('aria-label')).toBe('Pick one')
+    })
+  })
+})

package/src/components/ChatPrompt.tsx

@@ -0,0 +1,263 @@
+/**
+ * ChatPrompt — Ephemeral structured interaction above chat input
+ * v2.4.0: choice, confirm, form subtypes
+ *
+ * @experimental — This component may change without major bump until v2.5.0.
+ *
+ * Renders above the chat input. User responds → Promise resolves → prompt disappears.
+ * Supports AbortSignal for cleanup on navigation (C4).
+ */
+
+import { Component, Show, For, createSignal, onCleanup, Switch, Match } from 'solid-js'
+import type {
+  ChatPromptConfig,
+  ChatPromptResponse,
+  ChoicePromptConfig,
+  ConfirmPromptConfig,
+  FormPromptConfig,
+} from '../types/chat-bus'
+
+export interface ChatPromptProps {
+  /** Prompt configuration */
+  config: ChatPromptConfig
+  /** Called when user responds */
+  onSubmit: (response: ChatPromptResponse) => void
+  /** Called when user dismisses */
+  onDismiss?: () => void
+}
+
+/**
+ * @experimental
+ * Ephemeral interaction component — choice buttons, confirmation dialog, or quick form.
+ * Designed to sit between the chat messages and the input area.
+ *
+ * @example
+ * <ChatPrompt
+ *   config={{ type: 'choice', title: 'Format?', config: { options: [...] } }}
+ *   onSubmit={(r) => bus.events.emit('onChatPromptResponse', { streamKey, response: r })}
+ *   onDismiss={() => setActivePrompt(null)}
+ * />
+ */
+export const ChatPrompt: Component<ChatPromptProps> = (props) => {
+  return (
+    <div
+      class="w-full max-w-2xl mx-auto mb-2 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-lg overflow-hidden"
+      style={{ animation: 'chat-prompt-slide-up 0.2s ease-out' }}
+      role="dialog"
+      aria-label={props.config.title}
+    >
+      {/* Header */}
+      <div class="flex items-center justify-between px-4 py-2.5 border-b border-gray-100 dark:border-gray-700">
+        <p class="text-sm font-medium text-gray-900 dark:text-white">{props.config.title}</p>
+        <button
+          onClick={() => {
+            props.onDismiss?.()
+            props.onSubmit({ type: props.config.type, value: '', label: '', dismissed: true })
+          }}
+          class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+          aria-label="Dismiss"
+        >
+          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Body — type-specific */}
+      <div class="px-4 py-3">
+        <Switch>
+          <Match when={props.config.type === 'choice'}>
+            <ChoiceBody
+              config={props.config.config as ChoicePromptConfig}
+              onSelect={(value, label) => props.onSubmit({ type: 'choice', value, label })}
+            />
+          </Match>
+          <Match when={props.config.type === 'confirm'}>
+            <ConfirmBody
+              config={props.config.config as ConfirmPromptConfig}
+              onConfirm={() => props.onSubmit({ type: 'confirm', value: 'confirmed', label: (props.config.config as ConfirmPromptConfig).confirmLabel || 'Confirmed' })}
+              onCancel={() => {
+                props.onDismiss?.()
+                props.onSubmit({ type: 'confirm', value: 'cancelled', label: (props.config.config as ConfirmPromptConfig).cancelLabel || 'Cancelled', dismissed: true })
+              }}
+            />
+          </Match>
+          <Match when={props.config.type === 'form'}>
+            <FormBody
+              config={props.config.config as FormPromptConfig}
+              onSubmit={(data, label) => props.onSubmit({ type: 'form', value: data, label })}
+            />
+          </Match>
+        </Switch>
+      </div>
+
+      <style>{`
+        @keyframes chat-prompt-slide-up {
+          from { opacity: 0; transform: translateY(8px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      `}</style>
+    </div>
+  )
+}
+
+// ─── Choice ──────────────────────────────────────────────────
+
+const ChoiceBody: Component<{
+  config: ChoicePromptConfig
+  onSelect: (value: string, label: string) => void
+}> = (props) => {
+  const layoutClass = () => {
+    switch (props.config.layout) {
+      case 'vertical': return 'flex flex-col gap-2'
+      case 'grid': return 'grid grid-cols-2 gap-2'
+      default: return 'flex flex-wrap gap-2'
+    }
+  }
+
+  return (
+    <div class={layoutClass()}>
+      <For each={props.config.options}>
+        {(option) => (
+          <button
+            onClick={() => props.onSelect(option.value, option.label)}
+            class="px-4 py-2 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-blue-50 hover:border-blue-300 dark:hover:bg-blue-900/30 dark:hover:border-blue-600 transition-colors text-left"
+          >
+            <Show when={option.icon}>
+              <span class="mr-2">{option.icon}</span>
+            </Show>
+            {option.label}
+            <Show when={option.description}>
+              <span class="block text-xs text-gray-500 dark:text-gray-400 mt-0.5 font-normal">{option.description}</span>
+            </Show>
+          </button>
+        )}
+      </For>
+    </div>
+  )
+}
+
+// ─── Confirm ─────────────────────────────────────────────────
+
+const ConfirmBody: Component<{
+  config: ConfirmPromptConfig
+  onConfirm: () => void
+  onCancel: () => void
+}> = (props) => {
+  const isDanger = () => props.config.variant === 'danger'
+
+  return (
+    <div>
+      <Show when={props.config.message}>
+        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">{props.config.message}</p>
+      </Show>
+      <div class="flex gap-2 justify-end">
+        <button
+          onClick={props.onCancel}
+          class="px-4 py-2 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+        >
+          {props.config.cancelLabel || 'Cancel'}
+        </button>
+        <button
+          onClick={props.onConfirm}
+          class={`px-4 py-2 text-sm font-medium rounded-lg text-white transition-colors ${
+            isDanger()
+              ? 'bg-red-600 hover:bg-red-700'
+              : 'bg-blue-600 hover:bg-blue-700'
+          }`}
+        >
+          {props.config.confirmLabel || 'Confirm'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+// ─── Form ────────────────────────────────────────────────────
+
+const FormBody: Component<{
+  config: FormPromptConfig
+  onSubmit: (data: Record<string, unknown>, label: string) => void
+}> = (props) => {
+  const [formData, setFormData] = createSignal<Record<string, string>>({})
+
+  const updateField = (name: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [name]: value }))
+  }
+
+  const handleSubmit = (e: Event) => {
+    e.preventDefault()
+    const data = formData()
+    // Build a human-readable label from the form values
+    const label = Object.entries(data)
+      .filter(([, v]) => v)
+      .map(([k, v]) => `${k}: ${v}`)
+      .join(', ')
+    props.onSubmit(data, label || 'Form submitted')
+  }
+
+  const isValid = () => {
+    const data = formData()
+    return (props.config.fields || [])
+      .filter((f) => f.required)
+      .every((f) => data[f.name]?.trim())
+  }
+
+  return (
+    <form onSubmit={handleSubmit} class="flex flex-col gap-3">
+      <For each={props.config.fields}>
+        {(field) => (
+          <div>
+            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
+              {field.label}
+              <Show when={field.required}>
+                <span class="text-red-500 ml-0.5">*</span>
+              </Show>
+            </label>
+            <Switch>
+              <Match when={field.type === 'textarea'}>
+                <textarea
+                  value={formData()[field.name] || ''}
+                  onInput={(e) => updateField(field.name, e.currentTarget.value)}
+                  placeholder={field.placeholder}
+                  rows={3}
+                  class="w-full px-3 py-2 text-sm rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 focus:ring-1 focus:ring-blue-400 outline-none transition-colors"
+                />
+              </Match>
+              <Match when={field.type === 'select'}>
+                <select
+                  value={formData()[field.name] || ''}
+                  onChange={(e) => updateField(field.name, e.currentTarget.value)}
+                  class="w-full px-3 py-2 text-sm rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 focus:ring-1 focus:ring-blue-400 outline-none transition-colors"
+                >
+                  <option value="">{field.placeholder || 'Select...'}</option>
+                  <For each={field.options}>
+                    {(opt) => <option value={opt.value}>{opt.label}</option>}
+                  </For>
+                </select>
+              </Match>
+              <Match when={true}>
+                <input
+                  type={field.type === 'number' ? 'number' : 'text'}
+                  value={formData()[field.name] || ''}
+                  onInput={(e) => updateField(field.name, e.currentTarget.value)}
+                  placeholder={field.placeholder}
+                  class="w-full px-3 py-2 text-sm rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 focus:ring-1 focus:ring-blue-400 outline-none transition-colors"
+                />
+              </Match>
+            </Switch>
+          </div>
+        )}
+      </For>
+      <div class="flex justify-end">
+        <button
+          type="submit"
+          disabled={!isValid()}
+          class="px-4 py-2 text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
+        >
+          {props.config.submitLabel || 'Submit'}
+        </button>
+      </div>
+    </form>
+  )
+}

package/src/hooks/useChatBus.tsx

@@ -0,0 +1,81 @@
+/**
+ * useChatBus — SolidJS hook + context provider for the Chat Bus
+ * v2.4.0: Event-driven chat toolkit
+ *
+ * @experimental — This API may change without major bump until v2.5.0.
+ */
+
+import { createContext, useContext, onCleanup, type ParentComponent } from 'solid-js'
+import { createChatBus } from '../services/chat-bus'
+import type { ChatBus } from '../types/chat-bus'
+
+// ─── Context ─────────────────────────────────────────────────
+
+const ChatBusContext = createContext<ChatBus>()
+
+/**
+ * @experimental
+ * Provider that creates and shares a ChatBus with all children.
+ * Cleans up all listeners on unmount.
+ *
+ * @example
+ * <ChatBusProvider>
+ *   <ChatInterfaceStreaming />
+ *   <BriefingPanel />
+ *   <AgentRouter />
+ * </ChatBusProvider>
+ */
+export const ChatBusProvider: ParentComponent<{ bus?: ChatBus }> = (props) => {
+  const bus = props.bus ?? createChatBus()
+
+  onCleanup(() => {
+    bus.events.clear()
+  })
+
+  return (
+    <ChatBusContext.Provider value={bus}>
+      {props.children}
+    </ChatBusContext.Provider>
+  )
+}
+
+// ─── Hook ────────────────────────────────────────────────────
+
+/**
+ * @experimental
+ * Access the ChatBus from any child component.
+ * Must be used within a `<ChatBusProvider>`.
+ *
+ * @example
+ * function BriefingPanel() {
+ *   const bus = useChatBus()
+ *
+ *   bus.events.on('onBriefing', (event) => {
+ *     addBriefing(event.briefing)
+ *   })
+ *
+ *   return <div>...</div>
+ * }
+ *
+ * @example
+ * function AgentRouter() {
+ *   const bus = useChatBus()
+ *
+ *   bus.events.on('onStreamEnd', (event) => {
+ *     if (event.metadata.needs_clarification) {
+ *       bus.commands.exec('showChatPrompt', {
+ *         type: 'choice',
+ *         title: 'Quelle periode ?',
+ *         config: { options: [...] }
+ *       })
+ *     }
+ *   })
+ * }
+ */
+export function useChatBus(): ChatBus {
+  const bus = useContext(ChatBusContext)
+  if (!bus) {
+    throw new Error('useChatBus must be used within a <ChatBusProvider>')
+  }
+  return bus
+}

package/src/index.ts

@@ -38,6 +38,10 @@ export { EditableUIResourceRenderer } from './components/EditableUIResourceRende
 export { ExpandableWrapper } from './components/ExpandableWrapper'
 export { ComponentToolbar } from './components/ComponentToolbar'
 
+// Chat Bus (v2.4.0 — @experimental)
+export { ChatBusProvider, useChatBus } from './hooks/useChatBus'
+export { ChatPrompt } from './components/ChatPrompt'
+
 // Autocomplete Components
 export { GhostText, GhostTextInput } from './components/GhostText'
 export { AutocompleteDropdown } from './components/AutocompleteDropdown'
@@ -54,6 +58,7 @@ export type { ResizeHandleProps as ResizeHandleComponentProps } from './componen
 export type { EditableUIResourceRendererProps } from './components/EditableUIResourceRenderer'
 export type { ExpandableWrapperProps } from './components/ExpandableWrapper'
 export type { ComponentToolbarProps, ToolbarAction, ToolbarIcon } from './components/ComponentToolbar'
+export type { ChatPromptProps } from './components/ChatPrompt'
 export type { GhostTextProps, GhostTextInputProps } from './components/GhostText'
 export type { AutocompleteDropdownProps } from './components/AutocompleteDropdown'
 export type { AutocompleteFormFieldProps, AutocompleteFormFieldParams } from './components/AutocompleteFormField'
@@ -205,4 +210,33 @@ export {
   DEFAULT_IFRAME_DOMAINS,
   TRUSTED_IFRAME_DOMAINS,
   ComponentRegistry,
+  createEventEmitter,
+  createCommandHandler,
+  createChatBus,
 } from './services'
+
+// Chat Bus Types (v2.4.0 — @experimental)
+export type {
+  ChatEventBase,
+  ChatEvents,
+  ChatCommands,
+  ChatBus,
+  ChatEventEmitter,
+  ChatCommandHandler,
+  EventSubscribeOptions,
+  ChatPromptConfig,
+  ChatPromptResponse,
+  ChoicePromptConfig,
+  ConfirmPromptConfig,
+  FormPromptConfig,
+  SelectPromptConfig,
+  SuggestionItem,
+  AgentContext,
+  BriefingEvent,
+  BriefingSection,
+  StreamDoneMetadata,
+  ChatError,
+  Citation,
+  ToolCallEvent,
+  ClarificationEvent,
+} from './types/chat-bus'