chatbotlite 0.6.0 → 0.6.1

package/dist/react/index.d.cts

@@ -95,6 +95,19 @@ interface ChatWidgetDirectProps extends ChatWidgetCommonProps {
     knowledge: Knowledge;
     /** Provider chain + API keys. */
     providers: ProviderConfig;
+    /**
+     * Append per-vertical behaviour tweaks to the default system prompt
+     * (tone, escalation rules, "don't quote price too early", etc.).
+     * Only used in direct (client-side) mode — in endpoint mode the server
+     * controls the prompt.
+     */
+    extraInstructions?: string;
+    /**
+     * Power-user hook to modify our default scaffolding inline.
+     * Receives the assembled default prompt, returns a transformed string.
+     * Direct mode only.
+     */
+    systemPromptTransform?: (defaultPrompt: string) => string;
     endpoint?: never;
 }
 interface ChatWidgetEndpointProps extends ChatWidgetCommonProps {

package/dist/react/index.d.ts

@@ -95,6 +95,19 @@ interface ChatWidgetDirectProps extends ChatWidgetCommonProps {
     knowledge: Knowledge;
     /** Provider chain + API keys. */
     providers: ProviderConfig;
+    /**
+     * Append per-vertical behaviour tweaks to the default system prompt
+     * (tone, escalation rules, "don't quote price too early", etc.).
+     * Only used in direct (client-side) mode — in endpoint mode the server
+     * controls the prompt.
+     */
+    extraInstructions?: string;
+    /**
+     * Power-user hook to modify our default scaffolding inline.
+     * Receives the assembled default prompt, returns a transformed string.
+     * Direct mode only.
+     */
+    systemPromptTransform?: (defaultPrompt: string) => string;
     endpoint?: never;
 }
 interface ChatWidgetEndpointProps extends ChatWidgetCommonProps {

package/dist/react/index.js

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useMemo } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 // src/react/ChatWidget.tsx
@@ -67,9 +67,11 @@ function buildToolsPromptAddendum(enabledTools) {
 }
 
 // src/core/prompts.ts
-function buildSystemPrompt(knowledge, enabledTools = []) {
-  const toolsAddendum = buildToolsPromptAddendum(enabledTools);
-  return [
+function buildSystemPrompt(knowledge, optionsOrEnabledTools = []) {
+  const opts = Array.isArray(optionsOrEnabledTools) ? { enabledTools: optionsOrEnabledTools } : optionsOrEnabledTools;
+  const toolsAddendum = buildToolsPromptAddendum(opts.enabledTools ?? []);
+  const extras = opts.extraInstructions?.trim();
+  const parts = [
     "You are an AI assistant on a business website. Use ONLY the knowledge below to answer.",
     "",
     "## Business knowledge",
@@ -81,9 +83,16 @@ function buildSystemPrompt(knowledge, enabledTools = []) {
     "- For anything not covered in the knowledge above, say the owner will follow up \u2014 do NOT guess.",
     '- If the caller is clearly a vendor/sales pitch, say: "This does not look like a customer service request, so we will not continue this thread."',
     `- If wrong number or asked to stop, say: "Sorry about that. We won't text again."`,
-    "- Match the caller's language automatically.",
-    toolsAddendum
-  ].filter(Boolean).join("\n");
+    "- Match the caller's language automatically."
+  ];
+  if (extras) {
+    parts.push("", "## Additional instructions", extras);
+  }
+  if (toolsAddendum) {
+    parts.push(toolsAddendum);
+  }
+  const defaultPrompt = parts.join("\n");
+  return opts.systemPromptTransform ? opts.systemPromptTransform(defaultPrompt) : defaultPrompt;
 }
 
 // src/core/guards.ts
@@ -207,6 +216,8 @@ var ChatBot = class {
   cachedSystemPrompt;
   guards;
   knowledge;
+  extraInstructions;
+  systemPromptTransform;
   constructor(init) {
     if (!init.knowledge || typeof init.knowledge !== "string" || init.knowledge.trim().length === 0) {
       throw new Error("chatbotlite: knowledge is required (a non-empty markdown string).");
@@ -216,14 +227,23 @@ var ChatBot = class {
     this.steps = resolveChain(init.providers);
     this.fetcher = init.options?.fetch ?? globalThis.fetch.bind(globalThis);
     this.timeoutMs = init.options?.timeoutMs ?? 3e4;
-    this.cachedSystemPrompt = buildSystemPrompt(init.knowledge);
+    this.extraInstructions = init.extraInstructions;
+    this.systemPromptTransform = init.systemPromptTransform;
+    this.cachedSystemPrompt = buildSystemPrompt(init.knowledge, {
+      extraInstructions: this.extraInstructions,
+      systemPromptTransform: this.systemPromptTransform
+    });
     this.guards = init.guards ?? {};
   }
   /** Build system prompt for given opts — uses cached if no enabledTools, else rebuilds. */
   resolveSystemPrompt(opts) {
     if (opts.systemPrompt) return opts.systemPrompt;
     if (opts.enabledTools && opts.enabledTools.length > 0) {
-      return buildSystemPrompt(this.knowledge, opts.enabledTools);
+      return buildSystemPrompt(this.knowledge, {
+        enabledTools: opts.enabledTools,
+        extraInstructions: this.extraInstructions,
+        systemPromptTransform: this.systemPromptTransform
+      });
     }
     return this.cachedSystemPrompt;
   }
@@ -893,7 +913,7 @@ function RequestPayment(props) {
     surface,
     textBody,
     textMuted,
-    showInterac = true,
+    showInterac = false,
     stripeLink,
     onPick,
     submitting = false,
@@ -1009,8 +1029,12 @@ function RequestPayment(props) {
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              flexShrink: 0
-            }, children: /* @__PURE__ */ jsx("span", { style: { color: "#635BFF", fontSize: 14, fontWeight: 700 }, children: "\u{1F4B3}" }) }),
+              flexShrink: 0,
+              color: "#635BFF"
+            }, children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2.5" }),
+              /* @__PURE__ */ jsx("line", { x1: "2", y1: "10", x2: "22", y2: "10" })
+            ] }) }),
             /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
               /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: 13, fontWeight: 600, color: textBody }, children: "Pay by card" }),
               /* @__PURE__ */ jsx("p", { style: { margin: "2px 0 0", fontSize: 11, color: textMuted }, children: "Visa \xB7 Mastercard \xB7 Amex" })
