@xpert-ai/chatkit-ui 0.0.18 → 0.0.20

package/dist/index.cjs

@@ -43,6 +43,7 @@ __export(index_exports, {
   CardHeader: () => CardHeader,
   CardTitle: () => CardTitle,
   Chat: () => Chat,
+  ChatkitAvatar: () => ChatkitAvatar,
   Input: () => Input,
   ParentMessengerProvider: () => ParentMessengerProvider,
   ScrollArea: () => ScrollArea,
@@ -54,7 +55,10 @@ __export(index_exports, {
   TabsTrigger: () => TabsTrigger,
   ThemeProvider: () => ThemeProvider,
   chatkitSupportedLocales: () => supportedLocales,
+  extractAssistantAvatar: () => extractAssistantAvatar,
+  getAvatarFallback: () => getAvatarFallback,
   getChatkitLanguage: () => getLanguage,
+  normalizeChatkitAvatar: () => normalizeChatkitAvatar,
   setChatkitLanguage: () => setLanguage,
   useParentMessenger: () => useParentMessenger,
   useTheme: () => useTheme
@@ -62,7 +66,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/chat.tsx
-var React18 = __toESM(require("react"), 1);
+var React20 = __toESM(require("react"), 1);
 var import_lucide_react9 = require("lucide-react");
 
 // src/lib/utils.ts
@@ -71,19 +75,14 @@ var import_tailwind_merge = require("tailwind-merge");
 function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
-function getRoundedClass(themeRadius) {
-  switch (themeRadius) {
-    case "pill":
-      return "rounded-full";
-    case "round":
-      return "rounded-xl";
-    case "soft":
-      return "rounded-lg";
-    case "sharp":
-      return "rounded-none";
-    default:
-      return "rounded-full";
-  }
+var THEME_RADIUS_PRESET_CLASS = {
+  pill: "rounded-full",
+  round: "rounded-xl",
+  soft: "rounded-lg",
+  sharp: "rounded-none"
+};
+function getRoundedClass(themeRadius, fallback = "rounded-full") {
+  return themeRadius ? THEME_RADIUS_PRESET_CLASS[themeRadius] : fallback;
 }
 function createMessageId() {
   return globalThis.crypto?.randomUUID?.() ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
@@ -616,6 +615,10 @@ var en_US_default = {
     errorToast: "An error occurred. Please try again.",
     errorLabel: "Error:",
     langGraphMessages: "LangGraph Messages..."
+  },
+  message: {
+    answer: "Answer",
+    reasoning: "Reasoning"
   }
 };
 
@@ -675,6 +678,10 @@ var zh_CN_default = {
     errorToast: "\u53D1\u751F\u9519\u8BEF\uFF0C\u8BF7\u91CD\u8BD5\u3002",
     errorLabel: "\u9519\u8BEF\uFF1A",
     langGraphMessages: "LangGraph \u6D88\u606F..."
+  },
+  message: {
+    answer: "\u56DE\u7B54",
+    reasoning: "\u63A8\u7406"
   }
 };
 
@@ -2233,6 +2240,7 @@ function renderContent(content, messageId) {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "space-y-3", children: content.map((item, index) => renderContentItem(item, index, messageId)) });
 }
 function AssistantMessage({ message, className, isStreaming = false }) {
+  const { t } = useChatkitTranslation();
   const content = message.content;
   const hasContent = content != null && !(typeof content === "string" && content.trim() === "" || Array.isArray(message.content) && message.content.length === 0);
   const hasReasoning = Array.isArray(message.reasoning) && message.reasoning.some((item) => item.text?.trim());
@@ -2248,8 +2256,8 @@ function AssistantMessage({ message, className, isStreaming = false }) {
         className: "w-full",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(TabsList, { className: "h-9", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TabsTrigger, { value: "answer", children: "Answer" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TabsTrigger, { value: "reasoning", children: "Reasoning" })
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TabsTrigger, { value: "answer", children: t("message.answer") }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TabsTrigger, { value: "reasoning", children: t("message.reasoning") })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TabsContent, { value: "answer", className: "space-y-3", children: answerNode }),
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TabsContent, { value: "reasoning", className: "space-y-3", children: reasoningNode })
@@ -2365,8 +2373,136 @@ function StartScreen({ startScreen, onPromptClick, className }) {
   ] });
 }
 
