@yourgpt/copilot-sdk 0.1.1 → 1.0.1

package/dist/ui/index.js

@@ -1,5 +1,5 @@
-import { useCopilot } from '../chunk-FO75W5UI.js';
-import '../chunk-QWQELTEB.js';
+import { useCopilot, useThreadManager } from '../chunk-XAVZZVUL.js';
+import { createServerAdapter } from '../chunk-QSEGNATZ.js';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
@@ -16,6 +16,7 @@ import { useStickToBottomContext, StickToBottom as StickToBottom$1 } from 'use-s
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
 
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -865,12 +866,13 @@ var MessageAvatar = ({
   src,
   alt,
   fallback,
+  fallbackIcon,
   delayMs,
   className
 }) => {
   return /* @__PURE__ */ jsxs(Avatar, { className: cn("size-7 shrink-0", className), children: [
     /* @__PURE__ */ jsx(AvatarImage, { src, alt }),
-    fallback && /* @__PURE__ */ jsx(AvatarFallback, { delayMs, children: fallback })
+    /* @__PURE__ */ jsx(AvatarFallback, { delayMs, children: fallbackIcon || fallback })
   ] });
 };
 var proseSizeMap = {
@@ -1904,6 +1906,27 @@ function AlertTriangleIcon({ className }) {
     }
   );
 }
+function ArrowUpRightIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M7 7h10v10" }),
+        /* @__PURE__ */ jsx("path", { d: "M7 17 17 7" })
+      ]
+    }
+  );
+}
 var ConfirmationContext = React8.createContext(null);
 function useConfirmationContext() {
   const context = React8.useContext(ConfirmationContext);
@@ -2976,173 +2999,722 @@ function SimpleModelSelector({
     }
   );
 }
-function ChatHeader({ title, onClose, className }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
+function Popover({ children, open, defaultOpen, onOpenChange }) {
+  return /* @__PURE__ */ jsx(
+    Popover$1.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      children
+    }
+  );
+}
+function PopoverTrigger({
+  children,
+  asChild,
+  className,
+  ...props
+}) {
+  if (asChild && React8.isValidElement(children)) {
+    return /* @__PURE__ */ jsx(Popover$1.Trigger, { render: children, className, ...props });
+  }
+  return /* @__PURE__ */ jsx(Popover$1.Trigger, { className, ...props, children });
+}
+function PopoverContent({
+  children,
+  className,
+  side = "bottom",
+  align = "start",
+  sideOffset = 4
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { side, align, sideOffset, children: /* @__PURE__ */ jsx(
+    Popover$1.Popup,
     {
       className: cn(
-        "flex items-center justify-between border-b px-4 py-3",
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       ),
+      children
+    }
+  ) }) });
+}
+function formatDate(date) {
+  const now = /* @__PURE__ */ new Date();
+  const diff = now.getTime() - date.getTime();
+  if (diff < 60 * 1e3) {
+    return "Just now";
+  }
+  if (diff < 60 * 60 * 1e3) {
+    const mins = Math.floor(diff / (60 * 1e3));
+    return `${mins}m ago`;
+  }
+  if (diff < 24 * 60 * 60 * 1e3) {
+    const hours = Math.floor(diff / (60 * 60 * 1e3));
+    return `${hours}h ago`;
+  }
+  if (diff < 7 * 24 * 60 * 60 * 1e3) {
+    const days = Math.floor(diff / (24 * 60 * 60 * 1e3));
+    return `${days}d ago`;
+  }
+  return date.toLocaleDateString();
+}
+function ChevronIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: cn("w-4 h-4", className),
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+    }
+  );
+}
+function PlusIcon2({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: cn("w-4 h-4", className),
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4v16m8-8H4" })
+    }
+  );
+}
+function CheckIcon2({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: cn("w-4 h-4", className),
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+    }
+  );
+}
+function TrashIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cn("w-4 h-4", className),
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
       children: [
-        /* @__PURE__ */ jsx("h2", { className: "font-semibold text-foreground", children: title || "Chat" }),
-        onClose && /* @__PURE__ */ jsx(
-          "button",
+        /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 6h18" }),
+        /* @__PURE__ */ jsx(
+          "path",
           {
-            type: "button",
-            onClick: onClose,
-            className: "rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-            "aria-label": "Close chat",
-            children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-5 w-5" })
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
           }
         )
       ]
     }
   );
 }
