@uix-ai/agent 0.0.1

package/dist/index.js

@@ -0,0 +1,2653 @@
+// src/components/Avatar.tsx
+import * as React from "react";
+
+// src/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function throttle(fn, waitMs) {
+  let lastCallTime = 0;
+  let timeoutId = null;
+  let lastArgs = null;
+  const throttled = (...args) => {
+    const now = Date.now();
+    const remaining = waitMs - (now - lastCallTime);
+    lastArgs = args;
+    if (remaining <= 0) {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+      lastCallTime = now;
+      fn(...args);
+    } else if (!timeoutId) {
+      timeoutId = setTimeout(() => {
+        lastCallTime = Date.now();
+        timeoutId = null;
+        if (lastArgs) {
+          fn(...lastArgs);
+        }
+      }, remaining);
+    }
+  };
+  return throttled;
+}
+function formatRelativeTime(date) {
+  const d = typeof date === "string" ? new Date(date) : date;
+  const now = /* @__PURE__ */ new Date();
+  const diff = now.getTime() - d.getTime();
+  const minutes = Math.floor(diff / 6e4);
+  const hours = Math.floor(diff / 36e5);
+  const days = Math.floor(diff / 864e5);
+  if (minutes < 1) return "\u521A\u521A";
+  if (minutes < 60) return `${minutes}\u5206\u949F\u524D`;
+  if (hours < 24) return `${hours}\u5C0F\u65F6\u524D`;
+  if (days < 7) return `${days}\u5929\u524D`;
+  return d.toLocaleDateString("zh-CN", { month: "short", day: "numeric" });
+}
+
+// src/components/Avatar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var AvatarContext = React.createContext(null);
+function useAvatarContext() {
+  const context = React.useContext(AvatarContext);
+  if (!context) {
+    throw new Error("Avatar components must be used within <Avatar>");
+  }
+  return context;
+}
+var sizeClasses = {
+  xs: "w-5 h-5 text-[10px]",
+  sm: "w-6 h-6 text-xs",
+  md: "w-8 h-8 text-sm",
+  lg: "w-10 h-10 text-base",
+  xl: "w-12 h-12 text-lg"
+};
+var statusIndicatorSizes = {
+  xs: "w-1.5 h-1.5",
+  sm: "w-2 h-2",
+  md: "w-2.5 h-2.5",
+  lg: "w-3 h-3",
+  xl: "w-3.5 h-3.5"
+};
+var variantClasses = {
+  primary: "bg-primary-500 text-white",
+  secondary: "bg-secondary-500 text-white",
+  neutral: "bg-gray-200 text-gray-600",
+  success: "bg-green-500 text-white",
+  warning: "bg-amber-500 text-white",
+  error: "bg-red-500 text-white"
+};
+var roleToVariant = {
+  user: "primary",
+  assistant: "secondary",
+  system: "neutral",
+  tool: "warning",
+  error: "error"
+};
+var roleSymbols = {
+  user: "U",
+  assistant: "A",
+  system: "S",
+  tool: "T",
+  error: "!"
+};
+var presenceColors = {
+  online: "bg-green-500",
+  offline: "bg-gray-400",
+  busy: "bg-amber-500"
+};
+var Avatar = React.forwardRef(
+  ({ size = "md", status = "idle", role, className, children, ...props }, ref) => {
+    const [imageStatus, setImageStatus] = React.useState("idle");
+    return /* @__PURE__ */ jsx(AvatarContext.Provider, { value: { size, role, imageStatus, setImageStatus }, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative inline-flex items-center justify-center rounded-full font-medium shrink-0",
+          "overflow-hidden",
+          sizeClasses[size],
+          className
+        ),
+        role: "img",
+        "aria-busy": status !== "idle",
+        ...props,
+        children: [
+          children,
+          status === "thinking" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute inset-0 rounded-full animate-pulse bg-current opacity-20",
+              "aria-hidden": "true"
+            }
+          ),
+          status === "planning" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute inset-0 rounded-full animate-breath bg-current opacity-15",
+              "aria-hidden": "true"
+            }
+          ),
+          status === "responding" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute inset-0 rounded-full animate-ping bg-current opacity-20",
+              "aria-hidden": "true"
+            }
+          ),
+          status === "tool-calling" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute inset-0 rounded-full border-2 border-transparent border-t-current animate-spin opacity-60",
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+Avatar.displayName = "Avatar";
+var AvatarImage = React.forwardRef(
+  ({ src, alt, onLoadingStatusChange, className, ...props }, ref) => {
+    const { setImageStatus } = useAvatarContext();
+    React.useEffect(() => {
+      if (!src) {
+        setImageStatus("idle");
+        onLoadingStatusChange?.("idle");
+        return;
+      }
+      setImageStatus("loading");
+      onLoadingStatusChange?.("loading");
+      const img = new Image();
+      img.onload = () => {
+        setImageStatus("loaded");
+        onLoadingStatusChange?.("loaded");
+      };
+      img.onerror = () => {
+        setImageStatus("error");
+        onLoadingStatusChange?.("error");
+      };
+      img.src = src;
+      return () => {
+        img.onload = null;
+        img.onerror = null;
+      };
+    }, [src, setImageStatus, onLoadingStatusChange]);
+    const { imageStatus } = useAvatarContext();
+    if (!src || imageStatus !== "loaded") {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ref,
+        src,
+        alt,
+        className: cn("w-full h-full object-cover", className),
+        ...props
+      }
+    );
+  }
+);
+AvatarImage.displayName = "AvatarImage";
+var AvatarFallback = React.forwardRef(
+  ({ variant, delayMs = 0, className, children, ...props }, ref) => {
+    const { role, imageStatus } = useAvatarContext();
+    const [canRender, setCanRender] = React.useState(delayMs === 0);
+    const resolvedVariant = variant || (role ? roleToVariant[role] : "neutral");
+    const fallbackContent = children || (role ? roleSymbols[role] : null);
+    React.useEffect(() => {
+      if (delayMs === 0) {
+        setCanRender(true);
+        return;
+      }
+      const timer = setTimeout(() => {
+        setCanRender(true);
+      }, delayMs);
+      return () => clearTimeout(timer);
+    }, [delayMs]);
+    if (imageStatus === "loaded" || !canRender) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full h-full flex items-center justify-center",
+          variantClasses[resolvedVariant],
+          className
+        ),
+        ...props,
+        children: fallbackContent
+      }
+    );
+  }
+);
+AvatarFallback.displayName = "AvatarFallback";
+var AvatarStatusIndicator = React.forwardRef(
+  ({ status, className, ...props }, ref) => {
+    const { size } = useAvatarContext();
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "absolute bottom-0 right-0 rounded-full border-2 border-white",
+          presenceColors[status],
+          statusIndicatorSizes[size],
+          className
+        ),
+        "aria-label": status,
+        ...props
+      }
+    );
+  }
+);
+AvatarStatusIndicator.displayName = "AvatarStatusIndicator";
+
+// src/components/AgentAvatarGroup.tsx
+import * as React2 from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var overlapClasses = {
+  xs: "-ml-1.5",
+  sm: "-ml-2",
+  md: "-ml-3",
+  lg: "-ml-4",
+  xl: "-ml-5"
+};
+var AvatarGroup = React2.forwardRef(
+  ({ max = 4, size = "sm", direction = "left", className, children, ...props }, ref) => {
+    const childArray = React2.Children.toArray(children);
+    const visibleChildren = childArray.slice(0, max);
+    const overflowCount = childArray.length - max;
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center",
+          direction === "right" && "flex-row-reverse",
+          className
+        ),
+        role: "group",
+        "aria-label": `${childArray.length} items`,
+        ...props,
+        children: [
+          visibleChildren.map((child, index) => {
+            const isFirst = index === 0;
+            const clonedChild = React2.isValidElement(child) ? React2.cloneElement(child, {
+              size,
+              className: cn(
+                child.props.className,
+                "border-2 border-white transition-transform hover:z-10 hover:scale-110"
+              )
+            }) : child;
+            return /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: cn(
+                  "relative",
+                  !isFirst && (direction === "left" ? overlapClasses[size] : "-mr-2")
+                ),
+                style: { zIndex: visibleChildren.length - index },
+                children: clonedChild
+              },
+              index
+            );
+          }),
+          overflowCount > 0 && /* @__PURE__ */ jsx2(
+            Avatar,
+            {
+              size,
+              className: cn(
+                "border-2 border-white",
+                direction === "left" ? overlapClasses[size] : "-mr-2"
+              ),
+              style: { zIndex: 0 },
+              "aria-label": `${overflowCount} more`,
+              children: /* @__PURE__ */ jsxs2(AvatarFallback, { variant: "neutral", children: [
+                "+",
+                overflowCount
+              ] })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+
+// src/components/AgentAvatar.tsx
+import * as React3 from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var sizeClasses2 = {
+  sm: "w-8 h-8 text-xs",
+  md: "w-10 h-10 text-sm",
+  lg: "w-12 h-12 text-base"
+};
+var variantClasses2 = {
+  primary: "bg-primary-100 text-primary-700",
+  secondary: "bg-secondary-100 text-secondary-700",
+  success: "bg-green-100 text-green-700",
+  warning: "bg-amber-100 text-amber-700",
+  error: "bg-red-100 text-red-700",
+  info: "bg-blue-100 text-blue-700",
+  neutral: "bg-gray-100 text-gray-700"
+};
+var statusColors = {
+  online: "bg-green-500",
+  offline: "bg-gray-400",
+  busy: "bg-amber-500"
+};
+var statusSizes = {
+  sm: "w-2.5 h-2.5",
+  md: "w-3 h-3",
+  lg: "w-3.5 h-3.5"
+};
+function useImageLoadingStatus(src, onStatusChange) {
+  const [status, setStatus] = React3.useState("idle");
+  React3.useEffect(() => {
+    if (!src) {
+      setStatus("idle");
+      onStatusChange?.("idle");
+      return;
+    }
+    setStatus("loading");
+    onStatusChange?.("loading");
+    const img = new Image();
+    img.onload = () => {
+      setStatus("loaded");
+      onStatusChange?.("loaded");
+    };
+    img.onerror = () => {
+      setStatus("error");
+      onStatusChange?.("error");
+    };
+    img.src = src;
+    return () => {
+      img.onload = null;
+      img.onerror = null;
+    };
+  }, [src, onStatusChange]);
+  return status;
+}
+var AgentAvatar = React3.forwardRef(
+  ({
+    src,
+    name,
+    icon,
+    variant = "neutral",
+    status,
+    size = "md",
+    onLoadingStatusChange,
+    fallbackDelayMs = 0,
+    className
+  }, ref) => {
+    const imageStatus = useImageLoadingStatus(src, onLoadingStatusChange);
+    const [showFallback, setShowFallback] = React3.useState(!src);
+    React3.useEffect(() => {
+      if (!src) {
+        setShowFallback(true);
+        return;
+      }
+      if (imageStatus === "loaded") {
+        setShowFallback(false);
+        return;
+      }
+      if (imageStatus === "error") {
+        setShowFallback(true);
+        return;
+      }
+      if (fallbackDelayMs > 0) {
+        setShowFallback(false);
+        const timer = setTimeout(() => {
+          if (imageStatus === "loading") {
+            setShowFallback(true);
+          }
+        }, fallbackDelayMs);
+        return () => clearTimeout(timer);
+      } else {
+        setShowFallback(true);
+      }
+    }, [src, imageStatus, fallbackDelayMs]);
+    const initials = name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+    const showImage = src && imageStatus === "loaded";
+    return /* @__PURE__ */ jsxs3("div", { ref, className: cn("relative inline-block shrink-0", className), children: [
+      src && /* @__PURE__ */ jsx3(
+        "img",
+        {
+          src,
+          alt: name,
+          className: cn(
+            "rounded-full object-cover",
+            sizeClasses2[size],
+            showImage ? "opacity-100" : "opacity-0 absolute inset-0"
+          )
+        }
+      ),
+      (!src || showFallback) && !showImage && /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: cn(
+            "rounded-full flex items-center justify-center font-medium",
+            variantClasses2[variant],
+            sizeClasses2[size]
+          ),
+          role: "img",
+          "aria-label": name,
+          children: icon || initials
+        }
+      ),
+      status && /* @__PURE__ */ jsx3(
+        "span",
+        {
+          className: cn(
+            "absolute bottom-0 right-0 rounded-full border-2 border-white",
+            statusColors[status],
+            statusSizes[size]
+          ),
+          "aria-label": status
+        }
+      )
+    ] });
+  }
+);
+AgentAvatar.displayName = "AgentAvatar";
+
+// src/components/MessageAvatar.tsx
+import * as React4 from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var roleSymbols2 = {
+  user: "U",
+  assistant: "A",
+  system: "S",
+  tool: "T",
+  error: "!"
+};
+var roleColors = {
+  user: "bg-primary-500 text-white",
+  assistant: "bg-secondary-500 text-white",
+  system: "bg-gray-200 text-gray-600",
+  tool: "bg-orange-500 text-white",
+  error: "bg-red-500 text-white"
+};
+var sizeClasses3 = {
+  sm: "w-6 h-6 text-xs",
+  md: "w-8 h-8 text-sm",
+  lg: "w-10 h-10 text-base"
+};
+var statusAnimations = {
+  idle: "",
+  thinking: "animate-pulse",
+  responding: "animate-breath",
+  "tool-calling": ""
+};
+var MessageAvatar = React4.forwardRef(
+  ({ role, status = "idle", src, name, icon, size = "md", className }, ref) => {
+    const symbol = roleSymbols2[role];
+    const displayText = name ? name.charAt(0).toUpperCase() : symbol;
+    const isToolCalling = status === "tool-calling";
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative inline-flex items-center justify-center rounded-full font-medium shrink-0",
+          roleColors[role],
+          sizeClasses3[size],
+          statusAnimations[status],
+          className
+        ),
+        role: "img",
+        "aria-label": name || role,
+        "aria-busy": status !== "idle",
+        children: [
+          src ? /* @__PURE__ */ jsx4(
+            "img",
+            {
+              src,
+              alt: name || role,
+              className: "w-full h-full rounded-full object-cover"
+            }
+          ) : icon ? /* @__PURE__ */ jsx4("span", { className: "flex items-center justify-center", children: icon }) : /* @__PURE__ */ jsx4("span", { children: displayText }),
+          isToolCalling && /* @__PURE__ */ jsx4(
+            "span",
+            {
+              className: cn(
+                "absolute inset-0 rounded-full border-2 border-transparent",
+                "border-t-white/80 animate-spin"
+              ),
+              "aria-hidden": "true"
+            }
+          ),
+          status === "responding" && /* @__PURE__ */ jsx4(
+            "span",
+            {
+              className: cn(
+                "absolute inset-0 rounded-full",
+                "animate-ping opacity-30",
+                roleColors[role]
+              ),
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+MessageAvatar.displayName = "MessageAvatar";
+
+// src/components/ChatBubble.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function ChatBubble({
+  role,
+  avatar,
+  name,
+  children,
+  timestamp,
+  className
+}) {
+  const isUser = role === "user";
+  const isSystem = role === "system";
+  if (isSystem) {
+    return /* @__PURE__ */ jsx5("div", { className: cn("flex justify-center my-4", className), children: /* @__PURE__ */ jsx5("div", { className: "text-sm text-gray-500 bg-gray-50 px-4 py-2 rounded-full", children }) });
+  }
+  const formattedTime = timestamp ? typeof timestamp === "string" ? timestamp : timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : null;
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: cn(
+        "flex gap-3 my-4",
+        isUser ? "flex-row-reverse" : "flex-row",
+        className
+      ),
+      children: [
+        !isUser && /* @__PURE__ */ jsx5("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx5(
+          AgentAvatar,
+          {
+            src: avatar,
+            name: name || "AI",
+            size: "md"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            className: cn(
+              "flex flex-col max-w-[70%]",
+              isUser ? "items-end" : "items-start"
+            ),
+            children: [
+              name && !isUser && /* @__PURE__ */ jsx5("span", { className: "text-sm font-medium text-gray-900 mb-1", children: name }),
+              /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  className: cn(
+                    "px-4 py-3 rounded-2xl",
+                    isUser ? "bg-primary-500 text-white rounded-br-sm" : "bg-gray-100 text-gray-900 rounded-bl-sm"
+                  ),
+                  children
+                }
+              ),
+              formattedTime && /* @__PURE__ */ jsx5("span", { className: "text-xs text-gray-400 mt-1", children: formattedTime })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ChatInput.tsx
+import * as React5 from "react";
+import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var ChatInput = React5.forwardRef(
+  ({ className, onSubmit, ...props }, ref) => {
+    const handleSubmit = (e) => {
+      e.preventDefault();
+      onSubmit?.(e);
+    };
+    return /* @__PURE__ */ jsx6(
+      "form",
+      {
+        ref,
+        onSubmit: handleSubmit,
+        className: cn(
+          "w-full overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",
+          "focus-within:border-primary-500 focus-within:ring-1 focus-within:ring-primary-500",
+          "transition-shadow",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+ChatInput.displayName = "ChatInput";
+var ChatInputTextarea = React5.forwardRef(
+  ({
+    className,
+    value,
+    onChange,
+    placeholder = "Type a message...",
+    minHeight = 48,
+    maxHeight = 200,
+    mentionTrigger = "@",
+    onMentionQuery,
+    mentionItems = [],
+    onMentionSelect,
+    onKeyDown,
+    ...props
+  }, ref) => {
+    const innerRef = React5.useRef(null);
+    React5.useImperativeHandle(ref, () => innerRef.current);
+    const [showMentions, setShowMentions] = React5.useState(false);
+    const [mentionQuery, setMentionQuery] = React5.useState("");
+    const [mentionIndex, setMentionIndex] = React5.useState(0);
+    const [mentionPosition, setMentionPosition] = React5.useState(null);
+    const mentionStartRef = React5.useRef(null);
+    const filteredMentions = React5.useMemo(() => {
+      if (onMentionQuery) {
+        return onMentionQuery(mentionQuery);
+      }
+      if (!mentionQuery) return mentionItems.slice(0, 8);
+      const query = mentionQuery.toLowerCase();
+      return mentionItems.filter(
+        (item) => item.name.toLowerCase().includes(query) || item.description?.toLowerCase().includes(query)
+      ).slice(0, 8);
+    }, [mentionQuery, mentionItems, onMentionQuery]);
+    React5.useEffect(() => {
+      const textarea = innerRef.current;
+      if (textarea) {
+        textarea.style.height = "auto";
+        const newHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
+        textarea.style.height = `${newHeight}px`;
+      }
+    }, [value, minHeight, maxHeight]);
+    const handleChange = (e) => {
+      const newValue = e.target.value;
+      const selectionStart = e.target.selectionStart;
+      onChange?.(newValue);
+      const textBeforeCursor = newValue.slice(0, selectionStart);
+      const lastTriggerIndex = textBeforeCursor.lastIndexOf(mentionTrigger);
+      if (lastTriggerIndex !== -1) {
+        const textAfterTrigger = textBeforeCursor.slice(lastTriggerIndex + 1);
+        if (!textAfterTrigger.includes(" ") && textAfterTrigger.length <= 20) {
+          mentionStartRef.current = lastTriggerIndex;
+          setMentionQuery(textAfterTrigger);
+          setShowMentions(true);
+          setMentionIndex(0);
+          if (innerRef.current) {
+            const rect = innerRef.current.getBoundingClientRect();
+            setMentionPosition({
+              top: rect.bottom + 4,
+              left: rect.left
+            });
+          }
+          return;
+        }
+      }
+      setShowMentions(false);
+      mentionStartRef.current = null;
+    };
+    const selectMention = React5.useCallback(
+      (item) => {
+        if (mentionStartRef.current === null || value === void 0) return;
+        const before = value.slice(0, mentionStartRef.current);
+        const after = value.slice(mentionStartRef.current + mentionQuery.length + 1);
+        const newValue = `${before}${mentionTrigger}${item.name} ${after}`;
+        onChange?.(newValue);
+        onMentionSelect?.(item);
+        setShowMentions(false);
+        mentionStartRef.current = null;
+        setTimeout(() => {
+          if (innerRef.current) {
+            const newCursorPos = before.length + item.name.length + 2;
+            innerRef.current.focus();
+            innerRef.current.setSelectionRange(newCursorPos, newCursorPos);
+          }
+        }, 0);
+      },
+      [value, mentionQuery, mentionTrigger, onChange, onMentionSelect]
+    );
+    const handleKeyDown = (e) => {
+      if (showMentions && filteredMentions.length > 0) {
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setMentionIndex((prev) => (prev + 1) % filteredMentions.length);
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setMentionIndex((prev) => (prev - 1 + filteredMentions.length) % filteredMentions.length);
+          return;
+        }
+        if (e.key === "Enter" || e.key === "Tab") {
+          e.preventDefault();
+          selectMention(filteredMentions[mentionIndex]);
+          return;
+        }
+        if (e.key === "Escape") {
+          e.preventDefault();
+          setShowMentions(false);
+          return;
+        }
+      }
+      if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+        e.preventDefault();
+        const form = e.currentTarget.form;
+        if (form) {
+          form.requestSubmit();
+        }
+      }
+      onKeyDown?.(e);
+    };
+    return /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx6(
+        "textarea",
+        {
+          ref: innerRef,
+          value,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          placeholder,
+          rows: 1,
+          className: cn(
+            "w-full resize-none border-none bg-transparent p-4",
+            "text-sm text-gray-900 placeholder:text-gray-400",
+            "focus:outline-none focus:ring-0",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          ),
+          style: { minHeight, maxHeight },
+          ...props
+        }
+      ),
+      showMentions && filteredMentions.length > 0 && mentionPosition && /* @__PURE__ */ jsx6(
+        InternalMentionPopover,
+        {
+          items: filteredMentions,
+          selectedIndex: mentionIndex,
+          onSelect: selectMention,
+          style: {
+            position: "fixed",
+            top: mentionPosition.top,
+            left: mentionPosition.left
+          }
+        }
+      )
+    ] });
+  }
+);
+ChatInputTextarea.displayName = "ChatInputTextarea";
+var ChatInputToolbar = React5.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center justify-between border-t border-gray-100 p-2", className),
+      ...props
+    }
+  )
+);
+ChatInputToolbar.displayName = "ChatInputToolbar";
+var ChatInputTools = React5.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx6("div", { ref, className: cn("flex items-center gap-1", className), ...props })
+);
+ChatInputTools.displayName = "ChatInputTools";
+var ChatInputButton = React5.forwardRef(
+  ({ className, variant = "ghost", type = "button", ...props }, ref) => /* @__PURE__ */ jsx6(
+    "button",
+    {
+      ref,
+      type,
+      className: cn(
+        "inline-flex items-center justify-center rounded-lg p-2 transition-colors",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
+        "disabled:pointer-events-none disabled:opacity-50",
+        variant === "ghost" && "text-gray-500 hover:bg-gray-100 hover:text-gray-700",
+        variant === "default" && "bg-primary-500 text-white hover:bg-primary-600",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ChatInputButton.displayName = "ChatInputButton";
+var ChatInputSubmit = React5.forwardRef(
+  ({ className, status = "idle", onStop, disabled, type, ...props }, ref) => {
+    const isStreaming = status === "streaming";
+    const isSubmitting = status === "submitted";
+    const isDisabled = disabled || isSubmitting;
+    const handleClick = (e) => {
+      if (isStreaming && onStop) {
+        e.preventDefault();
+        onStop();
+      }
+    };
+    return /* @__PURE__ */ jsx6(
+      "button",
+      {
+        ref,
+        type: isStreaming ? "button" : "submit",
+        disabled: isDisabled,
+        onClick: handleClick,
+        className: cn(
+          "inline-flex items-center justify-center rounded-lg p-2 transition-colors",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
+          "disabled:pointer-events-none disabled:opacity-50",
+          isStreaming ? "bg-red-500 text-white hover:bg-red-600" : "bg-primary-500 text-white hover:bg-primary-600",
+          className
+        ),
+        ...props,
+        children: isSubmitting ? /* @__PURE__ */ jsx6(LoaderIcon, { className: "h-5 w-5 animate-spin" }) : isStreaming ? /* @__PURE__ */ jsx6(StopIcon, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx6(SendIcon, { className: "h-5 w-5" })
+      }
+    );
+  }
+);
+ChatInputSubmit.displayName = "ChatInputSubmit";
+function InternalMentionPopover({
+  items,
+  selectedIndex,
+  onSelect,
+  style,
+  className
+}) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: cn(
+        "z-50 w-72 max-h-64 overflow-y-auto",
+        "bg-white rounded-xl shadow-lg border border-gray-200",
+        "py-1",
+        className
+      ),
+      style,
+      children: items.map((item, index) => /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSelect(item),
+          className: cn(
+            "w-full flex items-center gap-3 px-3 py-2.5 text-left",
+            "transition-colors",
+            index === selectedIndex ? "bg-primary-50 text-primary-900" : "hover:bg-gray-50"
+          ),
+          children: [
+            item.avatar ? /* @__PURE__ */ jsx6(
+              "img",
+              {
+                src: item.avatar,
+                alt: item.name,
+                className: "h-9 w-9 rounded-full object-cover"
+              }
+            ) : /* @__PURE__ */ jsx6("div", { className: "flex h-9 w-9 items-center justify-center rounded-full bg-primary-100", children: /* @__PURE__ */ jsx6("span", { className: "text-sm font-medium text-primary-700", children: item.name.charAt(0).toUpperCase() }) }),
+            /* @__PURE__ */ jsxs6("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx6("div", { className: "truncate text-sm font-medium text-gray-900", children: item.name }),
+              item.description && /* @__PURE__ */ jsx6("div", { className: "truncate text-xs text-gray-500", children: item.description })
+            ] })
+          ]
+        },
+        item.id
+      ))
+    }
+  );
+}
+function SendIcon({ className }) {
+  return /* @__PURE__ */ jsx6("svg", { className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8" }) });
+}
+function StopIcon({ className }) {
+  return /* @__PURE__ */ jsx6("svg", { className, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) });
+}
+function LoaderIcon({ className }) {
+  return /* @__PURE__ */ jsx6("svg", { className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx6(
+    "path",
+    {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    }
+  ) });
+}
+
+// src/components/ChatMessage.tsx
+import * as React7 from "react";
+
+// src/components/StreamText.tsx
+import * as React6 from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function useCallbackRef(callback) {
+  const ref = React6.useRef(callback);
+  React6.useLayoutEffect(() => {
+    ref.current = callback;
+  });
+  return ref;
+}
+function useAsyncStream(stream, options = {}) {
+  const [text, setText] = React6.useState("");
+  const [isStreaming, setIsStreaming] = React6.useState(false);
+  const [error, setError] = React6.useState(null);
+  const onCompleteRef = useCallbackRef(options.onComplete);
+  const onErrorRef = useCallbackRef(options.onError);
+  const onUpdateRef = useCallbackRef(options.onUpdate);
+  const internalAbortRef = React6.useRef(null);
+  const abort = React6.useCallback(() => {
+    internalAbortRef.current?.abort();
+    options.abortController?.abort();
+  }, [options.abortController]);
+  React6.useEffect(() => {
+    if (!stream) {
+      setText("");
+      setIsStreaming(false);
+      setError(null);
+      return;
+    }
+    const internalAbort = new AbortController();
+    internalAbortRef.current = internalAbort;
+    const externalAbort = options.abortController;
+    const isAborted = () => internalAbort.signal.aborted || (externalAbort?.signal.aborted ?? false);
+    setIsStreaming(true);
+    setText("");
+    setError(null);
+    const consume = async () => {
+      try {
+        const iterable = isReadableStream(stream) ? readableStreamToAsyncIterable(stream) : stream;
+        let accumulated = "";
+        for await (const chunk of iterable) {
+          if (isAborted()) break;
+          accumulated += chunk;
+          setText(accumulated);
+          onUpdateRef.current?.(accumulated);
+        }
+        if (!isAborted()) {
+          setIsStreaming(false);
+          onCompleteRef.current?.();
+        }
+      } catch (err) {
+        if (!isAborted()) {
+          const streamError = err instanceof Error ? err : new Error(String(err));
+          setError(streamError);
+          setIsStreaming(false);
+          onErrorRef.current?.(streamError);
+        }
+      }
+    };
+    consume();
+    return () => {
+      internalAbort.abort();
+    };
+  }, [stream, options.abortController]);
+  return { text, isStreaming, error, abort };
+}
+function useTypingAnimation(text, options = {}) {
+  const { speed = 30 } = options;
+  const [displayText, setDisplayText] = React6.useState("");
+  const [isTyping, setIsTyping] = React6.useState(false);
+  const onCompleteRef = useCallbackRef(options.onComplete);
+  const onUpdateRef = useCallbackRef(options.onUpdate);
+  React6.useEffect(() => {
+    if (!text) {
+      setDisplayText("");
+      setIsTyping(false);
+      return;
+    }
+    setIsTyping(true);
+    setDisplayText("");
+    let index = 0;
+    const timer = setInterval(() => {
+      if (index < text.length) {
+        const newText = text.slice(0, index + 1);
+        setDisplayText(newText);
+        onUpdateRef.current?.(newText);
+        index++;
+      } else {
+        clearInterval(timer);
+        setIsTyping(false);
+        onCompleteRef.current?.();
+      }
+    }, speed);
+    return () => clearInterval(timer);
+  }, [text, speed]);
+  return { displayText, isTyping };
+}
+function isReadableStream(value) {
+  return typeof value === "object" && value !== null && "getReader" in value && typeof value.getReader === "function";
+}
+async function* readableStreamToAsyncIterable(stream) {
+  const reader = stream.getReader();
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      if (value) yield value;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+var StreamCursor = React6.forwardRef(({ char = "\u258B", className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  "span",
+  {
+    ref,
+    className: cn("animate-pulse ml-0.5", className),
+    "aria-hidden": "true",
+    ...props,
+    children: char
+  }
+));
+StreamCursor.displayName = "StreamCursor";
+var StreamText = React6.forwardRef(
+  ({
+    stream,
+    text,
+    cursor = true,
+    cursorChar = "\u258B",
+    speed = 30,
+    onComplete,
+    onError,
+    onUpdate,
+    abortController,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    const {
+      text: streamedText,
+      isStreaming,
+      error
+    } = useAsyncStream(stream, {
+      onComplete: stream ? onComplete : void 0,
+      onError,
+      onUpdate: stream ? onUpdate : void 0,
+      abortController
+    });
+    const { displayText: typedText, isTyping } = useTypingAnimation(
+      stream ? void 0 : text,
+      {
+        speed,
+        onComplete: stream ? void 0 : onComplete,
+        onUpdate: stream ? void 0 : onUpdate
+      }
+    );
+    const displayText = stream ? streamedText : typedText;
+    const isActive = stream ? isStreaming : isTyping;
+    const showCursor = cursor && isActive;
+    if (children) {
+      return /* @__PURE__ */ jsxs7("span", { ref, className, ...props, children: [
+        children(displayText, isActive),
+        showCursor && /* @__PURE__ */ jsx7(StreamCursor, { char: cursorChar })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs7(
+      "span",
+      {
+        ref,
+        className: cn("whitespace-pre-wrap", className),
+        "aria-live": "polite",
+        "aria-busy": isActive,
+        ...props,
+        children: [
+          displayText,
+          showCursor && /* @__PURE__ */ jsx7(StreamCursor, { char: cursorChar }),
+          error && /* @__PURE__ */ jsxs7("span", { className: "text-red-500 ml-2", role: "alert", children: [
+            "Error: ",
+            error.message
+          ] })
+        ]
+      }
+    );
+  }
+);
+StreamText.displayName = "StreamText";
+
+// src/components/ChatMessage.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var ChatMessageContext = React7.createContext(null);
+function useChatMessageContext() {
+  const context = React7.useContext(ChatMessageContext);
+  if (!context) {
+    throw new Error("ChatMessage components must be used within <ChatMessage>");
+  }
+  return context;
+}
+var roleToVariant2 = {
+  user: "primary",
+  assistant: "secondary",
+  system: "neutral",
+  tool: "warning",
+  error: "error"
+};
+var statusToAnimation = {
+  idle: "idle",
+  thinking: "thinking",
+  streaming: "responding",
+  complete: "idle",
+  error: "idle"
+};
+var ChatMessage = React7.forwardRef(
+  ({ role, status = "complete", className, children, ...props }, ref) => {
+    const isUser = role === "user";
+    const isSystem = role === "system";
+    const contextValue = {
+      role,
+      status,
+      isUser
+    };
+    if (isSystem) {
+      return /* @__PURE__ */ jsx8(ChatMessageContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx8(
+        "div",
+        {
+          ref,
+          className: cn("flex justify-center my-4", className),
+          "data-role": role,
+          "data-status": status,
+          ...props,
+          children
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx8(ChatMessageContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx8(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex gap-3 my-4",
+          isUser ? "flex-row-reverse" : "flex-row",
+          className
+        ),
+        "data-role": role,
+        "data-status": status,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ChatMessage.displayName = "ChatMessage";
+var ChatMessageAvatar = React7.forwardRef(
+  ({ src, name, animationStatus, className, ...props }, ref) => {
+    const { role, status, isUser } = useChatMessageContext();
+    if (isUser) return null;
+    const animation = animationStatus ?? statusToAnimation[status];
+    const variant = roleToVariant2[role];
+    const fallbackChar = name?.charAt(0).toUpperCase() || role.charAt(0).toUpperCase();
+    return /* @__PURE__ */ jsx8("div", { ref, className: cn("flex-shrink-0", className), ...props, children: /* @__PURE__ */ jsxs8(Avatar, { size: "md", status: animation, children: [
+      src && /* @__PURE__ */ jsx8(AvatarImage, { src, alt: name || role }),
+      /* @__PURE__ */ jsx8(AvatarFallback, { variant, children: fallbackChar })
+    ] }) });
+  }
+);
+ChatMessageAvatar.displayName = "ChatMessageAvatar";
+var contentStyles = {
+  user: "bg-primary-500 text-white rounded-2xl rounded-br-sm",
+  assistant: "bg-gray-100 text-gray-900 rounded-2xl rounded-bl-sm",
+  system: "bg-gray-50 text-gray-500 rounded-full text-sm",
+  tool: "bg-amber-50 text-amber-900 rounded-xl",
+  error: "bg-red-50 text-red-900 rounded-xl"
+};
+var ChatMessageContent = React7.forwardRef(
+  ({ name, className, children, ...props }, ref) => {
+    const { role, status, isUser } = useChatMessageContext();
+    return /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col max-w-[70%]",
+          isUser ? "items-end" : "items-start",
+          className
+        ),
+        ...props,
+        children: [
+          name && !isUser && /* @__PURE__ */ jsx8("span", { className: "text-sm font-medium text-gray-900 mb-1", children: name }),
+          /* @__PURE__ */ jsx8(
+            "div",
+            {
+              className: cn("px-4 py-3", contentStyles[role]),
+              "aria-busy": status === "thinking" || status === "streaming",
+              "aria-live": status === "streaming" ? "polite" : void 0,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ChatMessageContent.displayName = "ChatMessageContent";
+var ChatMessageTimestamp = React7.forwardRef(
+  ({ time, format, className, ...props }, ref) => {
+    const { status } = useChatMessageContext();
+    if (status === "thinking" || status === "streaming") {
+      return null;
+    }
+    const date = typeof time === "string" ? new Date(time) : time;
+    const formatted = format ? format(date) : date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+    return /* @__PURE__ */ jsx8(
+      "span",
+      {
+        ref,
+        className: cn("text-xs text-gray-400 mt-1", className),
+        ...props,
+        children: formatted
+      }
+    );
+  }
+);
+ChatMessageTimestamp.displayName = "ChatMessageTimestamp";
+var ChatMessageThinking = React7.forwardRef(
+  ({ label, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs8(
+      "span",
+      {
+        ref,
+        className: cn("inline-flex items-center gap-2 text-gray-500", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx8("span", { className: "flex items-center gap-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx8(
+            "span",
+            {
+              className: "w-1.5 h-1.5 bg-secondary-500 rounded-full animate-bounce",
+              style: { animationDelay: `${i * 150}ms`, animationDuration: "600ms" }
+            },
+            i
+          )) }),
+          label && /* @__PURE__ */ jsx8("span", { className: "text-sm", children: label })
+        ]
+      }
+    );
+  }
+);
+ChatMessageThinking.displayName = "ChatMessageThinking";
+var ChatMessageError = React7.forwardRef(
+  ({ message = "Something went wrong", onRetry, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs8(
+      "span",
+      {
+        ref,
+        className: cn("flex items-center gap-2 text-red-600", className),
+        role: "alert",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx8("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx8(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            }
+          ) }),
+          /* @__PURE__ */ jsx8("span", { children: message }),
+          onRetry && /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              onClick: onRetry,
+              className: "text-sm underline hover:no-underline",
+              children: "Retry"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ChatMessageError.displayName = "ChatMessageError";
+var ChatMessageSimple = React7.forwardRef(
+  ({
+    role,
+    status = "complete",
+    content,
+    stream,
+    avatar,
+    name,
+    timestamp,
+    thinkingLabel,
+    errorMessage,
+    onComplete,
+    onError,
+    onRetry,
+    className,
+    ...props
+  }, ref) => {
+    const renderContent = () => {
+      switch (status) {
+        case "thinking":
+          return /* @__PURE__ */ jsx8(ChatMessageThinking, { label: thinkingLabel });
+        case "streaming":
+          return /* @__PURE__ */ jsx8(
+            StreamText,
+            {
+              stream,
+              cursor: true,
+              onComplete,
+              onError
+            }
+          );
+        case "error":
+          return /* @__PURE__ */ jsx8(ChatMessageError, { message: errorMessage, onRetry });
+        case "idle":
+        case "complete":
+        default:
+          return /* @__PURE__ */ jsx8("span", { className: "whitespace-pre-wrap", children: content });
+      }
+    };
+    return /* @__PURE__ */ jsxs8(ChatMessage, { ref, role, status, className, ...props, children: [
+      /* @__PURE__ */ jsx8(ChatMessageAvatar, { src: avatar, name }),
+      /* @__PURE__ */ jsxs8(ChatMessageContent, { name, children: [
+        renderContent(),
+        timestamp && status === "complete" && /* @__PURE__ */ jsx8(ChatMessageTimestamp, { time: timestamp })
+      ] })
+    ] });
+  }
+);
+ChatMessageSimple.displayName = "ChatMessageSimple";
+
+// src/components/MentionPopover.tsx
+import * as React8 from "react";
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  size as floatingSize
+} from "@floating-ui/react";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var MentionContext = React8.createContext(null);
+function useMentionContext() {
+  const context = React8.useContext(MentionContext);
+  if (!context) {
+    throw new Error("MentionItem must be used within MentionPopover");
+  }
+  return context;
+}
+function useMentionPopover(anchorRef, virtualAnchor, options = {}) {
+  const { placement = "bottom-start", offset: offsetValue = 4 } = options;
+  const floating = useFloating({
+    placement,
+    middleware: [
+      offset(offsetValue),
+      flip({ fallbackPlacements: ["top-start", "bottom-end", "top-end"] }),
+      shift({ padding: 8 }),
+      floatingSize({
+        apply({ availableHeight, elements }) {
+          Object.assign(elements.floating.style, {
+            maxHeight: `${Math.min(availableHeight, 320)}px`
+          });
+        }
+      })
+    ],
+    whileElementsMounted: autoUpdate
+  });
+  React8.useLayoutEffect(() => {
+    if (virtualAnchor) {
+      floating.refs.setReference(virtualAnchor);
+    } else if (anchorRef?.current) {
+      floating.refs.setReference(anchorRef.current);
+    }
+  }, [virtualAnchor, anchorRef, floating.refs]);
+  return {
+    floating,
+    isPositioned: floating.isPositioned
+  };
+}
+var MentionItem = React8.forwardRef(
+  ({ agent, highlighted = false, onSelect, className, children, ...props }, ref) => {
+    const context = React8.useContext(MentionContext);
+    const handleSelect = onSelect || context?.onSelect;
+    return /* @__PURE__ */ jsx9(
+      "div",
+      {
+        ref,
+        role: "option",
+        "aria-selected": highlighted,
+        className: cn(
+          "flex items-center gap-3 px-3 py-2 cursor-pointer transition-colors",
+          highlighted ? "bg-primary-50 text-primary-900" : "hover:bg-gray-50",
+          className
+        ),
+        onClick: () => handleSelect?.(agent),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleSelect?.(agent);
+          }
+        },
+        tabIndex: 0,
+        ...props,
+        children: children || /* @__PURE__ */ jsxs9(Fragment2, { children: [
+          /* @__PURE__ */ jsxs9(Avatar, { size: "sm", children: [
+            agent.avatar && /* @__PURE__ */ jsx9(AvatarImage, { src: agent.avatar, alt: agent.name }),
+            /* @__PURE__ */ jsx9(AvatarFallback, { variant: "secondary", children: agent.name.charAt(0).toUpperCase() })
+          ] }),
+          /* @__PURE__ */ jsxs9("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx9("div", { className: "font-medium text-sm truncate", children: agent.name }),
+            agent.description && /* @__PURE__ */ jsx9("div", { className: "text-xs text-gray-500 truncate", children: agent.description })
+          ] }),
+          agent.status && /* @__PURE__ */ jsx9(
+            "span",
+            {
+              className: cn(
+                "w-2 h-2 rounded-full",
+                agent.status === "online" && "bg-green-500",
+                agent.status === "busy" && "bg-amber-500",
+                agent.status === "offline" && "bg-gray-300"
+              )
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+MentionItem.displayName = "MentionItem";
+var MentionPopover = React8.forwardRef(
+  ({
+    open,
+    anchorRef,
+    virtualAnchor,
+    query = "",
+    agents,
+    onSelect,
+    onClose,
+    maxItems = 5,
+    placement = "bottom-start",
+    filter,
+    emptyMessage = "No agents found",
+    children,
+    className
+  }, ref) => {
+    const [highlightedIndex, setHighlightedIndex] = React8.useState(0);
+    const { floating, isPositioned } = useMentionPopover(anchorRef, virtualAnchor, {
+      placement
+    });
+    const defaultFilter = React8.useCallback(
+      (agent, q) => {
+        const searchLower = q.toLowerCase();
+        return agent.name.toLowerCase().includes(searchLower) || agent.description?.toLowerCase().includes(searchLower) || false;
+      },
+      []
+    );
+    const filteredAgents = React8.useMemo(() => {
+      const filterFn = filter || defaultFilter;
+      return agents.filter((agent) => filterFn(agent, query)).slice(0, maxItems);
+    }, [agents, query, maxItems, filter, defaultFilter]);
+    React8.useEffect(() => {
+      setHighlightedIndex(0);
+    }, [filteredAgents.length]);
+    React8.useEffect(() => {
+      if (!open) return;
+      const handleKeyDown = (e) => {
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault();
+            setHighlightedIndex(
+              (prev) => prev < filteredAgents.length - 1 ? prev + 1 : 0
+            );
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            setHighlightedIndex(
+              (prev) => prev > 0 ? prev - 1 : filteredAgents.length - 1
+            );
+            break;
+          case "Enter":
+            e.preventDefault();
+            if (filteredAgents[highlightedIndex]) {
+              onSelect?.(filteredAgents[highlightedIndex]);
+            }
+            break;
+          case "Escape":
+            e.preventDefault();
+            onClose?.();
+            break;
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [open, filteredAgents, highlightedIndex, onSelect, onClose]);
+    if (!open) return null;
+    const contextValue = {
+      query,
+      highlightedIndex,
+      setHighlightedIndex,
+      onSelect: onSelect || (() => {
+      })
+    };
+    return /* @__PURE__ */ jsx9(MentionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        ref: (node) => {
+          floating.refs.setFloating(node);
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        role: "listbox",
+        "aria-label": "Select an agent to mention",
+        className: cn(
+          "z-50 min-w-[200px] max-w-[300px]",
+          "bg-white rounded-lg shadow-lg border border-gray-200",
+          "overflow-hidden overflow-y-auto",
+          !isPositioned && "invisible",
+          className
+        ),
+        style: {
+          position: floating.strategy,
+          top: floating.y ?? 0,
+          left: floating.x ?? 0
+        },
+        children: [
+          /* @__PURE__ */ jsx9("div", { className: "py-1", children: children ? children(filteredAgents) : filteredAgents.length > 0 ? filteredAgents.map((agent, index) => /* @__PURE__ */ jsx9(
+            MentionItem,
+            {
+              agent,
+              highlighted: index === highlightedIndex,
+              onSelect
+            },
+            agent.id
+          )) : /* @__PURE__ */ jsx9("div", { className: "px-3 py-4 text-sm text-gray-500 text-center", children: emptyMessage }) }),
+          /* @__PURE__ */ jsx9("div", { className: "border-t border-gray-100 px-3 py-1.5 bg-gray-50", children: /* @__PURE__ */ jsx9("span", { className: "text-xs text-gray-400", children: "\u2191\u2193 to navigate \xB7 Enter to select \xB7 Esc to close" }) })
+        ]
+      }
+    ) });
+  }
+);
+MentionPopover.displayName = "MentionPopover";
+
+// src/components/ThinkingIndicator.tsx
+import * as React9 from "react";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var sizeClasses4 = {
+  sm: { dot: "w-1 h-1", gap: "gap-0.5", text: "text-xs" },
+  md: { dot: "w-1.5 h-1.5", gap: "gap-1", text: "text-sm" },
+  lg: { dot: "w-2 h-2", gap: "gap-1.5", text: "text-base" }
+};
+var colorClasses = {
+  primary: "bg-primary-500",
+  secondary: "bg-secondary-500",
+  neutral: "bg-gray-400"
+};
+function DotsAnimation({
+  size,
+  color
+}) {
+  const { dot, gap } = sizeClasses4[size];
+  return /* @__PURE__ */ jsx10("span", { className: cn("inline-flex items-center", gap), children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx10(
+    "span",
+    {
+      className: cn(dot, colorClasses[color], "rounded-full animate-pulse"),
+      style: { animationDelay: `${i * 150}ms` }
+    },
+    i
+  )) });
+}
+function BounceAnimation({
+  size,
+  color
+}) {
+  const { dot, gap } = sizeClasses4[size];
+  return /* @__PURE__ */ jsx10("span", { className: cn("inline-flex items-end", gap), style: { height: "1em" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx10(
+    "span",
+    {
+      className: cn(dot, colorClasses[color], "rounded-full animate-bounce"),
+      style: { animationDelay: `${i * 150}ms`, animationDuration: "600ms" }
+    },
+    i
+  )) });
+}
+function WaveAnimation({
+  size,
+  color
+}) {
+  const { gap } = sizeClasses4[size];
+  const barWidth = size === "sm" ? "w-0.5" : size === "md" ? "w-1" : "w-1.5";
+  return /* @__PURE__ */ jsx10("span", { className: cn("inline-flex items-center", gap), style: { height: "1em" }, children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx10(
+    "span",
+    {
+      className: cn(barWidth, colorClasses[color], "rounded-full animate-wave"),
+      style: {
+        animationDelay: `${i * 100}ms`,
+        height: "0.5em"
+      }
+    },
+    i
+  )) });
+}
+function PulseAnimation({
+  size,
+  color
+}) {
+  const ringSize = size === "sm" ? "w-3 h-3" : size === "md" ? "w-4 h-4" : "w-5 h-5";
+  return /* @__PURE__ */ jsxs10("span", { className: "relative inline-flex", children: [
+    /* @__PURE__ */ jsx10("span", { className: cn(ringSize, colorClasses[color], "rounded-full animate-ping opacity-75") }),
+    /* @__PURE__ */ jsx10(
+      "span",
+      {
+        className: cn(
+          ringSize,
+          colorClasses[color],
+          "rounded-full absolute inset-0"
+        )
+      }
+    )
+  ] });
+}
+function SpinnerAnimation({
+  size,
+  color
+}) {
+  const spinnerSize = size === "sm" ? "w-3 h-3" : size === "md" ? "w-4 h-4" : "w-5 h-5";
+  const borderColor = color === "primary" ? "border-primary-500" : color === "secondary" ? "border-secondary-500" : "border-gray-400";
+  return /* @__PURE__ */ jsx10(
+    "span",
+    {
+      className: cn(
+        spinnerSize,
+        "inline-block rounded-full border-2 border-transparent animate-spin",
+        `border-t-2 ${borderColor}`
+      )
+    }
+  );
+}
+var ThinkingIndicator = React9.forwardRef(
+  ({
+    label,
+    agents,
+    variant = "bounce",
+    size = "md",
+    inline = false,
+    color = "secondary",
+    className,
+    ...props
+  }, ref) => {
+    const { text } = sizeClasses4[size];
+    const renderAnimation = () => {
+      switch (variant) {
+        case "dots":
+          return /* @__PURE__ */ jsx10(DotsAnimation, { size, color });
+        case "pulse":
+          return /* @__PURE__ */ jsx10(PulseAnimation, { size, color });
+        case "wave":
+          return /* @__PURE__ */ jsx10(WaveAnimation, { size, color });
+        case "spinner":
+          return /* @__PURE__ */ jsx10(SpinnerAnimation, { size, color });
+        case "bounce":
+        default:
+          return /* @__PURE__ */ jsx10(BounceAnimation, { size, color });
+      }
+    };
+    const labelText = agents && agents.length > 0 ? `${agents.join(", ")} ${agents.length > 1 ? "are" : "is"} thinking...` : label || "Thinking...";
+    if (inline) {
+      return /* @__PURE__ */ jsx10(
+        "span",
+        {
+          ref,
+          className: cn("inline-flex items-center gap-2", className),
+          role: "status",
+          "aria-live": "polite",
+          "aria-label": labelText,
+          ...props,
+          children: renderAnimation()
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        ref,
+        className: cn("flex items-center gap-3 my-4", className),
+        role: "status",
+        "aria-live": "polite",
+        "aria-label": labelText,
+        ...props,
+        children: [
+          renderAnimation(),
+          /* @__PURE__ */ jsx10("span", { className: cn("text-gray-500", text), children: labelText })
+        ]
+      }
+    );
+  }
+);
+ThinkingIndicator.displayName = "ThinkingIndicator";
+
+// src/components/ToolResult.tsx
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var statusIcons = {
+  pending: "\u23F3",
+  streaming: "\u{1F4E1}",
+  ready: "\u{1F4CB}",
+  running: "\u26A1",
+  "approval-required": "\u{1F510}",
+  approved: "\u2705",
+  denied: "\u{1F6AB}",
+  success: "\u2713",
+  error: "\u2717"
+};
+var statusColors2 = {
+  pending: "text-gray-500 bg-gray-50 border-gray-200",
+  streaming: "text-blue-600 bg-blue-50 border-blue-200",
+  ready: "text-indigo-600 bg-indigo-50 border-indigo-200",
+  running: "text-amber-600 bg-amber-50 border-amber-200",
+  "approval-required": "text-purple-600 bg-purple-50 border-purple-200",
+  approved: "text-green-600 bg-green-50 border-green-200",
+  denied: "text-gray-600 bg-gray-50 border-gray-200",
+  success: "text-green-600 bg-green-50 border-green-200",
+  error: "text-red-600 bg-red-50 border-red-200"
+};
+var statusLabels = {
+  pending: "Pending",
+  streaming: "Receiving parameters...",
+  ready: "Ready to execute",
+  running: "Running...",
+  "approval-required": "Waiting for approval",
+  approved: "Approved",
+  denied: "Denied",
+  success: "Completed",
+  error: "Failed"
+};
+function ToolResult({
+  tool,
+  status,
+  children,
+  collapsed = false,
+  onToggle,
+  error,
+  onApprove,
+  onDeny,
+  className
+}) {
+  const showApprovalButtons = status === "approval-required" && (onApprove || onDeny);
+  const isAnimating = ["streaming", "running"].includes(status);
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: cn(
+        "my-4 rounded-lg border overflow-hidden",
+        statusColors2[status],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs11(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2 px-4 py-2",
+              onToggle && "cursor-pointer hover:bg-black/5"
+            ),
+            onClick: onToggle,
+            children: [
+              /* @__PURE__ */ jsx11("span", { className: "text-lg", children: statusIcons[status] }),
+              /* @__PURE__ */ jsx11("span", { className: "font-mono text-sm font-medium", children: tool }),
+              /* @__PURE__ */ jsx11("span", { className: cn("text-xs", isAnimating && "animate-pulse"), children: statusLabels[status] }),
+              onToggle && /* @__PURE__ */ jsx11("span", { className: "ml-auto text-xs", children: collapsed ? "\u25B6" : "\u25BC" })
+            ]
+          }
+        ),
+        showApprovalButtons && /* @__PURE__ */ jsxs11("div", { className: "flex gap-2 px-4 py-2 bg-white border-t border-inherit", children: [
+          onApprove && /* @__PURE__ */ jsx11(
+            "button",
+            {
+              onClick: onApprove,
+              className: "px-3 py-1.5 text-sm font-medium text-white bg-green-600 rounded-md hover:bg-green-700 transition-colors",
+              children: "Approve"
+            }
+          ),
+          onDeny && /* @__PURE__ */ jsx11(
+            "button",
+            {
+              onClick: () => onDeny(),
+              className: "px-3 py-1.5 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 transition-colors",
+              children: "Deny"
+            }
+          )
+        ] }),
+        !collapsed && (children || error) && /* @__PURE__ */ jsx11("div", { className: "px-4 py-3 bg-white border-t border-inherit", children: error ? /* @__PURE__ */ jsx11("div", { className: "text-sm text-red-600 font-mono", children: error }) : /* @__PURE__ */ jsx11("div", { className: "text-sm", children }) })
+      ]
+    }
+  );
+}
+
+// src/components/MessageList.tsx
+import * as React10 from "react";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+function MessageList({
+  messages,
+  renderMessage,
+  autoScroll = true,
+  throttleMs,
+  className
+}) {
+  const containerRef = React10.useRef(null);
+  const bottomRef = React10.useRef(null);
+  const scrollToBottom = React10.useCallback(() => {
+    if (bottomRef.current) {
+      bottomRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, []);
+  const throttledScroll = React10.useMemo(
+    () => throttleMs && throttleMs > 0 ? throttle(scrollToBottom, throttleMs) : scrollToBottom,
+    [scrollToBottom, throttleMs]
+  );
+  React10.useEffect(() => {
+    if (autoScroll) {
+      throttledScroll();
+    }
+  }, [messages, autoScroll, throttledScroll]);
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "flex flex-col overflow-y-auto p-4",
+        className
+      ),
+      children: [
+        messages.map(
+          (message) => renderMessage ? /* @__PURE__ */ jsx12(React10.Fragment, { children: renderMessage(message) }, message.id) : /* @__PURE__ */ jsx12(DefaultMessage, { message }, message.id)
+        ),
+        /* @__PURE__ */ jsx12("div", { ref: bottomRef })
+      ]
+    }
+  );
+}
+function DefaultMessage({ message }) {
+  return /* @__PURE__ */ jsxs12(ChatMessage, { role: message.role, children: [
+    /* @__PURE__ */ jsx12(ChatMessageAvatar, { src: message.avatar, name: message.name }),
+    /* @__PURE__ */ jsxs12(ChatMessageContent, { name: message.name, children: [
+      message.content,
+      message.timestamp && /* @__PURE__ */ jsx12(ChatMessageTimestamp, { time: message.timestamp })
+    ] })
+  ] });
+}
+
+// src/components/SourceBlock.tsx
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+function SourceBlock({
+  source,
+  showExcerpt = true,
+  className
+}) {
+  const isUrl = source.sourceType === "url";
+  const Icon = isUrl ? LinkIcon : DocumentIcon;
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      className: cn(
+        "my-2 rounded-lg border border-gray-200 bg-gray-50 overflow-hidden",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs13("div", { className: "flex items-start gap-3 p-3", children: [
+        /* @__PURE__ */ jsx13("div", { className: "flex-shrink-0 w-8 h-8 rounded-md bg-white border border-gray-200 flex items-center justify-center", children: /* @__PURE__ */ jsx13(Icon, { className: "w-4 h-4 text-gray-500" }) }),
+        /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
+          isUrl && source.url ? /* @__PURE__ */ jsx13(
+            "a",
+            {
+              href: source.url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "text-sm font-medium text-blue-600 hover:text-blue-800 hover:underline truncate block",
+              children: source.title
+            }
+          ) : /* @__PURE__ */ jsx13("span", { className: "text-sm font-medium text-gray-900 truncate block", children: source.title }),
+          /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 mt-0.5 text-xs text-gray-500", children: [
+            source.filename && /* @__PURE__ */ jsx13("span", { className: "truncate", children: source.filename }),
+            source.mediaType && /* @__PURE__ */ jsx13("span", { className: "px-1.5 py-0.5 bg-gray-200 rounded text-gray-600", children: formatMediaType(source.mediaType) }),
+            isUrl && source.url && /* @__PURE__ */ jsx13("span", { className: "truncate", children: new URL(source.url).hostname })
+          ] }),
+          showExcerpt && source.excerpt && /* @__PURE__ */ jsx13("p", { className: "mt-2 text-xs text-gray-600 line-clamp-2", children: source.excerpt })
+        ] })
+      ] })
+    }
+  );
+}
+function SourceCitation({
+  source,
+  index,
+  className
+}) {
+  const isUrl = source.sourceType === "url";
+  if (isUrl && source.url) {
+    return /* @__PURE__ */ jsxs13(
+      "a",
+      {
+        href: source.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: cn(
+          "inline-flex items-center gap-1 px-1.5 py-0.5 text-xs rounded",
+          "bg-blue-100 text-blue-700 hover:bg-blue-200 transition-colors",
+          className
+        ),
+        children: [
+          index !== void 0 && /* @__PURE__ */ jsxs13("span", { className: "font-medium", children: [
+            "[",
+            index + 1,
+            "]"
+          ] }),
+          /* @__PURE__ */ jsx13("span", { className: "truncate max-w-[150px]", children: source.title })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs13(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1 px-1.5 py-0.5 text-xs rounded",
+        "bg-gray-100 text-gray-700",
+        className
+      ),
+      children: [
+        index !== void 0 && /* @__PURE__ */ jsxs13("span", { className: "font-medium", children: [
+          "[",
+          index + 1,
+          "]"
+        ] }),
+        /* @__PURE__ */ jsx13("span", { className: "truncate max-w-[150px]", children: source.title })
+      ]
+    }
+  );
+}
+function SourceList({
+  sources,
+  title = "Sources",
+  className
+}) {
+  if (sources.length === 0) return null;
+  return /* @__PURE__ */ jsxs13("div", { className: cn("mt-4 pt-4 border-t border-gray-200", className), children: [
+    /* @__PURE__ */ jsx13("h4", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-2", children: title }),
+    /* @__PURE__ */ jsx13("div", { className: "space-y-2", children: sources.map((source, index) => /* @__PURE__ */ jsx13(SourceBlock, { source, showExcerpt: false }, source.sourceId)) })
+  ] });
+}
+function formatMediaType(mediaType) {
+  const typeMap = {
+    "application/pdf": "PDF",
+    "application/msword": "DOC",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
+    "text/plain": "TXT",
+    "text/markdown": "MD",
+    "text/html": "HTML",
+    "application/json": "JSON"
+  };
+  return typeMap[mediaType] || mediaType.split("/").pop()?.toUpperCase() || "FILE";
+}
+function LinkIcon({ className }) {
+  return /* @__PURE__ */ jsx13(
+    "svg",
+    {
+      className,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: /* @__PURE__ */ jsx13(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+        }
+      )
+    }
+  );
+}
+function DocumentIcon({ className }) {
+  return /* @__PURE__ */ jsx13(
+    "svg",
+    {
+      className,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: /* @__PURE__ */ jsx13(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+        }
+      )
+    }
+  );
+}
+
+// src/components/ChatWindow.tsx
+import * as React11 from "react";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+var ChatWindowContext = React11.createContext(null);
+function useChatWindowContext() {
+  const context = React11.useContext(ChatWindowContext);
+  if (!context) {
+    throw new Error("ChatWindow components must be used within <ChatWindow>");
+  }
+  return context;
+}
+var ChatWindow = React11.forwardRef(
+  ({ agent = null, status = "idle", className, children, ...props }, ref) => {
+    const contextValue = { status, agent };
+    return /* @__PURE__ */ jsx14(ChatWindowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx14(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col h-full bg-white", className),
+        "data-status": status,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ChatWindow.displayName = "ChatWindow";
+var ChatWindowHeader = React11.forwardRef(
+  ({ agent: agentProp, className, children, ...props }, ref) => {
+    const { agent: contextAgent } = useChatWindowContext();
+    const agent = agentProp ?? contextAgent;
+    return /* @__PURE__ */ jsx14(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center gap-3 px-4 py-3 border-b border-gray-200",
+          "flex-shrink-0",
+          className
+        ),
+        ...props,
+        children: children ?? /* @__PURE__ */ jsx14(Fragment4, { children: agent && /* @__PURE__ */ jsxs14(Fragment4, { children: [
+          /* @__PURE__ */ jsx14(ChatWindowHeaderAvatar, { agent }),
+          /* @__PURE__ */ jsx14(ChatWindowHeaderInfo, { agent })
+        ] }) })
+      }
+    );
+  }
+);
+ChatWindowHeader.displayName = "ChatWindowHeader";
+var ChatWindowHeaderAvatar = React11.forwardRef(
+  ({ agent, className, ...props }, ref) => /* @__PURE__ */ jsx14("div", { ref, className: cn("flex-shrink-0", className), ...props, children: /* @__PURE__ */ jsxs14(Avatar, { size: "md", status: agent.status === "online" ? "idle" : void 0, children: [
+    agent.avatar && /* @__PURE__ */ jsx14(AvatarImage, { src: agent.avatar, alt: agent.name }),
+    /* @__PURE__ */ jsx14(AvatarFallback, { variant: "secondary", children: agent.name.charAt(0).toUpperCase() })
+  ] }) })
+);
+ChatWindowHeaderAvatar.displayName = "ChatWindowHeaderAvatar";
+var statusTextMap = {
+  online: "\u5728\u7EBF",
+  offline: "\u79BB\u7EBF",
+  busy: "\u5FD9\u788C"
+};
+var ChatWindowHeaderInfo = React11.forwardRef(
+  ({ agent, className, ...props }, ref) => /* @__PURE__ */ jsxs14("div", { ref, className: cn("flex-1 min-w-0", className), ...props, children: [
+    /* @__PURE__ */ jsx14("h2", { className: "font-semibold text-gray-900 truncate", children: agent.name }),
+    agent.description && /* @__PURE__ */ jsx14("p", { className: "text-sm text-gray-500 truncate", children: agent.description }),
+    agent.status && !agent.description && /* @__PURE__ */ jsx14(
+      "span",
+      {
+        className: cn(
+          "text-xs",
+          agent.status === "online" && "text-green-500",
+          agent.status === "offline" && "text-gray-400",
+          agent.status === "busy" && "text-orange-500"
+        ),
+        children: statusTextMap[agent.status]
+      }
+    )
+  ] })
+);
+ChatWindowHeaderInfo.displayName = "ChatWindowHeaderInfo";
+var ChatWindowHeaderActions = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx14("div", { ref, className: cn("flex items-center gap-1", className), ...props, children }));
+ChatWindowHeaderActions.displayName = "ChatWindowHeaderActions";
+var ChatWindowMessages = React11.forwardRef(
+  ({ autoScroll = true, throttleMs = 50, className, children, ...props }, ref) => {
+    const bottomRef = React11.useRef(null);
+    React11.useEffect(() => {
+      if (autoScroll && bottomRef.current) {
+        bottomRef.current.scrollIntoView({ behavior: "smooth" });
+      }
+    }, [children, autoScroll]);
+    return /* @__PURE__ */ jsxs14(
+      "div",
+      {
+        ref,
+        className: cn("flex-1 overflow-y-auto p-4 space-y-4", className),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx14("div", { ref: bottomRef })
+        ]
+      }
+    );
+  }
+);
+ChatWindowMessages.displayName = "ChatWindowMessages";
+var ChatWindowInput = React11.forwardRef(
+  ({ onSend, value, onValueChange, disabled, placeholder, className, children, ...props }, ref) => {
+    const { status } = useChatWindowContext();
+    const [internalValue, setInternalValue] = React11.useState("");
+    const inputValue = value ?? internalValue;
+    const setInputValue = onValueChange ?? setInternalValue;
+    const isDisabled = disabled || status === "streaming";
+    const handleSubmit = () => {
+      if (inputValue.trim() && onSend) {
+        onSend(inputValue.trim());
+        setInternalValue("");
+        if (onValueChange) {
+          onValueChange("");
+        }
+      }
+    };
+    if (children) {
+      return /* @__PURE__ */ jsx14(
+        "div",
+        {
+          ref,
+          className: cn("flex-shrink-0 border-t border-gray-200 p-4", className),
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx14(
+      "div",
+      {
+        ref,
+        className: cn("flex-shrink-0 border-t border-gray-200 p-4", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs14(ChatInput, { onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ jsx14(
+            ChatInputTextarea,
+            {
+              value: inputValue,
+              onChange: setInputValue,
+              placeholder: placeholder ?? "\u8F93\u5165\u6D88\u606F...",
+              disabled: isDisabled
+            }
+          ),
+          /* @__PURE__ */ jsxs14(ChatInputToolbar, { children: [
+            /* @__PURE__ */ jsx14(ChatInputTools, {}),
+            /* @__PURE__ */ jsx14(
+              ChatInputSubmit,
+              {
+                status: status === "streaming" ? "streaming" : "idle",
+                disabled: !inputValue.trim()
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+);
+ChatWindowInput.displayName = "ChatWindowInput";
+var ChatWindowEmpty = React11.forwardRef(
+  ({ icon, title = "\u5F00\u59CB\u65B0\u5BF9\u8BDD", description = "\u5411 AI \u52A9\u624B\u63D0\u95EE\u4EFB\u4F55\u95EE\u9898", className, children, ...props }, ref) => /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex-1 flex flex-col items-center justify-center p-8 text-center",
+        className
+      ),
+      ...props,
+      children: [
+        icon ?? /* @__PURE__ */ jsx14("div", { className: "w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx14(
+          "svg",
+          {
+            className: "w-8 h-8 text-gray-400",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: /* @__PURE__ */ jsx14(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 1.5,
+                d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx14("h3", { className: "text-lg font-medium text-gray-900", children: title }),
+        description && /* @__PURE__ */ jsx14("p", { className: "text-sm text-gray-500 mt-1", children: description }),
+        children
+      ]
+    }
+  )
+);
+ChatWindowEmpty.displayName = "ChatWindowEmpty";
+
+// src/components/ChatList.tsx
+import * as React12 from "react";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+var ChatListContext = React12.createContext(null);
+function useChatListContext() {
+  const context = React12.useContext(ChatListContext);
+  if (!context) {
+    throw new Error("ChatList components must be used within <ChatList>");
+  }
+  return context;
+}
+var ChatList = React12.forwardRef(
+  ({ activeId = null, onSelect, className, children, ...props }, ref) => {
+    const contextValue = {
+      activeId,
+      onSelect: onSelect ?? (() => {
+      })
+    };
+    return /* @__PURE__ */ jsx15(ChatListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx15(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col h-full bg-white border-r border-gray-200",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ChatList.displayName = "ChatList";
+var ChatListHeader = React12.forwardRef(
+  ({ title = "\u4F1A\u8BDD", className, children, ...props }, ref) => /* @__PURE__ */ jsx15(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex items-center justify-between px-4 py-3 border-b border-gray-200",
+        "flex-shrink-0",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx15("h2", { className: "font-semibold text-gray-900", children: title })
+    }
+  )
+);
+ChatListHeader.displayName = "ChatListHeader";
+var ChatListSearch = React12.forwardRef(
+  ({ placeholder = "\u641C\u7D22\u4F1A\u8BDD...", value, onChange, className, ...props }, ref) => /* @__PURE__ */ jsx15("div", { className: cn("p-3", className), children: /* @__PURE__ */ jsxs15("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx15(
+      "svg",
+      {
+        className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        children: /* @__PURE__ */ jsx15(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx15(
+      "input",
+      {
+        ref,
+        type: "text",
+        value,
+        onChange: (e) => onChange?.(e.target.value),
+        placeholder,
+        className: cn(
+          "w-full pl-9 pr-3 py-2 text-sm rounded-lg",
+          "border border-gray-200 bg-gray-50",
+          "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
+          "placeholder:text-gray-400"
+        ),
+        ...props
+      }
+    )
+  ] }) })
+);
+ChatListSearch.displayName = "ChatListSearch";
+var ChatListGroup = React12.forwardRef(
+  ({ label, className, children, ...props }, ref) => /* @__PURE__ */ jsxs15("div", { ref, className: cn("py-1", className), ...props, children: [
+    label && /* @__PURE__ */ jsx15("div", { className: "px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider", children: label }),
+    children
+  ] })
+);
+ChatListGroup.displayName = "ChatListGroup";
+var ChatListItem = React12.forwardRef(
+  ({ conversation, className, children, ...props }, ref) => {
+    const { activeId, onSelect } = useChatListContext();
+    const isActive = activeId === conversation.id;
+    return /* @__PURE__ */ jsx15(
+      "div",
+      {
+        ref,
+        role: "button",
+        tabIndex: 0,
+        onClick: () => onSelect(conversation.id),
+        onKeyDown: (e) => e.key === "Enter" && onSelect(conversation.id),
+        className: cn(
+          "flex items-center gap-3 px-4 py-3 cursor-pointer transition-colors",
+          "hover:bg-gray-50",
+          isActive && "bg-blue-50 hover:bg-blue-50",
+          className
+        ),
+        "data-active": isActive,
+        ...props,
+        children: children ?? /* @__PURE__ */ jsxs15(Fragment5, { children: [
+          /* @__PURE__ */ jsx15(ChatListItemAvatar, { agent: conversation.agent }),
+          /* @__PURE__ */ jsx15(ChatListItemContent, { conversation }),
+          conversation.unreadCount && conversation.unreadCount > 0 && /* @__PURE__ */ jsx15(ChatListItemBadge, { count: conversation.unreadCount })
+        ] })
+      }
+    );
+  }
+);
+ChatListItem.displayName = "ChatListItem";
+var ChatListItemAvatar = React12.forwardRef(
+  ({ agent, className, ...props }, ref) => /* @__PURE__ */ jsx15("div", { ref, className: cn("flex-shrink-0", className), ...props, children: /* @__PURE__ */ jsxs15(Avatar, { size: "sm", children: [
+    agent?.avatar && /* @__PURE__ */ jsx15(AvatarImage, { src: agent.avatar, alt: agent.name }),
+    /* @__PURE__ */ jsx15(AvatarFallback, { variant: "secondary", children: agent?.name?.charAt(0).toUpperCase() || "A" })
+  ] }) })
+);
+ChatListItemAvatar.displayName = "ChatListItemAvatar";
+var ChatListItemContent = React12.forwardRef(
+  ({ conversation, className, ...props }, ref) => /* @__PURE__ */ jsxs15("div", { ref, className: cn("flex-1 min-w-0", className), ...props, children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx15("span", { className: "font-medium text-gray-900 truncate", children: conversation.title }),
+      conversation.lastActiveAt && /* @__PURE__ */ jsx15("span", { className: "text-xs text-gray-400 flex-shrink-0 ml-2", children: formatRelativeTime(conversation.lastActiveAt) })
+    ] }),
+    conversation.lastMessage && /* @__PURE__ */ jsx15("p", { className: "text-sm text-gray-500 truncate", children: conversation.lastMessage })
+  ] })
+);
+ChatListItemContent.displayName = "ChatListItemContent";
+var ChatListItemBadge = React12.forwardRef(
+  ({ count, className, ...props }, ref) => /* @__PURE__ */ jsx15(
+    "span",
+    {
+      ref,
+      className: cn(
+        "flex-shrink-0 min-w-[20px] h-5 px-1.5 rounded-full",
+        "bg-blue-500 text-white text-xs font-medium",
+        "flex items-center justify-center",
+        className
+      ),
+      ...props,
+      children: count > 99 ? "99+" : count
+    }
+  )
+);
+ChatListItemBadge.displayName = "ChatListItemBadge";
+var ChatListEmpty = React12.forwardRef(
+  ({ icon, title = "\u6682\u65E0\u4F1A\u8BDD", description, className, children, ...props }, ref) => /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col items-center justify-center py-12 px-4", className),
+      ...props,
+      children: [
+        icon ?? /* @__PURE__ */ jsx15(
+          "svg",
+          {
+            className: "w-12 h-12 text-gray-300 mb-4",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: /* @__PURE__ */ jsx15(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 1.5,
+                d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx15("p", { className: "text-gray-900 font-medium", children: title }),
+        description && /* @__PURE__ */ jsx15("p", { className: "text-sm text-gray-500 mt-1", children: description }),
+        children
+      ]
+    }
+  )
+);
+ChatListEmpty.displayName = "ChatListEmpty";
+
+// src/components/AgentChat.tsx
+import * as React13 from "react";
+import {
+  isTextBlock,
+  isThinkingBlock,
+  isToolBlock,
+  isSourceBlock,
+  isErrorBlock
+} from "@uix-ai/core";
+import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+function DefaultBlockRenderer({
+  block
+}) {
+  if (isTextBlock(block)) {
+    const content = block.content;
+    return /* @__PURE__ */ jsxs16("div", { className: "whitespace-pre-wrap break-words", children: [
+      content.text,
+      block.status === "streaming" && /* @__PURE__ */ jsx16("span", { className: "inline-block w-1.5 h-4 bg-gray-400 ml-0.5 animate-pulse align-text-bottom" })
+    ] });
+  }
+  if (isThinkingBlock(block)) {
+    const content = block.content;
+    if (block.status === "streaming") {
+      return /* @__PURE__ */ jsx16(ThinkingIndicator, { label: content.reasoning || void 0 });
+    }
+    if (content.reasoning) {
+      return /* @__PURE__ */ jsxs16("details", { className: "text-sm text-gray-500", children: [
+        /* @__PURE__ */ jsx16("summary", { className: "cursor-pointer hover:text-gray-700", children: "\u601D\u8003\u8FC7\u7A0B" }),
+        /* @__PURE__ */ jsx16("div", { className: "mt-1 pl-3 border-l-2 border-gray-200 whitespace-pre-wrap", children: content.reasoning })
+      ] });
+    }
+    return null;
+  }
+  if (isToolBlock(block)) {
+    const content = block.content;
+    return /* @__PURE__ */ jsx16(
+      ToolResult,
+      {
+        tool: content.name,
+        status: content.status,
+        error: content.error,
+        children: content.output != null && /* @__PURE__ */ jsx16("pre", { className: "text-xs overflow-x-auto", children: typeof content.output === "string" ? content.output : JSON.stringify(content.output, null, 2) })
+      }
+    );
+  }
+  if (isSourceBlock(block)) {
+    const content = block.content;
+    return /* @__PURE__ */ jsx16(SourceBlock, { source: content });
+  }
+  if (isErrorBlock(block)) {
+    const content = block.content;
+    return /* @__PURE__ */ jsx16("div", { className: "text-sm text-red-600 bg-red-50 rounded px-3 py-2", children: content.message });
+  }
+  return null;
+}
+function ConversationMessage({
+  conversation,
+  renderBlock,
+  onToolApprove,
+  onToolDeny
+}) {
+  const sourceBlocks = [];
+  const contentBlocks = [];
+  for (const block of conversation.blocks) {
+    if (isSourceBlock(block)) {
+      sourceBlocks.push(block);
+    } else {
+      contentBlocks.push(block);
+    }
+  }
+  return /* @__PURE__ */ jsxs16(ChatMessage, { role: conversation.role, status: conversation.status === "streaming" ? "streaming" : "complete", children: [
+    /* @__PURE__ */ jsx16(
+      ChatMessageAvatar,
+      {
+        name: conversation.role === "user" ? "\u7528\u6237" : "AI"
+      }
+    ),
+    /* @__PURE__ */ jsxs16(ChatMessageContent, { children: [
+      /* @__PURE__ */ jsxs16("div", { className: "space-y-2", children: [
+        contentBlocks.map((block) => {
+          if (renderBlock) {
+            const custom = renderBlock(block, conversation);
+            if (custom !== null) {
+              return /* @__PURE__ */ jsx16(React13.Fragment, { children: custom }, block.id);
+            }
+          }
+          return /* @__PURE__ */ jsx16(DefaultBlockRenderer, { block }, block.id);
+        }),
+        sourceBlocks.length > 0 && /* @__PURE__ */ jsx16(
+          SourceList,
+          {
+            sources: sourceBlocks.map((block) => block.content)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx16(ChatMessageTimestamp, { time: new Date(conversation.timestamp) })
+    ] })
+  ] });
+}
+var AgentChat = React13.forwardRef(
+  ({
+    conversations,
+    agent,
+    status = "idle",
+    onSend,
+    onStop,
+    onRetry,
+    onToolApprove,
+    onToolDeny,
+    placeholder,
+    emptyState,
+    renderBlock,
+    showHeader,
+    autoScroll = true,
+    className,
+    ...props
+  }, ref) => {
+    const shouldShowHeader = showHeader ?? !!agent;
+    return /* @__PURE__ */ jsxs16(
+      ChatWindow,
+      {
+        ref,
+        agent,
+        status,
+        className: cn("h-full", className),
+        ...props,
+        children: [
+          shouldShowHeader && /* @__PURE__ */ jsx16(ChatWindowHeader, {}),
+          conversations.length === 0 ? /* @__PURE__ */ jsx16(
+            ChatWindowEmpty,
+            {
+              icon: emptyState?.icon,
+              title: emptyState?.title,
+              description: emptyState?.description
+            }
+          ) : /* @__PURE__ */ jsx16(ChatWindowMessages, { autoScroll, children: conversations.map((conversation) => /* @__PURE__ */ jsx16(
+            ConversationMessage,
+            {
+              conversation,
+              renderBlock,
+              onToolApprove,
+              onToolDeny
+            },
+            conversation.id
+          )) }),
+          /* @__PURE__ */ jsx16(
+            ChatWindowInput,
+            {
+              onSend,
+              placeholder
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AgentChat.displayName = "AgentChat";
+export {
+  AgentAvatar,
+  AgentChat,
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage,
+  AvatarStatusIndicator,
+  BounceAnimation,
+  ChatBubble,
+  ChatInput,
+  ChatInputButton,
+  ChatInputSubmit,
+  ChatInputTextarea,
+  ChatInputToolbar,
+  ChatInputTools,
+  ChatList,
+  ChatListEmpty,
+  ChatListGroup,
+  ChatListHeader,
+  ChatListItem,
+  ChatListItemAvatar,
+  ChatListItemBadge,
+  ChatListItemContent,
+  ChatListSearch,
+  ChatMessage,
+  ChatMessageAvatar,
+  ChatMessageContent,
+  ChatMessageError,
+  ChatMessageSimple,
+  ChatMessageThinking,
+  ChatMessageTimestamp,
+  ChatWindow,
+  ChatWindowEmpty,
+  ChatWindowHeader,
+  ChatWindowHeaderActions,
+  ChatWindowHeaderAvatar,
+  ChatWindowHeaderInfo,
+  ChatWindowInput,
+  ChatWindowMessages,
+  DotsAnimation,
+  MentionItem,
+  MentionPopover,
+  MessageAvatar,
+  MessageList,
+  PulseAnimation,
+  SourceBlock,
+  SourceCitation,
+  SourceList,
+  SpinnerAnimation,
+  StreamCursor,
+  StreamText,
+  ThinkingIndicator,
+  ToolResult,
+  WaveAnimation,
+  sizeClasses as avatarSizeClasses,
+  variantClasses as avatarVariantClasses,
+  cn,
+  formatRelativeTime,
+  presenceColors,
+  roleColors,
+  roleSymbols,
+  roleToVariant,
+  statusAnimations,
+  useAsyncStream,
+  useChatListContext,
+  useChatMessageContext,
+  useChatWindowContext,
+  useImageLoadingStatus,
+  useMentionContext,
+  useMentionPopover,
+  useTypingAnimation
+};
+//# sourceMappingURL=index.js.map