@idevconn/ai-chat-client 0.1.2

package/dist/web-component/index.js

@@ -0,0 +1,706 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/web-component/index.ts
+var web_component_exports = {};
+__export(web_component_exports, {
+  AiChatElement: () => AiChatElement
+});
+module.exports = __toCommonJS(web_component_exports);
+var import_react6 = __toESM(require("react"));
+var import_client = require("react-dom/client");
+
+// src/react/AiChat.tsx
+var import_react5 = require("react");
+
+// src/hooks/use-chat.ts
+var import_react2 = require("react");
+
+// src/hooks/use-sse-stream.ts
+var import_react = require("react");
+function useSseStream(options) {
+  const [isStreaming, setIsStreaming] = (0, import_react.useState)(false);
+  const abortRef = (0, import_react.useRef)(null);
+  const abort = (0, import_react.useCallback)(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    setIsStreaming(false);
+  }, []);
+  const streamMessage = (0, import_react.useCallback)(
+    async (sessionId, message, onToken, onDone, onError) => {
+      abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+      setIsStreaming(true);
+      try {
+        const response = await fetch(options.endpoint, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...options.headers
+          },
+          body: JSON.stringify({ sessionId, message }),
+          signal: controller.signal
+        });
+        if (!response.ok) {
+          onError(`Server error: ${response.status}`);
+          setIsStreaming(false);
+          return;
+        }
+        const reader = response.body?.getReader();
+        if (!reader) {
+          onError("No response body");
+          setIsStreaming(false);
+          return;
+        }
+        const decoder = new TextDecoder();
+        let buffer = "";
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() || "";
+          for (const line of lines) {
+            if (!line.startsWith("data: ")) continue;
+            const data = line.slice(6).trim();
+            if (!data || data === "[DONE]") continue;
+            try {
+              const event = JSON.parse(data);
+              switch (event.type) {
+                case "token":
+                  if (event.content) onToken(event.content);
+                  break;
+                case "done":
+                  onDone();
+                  setIsStreaming(false);
+                  return;
+                case "error":
+                  onError(event.error || "Unknown error");
+                  setIsStreaming(false);
+                  return;
+              }
+            } catch {
+            }
+          }
+        }
+        onDone();
+      } catch (error) {
+        if (error.name !== "AbortError") {
+          onError(error.message || "Connection failed");
+        }
+      }
+      setIsStreaming(false);
+    },
+    [options.endpoint, options.headers, abort]
+  );
+  return { isStreaming, streamMessage, abort };
+}
+
+// src/lib/utils.ts
+function generateId() {
+  return crypto.randomUUID?.() || Math.random().toString(36).slice(2);
+}
+
+// src/hooks/use-chat.ts
+function useChat(config) {
+  const [messages, setMessages] = (0, import_react2.useState)([]);
+  const sessionIdRef = (0, import_react2.useRef)(generateId());
+  const headers = {};
+  if (config.apiKey) headers["x-api-key"] = config.apiKey;
+  if (config.token) headers["Authorization"] = `Bearer ${config.token}`;
+  const { isStreaming, streamMessage } = useSseStream({
+    endpoint: config.endpoint,
+    headers
+  });
+  const sendMessage = (0, import_react2.useCallback)(
+    (text) => {
+      if (!text.trim() || isStreaming) return;
+      const userMsg = {
+        id: generateId(),
+        role: "user",
+        content: text,
+        timestamp: Date.now()
+      };
+      const assistantMsg = {
+        id: generateId(),
+        role: "assistant",
+        content: "",
+        timestamp: Date.now(),
+        streaming: true
+      };
+      setMessages((prev) => [...prev, userMsg, assistantMsg]);
+      streamMessage(
+        sessionIdRef.current,
+        text,
+        (token) => {
+          setMessages((prev) => {
+            const updated = [...prev];
+            const last = updated[updated.length - 1];
+            if (last && last.role === "assistant") {
+              updated[updated.length - 1] = {
+                ...last,
+                content: last.content + token
+              };
+            }
+            return updated;
+          });
+        },
+        () => {
+          setMessages((prev) => {
+            const updated = [...prev];
+            const last = updated[updated.length - 1];
+            if (last && last.role === "assistant") {
+              updated[updated.length - 1] = {
+                ...last,
+                streaming: false
+              };
+            }
+            return updated;
+          });
+        },
+        (error) => {
+          setMessages((prev) => {
+            const updated = [...prev];
+            const last = updated[updated.length - 1];
+            if (last && last.role === "assistant") {
+              updated[updated.length - 1] = {
+                ...last,
+                content: `Error: ${error}`,
+                streaming: false
+              };
+            }
+            return updated;
+          });
+        }
+      );
+    },
+    [isStreaming, streamMessage]
+  );
+  const clearMessages = (0, import_react2.useCallback)(() => {
+    setMessages([]);
+    sessionIdRef.current = generateId();
+  }, []);
+  return { messages, isStreaming, sendMessage, clearMessages };
+}
+
+// src/react/ChatFab.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ChatFab({
+  isOpen,
+  onClick,
+  primaryColor,
+  position = "bottom-right"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      onClick,
+      style: {
+        position: "fixed",
+        zIndex: 9999,
+        bottom: "16px",
+        right: position === "bottom-right" ? "16px" : "auto",
+        left: position === "bottom-left" ? "16px" : "auto",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "56px",
+        height: "56px",
+        borderRadius: "50%",
+        border: "none",
+        cursor: "pointer",
+        boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+        backgroundColor: primaryColor || "#6366f1",
+        transition: "transform 0.2s"
+      },
+      "aria-label": isOpen ? "Close chat" : "Open chat",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "svg",
+        {
+          style: { width: "24px", height: "24px", color: "white" },
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+
+// src/react/ChatHeader.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ChatHeader({ botName, botAvatar, primaryColor, onClose }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "12px 16px",
+        borderBottom: "1px solid #e5e7eb",
+        backgroundColor: primaryColor || "#6366f1"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          botAvatar && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "18px" }, children: botAvatar }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "white", fontWeight: 500, fontSize: "14px" }, children: botName || "AI Assistant" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            onClick: onClose,
+            style: {
+              background: "transparent",
+              border: "none",
+              cursor: "pointer",
+              padding: "4px",
+              borderRadius: "4px",
+              color: "rgba(255,255,255,0.8)"
+            },
+            "aria-label": "Close chat",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "svg",
+              {
+                style: { width: "20px", height: "20px" },
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/react/MessageList.tsx
+var import_react3 = require("react");
+
+// src/react/UserMessage.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function UserMessage({ content }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", justifyContent: "flex-end", marginBottom: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      style: {
+        maxWidth: "80%",
+        borderRadius: "8px",
+        padding: "8px 16px",
+        backgroundColor: "#6366f1",
+        color: "white",
+        fontSize: "14px"
+      },
+      children: content
+    }
+  ) });
+}
+
+// src/react/BotMessage.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function BotMessage({ content, streaming }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", justifyContent: "flex-start", marginBottom: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      style: {
+        maxWidth: "80%",
+        borderRadius: "8px",
+        padding: "8px 16px",
+        backgroundColor: "#f3f4f6",
+        color: "#1f2937",
+        fontSize: "14px"
+      },
+      children: [
+        content || streaming && "...",
+        streaming && content && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "span",
+          {
+            style: {
+              display: "inline-block",
+              width: "6px",
+              height: "16px",
+              marginLeft: "2px",
+              backgroundColor: "#9ca3af",
+              animation: "pulse 1s infinite"
+            }
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+// src/react/MessageList.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function MessageList({ messages }) {
+  const bottomRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { flex: 1, overflowY: "auto", padding: "16px" }, children: [
+    messages.map(
+      (msg) => msg.role === "user" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UserMessage, { content: msg.content }, msg.id) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BotMessage, { content: msg.content, streaming: msg.streaming }, msg.id)
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: bottomRef })
+  ] });
+}
+
+// src/react/EmptyState.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function EmptyState({ welcomeMessage, starterTopics, onTopicClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%",
+        padding: "24px",
+        textAlign: "center"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { color: "#6b7280", fontSize: "14px", marginBottom: "24px" }, children: welcomeMessage || "Hi! How can I help you today?" }),
+        starterTopics && starterTopics.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "8px",
+              width: "100%",
+              maxWidth: "280px"
+            },
+            children: starterTopics.map((topic, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              "button",
+              {
+                onClick: () => onTopicClick(topic.message),
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px",
+                  padding: "12px 16px",
+                  textAlign: "left",
+                  fontSize: "14px",
+                  borderRadius: "8px",
+                  border: "1px solid #e5e7eb",
+                  backgroundColor: "white",
+                  cursor: "pointer"
+                },
+                children: [
+                  topic.icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: topic.icon }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: "#1f2937", fontWeight: 500 }, children: topic.label }),
+                    topic.description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      "span",
+                      {
+                        style: {
+                          display: "block",
+                          fontSize: "12px",
+                          color: "#6b7280",
+                          marginTop: "2px"
+                        },
+                        children: topic.description
+                      }
+                    )
+                  ] })
+                ]
+              },
+              i
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/react/ChatInput.tsx
+var import_react4 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ChatInput({ onSend, disabled, placeholder }) {
+  const [value, setValue] = (0, import_react4.useState)("");
+  const handleSend = (0, import_react4.useCallback)(() => {
+    if (!value.trim() || disabled) return;
+    onSend(value.trim());
+    setValue("");
+  }, [value, disabled, onSend]);
+  const handleKeyDown = (0, import_react4.useCallback)(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: "12px",
+        borderTop: "1px solid #e5e7eb"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
+          {
+            type: "text",
+            value,
+            onChange: (e) => setValue(e.target.value),
+            onKeyDown: handleKeyDown,
+            disabled,
+            placeholder: placeholder || "Type your message...",
+            style: {
+              flex: 1,
+              padding: "8px 12px",
+              fontSize: "14px",
+              border: "1px solid #e5e7eb",
+              borderRadius: "8px",
+              outline: "none",
+              opacity: disabled ? 0.5 : 1
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            onClick: handleSend,
+            disabled: disabled || !value.trim(),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "36px",
+              height: "36px",
+              borderRadius: "8px",
+              border: "none",
+              cursor: disabled || !value.trim() ? "not-allowed" : "pointer",
+              backgroundColor: "#6366f1",
+              opacity: disabled || !value.trim() ? 0.5 : 1
+            },
+            "aria-label": "Send message",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "svg",
+              {
+                style: { width: "16px", height: "16px", color: "white" },
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/react/ChatPanel.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function ChatPanel({ config, messages, isStreaming, onSend, onClose }) {
+  const position = config.theme?.position || "bottom-right";
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        zIndex: 9999,
+        bottom: "80px",
+        right: position === "bottom-right" ? "16px" : "auto",
+        left: position === "bottom-left" ? "16px" : "auto",
+        width: config.theme?.width || "380px",
+        height: config.theme?.height || "560px",
+        borderRadius: config.theme?.borderRadius || "12px",
+        backgroundColor: "#ffffff",
+        boxShadow: "0 25px 50px -12px rgba(0,0,0,0.25)",
+        border: "1px solid #e5e7eb",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          ChatHeader,
+          {
+            botName: config.botName,
+            botAvatar: config.botAvatar,
+            primaryColor: config.theme?.primaryColor,
+            onClose
+          }
+        ),
+        messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          EmptyState,
+          {
+            welcomeMessage: config.welcomeMessage,
+            starterTopics: config.starterTopics,
+            onTopicClick: onSend
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MessageList, { messages }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChatInput, { onSend, disabled: isStreaming, placeholder: config.placeholder })
+      ]
+    }
+  );
+}
+
+// src/react/AiChat.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var _isOpen = false;
+var listeners = /* @__PURE__ */ new Set();
+function setOpen(value) {
+  _isOpen = value;
+  listeners.forEach((l) => l());
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function getSnapshot() {
+  return _isOpen;
+}
+function AiChat(props) {
+  const isOpen = (0, import_react5.useSyncExternalStore)(subscribe, getSnapshot);
+  const { messages, isStreaming, sendMessage } = useChat(props);
+  const toggle = (0, import_react5.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setOpen(!_isOpen);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ChatPanel,
+      {
+        config: props,
+        messages,
+        isStreaming,
+        onSend: sendMessage,
+        onClose: () => setOpen(false)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ChatFab,
+      {
+        isOpen,
+        onClick: toggle,
+        primaryColor: props.theme?.primaryColor,
+        position: props.theme?.position
+      }
+    )
+  ] });
+}
+
+// src/web-component/index.ts
+var AiChatElement = class extends HTMLElement {
+  root = null;
+  shadowContainer = null;
+  static get observedAttributes() {
+    return [
+      "endpoint",
+      "api-key",
+      "token",
+      "theme",
+      "starter-topics",
+      "welcome-message",
+      "bot-name"
+    ];
+  }
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: "open" });
+    this.shadowContainer = document.createElement("div");
+    shadow.appendChild(this.shadowContainer);
+    this.root = (0, import_client.createRoot)(this.shadowContainer);
+    this.render();
+  }
+  disconnectedCallback() {
+    this.root?.unmount();
+    this.root = null;
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    if (!this.root) return;
+    const config = this.buildConfig();
+    this.root.render(import_react6.default.createElement(AiChat, config));
+  }
+  buildConfig() {
+    const config = {
+      endpoint: this.getAttribute("endpoint") || "/api/v1/chat"
+    };
+    const apiKey = this.getAttribute("api-key");
+    if (apiKey) config.apiKey = apiKey;
+    const token = this.getAttribute("token");
+    if (token) config.token = token;
+    const welcomeMessage = this.getAttribute("welcome-message");
+    if (welcomeMessage) config.welcomeMessage = welcomeMessage;
+    const botName = this.getAttribute("bot-name");
+    if (botName) config.botName = botName;
+    const themeAttr = this.getAttribute("theme");
+    if (themeAttr) {
+      try {
+        config.theme = JSON.parse(themeAttr);
+      } catch {
+      }
+    }
+    const topicsAttr = this.getAttribute("starter-topics");
+    if (topicsAttr) {
+      try {
+        config.starterTopics = JSON.parse(topicsAttr);
+      } catch {
+      }
+    }
+    return config;
+  }
+};
+if (typeof window !== "undefined" && !customElements.get("ai-chat")) {
+  customElements.define("ai-chat", AiChatElement);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AiChatElement
+});