-function Suggestions({
-  suggestions,
-  onSuggestionClick,
-  className
-}) {
-  if (!suggestions.length) return null;
-  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-2 px-4 py-2", className), children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick: () => onSuggestionClick?.(suggestion),
-      className: "inline-flex items-center rounded-full border bg-background px-3 py-1.5 text-sm transition-colors hover:bg-muted",
-      children: suggestion
-    },
-    index
-  )) });
-}
-function DefaultMessage({
-  message,
-  userAvatar,
-  assistantAvatar,
-  showUserAvatar = false,
-  userMessageClassName,
-  assistantMessageClassName,
-  size = "sm",
-  isLastMessage = false,
-  isLoading = false,
-  registeredTools,
-  toolRenderers,
-  onApproveToolExecution,
-  onRejectToolExecution,
-  showFollowUps = true,
-  onFollowUpClick,
-  followUpClassName,
-  followUpButtonClassName
+function ThreadPicker({
+  value,
+  threads,
+  onSelect,
+  onDeleteThread,
+  onNewThread,
+  placeholder = "Select conversation...",
+  newThreadLabel = "New conversation",
+  disabled = false,
+  loading = false,
+  size = "md",
+  className,
+  buttonClassName,
+  dropdownClassName,
+  itemClassName,
+  newButtonClassName
 }) {
-  const isUser = message.role === "user";
-  const isStreaming = isLastMessage && isLoading;
-  const { cleanContent, followUps } = React8.useMemo(() => {
-    if (isUser || !message.content) {
-      return { cleanContent: message.content, followUps: [] };
-    }
-    return parseFollowUps(message.content);
-  }, [message.content, isUser]);
-  const shouldShowFollowUps = showFollowUps && !isUser && isLastMessage && !isLoading && followUps.length > 0 && onFollowUpClick;
-  if (isUser) {
-    const hasAttachments = message.attachments && message.attachments.length > 0;
-    return /* @__PURE__ */ jsxs(
-      Message,
+  const [isOpen, setIsOpen] = React8.useState(false);
+  const selectedThread = React8.useMemo(() => {
+    if (!value) return null;
+    return threads.find((t) => t.id === value) ?? null;
+  }, [value, threads]);
+  const handleSelect = (threadId) => {
+    onSelect?.(threadId);
+    setIsOpen(false);
+  };
+  const handleNewThread = () => {
+    onNewThread?.();
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsxs(
+      PopoverTrigger,
       {
+        disabled: disabled || loading,
         className: cn(
-          "flex gap-2",
-          showUserAvatar ? "justify-end" : "justify-end"
+          "flex items-center gap-1 w-full",
+          disabled && "opacity-50 cursor-not-allowed",
+          className,
+          buttonClassName
         ),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end max-w-[80%]", children: [
-            message.content && /* @__PURE__ */ jsx(
-              MessageContent,
-              {
-                className: cn(
-                  "rounded-lg px-4 py-2 bg-primary text-primary-foreground",
-                  userMessageClassName
-                ),
-                size,
-                children: message.content
-              }
-            ),
-            hasAttachments && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2 justify-end", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsx(AttachmentPreview, { attachment }, index)) })
-          ] }),
-          showUserAvatar && /* @__PURE__ */ jsx(
-            MessageAvatar,
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 text-xs ", children: loading ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Loading..." }) : selectedThread ? /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-muted-foreground hover:text-foreground", children: selectedThread.title || "Untitled conversation" }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) }),
+          /* @__PURE__ */ jsx(
+            ChevronIcon,
             {
-              src: userAvatar.src || "",
-              alt: "User",
-              fallback: userAvatar.fallback
+              className: cn(
+                "flex-shrink-0 size-3 text-muted-foreground transition-transform",
+                isOpen && "rotate-180"
+              )
             }
           )
         ]
       }
-    );
-  }
-  const pendingApprovalTools = message.toolExecutions?.filter(
-    (exec) => exec.approvalStatus === "required"
-  );
-  const completedTools = message.toolExecutions?.filter(
-    (exec) => exec.approvalStatus !== "required"
-  );
-  const hasCustomRender = (toolName) => {
-    if (toolRenderers?.[toolName]) return true;
-    const toolDef = registeredTools?.find((t) => t.name === toolName);
-    if (toolDef?.render) return true;
-    return false;
-  };
-  const toolsWithCustomRender = completedTools?.filter(
-    (exec) => hasCustomRender(exec.name)
-  );
-  const toolsWithoutCustomRender = completedTools?.filter(
-    (exec) => !hasCustomRender(exec.name)
-  );
-  const toolSteps = toolsWithoutCustomRender?.map((exec) => ({
-    id: exec.id,
-    name: exec.name,
-    args: exec.args,
-    status: exec.status,
-    result: exec.result,
-    error: exec.error
-  }));
-  return /* @__PURE__ */ jsxs(Message, { className: "flex gap-2", children: [
-    /* @__PURE__ */ jsx(
-      MessageAvatar,
-      {
-        src: assistantAvatar.src || "",
-        alt: "Assistant",
-        fallback: assistantAvatar.fallback,
-        className: "bg-primary text-primary-foreground"
-      }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 max-w-[80%]", children: [
-      message.thinking && /* @__PURE__ */ jsx(
-        SimpleReasoning,
-        {
-          content: message.thinking,
-          isStreaming,
-          className: "mb-2"
-        }
-      ),
-      cleanContent?.trim() && /* @__PURE__ */ jsx(
-        MessageContent,
-        {
-          className: cn(
-            "rounded-lg px-4 py-2 bg-muted",
-            assistantMessageClassName
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        align: "start",
+        className: cn(
+          "w-[var(--anchor-width)] min-w-[250px] p-0 max-h-[300px] overflow-auto",
+          dropdownClassName
+        ),
+        children: [
+          onNewThread && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: handleNewThread,
+              className: cn(
+                "flex items-center gap-2 w-full px-2.5 py-1.5 text-left",
+                "hover:bg-accent hover:text-accent-foreground",
+                "focus:bg-accent focus:text-accent-foreground focus:outline-none",
+                "border-b",
+                newButtonClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsx(PlusIcon2, { className: "text-primary size-3" }),
+                /* @__PURE__ */ jsx("span", { className: "font-medium text-xs", children: newThreadLabel })
+              ]
+            }
           ),
-          markdown: true,
-          size,
-          children: cleanContent
-        }
-      ),
-      toolsWithCustomRender && toolsWithCustomRender.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2", children: toolsWithCustomRender.map((exec) => {
-        const Renderer = toolRenderers?.[exec.name];
-        if (Renderer) {
-          return /* @__PURE__ */ jsx(
-            Renderer,
+          threads.length > 0 ? threads.map((thread) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "group flex items-center gap-1 w-full px-2.5 py-1.5",
+                "hover:bg-accent hover:text-accent-foreground",
+                "focus-within:bg-accent focus-within:text-accent-foreground",
+                value === thread.id && "bg-accent",
+                itemClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleSelect(thread.id),
+                    className: "flex-1 flex flex-col gap-0.5 text-left focus:outline-none min-w-0",
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                        /* @__PURE__ */ jsx("span", { className: "font-medium text-xs truncate", children: thread.title || "Untitled conversation" }),
+                        value === thread.id && /* @__PURE__ */ jsx(CheckIcon2, { className: "flex-shrink-0 text-primary size-3" })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
+                        thread.preview && /* @__PURE__ */ jsx("span", { className: "truncate max-w-[180px]", children: thread.preview }),
+                        thread.preview && thread.updatedAt && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: "\xB7" }),
+                        thread.updatedAt && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: formatDate(thread.updatedAt) })
+                      ] })
+                    ]
+                  }
+                ),
+                onDeleteThread && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onDeleteThread(thread.id);
+                    },
+                    className: "flex-shrink-0 p-1 rounded opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-all focus:opacity-100 focus:outline-none",
+                    "aria-label": "Delete thread",
+                    children: /* @__PURE__ */ jsx(TrashIcon, { className: "size-3" })
+                  }
+                )
+              ]
+            },
+            thread.id
+          )) : /* @__PURE__ */ jsx("div", { className: "px-2.5 py-3 text-center text-xs text-muted-foreground", children: "No conversations yet" })
+        ]
+      }
+    )
+  ] });
+}
+function formatDate2(date) {
+  const now = /* @__PURE__ */ new Date();
+  const diff = now.getTime() - date.getTime();
+  if (diff < 60 * 1e3) {
+    return "Just now";
+  }
+  if (diff < 60 * 60 * 1e3) {
+    const mins = Math.floor(diff / (60 * 1e3));
+    return `${mins}m ago`;
+  }
+  if (diff < 24 * 60 * 60 * 1e3) {
+    const hours = Math.floor(diff / (60 * 60 * 1e3));
+    return `${hours}h ago`;
+  }
+  if (diff < 7 * 24 * 60 * 60 * 1e3) {
+    const days = Math.floor(diff / (24 * 60 * 60 * 1e3));
+    return `${days}d ago`;
+  }
+  return date.toLocaleDateString();
+}
+function TrashIcon2({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: cn("w-4 h-4", className),
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+        }
+      )
+    }
+  );
+}
+function PlusIcon3({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: cn("w-4 h-4", className),
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4v16m8-8H4" })
+    }
+  );
+}
+function MessageIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: cn("w-4 h-4", className),
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          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"
+        }
+      )
+    }
+  );
+}
+function ThreadCardSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: "p-3 rounded-lg border bg-card animate-pulse", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-full bg-muted" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-3/4 bg-muted rounded" }),
+      /* @__PURE__ */ jsx("div", { className: "h-3 w-1/2 bg-muted rounded" })
+    ] })
+  ] }) });
+}
+function ThreadCard({
+  thread,
+  selected = false,
+  onClick,
+  onDelete,
+  showDelete = true,
+  className
+}) {
+  const [isHovered, setIsHovered] = React8.useState(false);
+  const handleDelete = (e) => {
+    e.stopPropagation();
+    onDelete?.();
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      className: cn(
+        "w-full p-3 rounded-lg border bg-card text-left transition-colors",
+        "hover:bg-accent hover:border-accent-foreground/20",
+        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        selected && "bg-accent border-primary/50",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center",
+              selected ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
+            ),
+            children: /* @__PURE__ */ jsx(MessageIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("h3", { className: "font-medium text-sm truncate", children: thread.title || "Untitled conversation" }),
+            showDelete && isHovered && onDelete && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleDelete,
+                className: cn(
+                  "flex-shrink-0 p-1 rounded",
+                  "hover:bg-destructive/10 hover:text-destructive",
+                  "focus:outline-none focus:ring-2 focus:ring-destructive"
+                ),
+                "aria-label": "Delete conversation",
+                children: /* @__PURE__ */ jsx(TrashIcon2, { className: "w-3.5 h-3.5" })
+              }
+            )
+          ] }),
+          thread.preview && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate mt-0.5", children: thread.preview }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-muted-foreground", children: [
+            thread.messageCount !== void 0 && thread.messageCount > 0 && /* @__PURE__ */ jsxs("span", { children: [
+              thread.messageCount,
+              " messages"
+            ] }),
+            thread.messageCount !== void 0 && thread.messageCount > 0 && thread.updatedAt && /* @__PURE__ */ jsx("span", { children: "\xB7" }),
+            thread.updatedAt && /* @__PURE__ */ jsx("span", { children: formatDate2(thread.updatedAt) })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function ThreadList({
+  threads,
+  selectedId,
+  onSelect,
+  onDelete,
+  onNewThread,
+  newThreadLabel = "New conversation",
+  loading = false,
+  emptyText = "No conversations yet",
+  showDelete = true,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+    onNewThread && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onNewThread,
+        className: cn(
+          "flex items-center gap-2 p-3 rounded-lg border border-dashed",
+          "hover:bg-accent hover:border-accent-foreground/20",
+          "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+          "transition-colors"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center", children: /* @__PURE__ */ jsx(PlusIcon3, { className: "text-primary" }) }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: newThreadLabel })
+        ]
+      }
+    ),
+    loading && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ThreadCardSkeleton, {}),
+      /* @__PURE__ */ jsx(ThreadCardSkeleton, {}),
+      /* @__PURE__ */ jsx(ThreadCardSkeleton, {})
+    ] }),
+    !loading && threads.length > 0 && threads.map((thread) => /* @__PURE__ */ jsx(
+      ThreadCard,
+      {
+        thread,
+        selected: selectedId === thread.id,
+        onClick: () => onSelect?.(thread.id),
+        onDelete: () => onDelete?.(thread.id),
+        showDelete
+      },
+      thread.id
+    )),
+    !loading && threads.length === 0 && /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-sm text-muted-foreground", children: emptyText })
+  ] });
+}
+var CopilotSDKLogo = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: props.width || 170,
+    height: props.height || 170,
+    viewBox: "0 0 170 170",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    className: cn("w-auto h-[30px]", props.className),
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          opacity: 0.4,
+          d: "M108.379 0C111.143 0 113.538 1.91574 114.146 4.61243L118.392 23.4631C121.492 37.2253 132.239 47.9726 146.001 51.0727L164.852 55.319C167.549 55.9265 169.465 58.3218 169.465 61.0861C169.465 63.8504 167.549 66.2457 164.852 66.8532L146.001 71.0995C132.239 74.1995 121.492 84.9467 118.392 98.7088L114.146 117.56C113.538 120.257 111.143 122.172 108.379 122.172C105.614 122.172 103.219 120.257 102.611 117.56L98.3651 98.7088C95.2651 84.9467 84.5179 74.1995 70.7558 71.0995L51.9049 66.8532C49.2082 66.2457 47.2924 63.8504 47.2924 61.0861C47.2924 58.3218 49.2082 55.9265 51.9049 55.319L70.7558 51.0727C84.5179 47.9726 95.2651 37.2253 98.3651 23.4631L102.611 4.61243C103.219 1.91574 105.614 0 108.379 0Z",
+          fill: "#6352FF"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M45.3219 78.8207C48.0863 78.8207 50.4816 80.736 51.089 83.4333L54.1221 96.8982C56.1931 106.092 63.3728 113.272 72.5663 115.342L86.0313 118.375C88.7285 118.983 90.6439 121.378 90.6439 124.143C90.6439 126.907 88.7285 129.302 86.0313 129.91L72.5663 132.943C63.3728 135.014 56.1931 142.193 54.1221 151.387L51.089 164.852C50.4816 167.549 48.0863 169.465 45.3219 169.465C42.5576 169.465 40.1623 167.549 39.5549 164.852L36.5218 151.387C34.4507 142.193 27.271 135.014 18.0772 132.943L4.61243 129.91C1.91574 129.302 0 126.907 0 124.143C0 121.378 1.91574 118.983 4.61243 118.375L18.0772 115.342C27.271 113.272 34.4507 106.092 36.5218 96.8982L39.5549 83.4333C40.1623 80.736 42.5576 78.8207 45.3219 78.8207Z",
+          fill: "#523FFF"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: 137.266,
+          y1: 162.316,
+          x2: 83.1281,
+          y2: 162.316,
+          stroke: "currentColor",
+          strokeWidth: 11.8231
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: 160.188,
+          y1: 162.316,
+          x2: 140.811,
+          y2: 162.316,
+          stroke: "currentColor",
+          strokeOpacity: 0.26,
+          strokeWidth: 11.8231
+        }
+      )
+    ]
+  }
+);
+var copilot_sdk_logo_default = CopilotSDKLogo;
+var DEFAULT_NAME = "AI Copilot";
+function ChatHeader({
+  logo,
+  name,
+  title,
+  threadPicker,
+  onClose,
+  className
+}) {
+  const displayName = name || title || DEFAULT_NAME;
+  const showDefaultLogo = logo === void 0;
+  const showCustomLogo = typeof logo === "string" && logo.length > 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col border-b border-border bg-background",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 shrink-0", children: [
+          showDefaultLogo && /* @__PURE__ */ jsx(copilot_sdk_logo_default, { className: "h-6 w-auto" }),
+          showCustomLogo && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: logo,
+              alt: displayName,
+              className: "size-6 rounded-md object-contain"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "font-semibold text-foreground text-sm mb-0.5", children: displayName }),
+            threadPicker && /* @__PURE__ */ jsx("div", { className: "", children: threadPicker })
+          ] })
+        ] }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+            "aria-label": "Close chat",
+            children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-5 w-5" })
+          }
+        )
+      ] })
+    }
+  );
+}
+function Suggestions({
+  suggestions,
+  onSuggestionClick,
+  className
+}) {
+  if (!suggestions.length) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-2 px-4 py-2", className), children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => onSuggestionClick?.(suggestion),
+      className: "inline-flex items-center rounded-full border bg-background px-3 py-1.5 text-sm transition-colors hover:bg-muted",
+      children: suggestion
+    },
+    index
+  )) });
+}
+function DefaultMessage({
+  message,
+  userAvatar,
+  assistantAvatar,
+  showUserAvatar = false,
+  userMessageClassName,
+  assistantMessageClassName,
+  size = "sm",
+  isLastMessage = false,
+  isLoading = false,
+  registeredTools,
+  toolRenderers,
+  onApproveToolExecution,
+  onRejectToolExecution,
+  showFollowUps = true,
+  onFollowUpClick,
+  followUpClassName,
+  followUpButtonClassName
+}) {
+  const isUser = message.role === "user";
+  const isStreaming = isLastMessage && isLoading;
+  const { cleanContent, followUps } = React8.useMemo(() => {
+    if (isUser || !message.content) {
+      return { cleanContent: message.content, followUps: [] };
+    }
+    return parseFollowUps(message.content);
+  }, [message.content, isUser]);
+  const shouldShowFollowUps = showFollowUps && !isUser && isLastMessage && !isLoading && followUps.length > 0 && onFollowUpClick;
+  if (isUser) {
+    const hasAttachments = message.attachments && message.attachments.length > 0;
+    return /* @__PURE__ */ jsxs(
+      Message,
+      {
+        className: cn(
+          "flex gap-2",
+          showUserAvatar ? "justify-end" : "justify-end"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end max-w-[80%]", children: [
+            message.content && /* @__PURE__ */ jsx(
+              MessageContent,
+              {
+                className: cn(
+                  "rounded-lg px-4 py-2 bg-primary text-primary-foreground",
+                  userMessageClassName
+                ),
+                size,
+                children: message.content
+              }
+            ),
+            hasAttachments && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2 justify-end", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsx(AttachmentPreview, { attachment }, index)) })
+          ] }),
+          showUserAvatar && /* @__PURE__ */ jsx(
+            MessageAvatar,
+            {
+              src: userAvatar.src || "",
+              alt: "User",
+              fallback: userAvatar.fallback
+            }
+          )
+        ]
+      }
+    );
+  }
+  const pendingApprovalTools = message.toolExecutions?.filter(
+    (exec) => exec.approvalStatus === "required"
+  );
+  const completedTools = message.toolExecutions?.filter(
+    (exec) => exec.approvalStatus !== "required"
+  );
+  const hasCustomRender = (toolName) => {
+    if (toolRenderers?.[toolName]) return true;
+    const toolDef = registeredTools?.find((t) => t.name === toolName);
+    if (toolDef?.render) return true;
+    return false;
+  };
+  const toolsWithCustomRender = completedTools?.filter(
+    (exec) => hasCustomRender(exec.name)
+  );
+  const toolsWithoutCustomRender = completedTools?.filter(
+    (exec) => !hasCustomRender(exec.name)
+  );
+  const toolSteps = toolsWithoutCustomRender?.map((exec) => ({
+    id: exec.id,
+    name: exec.name,
+    args: exec.args,
+    status: exec.status,
+    result: exec.result,
+    error: exec.error
+  }));
+  return /* @__PURE__ */ jsxs(Message, { className: "flex gap-2", children: [
+    /* @__PURE__ */ jsx(
+      MessageAvatar,
+      {
+        src: assistantAvatar.src || "",
+        alt: "Assistant",
+        fallback: assistantAvatar.fallback,
+        fallbackIcon: !assistantAvatar.src ? /* @__PURE__ */ jsx(copilot_sdk_logo_default, { className: "size-5" }) : void 0,
+        className: "bg-background"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 max-w-[80%]", children: [
+      message.thinking && /* @__PURE__ */ jsx(
+        SimpleReasoning,
+        {
+          content: message.thinking,
+          isStreaming,
+          className: "mb-2"
+        }
+      ),
+      cleanContent?.trim() && /* @__PURE__ */ jsx(
+        MessageContent,
+        {
+          className: cn(
+            "rounded-lg px-4 py-2 bg-muted",
+            assistantMessageClassName
+          ),
+          markdown: true,
+          size,
+          children: cleanContent
+        }
+      ),
+      toolsWithCustomRender && toolsWithCustomRender.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2", children: toolsWithCustomRender.map((exec) => {
+        const Renderer = toolRenderers?.[exec.name];
+        if (Renderer) {
+          return /* @__PURE__ */ jsx(
+            Renderer,
             {
               execution: {
                 id: exec.id,
@@ -3213,125 +3785,465 @@ function DefaultMessage({
           const output = toolDef.render(renderProps);
           return /* @__PURE__ */ jsx(React8.Fragment, { children: output }, tool.id);
         }
-        return /* @__PURE__ */ jsx(
-          PermissionConfirmation,
+        return /* @__PURE__ */ jsx(
+          PermissionConfirmation,
+          {
+            state: "pending",
+            toolName: tool.name,
+            message: tool.approvalMessage || `This tool wants to execute. Do you approve?`,
+            onApprove: (permissionLevel) => onApproveToolExecution?.(
+              tool.id,
+              void 0,
+              permissionLevel
+            ),
+            onReject: (permissionLevel) => onRejectToolExecution?.(tool.id, void 0, permissionLevel)
+          },
+          tool.id
+        );
+      }) }),
+      message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsx(AttachmentPreview, { attachment }, index)) }),
+      shouldShowFollowUps && /* @__PURE__ */ jsx(
+        FollowUpQuestions,
+        {
+          questions: followUps,
+          onSelect: onFollowUpClick,
+          className: followUpClassName,
+          buttonClassName: followUpButtonClassName
+        }
+      )
+    ] })
+  ] });
+}
+function AttachmentPreview({ attachment }) {
+  const [expanded, setExpanded] = React8.useState(false);
+  if (attachment.type !== "image") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: attachment.type }),
+      /* @__PURE__ */ jsx("span", { children: attachment.filename || "Attachment" })
+    ] });
+  }
+  let src;
+  if (attachment.url) {
+    src = attachment.url;
+  } else if (attachment.data) {
+    src = attachment.data.startsWith("data:") ? attachment.data : `data:${attachment.mimeType};base64,${attachment.data}`;
+  } else {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded(true),
+        className: "relative rounded-lg overflow-hidden border bg-muted/50 hover:opacity-90 transition-opacity",
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: attachment.filename || "Image",
+            className: "max-w-[200px] max-h-[150px] object-cover"
+          }
+        )
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80",
+        onClick: () => setExpanded(false),
+        children: /* @__PURE__ */ jsxs("div", { className: "relative max-w-[90vw] max-h-[90vh]", children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt: attachment.filename || "Image (expanded)",
+              className: "max-w-full max-h-full object-contain rounded-lg"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "absolute top-2 right-2 bg-white/90 rounded-full p-2 hover:bg-white transition-colors",
+              onClick: (e) => {
+                e.stopPropagation();
+                setExpanded(false);
+              },
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "w-4 h-4",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M6 18L18 6M6 6l12 12"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+var DEFAULT_MAX_FILE_SIZE = 5 * 1024 * 1024;
+var DEFAULT_ALLOWED_TYPES = ["image/*", "application/pdf"];
+var DEFAULT_TITLE = "How can I help you today?";
+var DEFAULT_SUBTITLE = "Ask anything and get it done.";
+var DEFAULT_SUGGESTIONS_LABEL = "Try AI Copilot";
+var DEFAULT_RECENT_CHATS_LABEL = "Recent chats";
+var DEFAULT_MAX_RECENT_CHATS = 3;
+var DEFAULT_VIEW_MORE_LABEL = "View more..";
+function getAttachmentType(mimeType) {
+  if (mimeType.startsWith("image/")) return "image";
+  if (mimeType.startsWith("audio/")) return "audio";
+  if (mimeType.startsWith("video/")) return "video";
+  return "file";
+}
+function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result === "string") {
+        resolve(reader.result);
+      } else {
+        reject(new Error("Failed to read file"));
+      }
+    };
+    reader.onerror = () => reject(new Error("Failed to read file"));
+    reader.readAsDataURL(file);
+  });
+}
+function generateAttachmentId() {
+  return `att_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+}
+function ChatWelcome({
+  config,
+  suggestions = [],
+  recentThreads = [],
+  onSendMessage,
+  onSelectThread,
+  onDeleteThread,
+  onViewMoreThreads,
+  isLoading = false,
+  onStop,
+  placeholder = "Type a message...",
+  attachmentsEnabled = true,
+  attachmentsDisabledTooltip = "Attachments not supported by this model",
+  maxFileSize = DEFAULT_MAX_FILE_SIZE,
+  allowedFileTypes = DEFAULT_ALLOWED_TYPES,
+  processAttachment: processAttachmentProp,
+  classNames = {}
+}) {
+  const [input, setInput] = useState("");
+  const [pendingAttachments, setPendingAttachments] = useState([]);
+  const fileInputRef = useRef(null);
+  const fileInputId = useId();
+  const title = config?.title ?? DEFAULT_TITLE;
+  const subtitle = config?.subtitle ?? DEFAULT_SUBTITLE;
+  const logo = config?.logo;
+  const suggestionsLabel = config?.suggestionsLabel ?? DEFAULT_SUGGESTIONS_LABEL;
+  const showRecentChats = config?.showRecentChats ?? true;
+  config?.recentChatsLabel ?? DEFAULT_RECENT_CHATS_LABEL;
+  const maxRecentChats = config?.maxRecentChats ?? DEFAULT_MAX_RECENT_CHATS;
+  config?.viewMoreLabel ?? DEFAULT_VIEW_MORE_LABEL;
+  const isFileTypeAllowed = useCallback(
+    (file) => {
+      for (const type of allowedFileTypes) {
+        if (type.endsWith("/*")) {
+          const category = type.slice(0, -2);
+          if (file.type.startsWith(category + "/")) return true;
+        } else if (file.type === type) {
+          return true;
+        }
+      }
+      return false;
+    },
+    [allowedFileTypes]
+  );
+  const handleFileSelect = useCallback(
+    async (files) => {
+      if (!files || !attachmentsEnabled) return;
+      for (const file of Array.from(files)) {
+        if (file.size > maxFileSize) {
+          const sizeMB = (maxFileSize / (1024 * 1024)).toFixed(0);
+          console.warn(`File ${file.name} exceeds ${sizeMB}MB limit`);
+          continue;
+        }
+        if (!isFileTypeAllowed(file)) {
+          console.warn(`File type ${file.type} is not allowed`);
+          continue;
+        }
+        const id = generateAttachmentId();
+        const previewUrl = URL.createObjectURL(file);
+        setPendingAttachments((prev) => [
+          ...prev,
+          {
+            id,
+            file,
+            previewUrl,
+            attachment: {
+              type: getAttachmentType(file.type),
+              data: "",
+              mimeType: file.type,
+              filename: file.name
+            },
+            status: "processing"
+          }
+        ]);
+        try {
+          let attachment;
+          if (processAttachmentProp) {
+            attachment = await processAttachmentProp(file);
+          } else {
+            const data = await fileToBase64(file);
+            attachment = {
+              type: getAttachmentType(file.type),
+              data,
+              mimeType: file.type,
+              filename: file.name
+            };
+          }
+          setPendingAttachments(
+            (prev) => prev.map(
+              (att) => att.id === id ? { ...att, status: "ready", attachment } : att
+            )
+          );
+        } catch (error) {
+          setPendingAttachments(
+            (prev) => prev.map(
+              (att) => att.id === id ? {
+                ...att,
+                status: "error",
+                error: "Failed to process file"
+              } : att
+            )
+          );
+        }
+      }
+    },
+    [attachmentsEnabled, maxFileSize, isFileTypeAllowed, processAttachmentProp]
+  );
+  const handleInputChange = useCallback(
+    (e) => {
+      handleFileSelect(e.target.files);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    },
+    [handleFileSelect]
+  );
+  const removePendingAttachment = useCallback((id) => {
+    setPendingAttachments((prev) => {
+      const att = prev.find((a) => a.id === id);
+      if (att) {
+        URL.revokeObjectURL(att.previewUrl);
+      }
+      return prev.filter((a) => a.id !== id);
+    });
+  }, []);
+  const handleSubmit = useCallback(() => {
+    const hasContent = input.trim();
+    const hasAttachments = pendingAttachments.some(
+      (att) => att.status === "ready"
+    );
+    if (!hasContent && !hasAttachments || isLoading) return;
+    const attachments = pendingAttachments.filter((att) => att.status === "ready").map((att) => att.attachment);
+    onSendMessage(input, attachments.length > 0 ? attachments : void 0);
+    pendingAttachments.forEach((att) => URL.revokeObjectURL(att.previewUrl));
+    setPendingAttachments([]);
+    setInput("");
+  }, [input, isLoading, onSendMessage, pendingAttachments]);
+  const handleSuggestionClick = useCallback(
+    (suggestion) => {
+      onSendMessage(suggestion);
+    },
+    [onSendMessage]
+  );
+  const acceptString = allowedFileTypes.join(",");
+  showRecentChats ? recentThreads.slice(0, maxRecentChats) : [];
+  recentThreads.length > maxRecentChats;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-1 flex-col items-center justify-center px-4 py-8 overflow-auto",
+        classNames.root
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            state: "pending",
-            toolName: tool.name,
-            message: tool.approvalMessage || `This tool wants to execute. Do you approve?`,
-            onApprove: (permissionLevel) => onApproveToolExecution?.(
-              tool.id,
-              void 0,
-              permissionLevel
+            className: cn(
+              "flex flex-col items-center text-center mb-8",
+              classNames.hero
             ),
-            onReject: (permissionLevel) => onRejectToolExecution?.(tool.id, void 0, permissionLevel)
-          },
-          tool.id
-        );
-      }) }),
-      message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsx(AttachmentPreview, { attachment }, index)) }),
-      shouldShowFollowUps && /* @__PURE__ */ jsx(
-        FollowUpQuestions,
-        {
-          questions: followUps,
-          onSelect: onFollowUpClick,
-          className: followUpClassName,
-          buttonClassName: followUpButtonClassName
-        }
-      )
-    ] })
-  ] });
-}
-function AttachmentPreview({ attachment }) {
-  const [expanded, setExpanded] = React8.useState(false);
-  if (attachment.type !== "image") {
-    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: attachment.type }),
-      /* @__PURE__ */ jsx("span", { children: attachment.filename || "Attachment" })
-    ] });
-  }
-  let src;
-  if (attachment.url) {
-    src = attachment.url;
-  } else if (attachment.data) {
-    src = attachment.data.startsWith("data:") ? attachment.data : `data:${attachment.mimeType};base64,${attachment.data}`;
-  } else {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => setExpanded(true),
-        className: "relative rounded-lg overflow-hidden border bg-muted/50 hover:opacity-90 transition-opacity",
-        children: /* @__PURE__ */ jsx(
-          "img",
-          {
-            src,
-            alt: attachment.filename || "Image",
-            className: "max-w-[200px] max-h-[150px] object-cover"
+            children: [
+              logo ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: logo,
+                  alt: "Logo",
+                  className: "size-12 rounded-lg object-contain mb-4"
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(copilot_sdk_logo_default, { className: "h-12 w-auto" }) }),
+              /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-foreground mb-2", children: title }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: subtitle })
+            ]
           }
-        )
-      }
-    ),
-    expanded && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80",
-        onClick: () => setExpanded(false),
-        children: /* @__PURE__ */ jsxs("div", { className: "relative max-w-[90vw] max-h-[90vh]", children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src,
-              alt: attachment.filename || "Image (expanded)",
-              className: "max-w-full max-h-full object-contain rounded-lg"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "absolute top-2 right-2 bg-white/90 rounded-full p-2 hover:bg-white transition-colors",
-              onClick: (e) => {
-                e.stopPropagation();
-                setExpanded(false);
-              },
-              children: /* @__PURE__ */ jsx(
+        ),
+        /* @__PURE__ */ jsxs("div", { className: cn("w-full max-w-lg mb-6", classNames.input), children: [
+          pendingAttachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 p-2 mb-2 bg-muted/30 rounded-lg", children: pendingAttachments.map((att) => /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+            att.attachment.type === "image" ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: att.previewUrl,
+                alt: att.file.name,
+                className: "w-16 h-16 object-cover rounded-lg border"
+              }
+            ) : /* @__PURE__ */ jsxs("div", { className: "w-16 h-16 bg-muted rounded-lg border flex flex-col items-center justify-center p-1", children: [
+              /* @__PURE__ */ jsx(
                 "svg",
                 {
-                  className: "w-4 h-4",
+                  className: "w-6 h-6 text-muted-foreground",
                   fill: "none",
                   viewBox: "0 0 24 24",
                   stroke: "currentColor",
-                  strokeWidth: 2,
                   children: /* @__PURE__ */ jsx(
                     "path",
                     {
                       strokeLinecap: "round",
                       strokeLinejoin: "round",
-                      d: "M6 18L18 6M6 6l12 12"
+                      strokeWidth: 1.5,
+                      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"
                     }
                   )
                 }
-              )
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground truncate w-full text-center mt-1", children: att.file.name.length > 10 ? att.file.name.slice(0, 8) + "..." : att.file.name })
+            ] }),
+            att.status === "processing" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-background/80 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader, { variant: "dots", size: "sm" }) }),
+            att.status === "error" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-destructive/20 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-destructive text-xs", children: "Error" }) }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => removePendingAttachment(att.id),
+                className: "absolute -top-1.5 -right-1.5 bg-destructive text-destructive-foreground rounded-full p-0.5 opacity-0 group-hover:opacity-100 transition-opacity",
+                type: "button",
+                children: /* @__PURE__ */ jsx(XIcon2, { className: "w-3 h-3" })
+              }
+            )
+          ] }, att.id)) }),
+          /* @__PURE__ */ jsxs(
+            PromptInput,
+            {
+              value: input,
+              onValueChange: setInput,
+              isLoading,
+              onSubmit: handleSubmit,
+              children: [
+                /* @__PURE__ */ jsx(PromptInputTextarea, { placeholder }),
+                /* @__PURE__ */ jsxs(PromptInputActions, { className: "flex justify-between", children: [
+                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                    PromptInputAction,
+                    {
+                      tooltip: attachmentsEnabled ? "Attach files" : attachmentsDisabledTooltip,
+                      children: /* @__PURE__ */ jsxs(
+                        "label",
+                        {
+                          htmlFor: fileInputId,
+                          className: cn(
+                            "flex h-8 w-8 items-center justify-center rounded-2xl",
+                            attachmentsEnabled ? "hover:bg-secondary-foreground/10 cursor-pointer" : "opacity-50 cursor-not-allowed"
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "input",
+                              {
+                                ref: fileInputRef,
+                                type: "file",
+                                multiple: true,
+                                accept: acceptString,
+                                onChange: handleInputChange,
+                                className: "hidden",
+                                id: fileInputId,
+                                disabled: !attachmentsEnabled
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(PlusIcon, { className: "text-primary size-5" })
+                          ]
+                        }
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(PromptInputAction, { tooltip: isLoading ? "Stop" : "Send", children: isLoading ? /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "sm",
+                      variant: "destructive",
+                      className: "rounded-full size-9",
+                      onClick: onStop,
+                      children: /* @__PURE__ */ jsx(StopIcon, { className: "h-4 w-4" })
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "sm",
+                      className: "rounded-full size-9",
+                      onClick: handleSubmit,
+                      disabled: !input.trim() && !pendingAttachments.some((att) => att.status === "ready"),
+                      children: /* @__PURE__ */ jsx(ArrowUpIcon, { className: "h-4 w-4" })
+                    }
+                  ) })
+                ] })
+              ]
             }
           )
-        ] })
-      }
-    )
-  ] });
+        ] }),
+        suggestions.length > 0 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("w-full max-w-lg mb-6 px-3", classNames.suggestions),
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-2", children: suggestionsLabel }),
+              /* @__PURE__ */ jsx("div", { className: "", children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleSuggestionClick(suggestion),
+                  className: "group w-full cursor-pointer font-medium text-left py-2 text-sm hover:text-foreground text-foreground/70 transition-colors flex items-center gap-2",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: suggestion }),
+                    /* @__PURE__ */ jsx(ArrowUpRightIcon, { className: "size-4 opacity-0 translate-y-1 group-hover:opacity-[0.6] group-hover:translate-y-0 transition-all duration-200" })
+                  ]
+                },
+                index
+              )) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
-var DEFAULT_MAX_FILE_SIZE = 5 * 1024 * 1024;
-var DEFAULT_ALLOWED_TYPES = ["image/*", "application/pdf"];
-function getAttachmentType(mimeType) {
+var DEFAULT_MAX_FILE_SIZE2 = 5 * 1024 * 1024;
+var DEFAULT_ALLOWED_TYPES2 = ["image/*", "application/pdf"];
+function getAttachmentType2(mimeType) {
   if (mimeType.startsWith("image/")) return "image";
   if (mimeType.startsWith("audio/")) return "audio";
   if (mimeType.startsWith("video/")) return "video";
   return "file";
 }
-function fileToBase64(file) {
+function fileToBase642(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.onload = () => {
@@ -3345,7 +4257,7 @@ function fileToBase64(file) {
     reader.readAsDataURL(file);
   });
 }
-function generateAttachmentId() {
+function generateAttachmentId2() {
   return `att_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
 }
 function Chat({
@@ -3360,6 +4272,11 @@ function Chat({
   title,
   // Header
   showHeader = false,
+  header,
+  threadPicker,
+  // Deprecated header props (backwards compat)
+  logo,
+  name,
   onClose,
   // Appearance
   showPoweredBy = true,
@@ -3369,14 +4286,20 @@ function Chat({
   loaderVariant = "typing",
   fontSize = "sm",
   // Attachments
-  maxFileSize = DEFAULT_MAX_FILE_SIZE,
-  allowedFileTypes = DEFAULT_ALLOWED_TYPES,
+  maxFileSize = DEFAULT_MAX_FILE_SIZE2,
+  allowedFileTypes = DEFAULT_ALLOWED_TYPES2,
   attachmentsEnabled = true,
   attachmentsDisabledTooltip = "Attachments not supported by this model",
   processAttachment: processAttachmentProp,
   // Suggestions
   suggestions = [],
   onSuggestionClick,
+  // Welcome Screen
+  welcome,
+  recentThreads = [],
+  onSelectThread,
+  onDeleteThread,
+  onViewMoreThreads,
   // Tool Executions
   isProcessing = false,
   registeredTools,
@@ -3427,7 +4350,7 @@ function Chat({
           console.warn(`File type ${file.type} is not allowed`);
           continue;
         }
-        const id = generateAttachmentId();
+        const id = generateAttachmentId2();
         const previewUrl = URL.createObjectURL(file);
         setPendingAttachments((prev) => [
           ...prev,
@@ -3436,7 +4359,7 @@ function Chat({
             file,
             previewUrl,
             attachment: {
-              type: getAttachmentType(file.type),
+              type: getAttachmentType2(file.type),
               data: "",
               mimeType: file.type,
               filename: file.name
@@ -3449,9 +4372,9 @@ function Chat({
           if (processAttachmentProp) {
             attachment = await processAttachmentProp(file);
           } else {
-            const data = await fileToBase64(file);
+            const data = await fileToBase642(file);
             attachment = {
-              type: getAttachmentType(file.type),
+              type: getAttachmentType2(file.type),
               data,
               mimeType: file.type,
               filename: file.name
@@ -3544,6 +4467,8 @@ function Chat({
     [onSuggestionClick, onSendMessage]
   );
   const acceptString = allowedFileTypes.join(",");
+  const showWelcome = messages.length === 0 && welcome !== false;
+  const welcomeConfig = typeof welcome === "object" ? welcome : void 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3560,240 +4485,275 @@ function Chat({
         showHeader && (renderHeader ? renderHeader() : /* @__PURE__ */ jsx(
           ChatHeader,
           {
+            logo: header?.logo ?? logo,
+            name: header?.name ?? name,
             title,
-            onClose,
+            threadPicker,
+            onClose: header?.onClose ?? onClose,
             className: classNames.header
           }
         )),
-        /* @__PURE__ */ jsxs(
-          ChatContainerRoot,
-          {
-            className: cn("relative flex-1", classNames.container),
-            children: [
-              /* @__PURE__ */ jsxs(
-                ChatContainerContent,
-                {
-                  className: cn("gap-4 p-4", classNames.messageList),
-                  children: [
-                    messages.length === 0 && /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-muted-foreground", children: welcomeMessage || "Send a message to start the conversation" }),
-                    messages.map((message, index) => {
-                      const isLastMessage = index === messages.length - 1;
-                      const isEmptyAssistant = message.role === "assistant" && !message.content?.trim();
-                      const hasToolCalls = message.tool_calls && message.tool_calls.length > 0;
-                      const hasToolExecutions = message.toolExecutions && message.toolExecutions.length > 0;
-                      const hasPendingApprovals = message.toolExecutions?.some(
-                        (exec) => exec.approvalStatus === "required"
-                      );
-                      if (isEmptyAssistant) {
-                        if (hasToolCalls || hasToolExecutions) ; else if (isLastMessage && hasPendingApprovals) ; else if (isLastMessage && isLoading && !isProcessing) {
-                          return /* @__PURE__ */ jsxs(Message, { className: "flex gap-2", children: [
-                            /* @__PURE__ */ jsx(
-                              MessageAvatar,
-                              {
-                                src: assistantAvatar.src || "",
-                                alt: "Assistant",
-                                fallback: assistantAvatar.fallback,
-                                className: "bg-primary text-primary-foreground"
-                              }
-                            ),
-                            /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsx(Loader, { variant: loaderVariant, size: "sm" }) })
-                          ] }, message.id);
-                        } else {
-                          return null;
-                        }
-                      }
-                      const savedExecutions = message.metadata?.toolExecutions;
-                      const messageToolExecutions = message.toolExecutions || savedExecutions;
-                      const messageWithExecutions = messageToolExecutions ? { ...message, toolExecutions: messageToolExecutions } : message;
-                      const handleFollowUpClick = (question) => {
-                        if (onSuggestionClick) {
-                          onSuggestionClick(question);
-                        } else {
-                          onSendMessage?.(question);
-                        }
-                      };
-                      return renderMessage ? /* @__PURE__ */ jsx(React8__default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id) : /* @__PURE__ */ jsx(
-                        DefaultMessage,
-                        {
-                          message: messageWithExecutions,
-                          userAvatar,
-                          assistantAvatar,
-                          showUserAvatar,
-                          userMessageClassName: classNames.userMessage,
-                          assistantMessageClassName: classNames.assistantMessage,
-                          size: fontSize,
-                          isLastMessage,
-                          isLoading,
-                          registeredTools,
-                          toolRenderers,
-                          onApproveToolExecution,
-                          onRejectToolExecution,
-                          showFollowUps,
-                          onFollowUpClick: handleFollowUpClick,
-                          followUpClassName,
-                          followUpButtonClassName
-                        },
-                        message.id
-                      );
-                    }),
-                    isProcessing && /* @__PURE__ */ jsxs(Message, { className: "flex gap-2", children: [
-                      /* @__PURE__ */ jsx(
-                        MessageAvatar,
-                        {
-                          src: assistantAvatar?.src || "",
-                          alt: "Assistant",
-                          fallback: assistantAvatar?.fallback || "AI",
-                          className: "bg-primary text-primary-foreground"
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-muted px-4 py-2 flex items-center gap-2", children: [
-                        /* @__PURE__ */ jsx(Loader, { variant: "dots", size: "sm" }),
-                        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Continuing..." })
-                      ] })
-                    ] }),
-                    isLoading && !isProcessing && (() => {
-                      const lastMessage = messages[messages.length - 1];
-                      if (lastMessage?.role === "user") {
-                        return /* @__PURE__ */ jsxs(Message, { className: "flex gap-2", children: [
+        showWelcome ? (
+          /* Welcome Screen (centered input) */
+          /* @__PURE__ */ jsx(
+            ChatWelcome,
+            {
+              config: welcomeConfig,
+              suggestions,
+              recentThreads,
+              onSendMessage: (msg, attachments) => onSendMessage?.(msg, attachments),
+              onSelectThread,
+              onDeleteThread,
+              onViewMoreThreads,
+              isLoading,
+              onStop,
+              placeholder,
+              attachmentsEnabled,
+              attachmentsDisabledTooltip,
+              maxFileSize,
+              allowedFileTypes,
+              processAttachment: processAttachmentProp
+            }
+          )
+        ) : (
+          /* Normal Chat UI (messages + input at bottom) */
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              ChatContainerRoot,
+              {
+                className: cn("relative flex-1", classNames.container),
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    ChatContainerContent,
+                    {
+                      className: cn("gap-4 p-4", classNames.messageList),
+                      children: [
+                        messages.length === 0 && /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-muted-foreground", children: welcomeMessage || "Send a message to start the conversation" }),
+                        messages.map((message, index) => {
+                          const isLastMessage = index === messages.length - 1;
+                          const isEmptyAssistant = message.role === "assistant" && !message.content?.trim();
+                          const hasToolCalls = message.tool_calls && message.tool_calls.length > 0;
+                          const hasToolExecutions = message.toolExecutions && message.toolExecutions.length > 0;
+                          const hasPendingApprovals = message.toolExecutions?.some(
+                            (exec) => exec.approvalStatus === "required"
+                          );
+                          if (isEmptyAssistant) {
+                            if (hasToolCalls || hasToolExecutions) ; else if (isLastMessage && hasPendingApprovals) ; else if (isLastMessage && isLoading && !isProcessing) {
+                              return /* @__PURE__ */ jsxs(Message, { className: "flex gap-2", children: [
+                                /* @__PURE__ */ jsx(
+                                  MessageAvatar,
+                                  {
+                                    src: assistantAvatar.src || "",
+                                    alt: "Assistant",
+                                    fallback: assistantAvatar.fallback,
+                                    fallbackIcon: !assistantAvatar.src ? /* @__PURE__ */ jsx(copilot_sdk_logo_default, { className: "size-5" }) : void 0,
+                                    className: "bg-background"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsx(Loader, { variant: loaderVariant, size: "sm" }) })
+                              ] }, message.id);
+                            } else {
+                              return null;
+                            }
+                          }
+                          const savedExecutions = message.metadata?.toolExecutions;
+                          const messageToolExecutions = message.toolExecutions || savedExecutions;
+                          const messageWithExecutions = messageToolExecutions ? { ...message, toolExecutions: messageToolExecutions } : message;
+                          const handleFollowUpClick = (question) => {
+                            if (onSuggestionClick) {
+                              onSuggestionClick(question);
+                            } else {
+                              onSendMessage?.(question);
+                            }
+                          };
+                          return renderMessage ? /* @__PURE__ */ jsx(React8__default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id) : /* @__PURE__ */ jsx(
+                            DefaultMessage,
+                            {
+                              message: messageWithExecutions,
+                              userAvatar,
+                              assistantAvatar,
+                              showUserAvatar,
+                              userMessageClassName: classNames.userMessage,
+                              assistantMessageClassName: classNames.assistantMessage,
+                              size: fontSize,
+                              isLastMessage,
+                              isLoading,
+                              registeredTools,
+                              toolRenderers,
+                              onApproveToolExecution,
+                              onRejectToolExecution,
+                              showFollowUps,
+                              onFollowUpClick: handleFollowUpClick,
+                              followUpClassName,
+                              followUpButtonClassName
+                            },
+                            message.id
+                          );
+                        }),
+                        isProcessing && /* @__PURE__ */ jsxs(Message, { className: "flex gap-2", children: [
                           /* @__PURE__ */ jsx(
                             MessageAvatar,
                             {
                               src: assistantAvatar?.src || "",
                               alt: "Assistant",
                               fallback: assistantAvatar?.fallback || "AI",
-                              className: "bg-primary text-primary-foreground"
+                              fallbackIcon: !assistantAvatar?.src ? /* @__PURE__ */ jsx(copilot_sdk_logo_default, { className: "size-5" }) : void 0,
+                              className: "bg-background"
                             }
                           ),
-                          /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsx(Loader, { variant: loaderVariant, size: "sm" }) })
-                        ] });
-                      }
-                      return null;
-                    })(),
-                    /* @__PURE__ */ jsx(ChatContainerScrollAnchor, {})
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "absolute right-4 bottom-4", children: /* @__PURE__ */ jsx(ScrollButton, { className: "shadow-sm" }) })
-            ]
-          }
-        ),
-        suggestions.length > 0 && !isLoading && /* @__PURE__ */ jsx(
-          Suggestions,
-          {
-            suggestions,
-            onSuggestionClick: handleSuggestionClick,
-            className: classNames.suggestions
-          }
-        ),
-        renderInput ? renderInput() : /* @__PURE__ */ jsxs("div", { className: cn("p-2", classNames.input), children: [
-          pendingAttachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 p-2 mb-2 bg-muted/30 rounded-lg", children: pendingAttachments.map((att) => /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
-            att.attachment.type === "image" ? /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: att.previewUrl,
-                alt: att.file.name,
-                className: "w-16 h-16 object-cover rounded-lg border"
-              }
-            ) : /* @__PURE__ */ jsxs("div", { className: "w-16 h-16 bg-muted rounded-lg border flex flex-col items-center justify-center p-1", children: [
-              /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  className: "w-6 h-6 text-muted-foreground",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  stroke: "currentColor",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 1.5,
-                      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"
+                          /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-muted px-4 py-2 flex items-center gap-2", children: [
+                            /* @__PURE__ */ jsx(Loader, { variant: "dots", size: "sm" }),
+                            /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Continuing..." })
+                          ] })
+                        ] }),
+                        isLoading && !isProcessing && (() => {
+                          const lastMessage = messages[messages.length - 1];
+                          if (lastMessage?.role === "user") {
+                            return /* @__PURE__ */ jsxs(Message, { className: "flex gap-2", children: [
+                              /* @__PURE__ */ jsx(
+                                MessageAvatar,
+                                {
+                                  src: assistantAvatar?.src || "",
+                                  alt: "Assistant",
+                                  fallback: assistantAvatar?.fallback || "AI",
+                                  fallbackIcon: !assistantAvatar?.src ? /* @__PURE__ */ jsx(copilot_sdk_logo_default, { className: "size-5" }) : void 0,
+                                  className: "bg-background"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsx(Loader, { variant: loaderVariant, size: "sm" }) })
+                            ] });
+                          }
+                          return null;
+                        })(),
+                        /* @__PURE__ */ jsx(ChatContainerScrollAnchor, {})
+                      ]
                     }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground truncate w-full text-center mt-1", children: att.file.name.length > 10 ? att.file.name.slice(0, 8) + "..." : att.file.name })
-            ] }),
-            att.status === "processing" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-background/80 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader, { variant: "dots", size: "sm" }) }),
-            att.status === "error" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-destructive/20 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-destructive text-xs", children: "Error" }) }),
-            /* @__PURE__ */ jsx(
-              "button",
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "absolute right-4 bottom-4", children: /* @__PURE__ */ jsx(ScrollButton, { className: "shadow-sm" }) })
+                ]
+              }
+            ),
+            suggestions.length > 0 && !isLoading && /* @__PURE__ */ jsx(
+              Suggestions,
               {
-                onClick: () => removePendingAttachment(att.id),
-                className: "absolute -top-1.5 -right-1.5 bg-destructive text-destructive-foreground rounded-full p-0.5 opacity-0 group-hover:opacity-100 transition-opacity",
-                type: "button",
-                children: /* @__PURE__ */ jsx(XIcon2, { className: "w-3 h-3" })
+                suggestions,
+                onSuggestionClick: handleSuggestionClick,
+                className: classNames.suggestions
               }
-            )
-          ] }, att.id)) }),
-          /* @__PURE__ */ jsxs(
-            PromptInput,
-            {
-              value: input,
-              onValueChange: setInput,
-              isLoading,
-              onSubmit: handleSubmit,
-              className: "",
-              children: [
-                /* @__PURE__ */ jsx(PromptInputTextarea, { placeholder }),
-                /* @__PURE__ */ jsxs(PromptInputActions, { className: "flex justify-between", children: [
-                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-                    PromptInputAction,
+            ),
+            renderInput ? renderInput() : /* @__PURE__ */ jsxs("div", { className: cn("p-2 pt-0", classNames.input), children: [
+              pendingAttachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 p-2 mb-2 bg-muted/30 rounded-lg", children: pendingAttachments.map((att) => /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+                att.attachment.type === "image" ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: att.previewUrl,
+                    alt: att.file.name,
+                    className: "w-16 h-16 object-cover rounded-lg border"
+                  }
+                ) : /* @__PURE__ */ jsxs("div", { className: "w-16 h-16 bg-muted rounded-lg border flex flex-col items-center justify-center p-1", children: [
+                  /* @__PURE__ */ jsx(
+                    "svg",
                     {
-                      tooltip: attachmentsEnabled ? "Attach files" : attachmentsDisabledTooltip,
-                      children: /* @__PURE__ */ jsxs(
-                        "label",
+                      className: "w-6 h-6 text-muted-foreground",
+                      fill: "none",
+                      viewBox: "0 0 24 24",
+                      stroke: "currentColor",
+                      children: /* @__PURE__ */ jsx(
+                        "path",
                         {
-                          htmlFor: fileInputId,
-                          className: cn(
-                            "flex h-8 w-8 items-center justify-center rounded-2xl",
-                            attachmentsEnabled ? "hover:bg-secondary-foreground/10 cursor-pointer" : "opacity-50 cursor-not-allowed"
-                          ),
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                ref: fileInputRef,
-                                type: "file",
-                                multiple: true,
-                                accept: acceptString,
-                                onChange: handleInputChange,
-                                className: "hidden",
-                                id: fileInputId,
-                                disabled: !attachmentsEnabled
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(PlusIcon, { className: "text-primary size-5" })
-                          ]
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 1.5,
+                          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"
                         }
                       )
                     }
-                  ) }),
-                  /* @__PURE__ */ jsx(PromptInputAction, { tooltip: isLoading ? "Stop" : "Send", children: isLoading ? /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      size: "sm",
-                      variant: "destructive",
-                      className: "rounded-full size-9",
-                      onClick: onStop,
-                      children: /* @__PURE__ */ jsx(StopIcon, { className: "h-4 w-4" })
-                    }
-                  ) : /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      size: "sm",
-                      className: "rounded-full size-9",
-                      onClick: handleSubmit,
-                      disabled: !input.trim() && !pendingAttachments.some((att) => att.status === "ready"),
-                      children: /* @__PURE__ */ jsx(ArrowUpIcon, { className: "h-4 w-4" })
-                    }
-                  ) })
-                ] })
-              ]
-            }
-          )
-        ] })
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground truncate w-full text-center mt-1", children: att.file.name.length > 10 ? att.file.name.slice(0, 8) + "..." : att.file.name })
+                ] }),
+                att.status === "processing" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-background/80 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader, { variant: "dots", size: "sm" }) }),
+                att.status === "error" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-destructive/20 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-destructive text-xs", children: "Error" }) }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => removePendingAttachment(att.id),
+                    className: "absolute -top-1.5 -right-1.5 bg-destructive text-destructive-foreground rounded-full p-0.5 opacity-0 group-hover:opacity-100 transition-opacity",
+                    type: "button",
+                    children: /* @__PURE__ */ jsx(XIcon2, { className: "w-3 h-3" })
+                  }
+                )
+              ] }, att.id)) }),
+              /* @__PURE__ */ jsxs(
+                PromptInput,
+                {
+                  value: input,
+                  onValueChange: setInput,
+                  isLoading,
+                  onSubmit: handleSubmit,
+                  className: "",
+                  children: [
+                    /* @__PURE__ */ jsx(PromptInputTextarea, { placeholder }),
+                    /* @__PURE__ */ jsxs(PromptInputActions, { className: "flex justify-between", children: [
+                      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                        PromptInputAction,
+                        {
+                          tooltip: attachmentsEnabled ? "Attach files" : attachmentsDisabledTooltip,
+                          children: /* @__PURE__ */ jsxs(
+                            "label",
+                            {
+                              htmlFor: fileInputId,
+                              className: cn(
+                                "flex h-8 w-8 items-center justify-center rounded-2xl",
+                                attachmentsEnabled ? "hover:bg-secondary-foreground/10 cursor-pointer" : "opacity-50 cursor-not-allowed"
+                              ),
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  "input",
+                                  {
+                                    ref: fileInputRef,
+                                    type: "file",
+                                    multiple: true,
+                                    accept: acceptString,
+                                    onChange: handleInputChange,
+                                    className: "hidden",
+                                    id: fileInputId,
+                                    disabled: !attachmentsEnabled
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(PlusIcon, { className: "text-primary size-5" })
+                              ]
+                            }
+                          )
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(PromptInputAction, { tooltip: isLoading ? "Stop" : "Send", children: isLoading ? /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          size: "sm",
+                          variant: "destructive",
+                          className: "rounded-full size-9",
+                          onClick: onStop,
+                          children: /* @__PURE__ */ jsx(StopIcon, { className: "h-4 w-4" })
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          size: "sm",
+                          className: "rounded-full size-9",
+                          onClick: handleSubmit,
+                          disabled: !input.trim() && !pendingAttachments.some(
+                            (att) => att.status === "ready"
+                          ),
+                          children: /* @__PURE__ */ jsx(ArrowUpIcon, { className: "h-4 w-4" })
+                        }
+                      ) })
+                    ] })
+                  ]
+                }
+              )
+            ] })
+          ] })
+        )
       ]
     }
   );
