@molecule/app-chatbot-tester-react 1.0.0

package/LICENSE

@@ -0,0 +1,115 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work.
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship.
+
+      "Contribution" shall mean any work of authorship, including the
+      original version of the Work and any modifications or additions
+      to that Work, that is intentionally submitted to the Licensor for
+      inclusion in the Work by the copyright owner or by an individual or
+      Legal Entity authorized to submit on behalf of the copyright owner.
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      patent license to make, have made, use, offer to sell, sell, import,
+      and otherwise transfer the Work.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file.
+
+   5. Submission of Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND.
+
+   8. Limitation of Liability. In no event and under no legal theory shall
+      any Contributor be liable to You for damages.
+
+   9. Accepting Warranty or Additional Liability.
+
+   Copyright 2026 Molecule Dev, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/dist/ChatbotTester.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Composed sandbox UI: optional bot picker + messages thread + input
+ * row + error region.
+ *
+ * Stateless about transport: the consumer owns the message array, the
+ * send handler, and (optionally) the bot list + current bot id. Pass
+ * the side-effects (creating a test conversation, sending messages
+ * upstream, etc.) as `onSend` / `onBotChange`.
+ *
+ * @module
+ */
+import { type JSX, type ReactNode } from 'react';
+import type { TesterBotOption, TesterMessage } from './types.js';
+/** Props for {@link ChatbotTester}. */
+export 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;
+}
+/** Full chatbot tester sandbox. */
+export declare function ChatbotTester({ messages, loading, onSend, bots, botId, onBotChange, error, emptyState, botPickerLabel, inputPlaceholder, sendLabel, className, }: ChatbotTesterProps): JSX.Element;
+export default ChatbotTester;
+//# sourceMappingURL=ChatbotTester.d.ts.map

package/dist/ChatbotTester.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatbotTester.d.ts","sourceRoot":"","sources":["../src/ChatbotTester.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAM1D,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAEhE,uCAAuC;AACvC,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,aAAa,EAAE,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+DAA+D;IAC/D,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC9C,kEAAkE;IAClE,IAAI,CAAC,EAAE,eAAe,EAAE,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uDAAuD;IACvD,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,mCAAmC;AACnC,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,OAAO,EACP,MAAM,EACN,IAAI,EACJ,KAAK,EACL,WAAW,EACX,KAAK,EACL,UAAU,EACV,cAA2B,EAC3B,gBAAgB,EAChB,SAAS,EACT,SAAS,GACV,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA+DlC;AAED,eAAe,aAAa,CAAA"}

package/dist/ChatbotTester.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Composed sandbox UI: optional bot picker + messages thread + input
+ * row + error region.
+ *
+ * Stateless about transport: the consumer owns the message array, the
+ * send handler, and (optionally) the bot list + current bot id. Pass
+ * the side-effects (creating a test conversation, sending messages
+ * upstream, etc.) as `onSend` / `onBotChange`.
+ *
+ * @module
+ */
+import { useState } from 'react';
+import { getClassMap } from '@molecule/app-ui';
+import { ChatbotTesterInput } from './ChatbotTesterInput.js';
+import { ChatbotTesterMessages } from './ChatbotTesterMessages.js';
+/** Full chatbot tester sandbox. */
+export function ChatbotTester({ messages, loading, onSend, bots, botId, onBotChange, error, emptyState, botPickerLabel = 'Test bot', inputPlaceholder, sendLabel, className, }) {
+    const cm = getClassMap();
+    const [input, setInput] = useState('');
+    const handleSend = async () => {
+        const text = input.trim();
+        if (!text)
+            return;
+        setInput('');
+        await onSend(text);
+    };
+    return (_jsxs("div", { className: cm.cn(cm.flex({ direction: 'col' }), cm.flex1, 'min-w-0', className), children: [bots && bots.length > 1 ? (_jsxs("div", { className: cm.cn(cm.flex({ align: 'center' }), cm.sp('px', 6), cm.sp('py', 3), 'gap-3 border-b border-outline-variant/20'), children: [_jsx("label", { htmlFor: "chatbot-tester-bot-select", className: cm.cn(cm.textSize('xs'), cm.fontWeight('bold')), children: botPickerLabel }), _jsx("select", { id: "chatbot-tester-bot-select", value: botId ?? '', onChange: (e) => onBotChange?.(e.target.value), className: cm.cn(cm.textSize('sm'), 'bg-surface-container-high border-none rounded-xl px-3 py-2 focus:ring-2 focus:ring-primary/40'), children: bots.map((b) => (_jsx("option", { value: b.id, children: b.name || b.id }, b.id))) })] })) : null, _jsx(ChatbotTesterMessages, { messages: messages, loading: loading, emptyState: emptyState }), error ? (_jsx("p", { role: "alert", className: cm.cn(cm.textSize('sm'), cm.sp('px', 6), cm.sp('py', 2), 'text-error'), children: error })) : null, _jsx(ChatbotTesterInput, { value: input, onChange: setInput, onSend: handleSend, loading: loading, placeholder: inputPlaceholder, sendLabel: sendLabel })] }));
+}
+export default ChatbotTester;

