@yourgpt/copilot-sdk 1.3.0 → 1.4.0

package/dist/ui/index.cjs

@@ -5,7 +5,7 @@ var chunkMTFU6EHR_cjs = require('../chunk-MTFU6EHR.cjs');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var React7 = require('react');
+var React18 = require('react');
 var streamdown = require('streamdown');
 var code = require('@streamdown/code');
 var reactSlot = require('@radix-ui/react-slot');
@@ -34,7 +34,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React7__namespace = /*#__PURE__*/_interopNamespace(React7);
+var React18__namespace = /*#__PURE__*/_interopNamespace(React18);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrimitive);
 
@@ -468,7 +468,7 @@ function MarkdownComponent({
     }
   ) });
 }
-var Markdown = React7.memo(MarkdownComponent);
+var Markdown = React18.memo(MarkdownComponent);
 Markdown.displayName = "Markdown";
 function CodeBlock({ children, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -509,7 +509,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React7__namespace.forwardRef(
+var Button = React18__namespace.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -750,7 +750,7 @@ function TooltipTrigger({
   disabled,
   ...props
 }) {
-  if (asChild && React7__namespace.default.isValidElement(children)) {
+  if (asChild && React18__namespace.default.isValidElement(children)) {
     return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Trigger, { disabled, render: children, ...props });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Trigger, { disabled, ...props, children });
@@ -779,7 +779,7 @@ function TooltipContent({
     }
   ) }) });
 }