-// src/hooks/useThreads.ts
+// src/components/ui/chatkit-avatar.tsx
+var React17 = require("react");
+
+// src/components/ui/avatar.tsx
 var React16 = __toESM(require("react"), 1);
+var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"), 1);
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Avatar = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  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 = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    className: cn("aspect-square h-full w-full", className),
+    ...props
+  }
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  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/chatkit-avatar.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function asRecord(value) {
+  return value && typeof value === "object" ? value : null;
+}
+function getNonEmptyString(value) {
+  if (typeof value !== "string") return void 0;
+  const normalized = value.trim();
+  return normalized || void 0;
+}
+function unicodeFromUnified(unified) {
+  const normalized = getNonEmptyString(unified);
+  if (!normalized) return void 0;
+  try {
+    return normalized.split("-").map((hex) => String.fromCodePoint(Number.parseInt(hex, 16))).join("");
+  } catch {
+    return void 0;
+  }
+}
+function getEmojiCharacter(avatar) {
+  return unicodeFromUnified(avatar?.emoji?.unified);
+}
+function getAvatarFallback(label) {
+  return label.trim().charAt(0).toUpperCase() || "A";
+}
+function normalizeChatkitAvatar(rawAvatar) {
+  if (typeof rawAvatar === "string") {
+    const url = getNonEmptyString(rawAvatar);
+    return url ? { url } : null;
+  }
+  const avatarRecord = asRecord(rawAvatar);
+  if (!avatarRecord) return null;
+  const emojiRecord = asRecord(avatarRecord.emoji);
+  const avatar = {
+    background: getNonEmptyString(avatarRecord.background),
+    url: getNonEmptyString(avatarRecord.url),
+    useNotoColor: Boolean(avatarRecord.useNotoColor)
+  };
+  if (emojiRecord) {
+    avatar.emoji = {
+      colons: getNonEmptyString(emojiRecord.colons),
+      id: getNonEmptyString(emojiRecord.id),
+      unified: getNonEmptyString(emojiRecord.unified)
+    };
+  }
+  return avatar.url || avatar.background || avatar.emoji?.id || avatar.emoji?.unified ? avatar : null;
+}
+function extractAssistantAvatar(assistant) {
+  const assistantRecord = asRecord(assistant);
+  const metadata = asRecord(assistant.metadata);
+  const rawAvatar = assistantRecord?.avatar ?? metadata?.avatar;
+  const avatar = normalizeChatkitAvatar(rawAvatar);
+  if (avatar) return avatar;
+  const metadataAvatar = getNonEmptyString(metadata?.avatarUrl) ?? getNonEmptyString(metadata?.avatar_url);
+  return metadataAvatar ? { url: metadataAvatar } : null;
+}
+function ChatkitAvatar({
+  avatar,
+  className,
+  fallback,
+  fallbackClassName,
+  imageClassName,
+  label,
+  style,
+  ...props
+}) {
+  const { theme } = useTheme();
+  const emojiCharacter = getEmojiCharacter(avatar);
+  const fallbackText = fallback || getAvatarFallback(label);
+  const roundedClass = getRoundedClass(theme.radius);
+  const emojiStyle = avatar?.useNotoColor ? { fontFamily: '"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif' } : void 0;
+  const fallbackStyle = {
+    ...avatar?.background ? { background: avatar.background } : {}
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Avatar, { className: cn(roundedClass, className), style, ...props, children: [
+    avatar?.url ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AvatarImage, { className: imageClassName, src: avatar.url, alt: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      AvatarFallback,
+      {
+        className: cn(roundedClass, "text-sm font-medium text-foreground", fallbackClassName),
+        style: fallbackStyle,
+        children: emojiCharacter ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-[1.1em] leading-none", style: emojiStyle, children: emojiCharacter }) : fallbackText
+      }
+    )
+  ] });
+}
+
+// src/hooks/useThreads.ts
+var React18 = __toESM(require("react"), 1);
 var DEFAULT_LIMIT = 50;
 var getThreadTitle = (threadRecord) => {
   const title = threadRecord.title?.trim();
@@ -2404,16 +2540,16 @@ function useThreads(limit = DEFAULT_LIMIT) {
     isReady,
     isLoading: isStreamLoading
   } = useStreamContext();
-  const [threadRecords, setThreadRecords] = React16.useState([]);
-  const [isLoading, setIsLoading] = React16.useState(false);
-  const [error, setError] = React16.useState(null);
-  const upsertThreadRecord = React16.useCallback((threadRecord) => {
+  const [threadRecords, setThreadRecords] = React18.useState([]);
+  const [isLoading, setIsLoading] = React18.useState(false);
+  const [error, setError] = React18.useState(null);
+  const upsertThreadRecord = React18.useCallback((threadRecord) => {
     setThreadRecords((prev) => {
       const next = prev.filter((item) => item.id !== threadRecord.id);
       return sortThreadRecords([threadRecord, ...next]);
     });
   }, []);
-  const refreshThreads = React16.useCallback(async () => {
+  const refreshThreads = React18.useCallback(async () => {
     setIsLoading(true);
     setError(null);
     try {
@@ -2429,7 +2565,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       setIsLoading(false);
     }
   }, [client, limit, assistantId]);
-  const createThread = React16.useCallback(
+  const createThread = React18.useCallback(
     async (input) => {
       setError(null);
       const payload = {};
@@ -2443,7 +2579,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client, upsertThreadRecord]
   );
-  const updateThread = React16.useCallback(
+  const updateThread = React18.useCallback(
     async (recordId, payload) => {
       setError(null);
       const updated = await client.conversations.update(recordId, payload);
@@ -2452,7 +2588,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client, upsertThreadRecord]
   );
-  const deleteThread = React16.useCallback(
+  const deleteThread = React18.useCallback(
     async (recordId) => {
       setError(null);
       await client.conversations.delete(recordId);
@@ -2460,11 +2596,11 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client]
   );
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     if (!isReady) return;
     void refreshThreads();
   }, [refreshThreads, isReady]);
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     if (!threadId || !isStreamLoading) return;
     const now = (/* @__PURE__ */ new Date()).toISOString();
     setThreadRecords((prev) => {
@@ -2484,7 +2620,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       return changed ? sortThreadRecords(next) : prev;
     });
   }, [threadId, isStreamLoading]);
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     if (!isReady || !threadId || isStreamLoading) return;
     let cancelled = false;
     void client.conversations.search({ where: { threadId }, limit: 1 }).then((result) => {
@@ -2498,7 +2634,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       cancelled = true;
     };
   }, [client, threadId, upsertThreadRecord, isReady, isStreamLoading]);
-  const threads = React16.useMemo(
+  const threads = React18.useMemo(
     () => threadRecords.map((threadRecord) => toThreadItem(threadRecord)),
     [threadRecords]
   );
@@ -2515,10 +2651,10 @@ function useThreads(limit = DEFAULT_LIMIT) {
 }
 
 // src/components/thread/context-usage-indicator.tsx
-var React17 = __toESM(require("react"), 1);
+var React19 = __toESM(require("react"), 1);
 
 // src/components/ui/progress-circle.tsx
-var import_jsx_runtime22 = (
+var import_jsx_runtime24 = (
   // biome-ignore lint/a11y/useFocusableInteractive: false positive (progress + progressbar are not focusable interactives)
   // biome-ignore lint/nursery/useAriaPropsSupportedByRole: biome rule at odds with mdn docs (presumed nursary bug with rule)
   require("react/jsx-runtime")
@@ -2542,7 +2678,7 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
     fill: "none",
     strokeWidth
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "svg",
     {
       role: "progressbar",
@@ -2553,8 +2689,8 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
       "aria-valuemax": 100,
       ...restSvgProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("circle", { ...commonParams, className: "stroke-current/25" }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("circle", { ...commonParams, className: "stroke-current/25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "circle",
           {
             ...commonParams,
@@ -2572,7 +2708,7 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
 };
 
 // src/components/thread/context-usage-indicator.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var kNumberFormatter = new Intl.NumberFormat("en-US", {
   minimumFractionDigits: 0,
   maximumFractionDigits: 1
@@ -2605,20 +2741,20 @@ function ContextUsageIndicator({
 }) {
   const { t } = useChatkitTranslation();
   const stream = useStreamContext();
-  const [maxContextSize, setMaxContextSize] = React17.useState(null);
-  const [usedContextSize, setUsedContextSize] = React17.useState(null);
-  const [assistantAgentKey, setAssistantAgentKey] = React17.useState(null);
-  const latestRealtimeUsageRef = React17.useRef({
+  const [maxContextSize, setMaxContextSize] = React19.useState(null);
+  const [usedContextSize, setUsedContextSize] = React19.useState(null);
+  const [assistantAgentKey, setAssistantAgentKey] = React19.useState(null);
+  const latestRealtimeUsageRef = React19.useRef({
     threadId: null,
     agentKey: null,
     usedTokens: null
   });
-  const realtimeUsage = React17.useMemo(
+  const realtimeUsage = React19.useMemo(
     () => getThreadContextUsage(stream.contextUsageByAgentKey, assistantAgentKey),
     [assistantAgentKey, stream.contextUsageByAgentKey]
   );
   const realtimeUsedContextSize = getThreadContextUsageTotalTokens(realtimeUsage);
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     if (!stream.client || !stream.assistantId) {
       setMaxContextSize(null);
       setAssistantAgentKey(null);
@@ -2638,18 +2774,18 @@ function ContextUsageIndicator({
       cancelled = true;
     };
   }, [stream.client, stream.assistantId]);
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     latestRealtimeUsageRef.current = {
       threadId: stream.threadId ?? null,
       agentKey: assistantAgentKey,
       usedTokens: realtimeUsedContextSize
     };
   }, [assistantAgentKey, realtimeUsedContextSize, stream.threadId]);
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     if (realtimeUsedContextSize == null) return;
     setUsedContextSize(realtimeUsedContextSize);
   }, [realtimeUsedContextSize]);
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     if (!stream.client) {
       setUsedContextSize(null);
       return;
@@ -2714,8 +2850,8 @@ function ContextUsageIndicator({
   });
   const usageLabelWithSuffix = usageLabel.endsWith(":") ? usageLabel : `${usageLabel}:`;
   const progressClassName = percent >= 90 ? "text-destructive" : percent >= 75 ? "text-amber-500" : "text-primary dark:text-zinc-300";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "button",
       {
         type: "button",
@@ -2724,19 +2860,19 @@ function ContextUsageIndicator({
           className
         ),
         "aria-label": `${usageLabelWithSuffix} ${usageFullLabel}. ${usageTokensLabel}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ProgressCircle, { value: percent, className: cn("size-3.5", progressClassName) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ProgressCircle, { value: percent, className: cn("size-3.5", progressClassName) })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(TooltipContent, { side: "top", sideOffset: 6, className: "space-y-0.5 px-3 py-2 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-primary-foreground/70", children: usageLabelWithSuffix }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-sm font-semibold", children: usageTokensLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(TooltipContent, { side: "top", sideOffset: 6, className: "space-y-0.5 px-3 py-2 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-primary-foreground/70", children: usageLabelWithSuffix }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-sm font-semibold", children: usageTokensLabel })
     ] })
   ] });
 }
 
 // src/components/chat.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var import_meta2 = {};
 var defaultApiUrl2 = import_meta2.env.VITE_XPERTAI_API_URL;
 function formatMessageContent(content) {
@@ -2776,16 +2912,17 @@ function Chat({
   const apiUrl = options?.api?.apiUrl || defaultApiUrl2;
   const { setStream } = useStreamManager();
   const stream = useStreamContext();
-  const [isHistoryLoading, setIsHistoryLoading] = React18.useState(false);
-  const [historyError, setHistoryError] = React18.useState(null);
-  const [assistantName, setAssistantName] = React18.useState(null);
+  const [isHistoryLoading, setIsHistoryLoading] = React20.useState(false);
+  const [historyError, setHistoryError] = React20.useState(null);
+  const [assistantName, setAssistantName] = React20.useState(null);
+  const [assistantAvatar, setAssistantAvatar] = React20.useState(null);
   const LOADING_DOTS_MIN_DURATION = 800;
-  const [showLoadingDots, setShowLoadingDots] = React18.useState(false);
-  const loadingStartTimeRef = React18.useRef(null);
-  React18.useEffect(() => {
+  const [showLoadingDots, setShowLoadingDots] = React20.useState(false);
+  const loadingStartTimeRef = React20.useRef(null);
+  React20.useEffect(() => {
     setStream(stream);
   }, [setStream, stream]);
-  React18.useEffect(() => {
+  React20.useEffect(() => {
     if (stream.isLoading) {
       if (!loadingStartTimeRef.current) {
         loadingStartTimeRef.current = Date.now();
@@ -2808,48 +2945,48 @@ function Chat({
       }
     }
   }, [stream.isLoading]);
-  const [draft, setDraft] = React18.useState("");
-  const [selectedTool, setSelectedTool] = React18.useState(null);
-  const [attachments, setAttachments] = React18.useState([]);
-  const [isAtBottom, setIsAtBottom] = React18.useState(true);
-  const [hasUpdatesBelow, setHasUpdatesBelow] = React18.useState(false);
+  const [draft, setDraft] = React20.useState("");
+  const [selectedTool, setSelectedTool] = React20.useState(null);
+  const [attachments, setAttachments] = React20.useState([]);
+  const [isAtBottom, setIsAtBottom] = React20.useState(true);
+  const [hasUpdatesBelow, setHasUpdatesBelow] = React20.useState(false);
   const {
     threads,
     deleteThread,
     refreshThreads,
     isLoading: isThreadsLoading
   } = useThreads();
-  const viewportRef = React18.useRef(null);
-  const fileInputRef = React18.useRef(null);
-  const shouldAutoScrollRef = React18.useRef(true);
-  const forceFollowRef = React18.useRef(false);
-  const previousMessageCountRef = React18.useRef(0);
-  const previousScrollTopRef = React18.useRef(0);
-  const autoScrollFrameRef = React18.useRef(null);
-  const isPointerDownRef = React18.useRef(false);
-  const lastTouchYRef = React18.useRef(null);
+  const viewportRef = React20.useRef(null);
+  const fileInputRef = React20.useRef(null);
+  const shouldAutoScrollRef = React20.useRef(true);
+  const forceFollowRef = React20.useRef(false);
+  const previousMessageCountRef = React20.useRef(0);
+  const previousScrollTopRef = React20.useRef(0);
+  const autoScrollFrameRef = React20.useRef(null);
+  const isPointerDownRef = React20.useRef(false);
+  const lastTouchYRef = React20.useRef(null);
   const resolvedTitle = title ?? t("chat.title");
   const resolvedPlaceholder = placeholder ?? t("chat.placeholder");
   const inputPlaceholder = selectedTool?.placeholderOverride ?? composer?.placeholder ?? resolvedPlaceholder;
-  const messages = React18.useMemo(() => stream.messages ?? [], [stream.messages]);
+  const messages = React20.useMemo(() => stream.messages ?? [], [stream.messages]);
   const trimmedDraft = draft.trim();
-  const cancelPendingAutoScroll = React18.useCallback(() => {
+  const cancelPendingAutoScroll = React20.useCallback(() => {
     if (autoScrollFrameRef.current !== null) {
       cancelAnimationFrame(autoScrollFrameRef.current);
       autoScrollFrameRef.current = null;
     }
   }, []);
-  const disableAutoFollow = React18.useCallback(() => {
+  const disableAutoFollow = React20.useCallback(() => {
     forceFollowRef.current = false;
     shouldAutoScrollRef.current = false;
     cancelPendingAutoScroll();
   }, [cancelPendingAutoScroll]);
-  const enableAutoFollow = React18.useCallback(() => {
+  const enableAutoFollow = React20.useCallback(() => {
     forceFollowRef.current = true;
     shouldAutoScrollRef.current = true;
     setHasUpdatesBelow(false);
   }, []);
-  const scrollToBottom = React18.useCallback((smooth = false, force = false) => {
+  const scrollToBottom = React20.useCallback((smooth = false, force = false) => {
     if (force) {
       enableAutoFollow();
     }
@@ -2868,7 +3005,7 @@ function Chat({
       }
     });
   }, [cancelPendingAutoScroll, enableAutoFollow]);
-  React18.useEffect(() => {
+  React20.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) return;
     previousScrollTopRef.current = viewport.scrollTop;
@@ -2939,14 +3076,14 @@ function Chat({
       window.removeEventListener("pointercancel", stopPointerTracking);
     };
   }, [cancelPendingAutoScroll, disableAutoFollow]);
-  React18.useEffect(() => {
+  React20.useEffect(() => {
     shouldAutoScrollRef.current = true;
     forceFollowRef.current = false;
     previousScrollTopRef.current = 0;
     setIsAtBottom(true);
     setHasUpdatesBelow(false);
   }, [stream.threadId]);
-  React18.useEffect(() => {
+  React20.useEffect(() => {
     const messageCountChanged = messages.length !== previousMessageCountRef.current;
     previousMessageCountRef.current = messages.length;
     if (!shouldAutoScrollRef.current) {
@@ -2965,19 +3102,32 @@ function Chat({
   const showMissingConfig = !isClientSecretInitializing && missingConfig;
   const hasUploadingFiles = attachments.some((a) => a.status === "uploading");
   const isSendDisabled = !trimmedDraft || stream.isLoading || missingConfig || isHistoryLoading || hasUploadingFiles;
-  React18.useEffect(() => {
+  React20.useEffect(() => {
     if (missingConfig) return;
     void refreshThreads();
   }, [missingConfig, refreshThreads]);
-  React18.useEffect(() => {
-    if (missingConfig || !stream.client || !stream.assistantId) return;
+  React20.useEffect(() => {
+    if (missingConfig || !stream.client || !stream.assistantId) {
+      setAssistantName(null);
+      setAssistantAvatar(null);
+      return;
+    }
+    setAssistantName(null);
+    setAssistantAvatar(null);
+    let cancelled = false;
     stream.client.assistants.get(stream.assistantId).then((assistant) => {
-      if (assistant) {
-        setAssistantName(assistant.metadata?.title || assistant.name);
-      }
+      if (cancelled || !assistant) return;
+      const assistantTitle2 = typeof assistant.metadata?.title === "string" && assistant.metadata.title.trim() ? assistant.metadata.title : assistant.name;
+      setAssistantName(assistantTitle2);
+      setAssistantAvatar(extractAssistantAvatar(assistant));
     }).catch((err) => {
+      if (cancelled) return;
+      setAssistantAvatar(null);
       console.warn("[Chat] Failed to load assistant info:", err);
     });
+    return () => {
+      cancelled = true;
+    };
   }, [missingConfig, stream.client, stream.assistantId]);
   const uploadedFiles = attachments.filter((a) => a.status === "success" && a.storageFile).map((a) => ({
     id: a.storageFile?.id,
@@ -3031,7 +3181,7 @@ function Chat({
   const handleAttachmentClick = () => {
     fileInputRef.current?.click();
   };
-  const uploadFile = React18.useCallback(async (localId, file) => {
+  const uploadFile = React20.useCallback(async (localId, file) => {
     try {
       const result = await stream.client.contexts.uploadFile(file);
       setAttachments(
@@ -3051,7 +3201,7 @@ function Chat({
       );
     }
   }, [stream.client]);
-  const handleRetryUpload = React18.useCallback((localId) => {
+  const handleRetryUpload = React20.useCallback((localId) => {
     const attachment = attachments.find((a) => a.localId === localId);
     if (!attachment || attachment.status !== "error") return;
     setAttachments(
@@ -3126,7 +3276,7 @@ function Chat({
     );
     scrollToBottom(true, true);
   };
-  const loadConversationMessages = React18.useCallback(
+  const loadConversationMessages = React20.useCallback(
     async (recordId) => {
       if (missingConfig) {
         setHistoryError(t("chat.missingConfigShort"));
@@ -3208,17 +3358,18 @@ function Chat({
     }
   };
   const acceptMimes = composer?.attachments?.accept ? Object.entries(composer.attachments.accept).map(([mime, exts]) => [mime, ...exts.map((e) => `.${e}`)].join(",")).join(",") : void 0;
-  const currentThread = React18.useMemo(
+  const currentThread = React20.useMemo(
     () => threads.find((item) => item.id === stream.threadId),
     [threads, stream.threadId]
   );
   const errorMessage = stream.error instanceof Error ? stream.error.message : void 0;
-  const threadErrorMessage = React18.useMemo(() => {
+  const threadErrorMessage = React20.useMemo(() => {
     if (currentThread?.status !== "error") return void 0;
     const message = currentThread.error?.trim();
     return message || t("thread.errorToast");
   }, [currentThread, t]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  const assistantTitle = assistantName || resolvedTitle;
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       ref: viewportRef,
@@ -3227,16 +3378,26 @@ function Chat({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center justify-between border-b px-4 py-2 sticky top-0 z-10 bg-background", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { className: "text-lg font-semibold", children: assistantName || resolvedTitle }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between border-b p-2 sticky top-0 z-10 bg-background", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "relative shrink-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                ChatkitAvatar,
+                {
+                  avatar: assistantAvatar,
+                  className: "h-9 w-9 border border-border/60",
+                  label: assistantTitle
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "truncate", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h2", { className: "text-lg font-semibold truncate", title: assistantTitle, children: assistantTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
             ] })
           ] }),
-          history?.enabled !== false && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          history?.enabled !== false && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "button",
               {
                 type: "button",
@@ -3249,10 +3410,10 @@ function Chat({
                   "disabled:opacity-50 disabled:cursor-not-allowed"
                 ),
                 title: t("history.newThread"),
-                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.Pencil, { size: 16 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Pencil, { size: 16 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               HistorySidebar,
               {
                 threads,
@@ -3266,23 +3427,23 @@ function Chat({
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex-1 p-4", children: [
-          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("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__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
-          showMissingConfig && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("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__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
-          messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex-1 p-4", children: [
+          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("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__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
+          showMissingConfig && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("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__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
+          messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             StartScreen,
             {
               startScreen,
               onPromptClick: handlePromptClick
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "space-y-4", children: [
+          ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("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__ */ (0, import_jsx_runtime24.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 "div",
                 {
                   className: cn(
@@ -3290,8 +3451,8 @@ function Chat({
                     message.type === "human" ? "justify-end" : "justify-start -ml-1"
                     // AI messages: slightly closer to left
                   ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col px-3 overflow-hidden", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col px-3 overflow-hidden", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                       "div",
                       {
                         className: cn(
@@ -3299,7 +3460,7 @@ function Chat({
                           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__ */ (0, import_jsx_runtime24.jsx)(
+                        children: isAssistantMessage ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                           AssistantMessage,
                           {
                             message: {
@@ -3308,30 +3469,30 @@ function Chat({
                             },
                             isStreaming: stream.isLoading && index === messages.length - 1
                           }
-                        ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-                          message.type === "human" && message.attachments?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-wrap gap-1.5 mb-2", children: message.attachments.map((file, fileIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                        ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+                          message.type === "human" && message.attachments?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex flex-wrap gap-1.5 mb-2", children: message.attachments.map((file, fileIndex) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
                             "div",
                             {
                               className: "flex items-center gap-1.5 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.FileText, { size: 12 }),
-                                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "max-w-[100px] truncate", children: file.originalName })
+                                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.FileText, { size: 12 }),
+                                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "max-w-[100px] truncate", children: file.originalName })
                               ]
                             },
                             fileIndex
                           )) }),
-                          Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                          Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                             "p",
                             {
                               className: "wrap-break-word text-sm leading-relaxed",
                               children: formatMessageContent(part)
                             },
                             `${part.type}-${partIndex}`
-                          )) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
+                          )) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
                         ] })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                       MessageActions,
                       {
                         content: messageContent,
@@ -3352,15 +3513,15 @@ function Chat({
               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__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex gap-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.3s]" }),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.15s]" }),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60" })
+              return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex gap-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.3s]" }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.15s]" }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground/60" })
               ] }) }) });
             })()
           ] })
         ] }),
-        !isAtBottom && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        !isAtBottom && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           Button,
           {
             type: "button",
@@ -3373,12 +3534,12 @@ function Chat({
             onClick: () => scrollToBottom(true, true),
             "aria-label": t("chat.scrollToBottom"),
             title: t("chat.scrollToBottom"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.ArrowDown, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.ArrowDown, { size: 16 })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
-          threadErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: threadErrorMessage }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
+          threadErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: threadErrorMessage }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "input",
             {
               ref: fileInputRef,
@@ -3389,7 +3550,7 @@ function Chat({
               className: "hidden"
             }
           ),
-          attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: attachments.map((item) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: attachments.map((item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             "div",
             {
               className: cn(
@@ -3397,24 +3558,24 @@ function Chat({
                 item.status === "error" ? "bg-destructive/10 border border-destructive/30" : "bg-muted"
               ),
               children: [
-                item.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.Loader2, { size: 14, className: "animate-spin text-muted-foreground" }),
-                item.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.FileText, { size: 14, className: "text-muted-foreground" }),
-                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.FileText, { size: 14, className: "text-destructive" }),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: cn(
+                item.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.Loader2, { size: 14, className: "animate-spin text-muted-foreground" }),
+                item.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.FileText, { size: 14, className: "text-muted-foreground" }),
+                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.FileText, { size: 14, className: "text-destructive" }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: cn(
                   "max-w-30 truncate",
                   item.status === "error" && "text-destructive"
                 ), children: item.file.name }),
-                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   "button",
                   {
                     type: "button",
                     onClick: () => handleRetryUpload(item.localId),
                     className: "ml-1 rounded-full p-0.5 text-destructive hover:bg-destructive/20",
                     title: t("chat.retryUpload"),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.RefreshCw, { size: 12 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.RefreshCw, { size: 12 })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3423,26 +3584,26 @@ function Chat({
                       "ml-1 rounded-full p-0.5",
                       item.status === "error" ? "text-destructive hover:bg-destructive/20" : "hover:bg-muted-foreground/20"
                     ),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.X, { size: 12 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.X, { size: 12 })
                   }
                 )
               ]
             },
             item.localId
           )) }),
-          selectedTool && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "mb-2 flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary", children: selectedTool.shortLabel ?? selectedTool.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          selectedTool && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "mb-2 flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary", children: selectedTool.shortLabel ?? selectedTool.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "button",
               {
                 type: "button",
                 onClick: () => setSelectedTool(null),
                 className: "rounded-full p-0.5 text-muted-foreground hover:bg-muted",
-                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.X, { size: 12 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react9.X, { size: 12 })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("form", { className: "flex items-center", onSubmit: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("form", { className: "flex items-center", onSubmit: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             "div",
             {
               className: cn(
@@ -3453,7 +3614,7 @@ function Chat({
                 "transition-shadow duration-200"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   ComposerMenu,
                   {
                     composer,
@@ -3463,7 +3624,7 @@ function Chat({
                     disabled: stream.isLoading || missingConfig || isHistoryLoading
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   "input",
                   {
                     type: "text",
@@ -3479,7 +3640,7 @@ function Chat({
                     autoComplete: "off"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   SendButton,
                   {
                     disabled: isSendDisabled,
@@ -3492,7 +3653,7 @@ function Chat({
               ]
             }
           ) }),
-          disclaimer?.text && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          disclaimer?.text && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "p",
             {
               className: cn(
@@ -3502,9 +3663,9 @@ function Chat({
               children: disclaimer.text
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: t("chat.poweredBy") }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ContextUsageIndicator, { className: "absolute right-4" })
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: t("chat.poweredBy") }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ContextUsageIndicator, { className: "absolute right-4" })
           ] })
         ] })
       ]
@@ -3513,11 +3674,11 @@ function Chat({
 }
 
 // src/components/ui/input.tsx
-var React19 = __toESM(require("react"), 1);
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var Input = React19.forwardRef(
+var React21 = __toESM(require("react"), 1);
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Input = React21.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "input",
       {
         ref,
@@ -3533,49 +3694,11 @@ var Input = React19.forwardRef(
 );
 Input.displayName = "Input";
 
-// src/components/ui/avatar.tsx
-var React20 = __toESM(require("react"), 1);
-var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"), 1);
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Avatar = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-  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 = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-  AvatarPrimitive.Image,
-  {
-    ref,
-    className: cn("aspect-square h-full w-full", className),
-    ...props
-  }
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-  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
-var React21 = __toESM(require("react"), 1);
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var Separator = React21.forwardRef(
-  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+var React22 = __toESM(require("react"), 1);
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Separator = React22.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
       ref,
@@ -3606,6 +3729,7 @@ Separator.displayName = "Separator";
   CardHeader,
   CardTitle,
   Chat,
+  ChatkitAvatar,
   Input,
   ParentMessengerProvider,
   ScrollArea,
@@ -3617,7 +3741,10 @@ Separator.displayName = "Separator";
   TabsTrigger,
   ThemeProvider,
   chatkitSupportedLocales,
+  extractAssistantAvatar,
+  getAvatarFallback,
   getChatkitLanguage,
+  normalizeChatkitAvatar,
   setChatkitLanguage,
   useParentMessenger,
   useTheme