@aichatbot-saas/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 AIChatbot
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,114 @@
+# @aichatbot-saas/react
+
+Native, in-page **React (web)** chat UI component for the [AIChatbot](https://github.com/piyushshri01/chat-bot-saas) SaaS.
+
+Unlike the drop-in `chatbot.js` floating bubble, `<AIChatbot>` is a real inline
+chat panel you embed wherever you want — it fills its container and the host
+controls size and placement. It's a thin UI binding over the framework-agnostic
+[`@aichatbot-saas/core`](https://www.npmjs.com/package/@aichatbot-saas/core)
+(REST client + theme model + headless `ChatController`), so all behavior lives in
+one shared place and this package just renders that state.
+
+- Themed entirely from your backend config (and overridable locally).
+- 100% inline styles — no global CSS, no external UI libraries, never clobbers host styles.
+- SSR-safe: nothing touches `window`/`document` at module load or during render.
+- Strict TypeScript, React 17/18/19 (`react` + `react-dom` ≥ 17).
+
+## Install
+
+```bash
+npm i @aichatbot-saas/react
+# pnpm add @aichatbot-saas/react   |   yarn add @aichatbot-saas/react
+```
+
+Installing this package also pulls in its dependency
+[`@aichatbot-saas/core`](https://www.npmjs.com/package/@aichatbot-saas/core).
+`react` and `react-dom` are peer dependencies — bring your own.
+
+## Usage
+
+The component fills its parent, so wrap it in a sized box:
+
+```tsx
+import { AIChatbot } from '@aichatbot-saas/react';
+
+export function Support() {
+  return (
+    <div style={{ width: 380, height: 560 }}>
+      <AIChatbot apiKey="pk_live_xxx" apiUrl="https://api.you.com" />
+    </div>
+  );
+}
+```
+
+Only `apiKey` is required. Everything else (bot name, greeting, suggestions,
+languages, theme) is fetched from the backend on mount.
+
+## Props
+
+| Prop        | Type                  | Required | Description                                                                 |
+|-------------|-----------------------|:--------:|-----------------------------------------------------------------------------|
+| `apiKey`    | `string`              |   yes    | Publishable API key, sent as `X-API-Key`.                                   |
+| `apiUrl`    | `string`              |    no    | Backend base URL. Defaults to same-origin.                                  |
+| `language`  | `string`              |    no    | Force a language. Otherwise `config.languages[0]` → `"en"`.                 |
+| `theme`     | `Partial<ChatTheme>`  |    no    | Local theme overrides (highest precedence). See below.                      |
+| `sessionId` | `string`              |    no    | Stable device/session id forwarded to the backend for threading.            |
+| `className` | `string`              |    no    | Extra class on the root panel.                                              |
+| `style`     | `React.CSSProperties` |    no    | Inline styles merged onto the root panel (e.g. `width`/`height`/`border`).  |
+
+## Theming
+
+Theme precedence is **client override → backend config → built-in default**.
+Override any [`ChatTheme`](https://www.npmjs.com/package/@aichatbot-saas/core)
+token via the `theme` prop:
+
+```tsx
+<AIChatbot
+  apiKey="pk_live_xxx"
+  apiUrl="https://api.you.com"
+  theme={{
+    primaryColor: '#7c3aed',     // launcher/header/user bubble/send/chips
+    botBubbleColor: '#f3f4f6',
+    bubbleRadius: 18,
+    inputRadius: 24,
+    fontFamily: 'Inter, system-ui, sans-serif',
+  }}
+/>
+```
+
+## Next.js / SSR
+
+`<AIChatbot>` is SSR-safe — it renders a stable initial snapshot on the server
+and only performs network/storage I/O inside effects on the client. In the
+App Router it's a **Client Component**, so render it from one and add the
+directive at the top of that file:
+
+```tsx
+'use client';
+import { AIChatbot } from '@aichatbot-saas/react';
+
+export default function ChatPanel() {
+  return (
+    <div style={{ width: 380, height: 560 }}>
+      <AIChatbot apiKey={process.env.NEXT_PUBLIC_AICHATBOT_KEY!} apiUrl="https://api.you.com" />
+    </div>
+  );
+}
+```
+
+## Advanced: headless usage
+
+The full core surface is re-exported for convenience, so you can build a custom
+UI without depending on `@aichatbot-saas/core` directly:
+
+- `useChatController(options)` → `{ state, controller }` — the hook the component
+  uses internally (wraps a `ChatController` in `useSyncExternalStore`).
+- `AIChatbotClient` — the headless REST client (`fetchConfig`, `fetchSuggestions`,
+  `sendMessage`, `sendFeedback`).
+- `ChatController` / `createChatController`, `resolveTheme`, `DEFAULT_THEME`.
+- The presentational pieces: `MessageBubble`, `SuggestionChips`, `TypingIndicator`.
+- Types: `ChatTheme`, `ChatMessage`, `ChatConfig`, `ChatResponse`, `ChatState`, etc.
+
+## License
+
+MIT © 2026 AIChatbot

package/dist/index.cjs

@@ -0,0 +1,408 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AIChatbot: () => AIChatbot,
+  AIChatbotClient: () => import_core2.AIChatbotClient,
+  ChatController: () => import_core2.ChatController,
+  DEFAULT_THEME: () => import_core2.DEFAULT_THEME,
+  MessageBubble: () => MessageBubble,
+  SuggestionChips: () => SuggestionChips,
+  TypingIndicator: () => TypingIndicator,
+  createChatController: () => import_core2.createChatController,
+  default: () => AIChatbot_default,
+  resolveTheme: () => import_core2.resolveTheme,
+  useChatController: () => useChatController
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/AIChatbot.tsx
+var import_react2 = require("react");
+
+// src/useChatController.ts
+var import_react = require("react");
+var import_core = require("@aichatbot-saas/core");
+function useChatController(options) {
+  var _a;
+  const { apiKey, apiUrl, language, theme, sessionId } = options;
+  const themeKey = (0, import_react.useMemo)(() => JSON.stringify(theme != null ? theme : {}), [theme]);
+  const controller = (0, import_react.useMemo)(
+    () => (0, import_core.createChatController)({
+      apiKey,
+      apiUrl,
+      language,
+      theme,
+      sessionId
+    }),
+    // theme is captured via its serialized key; eslint can't see that.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [apiKey, apiUrl, language, themeKey, sessionId]
+  );
+  const serverSnapshotRef = (0, import_react.useRef)(
+    null
+  );
+  if (((_a = serverSnapshotRef.current) == null ? void 0 : _a.controller) !== controller) {
+    serverSnapshotRef.current = { controller, state: controller.getState() };
+  }
+  const getServerSnapshot = () => serverSnapshotRef.current.state;
+  const state = (0, import_react.useSyncExternalStore)(
+    controller.subscribe,
+    controller.getState,
+    getServerSnapshot
+  );
+  (0, import_react.useEffect)(() => {
+    void controller.start();
+    return () => {
+      controller.destroy();
+    };
+  }, [controller]);
+  return { state, controller };
+}
+
+// src/components/MessageBubble.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function MessageBubble({ message, theme, onFeedback }) {
+  const isUser = message.role === "user";
+  const canRate = !isUser && !!message.serverId && !message.error;
+  const rowStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: isUser ? "flex-end" : "flex-start",
+    margin: "8px 0"
+  };
+  const bubbleStyle = {
+    maxWidth: "80%",
+    padding: "9px 13px",
+    borderRadius: theme.bubbleRadius,
+    fontSize: 14,
+    lineHeight: 1.45,
+    whiteSpace: "pre-wrap",
+    wordWrap: "break-word",
+    overflowWrap: "anywhere",
+    ...isUser ? {
+      background: theme.userBubbleColor,
+      color: theme.userBubbleTextColor,
+      borderBottomRightRadius: 4
+    } : {
+      background: theme.botBubbleColor,
+      color: theme.botBubbleTextColor,
+      border: `1px solid ${theme.botBubbleBorderColor}`,
+      borderBottomLeftRadius: 4
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: rowStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: bubbleStyle, children: message.text }),
+    canRate && (message.feedback ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 4, fontSize: 13, color: theme.mutedTextColor }, children: "Thanks!" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FeedbackButtons, { message, theme, onFeedback }))
+  ] });
+}
+function FeedbackButtons({ message, theme, onFeedback }) {
+  const btnStyle = {
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    fontSize: 14,
+    padding: "0 2px",
+    color: theme.mutedTextColor,
+    opacity: 0.7,
+    lineHeight: 1
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: 4, display: "flex", gap: 2 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        title: "Helpful",
+        "aria-label": "Helpful",
+        style: btnStyle,
+        onClick: () => onFeedback == null ? void 0 : onFeedback(message, "positive"),
+        children: "\u{1F44D}"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        title: "Not helpful",
+        "aria-label": "Not helpful",
+        style: btnStyle,
+        onClick: () => onFeedback == null ? void 0 : onFeedback(message, "negative"),
+        children: "\u{1F44E}"
+      }
+    )
+  ] });
+}
+
+// src/components/SuggestionChips.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function SuggestionChips({
+  suggestions,
+  theme,
+  disabled = false,
+  onSelect
+}) {
+  if (!suggestions.length) return null;
+  const rowStyle = {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: 6,
+    margin: "6px 0 2px"
+  };
+  const chipStyle = {
+    background: theme.backgroundColor,
+    border: `1px solid ${theme.primaryColor}`,
+    color: theme.primaryColor,
+    borderRadius: 16,
+    padding: "6px 12px",
+    fontSize: 13,
+    cursor: disabled ? "default" : "pointer",
+    opacity: disabled ? 0.6 : 1,
+    fontFamily: "inherit",
+    lineHeight: 1.2
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: rowStyle, children: suggestions.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      type: "button",
+      style: chipStyle,
+      disabled,
+      onClick: () => onSelect(label),
+      children: label
+    },
+    `${i}-${label}`
+  )) });
+}
+
+// src/components/TypingIndicator.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function TypingIndicator({ theme, botName }) {
+  const style = {
+    fontSize: 13,
+    color: theme.mutedTextColor,
+    fontStyle: "italic",
+    margin: "6px 2px"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style, "aria-live": "polite", children: (botName || "Assistant") + " is typing\u2026" });
+}
+
+// src/AIChatbot.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function AIChatbot({
+  apiKey,
+  apiUrl,
+  language,
+  theme,
+  sessionId,
+  className,
+  style
+}) {
+  var _a, _b;
+  const { state, controller } = useChatController({
+    apiKey,
+    apiUrl,
+    language,
+    theme,
+    sessionId
+  });
+  const [draft, setDraft] = (0, import_react2.useState)("");
+  const scrollRef = (0, import_react2.useRef)(null);
+  const headingId = (0, import_react2.useId)();
+  const t = state.theme;
+  const botName = ((_a = state.config) == null ? void 0 : _a.bot_name) || "Assistant";
+  const iconUrl = (_b = state.config) == null ? void 0 : _b.bot_icon_url;
+  (0, import_react2.useEffect)(() => {
+    const node = scrollRef.current;
+    if (node) node.scrollTop = node.scrollHeight;
+  }, [state.messages, state.isTyping]);
+  const handleSubmit = (0, import_react2.useCallback)(
+    (e) => {
+      e.preventDefault();
+      const value = draft;
+      setDraft("");
+      void controller.send(value);
+    },
+    [controller, draft]
+  );
+  const handleSuggestion = (0, import_react2.useCallback)(
+    (text) => {
+      void controller.sendSuggestion(text);
+    },
+    [controller]
+  );
+  const panelStyle = {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    height: "100%",
+    minHeight: 0,
+    boxSizing: "border-box",
+    background: t.backgroundColor,
+    color: t.botBubbleTextColor,
+    fontFamily: t.fontFamily,
+    fontSize: 14,
+    overflow: "hidden",
+    ...style
+  };
+  const headerStyle = {
+    background: t.primaryColor,
+    color: t.onPrimaryColor,
+    padding: "14px 16px",
+    fontWeight: 600,
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    flex: "0 0 auto"
+  };
+  const avatarStyle = {
+    width: 28,
+    height: 28,
+    borderRadius: "50%",
+    objectFit: "cover",
+    flex: "0 0 auto",
+    background: "rgba(255,255,255,0.2)"
+  };
+  const bodyStyle = {
+    flex: "1 1 auto",
+    minHeight: 0,
+    overflowY: "auto",
+    padding: 14,
+    background: t.surfaceColor
+  };
+  const footerStyle = {
+    display: "flex",
+    gap: 6,
+    borderTop: `1px solid ${t.botBubbleBorderColor}`,
+    padding: 8,
+    background: t.backgroundColor,
+    flex: "0 0 auto"
+  };
+  const inputStyle = {
+    flex: 1,
+    minWidth: 0,
+    border: `1px solid ${t.botBubbleBorderColor}`,
+    borderRadius: t.inputRadius,
+    padding: "9px 14px",
+    fontSize: 14,
+    fontFamily: "inherit",
+    outline: "none",
+    color: t.botBubbleTextColor,
+    background: t.backgroundColor
+  };
+  const sendDisabled = state.sending || state.status !== "ready" || draft.trim().length === 0;
+  const sendStyle = {
+    background: t.primaryColor,
+    color: t.onPrimaryColor,
+    border: "none",
+    borderRadius: t.inputRadius,
+    padding: "0 16px",
+    cursor: sendDisabled ? "default" : "pointer",
+    opacity: sendDisabled ? 0.6 : 1,
+    fontSize: 14,
+    fontFamily: "inherit",
+    flex: "0 0 auto"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className,
+      style: panelStyle,
+      role: "region",
+      "aria-label": `${botName} chat`,
+      "aria-labelledby": headingId,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("header", { style: headerStyle, children: [
+          iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: iconUrl, alt: "", style: avatarStyle }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: headingId, children: botName })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: bodyStyle, ref: scrollRef, children: [
+          state.status === "loading" && state.messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: t.mutedTextColor, fontSize: 13, padding: 4 }, children: "Loading\u2026" }) : null,
+          state.messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            MessageBubble,
+            {
+              message,
+              theme: t,
+              onFeedback: controller.submitFeedback.bind(controller)
+            },
+            message.id
+          )),
+          state.isTyping ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TypingIndicator, { theme: t, botName }) : null,
+          state.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              role: "alert",
+              style: {
+                background: t.botBubbleColor,
+                color: t.botBubbleTextColor,
+                border: `1px solid ${t.botBubbleBorderColor}`,
+                borderRadius: t.bubbleRadius,
+                padding: "9px 13px",
+                fontSize: 14,
+                margin: "8px 0"
+              },
+              children: state.error || "Sorry, something went wrong loading the chat."
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            SuggestionChips,
+            {
+              suggestions: state.suggestions,
+              theme: t,
+              disabled: state.sending,
+              onSelect: handleSuggestion
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { style: footerStyle, onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "input",
+            {
+              style: inputStyle,
+              type: "text",
+              value: draft,
+              maxLength: 4e3,
+              placeholder: "Type your message\u2026",
+              "aria-label": "Message",
+              onChange: (e) => setDraft(e.target.value),
+              disabled: state.status === "error"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "submit", style: sendStyle, disabled: sendDisabled, children: "Send" })
+        ] })
+      ]
+    }
+  );
+}
+var AIChatbot_default = AIChatbot;
+
+// src/index.ts
+var import_core2 = require("@aichatbot-saas/core");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AIChatbot,
+  AIChatbotClient,
+  ChatController,
+  DEFAULT_THEME,
+  MessageBubble,
+  SuggestionChips,
+  TypingIndicator,
+  createChatController,
+  resolveTheme,
+  useChatController
+});

