@xpert-ai/chatkit-ui 0.0.2

package/dist/index.js

@@ -0,0 +1,2694 @@
+// src/components/chat.tsx
+import * as React17 from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/providers/Stream.tsx
+import {
+  createContext,
+  useCallback as useCallback2,
+  useContext,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState
+} from "react";
+import { useQueryState } from "nuqs";
+import {
+  Client
+} from "@xpert-ai/xpert-sdk";
+import "@langchain/core/messages/tool";
+import { ChatMessageEventTypeEnum, ChatMessageTypeEnum } from "@xpert-ai/chatkit-types";
+
+// src/hooks/useParentMessenger.ts
+import { useCallback, useEffect, useMemo, useRef } from "react";
+
+// src/hooks/useStream.ts
+var streamRef = { current: null };
+function useStreamManager() {
+  return {
+    streamRef,
+    stream: streamRef.current,
+    setStream: (stream) => {
+      streamRef.current = stream;
+    }
+  };
+}
+
+// src/hooks/useParentMessenger.ts
+var getParentOrigin = () => {
+  if (typeof document === "undefined" || !document.referrer) return "*";
+  try {
+    return new URL(document.referrer).origin;
+  } catch {
+    return "*";
+  }
+};
+var createNonce = () => {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return `ck_${Date.now()}_${Math.random().toString(16).slice(2)}`;
+};
+function useParentMessenger({ onSetOptions } = {}) {
+  const { streamRef: streamRef2 } = useStreamManager();
+  const parentOriginRef = useRef("*");
+  const pendingRef = useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const isParentAvailable = useMemo(() => {
+    return typeof window !== "undefined" && window.parent !== window;
+  }, []);
+  useEffect(() => {
+    parentOriginRef.current = getParentOrigin();
+  }, []);
+  useEffect(() => {
+    if (!isParentAvailable) return;
+    const sendResponse = (nonce, response, error) => {
+      const message = {
+        __xpaiChatKit: true,
+        type: "response",
+        nonce,
+        response,
+        error
+      };
+      window.parent.postMessage(message, parentOriginRef.current);
+    };
+    const handleMessage = (event) => {
+      if (event.source !== window.parent) return;
+      if (!event.data || typeof event.data !== "object") return;
+      if (parentOriginRef.current !== "*" && typeof event.origin === "string" && event.origin !== parentOriginRef.current) {
+        return;
+      }
+      const payload = event.data;
+      if (payload.__xpaiChatKit !== true) return;
+      if (payload.type == "command" && payload.command === "onSendUserMessage") {
+        streamRef2.current?.submit({
+          input: {
+            input: payload.data.text
+          }
+        });
+        if (payload.nonce) {
+          sendResponse(payload.nonce, { ok: true });
+        }
+        return;
+      }
+      if (payload.type == "command" && payload.command === "onSetOptions") {
+        if (onSetOptions) {
+          onSetOptions(payload.data);
+        }
+        if (payload.nonce) {
+          sendResponse(payload.nonce, { ok: true });
+        }
+        return;
+      }
+      if (payload.type !== "response") return;
+      if (typeof payload.nonce !== "string") return;
+      const handler = pendingRef.current.get(payload.nonce);
+      if (!handler) return;
+      if (payload.error !== void 0) {
+        handler.reject(payload.error);
+      } else {
+        handler.resolve(payload.response);
+      }
+      pendingRef.current.delete(payload.nonce);
+    };
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+      pendingRef.current.forEach((handler) => {
+        handler.reject(new Error("Parent messenger closed"));
+      });
+      pendingRef.current.clear();
+    };
+  }, [isParentAvailable]);
+  const sendCommand = useCallback(
+    (command, data, transfer) => {
+      if (!isParentAvailable) {
+        return Promise.reject(new Error("Parent window not available"));
+      }
+      const nonce = createNonce();
+      const message = {
+        __xpaiChatKit: true,
+        type: "command",
+        nonce,
+        command,
+        data: data ?? null
+      };
+      return new Promise((resolve, reject) => {
+        pendingRef.current.set(nonce, { resolve, reject });
+        window.parent.postMessage(message, parentOriginRef.current, transfer);
+      });
+    },
+    [isParentAvailable]
+  );
+  const sendEvent = useCallback(
+    (event, data, transfer) => {
+      if (!isParentAvailable) return;
+      const message = {
+        __xpaiChatKit: true,
+        type: "event",
+        event,
+        data
+      };
+      window.parent.postMessage(message, parentOriginRef.current, transfer);
+    },
+    [isParentAvailable]
+  );
+  return {
+    isParentAvailable,
+    sendCommand,
+    sendEvent
+  };
+}
+
+// src/providers/Stream.tsx
+import { jsx } from "react/jsx-runtime";
+var StreamContext = createContext(void 0);
+var defaultApiUrl = import.meta.env.VITE_XPERTAI_API_URL ?? "https://api.mtda.cloud/api/ai";
+var useStreamContext = () => {
+  const context = useContext(StreamContext);
+  if (!context) {
+    throw new Error("useStreamContext must be used within a StreamProvider");
+  }
+  return context;
+};
+
+// src/components/composer/ComposerMenu.tsx
+import * as React4 from "react";
+
+// src/components/ui/button.tsx
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var base = "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background";
+var variants = {
+  default: "bg-primary text-primary-foreground hover:bg-primary/90",
+  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  ghost: "hover:bg-accent hover:text-accent-foreground"
+};
+var sizes = {
+  default: "h-10 px-4 py-2",
+  sm: "h-9 rounded-md px-3",
+  icon: "h-10 w-10"
+};
+var Button = React2.forwardRef(
+  ({ className, variant = "default", size = "default", type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx2(
+      "button",
+      {
+        ref,
+        type: type ?? "button",
+        className: cn(base, variants[variant], sizes[size], className),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/ui/popover.tsx
+import "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
+    PopoverPrimitive.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+
+// src/i18n/useChatkitTranslation.ts
+import { useTranslation } from "react-i18next";
+
+// src/i18n/index.ts
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+// src/i18n/locales/en-US.json
+var en_US_default = {
+  chat: {
+    title: "Chat",
+    placeholder: "Type a message...",
+    statusOnline: "Online",
+    missingConfigShort: "Missing ChatKit configuration.",
+    missingConfigDetail: "Missing ChatKit configuration. Check `VITE_XPERTAI_API_URL`, and the `clientSecret` prop.",
+    loadingConversation: "Loading conversation...",
+    stop: "Stop",
+    send: "Send message",
+    poweredBy: "Powered by Xpert AI",
+    errors: {
+      loadMessages: "Failed to load conversation messages",
+      createConversation: "Failed to create conversation",
+      deleteConversation: "Failed to delete conversation"
+    }
+  },
+  history: {
+    conversationHistory: "Conversation history",
+    title: "Conversations",
+    newChat: "New Chat",
+    empty: "No conversations yet",
+    newConversationTitle: "New conversation",
+    conversationWithId: "Conversation {{id}}",
+    conversationFallback: "Conversation"
+  },
+  messageActions: {
+    copied: "Copied!",
+    copy: "Copy to clipboard",
+    regenerate: "Regenerate response"
+  },
+  startScreen: {
+    greeting: "What can I help with today?"
+  },
+  composer: {
+    openMenu: "Open menu",
+    addAttachment: "Add attachment"
+  },
+  sheet: {
+    close: "Close"
+  },
+  markdown: {
+    copy: "Copy"
+  },
+  thread: {
+    errorToast: "An error occurred. Please try again.",
+    errorLabel: "Error:",
+    langGraphMessages: "LangGraph Messages..."
+  }
+};
+
+// src/i18n/locales/zh-CN.json
+var zh_CN_default = {
+  chat: {
+    title: "\u804A\u5929",
+    placeholder: "\u8F93\u5165\u6D88\u606F...",
+    statusOnline: "\u5728\u7EBF",
+    missingConfigShort: "\u7F3A\u5C11 ChatKit \u914D\u7F6E\u3002",
+    missingConfigDetail: "\u7F3A\u5C11 ChatKit \u914D\u7F6E\u3002\u8BF7\u68C0\u67E5 `VITE_XPERTAI_API_URL` \u548C `clientSecret` \u53C2\u6570\u3002",
+    loadingConversation: "\u6B63\u5728\u52A0\u8F7D\u5BF9\u8BDD...",
+    stop: "\u505C\u6B62",
+    send: "\u53D1\u9001\u6D88\u606F",
+    poweredBy: "\u7531 Xpert AI \u9A71\u52A8",
+    errors: {
+      loadMessages: "\u52A0\u8F7D\u5BF9\u8BDD\u6D88\u606F\u5931\u8D25",
+      createConversation: "\u521B\u5EFA\u5BF9\u8BDD\u5931\u8D25",
+      deleteConversation: "\u5220\u9664\u5BF9\u8BDD\u5931\u8D25"
+    }
+  },
+  history: {
+    conversationHistory: "\u5BF9\u8BDD\u5386\u53F2",
+    title: "\u5BF9\u8BDD",
+    newChat: "\u65B0\u5BF9\u8BDD",
+    empty: "\u6682\u65E0\u5BF9\u8BDD",
+    newConversationTitle: "\u65B0\u5BF9\u8BDD",
+    conversationWithId: "\u5BF9\u8BDD {{id}}",
+    conversationFallback: "\u5BF9\u8BDD"
+  },
+  messageActions: {
+    copied: "\u5DF2\u590D\u5236\uFF01",
+    copy: "\u590D\u5236\u5230\u526A\u8D34\u677F",
+    regenerate: "\u91CD\u65B0\u751F\u6210\u56DE\u590D"
+  },
+  startScreen: {
+    greeting: "\u4ECA\u5929\u6211\u80FD\u5E2E\u4F60\u4EC0\u4E48\uFF1F"
+  },
+  composer: {
+    openMenu: "\u6253\u5F00\u83DC\u5355",
+    addAttachment: "\u6DFB\u52A0\u9644\u4EF6"
+  },
+  sheet: {
+    close: "\u5173\u95ED"
+  },
+  markdown: {
+    copy: "\u590D\u5236"
+  },
+  thread: {
+    errorToast: "\u53D1\u751F\u9519\u8BEF\uFF0C\u8BF7\u91CD\u8BD5\u3002",
+    errorLabel: "\u9519\u8BEF\uFF1A",
+    langGraphMessages: "LangGraph \u6D88\u606F..."
+  }
+};
+
+// src/i18n/index.ts
+var localeStorageKey = "chatkit:locale";
+var supportedLocales = ["en-US", "zh-CN"];
+var defaultLocale = "en-US";
+function normalizeLocale(locale) {
+  if (!locale) return defaultLocale;
+  const normalized = locale.trim();
+  if (!normalized) return defaultLocale;
+  if (normalized === "zh-CN" || normalized.startsWith("zh")) return "zh-CN";
+  if (normalized === "en-US" || normalized.startsWith("en")) return "en-US";
+  return defaultLocale;
+}
+function getStoredLocale() {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.localStorage.getItem(localeStorageKey);
+  } catch {
+    return null;
+  }
+}
+function getBrowserLocale() {
+  if (typeof navigator === "undefined") return null;
+  return navigator.language || null;
+}
+function initI18n() {
+  if (i18n.isInitialized) return i18n;
+  const initialLocale = normalizeLocale(getStoredLocale() ?? getBrowserLocale());
+  void i18n.use(initReactI18next).init({
+    resources: {
+      "en-US": { translation: en_US_default },
+      "zh-CN": { translation: zh_CN_default }
+    },
+    lng: initialLocale,
+    fallbackLng: defaultLocale,
+    interpolation: {
+      escapeValue: false
+    },
+    react: {
+      useSuspense: false
+    },
+    initImmediate: false
+  });
+  return i18n;
+}
+function setLanguage(locale) {
+  const resolved = normalizeLocale(locale);
+  initI18n();
+  void i18n.changeLanguage(resolved);
+  if (typeof window !== "undefined") {
+    try {
+      window.localStorage.setItem(localeStorageKey, resolved);
+    } catch {
+    }
+  }
+  return resolved;
+}
+function getLanguage() {
+  if (i18n.isInitialized) {
+    return normalizeLocale(i18n.language);
+  }
+  return normalizeLocale(getStoredLocale() ?? getBrowserLocale());
+}
+
+// src/i18n/useChatkitTranslation.ts
+function useChatkitTranslation() {
+  initI18n();
+  return useTranslation();
+}
+
+// src/components/composer/ComposerMenu.tsx
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+function getIconComponent(icon) {
+  const iconMap = {
+    "plus": /* @__PURE__ */ jsx4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("path", { d: "M5 12h14M12 5v14" }) }),
+    "document": /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx4("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }),
+      /* @__PURE__ */ jsx4("polyline", { points: "14 2 14 8 20 8" })
+    ] }),
+    "write": /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx4("path", { d: "M12 20h9" }),
+      /* @__PURE__ */ jsx4("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })
+    ] }),
+    "sparkle": /* @__PURE__ */ jsx4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" }) }),
+    "lightbulb": /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx4("path", { d: "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" }),
+      /* @__PURE__ */ jsx4("path", { d: "M9 18h6" }),
+      /* @__PURE__ */ jsx4("path", { d: "M10 22h4" })
+    ] }),
+    "settings-slider": /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx4("line", { x1: "4", x2: "4", y1: "21", y2: "14" }),
+      /* @__PURE__ */ jsx4("line", { x1: "4", x2: "4", y1: "10", y2: "3" }),
+      /* @__PURE__ */ jsx4("line", { x1: "12", x2: "12", y1: "21", y2: "12" }),
+      /* @__PURE__ */ jsx4("line", { x1: "12", x2: "12", y1: "8", y2: "3" }),
+      /* @__PURE__ */ jsx4("line", { x1: "20", x2: "20", y1: "21", y2: "16" }),
+      /* @__PURE__ */ jsx4("line", { x1: "20", x2: "20", y1: "12", y2: "3" }),
+      /* @__PURE__ */ jsx4("line", { x1: "2", x2: "6", y1: "14", y2: "14" }),
+      /* @__PURE__ */ jsx4("line", { x1: "10", x2: "14", y1: "8", y2: "8" }),
+      /* @__PURE__ */ jsx4("line", { x1: "18", x2: "22", y1: "16", y2: "16" })
+    ] }),
+    "search": /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx4("circle", { cx: "11", cy: "11", r: "8" }),
+      /* @__PURE__ */ jsx4("path", { d: "m21 21-4.3-4.3" })
+    ] }),
+    "globe": /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx4("line", { x1: "2", x2: "22", y1: "12", y2: "12" }),
+      /* @__PURE__ */ jsx4("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
+    ] }),
+    "images": /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx4("path", { d: "M18 22H4a2 2 0 0 1-2-2V6" }),
+      /* @__PURE__ */ jsx4("path", { d: "m22 13-1.296-1.296a2.41 2.41 0 0 0-3.408 0L11 18" }),
+      /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "8", r: "2" }),
+      /* @__PURE__ */ jsx4("rect", { width: "16", height: "16", x: "6", y: "2", rx: "2" })
+    ] })
+  };
+  return iconMap[icon] || iconMap["sparkle"];
+}
+function PaperclipIcon() {
+  return /* @__PURE__ */ jsx4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }) });
+}
+function PlusIcon() {
+  return /* @__PURE__ */ jsx4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("path", { d: "M5 12h14M12 5v14" }) });
+}
+function ComposerMenu({
+  composer,
+  onAttachmentClick,
+  onToolSelect,
+  selectedTool,
+  disabled = false
+}) {
+  const { t } = useChatkitTranslation();
+  const [open, setOpen] = React4.useState(false);
+  const attachmentsEnabled = composer?.attachments?.enabled ?? false;
+  const tools = composer?.tools ?? [];
+  if (!attachmentsEnabled && tools.length === 0) {
+    return null;
+  }
+  const handleAttachmentClick = () => {
+    onAttachmentClick?.();
+    setOpen(false);
+  };
+  const handleToolSelect = (tool) => {
+    onToolSelect?.(tool);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx4(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        disabled,
+        className: cn(
+          "h-10 w-10 shrink-0 rounded-full hover:bg-muted",
+          open && "bg-muted"
+        ),
+        children: [
+          /* @__PURE__ */ jsx4(PlusIcon, {}),
+          /* @__PURE__ */ jsx4("span", { className: "sr-only", children: t("composer.openMenu") })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx4(
+      PopoverContent,
+      {
+        align: "start",
+        side: "top",
+        className: "w-56 p-1",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          attachmentsEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: handleAttachmentClick,
+                className: "flex items-center gap-3 rounded-md px-3 py-2 text-sm hover:bg-muted transition-colors",
+                children: [
+                  /* @__PURE__ */ jsx4("span", { className: "flex h-6 w-6 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx4(PaperclipIcon, {}) }),
+                  /* @__PURE__ */ jsx4("span", { children: t("composer.addAttachment") })
+                ]
+              }
+            ),
+            tools.length > 0 && /* @__PURE__ */ jsx4("div", { className: "my-1 h-px bg-border" })
+          ] }),
+          tools.map((tool) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleToolSelect(tool),
+              className: cn(
+                "flex items-center gap-3 rounded-md px-3 py-2 text-sm hover:bg-muted transition-colors",
+                selectedTool?.id === tool.id && "bg-muted"
+              ),
+              children: [
+                /* @__PURE__ */ jsx4("span", { className: "flex h-6 w-6 items-center justify-center text-muted-foreground", children: getIconComponent(tool.icon) }),
+                /* @__PURE__ */ jsx4("span", { children: tool.label })
+              ]
+            },
+            tool.id
+          ))
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/components/composer/SendButton.tsx
+import "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function ArrowUpIcon() {
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx5("path", { d: "M12 19V5M5 12l7-7 7 7" })
+    }
+  );
+}
+function StopIcon() {
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      children: /* @__PURE__ */ jsx5("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" })
+    }
+  );
+}
+function SendButton({
+  disabled = false,
+  isLoading = false,
+  onStop,
+  stopLabel = "Stop",
+  sendLabel = "Send"
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: onStop,
+        className: cn(
+          "flex h-9 w-9 shrink-0 items-center justify-center rounded-full",
+          "bg-foreground text-background",
+          "transition-transform duration-150 ease-out",
+          "hover:scale-105 active:scale-95"
+        ),
+        "aria-label": stopLabel,
+        children: /* @__PURE__ */ jsx5(StopIcon, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx5(
+    "button",
+    {
+      type: "submit",
+      disabled,
+      className: cn(
+        "flex h-9 w-9 shrink-0 items-center justify-center rounded-full",
+        "bg-foreground text-background",
+        "transition-all duration-150 ease-out",
+        "hover:scale-105 active:scale-95",
+        "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:scale-100"
+      ),
+      "aria-label": sendLabel,
+      children: /* @__PURE__ */ jsx5(ArrowUpIcon, {})
+    }
+  );
+}
+
+// src/components/history/HistorySidebar.tsx
+import * as React8 from "react";
+
+// src/components/ui/scroll-area.tsx
+import * as React6 from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var ScrollArea = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    className: cn("relative overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx6(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx6(ScrollBar, {}),
+      /* @__PURE__ */ jsx6(ScrollAreaPrimitive.Corner, {})
+    ]
+  }
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React6.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx6(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx6(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+// src/components/ui/sheet.tsx
+import "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsx7(SheetPrimitive.Root, { ...props });
+}
+function SheetTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx7(SheetPrimitive.Trigger, { ...props });
+}
+function SheetPortal({ ...props }) {
+  return /* @__PURE__ */ jsx7(SheetPrimitive.Portal, { ...props });
+}
+function SheetOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    SheetPrimitive.Overlay,
+    {
+      className: cn(
+        "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  side = "right",
+  className,
+  children,
+  ...props
+}) {
+  const { t } = useChatkitTranslation();
+  const sideVariants = {
+    top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+    bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+    left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+    right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+  };
+  return /* @__PURE__ */ jsxs3(SheetPortal, { children: [
+    /* @__PURE__ */ jsx7(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs3(
+      SheetPrimitive.Content,
+      {
+        className: cn(
+          "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+          sideVariants[side],
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxs3(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+            /* @__PURE__ */ jsx7(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsx7("path", { d: "M18 6 6 18M6 6l12 12" })
+              }
+            ),
+            /* @__PURE__ */ jsx7("span", { className: "sr-only", children: t("sheet.close") })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: cn(
+        "flex flex-col space-y-2 text-center sm:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    SheetPrimitive.Title,
+    {
+      className: cn("text-lg font-semibold text-foreground", className),
+      ...props
+    }
+  );
+}
+
+// src/components/history/HistorySidebar.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+function HistoryIcon() {
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx8("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+        /* @__PURE__ */ jsx8("path", { d: "M3 3v5h5" }),
+        /* @__PURE__ */ jsx8("path", { d: "M12 7v5l4 2" })
+      ]
+    }
+  );
+}
+function PlusCircleIcon() {
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx8("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx8("path", { d: "M8 12h8M12 8v8" })
+      ]
+    }
+  );
+}
+function MessageIcon() {
+  return /* @__PURE__ */ jsx8(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx8("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+    }
+  );
+}
+function TrashIcon() {
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx8("path", { d: "M3 6h18" }),
+        /* @__PURE__ */ jsx8("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+        /* @__PURE__ */ jsx8("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })
+      ]
+    }
+  );
+}
+function HistorySidebar({
+  conversations = [],
+  currentConversationId,
+  onNewConversation,
+  onSelectConversation,
+  onDeleteConversation,
+  showDelete = true,
+  disabled = false
+}) {
+  const { t } = useChatkitTranslation();
+  const [open, setOpen] = React8.useState(false);
+  const handleNewConversation = () => {
+    onNewConversation?.();
+    setOpen(false);
+  };
+  const handleSelectConversation = (id) => {
+    onSelectConversation?.(id);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs4(Sheet, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx8(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        disabled,
+        className: "h-8 w-8",
+        children: [
+          /* @__PURE__ */ jsx8(HistoryIcon, {}),
+          /* @__PURE__ */ jsx8("span", { className: "sr-only", children: t("history.conversationHistory") })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs4(SheetContent, { side: "right", className: "w-80 p-0", children: [
+      /* @__PURE__ */ jsx8(SheetHeader, { className: "border-b p-4", children: /* @__PURE__ */ jsx8(SheetTitle, { children: t("history.title") }) }),
+      /* @__PURE__ */ jsx8("div", { className: "p-4", children: /* @__PURE__ */ jsxs4(
+        Button,
+        {
+          onClick: handleNewConversation,
+          className: "w-full justify-start gap-2",
+          variant: "secondary",
+          children: [
+            /* @__PURE__ */ jsx8(PlusCircleIcon, {}),
+            t("history.newChat")
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx8(ScrollArea, { className: "h-[calc(100vh-140px)]", children: /* @__PURE__ */ jsx8("div", { className: "px-4 pb-4", children: conversations.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "py-8 text-center text-sm text-muted-foreground", children: t("history.empty") }) : /* @__PURE__ */ jsx8("div", { className: "space-y-1", children: conversations.map((conversation) => /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: cn(
+            "group flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors",
+            "hover:bg-muted cursor-pointer",
+            currentConversationId === conversation.id && "bg-muted"
+          ),
+          onClick: () => handleSelectConversation(conversation.id),
+          children: [
+            /* @__PURE__ */ jsx8("span", { className: "text-muted-foreground", children: /* @__PURE__ */ jsx8(MessageIcon, {}) }),
+            /* @__PURE__ */ jsx8("span", { className: "flex-1 truncate", children: conversation.title }),
+            showDelete && onDeleteConversation && /* @__PURE__ */ jsx8(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onDeleteConversation(conversation.id);
+                },
+                className: "opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-destructive/10 hover:text-destructive transition-all",
+                children: /* @__PURE__ */ jsx8(TrashIcon, {})
+              }
+            )
+          ]
+        },
+        conversation.id
+      )) }) }) })
+    ] })
+  ] });
+}
+
+// src/components/thread/messages/ai.tsx
+import "react";
+
+// src/components/ui/badge.tsx
+import * as React9 from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var base2 = "inline-flex items-center rounded-full border border-transparent px-2.5 py-0.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background";
+var variants2 = {
+  default: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  outline: "border-input text-foreground"
+};
+var Badge = React9.forwardRef(
+  ({ className, variant = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsx9("span", { ref, className: cn(base2, variants2[variant], className), ...props });
+  }
+);
+Badge.displayName = "Badge";
+
+// src/components/ui/card.tsx
+import * as React10 from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Card = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-xl border bg-background/80 text-foreground shadow-[0_14px_40px_-30px_rgba(15,23,42,0.5)] backdrop-blur",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx10("div", { ref, className: cn("flex flex-col gap-1.5 px-6 pt-6", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10("h3", { ref, className: cn("text-lg font-semibold leading-tight", className), ...props }));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+CardDescription.displayName = "CardDescription";
+var CardContent = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx10("div", { ref, className: cn("px-6 pb-6", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx10("div", { ref, className: cn("flex items-center px-6 pb-6", className), ...props })
+);
+CardFooter.displayName = "CardFooter";
+var CardAction = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx10("div", { ref, className: cn("ml-auto flex items-center", className), ...props })
+);
+CardAction.displayName = "CardAction";
+
+// src/components/ui/tabs.tsx
+import * as React11 from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var TabsContext = React11.createContext(null);
+function Tabs({ className, defaultValue, value, onValueChange, ...props }) {
+  const [internalValue, setInternalValue] = React11.useState(defaultValue ?? "");
+  const activeValue = value ?? internalValue;
+  const setValue = React11.useCallback(
+    (nextValue) => {
+      if (value === void 0) setInternalValue(nextValue);
+      onValueChange?.(nextValue);
+    },
+    [onValueChange, value]
+  );
+  return /* @__PURE__ */ jsx11(TabsContext.Provider, { value: { value: activeValue, setValue }, children: /* @__PURE__ */ jsx11("div", { className: cn("w-full", className), ...props }) });
+}
+var TabsList = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+    "div",
+    {
+      ref,
+      className: cn(
+        "inline-flex h-11 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+        className
+      ),
+      role: "tablist",
+      ...props
+    }
+  )
+);
+TabsList.displayName = "TabsList";
+var TabsTrigger = React11.forwardRef(
+  ({ className, value, onClick, ...props }, ref) => {
+    const context = React11.useContext(TabsContext);
+    if (!context) {
+      throw new Error("TabsTrigger must be used within Tabs");
+    }
+    const isActive = context.value === value;
+    return /* @__PURE__ */ jsx11(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "tab",
+        "aria-selected": isActive,
+        "data-state": isActive ? "active" : "inactive",
+        className: cn(
+          "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+          className
+        ),
+        onClick: (event) => {
+          context.setValue(value);
+          onClick?.(event);
+        },
+        ...props
+      }
+    );
+  }
+);
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React11.forwardRef(
+  ({ className, value, ...props }, ref) => {
+    const context = React11.useContext(TabsContext);
+    if (!context) {
+      throw new Error("TabsContent must be used within Tabs");
+    }
+    if (context.value !== value) return null;
+    return /* @__PURE__ */ jsx11(
+      "div",
+      {
+        ref,
+        role: "tabpanel",
+        className: cn(
+          "mt-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+TabsContent.displayName = "TabsContent";
+
+// src/components/thread/markdown-text.tsx
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeKatex from "rehype-katex";
+import remarkMath from "remark-math";
+import { memo, useState as useState5 } from "react";
+import { CheckIcon, CopyIcon } from "lucide-react";
+
+// src/components/thread/syntax-highlighter.tsx
+import { PrismAsyncLight as SyntaxHighlighterPrism } from "react-syntax-highlighter";
+import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
+import python from "react-syntax-highlighter/dist/esm/languages/prism/python";
+import { coldarkDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+SyntaxHighlighterPrism.registerLanguage("js", tsx);
+SyntaxHighlighterPrism.registerLanguage("jsx", tsx);
+SyntaxHighlighterPrism.registerLanguage("ts", tsx);
+SyntaxHighlighterPrism.registerLanguage("tsx", tsx);
+SyntaxHighlighterPrism.registerLanguage("python", python);
+var SyntaxHighlighter = ({
+  children,
+  language,
+  className
+}) => {
+  return /* @__PURE__ */ jsx12(
+    SyntaxHighlighterPrism,
+    {
+      language,
+      style: coldarkDark,
+      customStyle: {
+        margin: 0,
+        width: "100%",
+        background: "transparent",
+        padding: "1.5rem 1rem"
+      },
+      className,
+      children
+    }
+  );
+};
+
+// src/components/thread/tooltip-icon-button.tsx
+import { forwardRef as forwardRef6 } from "react";
+
+// src/components/ui/tooltip.tsx
+import "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx13(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx13(TooltipProvider, { children: /* @__PURE__ */ jsx13(
+    TooltipPrimitive.Root,
+    {
+      "data-slot": "tooltip",
+      ...props
+    }
+  ) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx13(
+    TooltipPrimitive.Trigger,
+    {
+      "data-slot": "tooltip-trigger",
+      ...props
+    }
+  );
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx13(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs5(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx13(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+
+// src/components/thread/tooltip-icon-button.tsx
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+var TooltipIconButton = forwardRef6(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx14(TooltipProvider, { children: /* @__PURE__ */ jsxs6(Tooltip, { children: [
+    /* @__PURE__ */ jsx14(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs6(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        ...rest,
+        className: cn("size-6 p-1", className),
+        ref,
+        children: [
+          children,
+          /* @__PURE__ */ jsx14("span", { className: "sr-only", children: tooltip })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx14(TooltipContent, { side, children: tooltip })
+  ] }) });
+});
+TooltipIconButton.displayName = "TooltipIconButton";
+
+// src/components/thread/markdown-text.tsx
+import "katex/dist/katex.min.css";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+var useCopyToClipboard = ({
+  copiedDuration = 3e3
+} = {}) => {
+  const [isCopied, setIsCopied] = useState5(false);
+  const copyToClipboard = (value) => {
+    if (!value) return;
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), copiedDuration);
+    });
+  };
+  return { isCopied, copyToClipboard };
+};
+var CodeHeader = ({ language, code }) => {
+  const { t } = useChatkitTranslation();
+  const { isCopied, copyToClipboard } = useCopyToClipboard();
+  const onCopy = () => {
+    if (!code || isCopied) return;
+    copyToClipboard(code);
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white", children: [
+    /* @__PURE__ */ jsx15("span", { className: "lowercase [&>span]:text-xs", children: language }),
+    /* @__PURE__ */ jsxs7(
+      TooltipIconButton,
+      {
+        tooltip: t("markdown.copy"),
+        onClick: onCopy,
+        children: [
+          !isCopied && /* @__PURE__ */ jsx15(CopyIcon, {}),
+          isCopied && /* @__PURE__ */ jsx15(CheckIcon, {})
+        ]
+      }
+    )
+  ] });
+};
+var defaultComponents = {
+  h1: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+    "h1",
+    {
+      className: cn(
+        "mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0",
+        className
+      ),
+      ...props
+    }
+  ),
+  h2: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+    "h2",
+    {
+      className: cn(
+        "mt-8 mb-4 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0",
+        className
+      ),
+      ...props
+    }
+  ),
+  h3: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+    "h3",
+    {
+      className: cn(
+        "mt-6 mb-4 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0",
+        className
+      ),
+      ...props
+    }
+  ),
+  h4: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+    "h4",
+    {
+      className: cn(
+        "mt-6 mb-4 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0",
+        className
+      ),
+      ...props
+    }
+  ),
+  h5: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+    "h5",
+    {
+      className: cn(
+        "my-4 text-lg font-semibold first:mt-0 last:mb-0",
+        className
+      ),
+      ...props
+    }
+  ),
+  h6: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+    "h6",
+    {
+      className: cn("my-4 font-semibold first:mt-0 last:mb-0", className),
+      ...props
+    }
+  ),
+  p: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+    "p",
+    {
+      className: cn("mt-5 mb-5 leading-7 first:mt-0 last:mb-0", className),
+      ...props
+    }
+  ),
+  a: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+    "a",
+    {
+      className: cn(
+        "text-primary font-medium underline underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  ),
+  blockquote: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+    "blockquote",
+    {
+      className: cn("border-l-2 pl-6 italic", className),
+      ...props
+    }
+  ),
+  ul: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+    "ul",
+    {
+      className: cn("my-5 ml-6 list-disc [&>li]:mt-2", className),
+      ...props
+    }
+  ),
+  ol: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+    "ol",
+    {
+      className: cn("my-5 ml-6 list-decimal [&>li]:mt-2", className),
+      ...props
+    }
+  ),
+  hr: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+    "hr",
+    {
+      className: cn("my-5 border-b", className),
+      ...props
+    }
+  ),
+  table: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+    "table",
+    {
+      className: cn(
+        "my-5 w-full border-separate border-spacing-0 overflow-y-auto",
+        className
+      ),
+      ...props
+    }
+  ),
+  th: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+    "th",
+    {
+      className: cn(
+        "bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right",
+        className
+      ),
+      ...props
+    }
+  ),
+  td: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+    "td",
+    {
+      className: cn(
+        "border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right",
+        className
+      ),
+      ...props
+    }
+  ),
+  tr: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+    "tr",
+    {
+      className: cn(
+        "m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
+        className
+      ),
+      ...props
+    }
+  ),
+  sup: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+    "sup",
+    {
+      className: cn("[&>a]:text-xs [&>a]:no-underline", className),
+      ...props
+    }
+  ),
+  pre: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+    "pre",
+    {
+      className: cn(
+        "max-w-4xl overflow-x-auto rounded-lg bg-black text-white",
+        className
+      ),
+      ...props
+    }
+  ),
+  code: ({
+    className,
+    children,
+    ...props
+  }) => {
+    const match = /language-(\w+)/.exec(className || "");
+    if (match) {
+      const language = match[1];
+      const code = String(children).replace(/\n$/, "");
+      return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+        /* @__PURE__ */ jsx15(
+          CodeHeader,
+          {
+            language,
+            code
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          SyntaxHighlighter,
+          {
+            language,
+            className,
+            children: code
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsx15(
+      "code",
+      {
+        className: cn("rounded font-semibold", className),
+        ...props,
+        children
+      }
+    );
+  }
+};
+var MarkdownTextImpl = ({ children }) => {
+  return /* @__PURE__ */ jsx15("div", { className: "markdown-content", children: /* @__PURE__ */ jsx15(
+    ReactMarkdown,
+    {
+      remarkPlugins: [remarkGfm, remarkMath],
+      rehypePlugins: [rehypeKatex],
+      components: defaultComponents,
+      children
+    }
+  ) });
+};
+var MarkdownText = memo(MarkdownTextImpl);
+
+// src/components/thread/messages/widget.tsx
+import { SurfaceRenderer } from "@xpert-ai/a2ui-react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function WidgetMessage({ messageId, data }) {
+  const widgets = Array.isArray(data.widgets) ? data.widgets : [];
+  if (widgets.length === 0) return null;
+  const baseSurfaceId = `widget-${messageId}`;
+  return /* @__PURE__ */ jsx16("div", { className: "space-y-3", children: widgets.map((widget, index) => {
+    const config = widget?.config;
+    if (!config || typeof config !== "object") {
+      return null;
+    }
+    const surfaceId = widgets.length > 1 ? `${baseSurfaceId}-${index}` : baseSurfaceId;
+    return /* @__PURE__ */ jsx16(
+      SurfaceRenderer,
+      {
+        surfaceId,
+        surface: config
+      },
+      widget?.name ?? surfaceId
+    );
+  }) });
+}
+
+// src/components/thread/messages/ai.tsx
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+function isTextContent(content) {
+  return content.type === "text";
+}
+function isReasoningContent(content) {
+  return content.type === "reasoning";
+}
+function isImageContent(content) {
+  return content.type === "image_url";
+}
+function isComponentContent(content) {
+  return content.type === "component";
+}
+function isWidgetComponent(content) {
+  const data = content.data;
+  return data?.type === "Widget" && Array.isArray(data.widgets);
+}
+function isMemoryContent(content) {
+  return content.type === "memory";
+}
+function safeJson(value) {
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+function ReasoningBlock({ reasoning }) {
+  const blocks = reasoning.filter((item) => item.text?.trim());
+  if (blocks.length === 0) return null;
+  return /* @__PURE__ */ jsx17("div", { className: "space-y-2", children: blocks.map((item, index) => /* @__PURE__ */ jsx17(
+    "div",
+    {
+      className: "rounded-lg border bg-muted/40 p-3 text-xs text-muted-foreground",
+      children: /* @__PURE__ */ jsx17("p", { className: "whitespace-pre-wrap break-words leading-relaxed", children: item.text })
+    },
+    item.id ?? `reasoning-${index}`
+  )) });
+}
+function ImageBlock({ content }) {
+  const imageUrl = typeof content.image_url === "string" ? content.image_url : typeof content.image_url?.url === "string" ? content.image_url.url : null;
+  if (!imageUrl) {
+    return /* @__PURE__ */ jsxs8(Card, { children: [
+      /* @__PURE__ */ jsx17(CardHeader, { className: "space-y-1", children: /* @__PURE__ */ jsx17(CardTitle, { className: "text-sm", children: "Image" }) }),
+      /* @__PURE__ */ jsx17(CardContent, { className: "text-xs text-muted-foreground", children: safeJson(content) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx17("figure", { className: "overflow-hidden rounded-lg border bg-background", children: /* @__PURE__ */ jsx17("img", { src: imageUrl, alt: "Assistant output", className: "h-auto w-full object-cover" }) });
+}
+function MemoryBlock({ content }) {
+  return /* @__PURE__ */ jsxs8(Card, { children: [
+    /* @__PURE__ */ jsxs8(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx17(CardTitle, { className: "text-sm", children: "Memory" }),
+      /* @__PURE__ */ jsx17(Badge, { variant: "secondary", children: "Memory" })
+    ] }),
+    /* @__PURE__ */ jsx17(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ jsx17("pre", { className: "whitespace-pre-wrap break-words", children: safeJson(content.data ?? []) }) })
+  ] });
+}
+function ComponentBlock({ content }) {
+  console.log(content);
+  const data = content.data ?? {};
+  const title = typeof data.title === "string" ? data.title : typeof data.type === "string" ? data.type : "Component";
+  const category = typeof data.category === "string" ? data.category : "Component";
+  const status = typeof data.status === "string" ? data.status : null;
+  const message = typeof data.message === "string" ? data.message : null;
+  const output = typeof data.output === "string" ? data.output : null;
+  const fallback = message ?? output ?? safeJson(data.data ?? data.input ?? data);
+  return /* @__PURE__ */ jsxs8(Card, { children: [
+    /* @__PURE__ */ jsxs8(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx17(CardTitle, { className: "text-sm", children: title }),
+        /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted-foreground", children: category })
+      ] }),
+      /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx17(Badge, { variant: "secondary", children: category }),
+        status && /* @__PURE__ */ jsx17(Badge, { variant: "outline", children: status })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx17(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ jsx17("pre", { className: "whitespace-pre-wrap break-words", children: fallback }) })
+  ] });
+}
+function UnknownBlock({ content }) {
+  return /* @__PURE__ */ jsxs8(Card, { children: [
+    /* @__PURE__ */ jsxs8(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx17(CardTitle, { className: "text-sm", children: "Assistant Content" }),
+      /* @__PURE__ */ jsx17(Badge, { variant: "outline", children: content.type ?? "unknown" })
+    ] }),
+    /* @__PURE__ */ jsx17(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ jsx17("pre", { className: "whitespace-pre-wrap break-words", children: safeJson(content) }) })
+  ] });
+}
+function renderContentItem(content, index, messageId) {
+  if (typeof content === "string") {
+    return /* @__PURE__ */ jsxs8("div", { children: [
+      /* @__PURE__ */ jsx17(MarkdownText, { children: content }),
+      ";"
+    ] }, `text-${index}`);
+  }
+  if (isTextContent(content)) {
+    return /* @__PURE__ */ jsx17("div", { children: /* @__PURE__ */ jsx17(MarkdownText, { children: content.text }) }, content.id ?? `text-${index}`);
+  }
+  if (isReasoningContent(content)) {
+    return /* @__PURE__ */ jsx17("div", { children: /* @__PURE__ */ jsx17(ReasoningBlock, { reasoning: [content] }) }, content.id ?? `reasoning-${index}`);
+  }
+  if (isImageContent(content)) {
+    return /* @__PURE__ */ jsx17("div", { children: /* @__PURE__ */ jsx17(ImageBlock, { content }) }, content.id ?? `image-${index}`);
+  }
+  if (isComponentContent(content)) {
+    if (isWidgetComponent(content)) {
+      return /* @__PURE__ */ jsx17("div", { children: /* @__PURE__ */ jsx17(WidgetMessage, { messageId, data: content.data }) }, content.id ?? `widget-${index}`);
+    }
+    return /* @__PURE__ */ jsx17("div", { children: /* @__PURE__ */ jsx17(ComponentBlock, { content }) }, content.id ?? `component-${index}`);
+  }
+  if (isMemoryContent(content)) {
+    return /* @__PURE__ */ jsx17("div", { children: /* @__PURE__ */ jsx17(MemoryBlock, { content }) }, content.id ?? `memory-${index}`);
+  }
+  return /* @__PURE__ */ jsx17("div", { children: /* @__PURE__ */ jsx17(UnknownBlock, { content }) }, content.id ?? `unknown-${index}`);
+}
+function renderContent(content, messageId) {
+  if (typeof content === "string") {
+    if (!content.trim()) return null;
+    return /* @__PURE__ */ jsx17(MarkdownText, { children: content });
+  }
+  if (!Array.isArray(content) || content.length === 0) return null;
+  return /* @__PURE__ */ jsx17("div", { className: "space-y-3", children: content.map((item, index) => renderContentItem(item, index, messageId)) });
+}
+function AssistantMessage({ message, className, isStreaming = false }) {
+  const hasContent = message.content != null && !(typeof message.content === "string" && message.content.trim() === "" || Array.isArray(message.content) && message.content.length === 0);
+  const hasReasoning = Array.isArray(message.reasoning) && message.reasoning.some((item) => item.text?.trim());
+  const answerNode = renderContent(message.content, message.id);
+  const reasoningNode = hasReasoning ? /* @__PURE__ */ jsx17(ReasoningBlock, { reasoning: message.reasoning ?? [] }) : null;
+  if (!hasContent && !hasReasoning) return null;
+  const streamingClass = isStreaming ? "streaming-active" : "";
+  if (hasContent && hasReasoning) {
+    return /* @__PURE__ */ jsx17("div", { className: cn("space-y-3", streamingClass, className), children: /* @__PURE__ */ jsxs8(
+      Tabs,
+      {
+        defaultValue: message.status === "reasoning" ? "reasoning" : "answer",
+        className: "w-full",
+        children: [
+          /* @__PURE__ */ jsxs8(TabsList, { className: "h-9", children: [
+            /* @__PURE__ */ jsx17(TabsTrigger, { value: "answer", children: "Answer" }),
+            /* @__PURE__ */ jsx17(TabsTrigger, { value: "reasoning", children: "Reasoning" })
+          ] }),
+          /* @__PURE__ */ jsx17(TabsContent, { value: "answer", className: "space-y-3", children: answerNode }),
+          /* @__PURE__ */ jsx17(TabsContent, { value: "reasoning", className: "space-y-3", children: reasoningNode })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx17("div", { className: cn("space-y-3", streamingClass, className), children: hasReasoning ? reasoningNode : answerNode });
+}
+
+// src/components/thread/MessageActions.tsx
+import * as React14 from "react";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+function CopyIcon2() {
+  return /* @__PURE__ */ jsxs9(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx18("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx18("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+      ]
+    }
+  );
+}
+function CheckIcon2() {
+  return /* @__PURE__ */ jsx18(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx18("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+function RetryIcon() {
+  return /* @__PURE__ */ jsxs9(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx18("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+        /* @__PURE__ */ jsx18("path", { d: "M21 3v5h-5" }),
+        /* @__PURE__ */ jsx18("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+        /* @__PURE__ */ jsx18("path", { d: "M8 16H3v5" })
+      ]
+    }
+  );
+}
+function MessageActions({
+  content,
+  isAssistant = false,
+  isStreaming = false,
+  onRetry,
+  className
+}) {
+  const { t } = useChatkitTranslation();
+  const [copied, setCopied] = React14.useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+  if (isStreaming) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-1 mt-2 opacity-0 group-hover:opacity-100 transition-opacity",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx18(
+          "button",
+          {
+            type: "button",
+            onClick: handleCopy,
+            className: cn(
+              "p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+              copied && "text-green-500"
+            ),
+            title: copied ? t("messageActions.copied") : t("messageActions.copy"),
+            children: copied ? /* @__PURE__ */ jsx18(CheckIcon2, {}) : /* @__PURE__ */ jsx18(CopyIcon2, {})
+          }
+        ),
+        isAssistant && onRetry && /* @__PURE__ */ jsx18(
+          "button",
+          {
+            type: "button",
+            onClick: onRetry,
+            className: "p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+            title: t("messageActions.regenerate"),
+            children: /* @__PURE__ */ jsx18(RetryIcon, {})
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/thread/StartScreen.tsx
+import "react";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+function getIconComponent2(icon) {
+  const iconMap = {
+    "circle-question": /* @__PURE__ */ jsxs10("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx19("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+      /* @__PURE__ */ jsx19("path", { d: "M12 17h.01" })
+    ] }),
+    "lightbulb": /* @__PURE__ */ jsxs10("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx19("path", { d: "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" }),
+      /* @__PURE__ */ jsx19("path", { d: "M9 18h6" }),
+      /* @__PURE__ */ jsx19("path", { d: "M10 22h4" })
+    ] }),
+    "sparkle": /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx19("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" }) }),
+    "write": /* @__PURE__ */ jsxs10("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx19("path", { d: "M12 20h9" }),
+      /* @__PURE__ */ jsx19("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })
+    ] }),
+    "search": /* @__PURE__ */ jsxs10("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx19("circle", { cx: "11", cy: "11", r: "8" }),
+      /* @__PURE__ */ jsx19("path", { d: "m21 21-4.3-4.3" })
+    ] }),
+    "globe": /* @__PURE__ */ jsxs10("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx19("line", { x1: "2", x2: "22", y1: "12", y2: "12" }),
+      /* @__PURE__ */ jsx19("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
+    ] }),
+    "book-open": /* @__PURE__ */ jsxs10("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx19("path", { d: "M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" }),
+      /* @__PURE__ */ jsx19("path", { d: "M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" })
+    ] }),
+    "compass": /* @__PURE__ */ jsxs10("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx19("polygon", { points: "16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" })
+    ] }),
+    "bolt": /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx19("path", { d: "M13 2 3 14h9l-1 8 10-12h-9l1-8z" }) })
+  };
+  return icon ? iconMap[icon] || iconMap["sparkle"] : iconMap["sparkle"];
+}
+function StartScreen({ startScreen, onPromptClick, className }) {
+  const { t } = useChatkitTranslation();
+  const greeting = startScreen?.greeting ?? t("startScreen.greeting");
+  const prompts = startScreen?.prompts ?? [];
+  return /* @__PURE__ */ jsxs10("div", { className: cn("flex flex-col items-center justify-center py-12 px-4", className), children: [
+    /* @__PURE__ */ jsx19("div", { className: "mb-8 text-center", children: /* @__PURE__ */ jsx19("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
+    prompts.length > 0 && /* @__PURE__ */ jsx19("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsx19("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ jsxs10(
+      "button",
+      {
+        type: "button",
+        onClick: () => onPromptClick?.(item.prompt),
+        className: cn(
+          "flex items-center gap-3 rounded-xl border bg-card p-4 text-left",
+          "hover:bg-muted/50 hover:border-primary/20 transition-colors",
+          "focus:outline-none focus:ring-2 focus:ring-primary/20"
+        ),
+        children: [
+          /* @__PURE__ */ jsx19("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: getIconComponent2(item.icon) }),
+          /* @__PURE__ */ jsx19("span", { className: "text-sm font-medium text-foreground", children: item.label })
+        ]
+      },
+      `prompt-${index}`
+    )) }) })
+  ] });
+}
+
+// src/hooks/useThreads.ts
+import * as React16 from "react";
+var DEFAULT_LIMIT = 50;
+var getConversationTitle = (conversation) => {
+  const title = conversation.title?.trim();
+  if (title) return title;
+  initI18n();
+  const suffix = (conversation.id ?? conversation.threadId ?? "").slice(0, 8);
+  return suffix ? i18n.t("history.conversationWithId", { id: suffix }) : i18n.t("history.conversationFallback");
+};
+var toDate = (value) => {
+  if (!value) return void 0;
+  const timestamp = Date.parse(value);
+  if (Number.isNaN(timestamp)) return void 0;
+  return new Date(timestamp);
+};
+var toConversation = (conversation) => ({
+  id: conversation.id,
+  threadId: conversation.threadId ?? null,
+  title: getConversationTitle(conversation),
+  lastMessageAt: toDate(conversation.updatedAt)
+});
+var sortConversations = (conversations) => {
+  return [...conversations].sort((a, b) => {
+    const aTime = Date.parse(a.updatedAt ?? "");
+    const bTime = Date.parse(b.updatedAt ?? "");
+    return (Number.isNaN(bTime) ? 0 : bTime) - (Number.isNaN(aTime) ? 0 : aTime);
+  });
+};
+function useThreads(limit = DEFAULT_LIMIT) {
+  const { client, threadId } = useStreamContext();
+  const [conversationsState, setConversationsState] = React16.useState([]);
+  const [isLoading, setIsLoading] = React16.useState(false);
+  const [error, setError] = React16.useState(null);
+  const upsertConversation = React16.useCallback((conversation) => {
+    setConversationsState((prev) => {
+      const next = prev.filter((item) => item.id !== conversation.id);
+      return sortConversations([conversation, ...next]);
+    });
+  }, []);
+  const refreshConversations = React16.useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const { items } = await client.conversations.search({
+        limit,
+        order: { updatedAt: "DESC" }
+      });
+      setConversationsState(items ?? []);
+      console.log("Conversations refreshed", items);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client, limit]);
+  const createConversation = React16.useCallback(
+    async (input) => {
+      setError(null);
+      const payload = {};
+      if (input?.conversationId) payload.id = input.conversationId;
+      if (input?.threadId) payload.threadId = input.threadId;
+      if (input?.title) payload.title = input.title;
+      if (input?.options) payload.options = input.options;
+      const created = await client.conversations.create(payload);
+      upsertConversation(created);
+      return created;
+    },
+    [client, upsertConversation]
+  );
+  const updateConversation = React16.useCallback(
+    async (id, payload) => {
+      setError(null);
+      const updated = await client.conversations.update(id, payload);
+      upsertConversation(updated);
+      return updated;
+    },
+    [client, upsertConversation]
+  );
+  const deleteConversation = React16.useCallback(
+    async (id) => {
+      setError(null);
+      await client.conversations.delete(id);
+      setConversationsState((prev) => prev.filter((item) => item.id !== id));
+    },
+    [client]
+  );
+  React16.useEffect(() => {
+    void refreshConversations();
+  }, [refreshConversations]);
+  React16.useEffect(() => {
+    if (!threadId) return;
+    if (conversationsState.some((item) => item.threadId === threadId)) return;
+    void client.conversations.search({ where: { threadId }, limit: 1 }).then((result) => {
+      const found = result.items?.[0];
+      if (found) upsertConversation(found);
+    }).catch((err) => {
+      setError(err);
+    });
+  }, [client, threadId, conversationsState, upsertConversation]);
+  const conversations = React16.useMemo(
+    () => conversationsState.map((conversation) => toConversation(conversation)),
+    [conversationsState]
+  );
+  return {
+    conversations,
+    rawConversations: conversationsState,
+    isLoading,
+    error,
+    refreshConversations,
+    createConversation,
+    updateConversation,
+    deleteConversation,
+    // Legacy aliases
+    refreshThreads: refreshConversations,
+    createThread: createConversation,
+    updateThreadMetadata: updateConversation,
+    deleteThread: deleteConversation
+  };
+}
+
+// src/components/chat.tsx
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+var defaultApiUrl2 = import.meta.env.VITE_XPERTAI_API_URL;
+var DEFAULT_HISTORY_LIMIT = 200;
+function createMessageId() {
+  return globalThis.crypto?.randomUUID?.() ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
+function formatMessageContent(content) {
+  if (typeof content === "string") {
+    return content;
+  }
+  if (Array.isArray(content)) {
+    return content.map((part) => {
+      if (typeof part === "string") return part;
+      if (part && typeof part === "object" && "text" in part) {
+        const textValue = part.text;
+        return typeof textValue === "string" ? textValue : "";
+      }
+      return "";
+    }).join("");
+  }
+  if (content == null) return "";
+  if (typeof content === "object" && "text" in content) {
+    const textValue = content.text;
+    return typeof textValue === "string" ? textValue : "";
+  }
+  return "";
+}
+function normalizeRoleToMessageType(role) {
+  const normalized = (role ?? "").toLowerCase();
+  if (normalized === "user" || normalized === "human") return "human";
+  if (normalized === "assistant" || normalized === "ai") return "ai";
+  if (normalized === "system") return "system";
+  if (normalized === "tool") return "tool";
+  return "ai";
+}
+function mapChatMessageToUiMessage(message) {
+  return {
+    id: message.id ?? createMessageId(),
+    type: normalizeRoleToMessageType(message.role),
+    content: message.content ?? "",
+    ...message.reasoning ? { reasoning: message.reasoning } : {},
+    ...message.executionId ? { executionId: message.executionId } : {}
+  };
+}
+function sortMessagesByCreatedAt(items) {
+  return [...items].sort((a, b) => {
+    const aTime = Date.parse(a.createdAt ?? "");
+    const bTime = Date.parse(b.createdAt ?? "");
+    if (Number.isNaN(aTime) && Number.isNaN(bTime)) return 0;
+    if (Number.isNaN(aTime)) return -1;
+    if (Number.isNaN(bTime)) return 1;
+    return aTime - bTime;
+  });
+}
+function Chat({
+  className,
+  options,
+  title,
+  placeholder,
+  clientSecret = ""
+}) {
+  const { t } = useChatkitTranslation();
+  const composer = options?.composer;
+  const startScreen = options?.startScreen;
+  const history = options?.history;
+  const disclaimer = options?.disclaimer;
+  const apiUrl = options?.api?.apiUrl || defaultApiUrl2;
+  const { setStream } = useStreamManager();
+  const stream = useStreamContext();
+  const [activeConversationId, setActiveConversationId] = React17.useState(null);
+  const [isHistoryLoading, setIsHistoryLoading] = React17.useState(false);
+  const [historyError, setHistoryError] = React17.useState(null);
+  const [assistantName, setAssistantName] = React17.useState(null);
+  const LOADING_DOTS_MIN_DURATION = 800;
+  const [showLoadingDots, setShowLoadingDots] = React17.useState(false);
+  const loadingStartTimeRef = React17.useRef(null);
+  React17.useEffect(() => {
+    setStream(stream);
+  }, [setStream, stream]);
+  React17.useEffect(() => {
+    if (stream.isLoading) {
+      if (!loadingStartTimeRef.current) {
+        loadingStartTimeRef.current = Date.now();
+        setShowLoadingDots(true);
+      }
+    } else {
+      if (loadingStartTimeRef.current) {
+        const elapsed = Date.now() - loadingStartTimeRef.current;
+        const remaining = LOADING_DOTS_MIN_DURATION - elapsed;
+        if (remaining > 0) {
+          const timer = setTimeout(() => {
+            setShowLoadingDots(false);
+            loadingStartTimeRef.current = null;
+          }, remaining);
+          return () => clearTimeout(timer);
+        } else {
+          setShowLoadingDots(false);
+          loadingStartTimeRef.current = null;
+        }
+      }
+    }
+  }, [stream.isLoading]);
+  const [draft, setDraft] = React17.useState("");
+  const [selectedTool, setSelectedTool] = React17.useState(null);
+  const [attachments, setAttachments] = React17.useState([]);
+  const {
+    conversations,
+    createConversation,
+    deleteConversation,
+    refreshConversations,
+    isLoading: isThreadsLoading
+  } = useThreads();
+  const scrollAreaRef = React17.useRef(null);
+  const viewportRef = React17.useRef(null);
+  const fileInputRef = React17.useRef(null);
+  const resolvedTitle = title ?? t("chat.title");
+  const resolvedPlaceholder = placeholder ?? t("chat.placeholder");
+  const inputPlaceholder = selectedTool?.placeholderOverride ?? composer?.placeholder ?? resolvedPlaceholder;
+  const messages = stream.messages ?? [];
+  const trimmedDraft = draft.trim();
+  const scrollToBottom = React17.useCallback((smooth = false) => {
+    requestAnimationFrame(() => {
+      const viewport = scrollAreaRef.current?.querySelector("[data-radix-scroll-area-viewport]");
+      if (viewport) {
+        viewport.scrollTo({
+          top: viewport.scrollHeight,
+          behavior: smooth ? "smooth" : "instant"
+        });
+      }
+    });
+  }, []);
+  React17.useEffect(() => {
+    scrollToBottom();
+  }, [messages.length, scrollToBottom]);
+  React17.useEffect(() => {
+    if (stream.isLoading) {
+      scrollToBottom();
+    }
+  }, [stream.isLoading, messages, scrollToBottom]);
+  const hasApiKey = Boolean(clientSecret.trim());
+  const missingConfig = !apiUrl || !hasApiKey;
+  const isSendDisabled = !trimmedDraft || stream.isLoading || missingConfig || isHistoryLoading;
+  React17.useEffect(() => {
+    if (missingConfig) return;
+    void refreshConversations();
+  }, [missingConfig, refreshConversations]);
+  React17.useEffect(() => {
+    if (missingConfig || !stream.client || !stream.assistantId) return;
+    stream.client.assistants.get(stream.assistantId).then((assistant) => {
+      if (assistant?.name) {
+        setAssistantName(assistant.name);
+      }
+    }).catch((err) => {
+      console.warn("[Chat] Failed to load assistant info:", err);
+    });
+  }, [missingConfig, stream.client, stream.assistantId]);
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (isSendDisabled) return;
+    const newMessage = {
+      id: createMessageId(),
+      type: "human",
+      content: trimmedDraft
+    };
+    setDraft("");
+    stream.submit(
+      { input: { input: trimmedDraft } },
+      {
+        optimisticValues: (prev) => {
+          const prevMessages = prev?.messages ?? [];
+          return { ...prev, messages: [...prevMessages, newMessage] };
+        }
+      }
+    );
+    scrollToBottom(true);
+    if (selectedTool && !selectedTool.pinned) {
+      setSelectedTool(null);
+    }
+    setAttachments([]);
+  };
+  const handleAttachmentClick = () => {
+    fileInputRef.current?.click();
+  };
+  const handleFileChange = (event) => {
+    const files = event.target.files;
+    if (!files || files.length === 0) return;
+    const maxCount = composer?.attachments?.maxCount ?? 10;
+    const maxSize = composer?.attachments?.maxSize ?? 100 * 1024 * 1024;
+    const validFiles = [];
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      if (file.size > maxSize) {
+        console.warn(`File ${file.name} exceeds max size of ${maxSize} bytes`);
+        continue;
+      }
+      validFiles.push(file);
+    }
+    setAttachments((prev) => {
+      const combined = [...prev, ...validFiles];
+      return combined.slice(0, maxCount);
+    });
+    event.target.value = "";
+  };
+  const handleRemoveAttachment = (index) => {
+    setAttachments((prev) => prev.filter((_, i) => i !== index));
+  };
+  const handleToolSelect = (tool) => {
+    setSelectedTool((prev) => prev?.id === tool.id ? null : tool);
+  };
+  const handlePromptClick = (prompt) => {
+    if (missingConfig || stream.isLoading || isHistoryLoading) return;
+    const newMessage = {
+      id: createMessageId(),
+      type: "human",
+      content: prompt
+    };
+    stream.submit(
+      { input: { input: prompt } },
+      {
+        optimisticValues: (prev) => {
+          const prevMessages = prev?.messages ?? [];
+          return { ...prev, messages: [...prevMessages, newMessage] };
+        }
+      }
+    );
+    scrollToBottom(true);
+  };
+  const loadConversationMessages = React17.useCallback(
+    async (conversationId, threadId) => {
+      if (missingConfig) {
+        setHistoryError(t("chat.missingConfigShort"));
+        return;
+      }
+      setHistoryError(null);
+      setIsHistoryLoading(true);
+      try {
+        stream.stop();
+      } catch {
+      }
+      try {
+        const response = await stream.client.conversations.listMessages(conversationId, {
+          limit: DEFAULT_HISTORY_LIMIT,
+          offset: 0
+        });
+        const sorted = sortMessagesByCreatedAt(response.items ?? []);
+        const mapped = sorted.map(mapChatMessageToUiMessage);
+        stream.reset(threadId ?? null, mapped);
+        setActiveConversationId(conversationId);
+      } catch (err) {
+        console.warn("Failed to load conversation messages", err);
+        setHistoryError(
+          err instanceof Error ? err.message : t("chat.errors.loadMessages")
+        );
+        stream.reset(threadId ?? null, []);
+      } finally {
+        setIsHistoryLoading(false);
+      }
+    },
+    [missingConfig, stream, t]
+  );
+  React17.useEffect(() => {
+    if (!stream.threadId) return;
+    if (isHistoryLoading) return;
+    const matched = conversations.find((item) => item.threadId === stream.threadId);
+    if (!matched) return;
+    if (activeConversationId && activeConversationId === matched.id) return;
+    if (messages.length > 0) {
+      setActiveConversationId(matched.id);
+      return;
+    }
+    void loadConversationMessages(matched.id, matched.threadId ?? null);
+  }, [
+    conversations,
+    stream.threadId,
+    messages.length,
+    activeConversationId,
+    isHistoryLoading,
+    loadConversationMessages
+  ]);
+  const handleNewConversation = async () => {
+    if (missingConfig || stream.isLoading || isHistoryLoading) return;
+    setHistoryError(null);
+    try {
+      const created = await createConversation({ title: t("history.newConversationTitle") });
+      setActiveConversationId(created.id);
+      stream.reset(created.threadId ?? null, []);
+      await refreshConversations();
+    } catch (err) {
+      console.warn("Failed to create conversation", err);
+      setHistoryError(
+        err instanceof Error ? err.message : t("chat.errors.createConversation")
+      );
+    }
+  };
+  const handleSelectConversation = (id) => {
+    if (isHistoryLoading) return;
+    setHistoryError(null);
+    const conversation = conversations.find((item) => item.id === id);
+    const nextThreadId = conversation?.threadId ?? null;
+    if (id === activeConversationId && stream.threadId === nextThreadId) return;
+    void loadConversationMessages(id, nextThreadId);
+  };
+  const handleDeleteConversation = (id) => {
+    setHistoryError(null);
+    void deleteConversation(id).then(() => {
+      if (activeConversationId === id) {
+        stream.reset(null, []);
+        setActiveConversationId(null);
+      }
+      return refreshConversations();
+    }).catch((err) => {
+      console.warn("Failed to delete conversation", err);
+      setHistoryError(
+        err instanceof Error ? err.message : t("chat.errors.deleteConversation")
+      );
+    });
+  };
+  const handleRetry = (messageIndex) => {
+    const messagesUpToIndex = messages.slice(0, messageIndex);
+    const lastHumanMessage = [...messagesUpToIndex].reverse().find(
+      (m) => String(m.type) === "human"
+    );
+    if (lastHumanMessage && typeof lastHumanMessage.content === "string") {
+      stream.submit(
+        { input: { input: lastHumanMessage.content } },
+        {
+          optimisticValues: (prev) => {
+            const prevMessages = prev?.messages ?? [];
+            return {
+              ...prev,
+              messages: prevMessages.slice(0, messageIndex)
+            };
+          }
+        }
+      );
+    }
+  };
+  const acceptMimes = composer?.attachments?.accept ? Object.entries(composer.attachments.accept).map(([mime, exts]) => [mime, ...exts.map((e) => `.${e}`)].join(",")).join(",") : void 0;
+  const errorMessage = stream.error instanceof Error ? stream.error.message : void 0;
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: cn(
+        "flex h-full w-full flex-col overflow-hidden bg-background shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between border-b bg-muted/30 px-6 py-4", children: [
+          /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx20("div", { className: "h-2 w-2 rounded-full bg-green-500" }),
+            /* @__PURE__ */ jsxs11("div", { children: [
+              /* @__PURE__ */ jsx20("h2", { className: "text-lg font-semibold", children: assistantName || resolvedTitle }),
+              /* @__PURE__ */ jsx20("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
+            ] })
+          ] }),
+          history?.enabled !== false && /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx20(
+              "button",
+              {
+                type: "button",
+                onClick: handleNewConversation,
+                disabled: missingConfig || stream.isLoading || isHistoryLoading,
+                className: cn(
+                  "flex h-9 w-9 items-center justify-center rounded-md",
+                  "text-muted-foreground hover:text-foreground hover:bg-muted",
+                  "transition-colors duration-150",
+                  "disabled:opacity-50 disabled:cursor-not-allowed"
+                ),
+                title: t("history.newConversation"),
+                children: /* @__PURE__ */ jsxs11(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "18",
+                    height: "18",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsx20("path", { d: "M12 20h9" }),
+                      /* @__PURE__ */ jsx20("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx20(
+              HistorySidebar,
+              {
+                conversations,
+                currentConversationId: activeConversationId ?? void 0,
+                onNewConversation: handleNewConversation,
+                onSelectConversation: handleSelectConversation,
+                onDeleteConversation: handleDeleteConversation,
+                showDelete: history?.showDelete !== false,
+                disabled: missingConfig || stream.isLoading || isThreadsLoading || isHistoryLoading
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx20(ScrollArea, { ref: scrollAreaRef, className: "flex-1", children: /* @__PURE__ */ jsxs11("div", { ref: viewportRef, className: "px-6 py-4", children: [
+          errorMessage && /* @__PURE__ */ jsx20("div", { className: "mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorMessage }),
+          historyError && /* @__PURE__ */ jsx20("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
+          missingConfig && /* @__PURE__ */ jsx20("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: t("chat.missingConfigDetail") }),
+          isHistoryLoading && /* @__PURE__ */ jsx20("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingConversation") }),
+          messages.length === 0 ? /* @__PURE__ */ jsx20(
+            StartScreen,
+            {
+              startScreen,
+              onPromptClick: handlePromptClick
+            }
+          ) : /* @__PURE__ */ jsxs11("div", { className: "space-y-4", children: [
+            messages.map((message, index) => {
+              const messageType = String(message.type);
+              const isAssistantMessage = messageType === "assistant" || messageType === "ai";
+              const messageContent = typeof message.content === "string" ? message.content : Array.isArray(message.content) ? message.content.map((part) => formatMessageContent(part)).join("") : formatMessageContent(message.content);
+              return /* @__PURE__ */ jsx20(
+                "div",
+                {
+                  className: cn(
+                    "group flex gap-3",
+                    message.type === "human" ? "justify-end" : "justify-start -ml-1"
+                    // AI messages: slightly closer to left
+                  ),
+                  children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col", children: [
+                    /* @__PURE__ */ jsx20(
+                      "div",
+                      {
+                        className: cn(
+                          "max-w-full rounded-2xl",
+                          message.type === "human" ? "bg-primary text-primary-foreground px-4 py-2.5" : message.type === "system" ? "bg-muted text-muted-foreground text-xs px-4 py-2.5" : "py-1 text-chat-foreground"
+                          // AI messages: use chat-specific foreground color
+                        ),
+                        children: isAssistantMessage ? /* @__PURE__ */ jsx20(
+                          AssistantMessage,
+                          {
+                            message: {
+                              ...message,
+                              type: "assistant"
+                            },
+                            isStreaming: stream.isLoading && index === messages.length - 1
+                          }
+                        ) : Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ jsx20(
+                          "p",
+                          {
+                            className: "break-words text-sm leading-relaxed",
+                            children: formatMessageContent(part)
+                          },
+                          `${part.type}-${partIndex}`
+                        )) : formatMessageContent(message.content)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx20(
+                      MessageActions,
+                      {
+                        content: messageContent,
+                        isAssistant: isAssistantMessage,
+                        isStreaming: stream.isLoading && index === messages.length - 1,
+                        onRetry: isAssistantMessage && !stream.isLoading && index === messages.length - 1 ? () => handleRetry(index) : void 0
+                      }
+                    )
+                  ] })
+                },
+                message.id ?? `${message.type}-${index}`
+              );
+            }),
+            showLoadingDots && (() => {
+              const lastMessage = messages[messages.length - 1];
+              const lastMessageType = lastMessage ? String(lastMessage.type) : "";
+              const isLastMessageFromAI = lastMessageType === "ai" || lastMessageType === "assistant";
+              const lastMsgContent = lastMessage?.content;
+              const hasSubstantialContent = isLastMessageFromAI && (typeof lastMsgContent === "string" && lastMsgContent.length > 10 || Array.isArray(lastMsgContent) && lastMsgContent.length > 0);
+              if (hasSubstantialContent) return null;
+              return /* @__PURE__ */ jsx20("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ jsx20("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ jsxs11("div", { className: "flex gap-1.5", children: [
+                /* @__PURE__ */ jsx20("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.3s]" }),
+                /* @__PURE__ */ jsx20("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.15s]" }),
+                /* @__PURE__ */ jsx20("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60" })
+              ] }) }) });
+            })()
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs11("div", { className: "border-t bg-muted/30 p-4", children: [
+          /* @__PURE__ */ jsx20(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              multiple: true,
+              accept: acceptMimes,
+              onChange: handleFileChange,
+              className: "hidden"
+            }
+          ),
+          attachments.length > 0 && /* @__PURE__ */ jsx20("div", { className: "mb-3 flex flex-wrap gap-2", children: attachments.map((file, index) => /* @__PURE__ */ jsxs11(
+            "div",
+            {
+              className: "flex items-center gap-2 rounded-md bg-muted px-2 py-1 text-sm",
+              children: [
+                /* @__PURE__ */ jsxs11(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "14",
+                    height: "14",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    className: "text-muted-foreground",
+                    children: [
+                      /* @__PURE__ */ jsx20("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }),
+                      /* @__PURE__ */ jsx20("polyline", { points: "14 2 14 8 20 8" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx20("span", { className: "max-w-[120px] truncate", children: file.name }),
+                /* @__PURE__ */ jsx20(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleRemoveAttachment(index),
+                    className: "ml-1 rounded-full p-0.5 hover:bg-muted-foreground/20",
+                    children: /* @__PURE__ */ jsx20(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "12",
+                        height: "12",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        children: /* @__PURE__ */ jsx20("path", { d: "M18 6 6 18M6 6l12 12" })
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            `${file.name}-${index}`
+          )) }),
+          selectedTool && /* @__PURE__ */ jsxs11("div", { className: "mb-2 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx20("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary", children: selectedTool.shortLabel ?? selectedTool.label }),
+            /* @__PURE__ */ jsx20(
+              "button",
+              {
+                type: "button",
+                onClick: () => setSelectedTool(null),
+                className: "rounded-full p-0.5 text-muted-foreground hover:bg-muted",
+                children: /* @__PURE__ */ jsx20(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "12",
+                    height: "12",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx20("path", { d: "M18 6 6 18M6 6l12 12" })
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx20("form", { className: "flex items-center", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs11(
+            "div",
+            {
+              className: cn(
+                "flex flex-1 items-center gap-1 rounded-full",
+                "bg-background border border-border shadow-sm",
+                "pl-1.5 pr-1.5 py-1",
+                "focus-within:border-muted-foreground/30 focus-within:shadow-md",
+                "transition-shadow duration-200"
+              ),
+              children: [
+                /* @__PURE__ */ jsx20(
+                  ComposerMenu,
+                  {
+                    composer,
+                    onAttachmentClick: handleAttachmentClick,
+                    onToolSelect: handleToolSelect,
+                    selectedTool,
+                    disabled: stream.isLoading || missingConfig || isHistoryLoading
+                  }
+                ),
+                /* @__PURE__ */ jsx20(
+                  "input",
+                  {
+                    type: "text",
+                    value: draft,
+                    onChange: (event) => setDraft(event.target.value),
+                    placeholder: inputPlaceholder,
+                    disabled: stream.isLoading || missingConfig || isHistoryLoading,
+                    className: cn(
+                      "flex-1 bg-transparent text-sm text-foreground outline-none px-2",
+                      "placeholder:text-muted-foreground",
+                      "disabled:cursor-not-allowed disabled:opacity-50"
+                    ),
+                    autoComplete: "off"
+                  }
+                ),
+                /* @__PURE__ */ jsx20(
+                  SendButton,
+                  {
+                    disabled: isSendDisabled,
+                    isLoading: stream.isLoading,
+                    onStop: () => stream.stop(),
+                    stopLabel: t("chat.stop"),
+                    sendLabel: t("chat.send")
+                  }
+                )
+              ]
+            }
+          ) }),
+          disclaimer?.text && /* @__PURE__ */ jsx20(
+            "p",
+            {
+              className: cn(
+                "mt-2 text-center text-xs",
+                disclaimer.highContrast ? "text-foreground" : "text-muted-foreground"
+              ),
+              children: disclaimer.text
+            }
+          ),
+          /* @__PURE__ */ jsx20("p", { className: "mt-2 text-center text-xs text-muted-foreground", children: t("chat.poweredBy") })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/ui/input.tsx
+import * as React18 from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var Input = React18.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx21(
+      "input",
+      {
+        ref,
+        type,
+        className: cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/components/ui/avatar.tsx
+import * as React19 from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var Avatar = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+  AvatarPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    ),
+    ...props
+  }
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    className: cn("aspect-square h-full w-full", className),
+    ...props
+  }
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+// src/components/ui/separator.tsx
+import * as React20 from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var Separator = React20.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx23(
+    "div",
+    {
+      ref,
+      role: "separator",
+      "aria-orientation": orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = "Separator";
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Button,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Chat,
+  Input,
+  ScrollArea,
+  ScrollBar,
+  Separator,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  supportedLocales as chatkitSupportedLocales,
+  getLanguage as getChatkitLanguage,
+  setLanguage as setChatkitLanguage,
+  useParentMessenger
+};