@@ -3919,7 +4879,229 @@ function ToolExecutionMessage({
     ] })
   ] });
 }
+function useInternalThreadManager(config = {}) {
+  const {
+    adapter,
+    saveDebounce = 1e3,
+    autoRestoreLastThread = true,
+    onThreadChange
+  } = config;
+  const threadManagerConfig = {
+    adapter,
+    saveDebounce,
+    autoRestoreLastThread
+  };
+  const threadManager = useThreadManager(threadManagerConfig);
+  const {
+    currentThread,
+    currentThreadId,
+    createThread,
+    switchThread,
+    updateCurrentThread,
+    clearCurrentThread,
+    refreshThreads
+  } = threadManager;
+  const { messages, setMessages, status, isLoading } = useCopilot();
+  const isLoadingMessagesRef = useRef(false);
+  const savingToThreadRef = useRef(null);
+  const lastSavedSnapshotRef = useRef("");
+  const hasInitializedRef = useRef(false);
+  const getMessageSnapshot = useCallback((msgs) => {
+    return msgs.map((m) => {
+      const contentPreview = (m.content ?? "").slice(0, 20);
+      return `${m.id}:${contentPreview}:${m.content?.length ?? 0}`;
+    }).join("|");
+  }, []);
+  const convertToCore = useCallback((msgs) => {
+    return msgs.map((m) => ({
+      id: m.id,
+      role: m.role,
+      content: m.content,
+      created_at: m.createdAt,
+      tool_calls: m.toolCalls,
+      tool_call_id: m.toolCallId,
+      metadata: {
+        attachments: m.attachments,
+        thinking: m.thinking
+      }
+    }));
+  }, []);
+  const handleSwitchThread = useCallback(
+    async (threadId) => {
+      isLoadingMessagesRef.current = true;
+      const thread = await switchThread(threadId);
+      if (thread?.messages) {
+        const uiMessages = thread.messages.map((m) => ({
+          id: m.id,
+          role: m.role,
+          content: m.content ?? "",
+          createdAt: m.created_at ?? /* @__PURE__ */ new Date(),
+          toolCalls: m.tool_calls,
+          toolCallId: m.tool_call_id,
+          attachments: m.metadata?.attachments
+        }));
+        lastSavedSnapshotRef.current = getMessageSnapshot(uiMessages);
+        savingToThreadRef.current = threadId;
+        setMessages(uiMessages);
+      } else {
+        lastSavedSnapshotRef.current = "";
+        savingToThreadRef.current = threadId;
+        setMessages([]);
+      }
+      onThreadChange?.(threadId);
+      requestAnimationFrame(() => {
+        isLoadingMessagesRef.current = false;
+      });
+    },
+    [switchThread, setMessages, getMessageSnapshot, onThreadChange]
+  );
+  const handleNewThread = useCallback(async () => {
+    isLoadingMessagesRef.current = true;
+    clearCurrentThread();
+    lastSavedSnapshotRef.current = "";
+    savingToThreadRef.current = null;
+    setMessages([]);
+    onThreadChange?.(null);
+    requestAnimationFrame(() => {
+      isLoadingMessagesRef.current = false;
+    });
+  }, [clearCurrentThread, setMessages, onThreadChange]);
+  useEffect(() => {
+    if (hasInitializedRef.current || !currentThread) {
+      return;
+    }
+    hasInitializedRef.current = true;
+    isLoadingMessagesRef.current = true;
+    if (currentThread.messages && currentThread.messages.length > 0) {
+      const uiMessages = currentThread.messages.map((m) => ({
+        id: m.id,
+        role: m.role,
+        content: m.content ?? "",
+        createdAt: m.created_at ?? /* @__PURE__ */ new Date(),
+        toolCalls: m.tool_calls,
+        toolCallId: m.tool_call_id,
+        attachments: m.metadata?.attachments
+      }));
+      lastSavedSnapshotRef.current = getMessageSnapshot(uiMessages);
+      savingToThreadRef.current = currentThread.id;
+      setMessages(uiMessages);
+    } else {
+      lastSavedSnapshotRef.current = "";
+      savingToThreadRef.current = currentThread.id;
+    }
+    onThreadChange?.(currentThread.id);
+    requestAnimationFrame(() => {
+      isLoadingMessagesRef.current = false;
+    });
+  }, [currentThread, setMessages, getMessageSnapshot, onThreadChange]);
+  useEffect(() => {
+    if (isLoadingMessagesRef.current) {
+      return;
+    }
+    if (status === "streaming" || status === "submitted") {
+      return;
+    }
+    if (messages.length === 0) {
+      return;
+    }
+    const currentSnapshot = getMessageSnapshot(messages);
+    if (currentSnapshot === lastSavedSnapshotRef.current) {
+      return;
+    }
+    const coreMessages = convertToCore(messages);
+    if (!currentThreadId && !savingToThreadRef.current) {
+      savingToThreadRef.current = "creating";
+      createThread({ messages: coreMessages }).then((thread) => {
+        lastSavedSnapshotRef.current = currentSnapshot;
+        savingToThreadRef.current = thread.id;
+        onThreadChange?.(thread.id);
+      });
+      return;
+    }
+    if (savingToThreadRef.current && savingToThreadRef.current !== currentThreadId) {
+      return;
+    }
+    updateCurrentThread({ messages: coreMessages });
+    lastSavedSnapshotRef.current = currentSnapshot;
+  }, [
+    messages,
+    currentThreadId,
+    status,
+    updateCurrentThread,
+    createThread,
+    refreshThreads,
+    getMessageSnapshot,
+    convertToCore,
+    onThreadChange
+  ]);
+  const isBusy = isLoading || status === "streaming" || status === "submitted";
+  return {
+    threadManager,
+    handleSwitchThread,
+    handleNewThread,
+    isBusy
+  };
+}
+function parsePersistenceConfig(persistence, onThreadChange) {
+  if (!persistence) {
+    return void 0;
+  }
+  if (persistence === true) {
+    return {
+      onThreadChange,
+      autoRestoreLastThread: true
+    };
+  }
+  if ("type" in persistence) {
+    switch (persistence.type) {
+      case "local":
+        return {
+          saveDebounce: persistence.saveDebounce,
+          autoRestoreLastThread: persistence.autoRestoreLastThread ?? true,
+          onThreadChange
+        };
+      case "server":
+        return {
+          adapter: createServerAdapter({
+            endpoint: persistence.endpoint,
+            headers: persistence.headers
+          }),
+          saveDebounce: persistence.saveDebounce,
+          autoRestoreLastThread: persistence.autoRestoreLastThread ?? true,
+          onThreadChange
+        };
+      case "cloud":
+        console.warn(
+          "[Copilot SDK] Cloud persistence is not yet implemented. Falling back to localStorage."
+        );
+        return {
+          onThreadChange,
+          autoRestoreLastThread: true
+        };
+    }
+  }
+  const legacyConfig = persistence;
+  return {
+    adapter: legacyConfig.adapter,
+    saveDebounce: legacyConfig.saveDebounce,
+    autoRestoreLastThread: legacyConfig.autoRestoreLastThread ?? true,
+    onThreadChange
+  };
+}
 function CopilotChat(props) {
+  const {
+    persistence,
+    showThreadPicker = false,
+    onThreadChange,
+    classNames,
+    header,
+    ...chatProps
+  } = props;
+  const persistenceConfig = parsePersistenceConfig(persistence, onThreadChange);
+  const threadManagerResult = useInternalThreadManager(
+    persistenceConfig ?? { autoRestoreLastThread: false }
+  );
+  const isPersistenceEnabled = !!persistence;
   const {
     messages,
     isLoading,
@@ -4019,7 +5201,7 @@ function CopilotChat(props) {
       toolExecutions: messageToolExecutions
     };
   });
