@arbidocs/react 0.3.15 → 0.3.17

package/dist/index.js

@@ -1,8 +1,8 @@
-import { createContext, useMemo, useContext } from 'react';
-import { Arbi } from '@arbidocs/sdk/browser';
+import { createContext, useMemo, useContext, useState, useCallback, useRef, useEffect } from 'react';
+import { Arbi, resolveCitations, summarizeCitations } from '@arbidocs/sdk/browser';
 export { Arbi, ArbiError } from '@arbidocs/sdk/browser';
-import { jsx } from 'react/jsx-runtime';
-import { useQuery, useMutation } from '@tanstack/react-query';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useQuery, useMutation, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 // src/ArbiProvider.tsx
 var ArbiContext = createContext(null);
@@ -15,6 +15,329 @@ function ArbiProvider({ children, ...options }) {
   );
   return /* @__PURE__ */ jsx(ArbiContext.Provider, { value: arbi, children });
 }
+
+// src/chat/styles.ts
+var DEFAULT_THEME = {
+  primaryColor: "#00adef",
+  backgroundColor: "#ffffff",
+  surfaceColor: "#f9fafb",
+  textColor: "#111827",
+  mutedColor: "#6b7280",
+  borderColor: "#e5e7eb",
+  userBubbleColor: "#f3f4f6",
+  userBubbleTextColor: "#111827",
+  assistantBubbleColor: "rgba(0, 173, 239, 0.08)",
+  assistantBubbleTextColor: "#111827",
+  borderRadius: "8px",
+  fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
+};
+var DEFAULT_LABELS = {
+  title: "Chat",
+  email: "Email",
+  password: "Password",
+  loginButton: "Log in",
+  loginButtonLoading: "Logging in...",
+  registerButton: "Create account",
+  sendCodeButton: "Email me a code",
+  haveCodeButton: "I have an invitation code",
+  verificationCode: "Verification code",
+  confirmPassword: "Confirm password",
+  firstName: "First name",
+  lastName: "Last name",
+  switchToRegister: "Create account",
+  switchToLogin: "Back to login",
+  selectWorkspace: "Select a workspace",
+  workspacePlaceholder: "Choose...",
+  continueButton: "Continue",
+  createWorkspace: "Create new workspace",
+  workspaceName: "Workspace name",
+  createButton: "Create",
+  changeWorkspace: "Change workspace",
+  documents: "Documents",
+  sendButton: "Send",
+  placeholder: "Ask a question...",
+  uploadButton: "Upload",
+  uploading: "Uploading...",
+  emptyNoDocs: "No documents found in this workspace.",
+  emptyNoSelection: "Select at least one document to start chatting.",
+  emptyReady: "Ask a question about your documents."
+};
+function getTheme(partial) {
+  return { ...DEFAULT_THEME, ...partial };
+}
+function getLabels(partial) {
+  return { ...DEFAULT_LABELS, ...partial };
+}
+function containerStyle(theme, width, height) {
+  return {
+    width: typeof width === "number" ? `${width}px` : width,
+    height: typeof height === "number" ? `${height}px` : height,
+    display: "flex",
+    flexDirection: "column",
+    fontFamily: theme.fontFamily,
+    fontSize: "14px",
+    lineHeight: "1.5",
+    color: theme.textColor,
+    backgroundColor: theme.backgroundColor,
+    border: `1px solid ${theme.borderColor}`,
+    borderRadius: theme.borderRadius,
+    overflow: "hidden",
+    boxSizing: "border-box"
+  };
+}
+function headerStyle(theme) {
+  return {
+    display: "flex",
+    alignItems: "center",
+    padding: "12px 16px",
+    fontWeight: 600,
+    fontSize: "15px",
+    borderBottom: `1px solid ${theme.borderColor}`,
+    flexShrink: 0
+  };
+}
+function bodyStyle() {
+  return {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden"
+  };
+}
+function formContainerStyle() {
+  return {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    padding: "24px 16px",
+    gap: "12px"
+  };
+}
+function labelStyle(theme) {
+  return {
+    fontSize: "13px",
+    fontWeight: 500,
+    color: theme.textColor,
+    marginBottom: "4px"
+  };
+}
+function inputStyle(theme) {
+  return {
+    width: "100%",
+    padding: "8px 12px",
+    fontSize: "14px",
+    fontFamily: theme.fontFamily,
+    color: theme.textColor,
+    backgroundColor: theme.backgroundColor,
+    border: `1px solid ${theme.borderColor}`,
+    borderRadius: "8px",
+    outline: "none",
+    boxSizing: "border-box"
+  };
+}
+function selectStyle(theme) {
+  return {
+    ...inputStyle(theme),
+    cursor: "pointer",
+    appearance: "auto"
+  };
+}
+function buttonStyle(theme, disabled) {
+  return {
+    padding: "8px 16px",
+    fontSize: "14px",
+    fontWeight: 500,
+    fontFamily: theme.fontFamily,
+    color: "#ffffff",
+    backgroundColor: disabled ? theme.mutedColor : theme.primaryColor,
+    border: "none",
+    borderRadius: "8px",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.6 : 1,
+    transition: "opacity 150ms"
+  };
+}
+function errorStyle() {
+  return {
+    fontSize: "13px",
+    color: "#ef4444",
+    margin: "4px 0 0"
+  };
+}
+function messagesContainerStyle() {
+  return {
+    flex: 1,
+    overflowY: "auto",
+    padding: "12px 16px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  };
+}
+function messageBubbleStyle(theme, role) {
+  const isUser = role === "user";
+  return {
+    maxWidth: "85%",
+    padding: "8px 12px",
+    borderRadius: "12px",
+    fontSize: "14px",
+    lineHeight: "1.5",
+    wordBreak: "break-word",
+    whiteSpace: "pre-wrap",
+    alignSelf: isUser ? "flex-end" : "flex-start",
+    backgroundColor: isUser ? theme.userBubbleColor : theme.assistantBubbleColor,
+    color: isUser ? theme.userBubbleTextColor : theme.assistantBubbleTextColor
+  };
+}
+function inputBarStyle(theme) {
+  return {
+    display: "flex",
+    gap: "8px",
+    padding: "12px 16px",
+    borderTop: `1px solid ${theme.borderColor}`,
+    flexShrink: 0
+  };
+}
+function chatInputStyle(theme) {
+  return {
+    ...inputStyle(theme),
+    flex: 1
+  };
+}
+function sendButtonStyle(theme, disabled) {
+  return {
+    ...buttonStyle(theme, disabled),
+    padding: "8px 14px",
+    flexShrink: 0
+  };
+}
+function docSelectorStyle(theme) {
+  return {
+    padding: "8px 16px",
+    borderBottom: `1px solid ${theme.borderColor}`,
+    flexShrink: 0
+  };
+}
+function docToggleStyle(theme) {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    fontSize: "13px",
+    fontWeight: 500,
+    color: theme.mutedColor,
+    cursor: "pointer",
+    background: "none",
+    border: "none",
+    padding: 0,
+    fontFamily: theme.fontFamily
+  };
+}
+function docListStyle() {
+  return {
+    marginTop: "6px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px",
+    maxHeight: "120px",
+    overflowY: "auto"
+  };
+}
+function docItemStyle(theme) {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    fontSize: "13px",
+    color: theme.textColor,
+    cursor: "pointer",
+    textAlign: "left"
+  };
+}
+function emptyStateStyle(theme) {
+  return {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: theme.mutedColor,
+    fontSize: "13px",
+    padding: "24px",
+    textAlign: "center"
+  };
+}
+function loadingContainerStyle() {
+  return {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
+    fontSize: "13px"
+  };
+}
+function brandingStyle(theme) {
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "4px",
+    padding: "6px 16px",
+    fontSize: "11px",
+    color: theme.mutedColor,
+    borderTop: `1px solid ${theme.borderColor}`,
+    flexShrink: 0,
+    userSelect: "none"
+  };
+}
+function brandingLinkStyle(theme) {
+  return {
+    color: theme.mutedColor,
+    fontWeight: 600,
+    textDecoration: "none"
+  };
+}
+function linkButtonStyle(theme) {
+  return {
+    background: "none",
+    border: "none",
+    padding: 0,
+    fontSize: "13px",
+    color: theme.primaryColor,
+    cursor: "pointer",
+    fontFamily: theme.fontFamily,
+    textDecoration: "underline"
+  };
+}
+function secondaryButtonStyle(theme, disabled) {
+  return {
+    padding: "4px 10px",
+    fontSize: "12px",
+    fontWeight: 500,
+    fontFamily: theme.fontFamily,
+    color: disabled ? theme.mutedColor : theme.primaryColor,
+    backgroundColor: "transparent",
+    border: `1px solid ${disabled ? theme.borderColor : theme.primaryColor}`,
+    borderRadius: "6px",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.6 : 1,
+    transition: "opacity 150ms",
+    whiteSpace: "nowrap"
+  };
+}
+function fileInputStyle() {
+  return { display: "none" };
+}
+function agentStatusStyle(theme) {
+  return {
+    fontSize: "12px",
+    color: theme.mutedColor,
+    fontStyle: "italic",
+    padding: "4px 0",
+    alignSelf: "flex-start"
+  };
+}
 function useArbi() {
   const arbi = useContext(ArbiContext);
   if (!arbi) {
@@ -22,6 +345,244 @@ function useArbi() {
   }
   return arbi;
 }
+function AuthScreen({ theme, labels, onLogin }) {
+  const arbi = useArbi();
+  const [mode, setMode] = useState("login");
+  const [step, setStep] = useState("email");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPw, setConfirmPw] = useState("");
+  const [code, setCode] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const resetForm = () => {
+    setPassword("");
+    setConfirmPw("");
+    setCode("");
+    setFirstName("");
+    setLastName("");
+    setError("");
+    setStep("email");
+  };
+  const switchMode = (next) => {
+    resetForm();
+    setMode(next);
+  };
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+    try {
+      await arbi.login(email, password);
+      onLogin();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleHaveCode = () => {
+    setError("");
+    setStep("verify");
+  };
+  const handleEmailCode = async () => {
+    if (!email) return;
+    setLoading(true);
+    setError("");
+    try {
+      await arbi.requestVerification(email);
+      setStep("verify");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to send verification code");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleRegister = async (e) => {
+    e.preventDefault();
+    if (password !== confirmPw) {
+      setError("Passwords do not match");
+      return;
+    }
+    setLoading(true);
+    setError("");
+    try {
+      await arbi.register({ email, password, verificationCode: code, firstName, lastName });
+      await arbi.login(email, password);
+      onLogin();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Registration failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+  if (mode === "login") {
+    return /* @__PURE__ */ jsxs("form", { onSubmit: handleLogin, style: formContainerStyle(), children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.email }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "email",
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            placeholder: "you@example.com",
+            autoComplete: "email",
+            required: true,
+            style: inputStyle(theme)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.password }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "password",
+            value: password,
+            onChange: (e) => setPassword(e.target.value),
+            autoComplete: "current-password",
+            required: true,
+            style: inputStyle(theme)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "submit", disabled: loading, style: buttonStyle(theme, loading), children: loading ? labels.loginButtonLoading : labels.loginButton }),
+      error && /* @__PURE__ */ jsx("div", { style: errorStyle(), children: error }),
+      /* @__PURE__ */ jsx("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => switchMode("register"),
+          style: linkButtonStyle(theme),
+          children: labels.switchToRegister
+        }
+      ) })
+    ] });
+  }
+  if (step === "email") {
+    const noEmail = !email.trim();
+    return /* @__PURE__ */ jsxs("div", { style: formContainerStyle(), children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.email }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "email",
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            placeholder: "you@example.com",
+            autoComplete: "email",
+            style: inputStyle(theme)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleHaveCode,
+            disabled: noEmail,
+            style: { ...buttonStyle(theme, noEmail), flex: 1 },
+            children: labels.haveCodeButton
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleEmailCode,
+            disabled: noEmail || loading,
+            style: { ...buttonStyle(theme, noEmail || loading), flex: 1 },
+            children: loading ? "..." : labels.sendCodeButton
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx("div", { style: errorStyle(), children: error }),
+      /* @__PURE__ */ jsx("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => switchMode("login"), style: linkButtonStyle(theme), children: labels.switchToLogin }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleRegister, style: formContainerStyle(), children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+        /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.firstName }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: firstName,
+            onChange: (e) => setFirstName(e.target.value),
+            autoComplete: "given-name",
+            required: true,
+            style: inputStyle(theme)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+        /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.lastName }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: lastName,
+            onChange: (e) => setLastName(e.target.value),
+            autoComplete: "family-name",
+            required: true,
+            style: inputStyle(theme)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.verificationCode }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: code,
+          onChange: (e) => setCode(e.target.value),
+          autoComplete: "one-time-code",
+          required: true,
+          style: inputStyle(theme)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.password }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "password",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          autoComplete: "new-password",
+          required: true,
+          style: inputStyle(theme)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.confirmPassword }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "password",
+          value: confirmPw,
+          onChange: (e) => setConfirmPw(e.target.value),
+          autoComplete: "new-password",
+          required: true,
+          style: inputStyle(theme)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("button", { type: "submit", disabled: loading, style: buttonStyle(theme, loading), children: loading ? "..." : labels.registerButton }),
+    error && /* @__PURE__ */ jsx("div", { style: errorStyle(), children: error }),
+    /* @__PURE__ */ jsx("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => switchMode("login"), style: linkButtonStyle(theme), children: labels.switchToLogin }) })
+  ] });
+}
 var arbiQueryKeys = {
   workspaces: () => ["arbi", "workspaces"],
   documents: (workspaceId) => ["arbi", "documents", workspaceId],
@@ -75,7 +636,496 @@ function useHealth(options) {
     enabled: options?.enabled
   });
 }
