@molecule/app-chatbot-tester-react 1.0.0 → 1.0.1

package/README.md

@@ -0,0 +1,216 @@
+<!--
+AUTO-GENERATED — DO NOT EDIT THIS FILE.
+Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
+Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
+To change this document, edit the module-level JSDoc in src/index.ts.
+Generated: 2026-08-04T01:50:16.055Z
+-->
+
+# @molecule/app-chatbot-tester-react
+
+> **Auto-generated, AI-first package reference** for the [molecule.dev](https://molecule.dev) ecosystem.
+> It is written to be read by coding agents as much as by people, and is generated from this
+> package's source — edit `src/index.ts` JSDoc, not this file.
+
+`@molecule/app-chatbot-tester-react` — sandbox UI shell for live-testing
+conversational AI: optional bot picker, message transcript, input row,
+error display.
+
+Stateless about transport. The consumer owns the message array, send
+handler, and bot list; the package handles the layout and composition.
+
+Extracted from the ai-chatbot-builder TestChat page; usable for any
+"preview your bot live" UI.
+
+## Quick Start
+
+```tsx
+import { ChatbotTester, type TesterMessage } from '@molecule/app-chatbot-tester-react'
+
+const [messages, setMessages] = useState<TesterMessage[]>([])
+const handleSend = async (text: string) => {
+  setMessages((prev) => [...prev, { id: Date.now(), role: 'user', content: text }])
+  const reply = await http.post(`/api/conversations/${conversationId}/messages`, { content: text })
+  setMessages((prev) => [...prev, { id: reply.id, role: 'assistant', content: reply.content }])
+}
+
+;<ChatbotTester
+  messages={messages}
+  onSend={handleSend}
+  loading={sending}
+  bots={bots}
+  botId={botId}
+  onBotChange={setBotId}
+  error={error}
+/>
+```
+
+## Type
+
+`feature`
+
+## Installation
+
+```bash
+npm install @molecule/app-chatbot-tester-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
+npm install -D @types/react
+```
+
+## API
+
+### Interfaces
+
+#### `ChatbotTesterInputProps`
+
+Props for {@link ChatbotTesterInput}.
+
+```typescript
+interface ChatbotTesterInputProps {
+  value: string
+  onChange: (next: string) => void
+  onSend: () => void
+  loading?: boolean
+  placeholder?: string
+  sendLabel?: string
+}
+```
+
+#### `ChatbotTesterMessagesProps`
+
+Props for {@link ChatbotTesterMessages}.
+
+```typescript
+interface ChatbotTesterMessagesProps {
+  messages: TesterMessage[]
+  loading?: boolean
+  emptyState?: React.ReactNode
+}
+```
+
+#### `ChatbotTesterProps`
+
+Props for {@link ChatbotTester}.
+
+```typescript
+interface ChatbotTesterProps {
+  messages: TesterMessage[]
+  loading?: boolean
+  /** When provided, send invokes this with the composer text. */
+  onSend: (text: string) => void | Promise<void>
+  /** Optional bot list — when length >= 2, a picker is rendered. */
+  bots?: TesterBotOption[]
+  botId?: string
+  onBotChange?: (id: string) => void
+  /** Last error message — rendered in a `role="alert"` paragraph. */
+  error?: ReactNode
+  /** Empty-state slot when there are no messages yet. */
+  emptyState?: ReactNode
+  botPickerLabel?: ReactNode
+  inputPlaceholder?: string
+  sendLabel?: string
+  className?: string
+}
+```
+
+#### `TesterBotOption`
+
+A selectable bot/agent option shown in the chatbot tester sandbox UI.
+
+```typescript
+interface TesterBotOption {
+  id: string
+  name?: string
+}
+```
+
+#### `TesterMessage`
+
+A single chat message displayed in the chatbot tester sandbox UI.
+
+```typescript
+interface TesterMessage {
+  id: string | number
+  role: 'user' | 'assistant' | 'system'
+  content: string
+  timestamp?: string
+}
+```
+
+### Functions
+
+#### `ChatbotTester(props)`
+
+Full chatbot tester sandbox.
+
+```typescript
+function ChatbotTester({
+  messages,
+  loading,
+  onSend,
+  bots,
+  botId,
+  onBotChange,
+  error,
+  emptyState,
+  botPickerLabel = 'Test bot',
+  inputPlaceholder,
+  sendLabel,
+  className,
+}: ChatbotTesterProps): JSX.Element
+```
+
+#### `ChatbotTesterInput(props)`
+
+Message composer + send button.
+
+```typescript
+function ChatbotTesterInput({
+  value,
+  onChange,
+  onSend,
+  loading,
+  placeholder = 'Type a message…',
+  sendLabel = 'Send',
+}: ChatbotTesterInputProps): JSX.Element
+```
+
+#### `ChatbotTesterMessages(props)`
+
+Scrollable transcript pane.
+
+```typescript
+function ChatbotTesterMessages({
+  messages,
+  loading,
+  emptyState,
+}: ChatbotTesterMessagesProps): JSX.Element
+```
+
+## Injection Notes
+
+### Requirements
+
+Peer dependencies:
+
+- `@molecule/app-react` ^1.0.1
+- `@molecule/app-ui` ^1.0.1
+- `@molecule/app-ui-react` ^1.0.1
+- `react` ^18.0.0 || ^19.0.0
+
+### Runtime Dependencies
+
+- `@molecule/app-react`
+- `@molecule/app-ui`
+- `@molecule/app-ui-react`
+- `react`
+
+Built-in labels (`botPickerLabel` default "Test bot", `inputPlaceholder`
+default "Type a message…", `sendLabel` default "Send") are hardcoded
+English — there is no companion locale bond. For localized apps, pass all
+three props with `t('key', {}, { defaultValue: '…' })` values.
+Enter sends; Shift+Enter inserts a newline. The bot picker renders only
+when `bots` has 2+ entries. Styling includes Tailwind classes with
+Material-3 tokens (`bg-surface-container-high`, `border-outline-variant`,
+`text-on-primary`, …) — the app's Tailwind theme must define those tokens
+(the default molecule Tailwind ClassMap bond does); with a non-Tailwind
+ClassMap the bubbles/borders lose their styling.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@molecule/app-chatbot-tester-react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Sandbox UI for live-testing chatbots: bot picker, message thread, input area, error region. Extracted from ai-chatbot-builder TestChat.",
   "type": "module",
   "main": "dist/index.js",
@@ -17,7 +17,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "keywords": [
     "molecule",
@@ -28,16 +29,21 @@
     "react"
   ],
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/molecule-dev/molecule.git",
+    "directory": "packages/app/features/chatbot-tester-react"
+  },
   "peerDependencies": {
-    "@molecule/app-react": "^1.0.0",
-    "@molecule/app-ui": "^1.0.0",
-    "@molecule/app-ui-react": "^1.0.0",
+    "@molecule/app-react": "^1.0.1",
+    "@molecule/app-ui": "^1.0.1",
+    "@molecule/app-ui-react": "^1.0.1",
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@molecule/app-react": "1.0.0",
-    "@molecule/app-ui": "1.0.0",
-    "@molecule/app-ui-react": "1.0.0",
+    "@molecule/app-react": "1.0.1",
+    "@molecule/app-ui": "1.0.1",
+    "@molecule/app-ui-react": "1.0.1",
     "@types/node": "26.1.2",
     "@types/react": "19.2.17",
     "react": "19.2.8",