@aichatbot-saas/react 0.1.0

package/dist/index.d.ts

@@ -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 };

package/dist/index.js

@@ -0,0 +1,386 @@
+// src/AIChatbot.tsx
+import {
+  useCallback,
+  useEffect as useEffect2,
+  useId,
+  useRef as useRef2,
+  useState
+} from "react";
+
+// src/useChatController.ts
+import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
+import {
+  createChatController
+} from "@aichatbot-saas/core";
+function useChatController(options) {
+  var _a;
+  const { apiKey, apiUrl, language, theme, sessionId } = options;
+  const themeKey = useMemo(() => JSON.stringify(theme != null ? theme : {}), [theme]);
+  const controller = useMemo(
+    () => 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 = 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 = useSyncExternalStore(
+    controller.subscribe,
+    controller.getState,
+    getServerSnapshot
+  );
+  useEffect(() => {
+    void controller.start();
+    return () => {
+      controller.destroy();
+    };
+  }, [controller]);
+  return { state, controller };
+}
+
+// src/components/MessageBubble.tsx
+import { jsx, jsxs } from "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__ */ jsxs("div", { style: rowStyle, children: [
+    /* @__PURE__ */ jsx("div", { style: bubbleStyle, children: message.text }),
+    canRate && (message.feedback ? /* @__PURE__ */ jsx("div", { style: { marginTop: 4, fontSize: 13, color: theme.mutedTextColor }, children: "Thanks!" }) : /* @__PURE__ */ 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__ */ jsxs("div", { style: { marginTop: 4, display: "flex", gap: 2 }, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        title: "Helpful",
+        "aria-label": "Helpful",
+        style: btnStyle,
+        onClick: () => onFeedback == null ? void 0 : onFeedback(message, "positive"),
+        children: "\u{1F44D}"
+      }
+    ),
+    /* @__PURE__ */ 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
+import { jsx as jsx2 } from "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__ */ jsx2("div", { style: rowStyle, children: suggestions.map((label, i) => /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      style: chipStyle,
+      disabled,
+      onClick: () => onSelect(label),
+      children: label
+    },
+    `${i}-${label}`
+  )) });
+}
+
+// src/components/TypingIndicator.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function TypingIndicator({ theme, botName }) {
+  const style = {
+    fontSize: 13,
+    color: theme.mutedTextColor,
+    fontStyle: "italic",
+    margin: "6px 2px"
+  };
+  return /* @__PURE__ */ jsx3("div", { style, "aria-live": "polite", children: (botName || "Assistant") + " is typing\u2026" });
+}
+
+// src/AIChatbot.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "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] = useState("");
+  const scrollRef = useRef2(null);
+  const headingId = 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;
+  useEffect2(() => {
+    const node = scrollRef.current;
+    if (node) node.scrollTop = node.scrollHeight;
+  }, [state.messages, state.isTyping]);
+  const handleSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      const value = draft;
+      setDraft("");
+      void controller.send(value);
+    },
+    [controller, draft]
+  );
+  const handleSuggestion = 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__ */ jsxs2(
+    "div",
+    {
+      className,
+      style: panelStyle,
+      role: "region",
+      "aria-label": `${botName} chat`,
+      "aria-labelledby": headingId,
+      children: [
+        /* @__PURE__ */ jsxs2("header", { style: headerStyle, children: [
+          iconUrl ? /* @__PURE__ */ jsx4("img", { src: iconUrl, alt: "", style: avatarStyle }) : null,
+          /* @__PURE__ */ jsx4("span", { id: headingId, children: botName })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { style: bodyStyle, ref: scrollRef, children: [
+          state.status === "loading" && state.messages.length === 0 ? /* @__PURE__ */ jsx4("div", { style: { color: t.mutedTextColor, fontSize: 13, padding: 4 }, children: "Loading\u2026" }) : null,
+          state.messages.map((message) => /* @__PURE__ */ jsx4(
+            MessageBubble,
+            {
+              message,
+              theme: t,
+              onFeedback: controller.submitFeedback.bind(controller)
+            },
+            message.id
+          )),
+          state.isTyping ? /* @__PURE__ */ jsx4(TypingIndicator, { theme: t, botName }) : null,
+          state.status === "error" ? /* @__PURE__ */ jsx4(
+            "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__ */ jsx4(
+            SuggestionChips,
+            {
+              suggestions: state.suggestions,
+              theme: t,
+              disabled: state.sending,
+              onSelect: handleSuggestion
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("form", { style: footerStyle, onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ jsx4(
+            "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__ */ jsx4("button", { type: "submit", style: sendStyle, disabled: sendDisabled, children: "Send" })
+        ] })
+      ]
+    }
+  );
+}
+var AIChatbot_default = AIChatbot;
+
+// src/index.ts
+import {
+  AIChatbotClient,
+  ChatController,
+  createChatController as createChatController2,
+  resolveTheme,
+  DEFAULT_THEME
+} from "@aichatbot-saas/core";
+export {
+  AIChatbot,
+  AIChatbotClient,
+  ChatController,
+  DEFAULT_THEME,
+  MessageBubble,
+  SuggestionChips,
+  TypingIndicator,
+  createChatController2 as createChatController,
+  AIChatbot_default as default,
+  resolveTheme,
+  useChatController
+};

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@aichatbot-saas/react",
+  "version": "0.1.0",
+  "description": "Native in-page React (web) chat UI component for the AIChatbot SaaS — a thin, themeable binding over @aichatbot-saas/core.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/piyushshri01/chat-bot-saas.git",
+    "directory": "sdks/react"
+  },
+  "homepage": "https://github.com/piyushshri01/chat-bot-saas/tree/main/sdks/react#readme",
+  "bugs": {
+    "url": "https://github.com/piyushshri01/chat-bot-saas/issues"
+  },
+  "keywords": [
+    "react",
+    "react-dom",
+    "chatbot",
+    "ai",
+    "chat",
+    "sdk",
+    "aichatbot",
+    "support",
+    "widget",
+    "embeddable"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean --external react,react-dom,@aichatbot-saas/core",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@aichatbot-saas/core": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}