@copilotkitnext/react 0.0.18 → 0.0.19-threads-and-attachements.0

package/dist/index.mjs

@@ -8,14 +8,14 @@ import {
   useLayoutEffect,
   forwardRef as forwardRef2,
   useImperativeHandle as useImperativeHandle2,
-  useCallback,
+  useCallback as useCallback2,
   useMemo as useMemo2
 } from "react";
 import { twMerge as twMerge3 } from "tailwind-merge";
 import { Plus, Mic, ArrowUp, X, Check, Square } from "lucide-react";
 
 // src/providers/CopilotChatConfigurationProvider.tsx
-import { createContext, useContext, useMemo, useState } from "react";
+import { createContext, useContext, useMemo, useState, useCallback } from "react";
 import { DEFAULT_AGENT_ID, randomUUID } from "@copilotkitnext/shared";
 import { jsx } from "react/jsx-runtime";
 var CopilotChatDefaultLabels = {
@@ -51,15 +51,21 @@ var CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, i
     [labels, parentConfig?.labels]
   );
   const resolvedAgentId = agentId ?? parentConfig?.agentId ?? DEFAULT_AGENT_ID;
-  const resolvedThreadId = useMemo(() => {
-    if (threadId) {
-      return threadId;
-    }
-    if (parentConfig?.threadId) {
-      return parentConfig.threadId;
-    }
+  const [internalThreadId, setInternalThreadId] = useState(() => {
+    if (threadId) return threadId;
+    if (parentConfig?.threadId) return parentConfig.threadId;
     return randomUUID();
-  }, [threadId, parentConfig?.threadId]);
+  });
+  const resolvedThreadId = threadId ?? internalThreadId;
+  const handleSetThreadId = useCallback(
+    (newThreadId) => {
+      if (threadId === void 0) {
+        setInternalThreadId(newThreadId);
+      }
+    },
+    [threadId]
+  );
+  const resolvedSetThreadId = parentConfig?.setThreadId ?? handleSetThreadId;
   const resolvedDefaultOpen = isModalDefaultOpen ?? parentConfig?.isModalDefaultOpen ?? true;
   const [internalModalOpen, setInternalModalOpen] = useState(
     parentConfig?.isModalOpen ?? resolvedDefaultOpen
@@ -71,6 +77,7 @@ var CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, i
       labels: mergedLabels,
       agentId: resolvedAgentId,
       threadId: resolvedThreadId,
+      setThreadId: resolvedSetThreadId,
       isModalOpen: resolvedIsModalOpen,
       setModalOpen: resolvedSetModalOpen,
       isModalDefaultOpen: resolvedDefaultOpen
@@ -79,6 +86,7 @@ var CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, i
       mergedLabels,
       resolvedAgentId,
       resolvedThreadId,
+      resolvedSetThreadId,
       resolvedIsModalOpen,
       resolvedSetModalOpen,
       resolvedDefaultOpen
@@ -664,7 +672,7 @@ function CopilotChatInput({
       setCommandQuery(null);
     }
   }, [mode]);
