@hookraft/use-claude-support 0.1.3

package/dist/index.cjs

@@ -0,0 +1,483 @@
+"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, {
+  useClaudeSupport: () => useClaudeSupport
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/SupportWidget.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CLAUDE_LOGO = "data:image/svg+xml;base64," + btoa(
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
+  <rect width="48" height="48" rx="12" fill="#D97757"/>
+  <path d="M32.16 13H28.7l-7.4 21.82h3.22l1.68-5.18h7.56l1.68 5.18h3.32L32.16 13zm-5.06 13.94 2.96-9.12 2.96 9.12h-5.92zM18.3 13h-3.46L11 22.06 7.16 13H3.7l5.96 13.44L3.7 39h3.46l4.62-10.5L16.4 39h3.46l-6-12.56L18.3 13z" fill="white"/>
+</svg>`
+);
+function ChatIcon({ size = 24 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2.546 21.16a.5.5 0 00.628.628l3.992-.892A9.96 9.96 0 0012 22c5.523 0 10-4.477 10-10S17.523 2 12 2z" }) });
+}
+function CloseIcon({ size = 18 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+function SendIcon({ size = 18 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+      ]
+    }
+  );
+}
+function TypingIndicator({ bg }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: 4,
+        padding: "10px 14px",
+        background: bg,
+        borderRadius: "18px 18px 18px 4px",
+        width: "fit-content",
+        alignItems: "center"
+      },
+      children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          style: {
+            width: 7,
+            height: 7,
+            borderRadius: "50%",
+            background: "#9ca3af",
+            display: "inline-block",
+            animation: "bounce 1.2s infinite",
+            animationDelay: `${i * 0.2}s`
+          }
+        },
+        i
+      ))
+    }
+  );
+}
+function useResolvedTheme(theme) {
+  const [resolved, setResolved] = (0, import_react.useState)("light");
+  (0, import_react.useEffect)(() => {
+    if (theme === "light" || theme === "dark") {
+      setResolved(theme);
+      return;
+    }
+    const checkTheme = () => {
+      const html = document.documentElement;
+      const dataTheme = html.getAttribute("data-theme");
+      const classList = html.classList;
+      if (dataTheme === "dark" || classList.contains("dark")) {
+        setResolved("dark");
+        return;
+      }
+      if (dataTheme === "light" || classList.contains("light")) {
+        setResolved("light");
+        return;
+      }
+      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      setResolved(prefersDark ? "dark" : "light");
+    };
+    checkTheme();
+    const observer = new MutationObserver(checkTheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme", "style"]
+    });
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    mq.addEventListener("change", checkTheme);
+    return () => {
+      observer.disconnect();
+      mq.removeEventListener("change", checkTheme);
+    };
+  }, [theme]);
+  return resolved;
+}
+function SupportWidgetComponent({
+  endpoint,
+  knowledge,
+  branding
+}) {
+  const {
+    theme = "system",
+    primaryColor = "#D97757",
+    logo = CLAUDE_LOGO,
+    title = "Claude Support"
+  } = branding;
+  const resolvedTheme = useResolvedTheme(theme);
+  const isDark = resolvedTheme === "dark";
+  const colors = {
+    bg: isDark ? "#1a1a1a" : "#ffffff",
+    border: isDark ? "#333333" : "#e5e7eb",
+    text: isDark ? "#f1f1f1" : "#111111",
+    textMuted: isDark ? "#9ca3af" : "#6b7280",
+    inputBg: isDark ? "#2a2a2a" : "#ffffff",
+    assistantBubble: isDark ? "#2a2a2a" : "#f3f4f6",
+    assistantText: isDark ? "#f1f1f1" : "#111111"
+  };
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [messages, setMessages] = (0, import_react.useState)([]);
+  const [input, setInput] = (0, import_react.useState)("");
+  const [isTyping, setIsTyping] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const messagesEndRef = (0, import_react.useRef)(null);
+  const inputRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, isTyping]);
+  (0, import_react.useEffect)(() => {
+    if (open) setTimeout(() => inputRef.current?.focus(), 100);
+  }, [open]);
+  (0, import_react.useEffect)(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, []);
+  const sendMessage = (0, import_react.useCallback)(async () => {
+    if (!input.trim() || isTyping) return;
+    setError(null);
+    const userMessage = {
+      id: crypto.randomUUID(),
+      role: "user",
+      content: input.trim(),
+      timestamp: Date.now()
+    };
+    const history = messages.map((m) => ({ role: m.role, content: m.content }));
+    setMessages((prev) => [...prev, userMessage]);
+    setInput("");
+    setIsTyping(true);
+    try {
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: userMessage.content, history, knowledge })
+      });
+      if (!res.ok) throw new Error(`Request failed: ${res.status}`);
+      const data = await res.json();
+      const assistantMessage = {
+        id: crypto.randomUUID(),
+        role: "assistant",
+        content: data.reply,
+        timestamp: Date.now()
+      };
+      setMessages((prev) => [...prev, assistantMessage]);
+    } catch {
+      setError("Something went wrong. Please try again.");
+    } finally {
+      setIsTyping(false);
+    }
+  }, [input, isTyping, messages, endpoint, knowledge]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+        @keyframes bounce {
+          0%, 60%, 100% { transform: translateY(0); }
+          30% { transform: translateY(-6px); }
+        }
+        @keyframes fadeIn {
+          from { opacity: 0; transform: translateY(8px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      ` }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          bottom: 90,
+          right: 24,
+          width: 360,
+          maxWidth: "calc(100vw - 32px)",
+          height: 520,
+          maxHeight: "calc(100vh - 120px)",
+          background: colors.bg,
+          border: `1px solid ${colors.border}`,
+          borderRadius: 16,
+          boxShadow: "0 8px 40px rgba(0,0,0,0.18)",
+          display: "flex",
+          flexDirection: "column",
+          zIndex: 9998,
+          animation: "fadeIn 0.2s ease",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 10,
+                padding: "14px 16px",
+                borderBottom: `1px solid ${colors.border}`,
+                background: colors.bg
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "img",
+                  {
+                    src: logo,
+                    alt: "logo",
+                    style: { width: 28, height: 28, borderRadius: 6, objectFit: "cover" }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontWeight: 600, fontSize: 15, color: colors.text, flex: 1 }, children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    onClick: () => setOpen(false),
+                    style: {
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      color: colors.textMuted,
+                      padding: 4,
+                      display: "flex",
+                      alignItems: "center"
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, {})
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              style: {
+                flex: 1,
+                overflowY: "auto",
+                padding: 16,
+                display: "flex",
+                flexDirection: "column",
+                gap: 12
+              },
+              children: [
+                messages.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    style: {
+                      background: colors.assistantBubble,
+                      color: colors.assistantText,
+                      padding: "10px 14px",
+                      borderRadius: "18px 18px 18px 4px",
+                      fontSize: 14,
+                      lineHeight: 1.5,
+                      maxWidth: "85%"
+                    },
+                    children: "\u{1F44B} Hi! How can I help you today?"
+                  }
+                ),
+                messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      justifyContent: msg.role === "user" ? "flex-end" : "flex-start"
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        style: {
+                          maxWidth: "85%",
+                          padding: "10px 14px",
+                          borderRadius: msg.role === "user" ? "18px 18px 4px 18px" : "18px 18px 18px 4px",
+                          background: msg.role === "user" ? primaryColor : colors.assistantBubble,
+                          color: msg.role === "user" ? "#ffffff" : colors.assistantText,
+                          fontSize: 14,
+                          lineHeight: 1.6,
+                          wordBreak: "break-word",
+                          whiteSpace: "pre-wrap"
+                        },
+                        children: msg.content
+                      }
+                    )
+                  },
+                  msg.id
+                )),
+                isTyping && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TypingIndicator, { bg: colors.assistantBubble }),
+                error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 12, color: "#ef4444", textAlign: "center", margin: 0 }, children: error }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: messagesEndRef })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              style: {
+                padding: "10px 12px",
+                borderTop: `1px solid ${colors.border}`,
+                display: "flex",
+                gap: 8,
+                alignItems: "flex-end",
+                background: colors.bg
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "textarea",
+                  {
+                    ref: inputRef,
+                    value: input,
+                    onChange: (e) => setInput(e.target.value),
+                    onKeyDown: handleKeyDown,
+                    placeholder: "Ask a question...",
+                    rows: 1,
+                    disabled: isTyping,
+                    style: {
+                      flex: 1,
+                      resize: "none",
+                      border: `1px solid ${colors.border}`,
+                      borderRadius: 10,
+                      padding: "8px 12px",
+                      fontSize: 14,
+                      lineHeight: 1.5,
+                      background: colors.inputBg,
+                      color: colors.text,
+                      outline: "none",
+                      fontFamily: "inherit",
+                      maxHeight: 100,
+                      overflowY: "auto"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    onClick: sendMessage,
+                    disabled: !input.trim() || isTyping,
+                    style: {
+                      width: 38,
+                      height: 38,
+                      borderRadius: 10,
+                      background: primaryColor,
+                      border: "none",
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: "#ffffff",
+                      opacity: !input.trim() || isTyping ? 0.4 : 1,
+                      flexShrink: 0,
+                      transition: "opacity 0.15s"
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SendIcon, {})
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        onClick: () => setOpen((prev) => !prev),
+        style: {
+          position: "fixed",
+          bottom: 24,
+          right: 24,
+          width: 56,
+          height: 56,
+          borderRadius: "50%",
+          background: primaryColor,
+          border: "none",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#ffffff",
+          boxShadow: "0 4px 20px rgba(0,0,0,0.2)",
+          zIndex: 9999,
+          transition: "transform 0.15s, box-shadow 0.15s"
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.transform = "scale(1.08)";
+          e.currentTarget.style.boxShadow = "0 6px 24px rgba(0,0,0,0.28)";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.transform = "scale(1)";
+          e.currentTarget.style.boxShadow = "0 4px 20px rgba(0,0,0,0.2)";
+        },
+        "aria-label": open ? "Close support chat" : "Open support chat",
+        children: open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, { size: 22 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChatIcon, { size: 24 })
+      }
+    )
+  ] });
+}
+
+// src/useClaudeSupport.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function useClaudeSupport(options) {
+  const { endpoint, knowledge, branding = {} } = options;
+  const SupportWidget = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    SupportWidgetComponent,
+    {
+      endpoint,
+      knowledge,
+      branding
+    }
+  );
+  SupportWidget.displayName = "ClaudeSupport.Widget";
+  return { SupportWidget };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useClaudeSupport
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/SupportWidget.tsx","../src/useClaudeSupport.tsx"],"sourcesContent":["export { useClaudeSupport } from \"./useClaudeSupport\"\nexport type { ClaudeSupport } from \"./useClaudeSupport\"","\"use client\"\n\nimport React, { useState, useRef, useEffect, useCallback } from \"react\"\nimport type { ClaudeSupport } from \"./useClaudeSupport\"\n\n// ─── Claude logo ──────────────────────────────────────────────────────────────\n\nconst CLAUDE_LOGO =\n  \"data:image/svg+xml;base64,\" +\n  btoa(\n    `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" fill=\"none\">\n  <rect width=\"48\" height=\"48\" rx=\"12\" fill=\"#D97757\"/>\n  <path d=\"M32.16 13H28.7l-7.4 21.82h3.22l1.68-5.18h7.56l1.68 5.18h3.32L32.16 13zm-5.06 13.94 2.96-9.12 2.96 9.12h-5.92zM18.3 13h-3.46L11 22.06 7.16 13H3.7l5.96 13.44L3.7 39h3.46l4.62-10.5L16.4 39h3.46l-6-12.56L18.3 13z\" fill=\"white\"/>\n</svg>`\n  )\n\n// ─── Icons ────────────────────────────────────────────────────────────────────\n\nfunction ChatIcon({ size = 24 }: { size?: number }) {\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2.546 21.16a.5.5 0 00.628.628l3.992-.892A9.96 9.96 0 0012 22c5.523 0 10-4.477 10-10S17.523 2 12 2z\" />\n    </svg>\n  )\n}\n\nfunction CloseIcon({ size = 18 }: { size?: number }) {\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n    >\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  )\n}\n\nfunction SendIcon({ size = 18 }: { size?: number }) {\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\" />\n      <polygon points=\"22 2 15 22 11 13 2 9 22 2\" />\n    </svg>\n  )\n}\n\n// ─── Typing indicator ─────────────────────────────────────────────────────────\n\nfunction TypingIndicator({ bg }: { bg: string }) {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        gap: 4,\n        padding: \"10px 14px\",\n        background: bg,\n        borderRadius: \"18px 18px 18px 4px\",\n        width: \"fit-content\",\n        alignItems: \"center\",\n      }}\n    >\n      {[0, 1, 2].map((i) => (\n        <span\n          key={i}\n          style={{\n            width: 7,\n            height: 7,\n            borderRadius: \"50%\",\n            background: \"#9ca3af\",\n            display: \"inline-block\",\n            animation: \"bounce 1.2s infinite\",\n            animationDelay: `${i * 0.2}s`,\n          }}\n        />\n      ))}\n    </div>\n  )\n}\n\n// ─── Theme resolver ───────────────────────────────────────────────────────────\n\nfunction useResolvedTheme(theme: ClaudeSupport.Theme): \"light\" | \"dark\" {\n  const [resolved, setResolved] = useState<\"light\" | \"dark\">(\"light\")\n\n  useEffect(() => {\n    if (theme === \"light\" || theme === \"dark\") {\n      setResolved(theme)\n      return\n    }\n\n    const checkTheme = () => {\n      const html = document.documentElement\n      const dataTheme = html.getAttribute(\"data-theme\")\n      const classList = html.classList\n\n      if (dataTheme === \"dark\" || classList.contains(\"dark\")) {\n        setResolved(\"dark\")\n        return\n      }\n      if (dataTheme === \"light\" || classList.contains(\"light\")) {\n        setResolved(\"light\")\n        return\n      }\n\n      const prefersDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n      setResolved(prefersDark ? \"dark\" : \"light\")\n    }\n\n    checkTheme()\n\n    const observer = new MutationObserver(checkTheme)\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\", \"style\"],\n    })\n\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", checkTheme)\n\n    return () => {\n      observer.disconnect()\n      mq.removeEventListener(\"change\", checkTheme)\n    }\n  }, [theme])\n\n  return resolved\n}\n\n// ─── Widget ───────────────────────────────────────────────────────────────────\n\ninterface SupportWidgetProps {\n  endpoint: string\n  knowledge: string\n  branding: ClaudeSupport.Branding\n}\n\nexport function SupportWidgetComponent({\n  endpoint,\n  knowledge,\n  branding,\n}: SupportWidgetProps) {\n  const {\n    theme = \"system\",\n    primaryColor = \"#D97757\",\n    logo = CLAUDE_LOGO,\n    title = \"Claude Support\",\n  } = branding\n\n  const resolvedTheme = useResolvedTheme(theme)\n  const isDark = resolvedTheme === \"dark\"\n\n  const colors = {\n    bg: isDark ? \"#1a1a1a\" : \"#ffffff\",\n    border: isDark ? \"#333333\" : \"#e5e7eb\",\n    text: isDark ? \"#f1f1f1\" : \"#111111\",\n    textMuted: isDark ? \"#9ca3af\" : \"#6b7280\",\n    inputBg: isDark ? \"#2a2a2a\" : \"#ffffff\",\n    assistantBubble: isDark ? \"#2a2a2a\" : \"#f3f4f6\",\n    assistantText: isDark ? \"#f1f1f1\" : \"#111111\",\n  }\n\n  const [open, setOpen] = useState(false)\n  const [messages, setMessages] = useState<ClaudeSupport.Message[]>([])\n  const [input, setInput] = useState(\"\")\n  const [isTyping, setIsTyping] = useState(false)\n  const [error, setError] = useState<string | null>(null)\n  const messagesEndRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLTextAreaElement>(null)\n\n  useEffect(() => {\n    messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" })\n  }, [messages, isTyping])\n\n  useEffect(() => {\n    if (open) setTimeout(() => inputRef.current?.focus(), 100)\n  }, [open])\n\n  useEffect(() => {\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false)\n    }\n    document.addEventListener(\"keydown\", handler)\n    return () => document.removeEventListener(\"keydown\", handler)\n  }, [])\n\n  const sendMessage = useCallback(async () => {\n    if (!input.trim() || isTyping) return\n    setError(null)\n\n    const userMessage: ClaudeSupport.Message = {\n      id: crypto.randomUUID(),\n      role: \"user\",\n      content: input.trim(),\n      timestamp: Date.now(),\n    }\n\n    const history = messages.map((m) => ({ role: m.role, content: m.content }))\n    setMessages((prev) => [...prev, userMessage])\n    setInput(\"\")\n    setIsTyping(true)\n\n    try {\n      const res = await fetch(endpoint, {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ message: userMessage.content, history, knowledge }),\n      })\n\n      if (!res.ok) throw new Error(`Request failed: ${res.status}`)\n      const data = await res.json()\n\n      const assistantMessage: ClaudeSupport.Message = {\n        id: crypto.randomUUID(),\n        role: \"assistant\",\n        content: data.reply,\n        timestamp: Date.now(),\n      }\n\n      setMessages((prev) => [...prev, assistantMessage])\n    } catch {\n      setError(\"Something went wrong. Please try again.\")\n    } finally {\n      setIsTyping(false)\n    }\n  }, [input, isTyping, messages, endpoint, knowledge])\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault()\n      sendMessage()\n    }\n  }\n\n  return (\n    <>\n      <style>{`\n        @keyframes bounce {\n          0%, 60%, 100% { transform: translateY(0); }\n          30% { transform: translateY(-6px); }\n        }\n        @keyframes fadeIn {\n          from { opacity: 0; transform: translateY(8px); }\n          to { opacity: 1; transform: translateY(0); }\n        }\n      `}</style>\n\n      {open && (\n        <div\n          style={{\n            position: \"fixed\",\n            bottom: 90,\n            right: 24,\n            width: 360,\n            maxWidth: \"calc(100vw - 32px)\",\n            height: 520,\n            maxHeight: \"calc(100vh - 120px)\",\n            background: colors.bg,\n            border: `1px solid ${colors.border}`,\n            borderRadius: 16,\n            boxShadow: \"0 8px 40px rgba(0,0,0,0.18)\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            zIndex: 9998,\n            animation: \"fadeIn 0.2s ease\",\n            overflow: \"hidden\",\n          }}\n        >\n          {/* Header */}\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: 10,\n              padding: \"14px 16px\",\n              borderBottom: `1px solid ${colors.border}`,\n              background: colors.bg,\n            }}\n          >\n            <img\n              src={logo}\n              alt=\"logo\"\n              style={{ width: 28, height: 28, borderRadius: 6, objectFit: \"cover\" }}\n            />\n            <span style={{ fontWeight: 600, fontSize: 15, color: colors.text, flex: 1 }}>\n              {title}\n            </span>\n            <button\n              onClick={() => setOpen(false)}\n              style={{\n                background: \"none\",\n                border: \"none\",\n                cursor: \"pointer\",\n                color: colors.textMuted,\n                padding: 4,\n                display: \"flex\",\n                alignItems: \"center\",\n              }}\n            >\n              <CloseIcon />\n            </button>\n          </div>\n\n          {/* Messages */}\n          <div\n            style={{\n              flex: 1,\n              overflowY: \"auto\",\n              padding: 16,\n              display: \"flex\",\n              flexDirection: \"column\",\n              gap: 12,\n            }}\n          >\n            {messages.length === 0 && (\n              <div\n                style={{\n                  background: colors.assistantBubble,\n                  color: colors.assistantText,\n                  padding: \"10px 14px\",\n                  borderRadius: \"18px 18px 18px 4px\",\n                  fontSize: 14,\n                  lineHeight: 1.5,\n                  maxWidth: \"85%\",\n                }}\n              >\n                👋 Hi! How can I help you today?\n              </div>\n            )}\n\n            {messages.map((msg) => (\n              <div\n                key={msg.id}\n                style={{\n                  display: \"flex\",\n                  justifyContent: msg.role === \"user\" ? \"flex-end\" : \"flex-start\",\n                }}\n              >\n                <div\n                  style={{\n                    maxWidth: \"85%\",\n                    padding: \"10px 14px\",\n                    borderRadius:\n                      msg.role === \"user\"\n                        ? \"18px 18px 4px 18px\"\n                        : \"18px 18px 18px 4px\",\n                    background:\n                      msg.role === \"user\" ? primaryColor : colors.assistantBubble,\n                    color: msg.role === \"user\" ? \"#ffffff\" : colors.assistantText,\n                    fontSize: 14,\n                    lineHeight: 1.6,\n                    wordBreak: \"break-word\",\n                    whiteSpace: \"pre-wrap\",\n                  }}\n                >\n                  {msg.content}\n                </div>\n              </div>\n            ))}\n\n            {isTyping && <TypingIndicator bg={colors.assistantBubble} />}\n\n            {error && (\n              <p style={{ fontSize: 12, color: \"#ef4444\", textAlign: \"center\", margin: 0 }}>\n                {error}\n              </p>\n            )}\n\n            <div ref={messagesEndRef} />\n          </div>\n\n          {/* Input */}\n          <div\n            style={{\n              padding: \"10px 12px\",\n              borderTop: `1px solid ${colors.border}`,\n              display: \"flex\",\n              gap: 8,\n              alignItems: \"flex-end\",\n              background: colors.bg,\n            }}\n          >\n            <textarea\n              ref={inputRef}\n              value={input}\n              onChange={(e) => setInput(e.target.value)}\n              onKeyDown={handleKeyDown}\n              placeholder=\"Ask a question...\"\n              rows={1}\n              disabled={isTyping}\n              style={{\n                flex: 1,\n                resize: \"none\",\n                border: `1px solid ${colors.border}`,\n                borderRadius: 10,\n                padding: \"8px 12px\",\n                fontSize: 14,\n                lineHeight: 1.5,\n                background: colors.inputBg,\n                color: colors.text,\n                outline: \"none\",\n                fontFamily: \"inherit\",\n                maxHeight: 100,\n                overflowY: \"auto\",\n              }}\n            />\n            <button\n              onClick={sendMessage}\n              disabled={!input.trim() || isTyping}\n              style={{\n                width: 38,\n                height: 38,\n                borderRadius: 10,\n                background: primaryColor,\n                border: \"none\",\n                cursor: \"pointer\",\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                color: \"#ffffff\",\n                opacity: !input.trim() || isTyping ? 0.4 : 1,\n                flexShrink: 0,\n                transition: \"opacity 0.15s\",\n              }}\n            >\n              <SendIcon />\n            </button>\n          </div>\n        </div>\n      )}\n\n      {/* Trigger button */}\n      <button\n        onClick={() => setOpen((prev) => !prev)}\n        style={{\n          position: \"fixed\",\n          bottom: 24,\n          right: 24,\n          width: 56,\n          height: 56,\n          borderRadius: \"50%\",\n          background: primaryColor,\n          border: \"none\",\n          cursor: \"pointer\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          color: \"#ffffff\",\n          boxShadow: \"0 4px 20px rgba(0,0,0,0.2)\",\n          zIndex: 9999,\n          transition: \"transform 0.15s, box-shadow 0.15s\",\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.transform = \"scale(1.08)\"\n          e.currentTarget.style.boxShadow = \"0 6px 24px rgba(0,0,0,0.28)\"\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.transform = \"scale(1)\"\n          e.currentTarget.style.boxShadow = \"0 4px 20px rgba(0,0,0,0.2)\"\n        }}\n        aria-label={open ? \"Close support chat\" : \"Open support chat\"}\n      >\n        {open ? <CloseIcon size={22} /> : <ChatIcon size={24} />}\n      </button>\n    </>\n  )\n}","\"use client\"\n\nimport React from \"react\"\nimport { SupportWidgetComponent } from \"./SupportWidget\"\n\n// ─── Namespace ────────────────────────────────────────────────────────────────\n\nexport namespace ClaudeSupport {\n  export type Theme = \"light\" | \"dark\" | \"system\"\n\n  export interface Branding {\n    theme?: Theme\n    primaryColor?: string\n    logo?: string\n    title?: string\n  }\n\n  export interface Message {\n    id: string\n    role: \"user\" | \"assistant\"\n    content: string\n    timestamp: number\n  }\n\n  export interface Options {\n    endpoint: string\n    knowledge: string\n    branding?: Branding\n  }\n\n  export interface Return {\n    SupportWidget: React.FC\n  }\n}\n\n// ─── Hook ─────────────────────────────────────────────────────────────────────\n\nexport function useClaudeSupport(options: ClaudeSupport.Options): ClaudeSupport.Return {\n  const { endpoint, knowledge, branding = {} } = options\n\n  const SupportWidget: React.FC = () => (\n    <SupportWidgetComponent\n      endpoint={endpoint}\n      knowledge={knowledge}\n      branding={branding}\n    />\n  )\n\n  SupportWidget.displayName = \"ClaudeSupport.Widget\"\n\n  return { SupportWidget }\n}"],"mappings":"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","names":["import_jsx_runtime"]}