@@ -1151,6 +1175,33 @@ function ChatWidget(props) {
   const voiceLang = voiceCfg?.lang ?? "en-US";
   const speechSupported = typeof window !== "undefined" && (Boolean(window.SpeechRecognition) || Boolean(window.webkitSpeechRecognition));
   const [open, setOpen] = useState(false);
+  const [expanded, setExpanded] = useState(() => {
+    if (typeof window === "undefined") return false;
+    try {
+      return window.localStorage.getItem("cbl-panel-size") === "expanded";
+    } catch {
+      return false;
+    }
+  });
+  const [isMobile, setIsMobile] = useState(
+    () => typeof window === "undefined" ? false : window.innerWidth < 640
+  );
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const onResize = () => setIsMobile(window.innerWidth < 640);
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+  function toggleExpanded() {
+    setExpanded((prev) => {
+      const next = !prev;
+      try {
+        window.localStorage.setItem("cbl-panel-size", next ? "expanded" : "compact");
+      } catch {
+      }
+      return next;
+    });
+  }
   const [messages, setMessages] = useState([
     { id: "g0", role: "assistant", content: resolvedGreeting, ts: Date.now() }
   ]);
@@ -1243,11 +1294,17 @@ function ChatWidget(props) {
   useEffect(() => {
     ensureStyles();
   }, []);
+  const directProps = isEndpointMode ? null : props;
   const bot = useMemo(() => {
-    if (isEndpointMode) return null;
-    if (!props.knowledge || !props.providers) return null;
-    return new ChatBot({ knowledge: props.knowledge, providers: props.providers });
-  }, [isEndpointMode, props.knowledge, props.providers]);
+    if (!directProps) return null;
+    if (!directProps.knowledge || !directProps.providers) return null;
+    return new ChatBot({
+      knowledge: directProps.knowledge,
+      providers: directProps.providers,
+      ...directProps.extraInstructions ? { extraInstructions: directProps.extraInstructions } : {},
+      ...directProps.systemPromptTransform ? { systemPromptTransform: directProps.systemPromptTransform } : {}
+    });
+  }, [directProps]);
   useEffect(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
@@ -1428,12 +1485,12 @@ function ChatWidget(props) {
           ["--cbl-primary"]: primary,
           ["--cbl-on-primary"]: onPrimary,
           position: "fixed",
-          bottom: 20,
-          ...panelPos,
-          width: 380,
-          maxWidth: "calc(100vw - 40px)",
-          height: 580,
-          maxHeight: "calc(100vh - 40px)",
+          bottom: isMobile ? 0 : 20,
+          ...isMobile ? { left: 0, right: 0 } : panelPos,
+          width: isMobile ? "100vw" : expanded ? 720 : 380,
+          maxWidth: isMobile ? "100vw" : "calc(100vw - 40px)",
+          height: isMobile ? "100vh" : expanded ? 800 : 580,
+          maxHeight: isMobile ? "100vh" : "calc(100vh - 40px)",
           background: SURFACE,
           color: TEXT_BODY,
           borderRadius: 20,
@@ -1491,30 +1548,63 @@ function ChatWidget(props) {
                 (subtitle || sending) && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: TEXT_MUTED, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: subtitle ?? (sending ? "typing\u2026" : "") })
               ] })
             ] }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                className: "chatbotlite-close",