package/dist/ChatbotTesterInput.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Composer input row with send button. Enter sends; shift+enter inserts
+ * a newline. Disables the send action while a reply is in flight.
+ *
+ * @module
+ */
+import type { JSX } from 'react';
+/** Props for {@link ChatbotTesterInput}. */
+export interface ChatbotTesterInputProps {
+    value: string;
+    onChange: (next: string) => void;
+    onSend: () => void;
+    loading?: boolean;
+    placeholder?: string;
+    sendLabel?: string;
+}
+/** Message composer + send button. */
+export declare function ChatbotTesterInput({ value, onChange, onSend, loading, placeholder, sendLabel, }: ChatbotTesterInputProps): JSX.Element;
+export default ChatbotTesterInput;
+//# sourceMappingURL=ChatbotTesterInput.d.ts.map

package/dist/ChatbotTesterInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatbotTesterInput.d.ts","sourceRoot":"","sources":["../src/ChatbotTesterInput.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAIhC,4CAA4C;AAC5C,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,sCAAsC;AACtC,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,WAA+B,EAC/B,SAAkB,GACnB,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CA+CvC;AAED,eAAe,kBAAkB,CAAA"}

package/dist/ChatbotTesterInput.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassMap } from '@molecule/app-ui';
+/** Message composer + send button. */
+export function ChatbotTesterInput({ value, onChange, onSend, loading, placeholder = 'Type a message…', sendLabel = 'Send', }) {
+    const cm = getClassMap();
+    return (_jsxs("div", { className: cm.cn(cm.flex({ align: 'end', gap: 2 }), cm.sp('px', 6), cm.sp('py', 4), 'border-t border-outline-variant/20'), children: [_jsx("textarea", { value: value, onChange: (e) => onChange(e.target.value), onKeyDown: (e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault();
+                        onSend();
+                    }
+                }, rows: 1, placeholder: placeholder, disabled: loading, className: cm.cn(cm.flex1, cm.sp('px', 4), cm.sp('py', 2), cm.textSize('sm'), cm.surface, 'border border-outline-variant rounded-xl focus:ring-2 focus:ring-primary/40 resize-none disabled:opacity-60') }), _jsx("button", { onClick: onSend, disabled: loading || !value.trim(), className: cm.cn(cm.sp('px', 4), cm.sp('py', 2), cm.textSize('sm'), cm.fontWeight('semibold'), 'bg-primary text-on-primary rounded-xl disabled:opacity-50'), children: sendLabel })] }));
+}
+export default ChatbotTesterInput;

package/dist/ChatbotTesterMessages.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Scrollable message list for the chatbot sandbox. Each row is a
+ * left-aligned (assistant) or right-aligned (user) bubble.
+ *
+ * @module
+ */
+import { type JSX } from 'react';
+import type { TesterMessage } from './types.js';
+/** Props for {@link ChatbotTesterMessages}. */
+export interface ChatbotTesterMessagesProps {
+    messages: TesterMessage[];
+    loading?: boolean;
+    emptyState?: React.ReactNode;
+}
+/** Scrollable transcript pane. */
+export declare function ChatbotTesterMessages({ messages, loading, emptyState, }: ChatbotTesterMessagesProps): JSX.Element;
+export default ChatbotTesterMessages;
+//# sourceMappingURL=ChatbotTesterMessages.d.ts.map

package/dist/ChatbotTesterMessages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatbotTesterMessages.d.ts","sourceRoot":"","sources":["../src/ChatbotTesterMessages.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAqB,MAAM,OAAO,CAAA;AAInD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,+CAA+C;AAC/C,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,aAAa,EAAE,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B;AAED,kCAAkC;AAClC,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,0BAA0B,GAAG,GAAG,CAAC,OAAO,CAyD1C;AAED,eAAe,qBAAqB,CAAA"}