-  const updateSlashState = useCallback(
+  const updateSlashState = useCallback2(
     (value2) => {
       if (commandItems.length === 0) {
         setCommandQuery((prev) => prev === null ? prev : null);
@@ -691,7 +699,7 @@ function CopilotChatInput({
     onChange?.(nextValue);
     updateSlashState(nextValue);
   };
-  const clearInputValue = useCallback(() => {
+  const clearInputValue = useCallback2(() => {
     if (!isControlled) {
       setInternalValue("");
     }
@@ -699,7 +707,7 @@ function CopilotChatInput({
       onChange("");
     }
   }, [isControlled, onChange]);
-  const runCommand = useCallback(
+  const runCommand = useCallback2(
     (item) => {
       clearInputValue();
       item.action?.();
@@ -787,10 +795,7 @@ function CopilotChatInput({
     onChange: handleChange,
     onKeyDown: handleKeyDown,
     autoFocus,
-    className: twMerge3(
-      "w-full py-3",
-      isExpanded ? "px-5" : "pr-5"
-    )
+    className: twMerge3("w-full py-3", isExpanded ? "px-5" : "pr-5")
   });
   const isProcessing = mode !== "transcribe" && isRunning;
   const canSend = resolvedValue.trim().length > 0 && !!onSubmitMessage;
@@ -852,7 +857,7 @@ function CopilotChatInput({
       inputRef.current.focus();
     }
   };
-  const ensureMeasurements = useCallback(() => {
+  const ensureMeasurements = useCallback2(() => {
     const textarea = inputRef.current;
     if (!textarea) {
       return;
@@ -879,7 +884,7 @@ function CopilotChatInput({
     textarea.style.height = previousHeight;
     textarea.style.maxHeight = `${maxHeight}px`;
   }, []);
-  const adjustTextareaHeight = useCallback(() => {
+  const adjustTextareaHeight = useCallback2(() => {
     const textarea = inputRef.current;
     if (!textarea) {
       return 0;
@@ -900,7 +905,7 @@ function CopilotChatInput({
     }
     return scrollHeight;
   }, [ensureMeasurements]);
-  const updateLayout = useCallback((nextLayout) => {
+  const updateLayout = useCallback2((nextLayout) => {
     setLayout((prev) => {
       if (prev === nextLayout) {
         return prev;
@@ -909,7 +914,7 @@ function CopilotChatInput({
       return nextLayout;
     });
   }, []);
-  const evaluateLayout = useCallback(() => {
+  const evaluateLayout = useCallback2(() => {
     if (mode !== "input") {
       updateLayout("compact");
       return;
@@ -1031,10 +1036,10 @@ function CopilotChatInput({
     if (!slashMenuVisible || slashHighlightIndex < 0) {
       return;
     }
-    const active = slashMenuRef.current?.querySelector(
-      `[data-slash-index="${slashHighlightIndex}"]`
-    );
-    active?.scrollIntoView({ block: "nearest" });
+    const active = slashMenuRef.current?.querySelector(`[data-slash-index="${slashHighlightIndex}"]`);
+    if (active && typeof active.scrollIntoView === "function") {
+      active.scrollIntoView({ block: "nearest" });
+    }
   }, [slashMenuVisible, slashHighlightIndex]);
   const slashMenu = slashMenuVisible ? /* @__PURE__ */ jsx6(
     "div",
@@ -1105,11 +1110,7 @@ function CopilotChatInput({
               "div",
               {
                 ref: addButtonContainerRef,
-                className: twMerge3(
-                  "flex items-center",
-                  isExpanded ? "row-start-2" : "row-start-1",
-                  "col-start-1"
-                ),
+                className: twMerge3("flex items-center", isExpanded ? "row-start-2" : "row-start-1", "col-start-1"),
                 children: BoundAddMenuButton
               }
             ),
@@ -1237,7 +1238,7 @@ function CopilotChatInput({
       }
       return items;
     }, [onAddFile, toolsMenu, labels.chatInputToolbarAddButtonLabel]);
-    const renderMenuItems = useCallback(
+    const renderMenuItems = useCallback2(
       (items) => items.map((item, index) => {
         if (item === "-") {
           return /* @__PURE__ */ jsx6(DropdownMenuSeparator, {}, `separator-${index}`);
@@ -1286,7 +1287,9 @@ function CopilotChatInput({
       if (!textarea) return;
       const handleFocus = () => {
         setTimeout(() => {
-          textarea.scrollIntoView({ behavior: "smooth", block: "nearest" });
+          if (typeof textarea.scrollIntoView === "function") {
+            textarea.scrollIntoView({ behavior: "smooth", block: "nearest" });
+          }
         }, 300);
       };
       textarea.addEventListener("focus", handleFocus);
@@ -1328,7 +1331,7 @@ CopilotChatInput.AddMenuButton.displayName = "CopilotChatInput.AddMenuButton";
 var CopilotChatInput_default = CopilotChatInput;
 
 // src/components/chat/CopilotChatAssistantMessage.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import {
   Copy,
   Check as Check2,
@@ -1342,7 +1345,7 @@ import "katex/dist/katex.min.css";
 import { Streamdown } from "streamdown";
 
 // src/hooks/use-render-tool-call.tsx
-import { useCallback as useCallback2, useEffect as useEffect5, useState as useState4, useSyncExternalStore } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useState as useState4, useSyncExternalStore } from "react";
 import { ToolCallStatus } from "@copilotkitnext/core";
 
 // src/providers/CopilotKitProvider.tsx
@@ -1353,7 +1356,8 @@ import {
   useEffect as useEffect4,
   useReducer,
   useRef as useRef4,
-  useState as useState3
+  useState as useState3,
+  useCallback as useCallback3
 } from "react";
 import { z } from "zod";
 
@@ -1400,16 +1404,15 @@ var CopilotKitCoreReact = class extends CopilotKitCore {
 // src/components/CopilotKitInspector.tsx
 import * as React4 from "react";
 import { createComponent } from "@lit-labs/react";
-import {
-  WEB_INSPECTOR_TAG,
-  WebInspectorElement,
-  defineWebInspector
-} from "@copilotkitnext/web-inspector";
+import * as WebInspectorModule from "@copilotkitnext/web-inspector";
 import { jsx as jsx7 } from "react/jsx-runtime";
-defineWebInspector();
+var WEB_INSPECTOR_TAG2 = WebInspectorModule.WEB_INSPECTOR_TAG;
+var defineWebInspector2 = WebInspectorModule.defineWebInspector;
+var WebInspectorElementClass = WebInspectorModule.WebInspectorElement;
+defineWebInspector2();
 var CopilotKitInspectorBase = createComponent({
-  tagName: WEB_INSPECTOR_TAG,
-  elementClass: WebInspectorElement,
+  tagName: WEB_INSPECTOR_TAG2,
+  elementClass: WebInspectorElementClass,
   react: React4
 });
 var CopilotKitInspector = React4.forwardRef(
@@ -1435,7 +1438,10 @@ CopilotKitInspector.displayName = "CopilotKitInspector";
 // src/providers/CopilotKitProvider.tsx
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var CopilotKitContext = createContext2({
-  copilotkit: null
+  copilotkit: null,
+  setResourceId: () => {
+    throw new Error("useCopilotKit must be used within CopilotKitProvider");
+  }
 });
 function useStableArrayProp(prop, warningMessage, isMeaningfulChange) {
   const empty = useMemo3(() => [], []);
@@ -1453,6 +1459,7 @@ var CopilotKitProvider = ({
   runtimeUrl,
   headers = {},
   properties = {},
+  resourceId,
   agents__unsafe_dev_only: agents = {},
   renderToolCalls,
   renderCustomMessages,
@@ -1560,6 +1567,7 @@ var CopilotKitProvider = ({
       runtimeUrl,
       headers,
       properties,
+      resourceId,
       agents__unsafe_dev_only: agents,
       tools: allTools,
       renderToolCalls: allRenderToolCalls,
@@ -1582,13 +1590,36 @@ var CopilotKitProvider = ({
     copilotkit.setRuntimeUrl(runtimeUrl);
     copilotkit.setHeaders(headers);
     copilotkit.setProperties(properties);
+    copilotkit.setResourceId(resourceId);
     copilotkit.setAgents__unsafe_dev_only(agents);
-  }, [runtimeUrl, headers, properties, agents]);
+  }, [runtimeUrl, headers, properties, resourceId, agents]);
+  useEffect4(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const isProduction = process.env.NODE_ENV === "production";
+    if (isProduction && !resourceId) {
+      console.error(
+        "CopilotKit Security Warning: No resourceId set in production.\nAll threads will be globally accessible. Set the resourceId prop:\n<CopilotKitProvider resourceId={userId}>\nLearn more: https://docs.copilotkit.ai/security/resource-scoping"
+      );
+    } else if (!isProduction && !resourceId) {
+      console.warn(
+        "CopilotKit: No resourceId set. All threads are globally accessible.\nThis is fine for development, but add resourceId for production:\n<CopilotKitProvider resourceId={userId}>"
+      );
+    }
+  }, [resourceId]);
+  const setResourceId = useCallback3(
+    (newResourceId) => {
+      copilotkit.setResourceId(newResourceId);
+    },
+    [copilotkit]
+  );
   return /* @__PURE__ */ jsxs4(
     CopilotKitContext.Provider,
     {
       value: {
-        copilotkit
+        copilotkit,
+        setResourceId
       },
       children: [
         children,
@@ -1607,6 +1638,9 @@ var useCopilotKit = () => {
     const unsubscribe = context.copilotkit.subscribe({
       onRuntimeConnectionStatusChanged: () => {
         forceUpdate();
+      },
+      onResourceIdChanged: () => {
+        forceUpdate();
       }
     });
     return () => {
@@ -1655,7 +1689,7 @@ function useRenderToolCall() {
     });
     return () => unsubscribe();
   }, [copilotkit]);
-  const renderToolCall = useCallback2(
+  const renderToolCall = useCallback4(
     ({
       toolCall,
       toolMessage
@@ -1735,33 +1769,38 @@ function useRenderCustomMessages() {
     if (!agent) {
       throw new Error("Agent not found");
     }
-    const messagesIdsInRun = agent.messages.filter((msg) => copilotkit.getRunIdForMessage(agentId, threadId, msg.id) === runId).map((msg) => msg.id);
+    const messagesIdsInRun = runId ? agent.messages.filter((msg) => copilotkit.getRunIdForMessage(agentId, threadId, msg.id) === runId).map((msg) => msg.id) : [];
     const messageIndex = agent.messages.findIndex((msg) => msg.id === message.id) ?? 0;
-    const messageIndexInRun = Math.min(messagesIdsInRun.indexOf(message.id), 0);
+    const messageIndexInRun = Math.max(messagesIdsInRun.indexOf(message.id), 0);
     const numberOfMessagesInRun = messagesIdsInRun.length;
-    const stateSnapshot = copilotkit.getStateByRun(agentId, threadId, runId);
+    const stateSnapshot = runId ? copilotkit.getStateByRun(agentId, threadId, runId) : void 0;
     let result = null;
     for (const renderer of customMessageRenderers) {
       if (!renderer.render) {
         continue;
       }
-      const Component = renderer.render;
-      result = /* @__PURE__ */ jsx10(
-        Component,
-        {
-          message,
-          position,
-          runId,
-          messageIndex,
-          messageIndexInRun,
-          numberOfMessagesInRun,
-          agentId,
-          stateSnapshot
-        },
-        `${runId}-${message.id}-${position}`
-      );
-      if (result) {
-        break;
+      try {
+        const Component = renderer.render;
+        result = /* @__PURE__ */ jsx10(
+          Component,
+          {
+            message,
+            position,
+            runId: runId ?? "",
+            messageIndex,
+            messageIndexInRun,
+            numberOfMessagesInRun,
+            agentId,
+            stateSnapshot
+          },
+          `${runId ?? "no-run"}-${message.id}-${position}`
+        );
+        if (result) {
+          break;
+        }
+      } catch (error) {
+        console.error("Error rendering custom message:", error);
+        continue;
       }
     }
     return result;
@@ -1804,7 +1843,7 @@ function useFrontendTool(tool) {
 }
 
 // src/hooks/use-human-in-the-loop.tsx
-import { useState as useState5, useCallback as useCallback3, useRef as useRef5, useEffect as useEffect7 } from "react";
+import { useState as useState5, useCallback as useCallback5, useRef as useRef5, useEffect as useEffect7 } from "react";
 import React7 from "react";
 function useHumanInTheLoop(tool) {
   const { copilotkit } = useCopilotKit();
@@ -1814,20 +1853,20 @@ function useHumanInTheLoop(tool) {
   const statusRef = useRef5(status);
   const resolvePromiseRef = useRef5(null);
   statusRef.current = status;
-  const respond = useCallback3(async (result) => {
+  const respond = useCallback5(async (result) => {
     if (resolvePromiseRef.current) {
       resolvePromiseRef.current(result);
       setStatus("complete");
       resolvePromiseRef.current = null;
     }
   }, []);
-  const handler = useCallback3(async () => {
+  const handler = useCallback5(async () => {
     return new Promise((resolve) => {
       setStatus("executing");
       resolvePromiseRef.current = resolve;
     });
   }, []);
-  const RenderComponent = useCallback3(
+  const RenderComponent = useCallback5(
     (props) => {
       const ToolComponent = tool.render;
       const currentStatus = statusRef.current;
@@ -1890,18 +1929,10 @@ function useAgent({ agentId, updates } = {}) {
   agentId ??= DEFAULT_AGENT_ID3;
   const { copilotkit } = useCopilotKit();
   const [, forceUpdate] = useReducer2((x) => x + 1, 0);
-  const updateFlags = useMemo4(
-    () => updates ?? ALL_UPDATES,
-    [JSON.stringify(updates)]
-  );
+  const updateFlags = useMemo4(() => updates ?? ALL_UPDATES, [JSON.stringify(updates)]);
   const agent = useMemo4(() => {
     return copilotkit.getAgent(agentId);
-  }, [
-    agentId,
-    copilotkit.agents,
-    copilotkit.runtimeConnectionStatus,
-    copilotkit
-  ]);
+  }, [agentId, copilotkit.agents, copilotkit.runtimeConnectionStatus, copilotkit]);
   useEffect8(() => {
     if (!agent) {
       return;
@@ -1954,7 +1985,7 @@ function useAgentContext(context) {
 }
 
 // src/hooks/use-suggestions.tsx
-import { useCallback as useCallback4, useEffect as useEffect10, useMemo as useMemo5, useState as useState6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect10, useMemo as useMemo5, useState as useState6 } from "react";
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID4 } from "@copilotkitnext/shared";
 function useSuggestions({ agentId } = {}) {
   const { copilotkit } = useCopilotKit();
@@ -2003,10 +2034,10 @@ function useSuggestions({ agentId } = {}) {
       unsubscribe();
     };
   }, [copilotkit, resolvedAgentId]);
-  const reloadSuggestions = useCallback4(() => {
+  const reloadSuggestions = useCallback6(() => {
     copilotkit.reloadSuggestions(resolvedAgentId);
   }, [copilotkit, resolvedAgentId]);
-  const clearSuggestions = useCallback4(() => {
+  const clearSuggestions = useCallback6(() => {
     copilotkit.clearSuggestions(resolvedAgentId);
   }, [copilotkit, resolvedAgentId]);
   return {
@@ -2018,7 +2049,7 @@ function useSuggestions({ agentId } = {}) {
 }
 
 // src/hooks/use-configure-suggestions.tsx
-import { useCallback as useCallback5, useEffect as useEffect11, useMemo as useMemo6, useRef as useRef6 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo6, useRef as useRef6 } from "react";
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID5 } from "@copilotkitnext/shared";
 var EMPTY_DEPS = [];
 function useConfigureSuggestions(config, options) {
@@ -2075,7 +2106,7 @@ function useConfigureSuggestions(config, options) {
     return consumer;
   }, [normalizedConfig, resolvedConsumerAgentId]);
   const isGlobalConfig = rawConsumerAgentId === void 0 || rawConsumerAgentId === "*";
-  const requestReload = useCallback5(() => {
+  const requestReload = useCallback7(() => {
     if (!normalizedConfig) {
       return;
     }
@@ -2137,6 +2168,135 @@ function normalizeStaticSuggestions(suggestions) {
   }));
 }
 
+// src/hooks/use-threads.tsx
+import { useCallback as useCallback8, useEffect as useEffect12, useState as useState7 } from "react";
+function useThreads(options = {}) {
+  const { limit = 50, autoFetch = true } = options;
+  const { copilotkit: core } = useCopilotKit();
+  const chatConfig = useCopilotChatConfiguration();
+  const [threads, setThreads] = useState7([]);
+  const [total, setTotal] = useState7(0);
+  const [isLoading, setIsLoading] = useState7(false);
+  const [error, setError] = useState7(null);
+  const fetchThreads = useCallback8(
+    async (offset = 0) => {
+      if (!core) {
+        return;
+      }
+      setIsLoading(true);
+      setError(null);
+      try {
+        const result = await core.listThreads({ limit, offset });
+        setThreads(result.threads);
+        setTotal(result.total);
+      } catch (err) {
+        const error2 = err instanceof Error ? err : new Error("Failed to fetch threads");
+        setError(error2);
+        console.error("Error fetching threads:", error2);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [core, limit]
+  );
+  const getThreadMetadata = useCallback8(
+    async (threadId) => {
+      if (!core) {
+        throw new Error("CopilotKit core not initialized");
+      }
+      try {
+        return await core.getThreadMetadata(threadId);
+      } catch (err) {
+        const error2 = err instanceof Error ? err : new Error("Failed to get thread metadata");
+        console.error("Error getting thread metadata:", error2);
+        throw error2;
+      }
+    },
+    [core]
+  );
+  const refresh = useCallback8(() => fetchThreads(0), [fetchThreads]);
+  const addOptimisticThread = useCallback8((threadId) => {
+    const newThread = {
+      threadId,
+      createdAt: Date.now(),
+      lastActivityAt: Date.now(),
+      isRunning: false,
+      messageCount: 0,
+      firstMessage: void 0
+    };
+    setThreads((prev) => [newThread, ...prev]);
+    setTotal((prev) => prev + 1);
+  }, []);
+  const deleteThread = useCallback8(
+    async (threadId) => {
+      if (!core) {
+        throw new Error("CopilotKit core not initialized");
+      }
+      const originalThreads = threads;
+      const originalTotal = total;
+      const threadIndex = threads.findIndex((t) => t.threadId === threadId);
+      const deletedThread = threadIndex >= 0 ? threads[threadIndex] : null;
+      if (threadIndex >= 0) {
+        setThreads((prev) => prev.filter((t) => t.threadId !== threadId));
+        setTotal((prev) => prev - 1);
+      }
+      try {
+        await core.deleteThread(threadId);
+        await fetchThreads();
+      } catch (err) {
+        if (deletedThread && threadIndex >= 0) {
+          setThreads((prev) => {
+            const newThreads = [...prev];
+            newThreads.splice(threadIndex, 0, deletedThread);
+            return newThreads;
+          });
+          setTotal(originalTotal);
+        } else {
+          setThreads(originalThreads);
+          setTotal(originalTotal);
+        }
+        const error2 = err instanceof Error ? err : new Error("Failed to delete thread");
+        console.error("Error deleting thread:", error2);
+        throw error2;
+      }
+    },
+    [core, fetchThreads, threads, total]
+  );
+  useEffect12(() => {
+    if (autoFetch && core) {
+      void fetchThreads();
+    }
+  }, [autoFetch, core, fetchThreads]);
+  return {
+    threads,
+    total,
+    isLoading,
+    error,
+    fetchThreads,
+    getThreadMetadata,
+    refresh,
+    addOptimisticThread,
+    deleteThread,
+    currentThreadId: chatConfig?.threadId
+  };
+}
+
+// src/hooks/use-thread-switcher.tsx
+import { useCallback as useCallback9 } from "react";
+function useThreadSwitch() {
+  const config = useCopilotChatConfiguration();
+  const switchThread = useCallback9(
+    (threadId) => {
+      config?.setThreadId?.(threadId);
+    },
+    [config]
+  );
+  return {
+    switchThread,
+    currentThreadId: config?.threadId
+  };
+}
+
 // src/components/chat/CopilotChatToolCallsView.tsx
 import React8 from "react";
 import { Fragment as Fragment2, jsx as jsx11 } from "react/jsx-runtime";
@@ -2148,14 +2308,14 @@ function CopilotChatToolCallsView({
   if (!message.toolCalls || message.toolCalls.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx11(Fragment2, { children: message.toolCalls.map((toolCall) => {
+  return /* @__PURE__ */ jsx11(Fragment2, { children: message.toolCalls.map((toolCall, index) => {
     const toolMessage = messages.find(
       (m) => m.role === "tool" && m.toolCallId === toolCall.id
     );
     return /* @__PURE__ */ jsx11(React8.Fragment, { children: renderToolCall({
       toolCall,
       toolMessage
-    }) }, toolCall.id);
+    }) }, `${message.id}-${toolCall.id ?? index}-${index}`);
   }) });
 }
 var CopilotChatToolCallsView_default = CopilotChatToolCallsView;
@@ -2330,7 +2490,7 @@ function CopilotChatAssistantMessage({
   CopilotChatAssistantMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    const [copied, setCopied] = useState7(false);
+    const [copied, setCopied] = useState8(false);
     const handleClick = (event) => {
       setCopied(true);
       setTimeout(() => setCopied(false), 2e3);
@@ -2408,9 +2568,14 @@ CopilotChatAssistantMessage.RegenerateButton.displayName = "CopilotChatAssistant
 var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
 
 // src/components/chat/CopilotChatUserMessage.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { Copy as Copy2, Check as Check3, Edit, ChevronLeft, ChevronRight } from "lucide-react";
 import { twMerge as twMerge5 } from "tailwind-merge";
+import {
+  getUserMessageBinaryContents,
+  getUserMessageTextContent,
+  normalizeUserMessageContents
+} from "@copilotkitnext/shared";
 import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 function CopilotChatUserMessage({
   message,
@@ -2432,7 +2597,8 @@ function CopilotChatUserMessage({
     messageRenderer,
     CopilotChatUserMessage.MessageRenderer,
     {
-      content: message.content || ""
+      content: getUserMessageTextContent(message.content),
+      contents: normalizeUserMessageContents(message.content)
     }
   );
   const BoundCopyButton = renderSlot(
@@ -2440,9 +2606,10 @@ function CopilotChatUserMessage({
     CopilotChatUserMessage.CopyButton,
     {
       onClick: async () => {
-        if (message.content) {
+        const textContent = getUserMessageTextContent(message.content);
+        if (textContent.trim().length > 0) {
           try {
-            await navigator.clipboard.writeText(message.content);
+            await navigator.clipboard.writeText(textContent);
           } catch (err) {
             console.error("Failed to copy message:", err);
           }
@@ -2511,16 +2678,33 @@ function CopilotChatUserMessage({
       children
     }
   );
-  CopilotChatUserMessage2.MessageRenderer = ({ content, className }) => /* @__PURE__ */ jsx13(
-    "div",
-    {
-      className: twMerge5(
-        "prose dark:prose-invert bg-muted relative max-w-[80%] rounded-[18px] px-4 py-1.5 data-[multiline]:py-3 inline-block whitespace-pre-wrap",
-        className
-      ),
-      children: content
-    }
-  );
+  CopilotChatUserMessage2.MessageRenderer = ({
+    content,
+    contents = [],
+    className
+  }) => {
+    const attachments = getUserMessageBinaryContents(contents);
+    const hasText = content.trim().length > 0;
+    return /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: twMerge5(
+          "prose dark:prose-invert bg-muted relative max-w-[80%] rounded-[18px] px-4 py-1.5 data-[multiline]:py-3 inline-block whitespace-pre-wrap",
+          className
+        ),
+        children: [
+          hasText && /* @__PURE__ */ jsx13("span", { children: content }),
+          attachments.length > 0 && /* @__PURE__ */ jsx13("div", { className: twMerge5(hasText ? "mt-3 flex flex-col gap-2" : "flex flex-col gap-2"), children: attachments.map((attachment, index) => /* @__PURE__ */ jsx13(
+            AttachmentPreview,
+            {
+              attachment
+            },
+            attachment.id ?? attachment.url ?? attachment.filename ?? index
+          )) })
+        ]
+      }
+    );
+  };
   CopilotChatUserMessage2.Toolbar = ({
     className,
     ...props
@@ -2553,7 +2737,7 @@ function CopilotChatUserMessage({
   CopilotChatUserMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    const [copied, setCopied] = useState8(false);
+    const [copied, setCopied] = useState9(false);
     const handleClick = (event) => {
       setCopied(true);
       setTimeout(() => setCopied(false), 2e3);
@@ -2637,6 +2821,47 @@ function CopilotChatUserMessage({
     ] });
   };
 })(CopilotChatUserMessage || (CopilotChatUserMessage = {}));
+var AttachmentPreview = ({ attachment }) => {
+  const source = resolveAttachmentSource(attachment);
+  const isImage = attachment.mimeType.startsWith("image/");
+  const label = attachment.filename ?? attachment.id ?? attachment.mimeType;
+  if (isImage && source) {
+    return /* @__PURE__ */ jsxs6("figure", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx13(
+        "img",
+        {
+          src: source,
+          alt: label ?? "User provided image",
+          className: "max-h-64 rounded-lg border border-border object-contain"
+        }
+      ),
+      /* @__PURE__ */ jsx13("figcaption", { className: "text-xs text-muted-foreground", children: label ?? "Image attachment" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs6("div", { className: "rounded-md border border-dashed border-border bg-muted/70 px-3 py-2 text-xs text-muted-foreground", children: [
+    label ?? "Attachment",
+    /* @__PURE__ */ jsx13("span", { className: "block text-[10px] uppercase tracking-wide text-muted-foreground/70", children: attachment.mimeType }),
+    source && !isImage ? /* @__PURE__ */ jsx13(
+      "a",
+      {
+        href: source,
+        target: "_blank",
+        rel: "noreferrer",
+        className: "mt-1 block text-xs text-primary underline",
+        children: "Open"
+      }
+    ) : null
+  ] });
+};
+function resolveAttachmentSource(attachment) {
+  if (attachment.url) {
+    return attachment.url;
+  }
+  if (attachment.data) {
+    return `data:${attachment.mimeType};base64,${attachment.data}`;
+  }
+  return null;
+}
 CopilotChatUserMessage.Container.displayName = "CopilotChatUserMessage.Container";
 CopilotChatUserMessage.MessageRenderer.displayName = "CopilotChatUserMessage.MessageRenderer";
 CopilotChatUserMessage.Toolbar.displayName = "CopilotChatUserMessage.Toolbar";
@@ -2826,21 +3051,21 @@ CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
 var CopilotChatMessageView_default = CopilotChatMessageView;
 
 // src/components/chat/CopilotChatView.tsx
-import React11, { useRef as useRef7, useState as useState10, useEffect as useEffect13 } from "react";
+import React11, { useRef as useRef7, useState as useState11, useEffect as useEffect14 } from "react";
 import { twMerge as twMerge7 } from "tailwind-merge";
 import { StickToBottom, useStickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 import { ChevronDown } from "lucide-react";
 
 // src/hooks/use-keyboard-height.tsx
-import { useState as useState9, useEffect as useEffect12 } from "react";
+import { useState as useState10, useEffect as useEffect13 } from "react";
 function useKeyboardHeight() {
-  const [keyboardState, setKeyboardState] = useState9({
+  const [keyboardState, setKeyboardState] = useState10({
     isKeyboardOpen: false,
     keyboardHeight: 0,
     availableHeight: typeof window !== "undefined" ? window.innerHeight : 0,
     viewportHeight: typeof window !== "undefined" ? window.innerHeight : 0
   });
-  useEffect12(() => {
+  useEffect13(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -2884,8 +3109,10 @@ function CopilotChatView({
   suggestionView,
   messages = [],
   autoScroll = true,
+  scrollBehavior = "auto",
   inputProps,
   isRunning = false,
+  isSwitchingThread = false,
   suggestions,
   suggestionLoadingIndexes,
   onSelectSuggestion,
@@ -2894,11 +3121,11 @@ function CopilotChatView({
   ...props
 }) {
   const inputContainerRef = useRef7(null);
-  const [inputContainerHeight, setInputContainerHeight] = useState10(0);
-  const [isResizing, setIsResizing] = useState10(false);
+  const [inputContainerHeight, setInputContainerHeight] = useState11(0);
+  const [isResizing, setIsResizing] = useState11(false);
   const resizeTimeoutRef = useRef7(null);
   const { isKeyboardOpen, keyboardHeight, availableHeight } = useKeyboardHeight();
-  useEffect13(() => {
+  useEffect14(() => {
     const element = inputContainerRef.current;
     if (!element) return;
     const resizeObserver = new ResizeObserver((entries) => {
@@ -2947,6 +3174,8 @@ function CopilotChatView({
   const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
   const BoundScrollView = renderSlot(scrollView, CopilotChatView.ScrollView, {
     autoScroll,
+    scrollBehavior,
+    isSwitchingThread,
     scrollToBottomButton,
     inputContainerHeight,
     isResizing,
@@ -3005,19 +3234,21 @@ function CopilotChatView({
   CopilotChatView2.ScrollView = ({
     children,
     autoScroll = true,
+    scrollBehavior = "auto",
+    isSwitchingThread = false,
     scrollToBottomButton,
     inputContainerHeight = 0,
     isResizing = false,
     className,
     ...props
   }) => {
-    const [hasMounted, setHasMounted] = useState10(false);
+    const [hasMounted, setHasMounted] = useState11(false);
     const { scrollRef, contentRef, scrollToBottom } = useStickToBottom();
-    const [showScrollButton, setShowScrollButton] = useState10(false);
-    useEffect13(() => {
+    const [showScrollButton, setShowScrollButton] = useState11(false);
+    useEffect14(() => {
       setHasMounted(true);
     }, []);
-    useEffect13(() => {
+    useEffect14(() => {
       if (autoScroll) return;
       const scrollElement = scrollRef.current;
       if (!scrollElement) return;
@@ -3065,12 +3296,14 @@ function CopilotChatView({
         }
       );
     }
+    const initial = scrollBehavior === "auto" ? "instant" : scrollBehavior;
+    const resize = scrollBehavior === "instant" ? "instant" : scrollBehavior === "auto" && isSwitchingThread ? "instant" : "smooth";
     return /* @__PURE__ */ jsx17(
       StickToBottom,
       {
         className: cn("h-full max-h-full flex flex-col min-h-0 relative", className),
-        resize: "smooth",
-        initial: "smooth",
+        resize,
+        initial,
         ...props,
         children: /* @__PURE__ */ jsx17(
           ScrollContent,
@@ -3149,19 +3382,94 @@ var CopilotChatView_default = CopilotChatView;
 
 // src/components/chat/CopilotChat.tsx
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID6, randomUUID as randomUUID2 } from "@copilotkitnext/shared";
-import { useCallback as useCallback6, useEffect as useEffect14, useMemo as useMemo7 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect15, useRef as useRef8, useState as useState12 } from "react";
 import { merge } from "ts-deepmerge";
-import { AGUIConnectNotImplementedError } from "@ag-ui/client";
 import { jsx as jsx18 } from "react/jsx-runtime";
 function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen, ...props }) {
   const existingConfig = useCopilotChatConfiguration();
+  const hasOverrideProps = agentId !== void 0 || threadId !== void 0 || labels !== void 0 || isModalDefaultOpen !== void 0;
+  if (!existingConfig || hasOverrideProps) {
+    return /* @__PURE__ */ jsx18(
+      CopilotChatConfigurationProvider,
+      {
+        agentId,
+        threadId,
+        labels,
+        isModalDefaultOpen,
+        children: /* @__PURE__ */ jsx18(CopilotChat, { chatView, ...props })
+      }
+    );
+  }
   const resolvedAgentId = agentId ?? existingConfig?.agentId ?? DEFAULT_AGENT_ID6;
-  const resolvedThreadId = useMemo7(
-    () => threadId ?? existingConfig?.threadId ?? randomUUID2(),
-    [threadId, existingConfig?.threadId]
-  );
+  const resolvedThreadId = threadId ?? existingConfig?.threadId;
   const { agent } = useAgent({ agentId: resolvedAgentId });
   const { copilotkit } = useCopilotKit();
+  const [isSwitchingThread, setIsSwitchingThread] = useState12(false);
+  const [threadSwitchError, setThreadSwitchError] = useState12(null);
+  const previousThreadIdRef = useRef8(void 0);
+  const abortControllerRef = useRef8(null);
+  useEffect15(() => {
+    if (!agent || !resolvedThreadId) return;
+    if (previousThreadIdRef.current === resolvedThreadId) return;
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
+    const switchThread = async () => {
+      setIsSwitchingThread(true);
+      setThreadSwitchError(null);
+      try {
+        if (abortController.signal.aborted) return;
+        if (previousThreadIdRef.current) {
+          try {
+            await copilotkit.disconnectAgent({ agent });
+          } catch (disconnectErr) {
+            console.warn("Error during disconnect, continuing with thread switch:", disconnectErr);
+          }
+        }
+        if (abortController.signal.aborted) {
+          previousThreadIdRef.current = void 0;
+          return;
+        }
+        agent.messages = [];
+        const subscribers = agent.subscribers || [];
+        subscribers.forEach((subscriber) => {
+          if (subscriber.onMessagesChanged) {
+            subscriber.onMessagesChanged({
+              messages: agent.messages,
+              state: agent.state,
+              agent
+            });
+          }
+        });
+        if (abortController.signal.aborted) {
+          previousThreadIdRef.current = void 0;
+          return;
+        }
+        await copilotkit.connectAgent({ agent, threadId: resolvedThreadId });
+        if (!abortController.signal.aborted) {
+          previousThreadIdRef.current = resolvedThreadId;
+        }
+      } catch (err) {
+        if (abortController.signal.aborted) {
+          previousThreadIdRef.current = void 0;
+          return;
+        }
+        const error = err instanceof Error ? err : new Error(String(err));
+        setThreadSwitchError(error);
+        console.error("Failed to switch thread:", error);
+      } finally {
+        if (!abortController.signal.aborted) {
+          setIsSwitchingThread(false);
+        }
+      }
+    };
+    void switchThread();
+    return () => {
+      abortController.abort();
+    };
+  }, [agent, resolvedThreadId, copilotkit]);
   const { suggestions: autoSuggestions } = useSuggestions({ agentId: resolvedAgentId });
   const {
     inputProps: providedInputProps,
@@ -3169,25 +3477,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     suggestionView: providedSuggestionView,
     ...restProps
   } = props;
-  useEffect14(() => {
-    const connect = async (agent2) => {
-      try {
-        await copilotkit.connectAgent({ agent: agent2 });
-      } catch (error) {
-        if (error instanceof AGUIConnectNotImplementedError) {
-        } else {
-          throw error;
-        }
-      }
-    };
-    if (agent) {
-      agent.threadId = resolvedThreadId;
-      connect(agent);
-    }
-    return () => {
-    };
-  }, [resolvedThreadId, agent, copilotkit, resolvedAgentId]);
-  const onSubmitInput = useCallback6(
+  const onSubmitInput = useCallback10(
     async (value) => {
       agent?.addMessage({
         id: randomUUID2(),
@@ -3204,7 +3494,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     },
     [agent, copilotkit]
   );
-  const handleSelectSuggestion = useCallback6(
+  const handleSelectSuggestion = useCallback10(
     async (suggestion) => {
       if (!agent) {
         return;
@@ -3222,7 +3512,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     },
     [agent, copilotkit]
   );
-  const stopCurrentRun = useCallback6(() => {
+  const stopCurrentRun = useCallback10(() => {
     if (!agent) {
       return;
     }
@@ -3264,24 +3554,27 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     messages: agent?.messages ?? [],
     inputProps: finalInputProps
   });
-  const RenderedChatView = renderSlot(chatView, CopilotChatView, finalProps);
-  return /* @__PURE__ */ jsx18(
-    CopilotChatConfigurationProvider,
-    {
-      agentId: resolvedAgentId,
-      threadId: resolvedThreadId,
-      labels,
-      isModalDefaultOpen,
-      children: RenderedChatView
-    }
-  );
+  const inputPropsWithThreadState = {
+    ...finalProps.inputProps ?? {},
+    mode: isSwitchingThread ? "processing" : finalProps.inputProps?.mode
+  };
+  const finalPropsWithThreadState = {
+    ...finalProps,
+    isRunning: (finalProps.isRunning ?? false) || isSwitchingThread,
+    inputProps: inputPropsWithThreadState,
+    // Pass thread switching state to control scroll behavior
+    isSwitchingThread,
+    "data-thread-switching": isSwitchingThread ? "true" : void 0,
+    "data-thread-switch-error": threadSwitchError ? threadSwitchError.message : void 0
+  };
+  return renderSlot(chatView, CopilotChatView, finalPropsWithThreadState);
 }
 ((CopilotChat2) => {
   CopilotChat2.View = CopilotChatView;
 })(CopilotChat || (CopilotChat = {}));
 
 // src/components/chat/CopilotChatToggleButton.tsx
-import React12, { useState as useState11 } from "react";
+import React12, { useState as useState13 } from "react";
 import { MessageCircle, X as X2 } from "lucide-react";
 import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var DefaultOpenIcon = ({
@@ -3312,7 +3605,7 @@ var CopilotChatToggleButton = React12.forwardRef(function CopilotChatToggleButto
   const { onClick, type, disabled, ...restProps } = buttonProps;
   const configuration = useCopilotChatConfiguration();
   const labels = configuration?.labels ?? CopilotChatDefaultLabels;
-  const [fallbackOpen, setFallbackOpen] = useState11(false);
+  const [fallbackOpen, setFallbackOpen] = useState13(false);
   const isOpen = configuration?.isModalOpen ?? fallbackOpen;
   const setModalOpen = configuration?.setModalOpen ?? setFallbackOpen;
   const handleClick = (event) => {
@@ -3398,16 +3691,21 @@ CopilotChatToggleButton.displayName = "CopilotChatToggleButton";
 var CopilotChatToggleButton_default = CopilotChatToggleButton;
 
 // src/components/chat/CopilotSidebarView.tsx
-import { useEffect as useEffect15, useRef as useRef8, useState as useState12 } from "react";
+import { useEffect as useEffect17, useRef as useRef10, useState as useState15, useCallback as useCallback13 } from "react";
 
 // src/components/chat/CopilotModalHeader.tsx
-import { useCallback as useCallback7 } from "react";
-import { X as X3 } from "lucide-react";
+import { useCallback as useCallback11 } from "react";
+import { X as X3, List, SquarePen } from "lucide-react";
 import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 function CopilotModalHeader({
   title,
   titleContent,
   closeButton,
+  leftContent,
+  onThreadListClick,
+  showThreadListButton = false,
+  onNewThreadClick,
+  showNewThreadButton = false,
   children,
   className,
   ...rest
@@ -3415,7 +3713,7 @@ function CopilotModalHeader({
   const configuration = useCopilotChatConfiguration();
   const fallbackTitle = configuration?.labels.modalHeaderTitle ?? CopilotChatDefaultLabels.modalHeaderTitle;
   const resolvedTitle = title ?? fallbackTitle;
-  const handleClose = useCallback7(() => {
+  const handleClose = useCallback11(() => {
     configuration?.setModalOpen(false);
   }, [configuration]);
   const BoundTitle = renderSlot(titleContent, CopilotModalHeader.Title, {
@@ -3424,10 +3722,17 @@ function CopilotModalHeader({
   const BoundCloseButton = renderSlot(closeButton, CopilotModalHeader.CloseButton, {
     onClick: handleClose
   });
+  const BoundLeftContent = renderSlot(leftContent, CopilotModalHeader.LeftContent, {
+    onThreadListClick,
+    showThreadListButton,
+    onNewThreadClick,
+    showNewThreadButton
+  });
   if (children) {
     return children({
       titleContent: BoundTitle,
       closeButton: BoundCloseButton,
+      leftContent: BoundLeftContent,
       title: resolvedTitle,
       ...rest
     });
@@ -3443,7 +3748,7 @@ function CopilotModalHeader({
       ),
       ...rest,
       children: /* @__PURE__ */ jsxs12("div", { className: "flex w-full items-center gap-2", children: [
-        /* @__PURE__ */ jsx20("div", { className: "flex-1", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx20("div", { className: "flex flex-1 justify-start", children: BoundLeftContent }),
         /* @__PURE__ */ jsx20("div", { className: "flex flex-1 justify-center text-center", children: BoundTitle }),
         /* @__PURE__ */ jsx20("div", { className: "flex flex-1 justify-end", children: BoundCloseButton })
       ] })
@@ -3480,19 +3785,281 @@ CopilotModalHeader.displayName = "CopilotModalHeader";
       children: /* @__PURE__ */ jsx20(X3, { className: "h-4 w-4", "aria-hidden": "true" })
     }
   );
+  CopilotModalHeader2.LeftContent = ({
+    onThreadListClick,
+    showThreadListButton,
+    onNewThreadClick,
+    showNewThreadButton,
+    className,
+    children
+  }) => {
+    if (children) {
+      return /* @__PURE__ */ jsx20("div", { className, children });
+    }
+    const hasAnyButton = showNewThreadButton && onNewThreadClick || showThreadListButton && onThreadListClick;
+    if (!hasAnyButton) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs12("div", { className: cn("flex items-center gap-1", className), children: [
+      showNewThreadButton && onNewThreadClick && /* @__PURE__ */ jsx20(
+        "button",
+        {
+          type: "button",
+          onClick: onNewThreadClick,
+          className: cn(
+            "inline-flex size-8 items-center justify-center rounded-full text-muted-foreground transition cursor-pointer",
+            "hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          ),
+          "aria-label": "New thread",
+          title: "New thread",
+          children: /* @__PURE__ */ jsx20(SquarePen, { className: "h-4 w-4", "aria-hidden": "true" })
+        }
+      ),
+      showThreadListButton && onThreadListClick && /* @__PURE__ */ jsx20(
+        "button",
+        {
+          type: "button",
+          onClick: onThreadListClick,
+          className: cn(
+            "inline-flex size-8 items-center justify-center rounded-full text-muted-foreground transition cursor-pointer",
+            "hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          ),
+          "aria-label": "Show threads",
+          title: "Show threads",
+          children: /* @__PURE__ */ jsx20(List, { className: "h-4 w-4", "aria-hidden": "true" })
+        }
+      )
+    ] });
+  };
 })(CopilotModalHeader || (CopilotModalHeader = {}));
 CopilotModalHeader.Title.displayName = "CopilotModalHeader.Title";
 CopilotModalHeader.CloseButton.displayName = "CopilotModalHeader.CloseButton";
+CopilotModalHeader.LeftContent.displayName = "CopilotModalHeader.LeftContent";
 
-// src/components/chat/CopilotSidebarView.tsx
+// src/components/threads/CopilotThreadList.tsx
+import { useCallback as useCallback12, useEffect as useEffect16, useRef as useRef9, useState as useState14 } from "react";
+import { MessageSquare, Plus as Plus2, Trash2 } from "lucide-react";
+import { randomUUID as randomUUID3 } from "@copilotkitnext/shared";
 import { Fragment as Fragment7, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+function CopilotThreadListInner({
+  limit = 50,
+  onThreadSelect,
+  className,
+  threadItem,
+  newThreadButton,
+  container,
+  refreshInterval = 2e3,
+  disableAutoRefresh = false
+}) {
+  const config = useCopilotChatConfiguration();
+  const { threads, isLoading, error, fetchThreads, addOptimisticThread, refresh, currentThreadId, deleteThread } = useThreads({
+    limit
+  });
+  const attemptedFetchRef = useRef9(/* @__PURE__ */ new Set());
+  const handleNewThread = useCallback12(() => {
+    const newThreadId = randomUUID3();
+    addOptimisticThread(newThreadId);
+    config?.setThreadId?.(newThreadId);
+    onThreadSelect?.(newThreadId);
+  }, [addOptimisticThread, config, onThreadSelect]);
+  const handleThreadSelect = useCallback12(
+    (threadId) => {
+      config?.setThreadId?.(threadId);
+      onThreadSelect?.(threadId);
+    },
+    [config, onThreadSelect]
+  );
+  const handleDeleteThread = useCallback12(
+    async (threadId) => {
+      try {
+        await deleteThread(threadId);
+        if (threadId === (currentThreadId ?? config?.threadId)) {
+          const newThreadId = randomUUID3();
+          addOptimisticThread(newThreadId);
+          config?.setThreadId?.(newThreadId);
+        }
+      } catch (err) {
+        console.error("Failed to delete thread:", err);
+      }
+    },
+    [deleteThread, currentThreadId, config, addOptimisticThread]
+  );
+  useEffect16(() => {
+    const activeId = currentThreadId ?? config?.threadId;
+    if (!activeId) return;
+    const isCurrentThreadInList = threads.some((t) => t.threadId === activeId);
+    if (isCurrentThreadInList) {
+      attemptedFetchRef.current.delete(activeId);
+      return;
+    }
+    if (!isLoading && !attemptedFetchRef.current.has(activeId)) {
+      attemptedFetchRef.current.add(activeId);
+      refresh();
+    }
+  }, [currentThreadId, config?.threadId, threads, refresh, isLoading]);
+  useEffect16(() => {
+    if (disableAutoRefresh) return;
+    const hasRunningThread = threads.some((t) => t.isRunning);
+    const hasUnnamedThread = threads.some((t) => !t.firstMessage);
+    if (!hasRunningThread && !hasUnnamedThread) return;
+    const interval = setInterval(() => {
+      refresh();
+    }, refreshInterval);
+    return () => clearInterval(interval);
+  }, [threads, refresh, refreshInterval, disableAutoRefresh]);
+  const BoundNewThreadButton = renderSlot(newThreadButton, NewThreadButton, {
+    onClick: handleNewThread
+  });
+  const activeThreadId = currentThreadId ?? config?.threadId;
+  const threadItems = threads.map((thread) => {
+    const isActive = thread.threadId === activeThreadId;
+    return renderSlot(threadItem, ThreadListItem, {
+      key: thread.threadId,
+      thread,
+      isActive,
+      onClick: () => handleThreadSelect(thread.threadId),
+      onDelete: () => handleDeleteThread(thread.threadId)
+    });
+  });
+  const content = /* @__PURE__ */ jsxs13(Fragment7, { children: [
+    BoundNewThreadButton,
+    /* @__PURE__ */ jsx21("div", { className: "space-y-1", children: error ? /* @__PURE__ */ jsxs13("div", { className: "copilotkit-thread-list-error mx-4 my-3 rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive", children: [
+      /* @__PURE__ */ jsxs13("p", { className: "mb-3 font-medium", children: [
+        "Failed to load threads: ",
+        error.message
+      ] }),
+      /* @__PURE__ */ jsx21(
+        "button",
+        {
+          type: "button",
+          className: "rounded bg-destructive px-3 py-1.5 text-xs font-medium text-destructive-foreground transition hover:bg-destructive/90",
+          onClick: () => fetchThreads(),
+          children: "Retry"
+        }
+      )
+    ] }) : isLoading && threads.length === 0 ? /* @__PURE__ */ jsx21("div", { className: "p-4 text-center text-sm text-muted-foreground", children: "Loading threads..." }) : threads.length === 0 ? /* @__PURE__ */ jsx21("div", { className: "p-4 text-center text-sm text-muted-foreground", children: "No threads yet" }) : threadItems })
+  ] });
+  return renderSlot(container, Container, {
+    className,
+    children: content
+  });
+}
+var Container = ({ className, children, ...props }) => /* @__PURE__ */ jsx21("div", { className: cn("flex flex-col h-full", className), ...props, children });
+var NewThreadButton = ({ className, ...props }) => /* @__PURE__ */ jsxs13(
+  "button",
+  {
+    className: cn(
+      "w-full flex items-center gap-3 px-4 py-3 text-sm font-medium",
+      "border-b border-border",
+      "hover:bg-accent/50 transition-colors",
+      "text-foreground",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx21(Plus2, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsx21("span", { children: "New Conversation" })
+    ]
+  }
+);
+var ThreadListItem = ({ thread, isActive, onClick, onDelete }) => {
+  const displayText = thread.firstMessage?.substring(0, 60) || "New conversation";
+  const hasEllipsis = thread.firstMessage && thread.firstMessage.length > 60;
+  const messageCount = thread.messageCount || 0;
+  const [isDeleting, setIsDeleting] = useState14(false);
+  const handleDelete = useCallback12(
+    async (e) => {
+      e.stopPropagation();
+      if (!onDelete) return;
+      setIsDeleting(true);
+      try {
+        await onDelete();
+      } catch (err) {
+        console.error("Delete failed:", err);
+        setIsDeleting(false);
+      }
+    },
+    [onDelete]
+  );
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: cn(
+        "w-full flex items-start gap-3 px-4 py-3 group relative",
+        "hover:bg-accent/50 transition-colors",
+        "border-b border-border",
+        isActive && "bg-accent border-l-2 border-l-primary",
+        isDeleting && "opacity-50 pointer-events-none"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs13("button", { onClick, className: "flex items-start gap-3 flex-1 min-w-0 text-left", children: [
+          /* @__PURE__ */ jsx21(MessageSquare, { className: "w-4 h-4 mt-0.5 flex-shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs13("p", { className: "text-sm text-foreground truncate", children: [
+              displayText,
+              hasEllipsis && "..."
+            ] }),
+            messageCount > 0 && /* @__PURE__ */ jsxs13("p", { className: "text-xs text-muted-foreground mt-1", children: [
+              messageCount,
+              " messages"
+            ] })
+          ] })
+        ] }),
+        onDelete && /* @__PURE__ */ jsx21(
+          "button",
+          {
+            type: "button",
+            onClick: handleDelete,
+            disabled: isDeleting,
+            className: cn(
+              "p-1.5 rounded transition-all",
+              "text-muted-foreground hover:text-destructive hover:bg-destructive/10",
+              "opacity-0 group-hover:opacity-100",
+              "focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-destructive/20",
+              isDeleting && "animate-pulse"
+            ),
+            "aria-label": "Delete thread",
+            title: "Delete thread",
+            children: /* @__PURE__ */ jsx21(Trash2, { className: "w-4 h-4" })
+          }
+        )
+      ]
+    }
+  );
+};
+function CopilotThreadList(props) {
+  const existingConfig = useCopilotChatConfiguration();
+  if (!existingConfig) {
+    return /* @__PURE__ */ jsx21(CopilotChatConfigurationProvider, { children: /* @__PURE__ */ jsx21(CopilotThreadListInner, { ...props }) });
+  }
+  return /* @__PURE__ */ jsx21(CopilotThreadListInner, { ...props });
+}
+CopilotThreadList.displayName = "CopilotThreadList";
+CopilotThreadList.ThreadItem = ThreadListItem;
+CopilotThreadList.NewThreadButton = NewThreadButton;
+CopilotThreadList.Container = Container;
+
+// src/components/chat/CopilotSidebarView.tsx
+import { randomUUID as randomUUID4 } from "@copilotkitnext/shared";
+import { Fragment as Fragment8, jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 var DEFAULT_SIDEBAR_WIDTH = 480;
 var SIDEBAR_TRANSITION_MS = 260;
-function CopilotSidebarView({ header, width, ...props }) {
+function CopilotSidebarView({ header, width, showThreadListButton = false, showNewThreadButton = false, ...props }) {
   const configuration = useCopilotChatConfiguration();
   const isSidebarOpen = configuration?.isModalOpen ?? false;
-  const sidebarRef = useRef8(null);
-  const [sidebarWidth, setSidebarWidth] = useState12(width ?? DEFAULT_SIDEBAR_WIDTH);
+  const [isThreadListOpen, setIsThreadListOpen] = useState15(false);
+  const sidebarRef = useRef10(null);
+  const [sidebarWidth, setSidebarWidth] = useState15(width ?? DEFAULT_SIDEBAR_WIDTH);
+  const handleThreadListToggle = useCallback13(() => {
+    setIsThreadListOpen((prev) => !prev);
+  }, []);
+  const handleThreadSelect = useCallback13(() => {
+    setIsThreadListOpen(false);
+  }, []);
+  const handleNewThread = useCallback13(() => {
+    const newThreadId = randomUUID4();
+    configuration?.setThreadId?.(newThreadId);
+  }, [configuration]);
   const widthToCss = (w) => {
     return typeof w === "number" ? `${w}px` : w;
   };
@@ -3502,7 +4069,7 @@ function CopilotSidebarView({ header, width, ...props }) {
     }
     return w;
   };
-  useEffect15(() => {
+  useEffect17(() => {
     if (width !== void 0) {
       return;
     }
@@ -3528,9 +4095,14 @@ function CopilotSidebarView({ header, width, ...props }) {
     window.addEventListener("resize", updateWidth);
     return () => window.removeEventListener("resize", updateWidth);
   }, [width]);
-  const headerElement = renderSlot(header, CopilotModalHeader, {});
-  return /* @__PURE__ */ jsxs13(Fragment7, { children: [
-    isSidebarOpen && /* @__PURE__ */ jsx21(
+  const headerElement = renderSlot(header, CopilotModalHeader, {
+    onThreadListClick: handleThreadListToggle,
+    showThreadListButton,
+    onNewThreadClick: handleNewThread,
+    showNewThreadButton
+  });
+  return /* @__PURE__ */ jsxs14(Fragment8, { children: [
+    isSidebarOpen && /* @__PURE__ */ jsx22(
       "style",
       {
         dangerouslySetInnerHTML: {
@@ -3544,8 +4116,8 @@ function CopilotSidebarView({ header, width, ...props }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx21(CopilotChatToggleButton_default, {}),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(CopilotChatToggleButton_default, {}),
+    /* @__PURE__ */ jsxs14(
       "aside",
       {
         ref: sidebarRef,
@@ -3558,6 +4130,8 @@ function CopilotSidebarView({ header, width, ...props }) {
           "w-full",
           "border-l border-border bg-background text-foreground shadow-xl",
           "transition-transform duration-300 ease-out",
+          "overflow-hidden",
+          // Clip the sliding panel
           isSidebarOpen ? "translate-x-0" : "translate-x-full pointer-events-none"
         ),
         style: {
@@ -3570,10 +4144,31 @@ function CopilotSidebarView({ header, width, ...props }) {
         "aria-hidden": !isSidebarOpen,
         "aria-label": "Copilot chat sidebar",
         role: "complementary",
-        children: /* @__PURE__ */ jsxs13("div", { className: "flex h-full w-full flex-col overflow-hidden", children: [
-          headerElement,
-          /* @__PURE__ */ jsx21("div", { className: "flex-1 overflow-hidden", "data-sidebar-chat": true, children: /* @__PURE__ */ jsx21(CopilotChatView_default, { ...props }) })
-        ] })
+        children: [
+          isThreadListOpen && /* @__PURE__ */ jsx22(
+            "div",
+            {
+              className: "absolute inset-0 z-50",
+              onClick: handleThreadListToggle,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx22(
+            "div",
+            {
+              className: cn(
+                "absolute left-0 top-0 h-full w-80 bg-background border-r border-border z-[60]",
+                "transition-transform duration-300 ease-out",
+                isThreadListOpen ? "translate-x-0" : "-translate-x-full"
+              ),
+              children: /* @__PURE__ */ jsx22(CopilotThreadList, { onThreadSelect: handleThreadSelect })
+            }
+          ),
+          /* @__PURE__ */ jsxs14("div", { className: "flex h-full w-full flex-col overflow-hidden", children: [
+            headerElement,
+            /* @__PURE__ */ jsx22("div", { className: "flex-1 overflow-hidden", "data-sidebar-chat": true, children: /* @__PURE__ */ jsx22(CopilotChatView_default, { ...props }) })
+          ] })
+        ]
       }
     )
   ] });
@@ -3581,8 +4176,9 @@ function CopilotSidebarView({ header, width, ...props }) {
 CopilotSidebarView.displayName = "CopilotSidebarView";
 
 // src/components/chat/CopilotPopupView.tsx
-import { useEffect as useEffect16, useMemo as useMemo8, useRef as useRef9, useState as useState13 } from "react";
-import { Fragment as Fragment8, jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useCallback as useCallback14, useEffect as useEffect18, useMemo as useMemo7, useRef as useRef11, useState as useState16 } from "react";
+import { randomUUID as randomUUID5 } from "@copilotkitnext/shared";
+import { Fragment as Fragment9, jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 var DEFAULT_POPUP_WIDTH = 420;
 var DEFAULT_POPUP_HEIGHT = 560;
 var dimensionToCss = (value, fallback) => {
@@ -3599,6 +4195,8 @@ function CopilotPopupView({
   width,
   height,
   clickOutsideToClose,
+  showThreadListButton = false,
+  showNewThreadButton = false,
   className,
   ...restProps
 }) {
@@ -3606,10 +4204,21 @@ function CopilotPopupView({
   const isPopupOpen = configuration?.isModalOpen ?? false;
   const setModalOpen = configuration?.setModalOpen;
   const labels = configuration?.labels ?? CopilotChatDefaultLabels;
-  const containerRef = useRef9(null);
-  const [isRendered, setIsRendered] = useState13(isPopupOpen);
-  const [isAnimatingOut, setIsAnimatingOut] = useState13(false);
-  useEffect16(() => {
+  const containerRef = useRef11(null);
+  const [isRendered, setIsRendered] = useState16(isPopupOpen);
+  const [isAnimatingOut, setIsAnimatingOut] = useState16(false);
+  const [isThreadListOpen, setIsThreadListOpen] = useState16(false);
+  const handleThreadListToggle = useCallback14(() => {
+    setIsThreadListOpen((prev) => !prev);
+  }, []);
+  const handleThreadSelect = useCallback14(() => {
+    setIsThreadListOpen(false);
+  }, []);
+  const handleNewThread = useCallback14(() => {
+    const newThreadId = randomUUID5();
+    configuration?.setThreadId?.(newThreadId);
+  }, [configuration]);
+  useEffect18(() => {
     if (isPopupOpen) {
       setIsRendered(true);
       setIsAnimatingOut(false);
@@ -3625,7 +4234,7 @@ function CopilotPopupView({
     }, 200);
     return () => clearTimeout(timeout);
   }, [isPopupOpen, isRendered]);
-  useEffect16(() => {
+  useEffect18(() => {
     if (!isPopupOpen) {
       return;
     }
@@ -3641,7 +4250,7 @@ function CopilotPopupView({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isPopupOpen, setModalOpen]);
-  useEffect16(() => {
+  useEffect18(() => {
     if (!isPopupOpen) {
       return;
     }
@@ -3650,7 +4259,7 @@ function CopilotPopupView({
     }, 200);
     return () => clearTimeout(focusTimer);
   }, [isPopupOpen]);
-  useEffect16(() => {
+  useEffect18(() => {
     if (!isPopupOpen || !clickOutsideToClose) {
       return;
     }
@@ -3675,10 +4284,15 @@ function CopilotPopupView({
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
   }, [isPopupOpen, clickOutsideToClose, setModalOpen]);
-  const headerElement = useMemo8(() => renderSlot(header, CopilotModalHeader, {}), [header]);
+  const headerElement = useMemo7(() => renderSlot(header, CopilotModalHeader, {
+    onThreadListClick: handleThreadListToggle,
+    showThreadListButton,
+    onNewThreadClick: handleNewThread,
+    showNewThreadButton
+  }), [header, handleThreadListToggle, showThreadListButton, handleNewThread, showNewThreadButton]);
   const resolvedWidth = dimensionToCss(width, DEFAULT_POPUP_WIDTH);
   const resolvedHeight = dimensionToCss(height, DEFAULT_POPUP_HEIGHT);
-  const popupStyle = useMemo8(
+  const popupStyle = useMemo7(
     () => ({
       "--copilot-popup-width": resolvedWidth,
       "--copilot-popup-height": resolvedHeight,
@@ -3692,14 +4306,14 @@ function CopilotPopupView({
     [resolvedHeight, resolvedWidth]
   );
   const popupAnimationClass = isPopupOpen && !isAnimatingOut ? "pointer-events-auto translate-y-0 opacity-100 md:scale-100" : "pointer-events-none translate-y-4 opacity-0 md:translate-y-5 md:scale-[0.95]";
-  const popupContent = isRendered ? /* @__PURE__ */ jsx22(
+  const popupContent = isRendered ? /* @__PURE__ */ jsx23(
     "div",
     {
       className: cn(
         "fixed inset-0 z-[1200] flex max-w-full flex-col items-stretch",
         "md:inset-auto md:bottom-24 md:right-6 md:items-end md:gap-4"
       ),
-      children: /* @__PURE__ */ jsxs14(
+      children: /* @__PURE__ */ jsxs15(
         "div",
         {
           ref: containerRef,
@@ -3708,19 +4322,40 @@ function CopilotPopupView({
           "aria-label": labels.modalHeaderTitle,
           "data-copilot-popup": true,
           className: cn(
-            "relative flex h-full w-full flex-col overflow-hidden bg-background text-foreground",
+            "relative flex h-full w-full flex-col bg-background text-foreground",
             "origin-bottom focus:outline-none transform-gpu transition-transform transition-opacity duration-200 ease-out",
             "md:transition-transform md:transition-opacity",
             "rounded-none border border-border/0 shadow-none ring-0",
             "md:h-[var(--copilot-popup-height)] md:w-[var(--copilot-popup-width)]",
             "md:max-h-[var(--copilot-popup-max-height)] md:max-w-[var(--copilot-popup-max-width)]",
             "md:origin-bottom-right md:rounded-2xl md:border-border md:shadow-xl md:ring-1 md:ring-border/40",
+            "overflow-hidden",
+            // Clip the sliding panel
             popupAnimationClass
           ),
           style: popupStyle,
           children: [
+            isThreadListOpen && /* @__PURE__ */ jsx23(
+              "div",
+              {
+                className: "absolute inset-0 z-50",
+                onClick: handleThreadListToggle,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx23(
+              "div",
+              {
+                className: cn(
+                  "absolute left-0 top-0 h-full w-80 bg-background border-r border-border z-[60]",
+                  "transition-transform duration-300 ease-out",
+                  isThreadListOpen ? "translate-x-0" : "-translate-x-full"
+                ),
+                children: /* @__PURE__ */ jsx23(CopilotThreadList, { onThreadSelect: handleThreadSelect })
+              }
+            ),
             headerElement,
-            /* @__PURE__ */ jsx22("div", { className: "flex-1 overflow-hidden", "data-popup-chat": true, children: /* @__PURE__ */ jsx22(
+            /* @__PURE__ */ jsx23("div", { className: "flex-1 overflow-hidden", "data-popup-chat": true, children: /* @__PURE__ */ jsx23(
               CopilotChatView_default,
               {
                 ...restProps,
@@ -3732,32 +4367,34 @@ function CopilotPopupView({
       )
     }
   ) : null;
-  return /* @__PURE__ */ jsxs14(Fragment8, { children: [
-    /* @__PURE__ */ jsx22(CopilotChatToggleButton_default, {}),
+  return /* @__PURE__ */ jsxs15(Fragment9, { children: [
+    /* @__PURE__ */ jsx23(CopilotChatToggleButton_default, {}),
     popupContent
   ] });
 }
 CopilotPopupView.displayName = "CopilotPopupView";
 
 // src/components/chat/CopilotSidebar.tsx
-import { useMemo as useMemo9 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
-function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
-  const SidebarViewOverride = useMemo9(() => {
+import { useMemo as useMemo8 } from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+function CopilotSidebar({ header, defaultOpen, width, showThreadListButton, showNewThreadButton, ...chatProps }) {
+  const SidebarViewOverride = useMemo8(() => {
     const Component = (viewProps) => {
-      const { header: viewHeader, width: viewWidth, ...restProps } = viewProps;
-      return /* @__PURE__ */ jsx23(
+      const { header: viewHeader, width: viewWidth, showThreadListButton: viewShowThreadList, showNewThreadButton: viewShowNewThread, ...restProps } = viewProps;
+      return /* @__PURE__ */ jsx24(
         CopilotSidebarView,
         {
           ...restProps,
           header: header ?? viewHeader,
-          width: width ?? viewWidth
+          width: width ?? viewWidth,
+          showThreadListButton: showThreadListButton ?? viewShowThreadList,
+          showNewThreadButton: showNewThreadButton ?? viewShowNewThread
         }
       );
     };
     return Object.assign(Component, CopilotChatView_default);
-  }, [header, width]);
-  return /* @__PURE__ */ jsx23(
+  }, [header, width, showThreadListButton, showNewThreadButton]);
+  return /* @__PURE__ */ jsx24(
     CopilotChat,
     {
       ...chatProps,
@@ -3769,39 +4406,45 @@ function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
 CopilotSidebar.displayName = "CopilotSidebar";
 
 // src/components/chat/CopilotPopup.tsx
-import { useMemo as useMemo10 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { useMemo as useMemo9 } from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function CopilotPopup({
   header,
   defaultOpen,
   width,
   height,
   clickOutsideToClose,
+  showThreadListButton,
+  showNewThreadButton,
   ...chatProps
 }) {
-  const PopupViewOverride = useMemo10(() => {
+  const PopupViewOverride = useMemo9(() => {
     const Component = (viewProps) => {
       const {
         header: viewHeader,
         width: viewWidth,
         height: viewHeight,
         clickOutsideToClose: viewClickOutsideToClose,
+        showThreadListButton: viewShowThreadList,
+        showNewThreadButton: viewShowNewThread,
         ...restProps
       } = viewProps;
-      return /* @__PURE__ */ jsx24(
+      return /* @__PURE__ */ jsx25(
         CopilotPopupView,
         {
           ...restProps,
           header: header ?? viewHeader,
           width: width ?? viewWidth,
           height: height ?? viewHeight,
-          clickOutsideToClose: clickOutsideToClose ?? viewClickOutsideToClose
+          clickOutsideToClose: clickOutsideToClose ?? viewClickOutsideToClose,
+          showThreadListButton: showThreadListButton ?? viewShowThreadList,
+          showNewThreadButton: showNewThreadButton ?? viewShowNewThread
         }
       );
     };
     return Object.assign(Component, CopilotChatView_default);
-  }, [clickOutsideToClose, header, height, width]);
-  return /* @__PURE__ */ jsx24(
+  }, [clickOutsideToClose, header, height, width, showThreadListButton, showNewThreadButton]);
+  return /* @__PURE__ */ jsx25(
     CopilotChat,
     {
       ...chatProps,
@@ -3825,25 +4468,25 @@ function defineToolCallRenderer(def) {
 }
 
 // src/components/WildcardToolCallRender.tsx
-import { useState as useState14 } from "react";
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useState as useState17 } from "react";
+import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var WildcardToolCallRender = defineToolCallRenderer({
   name: "*",
   render: ({ args, result, name, status }) => {
-    const [isExpanded, setIsExpanded] = useState14(false);
+    const [isExpanded, setIsExpanded] = useState17(false);
     const statusString = String(status);
     const isActive = statusString === "inProgress" || statusString === "executing";
     const isComplete = statusString === "complete";
     const statusStyles = isActive ? "bg-amber-100 text-amber-800 dark:bg-amber-500/15 dark:text-amber-400" : isComplete ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-500/15 dark:text-emerald-400" : "bg-zinc-100 text-zinc-800 dark:bg-zinc-700/40 dark:text-zinc-300";
-    return /* @__PURE__ */ jsx25("div", { className: "mt-2 pb-2", children: /* @__PURE__ */ jsxs15("div", { className: "rounded-xl border border-zinc-200/60 dark:border-zinc-800/60 bg-white/70 dark:bg-zinc-900/50 shadow-sm backdrop-blur p-4", children: [
-      /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsx26("div", { className: "mt-2 pb-2", children: /* @__PURE__ */ jsxs16("div", { className: "rounded-xl border border-zinc-200/60 dark:border-zinc-800/60 bg-white/70 dark:bg-zinc-900/50 shadow-sm backdrop-blur p-4", children: [
+      /* @__PURE__ */ jsxs16(
         "div",
         {
           className: "flex items-center justify-between gap-3 cursor-pointer",
           onClick: () => setIsExpanded(!isExpanded),
           children: [
-            /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 min-w-0", children: [
-              /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2 min-w-0", children: [
+              /* @__PURE__ */ jsx26(
                 "svg",
                 {
                   className: `h-4 w-4 text-zinc-500 dark:text-zinc-400 transition-transform ${isExpanded ? "rotate-90" : ""}`,
@@ -3851,7 +4494,7 @@ var WildcardToolCallRender = defineToolCallRenderer({
                   viewBox: "0 0 24 24",
                   strokeWidth: 2,
                   stroke: "currentColor",
-                  children: /* @__PURE__ */ jsx25(
+                  children: /* @__PURE__ */ jsx26(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -3861,10 +4504,10 @@ var WildcardToolCallRender = defineToolCallRenderer({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx25("span", { className: "inline-block h-2 w-2 rounded-full bg-blue-500" }),
-              /* @__PURE__ */ jsx25("span", { className: "truncate text-sm font-medium text-zinc-900 dark:text-zinc-100", children: name })
+              /* @__PURE__ */ jsx26("span", { className: "inline-block h-2 w-2 rounded-full bg-blue-500" }),
+              /* @__PURE__ */ jsx26("span", { className: "truncate text-sm font-medium text-zinc-900 dark:text-zinc-100", children: name })
             ] }),
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx26(
               "span",
               {
                 className: `inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${statusStyles}`,
@@ -3874,14 +4517,14 @@ var WildcardToolCallRender = defineToolCallRenderer({
           ]
         }
       ),
-      isExpanded && /* @__PURE__ */ jsxs15("div", { className: "mt-3 grid gap-4", children: [
-        /* @__PURE__ */ jsxs15("div", { children: [
-          /* @__PURE__ */ jsx25("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Arguments" }),
-          /* @__PURE__ */ jsx25("pre", { className: "mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words", children: JSON.stringify(args ?? {}, null, 2) })
+      isExpanded && /* @__PURE__ */ jsxs16("div", { className: "mt-3 grid gap-4", children: [
+        /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx26("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Arguments" }),
+          /* @__PURE__ */ jsx26("pre", { className: "mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words", children: JSON.stringify(args ?? {}, null, 2) })
         ] }),
-        result !== void 0 && /* @__PURE__ */ jsxs15("div", { children: [
-          /* @__PURE__ */ jsx25("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Result" }),
-          /* @__PURE__ */ jsx25("pre", { className: "mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words", children: typeof result === "string" ? result : JSON.stringify(result, null, 2) })
+        result !== void 0 && /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx26("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Result" }),
+          /* @__PURE__ */ jsx26("pre", { className: "mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words", children: typeof result === "string" ? result : JSON.stringify(result, null, 2) })
         ] })
       ] })
     ] }) });
@@ -3911,6 +4554,7 @@ export {
   CopilotPopupView,
   CopilotSidebar,
   CopilotSidebarView,
+  CopilotThreadList,
   WildcardToolCallRender,
   defineToolCallRenderer,
   useAgent,
@@ -3922,6 +4566,8 @@ export {
   useHumanInTheLoop,
   useRenderCustomMessages,
   useRenderToolCall,
-  useSuggestions
+  useSuggestions,
+  useThreadSwitch,
+  useThreads
 };
 //# sourceMappingURL=index.mjs.map