@aiassist-secure/react 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1396 @@
+// src/AiAssistChat.tsx
+import {
+  useState as useState2,
+  useEffect as useEffect2,
+  useRef as useRef2,
+  useCallback as useCallback2,
+  useMemo as useMemo2
+} from "react";
+
+// src/context.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_THEME = {
+  primary: "#00D4FF",
+  background: "#0A0A0B",
+  surface: "#1A1A1B",
+  text: "#FFFFFF",
+  textMuted: "rgba(255,255,255,0.5)",
+  border: "rgba(255,255,255,0.1)",
+  radius: "16px",
+  fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+};
+var ThemeContext = createContext(null);
+function AiAssistThemeProvider({
+  theme,
+  children
+}) {
+  const mergedTheme = useMemo(
+    () => ({ ...DEFAULT_THEME, ...theme }),
+    [theme]
+  );
+  const cssVars = useMemo(
+    () => ({
+      "--aa-primary": mergedTheme.primary,
+      "--aa-bg": mergedTheme.background,
+      "--aa-surface": mergedTheme.surface,
+      "--aa-text": mergedTheme.text,
+      "--aa-text-muted": mergedTheme.textMuted,
+      "--aa-border": mergedTheme.border,
+      "--aa-radius": mergedTheme.radius,
+      "--aa-font": mergedTheme.fontFamily
+    }),
+    [mergedTheme]
+  );
+  const value = useMemo(() => ({ theme: mergedTheme, cssVars }), [mergedTheme, cssVars]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useAiAssistTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    return { theme: DEFAULT_THEME, cssVars: {} };
+  }
+  return context;
+}
+
+// src/hooks.ts
+import { useRef, useCallback, useState } from "react";
+var CLIENT_ID_KEY = "aiassist_client_id";
+function generateUUID() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+function getOrCreateClientId() {
+  if (typeof window === "undefined") {
+    return `temp-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+  }
+  try {
+    let clientId = localStorage.getItem(CLIENT_ID_KEY);
+    if (!clientId) {
+      clientId = generateUUID();
+      localStorage.setItem(CLIENT_ID_KEY, clientId);
+    }
+    return clientId;
+  } catch {
+    return `temp-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+  }
+}
+function useClientId() {
+  const [clientId] = useState(() => getOrCreateClientId());
+  return clientId;
+}
+function useThrottle(fn, delay) {
+  const lastCall = useRef(0);
+  return useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ((...args) => {
+      const now = Date.now();
+      if (now - lastCall.current >= delay) {
+        lastCall.current = now;
+        fn(...args);
+      }
+    }),
+    [fn, delay]
+  );
+}
+function normalizeRole(role) {
+  if (role === "manager") return "human";
+  return role;
+}
+
+// src/api.ts
+var DEFAULT_ENDPOINT = "https://api.aiassist.net";
+var AiAssistAPI = class {
+  constructor(config) {
+    this.apiKey = config.apiKey;
+    this.endpoint = config.endpoint || DEFAULT_ENDPOINT;
+  }
+  async request(path, options = {}) {
+    const res = await fetch(`${this.endpoint}${path}`, {
+      ...options,
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${this.apiKey}`,
+        ...options.headers
+      }
+    });
+    if (!res.ok) {
+      const error = await res.text().catch(() => "Request failed");
+      throw new Error(error);
+    }
+    return res.json();
+  }
+  async createWorkspace(options) {
+    const data = await this.request("/api/workspaces", {
+      method: "POST",
+      body: JSON.stringify({
+        initial_message: options.initialMessage,
+        system_prompt: options.systemPrompt,
+        context: options.context,
+        client_id: options.clientId
+      })
+    });
+    return {
+      workspace: data.workspace,
+      messages: data.messages.map((m) => ({
+        id: m.id,
+        role: normalizeRole(m.role),
+        content: m.content,
+        workspace_id: m.workspace_id,
+        created_at: m.created_at
+      }))
+    };
+  }
+  async sendMessage(workspaceId, content) {
+    const data = await this.request(`/api/workspaces/${workspaceId}/messages`, {
+      method: "POST",
+      body: JSON.stringify({ content })
+    });
+    return {
+      user_message: {
+        id: data.user_message.id,
+        role: "user",
+        content: data.user_message.content,
+        created_at: data.user_message.created_at
+      },
+      responses: data.responses.map((r) => ({
+        id: r.id,
+        role: normalizeRole(r.role),
+        content: r.content,
+        created_at: r.created_at
+      })),
+      mode: data.mode,
+      pending_approval: data.pending_approval
+    };
+  }
+  async getWorkspace(workspaceId) {
+    const data = await this.request(`/api/workspaces/${workspaceId}`);
+    return data.workspace || { id: data.id, mode: data.mode };
+  }
+  async getMessages(workspaceId) {
+    const data = await this.request(`/api/workspaces/${workspaceId}/messages`);
+    return data.messages.map((m) => ({
+      id: m.id,
+      role: normalizeRole(m.role),
+      content: m.content,
+      created_at: m.created_at
+    }));
+  }
+  async sendTypingPreview(workspaceId, text) {
+    await this.request(`/api/workspaces/${workspaceId}/typing`, {
+      method: "POST",
+      body: JSON.stringify({ text })
+    }).catch(() => {
+    });
+  }
+  async endConversation(workspaceId) {
+    await this.request(`/api/workspaces/${workspaceId}/end`, {
+      method: "POST"
+    }).catch(() => {
+    });
+  }
+  async getWorkspaceByClientId(clientId) {
+    const data = await this.request(`/api/workspaces/by-client/${clientId}`);
+    return {
+      workspace: data.workspace,
+      messages: (data.messages || []).map((m) => ({
+        id: m.id,
+        role: normalizeRole(m.role),
+        content: m.content,
+        created_at: m.created_at
+      })),
+      exists: data.exists
+    };
+  }
+};
+
+// src/AiAssistChat.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var LEAD_STORAGE_KEY = "aai_lead_captured";
+var WAITING_MSG = {
+  id: "waiting-human",
+  role: "system",
+  content: "You've been connected to our support team. A specialist will be with you shortly. Thank you for your patience."
+};
+var DEFAULT_SUGGESTIONS = [
+  "How can you help me?",
+  "Tell me about your services",
+  "I have a question",
+  "Connect me to support"
+];
+function UserIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsx2("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
+        /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "7", r: "4" })
+      ]
+    }
+  );
+}
+function SparklesIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsx2("path", { d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z" }),
+        /* @__PURE__ */ jsx2("path", { d: "M19 15l.5 1.5L21 17l-1.5.5L19 19l-.5-1.5L17 17l1.5-.5L19 15z" }),
+        /* @__PURE__ */ jsx2("path", { d: "M5 17l.5 1.5L7 19l-1.5.5L5 21l-.5-1.5L3 19l1.5-.5L5 17z" })
+      ]
+    }
+  );
+}
+function SendIcon({ className }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: /* @__PURE__ */ jsx2("path", { d: "M12 19V5M5 12l7-7 7 7" })
+    }
+  );
+}
+function LockIcon({ className }) {
+  return /* @__PURE__ */ jsx2("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" }) });
+}
+function MailIcon({ className }) {
+  return /* @__PURE__ */ jsx2("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" }) });
+}
+function ChatInner({
+  config,
+  onClose,
+  className = "",
+  showHeader = true,
+  showSuggestions = true,
+  suggestions = DEFAULT_SUGGESTIONS,
+  placeholder,
+  title = "AiAssist",
+  subtitle
+}) {
+  const { theme, cssVars } = useAiAssistTheme();
+  const [messages, setMessages] = useState2([]);
+  const [input, setInput] = useState2("");
+  const [isTyping, setIsTyping] = useState2(false);
+  const [mode, setMode] = useState2("ai");
+  const [workspaceId, setWorkspaceId] = useState2(null);
+  const [showWelcome, setShowWelcome] = useState2(true);
+  const [showWaitingMessage, setShowWaitingMessage] = useState2(false);
+  const [awaitingApproval, setAwaitingApproval] = useState2(false);
+  const [staffAvailability, setStaffAvailability] = useState2("online");
+  const [availabilityMessage, setAvailabilityMessage] = useState2(null);
+  const [autoOfflineMessage, setAutoOfflineMessage] = useState2(null);
+  const humanMsgCountAtTakeover = useRef2(0);
+  const lastKnownHumanCount = useRef2(0);
+  const scrollRef = useRef2(null);
+  const prevModeRef = useRef2("ai");
+  const shouldAutoScroll = useRef2(true);
+  const scrollToNewAiMessage = useRef2(false);
+  const lastAiMessageRef = useRef2(null);
+  const requireEmail = config.requireEmail !== false;
+  const [isLeadCaptured, setIsLeadCaptured] = useState2(!requireEmail);
+  const [leadInfo, setLeadInfo] = useState2(null);
+  const [emailInput, setEmailInput] = useState2("");
+  const [emailError, setEmailError] = useState2("");
+  const [isCapturingEmail, setIsCapturingEmail] = useState2(false);
+  const api = useMemo2(() => new AiAssistAPI(config), [config]);
+  const clientId = useClientId();
+  useEffect2(() => {
+    if (!requireEmail) {
+      setIsLeadCaptured(true);
+      return;
+    }
+    try {
+      const stored = localStorage.getItem(LEAD_STORAGE_KEY);
+      if (stored) {
+        const data = JSON.parse(stored);
+        if (data.leadId && data.email) {
+          setIsLeadCaptured(true);
+          setLeadInfo(data);
+        }
+      }
+    } catch {
+    }
+    if (clientId) {
+      checkLeadOnServer();
+    }
+  }, [clientId, requireEmail]);
+  useEffect2(() => {
+    const fetchAvailability = async () => {
+      try {
+        const res = await fetch(`${config.endpoint || "https://api.aiassist.net"}/v1/availability`, {
+          headers: { "Authorization": `Bearer ${config.apiKey}` }
+        });
+        if (res.ok) {
+          const data = await res.json();
+          setStaffAvailability(data.availability || "online");
+          setAvailabilityMessage(data.message || null);
+          setAutoOfflineMessage(data.auto_offline_message || null);
+        }
+      } catch (e) {
+        console.log("[AiAssist] Failed to fetch availability:", e);
+      }
+    };
+    fetchAvailability();
+  }, [config.apiKey, config.endpoint]);
+  const checkLeadOnServer = async () => {
+    if (!clientId) return;
+    try {
+      const res = await fetch(`${config.endpoint || "https://api.aiassist.net"}/api/leads/check/${clientId}`, {
+        headers: { "X-API-Key": config.apiKey }
+      });
+      if (res.ok) {
+        const data = await res.json();
+        if (data.captured && data.leadId && data.email) {
+          setIsLeadCaptured(true);
+          setLeadInfo({ leadId: data.leadId, email: data.email });
+          localStorage.setItem(LEAD_STORAGE_KEY, JSON.stringify({ leadId: data.leadId, email: data.email }));
+        }
+      }
+    } catch {
+    }
+  };
+  const handleEmailCapture = async (e) => {
+    e.preventDefault();
+    if (!emailInput.trim()) {
+      setEmailError("Please enter your email");
+      return;
+    }
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(emailInput)) {
+      setEmailError("Please enter a valid email");
+      return;
+    }
+    setIsCapturingEmail(true);
+    setEmailError("");
+    try {
+      const res = await fetch(`${config.endpoint || "https://api.aiassist.net"}/api/leads/capture`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "X-API-Key": config.apiKey },
+        body: JSON.stringify({ email: emailInput.trim(), client_id: clientId, source: "sdk" })
+      });
+      if (!res.ok) throw new Error("Failed");
+      const data = await res.json();
+      const lead = { leadId: data.lead_id, email: emailInput.trim() };
+      setIsLeadCaptured(true);
+      setLeadInfo(lead);
+      localStorage.setItem(LEAD_STORAGE_KEY, JSON.stringify(lead));
+      config.onLeadCapture?.(lead);
+    } catch {
+      setEmailError("Something went wrong. Try again.");
+    } finally {
+      setIsCapturingEmail(false);
+    }
+  };
+  useEffect2(() => {
+    if (!clientId) return;
+    const loadExistingChat = async () => {
+      try {
+        const data = await api.getWorkspaceByClientId(clientId);
+        if (data.exists && data.workspace) {
+          setWorkspaceId(data.workspace.id);
+          setShowWelcome(false);
+          if (data.messages.length > 0) {
+            setMessages(data.messages);
+          }
+          const isHumanMode = data.workspace.mode === "human" || data.workspace.mode === "takeover";
+          if (isHumanMode) {
+            setMode("human");
+            const hasHumanResponse = data.messages.some((m) => m.role === "human");
+            setShowWaitingMessage(!hasHumanResponse);
+          }
+        }
+      } catch (error) {
+        console.warn("AiAssist: Failed to load existing chat", error);
+      }
+    };
+    loadExistingChat();
+  }, [clientId, api]);
+  const sendTypingPreview = useCallback2(
+    async (wsId, text) => {
+      await api.sendTypingPreview(wsId, text);
+    },
+    [api]
+  );
+  const throttledTypingPreview = useThrottle(sendTypingPreview, 300);
+  const checkIfNearBottom = useCallback2(() => {
+    if (!scrollRef.current) return true;
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    return scrollHeight - scrollTop - clientHeight < 100;
+  }, []);
+  const handleScroll = useCallback2(() => {
+    shouldAutoScroll.current = checkIfNearBottom();
+  }, [checkIfNearBottom]);
+  useEffect2(() => {
+    if (scrollToNewAiMessage.current && lastAiMessageRef.current && scrollRef.current) {
+      const messageTop = lastAiMessageRef.current.offsetTop - 20;
+      scrollRef.current.scrollTop = messageTop;
+      scrollToNewAiMessage.current = false;
+    } else if (scrollRef.current && shouldAutoScroll.current && isTyping) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages, isTyping]);
+  useEffect2(() => {
+    if (!workspaceId) return;
+    const pollWorkspace = async () => {
+      try {
+        const [workspace, serverMsgs] = await Promise.all([
+          api.getWorkspace(workspaceId),
+          api.getMessages(workspaceId)
+        ]);
+        const currentHumanMsgCount = serverMsgs.filter(
+          (m) => m.role === "human"
+        ).length;
+        const previousCount = lastKnownHumanCount.current;
+        lastKnownHumanCount.current = currentHumanMsgCount;
+        const isHumanMode = workspace.mode === "human" || workspace.mode === "takeover";
+        if (isHumanMode && mode === "ai") {
+          setMode("human");
+          humanMsgCountAtTakeover.current = previousCount;
+          if (currentHumanMsgCount > previousCount) {
+            setShowWaitingMessage(false);
+          } else {
+            setShowWaitingMessage(true);
+          }
+        } else if (!isHumanMode && mode === "human") {
+          setMode("ai");
+          setShowWaitingMessage(false);
+          humanMsgCountAtTakeover.current = 0;
+        } else if (isHumanMode && mode === "human" && showWaitingMessage) {
+          if (currentHumanMsgCount > humanMsgCountAtTakeover.current) {
+            setShowWaitingMessage(false);
+          }
+        }
+        setMessages((prev) => {
+          const hasNewAiMessage = serverMsgs.some(
+            (m) => (m.role === "ai" || m.role === "human") && !prev.some((prevMsg) => prevMsg.id === m.id)
+          );
+          if (hasNewAiMessage) {
+            setAwaitingApproval(false);
+            setIsTyping(false);
+          }
+          const serverIds = new Set(serverMsgs.map((m) => m.id));
+          const merged = /* @__PURE__ */ new Map();
+          serverMsgs.forEach((m) => merged.set(m.id, m));
+          prev.forEach((m) => {
+            if (!serverIds.has(m.id) && m.id.startsWith("temp-")) {
+              merged.set(m.id, m);
+            }
+          });
+          return Array.from(merged.values()).sort((a, b) => {
+            if (a.created_at && b.created_at) {
+              return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
+            }
+            return 0;
+          });
+        });
+      } catch (error) {
+        console.error("Failed to poll workspace:", error);
+        config.onError?.(error);
+      }
+    };
+    pollWorkspace();
+    const interval = setInterval(pollWorkspace, 3e3);
+    return () => clearInterval(interval);
+  }, [workspaceId, mode, showWaitingMessage, api, config]);
+  useEffect2(() => {
+    if (prevModeRef.current !== mode) {
+      config.onModeChange?.(mode);
+      prevModeRef.current = mode;
+    }
+  }, [mode, config]);
+  const startConversation = async (initialMessage) => {
+    if (!initialMessage.trim()) return;
+    setShowWelcome(false);
+    setIsTyping(true);
+    const tempUserMsg = {
+      id: Date.now().toString(),
+      role: "user",
+      content: initialMessage
+    };
+    setMessages([tempUserMsg]);
+    scrollToNewAiMessage.current = true;
+    try {
+      const data = await api.createWorkspace({
+        initialMessage,
+        systemPrompt: config.systemPrompt,
+        context: config.context,
+        clientId
+      });
+      setWorkspaceId(data.workspace.id);
+      const isHumanMode = data.workspace.mode === "human" || data.workspace.mode === "takeover";
+      if (isHumanMode) {
+        setMode("human");
+        const hasHumanResponse = data.messages.some((m) => m.role === "human");
+        setShowWaitingMessage(!hasHumanResponse);
+      }
+      setMessages(data.messages);
+      data.messages.forEach((m) => config.onMessage?.(m));
+    } catch (error) {
+      console.error("Failed to start conversation:", error);
+      config.onError?.(error);
+      setMessages([
+        tempUserMsg,
+        {
+          id: Date.now().toString() + "-fallback",
+          role: "ai",
+          content: "I apologize, but I'm having trouble connecting. Please try again in a moment."
+        }
+      ]);
+    } finally {
+      setIsTyping(false);
+    }
+  };
+  const handleSend = async () => {
+    if (!input.trim() || !isLeadCaptured) return;
+    if (!workspaceId) {
+      const msg = input;
+      setInput("");
+      await startConversation(msg);
+      return;
+    }
+    const userContent = input;
+    setInput("");
+    if (workspaceId) {
+      sendTypingPreview(workspaceId, "");
+    }
+    const tempUserMsg = {
+      id: `temp-${Date.now()}`,
+      role: "user",
+      content: userContent
+    };
+    setMessages((prev) => [...prev, tempUserMsg]);
+    setIsTyping(true);
+    scrollToNewAiMessage.current = true;
+    try {
+      const data = await api.sendMessage(workspaceId, userContent);
+      const wasAiMode = mode === "ai";
+      const isHumanMode = data.mode === "human" || data.mode === "takeover";
+      if (isHumanMode && wasAiMode) {
+        setMode("human");
+        humanMsgCountAtTakeover.current = messages.filter(
+          (m) => m.role === "human"
+        ).length;
+      }
+      const hasHumanResponseNow = data.responses.some(
+        (r) => r.role === "human"
+      );
+      if (data.pending_approval) {
+        setAwaitingApproval(true);
+      } else {
+        setAwaitingApproval(false);
+        setIsTyping(false);
+      }
+      setMessages((prev) => {
+        const merged = /* @__PURE__ */ new Map();
+        prev.filter((m) => m.id !== tempUserMsg.id).forEach((m) => merged.set(m.id, m));
+        merged.set(data.user_message.id, data.user_message);
+        data.responses.forEach((r) => merged.set(r.id, r));
+        if (hasHumanResponseNow) {
+          setShowWaitingMessage(false);
+        } else if (isHumanMode && wasAiMode) {
+          setShowWaitingMessage(true);
+        }
+        return Array.from(merged.values());
+      });
+      config.onMessage?.(data.user_message);
+      data.responses.forEach((r) => config.onMessage?.(r));
+    } catch (error) {
+      console.error("Failed to send message:", error);
+      config.onError?.(error);
+      setAwaitingApproval(false);
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: Date.now().toString(),
+          role: "ai",
+          content: "I apologize, but I'm having trouble connecting. Please try again in a moment."
+        }
+      ]);
+      setIsTyping(false);
+    }
+  };
+  const currentPlaceholder = placeholder || (mode === "ai" ? "Type your message..." : "A specialist is listening...");
+  const currentSubtitle = subtitle || (mode === "ai" ? "AI Assistant" : "Human Support");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `aa-chat ${className}`,
+      style: {
+        ...cssVars,
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        backgroundColor: theme.background,
+        color: theme.text,
+        fontFamily: theme.fontFamily,
+        borderRadius: theme.radius,
+        overflow: "hidden",
+        position: "relative"
+      },
+      "data-testid": "aiassist-chat",
+      children: [
+        showHeader && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "16px 20px",
+              backgroundColor: theme.surface,
+              borderBottom: `1px solid ${theme.border}`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between"
+            },
+            "data-testid": "chat-header",
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+                /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    style: {
+                      width: "40px",
+                      height: "40px",
+                      borderRadius: "50%",
+                      backgroundColor: mode === "ai" ? `${theme.primary}20` : `${theme.text}10`,
+                      border: `1px solid ${mode === "ai" ? `${theme.primary}40` : theme.border}`,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    children: mode === "ai" ? /* @__PURE__ */ jsx2(
+                      SparklesIcon,
+                      {
+                        className: "aa-icon"
+                      }
+                    ) : /* @__PURE__ */ jsx2(UserIcon, { className: "aa-icon" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx2("div", { style: { fontWeight: 600, fontSize: "14px" }, children: title }),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        fontSize: "12px",
+                        color: theme.textMuted,
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "6px"
+                      },
+                      "data-testid": "status-staff-availability",
+                      children: [
+                        /* @__PURE__ */ jsx2(
+                          "span",
+                          {
+                            style: {
+                              width: "6px",
+                              height: "6px",
+                              borderRadius: "50%",
+                              backgroundColor: staffAvailability === "offline" ? "#6b7280" : staffAvailability === "away" ? "#f59e0b" : mode === "ai" ? theme.primary : "#22c55e"
+                            }
+                          }
+                        ),
+                        staffAvailability === "away" && availabilityMessage ? availabilityMessage : staffAvailability === "offline" && availabilityMessage ? availabilityMessage : currentSubtitle
+                      ]
+                    }
+                  ),
+                  staffAvailability === "offline" && autoOfflineMessage && /* @__PURE__ */ jsx2(
+                    "div",
+                    {
+                      style: {
+                        fontSize: "11px",
+                        color: theme.textMuted,
+                        marginTop: "4px"
+                      },
+                      "data-testid": "status-offline-message",
+                      children: autoOfflineMessage
+                    }
+                  )
+                ] })
+              ] }),
+              onClose && /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  onClick: onClose,
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    color: theme.textMuted,
+                    cursor: "pointer",
+                    padding: "8px",
+                    fontSize: "20px",
+                    lineHeight: 1
+                  },
+                  "data-testid": "button-close",
+                  children: "\xD7"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: scrollRef,
+            onScroll: handleScroll,
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              padding: "20px"
+            },
+            "data-testid": "chat-messages",
+            children: [
+              showWelcome && showSuggestions && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    height: "100%",
+                    textAlign: "center",
+                    gap: "24px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      "div",
+                      {
+                        style: {
+                          width: "64px",
+                          height: "64px",
+                          borderRadius: "50%",
+                          backgroundColor: `${theme.primary}15`,
+                          border: `1px solid ${theme.primary}30`,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center"
+                        },
+                        children: /* @__PURE__ */ jsx2(SparklesIcon, { className: "aa-icon-lg" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx2(
+                        "h2",
+                        {
+                          style: {
+                            fontSize: "24px",
+                            fontWeight: 700,
+                            marginBottom: "8px"
+                          },
+                          children: config.greeting || "How can I help you today?"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx2("p", { style: { color: theme.textMuted, fontSize: "14px" }, children: "Ask me anything or choose a suggestion below" })
+                    ] }),
+                    /* @__PURE__ */ jsx2(
+                      "div",
+                      {
+                        style: {
+                          display: "grid",
+                          gridTemplateColumns: "repeat(2, 1fr)",
+                          gap: "8px",
+                          width: "100%",
+                          maxWidth: "400px"
+                        },
+                        children: suggestions.map((suggestion, i) => /* @__PURE__ */ jsx2(
+                          "button",
+                          {
+                            onClick: () => setInput(suggestion),
+                            style: {
+                              padding: "12px 16px",
+                              textAlign: "left",
+                              fontSize: "13px",
+                              color: theme.textMuted,
+                              backgroundColor: `${theme.text}05`,
+                              border: `1px solid ${theme.border}`,
+                              borderRadius: "12px",
+                              cursor: "pointer"
+                            },
+                            "data-testid": `button-suggestion-${i}`,
+                            children: suggestion
+                          },
+                          i
+                        ))
+                      }
+                    )
+                  ]
+                }
+              ),
+              messages.map((msg, idx) => {
+                const isLastAiMessage = msg.role !== "user" && msg.role !== "system" && !messages.slice(idx + 1).some((m) => m.role !== "user" && m.role !== "system");
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    ref: isLastAiMessage ? (el) => {
+                      lastAiMessageRef.current = el;
+                    } : void 0,
+                    style: {
+                      display: "flex",
+                      gap: "12px",
+                      marginBottom: "16px",
+                      justifyContent: msg.role === "user" ? "flex-end" : "flex-start"
+                    },
+                    "data-testid": `message-${msg.role}-${msg.id}`,
+                    children: [
+                      msg.role !== "user" && msg.role !== "system" && /* @__PURE__ */ jsx2(
+                        "div",
+                        {
+                          style: {
+                            width: "32px",
+                            height: "32px",
+                            borderRadius: "50%",
+                            backgroundColor: msg.role === "human" ? `${theme.text}10` : `${theme.primary}15`,
+                            border: `1px solid ${msg.role === "human" ? theme.border : `${theme.primary}30`}`,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            flexShrink: 0
+                          },
+                          children: msg.role === "human" ? /* @__PURE__ */ jsx2(UserIcon, { className: "aa-icon-sm" }) : /* @__PURE__ */ jsx2(SparklesIcon, { className: "aa-icon-sm" })
+                        }
+                      ),
+                      msg.role === "system" ? /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "12px",
+                            width: "100%",
+                            justifyContent: "center",
+                            color: theme.textMuted,
+                            fontSize: "12px"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx2(
+                              "div",
+                              {
+                                style: { height: "1px", width: "32px", backgroundColor: theme.border }
+                              }
+                            ),
+                            msg.content,
+                            /* @__PURE__ */ jsx2(
+                              "div",
+                              {
+                                style: { height: "1px", width: "32px", backgroundColor: theme.border }
+                              }
+                            )
+                          ]
+                        }
+                      ) : /* @__PURE__ */ jsx2(
+                        "div",
+                        {
+                          style: {
+                            maxWidth: "80%",
+                            padding: "12px 16px",
+                            borderRadius: "16px",
+                            backgroundColor: msg.role === "user" ? theme.primary : theme.surface,
+                            color: msg.role === "user" ? "#000" : theme.text,
+                            fontSize: "14px",
+                            lineHeight: 1.5
+                          },
+                          children: msg.content
+                        }
+                      )
+                    ]
+                  },
+                  msg.id
+                );
+              }),
+              showWaitingMessage && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "12px",
+                    color: theme.textMuted,
+                    fontSize: "12px",
+                    padding: "16px 0"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      "div",
+                      {
+                        style: { height: "1px", width: "32px", backgroundColor: theme.border }
+                      }
+                    ),
+                    WAITING_MSG.content,
+                    /* @__PURE__ */ jsx2(
+                      "div",
+                      {
+                        style: { height: "1px", width: "32px", backgroundColor: theme.border }
+                      }
+                    )
+                  ]
+                }
+              ),
+              (isTyping || awaitingApproval) && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    gap: "12px",
+                    marginBottom: "16px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      "div",
+                      {
+                        style: {
+                          width: "32px",
+                          height: "32px",
+                          borderRadius: "50%",
+                          backgroundColor: awaitingApproval ? "rgba(245, 158, 11, 0.1)" : mode === "human" ? `${theme.text}10` : `${theme.primary}15`,
+                          border: `1px solid ${awaitingApproval ? "rgba(245, 158, 11, 0.2)" : mode === "human" ? theme.border : `${theme.primary}30`}`,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center"
+                        },
+                        children: /* @__PURE__ */ jsx2(
+                          "span",
+                          {
+                            style: {
+                              width: "6px",
+                              height: "6px",
+                              borderRadius: "50%",
+                              backgroundColor: awaitingApproval ? "#f59e0b" : theme.primary,
+                              animation: "pulse 1s infinite"
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    awaitingApproval ? /* @__PURE__ */ jsx2(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          padding: "12px 16px"
+                        },
+                        children: /* @__PURE__ */ jsx2("span", { style: { color: "rgba(245, 158, 11, 0.8)", fontSize: "14px" }, children: "Hang tight! Someone will be with you in just a moment." })
+                      }
+                    ) : /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          gap: "4px",
+                          alignItems: "center",
+                          padding: "12px 16px"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx2(
+                            "span",
+                            {
+                              style: {
+                                width: "6px",
+                                height: "6px",
+                                borderRadius: "50%",
+                                backgroundColor: theme.textMuted,
+                                animation: "bounce 1s infinite 0ms"
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx2(
+                            "span",
+                            {
+                              style: {
+                                width: "6px",
+                                height: "6px",
+                                borderRadius: "50%",
+                                backgroundColor: theme.textMuted,
+                                animation: "bounce 1s infinite 200ms"
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx2(
+                            "span",
+                            {
+                              style: {
+                                width: "6px",
+                                height: "6px",
+                                borderRadius: "50%",
+                                backgroundColor: theme.textMuted,
+                                animation: "bounce 1s infinite 400ms"
+                              }
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "16px 20px",
+              borderTop: `1px solid ${theme.border}`,
+              position: "relative"
+            },
+            children: [
+              !isLeadCaptured && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    backgroundColor: "rgba(0,0,0,0.8)",
+                    backdropFilter: "blur(4px)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    padding: "12px",
+                    zIndex: 10
+                  },
+                  "data-testid": "email-gate",
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "form",
+                      {
+                        onSubmit: handleEmailCapture,
+                        style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" },
+                        children: [
+                          /* @__PURE__ */ jsx2(
+                            "div",
+                            {
+                              style: {
+                                width: "32px",
+                                height: "32px",
+                                borderRadius: "50%",
+                                backgroundColor: `${theme.primary}20`,
+                                border: `1px solid ${theme.primary}30`,
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                flexShrink: 0
+                              },
+                              children: /* @__PURE__ */ jsx2(LockIcon, { className: "aa-icon-sm" })
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs("div", { style: { flex: 1, position: "relative" }, children: [
+                            /* @__PURE__ */ jsx2(
+                              MailIcon,
+                              {
+                                className: "aa-icon-sm"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx2(
+                              "input",
+                              {
+                                type: "email",
+                                value: emailInput,
+                                onChange: (e) => {
+                                  setEmailInput(e.target.value);
+                                  setEmailError("");
+                                },
+                                placeholder: "Enter email to unlock chat",
+                                "data-testid": "input-email-gate",
+                                disabled: isCapturingEmail,
+                                style: {
+                                  width: "100%",
+                                  padding: "10px 10px 10px 32px",
+                                  backgroundColor: "rgba(255,255,255,0.1)",
+                                  border: "1px solid rgba(255,255,255,0.2)",
+                                  borderRadius: "10px",
+                                  color: theme.text,
+                                  fontSize: "13px",
+                                  fontFamily: theme.fontFamily,
+                                  outline: "none"
+                                }
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsx2(
+                            "button",
+                            {
+                              type: "submit",
+                              disabled: isCapturingEmail || !emailInput.trim(),
+                              "data-testid": "button-unlock-chat",
+                              style: {
+                                width: "36px",
+                                height: "36px",
+                                borderRadius: "10px",
+                                border: "none",
+                                backgroundColor: theme.primary,
+                                cursor: isCapturingEmail || !emailInput.trim() ? "not-allowed" : "pointer",
+                                opacity: isCapturingEmail || !emailInput.trim() ? 0.5 : 1,
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                flexShrink: 0
+                              },
+                              children: /* @__PURE__ */ jsx2(SendIcon, { className: "aa-icon-sm" })
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    emailError && /* @__PURE__ */ jsx2("p", { style: { position: "absolute", bottom: "4px", fontSize: "11px", color: "#ff6b6b" }, children: emailError })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    gap: "8px",
+                    alignItems: "flex-end",
+                    backgroundColor: theme.surface,
+                    borderRadius: "16px",
+                    padding: "8px 12px",
+                    border: `1px solid ${theme.border}`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      "textarea",
+                      {
+                        value: input,
+                        onChange: (e) => {
+                          setInput(e.target.value);
+                          if (workspaceId) {
+                            throttledTypingPreview(workspaceId, e.target.value);
+                          }
+                        },
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" && !e.shiftKey) {
+                            e.preventDefault();
+                            handleSend();
+                          }
+                        },
+                        onBlur: () => {
+                          if (workspaceId) {
+                            sendTypingPreview(workspaceId, "");
+                          }
+                        },
+                        placeholder: currentPlaceholder,
+                        disabled: isTyping || !isLeadCaptured,
+                        style: {
+                          flex: 1,
+                          backgroundColor: "transparent",
+                          border: "none",
+                          color: theme.text,
+                          fontSize: "14px",
+                          resize: "none",
+                          minHeight: "40px",
+                          maxHeight: "120px",
+                          outline: "none",
+                          fontFamily: theme.fontFamily
+                        },
+                        "data-testid": "input-message"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: handleSend,
+                        disabled: !input.trim() || isTyping || !isLeadCaptured,
+                        style: {
+                          width: "36px",
+                          height: "36px",
+                          borderRadius: "50%",
+                          border: "none",
+                          backgroundColor: input.trim() && !isTyping && isLeadCaptured ? theme.primary : theme.border,
+                          color: input.trim() && !isTyping && isLeadCaptured ? "#000" : theme.textMuted,
+                          cursor: input.trim() && !isTyping && isLeadCaptured ? "pointer" : "not-allowed",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          flexShrink: 0
+                        },
+                        "data-testid": "button-send",
+                        children: /* @__PURE__ */ jsx2(SendIcon, { className: "aa-icon-sm" })
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2("style", { children: `
+        .aa-chat .aa-icon {
+          width: 20px;
+          height: 20px;
+          color: ${theme.primary};
+        }
+        .aa-chat .aa-icon-lg {
+          width: 28px;
+          height: 28px;
+          color: ${theme.primary};
+        }
+        .aa-chat .aa-icon-sm {
+          width: 14px;
+          height: 14px;
+          color: currentColor;
+        }
+        @keyframes bounce {
+          0%, 80%, 100% { transform: translateY(0); }
+          40% { transform: translateY(-4px); }
+        }
+        @keyframes pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
+        }
+      ` })
+      ]
+    }
+  );
+}
+function AiAssistChat(props) {
+  return /* @__PURE__ */ jsx2(AiAssistThemeProvider, { theme: props.theme, children: /* @__PURE__ */ jsx2(ChatInner, { ...props }) });
+}
+
+// src/AiAssistChatWidget.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function DefaultBubbleIcon() {
+  return /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "28", height: "28", children: /* @__PURE__ */ jsx3("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c1.85 0 3.58-.5 5.07-1.38L22 22l-1.62-4.93A9.96 9.96 0 0 0 22 12c0-5.52-4.48-10-10-10zm-1 15h-1v-2h1v2zm2.07-4.75l-.9.92c-.5.51-.86.97-1.04 1.69-.08.32-.13.68-.13 1.14h-2v-.5c0-.46.08-.9.22-1.31.2-.58.53-1.1.95-1.52l1.24-1.26c.46-.44.68-1.1.55-1.8-.13-.72-.69-1.33-1.39-1.53-1.11-.31-2.14.32-2.47 1.27-.12.37-.43.65-.82.65h-.3c-.5 0-.84-.44-.75-.93.34-1.72 1.85-3.05 3.72-3.05 2.08 0 3.78 1.69 3.78 3.78 0 .88-.36 1.68-.93 2.25h.07z" }) });
+}
+function WidgetInner({
+  config,
+  theme,
+  onClose,
+  className,
+  showHeader = true,
+  showSuggestions = true,
+  suggestions,
+  placeholder,
+  title,
+  subtitle,
+  position = "bottom-right",
+  bubbleIcon,
+  defaultOpen = false
+}) {
+  const { theme: resolvedTheme } = useAiAssistTheme();
+  const [isOpen, setIsOpen] = useState3(defaultOpen);
+  const [isHovered, setIsHovered] = useState3(false);
+  const positionStyles = {
+    "bottom-right": { bottom: "20px", right: "20px" },
+    "bottom-left": { bottom: "20px", left: "20px" },
+    "top-right": { top: "20px", right: "20px" },
+    "top-left": { top: "20px", left: "20px" }
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+    onClose?.();
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        zIndex: 999999,
+        ...positionStyles[position]
+      },
+      "data-testid": "aiassist-widget",
+      children: [
+        isOpen && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              width: "380px",
+              height: "600px",
+              maxHeight: "calc(100vh - 100px)",
+              marginBottom: "16px",
+              boxShadow: "0 10px 50px rgba(0,0,0,0.5)",
+              borderRadius: resolvedTheme.radius,
+              overflow: "hidden"
+            },
+            "data-testid": "widget-chat-container",
+            children: /* @__PURE__ */ jsx3(
+              AiAssistChat,
+              {
+                config,
+                theme,
+                onClose: handleClose,
+                className,
+                showHeader,
+                showSuggestions,
+                suggestions,
+                placeholder,
+                title,
+                subtitle
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: () => setIsOpen(!isOpen),
+            onMouseEnter: () => setIsHovered(true),
+            onMouseLeave: () => setIsHovered(false),
+            style: {
+              width: "60px",
+              height: "60px",
+              borderRadius: "50%",
+              backgroundColor: resolvedTheme.primary,
+              border: "none",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              boxShadow: isHovered ? `0 6px 30px ${resolvedTheme.primary}80` : `0 4px 20px ${resolvedTheme.primary}66`,
+              transform: isHovered ? "scale(1.1)" : "scale(1)",
+              transition: "transform 0.2s, box-shadow 0.2s",
+              color: "#000"
+            },
+            "data-testid": "button-toggle-widget",
+            children: isOpen ? /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "24", height: "24", children: /* @__PURE__ */ jsx3("path", { d: "M6 18L18 6M6 6l12 12" }) }) : bubbleIcon || /* @__PURE__ */ jsx3(DefaultBubbleIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx3("style", { children: `
+        @media (max-width: 440px) {
+          [data-testid="widget-chat-container"] {
+            width: calc(100vw - 40px) !important;
+            height: calc(100vh - 120px) !important;
+            position: fixed !important;
+            left: 10px !important;
+            right: 10px !important;
+            bottom: 80px !important;
+          }
+        }
+      ` })
+      ]
+    }
+  );
+}
+function AiAssistChatWidget(props) {
+  return /* @__PURE__ */ jsx3(AiAssistThemeProvider, { theme: props.theme, children: /* @__PURE__ */ jsx3(WidgetInner, { ...props }) });
+}
+export {
+  AiAssistAPI,
+  AiAssistChat,
+  AiAssistChatWidget,
+  AiAssistThemeProvider,
+  DEFAULT_THEME,
+  normalizeRole,
+  useAiAssistTheme,
+  useThrottle
+};