-                onClick: () => setOpen(false),
-                "aria-label": "Close chat",
-                style: {
-                  background: "transparent",
-                  border: "none",
-                  color: TEXT_MUTED,
-                  width: 32,
-                  height: 32,
-                  borderRadius: 10,
-                  fontSize: 22,
-                  lineHeight: 1,
-                  cursor: "pointer",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  flexShrink: 0
-                },
-                children: "\xD7"
-              }
-            )
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 2, flexShrink: 0 }, children: [
+              !isMobile && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "chatbotlite-resize",
+                  onClick: toggleExpanded,
+                  "aria-label": expanded ? "Compact view" : "Expand view",
+                  title: expanded ? "Compact view" : "Expand view",
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    color: TEXT_MUTED,
+                    width: 32,
+                    height: 32,
+                    borderRadius: 10,
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: expanded ? /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                    /* @__PURE__ */ jsx("polyline", { points: "9 4 4 4 4 9" }),
+                    /* @__PURE__ */ jsx("polyline", { points: "15 4 20 4 20 9" }),
+                    /* @__PURE__ */ jsx("polyline", { points: "4 15 4 20 9 20" }),
+                    /* @__PURE__ */ jsx("polyline", { points: "20 15 20 20 15 20" })
+                  ] }) : /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                    /* @__PURE__ */ jsx("polyline", { points: "3 9 3 3 9 3" }),
+                    /* @__PURE__ */ jsx("polyline", { points: "21 9 21 3 15 3" }),
+                    /* @__PURE__ */ jsx("polyline", { points: "3 15 3 21 9 21" }),
+                    /* @__PURE__ */ jsx("polyline", { points: "21 15 21 21 15 21" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "chatbotlite-close",
+                  onClick: () => setOpen(false),
+                  "aria-label": "Close chat",
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    color: TEXT_MUTED,
+                    width: 32,
+                    height: 32,
+                    borderRadius: 10,
+                    fontSize: 22,
+                    lineHeight: 1,
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: "\xD7"
+                }
+              )
+            ] })
           ] }),
           /* @__PURE__ */ jsxs(
             "div",