@idevconn/ai-chat-client 0.1.2

package/dist/standalone/index.mjs

@@ -0,0 +1,636 @@
+// src/standalone/index.ts
+import React4 from "react";
+import { createRoot } from "react-dom/client";
+
+// src/react/AiChat.tsx
+import { useSyncExternalStore, useCallback as useCallback4 } from "react";
+
+// src/hooks/use-chat.ts
+import { useCallback as useCallback2, useRef as useRef2, useState as useState2 } from "react";
+
+// src/hooks/use-sse-stream.ts
+import { useCallback, useRef, useState } from "react";
+function useSseStream(options) {
+  const [isStreaming, setIsStreaming] = useState(false);
+  const abortRef = useRef(null);
+  const abort = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    setIsStreaming(false);
+  }, []);
+  const streamMessage = 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] = useState2([]);
+  const sessionIdRef = useRef2(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 = useCallback2(
+    (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 = useCallback2(() => {
+    setMessages([]);
+    sessionIdRef.current = generateId();
+  }, []);
+  return { messages, isStreaming, sendMessage, clearMessages };
+}
+
+// src/react/ChatFab.tsx
+import { jsx } from "react/jsx-runtime";
+function ChatFab({
+  isOpen,
+  onClick,
+  primaryColor,
+  position = "bottom-right"
+}) {
+  return /* @__PURE__ */ 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__ */ jsx(
+        "svg",
+        {
+          style: { width: "24px", height: "24px", color: "white" },
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          children: isOpen ? /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) : /* @__PURE__ */ 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
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ChatHeader({ botName, botAvatar, primaryColor, onClose }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "12px 16px",
+        borderBottom: "1px solid #e5e7eb",
+        backgroundColor: primaryColor || "#6366f1"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          botAvatar && /* @__PURE__ */ jsx2("span", { style: { fontSize: "18px" }, children: botAvatar }),
+          /* @__PURE__ */ jsx2("span", { style: { color: "white", fontWeight: 500, fontSize: "14px" }, children: botName || "AI Assistant" })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "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__ */ jsx2(
+              "svg",
+              {
+                style: { width: "20px", height: "20px" },
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/react/MessageList.tsx
+import { useEffect, useRef as useRef3 } from "react";
+
+// src/react/UserMessage.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function UserMessage({ content }) {
+  return /* @__PURE__ */ jsx3("div", { style: { display: "flex", justifyContent: "flex-end", marginBottom: "12px" }, children: /* @__PURE__ */ jsx3(
+    "div",
+    {
+      style: {
+        maxWidth: "80%",
+        borderRadius: "8px",
+        padding: "8px 16px",
+        backgroundColor: "#6366f1",
+        color: "white",
+        fontSize: "14px"
+      },
+      children: content
+    }
+  ) });
+}
+
+// src/react/BotMessage.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function BotMessage({ content, streaming }) {
+  return /* @__PURE__ */ jsx4("div", { style: { display: "flex", justifyContent: "flex-start", marginBottom: "12px" }, children: /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        maxWidth: "80%",
+        borderRadius: "8px",
+        padding: "8px 16px",
+        backgroundColor: "#f3f4f6",
+        color: "#1f2937",
+        fontSize: "14px"
+      },
+      children: [
+        content || streaming && "...",
+        streaming && content && /* @__PURE__ */ jsx4(
+          "span",
+          {
+            style: {
+              display: "inline-block",
+              width: "6px",
+              height: "16px",
+              marginLeft: "2px",
+              backgroundColor: "#9ca3af",
+              animation: "pulse 1s infinite"
+            }
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+// src/react/MessageList.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function MessageList({ messages }) {
+  const bottomRef = useRef3(null);
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  return /* @__PURE__ */ jsxs3("div", { style: { flex: 1, overflowY: "auto", padding: "16px" }, children: [
+    messages.map(
+      (msg) => msg.role === "user" ? /* @__PURE__ */ jsx5(UserMessage, { content: msg.content }, msg.id) : /* @__PURE__ */ jsx5(BotMessage, { content: msg.content, streaming: msg.streaming }, msg.id)
+    ),
+    /* @__PURE__ */ jsx5("div", { ref: bottomRef })
+  ] });
+}
+
+// src/react/EmptyState.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function EmptyState({ welcomeMessage, starterTopics, onTopicClick }) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%",
+        padding: "24px",
+        textAlign: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx6("p", { style: { color: "#6b7280", fontSize: "14px", marginBottom: "24px" }, children: welcomeMessage || "Hi! How can I help you today?" }),
+        starterTopics && starterTopics.length > 0 && /* @__PURE__ */ jsx6(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "8px",
+              width: "100%",
+              maxWidth: "280px"
+            },
+            children: starterTopics.map((topic, i) => /* @__PURE__ */ jsxs4(
+              "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__ */ jsx6("span", { children: topic.icon }),
+                  /* @__PURE__ */ jsxs4("div", { children: [
+                    /* @__PURE__ */ jsx6("span", { style: { color: "#1f2937", fontWeight: 500 }, children: topic.label }),
+                    topic.description && /* @__PURE__ */ jsx6(
+                      "span",
+                      {
+                        style: {
+                          display: "block",
+                          fontSize: "12px",
+                          color: "#6b7280",
+                          marginTop: "2px"
+                        },
+                        children: topic.description
+                      }
+                    )
+                  ] })
+                ]
+              },
+              i
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/react/ChatInput.tsx
+import { useState as useState3, useCallback as useCallback3 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function ChatInput({ onSend, disabled, placeholder }) {
+  const [value, setValue] = useState3("");
+  const handleSend = useCallback3(() => {
+    if (!value.trim() || disabled) return;
+    onSend(value.trim());
+    setValue("");
+  }, [value, disabled, onSend]);
+  const handleKeyDown = useCallback3(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend]
+  );
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: "12px",
+        borderTop: "1px solid #e5e7eb"
+      },
+      children: [
+        /* @__PURE__ */ jsx7(
+          "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__ */ jsx7(
+          "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__ */ jsx7(
+              "svg",
+              {
+                style: { width: "16px", height: "16px", color: "white" },
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/react/ChatPanel.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function ChatPanel({ config, messages, isStreaming, onSend, onClose }) {
+  const position = config.theme?.position || "bottom-right";
+  return /* @__PURE__ */ jsxs6(
+    "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__ */ jsx8(
+          ChatHeader,
+          {
+            botName: config.botName,
+            botAvatar: config.botAvatar,
+            primaryColor: config.theme?.primaryColor,
+            onClose
+          }
+        ),
+        messages.length === 0 ? /* @__PURE__ */ jsx8(
+          EmptyState,
+          {
+            welcomeMessage: config.welcomeMessage,
+            starterTopics: config.starterTopics,
+            onTopicClick: onSend
+          }
+        ) : /* @__PURE__ */ jsx8(MessageList, { messages }),
+        /* @__PURE__ */ jsx8(ChatInput, { onSend, disabled: isStreaming, placeholder: config.placeholder })
+      ]
+    }
+  );
+}
+
+// src/react/AiChat.tsx
+import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "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 = useSyncExternalStore(subscribe, getSnapshot);
+  const { messages, isStreaming, sendMessage } = useChat(props);
+  const toggle = useCallback4((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setOpen(!_isOpen);
+  }, []);
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    isOpen && /* @__PURE__ */ jsx9(
+      ChatPanel,
+      {
+        config: props,
+        messages,
+        isStreaming,
+        onSend: sendMessage,
+        onClose: () => setOpen(false)
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      ChatFab,
+      {
+        isOpen,
+        onClick: toggle,
+        primaryColor: props.theme?.primaryColor,
+        position: props.theme?.position
+      }
+    )
+  ] });
+}
+
+// src/standalone/index.ts
+var root = null;
+var container = null;
+var AiChatStandalone = {
+  init(config) {
+    if (container) {
+      this.destroy();
+    }
+    container = document.createElement("div");
+    container.id = "ai-chat-widget-root";
+    document.body.appendChild(container);
+    root = createRoot(container);
+    root.render(React4.createElement(AiChat, config));
+    return {
+      destroy: () => this.destroy()
+    };
+  },
+  destroy() {
+    if (root) {
+      root.unmount();
+      root = null;
+    }
+    if (container) {
+      container.remove();
+      container = null;
+    }
+  }
+};
+if (typeof window !== "undefined") {
+  window.AiChat = AiChatStandalone;
+}
+export {
+  AiChatStandalone
+};

package/dist/types-GYJVuR2m.d.mts

@@ -0,0 +1,49 @@
+interface ChatStreamEvent {
+    type: 'token' | 'tool_call' | 'tool_result' | 'done' | 'error';
+    content?: string;
+    usage?: {
+        promptTokens: number;
+        completionTokens: number;
+        totalTokens: number;
+    };
+    error?: string;
+}
+interface StarterTopic {
+    label: string;
+    message: string;
+    icon?: string;
+    description?: string;
+}
+interface ThemeConfig {
+    primaryColor?: string;
+    borderRadius?: string;
+    fontFamily?: string;
+    darkMode?: boolean;
+    position?: 'bottom-right' | 'bottom-left';
+    zIndex?: number;
+    width?: string;
+    height?: string;
+}
+interface AiChatConfig {
+    endpoint: string;
+    apiKey?: string;
+    token?: string;
+    getToken?: () => Promise<string>;
+    theme?: ThemeConfig;
+    welcomeMessage?: string;
+    placeholder?: string;
+    starterTopics?: StarterTopic[];
+    botName?: string;
+    botAvatar?: string;
+    persistSession?: boolean;
+    showTimestamps?: boolean;
+}
+interface ChatMessageUI {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    timestamp: number;
+    streaming?: boolean;
+}
+
+export type { AiChatConfig as A, ChatMessageUI as C, StarterTopic as S, ThemeConfig as T, ChatStreamEvent as a };