-var Avatar = React7__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Avatar = React18__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AvatarPrimitive__namespace.Root,
   {
     ref,
@@ -791,7 +791,7 @@ var Avatar = React7__namespace.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 Avatar.displayName = AvatarPrimitive__namespace.Root.displayName;
-var AvatarImage = React7__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AvatarImage = React18__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AvatarPrimitive__namespace.Image,
   {
     ref,
@@ -800,7 +800,7 @@ var AvatarImage = React7__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 AvatarImage.displayName = AvatarPrimitive__namespace.Image.displayName;
-var AvatarFallback = React7__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AvatarFallback = React18__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AvatarPrimitive__namespace.Fallback,
   {
     ref,
@@ -854,7 +854,7 @@ var MessageContent = ({
   );
   return markdown ? /* @__PURE__ */ jsxRuntime.jsx(Markdown, { className: classNames, ...props, children }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, ...props, children });
 };
-var Textarea = React7__namespace.forwardRef(({ className, ...props }, ref) => {
+var Textarea = React18__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "textarea",
     {
@@ -868,7 +868,7 @@ var Textarea = React7__namespace.forwardRef(({ className, ...props }, ref) => {
   );
 });
 Textarea.displayName = "Textarea";
-var PromptInputContext = React7.createContext({
+var PromptInputContext = React18.createContext({
   isLoading: false,
   value: "",
   setValue: () => {
@@ -879,7 +879,7 @@ var PromptInputContext = React7.createContext({
   textareaRef: { current: null }
 });
 function usePromptInput() {
-  return React7.useContext(PromptInputContext);
+  return React18.useContext(PromptInputContext);
 }
 function PromptInput({
   className,
@@ -893,8 +893,8 @@ function PromptInput({
   onClick,
   ...props
 }) {
-  const [internalValue, setInternalValue] = React7.useState(value || "");
-  const textareaRef = React7.useRef(null);
+  const [internalValue, setInternalValue] = React18.useState(value || "");
+  const textareaRef = React18.useRef(null);
   const handleChange = (newValue) => {
     setInternalValue(newValue);
     onValueChange?.(newValue);
@@ -951,7 +951,7 @@ function PromptInputTextarea({
     textareaRef.current = el;
     adjustHeight(el);
   };
-  React7.useLayoutEffect(() => {
+  React18.useLayoutEffect(() => {
     if (!textareaRef.current || disableAutosize) return;
     const el = textareaRef.current;
     el.style.height = "auto";
@@ -1018,7 +1018,7 @@ function PromptInputAction({
 }
 var HoverCard = HoverCardPrimitive__namespace.Root;
 var HoverCardTrigger = HoverCardPrimitive__namespace.Trigger;
-var HoverCardContent = React7__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var HoverCardContent = React18__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   HoverCardPrimitive__namespace.Content,
   {
     ref,
@@ -1032,9 +1032,9 @@ var HoverCardContent = React7__namespace.forwardRef(({ className, align = "cente
   }
 ));
 HoverCardContent.displayName = HoverCardPrimitive__namespace.Content.displayName;
-var SourceContext = React7.createContext(null);
+var SourceContext = React18.createContext(null);
 function useSourceContext() {
-  const ctx = React7.useContext(SourceContext);
+  const ctx = React18.useContext(SourceContext);
   if (!ctx) throw new Error("Source.* must be used inside <Source>");
   return ctx;
 }
@@ -1118,11 +1118,11 @@ function SourceContent({
     }
   ) });
 }
-var ReasoningContext = React7__namespace.createContext(
+var ReasoningContext = React18__namespace.createContext(
   null
 );
 function useReasoningContext() {
-  const context = React7__namespace.useContext(ReasoningContext);
+  const context = React18__namespace.useContext(ReasoningContext);
   if (!context) {
     throw new Error(
       "Reasoning components must be used within a Reasoning provider"
@@ -1138,11 +1138,11 @@ function Reasoning({
   defaultOpen = false,
   className
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React7__namespace.useState(defaultOpen);
-  const prevStreamingRef = React7__namespace.useRef(isStreaming);
+  const [uncontrolledOpen, setUncontrolledOpen] = React18__namespace.useState(defaultOpen);
+  const prevStreamingRef = React18__namespace.useRef(isStreaming);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
-  const setIsOpen = React7__namespace.useCallback(
+  const setIsOpen = React18__namespace.useCallback(
     (open) => {
       if (onOpenChange) {
         onOpenChange(open);
@@ -1153,7 +1153,7 @@ function Reasoning({
     },
     [isControlled, onOpenChange]
   );
-  React7__namespace.useEffect(() => {
+  React18__namespace.useEffect(() => {
     if (isStreaming && !prevStreamingRef.current) {
       setIsOpen(true);
     } else if (!isStreaming && prevStreamingRef.current) {
@@ -1209,9 +1209,9 @@ function ReasoningContent({
   className
 }) {
   const { isOpen } = useReasoningContext();
-  const contentRef = React7__namespace.useRef(null);
-  const [height, setHeight] = React7__namespace.useState(0);
-  React7__namespace.useEffect(() => {
+  const contentRef = React18__namespace.useRef(null);
+  const [height, setHeight] = React18__namespace.useState(0);
+  React18__namespace.useEffect(() => {
     if (contentRef.current) {
       const resizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
@@ -1260,11 +1260,11 @@ function SimpleReasoning({
     /* @__PURE__ */ jsxRuntime.jsx(ReasoningContent, { markdown, children: content })
   ] });
 }
-var CopilotUIContext = React7__namespace.createContext(
+var CopilotUIContext = React18__namespace.createContext(
   null
 );
 function useCopilotUI() {
-  const context = React7__namespace.useContext(CopilotUIContext);
+  const context = React18__namespace.useContext(CopilotUIContext);
   if (!context) {
     return {
       debug: false,
@@ -1279,7 +1279,7 @@ function CopilotUIProvider({
   debug = false,
   defaultDebugExpanded = false
 }) {
-  const value = React7__namespace.useMemo(
+  const value = React18__namespace.useMemo(
     () => ({
       debug,
       defaultDebugExpanded,
@@ -1421,7 +1421,7 @@ function ToolStep({
 }) {
   const { isDebug, defaultDebugExpanded } = useCopilotUI();
   const debug = debugProp ?? isDebug;
-  const [expanded, setExpanded] = React7__namespace.useState(
+  const [expanded, setExpanded] = React18__namespace.useState(
     defaultExpanded ?? defaultDebugExpanded ?? false
   );
   const displayTitle = getDisplayTitle(step);
@@ -1644,6 +1644,22 @@ function ChevronUpIcon({ className }) {
     }
   );
 }
+function ChevronLeftIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 18-6-6 6-6" })
+    }
+  );
+}
 function CopyIcon({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -1886,9 +1902,9 @@ function ArrowUpRightIcon({ className }) {
     }
   );
 }
-var ConfirmationContext = React7__namespace.createContext(null);
+var ConfirmationContext = React18__namespace.createContext(null);
 function useConfirmationContext() {
-  const context = React7__namespace.useContext(ConfirmationContext);
+  const context = React18__namespace.useContext(ConfirmationContext);
   if (!context) {
     throw new Error(
       "Confirmation components must be used within a Confirmation provider"
@@ -2060,8 +2076,8 @@ function PermissionConfirmation({
   permissionOptions = DEFAULT_PERMISSION_OPTIONS,
   className
 }) {
-  const [selectedPermission, setSelectedPermission] = React7__namespace.useState("ask");
-  const [showOptions, setShowOptions] = React7__namespace.useState(false);
+  const [selectedPermission, setSelectedPermission] = React18__namespace.useState("ask");
+  const [showOptions, setShowOptions] = React18__namespace.useState(false);
   const handleApprove = () => {
     onApprove?.(selectedPermission);
   };
@@ -2191,7 +2207,7 @@ function CompactPermissionConfirmation({
   onReject,
   className
 }) {
-  const [rememberChoice, setRememberChoice] = React7__namespace.useState(false);
+  const [rememberChoice, setRememberChoice] = React18__namespace.useState(false);
   const handleApprove = () => {
     onApprove?.(rememberChoice ? "allow_always" : "ask");
   };
@@ -2308,8 +2324,8 @@ function DevLogger({
   position = "bottom-right",
   className
 }) {
-  const [isOpen, setIsOpen] = React7.useState(false);
-  const [activeTab, setActiveTab] = React7.useState("chat");
+  const [isOpen, setIsOpen] = React18.useState(false);
+  const [activeTab, setActiveTab] = React18.useState("chat");
   const positionClasses = {
     "bottom-left": "bottom-4 left-4",
     "bottom-right": "bottom-4 right-4",
@@ -2734,9 +2750,9 @@ function ModelSelector({
   showCapabilities = true,
   className
 }) {
-  const [isOpen, setIsOpen] = React7__namespace.useState(false);
-  const containerRef = React7__namespace.useRef(null);
-  React7__namespace.useEffect(() => {
+  const [isOpen, setIsOpen] = React18__namespace.useState(false);
+  const containerRef = React18__namespace.useRef(null);
+  React18__namespace.useEffect(() => {
     function handleClickOutside(event) {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -2745,7 +2761,7 @@ function ModelSelector({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const selectedModel = React7__namespace.useMemo(() => {
+  const selectedModel = React18__namespace.useMemo(() => {
     if (!value) return null;
     if (providers) {
       for (const provider of providers) {
@@ -2971,7 +2987,7 @@ function PopoverTrigger({
   className,
   ...props
 }) {
-  if (asChild && React7__namespace.isValidElement(children)) {
+  if (asChild && React18__namespace.isValidElement(children)) {
     return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { render: children, className, ...props });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { className, ...props, children });
@@ -3106,8 +3122,8 @@ function ThreadPicker({
   itemClassName,
   newButtonClassName
 }) {
-  const [isOpen, setIsOpen] = React7__namespace.useState(false);
-  const selectedThread = React7__namespace.useMemo(() => {
+  const [isOpen, setIsOpen] = React18__namespace.useState(false);
+  const selectedThread = React18__namespace.useMemo(() => {
     if (!value) return null;
     return threads.find((t) => t.id === value) ?? null;
   }, [value, threads]);
@@ -3313,7 +3329,7 @@ function ThreadCard({
   showDelete = true,
   className
 }) {
-  const [isHovered, setIsHovered] = React7__namespace.useState(false);
+  const [isHovered, setIsHovered] = React18__namespace.useState(false);
   const handleDelete = (e) => {
     e.stopPropagation();
     onDelete?.();
@@ -3564,7 +3580,7 @@ function DefaultMessage({
 }) {
   const isUser = message.role === "user";
   const isStreaming = isLastMessage && isLoading;
-  const { cleanContent, followUps } = React7__namespace.useMemo(() => {
+  const { cleanContent, followUps } = React18__namespace.useMemo(() => {
     if (isUser || !message.content) {
       return { cleanContent: message.content, followUps: [] };
     }
@@ -3703,7 +3719,7 @@ function DefaultMessage({
             toolName: exec.name
           };
           const output = toolDef.render(renderProps);
-          return /* @__PURE__ */ jsxRuntime.jsx(React7__namespace.Fragment, { children: output }, exec.id);
+          return /* @__PURE__ */ jsxRuntime.jsx(React18__namespace.Fragment, { children: output }, exec.id);
         }
         return null;
       }) }),
@@ -3739,7 +3755,7 @@ function DefaultMessage({
             approval: approvalCallbacks
           };
           const output = toolDef.render(renderProps);
-          return /* @__PURE__ */ jsxRuntime.jsx(React7__namespace.Fragment, { children: output }, tool.id);
+          return /* @__PURE__ */ jsxRuntime.jsx(React18__namespace.Fragment, { children: output }, tool.id);
         }
         return /* @__PURE__ */ jsxRuntime.jsx(
           PermissionConfirmation,
@@ -3771,7 +3787,7 @@ function DefaultMessage({
   ] });
 }
 function AttachmentPreview({ attachment }) {
-  const [expanded, setExpanded] = React7__namespace.useState(false);
+  const [expanded, setExpanded] = React18__namespace.useState(false);
   if (attachment.type !== "image") {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: attachment.type }),
@@ -3900,10 +3916,10 @@ function ChatWelcome({
   processAttachment: processAttachmentProp,
   classNames = {}
 }) {
-  const [input, setInput] = React7.useState("");
-  const [pendingAttachments, setPendingAttachments] = React7.useState([]);
-  const fileInputRef = React7.useRef(null);
-  const fileInputId = React7.useId();
+  const [input, setInput] = React18.useState("");
+  const [pendingAttachments, setPendingAttachments] = React18.useState([]);
+  const fileInputRef = React18.useRef(null);
+  const fileInputId = React18.useId();
   const title = config?.title ?? DEFAULT_TITLE;
   const subtitle = config?.subtitle ?? DEFAULT_SUBTITLE;
   const logo = config?.logo;
@@ -3912,7 +3928,7 @@ function ChatWelcome({
   config?.recentChatsLabel ?? DEFAULT_RECENT_CHATS_LABEL;
   const maxRecentChats = config?.maxRecentChats ?? DEFAULT_MAX_RECENT_CHATS;
   config?.viewMoreLabel ?? DEFAULT_VIEW_MORE_LABEL;
-  const isFileTypeAllowed = React7.useCallback(
+  const isFileTypeAllowed = React18.useCallback(
     (file) => {
       for (const type of allowedFileTypes) {
         if (type.endsWith("/*")) {
@@ -3926,7 +3942,7 @@ function ChatWelcome({
     },
     [allowedFileTypes]
   );
-  const handleFileSelect = React7.useCallback(
+  const handleFileSelect = React18.useCallback(
     async (files) => {
       if (!files || !attachmentsEnabled) return;
       for (const file of Array.from(files)) {
@@ -3989,7 +4005,7 @@ function ChatWelcome({
     },
     [attachmentsEnabled, maxFileSize, isFileTypeAllowed, processAttachmentProp]
   );
-  const handleInputChange = React7.useCallback(
+  const handleInputChange = React18.useCallback(
     (e) => {
       handleFileSelect(e.target.files);
       if (fileInputRef.current) {
@@ -3998,7 +4014,7 @@ function ChatWelcome({
     },
     [handleFileSelect]
   );
-  const removePendingAttachment = React7.useCallback((id) => {
+  const removePendingAttachment = React18.useCallback((id) => {
     setPendingAttachments((prev) => {
       const att = prev.find((a) => a.id === id);
       if (att) {
@@ -4007,7 +4023,7 @@ function ChatWelcome({
       return prev.filter((a) => a.id !== id);
     });
   }, []);
-  const handleSubmit = React7.useCallback(() => {
+  const handleSubmit = React18.useCallback(() => {
     const hasContent = input.trim();
     const hasAttachments = pendingAttachments.some(
       (att) => att.status === "ready"
@@ -4019,7 +4035,7 @@ function ChatWelcome({
     setPendingAttachments([]);
     setInput("");
   }, [input, isLoading, onSendMessage, pendingAttachments]);
-  const handleSuggestionClick = React7.useCallback(
+  const handleSuggestionClick = React18.useCallback(
     (suggestion) => {
       onSendMessage(suggestion);
     },
@@ -4191,6 +4207,199 @@ function ChatWelcome({
     }
   );
 }
+var CopilotChatContext = React18.createContext(
+  null
+);
+var useCopilotChatContext = () => {
+  const ctx = React18.useContext(CopilotChatContext);
+  if (!ctx) {
+    throw new Error(
+      "useCopilotChatContext must be used within CopilotChat. Make sure you're using CopilotChat.Home, CopilotChat.Input, etc. inside <CopilotChat>"
+    );
+  }
+  return ctx;
+};
+function HomeView({ children, className }) {
+  const { view } = useCopilotChatContext();
+  if (view !== "home") return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "csdk-chat-home-view flex flex-1 flex-col overflow-auto",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center my-auto w-full", children })
+    }
+  );
+}
+var Home = HomeView;
+function ChatView({ children, className }) {
+  const { view } = useCopilotChatContext();
+  if (view !== "chat") return null;
+  if (children) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("csdk-chat-view flex flex-col", className), children });
+  }
+  return null;
+}
+ChatView.displayName = "ChatView";
+function chatViewHasOnlyLayoutChildren(chatViewElement) {
+  if (!chatViewElement?.props?.children) return false;
+  const childArray = React18__namespace.default.Children.toArray(chatViewElement.props.children);
+  if (childArray.length === 0) return false;
+  return childArray.every(
+    (child) => React18__namespace.default.isValidElement(child) && (child.type === Header || child.type === Footer)
+  );
+}
+function Header({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("csdk-chat-header", className), children });
+}
+function Footer({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("csdk-chat-footer", className), children });
+}
+function Input({ placeholder: placeholderProp, className }) {
+  const {
+    send,
+    isLoading,
+    onStop,
+    placeholder: defaultPlaceholder
+  } = useCopilotChatContext();
+  const [value, setValue] = React18.useState("");
+  const handleSubmit = React18.useCallback(() => {
+    if (value.trim() && !isLoading) {
+      send(value.trim());
+      setValue("");
+    }
+  }, [value, isLoading, send]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    PromptInput,
+    {
+      value,
+      onValueChange: setValue,
+      isLoading,
+      onSubmit: handleSubmit,
+      className: cn("csdk-compound-input", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PromptInputTextarea,
+          {
+            placeholder: placeholderProp ?? defaultPlaceholder
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(PromptInputActions, { className: "justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(PromptInputAction, { tooltip: isLoading ? "Stop" : "Send", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "destructive",
+            className: "csdk-button-stop rounded-full size-9",
+            onClick: onStop,
+            children: /* @__PURE__ */ jsxRuntime.jsx(StopIcon, { className: "h-4 w-4" })
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            size: "sm",
+            className: "csdk-button-send rounded-full size-9",
+            onClick: handleSubmit,
+            disabled: !value.trim(),
+            children: /* @__PURE__ */ jsxRuntime.jsx(ArrowUpIcon, { className: "h-4 w-4" })
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+function SuggestionsCompound({
+  items,
+  label,
+  className,
+  buttonClassName
+}) {
+  const { send } = useCopilotChatContext();
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("csdk-compound-suggestions", className), children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground mb-2 block", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => send(item),
+        className: cn(
+          "csdk-followup-button px-3 py-1.5 text-sm rounded-full border",
+          "bg-background hover:bg-accent transition-colors",
+          buttonClassName
+        ),
+        children: item
+      },
+      i
+    )) })
+  ] });
+}
+function BackButton({
+  className,
+  children,
+  disabled,
+  "aria-label": ariaLabel = "Start new chat"
+}) {
+  const { onNewChat, isThreadBusy } = useCopilotChatContext();
+  if (!onNewChat) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onNewChat,
+      disabled: disabled || isThreadBusy,
+      "aria-label": ariaLabel,
+      className: cn(
+        "csdk-back-button flex items-center gap-1 text-sm",
+        "hover:bg-accent rounded px-2 py-1",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        className
+      ),
+      children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "New Chat" })
+      ] })
+    }
+  );
+}
+function ThreadPickerCompound(props) {
+  const {
+    threads,
+    currentThreadId,
+    onSwitchThread,
+    onNewChat,
+    onDeleteThread,
+    isThreadBusy
+  } = useCopilotChatContext();
+  if (!threads || !onSwitchThread) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ThreadPicker,
+    {
+      ...props,
+      value: currentThreadId,
+      threads,
+      onSelect: onSwitchThread,
+      onNewThread: onNewChat,
+      onDeleteThread,
+      disabled: isThreadBusy
+    }
+  );
+}
+function hasCompoundChild(children, ...components) {
+  return React18__namespace.default.Children.toArray(children).some(
+    (child) => React18__namespace.default.isValidElement(child) && components.includes(child.type)
+  );
+}
+function findCompoundChild(children, component) {
+  return React18__namespace.default.Children.toArray(children).find(
+    (child) => React18__namespace.default.isValidElement(child) && child.type === component
+  );
+}
+function filterCompoundChildren(children, ...components) {
+  return React18__namespace.default.Children.toArray(children).filter(
+    (child) => React18__namespace.default.isValidElement(child) && components.includes(child.type)
+  );
+}
 var DEFAULT_MAX_FILE_SIZE2 = 5 * 1024 * 1024;
 var DEFAULT_ALLOWED_TYPES2 = ["image/*", "application/pdf"];
 function getAttachmentType2(mimeType) {
@@ -4216,12 +4425,14 @@ function fileToBase642(file) {
 function generateAttachmentId2() {
   return `att_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
 }
-function Chat({
+function ChatComponent({
   // Core
   messages = [],
   onSendMessage,
   onStop,
   isLoading = false,
+  // Compound children
+  children,
   // Labels
   placeholder = "Type a message...",
   welcomeMessage,
@@ -4272,14 +4483,20 @@ function Chat({
   renderHeader,
   // Styling
   className,
-  classNames = {}
+  classNames = {},
+  // Thread management for compound components
+  onNewChat,
+  threads,
+  currentThreadId,
+  onSwitchThread,
+  isThreadBusy
 }) {
-  const [input, setInput] = React7.useState("");
-  const [pendingAttachments, setPendingAttachments] = React7.useState([]);
-  const [isDragging, setIsDragging] = React7.useState(false);
-  const fileInputRef = React7.useRef(null);
-  const fileInputId = React7.useId();
-  const isFileTypeAllowed = React7.useCallback(
+  const [input, setInput] = React18.useState("");
+  const [pendingAttachments, setPendingAttachments] = React18.useState([]);
+  const [isDragging, setIsDragging] = React18.useState(false);
+  const fileInputRef = React18.useRef(null);
+  const fileInputId = React18.useId();
+  const isFileTypeAllowed = React18.useCallback(
     (file) => {
       for (const type of allowedFileTypes) {
         if (type.endsWith("/*")) {
@@ -4293,7 +4510,7 @@ function Chat({
     },
     [allowedFileTypes]
   );
-  const handleFileSelect = React7.useCallback(
+  const handleFileSelect = React18.useCallback(
     async (files) => {
       if (!files || !attachmentsEnabled) return;
       for (const file of Array.from(files)) {
@@ -4356,7 +4573,7 @@ function Chat({
     },
     [attachmentsEnabled, maxFileSize, isFileTypeAllowed, processAttachmentProp]
   );
-  const handleInputChange = React7.useCallback(
+  const handleInputChange = React18.useCallback(
     (e) => {
       handleFileSelect(e.target.files);
       if (fileInputRef.current) {
@@ -4365,7 +4582,7 @@ function Chat({
     },
     [handleFileSelect]
   );
-  const removePendingAttachment = React7.useCallback((id) => {
+  const removePendingAttachment = React18.useCallback((id) => {
     setPendingAttachments((prev) => {
       const att = prev.find((a) => a.id === id);
       if (att) {
@@ -4374,7 +4591,7 @@ function Chat({
       return prev.filter((a) => a.id !== id);
     });
   }, []);
-  const handleDragOver = React7.useCallback(
+  const handleDragOver = React18.useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -4384,12 +4601,12 @@ function Chat({
     },
     [attachmentsEnabled]
   );
-  const handleDragLeave = React7.useCallback((e) => {
+  const handleDragLeave = React18.useCallback((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
   }, []);
-  const handleDrop = React7.useCallback(
+  const handleDrop = React18.useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -4400,7 +4617,7 @@ function Chat({
     },
     [attachmentsEnabled, handleFileSelect]
   );
-  const handleSubmit = React7.useCallback(() => {
+  const handleSubmit = React18.useCallback(() => {
     const hasContent = input.trim();
     const hasAttachments = pendingAttachments.some(
       (att) => att.status === "ready"
@@ -4412,7 +4629,7 @@ function Chat({
     setPendingAttachments([]);
     setInput("");
   }, [input, isLoading, onSendMessage, pendingAttachments]);
-  const handleSuggestionClick = React7.useCallback(
+  const handleSuggestionClick = React18.useCallback(
     (suggestion) => {
       if (onSuggestionClick) {
         onSuggestionClick(suggestion);
@@ -4423,9 +4640,60 @@ function Chat({
     [onSuggestionClick, onSendMessage]
   );
   const acceptString = allowedFileTypes.join(",");
-  const showWelcome = messages.length === 0 && welcome !== false;
+  const view = messages.length === 0 ? "home" : "chat";
+  const hasCustomHome = hasCompoundChild(children, Home, HomeView);
+  const hasCustomChatView = hasCompoundChild(children, ChatView);
+  const hasCustomLayout = hasCustomHome || hasCustomChatView;
+  const rootHeader = findCompoundChild(children, Header);
+  const rootFooter = findCompoundChild(children, Footer);
+  const viewChildren = filterCompoundChildren(
+    children,
+    HomeView,
+    Home,
+    ChatView
+  );
+  const chatViewElement = findCompoundChild(children, ChatView);
+  const chatViewNeedsDefault = chatViewElement && (!chatViewElement.props.children || chatViewHasOnlyLayoutChildren(chatViewElement));
+  const showDefaultWelcome = view === "home" && !hasCustomHome && welcome !== false;
   const welcomeConfig = typeof welcome === "object" ? welcome : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const send = React18.useCallback(
+    (message, attachments) => {
+      onSendMessage?.(message, attachments);
+    },
+    [onSendMessage]
+  );
+  const contextValue = React18__namespace.default.useMemo(
+    () => ({
+      view,
+      send,
+      isLoading,
+      onStop,
+      attachmentsEnabled,
+      placeholder,
+      // Thread management - passed from connected-chat
+      onNewChat,
+      threads,
+      currentThreadId,
+      onSwitchThread,
+      onDeleteThread,
+      isThreadBusy
+    }),
+    [
+      view,
+      send,
+      isLoading,
+      onStop,
+      attachmentsEnabled,
+      placeholder,
+      onNewChat,
+      threads,
+      currentThreadId,
+      onSwitchThread,
+      onDeleteThread,
+      isThreadBusy
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(CopilotChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
@@ -4449,8 +4717,10 @@ function Chat({
             className: classNames.header
           }
         )),
-        showWelcome ? (
-          /* Welcome Screen (centered input) */
+        rootHeader,
+        hasCustomLayout && viewChildren,
+        showDefaultWelcome ? (
+          /* Default Welcome Screen (centered input) */
           /* @__PURE__ */ jsxRuntime.jsx(
             ChatWelcome,
             {
@@ -4471,249 +4741,265 @@ function Chat({
               processAttachment: processAttachmentProp
             }
           )
-        ) : (
-          /* Normal Chat UI (messages + input at bottom) */
-          /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              ChatContainerRoot,
-              {
-                className: cn("relative flex-1", classNames.container),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    ChatContainerContent,
-                    {
-                      className: cn("gap-4 p-4", classNames.messageList),
-                      children: [
-                        messages.length === 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Message, { className: "flex gap-2", children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(
-                                  MessageAvatar,
-                                  {
-                                    src: assistantAvatar.src || "",
-                                    alt: "Assistant",
-                                    fallback: assistantAvatar.fallback,
-                                    fallbackIcon: !assistantAvatar.src ? /* @__PURE__ */ jsxRuntime.jsx(copilot_sdk_logo_default, { className: "size-5" }) : void 0,
-                                    className: "bg-background"
-                                  }
-                                ),
-                                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(React7__namespace.default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Message, { className: "flex gap-2", children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            MessageAvatar,
-                            {
-                              src: assistantAvatar?.src || "",
-                              alt: "Assistant",
-                              fallback: assistantAvatar?.fallback || "AI",
-                              fallbackIcon: !assistantAvatar?.src ? /* @__PURE__ */ jsxRuntime.jsx(copilot_sdk_logo_default, { className: "size-5" }) : void 0,
-                              className: "bg-background"
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-muted px-4 py-2 flex items-center gap-2", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(Loader, { variant: "dots", size: "sm" }),
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Continuing..." })
-                          ] })
-                        ] }),
-                        isLoading && !isProcessing && (() => {
-                          const lastMessage = messages[messages.length - 1];
-                          if (lastMessage?.role === "user") {
+        ) : null,
+        view === "chat" && (!hasCustomChatView || chatViewNeedsDefault) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            ChatContainerRoot,
+            {
+              className: cn("relative flex-1", classNames.container),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  ChatContainerContent,
+                  {
+                    className: cn("gap-4 p-4", classNames.messageList),
+                    children: [
+                      messages.length === 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Message, { className: "flex gap-2", children: [
                               /* @__PURE__ */ jsxRuntime.jsx(
                                 MessageAvatar,
                                 {
-                                  src: assistantAvatar?.src || "",
+                                  src: assistantAvatar.src || "",
                                   alt: "Assistant",
-                                  fallback: assistantAvatar?.fallback || "AI",
-                                  fallbackIcon: !assistantAvatar?.src ? /* @__PURE__ */ jsxRuntime.jsx(copilot_sdk_logo_default, { className: "size-5" }) : void 0,
+                                  fallback: assistantAvatar.fallback,
+                                  fallbackIcon: !assistantAvatar.src ? /* @__PURE__ */ jsxRuntime.jsx(copilot_sdk_logo_default, { className: "size-5" }) : void 0,
                                   className: "bg-background"
                                 }
                               ),
                               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Loader, { variant: loaderVariant, size: "sm" }) })
-                            ] });
+                            ] }, message.id);
+                          } else {
+                            return null;
                           }
-                          return null;
-                        })(),
-                        /* @__PURE__ */ jsxRuntime.jsx(ChatContainerScrollAnchor, {})
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-4 bottom-4", children: /* @__PURE__ */ jsxRuntime.jsx(ScrollButton, { className: "shadow-sm" }) })
-                ]
-              }
-            ),
-            suggestions.length > 0 && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(
-              Suggestions,
-              {
-                suggestions,
-                onSuggestionClick: handleSuggestionClick,
-                className: classNames.suggestions
-              }
-            ),
-            renderInput ? renderInput() : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("p-2 pt-0", classNames.input), children: [
-              pendingAttachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 p-2 mb-2 bg-muted/30 rounded-lg", children: pendingAttachments.map((att) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
-                att.attachment.type === "image" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
-                  {
-                    src: att.previewUrl,
-                    alt: att.file.name,
-                    className: "w-16 h-16 object-cover rounded-lg border"
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-16 h-16 bg-muted rounded-lg border flex flex-col items-center justify-center p-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "svg",
-                    {
-                      className: "w-6 h-6 text-muted-foreground",
-                      fill: "none",
-                      viewBox: "0 0 24 24",
-                      stroke: "currentColor",
-                      children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-background/80 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Loader, { variant: "dots", size: "sm" }) }),
-                att.status === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-destructive/20 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive text-xs", children: "Error" }) }),
+                        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__ */ jsxRuntime.jsx(React18__namespace.default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Message, { className: "flex gap-2", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          MessageAvatar,
+                          {
+                            src: assistantAvatar?.src || "",
+                            alt: "Assistant",
+                            fallback: assistantAvatar?.fallback || "AI",
+                            fallbackIcon: !assistantAvatar?.src ? /* @__PURE__ */ jsxRuntime.jsx(copilot_sdk_logo_default, { className: "size-5" }) : void 0,
+                            className: "bg-background"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-muted px-4 py-2 flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(Loader, { variant: "dots", size: "sm" }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Continuing..." })
+                        ] })
+                      ] }),
+                      isLoading && !isProcessing && (() => {
+                        const lastMessage = messages[messages.length - 1];
+                        if (lastMessage?.role === "user") {
+                          return /* @__PURE__ */ jsxRuntime.jsxs(Message, { className: "flex gap-2", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              MessageAvatar,
+                              {
+                                src: assistantAvatar?.src || "",
+                                alt: "Assistant",
+                                fallback: assistantAvatar?.fallback || "AI",
+                                fallbackIcon: !assistantAvatar?.src ? /* @__PURE__ */ jsxRuntime.jsx(copilot_sdk_logo_default, { className: "size-5" }) : void 0,
+                                className: "bg-background"
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Loader, { variant: loaderVariant, size: "sm" }) })
+                          ] });
+                        }
+                        return null;
+                      })(),
+                      /* @__PURE__ */ jsxRuntime.jsx(ChatContainerScrollAnchor, {})
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-4 bottom-4", children: /* @__PURE__ */ jsxRuntime.jsx(ScrollButton, { className: "shadow-sm" }) })
+              ]
+            }
+          ),
+          suggestions.length > 0 && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(
+            Suggestions,
+            {
+              suggestions,
+              onSuggestionClick: handleSuggestionClick,
+              className: classNames.suggestions
+            }
+          ),
+          renderInput ? renderInput() : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("p-2 pt-0", classNames.input), children: [
+            pendingAttachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 p-2 mb-2 bg-muted/30 rounded-lg", children: pendingAttachments.map((att) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+              att.attachment.type === "image" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: att.previewUrl,
+                  alt: att.file.name,
+                  className: "w-16 h-16 object-cover rounded-lg border"
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-16 h-16 bg-muted rounded-lg border flex flex-col items-center justify-center p-1", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+                  "svg",
                   {
-                    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__ */ jsxRuntime.jsx(XIcon2, { className: "w-3 h-3" })
+                    className: "w-6 h-6 text-muted-foreground",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    children: /* @__PURE__ */ jsxRuntime.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"
+                      }
+                    )
                   }
-                )
-              ] }, att.id)) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                PromptInput,
+                ),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-background/80 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Loader, { variant: "dots", size: "sm" }) }),
+              att.status === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-destructive/20 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive text-xs", children: "Error" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
                 {
-                  value: input,
-                  onValueChange: setInput,
-                  isLoading,
-                  onSubmit: handleSubmit,
-                  className: "",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(PromptInputTextarea, { placeholder }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(PromptInputActions, { className: "flex justify-between", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-                        PromptInputAction,
-                        {
-                          tooltip: attachmentsEnabled ? "Attach files" : attachmentsDisabledTooltip,
-                          children: /* @__PURE__ */ jsxRuntime.jsxs(
-                            "label",
-                            {
-                              htmlFor: fileInputId,
-                              className: cn(
-                                "csdk-button-attach 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__ */ jsxRuntime.jsx(
-                                  "input",
-                                  {
-                                    ref: fileInputRef,
-                                    type: "file",
-                                    multiple: true,
-                                    accept: acceptString,
-                                    onChange: handleInputChange,
-                                    className: "hidden",
-                                    id: fileInputId,
-                                    disabled: !attachmentsEnabled
-                                  }
-                                ),
-                                /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, { className: "text-primary size-5" })
-                              ]
-                            }
-                          )
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxRuntime.jsx(PromptInputAction, { tooltip: isLoading ? "Stop" : "Send", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
-                        Button,
-                        {
-                          size: "sm",
-                          variant: "destructive",
-                          className: "csdk-button-stop rounded-full size-9",
-                          onClick: onStop,
-                          children: /* @__PURE__ */ jsxRuntime.jsx(StopIcon, { className: "h-4 w-4" })
-                        }
-                      ) : /* @__PURE__ */ jsxRuntime.jsx(
-                        Button,
-                        {
-                          size: "sm",
-                          className: "csdk-button-send rounded-full size-9",
-                          onClick: handleSubmit,
-                          disabled: !input.trim() && !pendingAttachments.some(
-                            (att) => att.status === "ready"
-                          ),
-                          children: /* @__PURE__ */ jsxRuntime.jsx(ArrowUpIcon, { className: "h-4 w-4" })
-                        }
-                      ) })
-                    ] })
-                  ]
+                  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__ */ jsxRuntime.jsx(XIcon2, { className: "w-3 h-3" })
                 }
               )
-            ] })
+            ] }, att.id)) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              PromptInput,
+              {
+                value: input,
+                onValueChange: setInput,
+                isLoading,
+                onSubmit: handleSubmit,
+                className: "",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(PromptInputTextarea, { placeholder }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(PromptInputActions, { className: "flex justify-between", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                      PromptInputAction,
+                      {
+                        tooltip: attachmentsEnabled ? "Attach files" : attachmentsDisabledTooltip,
+                        children: /* @__PURE__ */ jsxRuntime.jsxs(
+                          "label",
+                          {
+                            htmlFor: fileInputId,
+                            className: cn(
+                              "csdk-button-attach 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__ */ jsxRuntime.jsx(
+                                "input",
+                                {
+                                  ref: fileInputRef,
+                                  type: "file",
+                                  multiple: true,
+                                  accept: acceptString,
+                                  onChange: handleInputChange,
+                                  className: "hidden",
+                                  id: fileInputId,
+                                  disabled: !attachmentsEnabled
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, { className: "text-primary size-5" })
+                            ]
+                          }
+                        )
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(PromptInputAction, { tooltip: isLoading ? "Stop" : "Send", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        variant: "destructive",
+                        className: "csdk-button-stop rounded-full size-9",
+                        onClick: onStop,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(StopIcon, { className: "h-4 w-4" })
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        className: "csdk-button-send rounded-full size-9",
+                        onClick: handleSubmit,
+                        disabled: !input.trim() && !pendingAttachments.some(
+                          (att) => att.status === "ready"
+                        ),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(ArrowUpIcon, { className: "h-4 w-4" })
+                      }
+                    ) })
+                  ] })
+                ]
+              }
+            )
           ] })
-        )
+        ] }),
+        rootFooter
       ]
     }
-  );
+  ) });
 }
+var Chat = Object.assign(ChatComponent, {
+  Root: ChatComponent,
+  // Alias for layout composition pattern
+  Home,
+  // Backward compat alias
+  HomeView,
+  // New name
+  ChatView,
+  Header,
+  Footer,
+  Input,
+  Suggestions: SuggestionsCompound,
+  BackButton,
+  // Navigation: start new chat
+  ThreadPicker: ThreadPickerCompound
+  // Thread switching
+});
 function ToolExecutionMessage({
   executions,
   assistantAvatar = { fallback: "AI" },
@@ -4858,17 +5144,17 @@ function useInternalThreadManager(config = {}) {
     refreshThreads
   } = threadManager;
   const { messages, setMessages, status, isLoading } = chunk3427BQ4M_cjs.useCopilot();
-  const isLoadingMessagesRef = React7.useRef(false);
-  const savingToThreadRef = React7.useRef(null);
-  const lastSavedSnapshotRef = React7.useRef("");
-  const hasInitializedRef = React7.useRef(false);
-  const getMessageSnapshot = React7.useCallback((msgs) => {
+  const isLoadingMessagesRef = React18.useRef(false);
+  const savingToThreadRef = React18.useRef(null);
+  const lastSavedSnapshotRef = React18.useRef("");
+  const hasInitializedRef = React18.useRef(false);
+  const getMessageSnapshot = React18.useCallback((msgs) => {
     return msgs.map((m) => {
       const contentPreview = (m.content ?? "").slice(0, 20);
       return `${m.id}:${contentPreview}:${m.content?.length ?? 0}`;
     }).join("|");
   }, []);
-  const convertToCore = React7.useCallback((msgs) => {
+  const convertToCore = React18.useCallback((msgs) => {
     return msgs.map((m) => ({
       id: m.id,
       role: m.role,
@@ -4882,7 +5168,7 @@ function useInternalThreadManager(config = {}) {
       }
     }));
   }, []);
-  const handleSwitchThread = React7.useCallback(
+  const handleSwitchThread = React18.useCallback(
     async (threadId) => {
       isLoadingMessagesRef.current = true;
       const thread = await switchThread(threadId);
@@ -4911,7 +5197,7 @@ function useInternalThreadManager(config = {}) {
     },
     [switchThread, setMessages, getMessageSnapshot, onThreadChange]
   );
-  const handleNewThread = React7.useCallback(async () => {
+  const handleNewThread = React18.useCallback(async () => {
     isLoadingMessagesRef.current = true;
     clearCurrentThread();
     lastSavedSnapshotRef.current = "";
@@ -4922,7 +5208,7 @@ function useInternalThreadManager(config = {}) {
       isLoadingMessagesRef.current = false;
     });
   }, [clearCurrentThread, setMessages, onThreadChange]);
-  React7.useEffect(() => {
+  React18.useEffect(() => {
     if (hasInitializedRef.current || !currentThread) {
       return;
     }
@@ -4950,7 +5236,7 @@ function useInternalThreadManager(config = {}) {
       isLoadingMessagesRef.current = false;
     });
   }, [currentThread, setMessages, getMessageSnapshot, onThreadChange]);
-  React7.useEffect(() => {
+  React18.useEffect(() => {
     if (isLoadingMessagesRef.current) {
       return;
     }
@@ -5044,13 +5330,14 @@ function parsePersistenceConfig(persistence, onThreadChange) {
     onThreadChange
   };
 }
-function CopilotChat(props) {
+function CopilotChatBase(props) {
   const {
     persistence,
     showThreadPicker = false,
     onThreadChange,
     classNames,
     header,
+    children,
     ...chatProps
   } = props;
   const persistenceConfig = parsePersistenceConfig(persistence, onThreadChange);
@@ -5190,7 +5477,7 @@ function CopilotChat(props) {
     footer: classNames.footer
   } : void 0;
   const { threadManager, handleSwitchThread, handleNewThread, isBusy } = threadManagerResult;
-  const handleDeleteThread = React7__namespace.default.useCallback(
+  const handleDeleteThread = React18__namespace.default.useCallback(
     (threadId) => {
       const isCurrentThread = threadManager.currentThreadId === threadId;
       threadManager.deleteThread(threadId);
@@ -5241,10 +5528,33 @@ function CopilotChat(props) {
       renderHeader: useCustomHeader ? chatProps.renderHeader : void 0,
       recentThreads: isPersistenceEnabled ? threadManager.threads : void 0,
       onSelectThread: isPersistenceEnabled ? handleSwitchThread : void 0,
-      onDeleteThread: isPersistenceEnabled ? handleDeleteThread : void 0
+      onDeleteThread: isPersistenceEnabled ? handleDeleteThread : void 0,
+      onNewChat: handleNewThread,
+      threads: isPersistenceEnabled ? threadManager.threads : void 0,
+      currentThreadId: threadManager.currentThreadId,
+      onSwitchThread: isPersistenceEnabled ? handleSwitchThread : void 0,
+      isThreadBusy: isBusy,
+      children
     }
   );
 }
+var CopilotChat = Object.assign(CopilotChatBase, {
+  Root: CopilotChatBase,
+  // Alias for layout composition pattern
+  Home: Chat.Home,
+  // Backward compat alias
+  HomeView: Chat.HomeView,
+  // New name
+  ChatView: Chat.ChatView,
+  Header: Chat.Header,
+  Footer: Chat.Footer,
+  Input: Chat.Input,
+  Suggestions: Chat.Suggestions,
+  BackButton: Chat.BackButton,
+  // Navigation: start new chat
+  ThreadPicker: Chat.ThreadPicker
+  // Thread switching
+});
 var ConnectedChat = CopilotChat;
 function YourGPTLogo({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5304,6 +5614,7 @@ exports.ChatContainerScrollAnchor = ChatContainerScrollAnchor;
 exports.ChatWelcome = ChatWelcome;
 exports.CheckIcon = CheckIcon;
 exports.ChevronDownIcon = ChevronDownIcon2;
+exports.ChevronLeftIcon = ChevronLeftIcon;
 exports.ChevronUpIcon = ChevronUpIcon;
 exports.CloseIcon = CloseIcon;
 exports.CodeBlock = CodeBlock;
@@ -5365,6 +5676,7 @@ exports.XIcon = XIcon2;
 exports.cn = cn;
 exports.parseFollowUps = parseFollowUps;
 exports.useChatContainer = useChatContainer;
+exports.useCopilotChatContext = useCopilotChatContext;
 exports.useCopilotUI = useCopilotUI;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map