+function WorkspaceScreen({ theme, labels, onSelect }) {
+  const arbi = useArbi();
+  const { data: workspaces, isLoading } = useWorkspaces();
+  const [mode, setMode] = useState("select");
+  const [selected, setSelected] = useState("");
+  const [newName, setNewName] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { style: loadingContainerStyle(), children: "Loading workspaces..." });
+  }
+  const handleConfirm = async () => {
+    if (!selected) return;
+    setLoading(true);
+    setError("");
+    try {
+      await arbi.selectWorkspace(selected);
+      onSelect(selected);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to select workspace");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleCreate = async () => {
+    const name = newName.trim();
+    if (!name) return;
+    setLoading(true);
+    setError("");
+    try {
+      const ws = await arbi.workspaces.create(name);
+      await arbi.selectWorkspace(ws.external_id);
+      onSelect(ws.external_id);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create workspace");
+    } finally {
+      setLoading(false);
+    }
+  };
+  if (mode === "create") {
+    return /* @__PURE__ */ jsxs("div", { style: formContainerStyle(), children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.workspaceName }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: newName,
+            onChange: (e) => setNewName(e.target.value),
+            disabled: loading,
+            style: inputStyle(theme)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleCreate,
+          disabled: !newName.trim() || loading,
+          style: buttonStyle(theme, !newName.trim() || loading),
+          children: loading ? "..." : labels.createButton
+        }
+      ),
+      error && /* @__PURE__ */ jsx("div", { style: errorStyle(), children: error }),
+      /* @__PURE__ */ jsx("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setError("");
+            setMode("select");
+          },
+          style: linkButtonStyle(theme),
+          children: "or select existing"
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: formContainerStyle(), children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.selectWorkspace }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: selected,
+          onChange: (e) => setSelected(e.target.value),
+          disabled: loading,
+          style: selectStyle(theme),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: labels.workspacePlaceholder }),
+            workspaces?.map((ws) => /* @__PURE__ */ jsx("option", { value: ws.external_id, children: ws.name }, ws.external_id))
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleConfirm,
+        disabled: !selected || loading,
+        style: buttonStyle(theme, !selected || loading),
+        children: loading ? "Connecting..." : labels.continueButton
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { style: errorStyle(), children: error }),
+    /* @__PURE__ */ jsx("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setError("");
+          setMode("create");
+        },
+        style: linkButtonStyle(theme),
+        children: labels.createWorkspace
+      }
+    ) })
+  ] });
+}
+var CITE_RE = /\[([^\]]+)\]\(#cite-(\d+)\)/g;
+function renderWithCitations(text, theme, onCiteClick) {
+  const nodes = [];
+  let lastIndex = 0;
+  let match;
+  while ((match = CITE_RE.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      nodes.push(text.slice(lastIndex, match.index));
+    }
+    const statement = match[1];
+    const citeNum = match[2];
+    nodes.push(
+      /* @__PURE__ */ jsxs("span", { children: [
+        statement,
+        /* @__PURE__ */ jsx(
+          "sup",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onCiteClick(citeNum);
+            },
+            style: citeSupStyle(theme),
+            title: `Citation ${citeNum}`,
+            children: citeNum
+          }
+        )
+      ] }, `cite-${match.index}`)
+    );
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < text.length) {
+    nodes.push(text.slice(lastIndex));
+  }
+  return nodes.length > 0 ? nodes : [text];
+}
+function MessageBubble({ message, theme }) {
+  const [expandedCite, setExpandedCite] = useState(null);
+  const hasCitations = message.role === "assistant" && message.metadata && CITE_RE.test(message.text);
+  CITE_RE.lastIndex = 0;
+  const resolved = hasCitations ? resolveCitations(message.metadata) : [];
+  const summaries = hasCitations ? summarizeCitations(resolved) : [];
+  const summaryMap = new Map(summaries.map((s) => [s.citationNum, s]));
+  const handleCiteClick = (num) => {
+    setExpandedCite((prev) => prev === num ? null : num);
+  };
+  const activeSummary = expandedCite ? summaryMap.get(expandedCite) : null;
+  const activeResolved = expandedCite ? resolved.find((r) => r.citationNum === expandedCite) : null;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { style: messageBubbleStyle(theme, message.role), children: hasCitations ? renderWithCitations(message.text, theme, handleCiteClick) : message.text }),
+    activeSummary && activeResolved && /* @__PURE__ */ jsxs("div", { style: citePanelStyle(theme), children: [
+      /* @__PURE__ */ jsxs("div", { style: citePanelHeaderStyle(theme), children: [
+        /* @__PURE__ */ jsxs("strong", { children: [
+          "[",
+          activeSummary.citationNum,
+          "]"
+        ] }),
+        " ",
+        activeSummary.docTitle,
+        activeSummary.pageNumber != null && /* @__PURE__ */ jsxs("span", { style: { color: theme.mutedColor }, children: [
+          " p.",
+          activeSummary.pageNumber
+        ] })
+      ] }),
+      activeResolved.chunks.map((chunk, i) => /* @__PURE__ */ jsx("div", { style: citeChunkStyle(theme), children: chunk.content }, i))
+    ] })
+  ] });
+}
+function citeSupStyle(theme) {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "10px",
+    fontWeight: 600,
+    color: theme.primaryColor,
+    cursor: "pointer",
+    marginLeft: "1px",
+    minWidth: "14px",
+    lineHeight: 1
+  };
+}
+function citePanelStyle(theme) {
+  return {
+    marginTop: "4px",
+    padding: "8px 10px",
+    fontSize: "12px",
+    lineHeight: "1.5",
+    backgroundColor: theme.surfaceColor,
+    border: `1px solid ${theme.borderColor}`,
+    borderRadius: "8px",
+    maxWidth: "85%"
+  };
+}
+function citePanelHeaderStyle(theme) {
+  return {
+    fontSize: "12px",
+    fontWeight: 500,
+    color: theme.textColor,
+    marginBottom: "4px"
+  };
+}
+function citeChunkStyle(theme) {
+  return {
+    fontSize: "11px",
+    color: theme.mutedColor,
+    borderLeft: `2px solid ${theme.borderColor}`,
+    paddingLeft: "8px",
+    marginTop: "4px",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word"
+  };
+}
+function ChatView({ workspaceId, theme, labels }) {
+  const arbi = useArbi();
+  const { data: docs, refetch: refetchDocs } = useDocuments(workspaceId);
+  const mutation = useAssistantQuery();
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState("");
+  const [streaming, setStreaming] = useState("");
+  const [agentStatus, setAgentStatus] = useState("");
+  const [selectedDocs, setSelectedDocs] = useState([]);
+  const [docsExpanded, setDocsExpanded] = useState(false);
+  const [previousResponseId, setPreviousResponseId] = useState(null);
+  const [uploading, setUploading] = useState(false);
+  const messagesEndRef = useRef(null);
+  const fileInputRef = useRef(null);
+  useEffect(() => {
+    if (docs && docs.length > 0 && selectedDocs.length === 0) {
+      setSelectedDocs(docs.map((d) => d.external_id));
+    }
+  }, [docs, selectedDocs.length]);
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, streaming, agentStatus]);
+  const toggleDoc = (docId) => {
+    setSelectedDocs(
+      (prev) => prev.includes(docId) ? prev.filter((id) => id !== docId) : [...prev, docId]
+    );
+  };
+  const handleUpload = useCallback(
+    async (e) => {
+      const files = e.target.files;
+      if (!files || files.length === 0) return;
+      setUploading(true);
+      try {
+        const newIds = [];
+        for (const file of Array.from(files)) {
+          const result = await arbi.documents.uploadFile(file, file.name);
+          newIds.push(...result.doc_ext_ids);
+        }
+        await refetchDocs();
+        setSelectedDocs((prev) => [...prev, ...newIds]);
+      } catch {
+      } finally {
+        setUploading(false);
+        if (fileInputRef.current) fileInputRef.current.value = "";
+      }
+    },
+    [arbi, refetchDocs]
+  );
+  const handleSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      const question = input.trim();
+      if (!question || selectedDocs.length === 0 || mutation.isPending) return;
+      setMessages((prev) => [...prev, { role: "user", text: question }]);
+      setInput("");
+      setStreaming("");
+      setAgentStatus("");
+      mutation.mutate(
+        {
+          question,
+          docIds: selectedDocs,
+          previousResponseId,
+          onToken: (t) => setStreaming((prev) => prev + t),
+          onAgentStep: (step) => {
+            if (step.focus) setAgentStatus(step.focus);
+          }
+        },
+        {
+          onSuccess: (result) => {
+            setStreaming("");
+            setAgentStatus("");
+            setMessages((prev) => [
+              ...prev,
+              { role: "assistant", text: result.text, metadata: result.metadata }
+            ]);
+            setPreviousResponseId(result.assistantMessageExtId);
+          },
+          onError: (err) => {
+            setStreaming("");
+            setAgentStatus("");
+            setMessages((prev) => [...prev, { role: "assistant", text: `Error: ${err.message}` }]);
+          }
+        }
+      );
+    },
+    [input, selectedDocs, previousResponseId, mutation]
+  );
+  const noDocs = !docs || docs.length === 0;
+  const noDocsSelected = selectedDocs.length === 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        multiple: true,
+        accept: ".pdf,.txt,.md,.html,.doc,.docx,.rtf,.ppt,.pptx,.xls,.xlsx",
+        onChange: handleUpload,
+        style: fileInputStyle()
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: docSelectorStyle(theme), children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setDocsExpanded((prev) => !prev),
+            style: docToggleStyle(theme),
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "10px" }, children: docsExpanded ? "\u25BC" : "\u25B6" }),
+              labels.documents,
+              " (",
+              selectedDocs.length,
+              "/",
+              docs?.length ?? 0,
+              " in chat)"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => fileInputRef.current?.click(),
+            disabled: uploading,
+            style: secondaryButtonStyle(theme, uploading),
+            children: uploading ? labels.uploading : labels.uploadButton
+          }
+        )
+      ] }),
+      docsExpanded && docs && docs.length > 0 && /* @__PURE__ */ jsx("div", { style: docListStyle(), children: docs.map((doc) => /* @__PURE__ */ jsxs("label", { style: docItemStyle(theme), children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: selectedDocs.includes(doc.external_id),
+            onChange: () => toggleDoc(doc.external_id)
+          }
+        ),
+        doc.file_name
+      ] }, doc.external_id)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: messagesContainerStyle(), children: [
+      messages.length === 0 && !streaming && /* @__PURE__ */ jsx("div", { style: emptyStateStyle(theme), children: noDocs ? labels.emptyNoDocs : noDocsSelected ? labels.emptyNoSelection : labels.emptyReady }),
+      messages.map((msg, i) => /* @__PURE__ */ jsx(MessageBubble, { message: msg, theme }, i)),
+      agentStatus && !streaming && /* @__PURE__ */ jsxs("div", { style: agentStatusStyle(theme), children: [
+        agentStatus,
+        "..."
+      ] }),
+      streaming && /* @__PURE__ */ jsx(MessageBubble, { message: { role: "assistant", text: streaming }, theme }),
+      /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: inputBarStyle(theme), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: input,
+          onChange: (e) => setInput(e.target.value),
+          placeholder: noDocs || noDocsSelected ? "Select documents first..." : labels.placeholder,
+          disabled: noDocs || noDocsSelected || mutation.isPending,
+          style: chatInputStyle(theme)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          disabled: !input.trim() || noDocsSelected || mutation.isPending,
+          style: sendButtonStyle(theme, !input.trim() || noDocsSelected || mutation.isPending),
+          children: mutation.isPending ? "..." : labels.sendButton
+        }
+      )
+    ] })
+  ] });
+}
+function ChatWidget({ theme, labels, initialWorkspaceId, width, height }) {
+  const arbi = useArbi();
+  const [screen, setScreen] = useState("auth");
+  const [workspaceId, setWorkspaceId] = useState(initialWorkspaceId);
+  const handleLogin = useCallback(async () => {
+    if (initialWorkspaceId) {
+      try {
+        await arbi.selectWorkspace(initialWorkspaceId);
+        setScreen("chat");
+      } catch {
+        setScreen("workspace");
+      }
+    } else {
+      setScreen("workspace");
+    }
+  }, [arbi, initialWorkspaceId]);
+  const handleWorkspaceSelect = useCallback((id) => {
+    setWorkspaceId(id);
+    setScreen("chat");
+  }, []);
+  const handleChangeWorkspace = useCallback(() => {
+    setScreen("workspace");
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { style: containerStyle(theme, width, height), children: [
+    /* @__PURE__ */ jsxs("div", { style: { ...headerStyle(theme), justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx("span", { children: labels.title }),
+      screen === "chat" && !initialWorkspaceId && /* @__PURE__ */ jsx("button", { type: "button", onClick: handleChangeWorkspace, style: linkButtonStyle(theme), children: labels.changeWorkspace })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: bodyStyle(), children: [
+      screen === "auth" && /* @__PURE__ */ jsx(AuthScreen, { theme, labels, onLogin: handleLogin }),
+      screen === "workspace" && /* @__PURE__ */ jsx(WorkspaceScreen, { theme, labels, onSelect: handleWorkspaceSelect }),
+      screen === "chat" && workspaceId && /* @__PURE__ */ jsx(ChatView, { workspaceId, theme, labels })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: brandingStyle(theme), children: [
+      "Powered by",
+      " ",
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://www.arbidocs.com",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: brandingLinkStyle(theme),
+          children: "ARBI"
+        }
+      )
+    ] })
+  ] });
+}
+function ArbiChat({
+  url,
+  workspaceId,
+  theme: themeOverrides,
+  labels: labelOverrides,
+  width = "400px",
+  height = "600px"
+}) {
+  const queryClient = useMemo(
+    () => new QueryClient({
+      defaultOptions: {
+        queries: { retry: 1, refetchOnWindowFocus: false },
+        mutations: { retry: false }
+      }
+    }),
+    []
+  );
+  const theme = useMemo(() => getTheme(themeOverrides), [themeOverrides]);
+  const labels = useMemo(() => getLabels(labelOverrides), [labelOverrides]);
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(ArbiProvider, { url, children: /* @__PURE__ */ jsx(
+    ChatWidget,
+    {
+      theme,
+      labels,
+      initialWorkspaceId: workspaceId,
+      width,
+      height
+    }
+  ) }) });
+}
 
-export { ArbiProvider, arbiQueryKeys, useArbi, useAssistantQuery, useConversations, useDocuments, useHealth, useTags, useWorkspaces };
+export { ArbiChat, ArbiProvider, arbiQueryKeys, useArbi, useAssistantQuery, useConversations, useDocuments, useHealth, useTags, useWorkspaces };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map