package/dist/index.d.cts

@@ -0,0 +1,28 @@
+import React from 'react';
+
+declare namespace ClaudeSupport {
+    type Theme = "light" | "dark" | "system";
+    interface Branding {
+        theme?: Theme;
+        primaryColor?: string;
+        logo?: string;
+        title?: string;
+    }
+    interface Message {
+        id: string;
+        role: "user" | "assistant";
+        content: string;
+        timestamp: number;
+    }
+    interface Options {
+        endpoint: string;
+        knowledge: string;
+        branding?: Branding;
+    }
+    interface Return {
+        SupportWidget: React.FC;
+    }
+}
+declare function useClaudeSupport(options: ClaudeSupport.Options): ClaudeSupport.Return;
+
+export { ClaudeSupport, useClaudeSupport };

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+
+declare namespace ClaudeSupport {
+    type Theme = "light" | "dark" | "system";
+    interface Branding {
+        theme?: Theme;
+        primaryColor?: string;
+        logo?: string;
+        title?: string;
+    }
+    interface Message {
+        id: string;
+        role: "user" | "assistant";
+        content: string;
+        timestamp: number;
+    }
+    interface Options {
+        endpoint: string;
+        knowledge: string;
+        branding?: Branding;
+    }
+    interface Return {
+        SupportWidget: React.FC;
+    }
+}
+declare function useClaudeSupport(options: ClaudeSupport.Options): ClaudeSupport.Return;
+
+export { ClaudeSupport, useClaudeSupport };