package/dist/index.d.cts

@@ -0,0 +1,104 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+import { ChatTheme, ChatState, ChatController, ChatMessage, FeedbackValue } from '@aichatbot-saas/core';
+export { AIChatbotClient, ChatConfig, ChatController, ChatControllerOptions, ChatMessage, ChatResponse, ChatRole, ChatState, ChatStatus, ChatTheme, DEFAULT_THEME, FeedbackValue, Suggestion, SuggestionInput, createChatController, resolveTheme } from '@aichatbot-saas/core';
+
+interface AIChatbotProps {
+    /** Publishable API key (required). */
+    apiKey: string;
+    /** Backend base URL. Defaults to same-origin. */
+    apiUrl?: string;
+    /** Force a language; otherwise config.languages[0] -> "en". */
+    language?: string;
+    /** Local theme overrides (highest precedence: client -> backend -> default). */
+    theme?: Partial<ChatTheme>;
+    /** Stable device/session id forwarded to the backend for threading. */
+    sessionId?: string;
+    /** Extra class on the root panel. */
+    className?: string;
+    /** Extra inline styles merged onto the root panel (e.g. width/height). */
+    style?: CSSProperties;
+}
+/**
+ * `<AIChatbot>` — a native, inline, embeddable chat panel for the web.
+ *
+ * It fills its container, so the host controls size and placement (drop it into
+ * a sized `<div>`). All behavior (config load, greeting, suggestions, send flow,
+ * conversation persistence, feedback, error handling) lives in the shared
+ * headless controller; this component only renders that state and wires events.
+ *
+ * Styling is 100% inline and derived from the resolved theme — no global CSS, no
+ * external UI libs — so it never clobbers host styles and is SSR-safe.
+ *
+ * In Next.js / RSC, render it from a Client Component (add `"use client"`).
+ */
+declare function AIChatbot({ apiKey, apiUrl, language, theme, sessionId, className, style, }: AIChatbotProps): react.JSX.Element;
+
+/** Options accepted by {@link useChatController}. Mirrors ChatControllerOptions. */
+interface UseChatControllerOptions {
+    apiKey: string;
+    apiUrl?: string;
+    language?: string;
+    theme?: Partial<ChatTheme>;
+    sessionId?: string;
+}
+interface UseChatControllerResult {
+    state: ChatState;
+    controller: ChatController;
+}
+/**
+ * Creates and drives a headless {@link ChatController}, exposing its immutable
+ * state to React via `useSyncExternalStore` (React 18+, concurrent-safe).
+ *
+ * The controller is memoized on the identity-defining inputs (apiKey, apiUrl,
+ * language, serialized theme, sessionId); when any of those change a fresh
+ * controller is created, started, and the previous one is destroyed.
+ *
+ * SSR-safe: the controller is constructed lazily and never touches
+ * window/document during render. `start()` (which performs network/storage I/O)
+ * runs only inside an effect, so it never executes on the server.
+ */
+declare function useChatController(options: UseChatControllerOptions): UseChatControllerResult;
+
+interface MessageBubbleProps {
+    message: ChatMessage;
+    theme: ChatTheme;
+    /**
+     * Called when the user rates this (bot) message. Only rendered for bot
+     * messages that carry a `serverId` (i.e. not the greeting and not error
+     * bubbles).
+     */
+    onFeedback?: (message: ChatMessage, value: FeedbackValue) => void;
+}
+/**
+ * A single chat bubble. User messages align right with the primary color; bot
+ * messages align left with a bordered white surface. Bot messages eligible for
+ * feedback render thumbs up/down beneath the bubble (replaced by "Thanks!" once
+ * rated). All styling is inline and derived from the theme.
+ */
+declare function MessageBubble({ message, theme, onFeedback }: MessageBubbleProps): react.JSX.Element;
+
+interface SuggestionChipsProps {
+    suggestions: string[];
+    theme: ChatTheme;
+    disabled?: boolean;
+    onSelect: (text: string) => void;
+}
+/**
+ * A wrapping row of tappable suggestion chips, themed from the primary color.
+ * Renders nothing when there are no suggestions.
+ */
+declare function SuggestionChips({ suggestions, theme, disabled, onSelect, }: SuggestionChipsProps): react.JSX.Element | null;
+
+interface TypingIndicatorProps {
+    theme: ChatTheme;
+    /** Bot name to personalize the label, e.g. "Assistant is typing…". */
+    botName?: string;
+}
+/**
+ * The "<bot> is typing…" indicator shown while the controller is awaiting a
+ * reply. Themed via mutedTextColor.
+ */
+declare function TypingIndicator({ theme, botName }: TypingIndicatorProps): react.JSX.Element;
+
+export { AIChatbot, type AIChatbotProps, MessageBubble, type MessageBubbleProps, SuggestionChips, type SuggestionChipsProps, TypingIndicator, type TypingIndicatorProps, type UseChatControllerOptions, type UseChatControllerResult, AIChatbot as default, useChatController };