-  const suggestions = visibleMessages.length === 0 && props.suggestions?.length ? props.suggestions : [];
+  const suggestions = visibleMessages.length === 0 && chatProps.suggestions?.length ? chatProps.suggestions : [];
   const lastMessage = messages[messages.length - 1];
   const isInToolFlow = lastMessage?.role === "assistant" && lastMessage.toolCalls?.length;
   let isProcessingToolResults = false;
@@ -4040,20 +5222,70 @@ function CopilotChat(props) {
     );
     isProcessingToolResults = hasCompletedTools && !hasExecutingTools;
   }
+  const chatClassNames = classNames ? {
+    root: classNames.root,
+    header: classNames.header,
+    container: classNames.container,
+    messageList: classNames.messageList,
+    userMessage: classNames.userMessage,
+    assistantMessage: classNames.assistantMessage,
+    input: classNames.input,
+    suggestions: classNames.suggestions,
+    footer: classNames.footer
+  } : void 0;
+  const { threadManager, handleSwitchThread, handleNewThread, isBusy } = threadManagerResult;
+  const handleDeleteThread = React8__default.useCallback(
+    (threadId) => {
+      const isCurrentThread = threadManager.currentThreadId === threadId;
+      threadManager.deleteThread(threadId);
+      if (isCurrentThread) {
+        handleNewThread();
+      }
+    },
+    [threadManager, handleNewThread]
+  );
+  const threadPickerElement = isPersistenceEnabled && showThreadPicker ? /* @__PURE__ */ jsx(
+    ThreadPicker,
+    {
+      value: threadManager.currentThreadId,
+      threads: threadManager.threads,
+      onSelect: handleSwitchThread,
+      onDeleteThread: handleDeleteThread,
+      onNewThread: handleNewThread,
+      loading: threadManager.isLoading,
+      disabled: isBusy,
+      size: "sm",
+      className: classNames?.threadPicker,
+      buttonClassName: classNames?.threadPickerButton,
+      dropdownClassName: classNames?.threadPickerDropdown,
+      itemClassName: classNames?.threadPickerItem,
+      newButtonClassName: classNames?.threadPickerNewButton
+    }
+  ) : void 0;
+  const shouldShowHeader = !!header || showThreadPicker || chatProps.showHeader;
+  const useCustomHeader = chatProps.renderHeader && !header && !showThreadPicker;
   return /* @__PURE__ */ jsx(
     Chat,
     {
-      ...props,
+      ...chatProps,
       messages: visibleMessages,
       onSendMessage: sendMessage,
       onStop: stop,
       isLoading,
-      showPoweredBy: props.showPoweredBy ?? true,
+      showPoweredBy: chatProps.showPoweredBy ?? true,
       suggestions,
       isProcessing: isProcessingToolResults,
       onApproveToolExecution: approveToolExecution,
       onRejectToolExecution: rejectToolExecution,
-      registeredTools
+      registeredTools,
+      classNames: chatClassNames,
+      header,
+      threadPicker: threadPickerElement,
+      showHeader: shouldShowHeader,
+      renderHeader: useCustomHeader ? chatProps.renderHeader : void 0,
+      recentThreads: isPersistenceEnabled ? threadManager.threads : void 0,
+      onSelectThread: isPersistenceEnabled ? handleSwitchThread : void 0,
+      onDeleteThread: isPersistenceEnabled ? handleDeleteThread : void 0
     }
   );
 }