package/dist/index.js

@@ -0,0 +1,456 @@
+// src/SupportWidget.tsx
+import { useState, useRef, useEffect, useCallback } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CLAUDE_LOGO = "data:image/svg+xml;base64," + btoa(
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
+  <rect width="48" height="48" rx="12" fill="#D97757"/>
+  <path d="M32.16 13H28.7l-7.4 21.82h3.22l1.68-5.18h7.56l1.68 5.18h3.32L32.16 13zm-5.06 13.94 2.96-9.12 2.96 9.12h-5.92zM18.3 13h-3.46L11 22.06 7.16 13H3.7l5.96 13.44L3.7 39h3.46l4.62-10.5L16.4 39h3.46l-6-12.56L18.3 13z" fill="white"/>
+</svg>`
+);
+function ChatIcon({ size = 24 }) {
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2.546 21.16a.5.5 0 00.628.628l3.992-.892A9.96 9.96 0 0012 22c5.523 0 10-4.477 10-10S17.523 2 12 2z" }) });
+}
+function CloseIcon({ size = 18 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+function SendIcon({ size = 18 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+        /* @__PURE__ */ jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+      ]
+    }
+  );
+}
+function TypingIndicator({ bg }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: 4,
+        padding: "10px 14px",
+        background: bg,
+        borderRadius: "18px 18px 18px 4px",
+        width: "fit-content",
+        alignItems: "center"
+      },
+      children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            width: 7,
+            height: 7,
+            borderRadius: "50%",
+            background: "#9ca3af",
+            display: "inline-block",
+            animation: "bounce 1.2s infinite",
+            animationDelay: `${i * 0.2}s`
+          }
+        },
+        i
+      ))
+    }
+  );
+}
+function useResolvedTheme(theme) {
+  const [resolved, setResolved] = useState("light");
+  useEffect(() => {
+    if (theme === "light" || theme === "dark") {
+      setResolved(theme);
+      return;
+    }
+    const checkTheme = () => {
+      const html = document.documentElement;
+      const dataTheme = html.getAttribute("data-theme");
+      const classList = html.classList;
+      if (dataTheme === "dark" || classList.contains("dark")) {
+        setResolved("dark");
+        return;
+      }
+      if (dataTheme === "light" || classList.contains("light")) {
+        setResolved("light");
+        return;
+      }
+      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      setResolved(prefersDark ? "dark" : "light");
+    };
+    checkTheme();
+    const observer = new MutationObserver(checkTheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme", "style"]
+    });
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    mq.addEventListener("change", checkTheme);
+    return () => {
+      observer.disconnect();
+      mq.removeEventListener("change", checkTheme);
+    };
+  }, [theme]);
+  return resolved;
+}
+function SupportWidgetComponent({
+  endpoint,
+  knowledge,
+  branding
+}) {
+  const {
+    theme = "system",
+    primaryColor = "#D97757",
+    logo = CLAUDE_LOGO,
+    title = "Claude Support"
+  } = branding;
+  const resolvedTheme = useResolvedTheme(theme);
+  const isDark = resolvedTheme === "dark";
+  const colors = {
+    bg: isDark ? "#1a1a1a" : "#ffffff",
+    border: isDark ? "#333333" : "#e5e7eb",
+    text: isDark ? "#f1f1f1" : "#111111",
+    textMuted: isDark ? "#9ca3af" : "#6b7280",
+    inputBg: isDark ? "#2a2a2a" : "#ffffff",
+    assistantBubble: isDark ? "#2a2a2a" : "#f3f4f6",
+    assistantText: isDark ? "#f1f1f1" : "#111111"
+  };
+  const [open, setOpen] = useState(false);
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState("");
+  const [isTyping, setIsTyping] = useState(false);
+  const [error, setError] = useState(null);
+  const messagesEndRef = useRef(null);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, isTyping]);
+  useEffect(() => {
+    if (open) setTimeout(() => inputRef.current?.focus(), 100);
+  }, [open]);
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, []);
+  const sendMessage = useCallback(async () => {
+    if (!input.trim() || isTyping) return;
+    setError(null);
+    const userMessage = {
+      id: crypto.randomUUID(),
+      role: "user",
+      content: input.trim(),
+      timestamp: Date.now()
+    };
+    const history = messages.map((m) => ({ role: m.role, content: m.content }));
+    setMessages((prev) => [...prev, userMessage]);
+    setInput("");
+    setIsTyping(true);
+    try {
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: userMessage.content, history, knowledge })
+      });
+      if (!res.ok) throw new Error(`Request failed: ${res.status}`);
+      const data = await res.json();
+      const assistantMessage = {
+        id: crypto.randomUUID(),
+        role: "assistant",
+        content: data.reply,
+        timestamp: Date.now()
+      };
+      setMessages((prev) => [...prev, assistantMessage]);
+    } catch {
+      setError("Something went wrong. Please try again.");
+    } finally {
+      setIsTyping(false);
+    }
+  }, [input, isTyping, messages, endpoint, knowledge]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes bounce {
+          0%, 60%, 100% { transform: translateY(0); }
+          30% { transform: translateY(-6px); }
+        }
+        @keyframes fadeIn {
+          from { opacity: 0; transform: translateY(8px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      ` }),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          bottom: 90,
+          right: 24,
+          width: 360,
+          maxWidth: "calc(100vw - 32px)",
+          height: 520,
+          maxHeight: "calc(100vh - 120px)",
+          background: colors.bg,
+          border: `1px solid ${colors.border}`,
+          borderRadius: 16,
+          boxShadow: "0 8px 40px rgba(0,0,0,0.18)",
+          display: "flex",
+          flexDirection: "column",
+          zIndex: 9998,
+          animation: "fadeIn 0.2s ease",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 10,
+                padding: "14px 16px",
+                borderBottom: `1px solid ${colors.border}`,
+                background: colors.bg
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: logo,
+                    alt: "logo",
+                    style: { width: 28, height: 28, borderRadius: 6, objectFit: "cover" }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 15, color: colors.text, flex: 1 }, children: title }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => setOpen(false),
+                    style: {
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      color: colors.textMuted,
+                      padding: 4,
+                      display: "flex",
+                      alignItems: "center"
+                    },
+                    children: /* @__PURE__ */ jsx(CloseIcon, {})
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                flex: 1,
+                overflowY: "auto",
+                padding: 16,
+                display: "flex",
+                flexDirection: "column",
+                gap: 12
+              },
+              children: [
+                messages.length === 0 && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      background: colors.assistantBubble,
+                      color: colors.assistantText,
+                      padding: "10px 14px",
+                      borderRadius: "18px 18px 18px 4px",
+                      fontSize: 14,
+                      lineHeight: 1.5,
+                      maxWidth: "85%"
+                    },
+                    children: "\u{1F44B} Hi! How can I help you today?"
+                  }
+                ),
+                messages.map((msg) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      justifyContent: msg.role === "user" ? "flex-end" : "flex-start"
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          maxWidth: "85%",
+                          padding: "10px 14px",
+                          borderRadius: msg.role === "user" ? "18px 18px 4px 18px" : "18px 18px 18px 4px",
+                          background: msg.role === "user" ? primaryColor : colors.assistantBubble,
+                          color: msg.role === "user" ? "#ffffff" : colors.assistantText,
+                          fontSize: 14,
+                          lineHeight: 1.6,
+                          wordBreak: "break-word",
+                          whiteSpace: "pre-wrap"
+                        },
+                        children: msg.content
+                      }
+                    )
+                  },
+                  msg.id
+                )),
+                isTyping && /* @__PURE__ */ jsx(TypingIndicator, { bg: colors.assistantBubble }),
+                error && /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: "#ef4444", textAlign: "center", margin: 0 }, children: error }),
+                /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                padding: "10px 12px",
+                borderTop: `1px solid ${colors.border}`,
+                display: "flex",
+                gap: 8,
+                alignItems: "flex-end",
+                background: colors.bg
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    ref: inputRef,
+                    value: input,
+                    onChange: (e) => setInput(e.target.value),
+                    onKeyDown: handleKeyDown,
+                    placeholder: "Ask a question...",
+                    rows: 1,
+                    disabled: isTyping,
+                    style: {
+                      flex: 1,
+                      resize: "none",
+                      border: `1px solid ${colors.border}`,
+                      borderRadius: 10,
+                      padding: "8px 12px",
+                      fontSize: 14,
+                      lineHeight: 1.5,
+                      background: colors.inputBg,
+                      color: colors.text,
+                      outline: "none",
+                      fontFamily: "inherit",
+                      maxHeight: 100,
+                      overflowY: "auto"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: sendMessage,
+                    disabled: !input.trim() || isTyping,
+                    style: {
+                      width: 38,
+                      height: 38,
+                      borderRadius: 10,
+                      background: primaryColor,
+                      border: "none",
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: "#ffffff",
+                      opacity: !input.trim() || isTyping ? 0.4 : 1,
+                      flexShrink: 0,
+                      transition: "opacity 0.15s"
+                    },
+                    children: /* @__PURE__ */ jsx(SendIcon, {})
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setOpen((prev) => !prev),
+        style: {
+          position: "fixed",
+          bottom: 24,
+          right: 24,
+          width: 56,
+          height: 56,
+          borderRadius: "50%",
+          background: primaryColor,
+          border: "none",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#ffffff",
+          boxShadow: "0 4px 20px rgba(0,0,0,0.2)",
+          zIndex: 9999,
+          transition: "transform 0.15s, box-shadow 0.15s"
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.transform = "scale(1.08)";
+          e.currentTarget.style.boxShadow = "0 6px 24px rgba(0,0,0,0.28)";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.transform = "scale(1)";
+          e.currentTarget.style.boxShadow = "0 4px 20px rgba(0,0,0,0.2)";
+        },
+        "aria-label": open ? "Close support chat" : "Open support chat",
+        children: open ? /* @__PURE__ */ jsx(CloseIcon, { size: 22 }) : /* @__PURE__ */ jsx(ChatIcon, { size: 24 })
+      }
+    )
+  ] });
+}
+
+// src/useClaudeSupport.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function useClaudeSupport(options) {
+  const { endpoint, knowledge, branding = {} } = options;
+  const SupportWidget = () => /* @__PURE__ */ jsx2(
+    SupportWidgetComponent,
+    {
+      endpoint,
+      knowledge,
+      branding
+    }
+  );
+  SupportWidget.displayName = "ClaudeSupport.Widget";
+  return { SupportWidget };
+}
+export {
+  useClaudeSupport
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SupportWidget.tsx","../src/useClaudeSupport.tsx"],"sourcesContent":["\"use client\"\n\nimport React, { useState, useRef, useEffect, useCallback } from \"react\"\nimport type { ClaudeSupport } from \"./useClaudeSupport\"\n\n// ─── Claude logo ──────────────────────────────────────────────────────────────\n\nconst CLAUDE_LOGO =\n  \"data:image/svg+xml;base64,\" +\n  btoa(\n    `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" fill=\"none\">\n  <rect width=\"48\" height=\"48\" rx=\"12\" fill=\"#D97757\"/>\n  <path d=\"M32.16 13H28.7l-7.4 21.82h3.22l1.68-5.18h7.56l1.68 5.18h3.32L32.16 13zm-5.06 13.94 2.96-9.12 2.96 9.12h-5.92zM18.3 13h-3.46L11 22.06 7.16 13H3.7l5.96 13.44L3.7 39h3.46l4.62-10.5L16.4 39h3.46l-6-12.56L18.3 13z\" fill=\"white\"/>\n</svg>`\n  )\n\n// ─── Icons ────────────────────────────────────────────────────────────────────\n\nfunction ChatIcon({ size = 24 }: { size?: number }) {\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2.546 21.16a.5.5 0 00.628.628l3.992-.892A9.96 9.96 0 0012 22c5.523 0 10-4.477 10-10S17.523 2 12 2z\" />\n    </svg>\n  )\n}\n\nfunction CloseIcon({ size = 18 }: { size?: number }) {\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n    >\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  )\n}\n\nfunction SendIcon({ size = 18 }: { size?: number }) {\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\" />\n      <polygon points=\"22 2 15 22 11 13 2 9 22 2\" />\n    </svg>\n  )\n}\n\n// ─── Typing indicator ─────────────────────────────────────────────────────────\n\nfunction TypingIndicator({ bg }: { bg: string }) {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        gap: 4,\n        padding: \"10px 14px\",\n        background: bg,\n        borderRadius: \"18px 18px 18px 4px\",\n        width: \"fit-content\",\n        alignItems: \"center\",\n      }}\n    >\n      {[0, 1, 2].map((i) => (\n        <span\n          key={i}\n          style={{\n            width: 7,\n            height: 7,\n            borderRadius: \"50%\",\n            background: \"#9ca3af\",\n            display: \"inline-block\",\n            animation: \"bounce 1.2s infinite\",\n            animationDelay: `${i * 0.2}s`,\n          }}\n        />\n      ))}\n    </div>\n  )\n}\n\n// ─── Theme resolver ───────────────────────────────────────────────────────────\n\nfunction useResolvedTheme(theme: ClaudeSupport.Theme): \"light\" | \"dark\" {\n  const [resolved, setResolved] = useState<\"light\" | \"dark\">(\"light\")\n\n  useEffect(() => {\n    if (theme === \"light\" || theme === \"dark\") {\n      setResolved(theme)\n      return\n    }\n\n    const checkTheme = () => {\n      const html = document.documentElement\n      const dataTheme = html.getAttribute(\"data-theme\")\n      const classList = html.classList\n\n      if (dataTheme === \"dark\" || classList.contains(\"dark\")) {\n        setResolved(\"dark\")\n        return\n      }\n      if (dataTheme === \"light\" || classList.contains(\"light\")) {\n        setResolved(\"light\")\n        return\n      }\n\n      const prefersDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n      setResolved(prefersDark ? \"dark\" : \"light\")\n    }\n\n    checkTheme()\n\n    const observer = new MutationObserver(checkTheme)\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\", \"style\"],\n    })\n\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", checkTheme)\n\n    return () => {\n      observer.disconnect()\n      mq.removeEventListener(\"change\", checkTheme)\n    }\n  }, [theme])\n\n  return resolved\n}\n\n// ─── Widget ───────────────────────────────────────────────────────────────────\n\ninterface SupportWidgetProps {\n  endpoint: string\n  knowledge: string\n  branding: ClaudeSupport.Branding\n}\n\nexport function SupportWidgetComponent({\n  endpoint,\n  knowledge,\n  branding,\n}: SupportWidgetProps) {\n  const {\n    theme = \"system\",\n    primaryColor = \"#D97757\",\n    logo = CLAUDE_LOGO,\n    title = \"Claude Support\",\n  } = branding\n\n  const resolvedTheme = useResolvedTheme(theme)\n  const isDark = resolvedTheme === \"dark\"\n\n  const colors = {\n    bg: isDark ? \"#1a1a1a\" : \"#ffffff\",\n    border: isDark ? \"#333333\" : \"#e5e7eb\",\n    text: isDark ? \"#f1f1f1\" : \"#111111\",\n    textMuted: isDark ? \"#9ca3af\" : \"#6b7280\",\n    inputBg: isDark ? \"#2a2a2a\" : \"#ffffff\",\n    assistantBubble: isDark ? \"#2a2a2a\" : \"#f3f4f6\",\n    assistantText: isDark ? \"#f1f1f1\" : \"#111111\",\n  }\n\n  const [open, setOpen] = useState(false)\n  const [messages, setMessages] = useState<ClaudeSupport.Message[]>([])\n  const [input, setInput] = useState(\"\")\n  const [isTyping, setIsTyping] = useState(false)\n  const [error, setError] = useState<string | null>(null)\n  const messagesEndRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLTextAreaElement>(null)\n\n  useEffect(() => {\n    messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" })\n  }, [messages, isTyping])\n\n  useEffect(() => {\n    if (open) setTimeout(() => inputRef.current?.focus(), 100)\n  }, [open])\n\n  useEffect(() => {\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false)\n    }\n    document.addEventListener(\"keydown\", handler)\n    return () => document.removeEventListener(\"keydown\", handler)\n  }, [])\n\n  const sendMessage = useCallback(async () => {\n    if (!input.trim() || isTyping) return\n    setError(null)\n\n    const userMessage: ClaudeSupport.Message = {\n      id: crypto.randomUUID(),\n      role: \"user\",\n      content: input.trim(),\n      timestamp: Date.now(),\n    }\n\n    const history = messages.map((m) => ({ role: m.role, content: m.content }))\n    setMessages((prev) => [...prev, userMessage])\n    setInput(\"\")\n    setIsTyping(true)\n\n    try {\n      const res = await fetch(endpoint, {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ message: userMessage.content, history, knowledge }),\n      })\n\n      if (!res.ok) throw new Error(`Request failed: ${res.status}`)\n      const data = await res.json()\n\n      const assistantMessage: ClaudeSupport.Message = {\n        id: crypto.randomUUID(),\n        role: \"assistant\",\n        content: data.reply,\n        timestamp: Date.now(),\n      }\n\n      setMessages((prev) => [...prev, assistantMessage])\n    } catch {\n      setError(\"Something went wrong. Please try again.\")\n    } finally {\n      setIsTyping(false)\n    }\n  }, [input, isTyping, messages, endpoint, knowledge])\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault()\n      sendMessage()\n    }\n  }\n\n  return (\n    <>\n      <style>{`\n        @keyframes bounce {\n          0%, 60%, 100% { transform: translateY(0); }\n          30% { transform: translateY(-6px); }\n        }\n        @keyframes fadeIn {\n          from { opacity: 0; transform: translateY(8px); }\n          to { opacity: 1; transform: translateY(0); }\n        }\n      `}</style>\n\n      {open && (\n        <div\n          style={{\n            position: \"fixed\",\n            bottom: 90,\n            right: 24,\n            width: 360,\n            maxWidth: \"calc(100vw - 32px)\",\n            height: 520,\n            maxHeight: \"calc(100vh - 120px)\",\n            background: colors.bg,\n            border: `1px solid ${colors.border}`,\n            borderRadius: 16,\n            boxShadow: \"0 8px 40px rgba(0,0,0,0.18)\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            zIndex: 9998,\n            animation: \"fadeIn 0.2s ease\",\n            overflow: \"hidden\",\n          }}\n        >\n          {/* Header */}\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: 10,\n              padding: \"14px 16px\",\n              borderBottom: `1px solid ${colors.border}`,\n              background: colors.bg,\n            }}\n          >\n            <img\n              src={logo}\n              alt=\"logo\"\n              style={{ width: 28, height: 28, borderRadius: 6, objectFit: \"cover\" }}\n            />\n            <span style={{ fontWeight: 600, fontSize: 15, color: colors.text, flex: 1 }}>\n              {title}\n            </span>\n            <button\n              onClick={() => setOpen(false)}\n              style={{\n                background: \"none\",\n                border: \"none\",\n                cursor: \"pointer\",\n                color: colors.textMuted,\n                padding: 4,\n                display: \"flex\",\n                alignItems: \"center\",\n              }}\n            >\n              <CloseIcon />\n            </button>\n          </div>\n\n          {/* Messages */}\n          <div\n            style={{\n              flex: 1,\n              overflowY: \"auto\",\n              padding: 16,\n              display: \"flex\",\n              flexDirection: \"column\",\n              gap: 12,\n            }}\n          >\n            {messages.length === 0 && (\n              <div\n                style={{\n                  background: colors.assistantBubble,\n                  color: colors.assistantText,\n                  padding: \"10px 14px\",\n                  borderRadius: \"18px 18px 18px 4px\",\n                  fontSize: 14,\n                  lineHeight: 1.5,\n                  maxWidth: \"85%\",\n                }}\n              >\n                👋 Hi! How can I help you today?\n              </div>\n            )}\n\n            {messages.map((msg) => (\n              <div\n                key={msg.id}\n                style={{\n                  display: \"flex\",\n                  justifyContent: msg.role === \"user\" ? \"flex-end\" : \"flex-start\",\n                }}\n              >\n                <div\n                  style={{\n                    maxWidth: \"85%\",\n                    padding: \"10px 14px\",\n                    borderRadius:\n                      msg.role === \"user\"\n                        ? \"18px 18px 4px 18px\"\n                        : \"18px 18px 18px 4px\",\n                    background:\n                      msg.role === \"user\" ? primaryColor : colors.assistantBubble,\n                    color: msg.role === \"user\" ? \"#ffffff\" : colors.assistantText,\n                    fontSize: 14,\n                    lineHeight: 1.6,\n                    wordBreak: \"break-word\",\n                    whiteSpace: \"pre-wrap\",\n                  }}\n                >\n                  {msg.content}\n                </div>\n              </div>\n            ))}\n\n            {isTyping && <TypingIndicator bg={colors.assistantBubble} />}\n\n            {error && (\n              <p style={{ fontSize: 12, color: \"#ef4444\", textAlign: \"center\", margin: 0 }}>\n                {error}\n              </p>\n            )}\n\n            <div ref={messagesEndRef} />\n          </div>\n\n          {/* Input */}\n          <div\n            style={{\n              padding: \"10px 12px\",\n              borderTop: `1px solid ${colors.border}`,\n              display: \"flex\",\n              gap: 8,\n              alignItems: \"flex-end\",\n              background: colors.bg,\n            }}\n          >\n            <textarea\n              ref={inputRef}\n              value={input}\n              onChange={(e) => setInput(e.target.value)}\n              onKeyDown={handleKeyDown}\n              placeholder=\"Ask a question...\"\n              rows={1}\n              disabled={isTyping}\n              style={{\n                flex: 1,\n                resize: \"none\",\n                border: `1px solid ${colors.border}`,\n                borderRadius: 10,\n                padding: \"8px 12px\",\n                fontSize: 14,\n                lineHeight: 1.5,\n                background: colors.inputBg,\n                color: colors.text,\n                outline: \"none\",\n                fontFamily: \"inherit\",\n                maxHeight: 100,\n                overflowY: \"auto\",\n              }}\n            />\n            <button\n              onClick={sendMessage}\n              disabled={!input.trim() || isTyping}\n              style={{\n                width: 38,\n                height: 38,\n                borderRadius: 10,\n                background: primaryColor,\n                border: \"none\",\n                cursor: \"pointer\",\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                color: \"#ffffff\",\n                opacity: !input.trim() || isTyping ? 0.4 : 1,\n                flexShrink: 0,\n                transition: \"opacity 0.15s\",\n              }}\n            >\n              <SendIcon />\n            </button>\n          </div>\n        </div>\n      )}\n\n      {/* Trigger button */}\n      <button\n        onClick={() => setOpen((prev) => !prev)}\n        style={{\n          position: \"fixed\",\n          bottom: 24,\n          right: 24,\n          width: 56,\n          height: 56,\n          borderRadius: \"50%\",\n          background: primaryColor,\n          border: \"none\",\n          cursor: \"pointer\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          color: \"#ffffff\",\n          boxShadow: \"0 4px 20px rgba(0,0,0,0.2)\",\n          zIndex: 9999,\n          transition: \"transform 0.15s, box-shadow 0.15s\",\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.transform = \"scale(1.08)\"\n          e.currentTarget.style.boxShadow = \"0 6px 24px rgba(0,0,0,0.28)\"\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.transform = \"scale(1)\"\n          e.currentTarget.style.boxShadow = \"0 4px 20px rgba(0,0,0,0.2)\"\n        }}\n        aria-label={open ? \"Close support chat\" : \"Open support chat\"}\n      >\n        {open ? <CloseIcon size={22} /> : <ChatIcon size={24} />}\n      </button>\n    </>\n  )\n}","\"use client\"\n\nimport React from \"react\"\nimport { SupportWidgetComponent } from \"./SupportWidget\"\n\n// ─── Namespace ────────────────────────────────────────────────────────────────\n\nexport namespace ClaudeSupport {\n  export type Theme = \"light\" | \"dark\" | \"system\"\n\n  export interface Branding {\n    theme?: Theme\n    primaryColor?: string\n    logo?: string\n    title?: string\n  }\n\n  export interface Message {\n    id: string\n    role: \"user\" | \"assistant\"\n    content: string\n    timestamp: number\n  }\n\n  export interface Options {\n    endpoint: string\n    knowledge: string\n    branding?: Branding\n  }\n\n  export interface Return {\n    SupportWidget: React.FC\n  }\n}\n\n// ─── Hook ─────────────────────────────────────────────────────────────────────\n\nexport function useClaudeSupport(options: ClaudeSupport.Options): ClaudeSupport.Return {\n  const { endpoint, knowledge, branding = {} } = options\n\n  const SupportWidget: React.FC = () => (\n    <SupportWidgetComponent\n      endpoint={endpoint}\n      knowledge={knowledge}\n      branding={branding}\n    />\n  )\n\n  SupportWidget.displayName = \"ClaudeSupport.Widget\"\n\n  return { SupportWidget }\n}"],"mappings":"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","names":["jsx"]}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@hookraft/use-claude-support",
+  "version": "0.1.3",
+  "description": "Add an AI-powered support chat to any React or Next.js app in minutes. Powered by Claude.",
+  "author": "virus",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "pub:release": "npm publish --access public"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "keywords": [
+    "react",
+    "hooks",
+    "claude",
+    "ai",
+    "support",
+    "chat",
+    "widget",
+    "anthropic",
+    "customer-support",
+    "nextjs",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/purposewalks9/Hookraft"
+  },
+  "homepage": "https://hookraft.site"
+}