@frankieai/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1065 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Avatar: () => Avatar,
+  Badge: () => Badge,
+  Button: () => Button,
+  Card: () => Card,
+  CardContent: () => CardContent,
+  CardDescription: () => CardDescription,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  CardTitle: () => CardTitle,
+  ChatPanel: () => ChatPanel,
+  Composer: () => Composer,
+  FRANKIE_CLOUD_URL: () => FRANKIE_CLOUD_URL,
+  FrankieApiError: () => FrankieApiError,
+  FrankieClient: () => FrankieClient,
+  FrankieInline: () => FrankieInline,
+  FrankieProvider: () => FrankieProvider,
+  FrankieWidget: () => FrankieWidget,
+  Markdown: () => Markdown,
+  MessageBubble: () => MessageBubble,
+  ScrollArea: () => ScrollArea,
+  Separator: () => Separator,
+  SuggestedPrompts: () => SuggestedPrompts,
+  Textarea: () => Textarea,
+  ToolActivityList: () => ToolActivityList,
+  ToolActivityRow: () => ToolActivityRow,
+  TypingDots: () => TypingDots,
+  applyEvent: () => applyEvent,
+  buttonVariants: () => buttonVariants,
+  cn: () => cn,
+  newAssistantMessage: () => newAssistantMessage,
+  newUserMessage: () => newUserMessage,
+  readEventStream: () => readEventStream,
+  resolveMode: () => resolveMode,
+  themeToCssVars: () => themeToCssVars,
+  useFrankie: () => useFrankie,
+  useFrankieChat: () => useFrankieChat,
+  useFrankieTheme: () => useFrankieTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/hooks/FrankieProvider.tsx
+var import_react = require("react");
+
+// src/lib/client.ts
+var FRANKIE_CLOUD_URL = "https://frankie-data-gq5o5syq2q-uc.a.run.app";
+var FrankieApiError = class extends Error {
+  constructor(message, status, code) {
+    super(message);
+    this.status = status;
+    this.code = code;
+  }
+  status;
+  code;
+};
+var FrankieClient = class {
+  constructor(options) {
+    this.options = options;
+    this.baseUrl = (options.baseUrl ?? FRANKIE_CLOUD_URL).replace(/\/+$/, "");
+    this.doFetch = options.fetchImpl ?? globalThis.fetch.bind(globalThis);
+    this.session = this.readStored();
+  }
+  options;
+  baseUrl;
+  doFetch;
+  session;
+  get sessionId() {
+    return this.session?.sessionId;
+  }
+  /** Whether this client persists across reloads (browser only, opt-out via `persist:false`). */
+  get persist() {
+    return this.options.persist !== false && typeof window !== "undefined";
+  }
+  /** localStorage namespace for this tenant, shared with the chat hook. */
+  get namespace() {
+    return `frankie.${this.options.publishableKey}`;
+  }
+  readStored() {
+    if (!this.persist) return void 0;
+    try {
+      const raw = window.localStorage.getItem(`${this.namespace}.session`);
+      if (!raw) return void 0;
+      const session = JSON.parse(raw);
+      return new Date(session.expiresAt).getTime() > Date.now() + 3e4 ? session : void 0;
+    } catch {
+      return void 0;
+    }
+  }
+  writeStored() {
+    if (!this.persist) return;
+    try {
+      if (this.session) window.localStorage.setItem(`${this.namespace}.session`, JSON.stringify(this.session));
+      else window.localStorage.removeItem(`${this.namespace}.session`);
+    } catch {
+    }
+  }
+  async getConfig(signal) {
+    const response = await this.doFetch(`${this.baseUrl}/v1/config`, {
+      headers: { "x-frankie-key": this.options.publishableKey },
+      ...signal ? { signal } : {}
+    });
+    return await this.unwrap(response);
+  }
+  /** Opens (or reuses) a chat session. */
+  async ensureSession(context) {
+    if (this.session && new Date(this.session.expiresAt).getTime() > Date.now() + 3e4) {
+      return this.session;
+    }
+    const userToken = await this.options.getUserToken?.();
+    const response = await this.doFetch(`${this.baseUrl}/v1/session`, {
+      method: "POST",
+      headers: { "content-type": "application/json", "x-frankie-key": this.options.publishableKey },
+      body: JSON.stringify({ ...userToken ? { userToken } : {}, ...context ? { context } : {} })
+    });
+    this.session = await this.unwrap(response);
+    this.writeStored();
+    return this.session;
+  }
+  /** Forget the current session so the next send starts a fresh conversation. */
+  resetSession() {
+    this.session = void 0;
+    this.writeStored();
+  }
+  /**
+   * Sends a message and invokes `onEvent` for each server event as it arrives.
+   * Resolves when the turn ends.
+   */
+  async send(input, onEvent) {
+    const session = await this.ensureSession(input.context);
+    const body = {
+      sessionId: session.sessionId,
+      message: input.message,
+      ...input.context ? { context: input.context } : {}
+    };
+    const response = await this.doFetch(`${this.baseUrl}/v1/chat`, {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+        "x-frankie-key": this.options.publishableKey,
+        authorization: `Bearer ${session.sessionToken}`
+      },
+      body: JSON.stringify(body),
+      ...input.signal ? { signal: input.signal } : {}
+    });
+    if (!response.ok || !response.body) {
+      if (response.status === 401 || response.status === 404) this.resetSession();
+      await this.unwrap(response);
+      return;
+    }
+    for await (const event of readEventStream(response.body)) {
+      onEvent(event);
+    }
+  }
+  async unwrap(response) {
+    if (response.ok) return response.json();
+    let code = "internal";
+    let message = `Request failed with status ${response.status}.`;
+    try {
+      const body = await response.json();
+      code = body.error?.code ?? code;
+      message = body.error?.message ?? message;
+    } catch {
+    }
+    throw new FrankieApiError(message, response.status, code);
+  }
+};
+async function* readEventStream(body) {
+  const reader = body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  try {
+    for (; ; ) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      let split = buffer.indexOf("\n\n");
+      while (split !== -1) {
+        const frame = buffer.slice(0, split);
+        buffer = buffer.slice(split + 2);
+        const event = parseFrame(frame);
+        if (event) yield event;
+        split = buffer.indexOf("\n\n");
+      }
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+function parseFrame(frame) {
+  const data = frame.split("\n").filter((line) => line.startsWith("data:")).map((line) => line.slice(5).replace(/^ /, "")).join("\n");
+  if (!data) return null;
+  try {
+    return JSON.parse(data);
+  } catch {
+    return null;
+  }
+}
+
+// src/hooks/FrankieProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var FrankieContext = (0, import_react.createContext)(null);
+function FrankieProvider({
+  children,
+  context,
+  theme,
+  config: providedConfig,
+  ...clientOptions
+}) {
+  const client = (0, import_react.useMemo)(
+    () => new FrankieClient(clientOptions),
+    // The client holds session state; rebuild it only when the endpoint changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [clientOptions.baseUrl, clientOptions.publishableKey]
+  );
+  const [config, setConfig] = (0, import_react.useState)(providedConfig);
+  const [configError, setConfigError] = (0, import_react.useState)(void 0);
+  const [loading, setLoading] = (0, import_react.useState)(!providedConfig);
+  (0, import_react.useEffect)(() => {
+    if (providedConfig) return;
+    const abort = new AbortController();
+    setLoading(true);
+    client.getConfig(abort.signal).then((next) => {
+      setConfig(next);
+      setConfigError(void 0);
+    }).catch((error) => {
+      if (abort.signal.aborted) return;
+      setConfigError(error instanceof Error ? error.message : "Could not load the assistant.");
+    }).finally(() => {
+      if (!abort.signal.aborted) setLoading(false);
+    });
+    return () => abort.abort();
+  }, [client, providedConfig]);
+  const value = (0, import_react.useMemo)(
+    () => ({
+      client,
+      ...config ? { config } : {},
+      ...configError ? { configError } : {},
+      loading,
+      ...context ? { context } : {},
+      ...theme ? { theme } : {}
+    }),
+    [client, config, configError, loading, context, theme]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FrankieContext.Provider, { value, children });
+}
+function useFrankie() {
+  const value = (0, import_react.useContext)(FrankieContext);
+  if (!value) throw new Error("Frankie components must be rendered inside <FrankieProvider>.");
+  return value;
+}
+function useFrankieTheme() {
+  const { config, theme } = useFrankie();
+  return (0, import_react.useMemo)(() => ({ ...config?.theme, ...theme }), [config?.theme, theme]);
+}
+
+// src/hooks/useFrankieChat.ts
+var import_react2 = require("react");
+
+// src/lib/messages.ts
+function applyEvent(message, event) {
+  switch (event.type) {
+    case "text_delta":
+      return { ...message, text: message.text + event.text };
+    case "thinking_delta":
+      return { ...message, thinking: message.thinking + event.text };
+    case "tool_start":
+      return {
+        ...message,
+        tools: [
+          ...message.tools,
+          { id: event.toolUseId, name: event.name, label: event.label, status: "running" }
+        ]
+      };
+    case "tool_end":
+      return {
+        ...message,
+        tools: message.tools.map(
+          (tool) => tool.id === event.toolUseId ? {
+            ...tool,
+            status: event.ok ? "done" : "failed",
+            ...event.preview ? { detail: event.preview } : {}
+          } : tool
+        )
+      };
+    case "tool_denied":
+      return {
+        ...message,
+        tools: upsertTool(message.tools, {
+          id: event.toolUseId,
+          name: event.name,
+          label: event.name,
+          status: "denied",
+          detail: event.reason
+        })
+      };
+    case "turn_end":
+      return {
+        ...message,
+        status: message.status === "error" ? "error" : "done",
+        // A turn that produced nothing still needs to say something.
+        text: message.text || fallbackText(event.stopReason)
+      };
+    case "error":
+      return { ...message, status: "error", error: event.message };
+    default:
+      return message;
+  }
+}
+function upsertTool(tools, next) {
+  return tools.some((tool) => tool.id === next.id) ? tools.map((tool) => tool.id === next.id ? { ...tool, ...next } : tool) : [...tools, next];
+}
+function fallbackText(stopReason) {
+  switch (stopReason) {
+    case "max_turns":
+      return "I got stuck working on that. Could you narrow it down a little?";
+    case "aborted":
+      return "Stopped.";
+    case "error":
+      return "Something went wrong before I could answer. Try again?";
+    default:
+      return "";
+  }
+}
+function newAssistantMessage(id) {
+  return { id, role: "assistant", text: "", thinking: "", tools: [], status: "streaming", createdAt: Date.now() };
+}
+function newUserMessage(id, text) {
+  return { id, role: "user", text, createdAt: Date.now() };
+}
+
+// src/hooks/useFrankieChat.ts
+var counter = 0;
+var nextId = (prefix) => `${prefix}_${Date.now().toString(36)}_${counter += 1}`;
+function useFrankieChat() {
+  const { client, context } = useFrankie();
+  const [messages, setMessages] = (0, import_react2.useState)([]);
+  const [busy, setBusy] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(void 0);
+  const abortRef = (0, import_react2.useRef)(null);
+  const mounted = (0, import_react2.useRef)(true);
+  (0, import_react2.useEffect)(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      abortRef.current?.abort();
+    };
+  }, []);
+  const storageKey = `${client.namespace}.messages`;
+  (0, import_react2.useEffect)(() => {
+    if (!client.persist) return;
+    try {
+      const raw = window.localStorage.getItem(storageKey);
+      const stored = raw ? JSON.parse(raw) : [];
+      if (Array.isArray(stored) && stored.length) setMessages(stored);
+    } catch {
+    }
+  }, [storageKey]);
+  (0, import_react2.useEffect)(() => {
+    if (!client.persist || busy) return;
+    try {
+      if (messages.length) window.localStorage.setItem(storageKey, JSON.stringify(messages));
+      else window.localStorage.removeItem(storageKey);
+    } catch {
+    }
+  }, [messages, busy, client, storageKey]);
+  const patchAssistant = (0, import_react2.useCallback)((id, update) => {
+    setMessages(
+      (current) => current.map(
+        (message) => message.id === id && message.role === "assistant" ? update(message) : message
+      )
+    );
+  }, []);
+  const send = (0, import_react2.useCallback)(
+    async (text) => {
+      const trimmed = text.trim();
+      if (!trimmed || busy) return;
+      const assistantId = nextId("a");
+      setError(void 0);
+      setBusy(true);
+      setMessages((current) => [
+        ...current,
+        newUserMessage(nextId("u"), trimmed),
+        newAssistantMessage(assistantId)
+      ]);
+      const abort = new AbortController();
+      abortRef.current = abort;
+      try {
+        await client.send({ message: trimmed, ...context ? { context } : {}, signal: abort.signal }, (event) => {
+          if (event.type === "ping" || event.type === "session") return;
+          patchAssistant(assistantId, (message) => applyEvent(message, event));
+        });
+      } catch (caught) {
+        if (abort.signal.aborted) {
+          patchAssistant(assistantId, (message) => ({
+            ...message,
+            status: "done",
+            text: message.text || "Stopped."
+          }));
+        } else {
+          const message = caught instanceof FrankieApiError ? caught.message : "Could not reach the assistant. Check your connection and try again.";
+          if (mounted.current) setError(message);
+          patchAssistant(assistantId, (current) => ({ ...current, status: "error", error: message }));
+        }
+      } finally {
+        if (mounted.current) {
+          setBusy(false);
+          patchAssistant(
+            assistantId,
+            (message) => message.status === "streaming" ? { ...message, status: "done" } : message
+          );
+        }
+        abortRef.current = null;
+      }
+    },
+    [busy, client, context, patchAssistant]
+  );
+  const stop = (0, import_react2.useCallback)(() => abortRef.current?.abort(), []);
+  const reset = (0, import_react2.useCallback)(() => {
+    abortRef.current?.abort();
+    client.resetSession();
+    setMessages([]);
+    setError(void 0);
+    setBusy(false);
+    try {
+      if (client.persist) window.localStorage.removeItem(`${client.namespace}.messages`);
+    } catch {
+    }
+  }, [client]);
+  return { messages, busy, ...error ? { error } : {}, send, stop, reset };
+}
+
+// src/components/chat/FrankieWidget.tsx
+var import_lucide_react4 = require("lucide-react");
+var import_react8 = require("react");
+
+// src/lib/theme.ts
+function themeToCssVars(theme) {
+  if (!theme) return {};
+  const vars = {};
+  if (theme.primary) vars["--frankie-primary"] = theme.primary;
+  if (theme.primaryForeground) vars["--frankie-primary-foreground"] = theme.primaryForeground;
+  if (theme.background) vars["--frankie-background"] = theme.background;
+  if (theme.foreground) vars["--frankie-foreground"] = theme.foreground;
+  if (theme.muted) vars["--frankie-muted"] = theme.muted;
+  if (theme.border) vars["--frankie-border"] = theme.border;
+  if (theme.radius) vars["--frankie-radius"] = `${theme.radius}rem`;
+  if (theme.fontFamily) vars["--frankie-font"] = theme.fontFamily;
+  return vars;
+}
+function resolveMode(mode) {
+  if (mode === "light" || mode === "dark") return mode;
+  if (typeof window === "undefined" || !window.matchMedia) return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/ui/button.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "frankie-focus inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--frankie-radius)] text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:opacity-90",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-muted",
+        outline: "border border-border bg-background hover:bg-muted",
+        ghost: "hover:bg-muted",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-[calc(var(--frankie-radius)-2px)] px-3 text-xs",
+        lg: "h-10 px-6",
+        icon: "size-9"
+      }
+    },
+    defaultVariants: { variant: "default", size: "default" }
+  }
+);
+function Button({ className, variant, size, asChild = false, ...props }) {
+  const Comp = asChild ? import_react_slot.Slot : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Comp, { className: cn(buttonVariants({ variant, size }), className), ...props });
+}
+
+// src/components/chat/ChatPanel.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_react7 = require("react");
+
+// src/components/ui/avatar.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Avatar({ src, name, className }) {
+  const initials = name.split(/\s+/).slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join("");
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "span",
+    {
+      className: cn(
+        "inline-flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary text-[0.625rem] font-semibold text-primary-foreground",
+        className
+      ),
+      "aria-hidden": "true",
+      children: src ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { src, alt: "", className: "size-full object-cover" }) : initials
+    }
+  );
+}
+
+// src/components/ui/card.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col rounded-[calc(var(--frankie-radius)+4px)] border border-border bg-background text-foreground shadow-lg",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("flex items-center gap-3 border-b border-border px-4 py-3", className), ...props });
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("text-sm font-semibold leading-tight", className), ...props });
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("text-xs text-muted-foreground", className), ...props });
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("flex-1 overflow-hidden", className), ...props });
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("border-t border-border p-3", className), ...props });
+}
+
+// src/components/ui/scroll-area.tsx
+var import_react3 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ScrollArea = (0, import_react3.forwardRef)(
+  function ScrollArea2({ className, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: cn("frankie-scroll overflow-y-auto overscroll-contain", className), ...props });
+  }
+);
+
+// src/components/chat/Composer.tsx
+var import_lucide_react = require("lucide-react");
+var import_react5 = require("react");
+
+// src/components/ui/textarea.tsx
+var import_react4 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Textarea = (0, import_react4.forwardRef)(
+  function Textarea2({ className, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "textarea",
+      {
+        ref,
+        className: cn(
+          "frankie-focus flex min-h-[2.25rem] w-full resize-none rounded-[var(--frankie-radius)] border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+
+// src/components/chat/Composer.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var MAX_ROWS_PX = 140;
+function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus }) {
+  const [value, setValue] = (0, import_react5.useState)("");
+  const textareaRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    const node = textareaRef.current;
+    if (!node) return;
+    node.style.height = "auto";
+    node.style.height = `${Math.min(node.scrollHeight, MAX_ROWS_PX)}px`;
+  }, [value]);
+  const submit = (0, import_react5.useCallback)(() => {
+    const text = value.trim();
+    if (!text || busy || disabled) return;
+    setValue("");
+    onSend(text);
+  }, [busy, disabled, onSend, value]);
+  const onKeyDown = (event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      submit();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "form",
+    {
+      className: "flex items-end gap-2",
+      onSubmit: (event) => {
+        event.preventDefault();
+        submit();
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          Textarea,
+          {
+            ref: textareaRef,
+            rows: 1,
+            value,
+            disabled,
+            autoFocus,
+            onChange: (event) => setValue(event.target.value),
+            onKeyDown,
+            placeholder: placeholder ?? "Ask anything\u2026",
+            "aria-label": "Message"
+          }
+        ),
+        busy ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { type: "button", size: "icon", variant: "outline", onClick: onStop, "aria-label": "Stop", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.Square, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { type: "submit", size: "icon", disabled: disabled || value.trim().length === 0, "aria-label": "Send", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.ArrowUp, {}) })
+      ]
+    }
+  );
+}
+
+// src/components/chat/Markdown.tsx
+var import_react6 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Markdown({ text, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn("frankie-prose", className), children: renderBlocks(text) });
+}
+function renderBlocks(text) {
+  const lines = text.split("\n");
+  const blocks = [];
+  let paragraph = [];
+  let list = null;
+  let code = null;
+  const flushParagraph = () => {
+    if (paragraph.length === 0) return;
+    blocks.push(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: renderInline(paragraph.join(" ")) }, `p${blocks.length}`));
+    paragraph = [];
+  };
+  const flushList = () => {
+    if (!list) return;
+    const items = list.items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { children: renderInline(item) }, index));
+    blocks.push(list.ordered ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ol", { children: items }, `l${blocks.length}`) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { children: items }, `l${blocks.length}`));
+    list = null;
+  };
+  for (const line of lines) {
+    const fence = /^```(\w*)\s*$/.exec(line);
+    if (fence) {
+      if (code) {
+        blocks.push(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { children: code.lines.join("\n") }) }, `c${blocks.length}`)
+        );
+        code = null;
+      } else {
+        flushParagraph();
+        flushList();
+        code = { lang: fence[1] ?? "", lines: [] };
+      }
+      continue;
+    }
+    if (code) {
+      code.lines.push(line);
+      continue;
+    }
+    const bullet = /^\s*[-*+]\s+(.*)$/.exec(line);
+    const ordered = /^\s*\d+[.)]\s+(.*)$/.exec(line);
+    if (bullet ?? ordered) {
+      flushParagraph();
+      const isOrdered = Boolean(ordered);
+      if (!list || list.ordered !== isOrdered) {
+        flushList();
+        list = { ordered: isOrdered, items: [] };
+      }
+      list.items.push(ordered?.[1] ?? bullet?.[1] ?? "");
+      continue;
+    }
+    if (line.trim() === "") {
+      flushParagraph();
+      flushList();
+      continue;
+    }
+    const heading = /^#{1,6}\s+(.*)$/.exec(line);
+    if (heading) {
+      flushParagraph();
+      flushList();
+      blocks.push(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "font-semibold", children: renderInline(heading[1] ?? "") }, `h${blocks.length}`));
+      continue;
+    }
+    flushList();
+    paragraph.push(line.trim());
+  }
+  if (code) {
+    blocks.push(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { children: code.lines.join("\n") }) }, `c${blocks.length}`)
+    );
+  }
+  flushParagraph();
+  flushList();
+  return blocks;
+}
+var INLINE = /(\*\*[^*]+\*\*|`[^`]+`|\[[^\]]+\]\((?:https?:\/\/|\/)[^)\s]+\)|\bhttps?:\/\/[^\s<>()]+)/g;
+function renderInline(text) {
+  const nodes = [];
+  let lastIndex = 0;
+  for (const match of text.matchAll(INLINE)) {
+    const token = match[0];
+    const start = match.index;
+    if (start > lastIndex) nodes.push(text.slice(lastIndex, start));
+    nodes.push(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react6.Fragment, { children: renderToken(token) }, start));
+    lastIndex = start + token.length;
+  }
+  if (lastIndex < text.length) nodes.push(text.slice(lastIndex));
+  return nodes;
+}
+function renderToken(token) {
+  if (token.startsWith("**")) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: token.slice(2, -2) });
+  if (token.startsWith("`")) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { children: token.slice(1, -1) });
+  const link = /^\[([^\]]+)\]\(([^)]+)\)$/.exec(token);
+  const href = link ? link[2] ?? "" : token;
+  const label = link ? link[1] ?? "" : token;
+  if (!/^(https?:\/\/|\/)/.test(href)) return token;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer nofollow", children: label });
+}
+
+// src/components/chat/ToolActivityList.tsx
+var import_lucide_react2 = require("lucide-react");
+
+// src/components/ui/badge.tsx
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority2.cva)(
+  "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[0.6875rem] font-medium",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-muted text-muted-foreground",
+        success: "border-transparent bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+        danger: "border-transparent bg-red-500/10 text-red-600 dark:text-red-400",
+        outline: "border-border text-muted-foreground"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+function Badge({
+  className,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+// src/components/chat/ToolActivityList.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function ToolActivityList({ tools, renderTool }) {
+  if (tools.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: "mt-2 flex flex-col gap-1", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { children: renderTool ? renderTool(tool) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityRow, { tool }) }, tool.id)) });
+}
+function ToolActivityRow({ tool }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Badge, { variant: badgeVariant(tool.status), title: tool.detail ?? tool.name, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolIcon, { status: tool.status }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "truncate", children: tool.label })
+  ] });
+}
+function ToolIcon({ status }) {
+  switch (status) {
+    case "running":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Loader2, { className: "size-3 animate-spin", "aria-hidden": "true" });
+    case "done":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Check, { className: "size-3", "aria-hidden": "true" });
+    case "denied":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.ShieldAlert, { className: "size-3", "aria-hidden": "true" });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.X, { className: "size-3", "aria-hidden": "true" });
+  }
+}
+function badgeVariant(status) {
+  if (status === "done") return "success";
+  if (status === "failed") return "danger";
+  if (status === "denied") return "outline";
+  return "default";
+}
+
+// src/components/chat/MessageBubble.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function MessageBubble({
+  message,
+  assistantName,
+  avatarUrl,
+  showToolActivity,
+  renderTool
+}) {
+  if (message.role === "user") {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "max-w-[85%] rounded-[var(--frankie-radius)] bg-primary px-3 py-2 text-sm text-primary-foreground", children: message.text }) });
+  }
+  const empty = message.text.length === 0 && message.tools.length === 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Avatar, { ...avatarUrl ? { src: avatarUrl } : {}, name: assistantName, className: "mt-0.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "min-w-0 max-w-[85%]", children: [
+      message.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "rounded-[var(--frankie-radius)] bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-400", children: message.error }) : empty && message.status === "streaming" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TypingDots, {}) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Markdown, { text: message.text, className: "text-sm" }),
+      showToolActivity ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ToolActivityList, { tools: message.tools, ...renderTool ? { renderTool } : {} }) : null
+    ] })
+  ] });
+}
+function TypingDots() {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "inline-flex items-center gap-1 py-2", role: "status", "aria-label": "Thinking", children: [0, 1, 2].map((index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "span",
+    {
+      className: cn("size-1.5 animate-pulse rounded-full bg-muted-foreground"),
+      style: { animationDelay: `${index * 150}ms` }
+    },
+    index
+  )) });
+}
+
+// src/components/chat/SuggestedPrompts.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function SuggestedPrompts({
+  prompts,
+  onPick,
+  disabled
+}) {
+  if (prompts.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-wrap gap-2", children: prompts.map((prompt) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    Button,
+    {
+      type: "button",
+      size: "sm",
+      variant: "outline",
+      disabled,
+      onClick: () => onPick(prompt),
+      children: prompt
+    },
+    prompt
+  )) });
+}
+
+// src/components/chat/ChatPanel.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function ChatPanel({
+  className,
+  header,
+  footer,
+  emptyState,
+  renderMessage,
+  renderTool,
+  placeholder,
+  onClose,
+  autoFocus,
+  fill
+}) {
+  const { config, configError, loading } = useFrankie();
+  const theme = useFrankieTheme();
+  const { messages, busy, error, send, stop, reset } = useFrankieChat();
+  const scrollRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    const node = scrollRef.current;
+    if (!node) return;
+    const distanceFromBottom = node.scrollHeight - node.scrollTop - node.clientHeight;
+    if (distanceFromBottom < 160) node.scrollTop = node.scrollHeight;
+  }, [messages]);
+  const name = config?.branding.name ?? "Assistant";
+  const mode = resolveMode(theme?.mode);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    Card,
+    {
+      className: cn(
+        "frankie-root",
+        fill ? "h-full w-full rounded-none border-0 shadow-none" : "h-[32rem] w-[22rem] max-w-[calc(100vw-2rem)]",
+        mode === "dark" && "dark",
+        className
+      ),
+      style: themeToCssVars(theme),
+      "data-frankie-mode": mode,
+      children: [
+        header === false ? null : header !== void 0 ? header : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(CardHeader, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Avatar, { ...config?.branding.avatarUrl ? { src: config.branding.avatarUrl } : {}, name }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardTitle, { children: name }),
+            config?.branding.tagline ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardDescription, { children: config.branding.tagline }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { size: "icon", variant: "ghost", onClick: reset, "aria-label": "Start a new conversation", title: "New conversation", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.RotateCcw, {}) }),
+          onClose ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { size: "icon", variant: "ghost", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.X, {}) }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ScrollArea, { ref: scrollRef, className: "flex h-full flex-col gap-4 p-4", "aria-live": "polite", children: configError ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-muted-foreground", children: configError }) : loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-muted-foreground", children: "Loading\u2026" }) : messages.length === 0 ? emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-muted-foreground", children: config?.greeting }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SuggestedPrompts, { prompts: config?.suggestedPrompts ?? [], onPick: send, disabled: busy })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col gap-4", children: messages.map(
+          (message) => renderMessage ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: renderMessage(message) }, message.id) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            MessageBubble,
+            {
+              message,
+              assistantName: name,
+              ...config?.branding.avatarUrl ? { avatarUrl: config.branding.avatarUrl } : {},
+              showToolActivity: config?.showToolActivity ?? true,
+              ...renderTool ? { renderTool } : {}
+            },
+            message.id
+          )
+        ) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(CardFooter, { className: "flex flex-col gap-2", children: [
+          error ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "w-full text-xs text-red-600 dark:text-red-400", children: error }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            Composer,
+            {
+              onSend: send,
+              onStop: stop,
+              busy,
+              disabled: Boolean(configError),
+              ...placeholder ? { placeholder } : {},
+              ...autoFocus ? { autoFocus } : {}
+            }
+          ) }),
+          footer
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/chat/FrankieWidget.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function FrankieWidget({
+  position = "bottom-right",
+  offset = 24,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  renderLauncher,
+  ...panelProps
+}) {
+  const { config } = useFrankie();
+  const theme = useFrankieTheme();
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react8.useState)(defaultOpen);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = (next) => {
+    if (controlledOpen === void 0) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
+  (0, import_react8.useEffect)(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+  const label = config?.branding.launcherLabel ?? "Need a hand?";
+  const mode = resolveMode(theme?.mode);
+  const side = position === "bottom-right" ? { right: offset } : { left: offset };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      className: cn("frankie-root frankie-widget", mode === "dark" && "dark"),
+      style: { ...themeToCssVars(theme), position: "fixed", bottom: offset, ...side, zIndex: 2147483e3 },
+      "data-frankie-mode": mode,
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("flex flex-col gap-3", position === "bottom-left" ? "items-start" : "items-end"), children: [
+        open ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChatPanel, { ...panelProps, onClose: () => setOpen(false), autoFocus: true }) : null,
+        renderLauncher ? renderLauncher({ open, toggle: () => setOpen(!open), label }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          Button,
+          {
+            size: "icon",
+            className: "size-12 rounded-full shadow-lg",
+            onClick: () => setOpen(!open),
+            "aria-expanded": open,
+            "aria-label": open ? "Close the assistant" : label,
+            title: label,
+            children: open ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.X, { className: "size-5" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.MessageCircle, { className: "size-5" })
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/chat/FrankieInline.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function FrankieInline({ className, style, ...panelProps }) {
+  const theme = useFrankieTheme();
+  const mode = resolveMode(theme?.mode);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      className: cn("frankie-root frankie-inline", mode === "dark" && "dark", className),
+      style: { ...themeToCssVars(theme), display: "flex", height: "100%", width: "100%", ...style },
+      "data-frankie-mode": mode,
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChatPanel, { ...panelProps, fill: true })
+    }
+  );
+}
+
+// src/components/ui/separator.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Separator({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { role: "separator", className: cn("h-px w-full bg-border", className) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  ChatPanel,
+  Composer,
+  FRANKIE_CLOUD_URL,
+  FrankieApiError,
+  FrankieClient,
+  FrankieInline,
+  FrankieProvider,
+  FrankieWidget,
+  Markdown,
+  MessageBubble,
+  ScrollArea,
+  Separator,
+  SuggestedPrompts,
+  Textarea,
+  ToolActivityList,
+  ToolActivityRow,
+  TypingDots,
+  applyEvent,
+  buttonVariants,
+  cn,
+  newAssistantMessage,
+  newUserMessage,
+  readEventStream,
+  resolveMode,
+  themeToCssVars,
+  useFrankie,
+  useFrankieChat,
+  useFrankieTheme
+});
+//# sourceMappingURL=index.cjs.map