@@ -4104,6 +5336,6 @@ function PoweredBy({ className, showLogo = true }) {
   );
 }
 
-export { AlertTriangleIcon, BotIcon, Button, CapabilityBadge, CapabilityList, Chat, ChatContainerContent, ChatContainerRoot, ChatContainerScrollAnchor, CheckIcon, ChevronDownIcon2 as ChevronDownIcon, ChevronUpIcon, CloseIcon, CodeBlock, CompactPermissionConfirmation, Confirmation, ConfirmationActions, ConfirmationApproved, ConfirmationMessage, ConfirmationPending, ConfirmationRejected, ConnectedChat, CopilotChat, CopilotUIProvider, CopyIcon, DEFAULT_PERMISSION_OPTIONS, DevLogger, FeedbackBar, FollowUpQuestions, InlineToolSteps, Loader, Markdown, MessageAvatar, MessageContent, Message as MessagePrimitive, ModelSelector, PermissionConfirmation, PoweredBy, PromptInput, PromptInputAction, PromptInputActions, PromptInputTextarea, Reasoning, ReasoningContent, ReasoningTrigger, RefreshIcon, ScrollButton, SendIcon, SimpleConfirmation, SimpleModelSelector, SimpleReasoning, Source, SourceContent, SourceTrigger, StopIcon, ThumbsDownIcon2 as ThumbsDownIcon, ThumbsUpIcon2 as ThumbsUpIcon, ToolExecutionMessage, ToolStep, ToolSteps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserIcon, XIcon2 as XIcon, cn, parseFollowUps, useChatContainer, useCopilotUI };
+export { AlertTriangleIcon, BotIcon, Button, CapabilityBadge, CapabilityList, Chat, ChatContainerContent, ChatContainerRoot, ChatContainerScrollAnchor, ChatWelcome, CheckIcon, ChevronDownIcon2 as ChevronDownIcon, ChevronUpIcon, CloseIcon, CodeBlock, CompactPermissionConfirmation, Confirmation, ConfirmationActions, ConfirmationApproved, ConfirmationMessage, ConfirmationPending, ConfirmationRejected, ConnectedChat, CopilotChat, CopilotUIProvider, CopyIcon, DEFAULT_PERMISSION_OPTIONS, DevLogger, FeedbackBar, FollowUpQuestions, InlineToolSteps, Loader, Markdown, MessageAvatar, MessageContent, Message as MessagePrimitive, ModelSelector, PermissionConfirmation, PoweredBy, PromptInput, PromptInputAction, PromptInputActions, PromptInputTextarea, Reasoning, ReasoningContent, ReasoningTrigger, RefreshIcon, ScrollButton, SendIcon, SimpleConfirmation, SimpleModelSelector, SimpleReasoning, Source, SourceContent, SourceTrigger, StopIcon, ThreadCard, ThreadList, ThreadPicker, ThumbsDownIcon2 as ThumbsDownIcon, ThumbsUpIcon2 as ThumbsUpIcon, ToolExecutionMessage, ToolStep, ToolSteps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserIcon, XIcon2 as XIcon, cn, parseFollowUps, useChatContainer, useCopilotUI };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map