package/dist/ChatbotTesterMessages.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Scrollable message list for the chatbot sandbox. Each row is a
+ * left-aligned (assistant) or right-aligned (user) bubble.
+ *
+ * @module
+ */
+import { useEffect, useRef } from 'react';
+import { getClassMap } from '@molecule/app-ui';
+/** Scrollable transcript pane. */
+export function ChatbotTesterMessages({ messages, loading, emptyState, }) {
+    const cm = getClassMap();
+    const endRef = useRef(null);
+    useEffect(() => {
+        endRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    }, [messages.length, loading]);
+    if (!loading && messages.length === 0 && emptyState) {
+        return (_jsx("div", { className: cm.cn(cm.flex1, cm.flex({ align: 'center', justify: 'center' })), children: emptyState }));
+    }
+    return (_jsx("div", { className: cm.cn(cm.flex1, cm.sp('px', 6), cm.sp('py', 4), 'overflow-y-auto'), children: _jsxs("div", { className: cm.stack(3), children: [messages.map((msg) => {
+                    const isUser = msg.role === 'user';
+                    return (_jsx("div", { className: cm.cn(cm.flex({ justify: isUser ? 'end' : 'start' })), children: _jsxs("div", { className: cm.cn(cm.sp('px', 4), cm.sp('py', 2), cm.textSize('sm'), 'rounded-2xl max-w-[80%] whitespace-pre-wrap', isUser
+                                ? 'bg-primary text-on-primary'
+                                : 'bg-surface-container-high text-on-surface'), children: [msg.content, msg.timestamp ? (_jsx("div", { className: cm.cn(cm.textSize('xs'), cm.sp('mt', 1), isUser ? 'text-on-primary/70' : 'text-on-surface-variant'), children: msg.timestamp })) : null] }) }, msg.id));
+                }), loading ? (_jsx("div", { className: cm.cn(cm.textSize('xs'), 'text-on-surface-variant animate-pulse'), children: "..." })) : null, _jsx("div", { ref: endRef })] }) }));
+}
+export default ChatbotTesterMessages;

package/dist/index.d.ts

@@ -0,0 +1,52 @@
+/**
+ * `@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.
+ *
+ * @example
+ * ```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}
+ * />
+ * ```
+ *
+ * @remarks
+ * 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.
+ *
+ * @module
+ */
+export * from './ChatbotTester.js';
+export * from './ChatbotTesterInput.js';
+export * from './ChatbotTesterMessages.js';
+export * from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AAEH,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,YAAY,CAAA"}

package/dist/index.js

@@ -0,0 +1,51 @@
+/**
+ * `@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.
+ *
+ * @example
+ * ```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}
+ * />
+ * ```
+ *
+ * @remarks
+ * 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.
+ *
+ * @module
+ */
+export * from './ChatbotTester.js';
+export * from './ChatbotTesterInput.js';
+export * from './ChatbotTesterMessages.js';
+export * from './types.js';

package/dist/types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Types for the chatbot-tester sandbox UI.
+ *
+ * @module
+ */
+/** A single chat message displayed in the chatbot tester sandbox UI. */
+export interface TesterMessage {
+    id: string | number;
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+    timestamp?: string;
+}
+/** A selectable bot/agent option shown in the chatbot tester sandbox UI. */
+export interface TesterBotOption {
+    id: string;
+    name?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wEAAwE;AACxE,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAA;IACrC,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,4EAA4E;AAC5E,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,MAAM,CAAA;CACd"}

package/dist/types.js

@@ -0,0 +1,6 @@
+/**
+ * Types for the chatbot-tester sandbox UI.
+ *
+ * @module
+ */
+export {};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@molecule/app-chatbot-tester-react",
+  "version": "1.0.0",
+  "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",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "molecule",
+    "chatbot",
+    "playground",
+    "tester",
+    "ai",
+    "react"
+  ],
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "@molecule/app-react": "^1.0.0",
+    "@molecule/app-ui": "^1.0.0",
+    "@molecule/app-ui-react": "^1.0.0",
+    "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",
+    "@types/node": "26.1.2",
+    "@types/react": "19.2.17",
+    "react": "19.2.8",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
+  }
+}