@copilotkitnext/react 0.0.11 → 0.0.13-alpha.0

package/dist/index.js

@@ -37,19 +37,29 @@ __export(index_exports, {
   CopilotChatConfigurationProvider: () => CopilotChatConfigurationProvider,
   CopilotChatInput: () => CopilotChatInput_default,
   CopilotChatMessageView: () => CopilotChatMessageView_default,
+  CopilotChatSuggestionPill: () => CopilotChatSuggestionPill_default,
+  CopilotChatSuggestionView: () => CopilotChatSuggestionView_default,
+  CopilotChatToggleButton: () => CopilotChatToggleButton,
+  CopilotChatToggleButtonCloseIcon: () => DefaultCloseIcon,
+  CopilotChatToggleButtonOpenIcon: () => DefaultOpenIcon,
   CopilotChatToolCallsView: () => CopilotChatToolCallsView_default,
   CopilotChatUserMessage: () => CopilotChatUserMessage_default,
   CopilotChatView: () => CopilotChatView_default,
   CopilotKitProvider: () => CopilotKitProvider,
+  CopilotModalHeader: () => CopilotModalHeader,
+  CopilotSidebar: () => CopilotSidebar,
+  CopilotSidebarView: () => CopilotSidebarView,
   WildcardToolCallRender: () => WildcardToolCallRender,
   defineToolCallRender: () => defineToolCallRender,
   useAgent: () => useAgent,
   useAgentContext: () => useAgentContext,
+  useConfigureSuggestions: () => useConfigureSuggestions,
   useCopilotChatConfiguration: () => useCopilotChatConfiguration,
   useCopilotKit: () => useCopilotKit,
   useFrontendTool: () => useFrontendTool,
   useHumanInTheLoop: () => useHumanInTheLoop,
-  useRenderToolCall: () => useRenderToolCall
+  useRenderToolCall: () => useRenderToolCall,
+  useSuggestions: () => useSuggestions
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -78,33 +88,60 @@ var CopilotChatDefaultLabels = {
   assistantMessageToolbarRegenerateLabel: "Regenerate",
   userMessageToolbarCopyMessageLabel: "Copy",
   userMessageToolbarEditMessageLabel: "Edit",
-  chatDisclaimerText: "AI can make mistakes. Please verify important information."
+  chatDisclaimerText: "AI can make mistakes. Please verify important information.",
+  chatToggleOpenLabel: "Open chat",
+  chatToggleCloseLabel: "Close chat",
+  modalHeaderTitle: "CopilotKit Chat"
 };
 var CopilotChatConfiguration = (0, import_react.createContext)(null);
-var CopilotChatConfigurationProvider = ({
-  children,
-  labels = {},
-  agentId,
-  threadId
-}) => {
-  const mergedLabels = {
-    ...CopilotChatDefaultLabels,
-    ...labels
-  };
-  const configurationValue = {
-    labels: mergedLabels,
-    agentId: agentId ?? import_shared.DEFAULT_AGENT_ID,
-    threadId
-  };
+var CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, isModalDefaultOpen }) => {
+  const parentConfig = (0, import_react.useContext)(CopilotChatConfiguration);
+  const mergedLabels = (0, import_react.useMemo)(
+    () => ({
+      ...CopilotChatDefaultLabels,
+      ...parentConfig?.labels ?? {},
+      ...labels ?? {}
+    }),
+    [labels, parentConfig?.labels]
+  );
+  const resolvedAgentId = agentId ?? parentConfig?.agentId ?? import_shared.DEFAULT_AGENT_ID;
+  const resolvedThreadId = (0, import_react.useMemo)(() => {
+    if (threadId) {
+      return threadId;
+    }
+    if (parentConfig?.threadId) {
+      return parentConfig.threadId;
+    }
+    return (0, import_shared.randomUUID)();
+  }, [threadId, parentConfig?.threadId]);
+  const resolvedDefaultOpen = isModalDefaultOpen ?? parentConfig?.isModalDefaultOpen ?? true;
+  const [internalModalOpen, setInternalModalOpen] = (0, import_react.useState)(
+    parentConfig?.isModalOpen ?? resolvedDefaultOpen
+  );
+  const resolvedIsModalOpen = parentConfig?.isModalOpen ?? internalModalOpen;
+  const resolvedSetModalOpen = parentConfig?.setModalOpen ?? setInternalModalOpen;
+  const configurationValue = (0, import_react.useMemo)(
+    () => ({
+      labels: mergedLabels,
+      agentId: resolvedAgentId,
+      threadId: resolvedThreadId,
+      isModalOpen: resolvedIsModalOpen,
+      setModalOpen: resolvedSetModalOpen,
+      isModalDefaultOpen: resolvedDefaultOpen
+    }),
+    [
+      mergedLabels,
+      resolvedAgentId,
+      resolvedThreadId,
+      resolvedIsModalOpen,
+      resolvedSetModalOpen,
+      resolvedDefaultOpen
+    ]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopilotChatConfiguration.Provider, { value: configurationValue, children });
 };
 var useCopilotChatConfiguration = () => {
   const configuration = (0, import_react.useContext)(CopilotChatConfiguration);
-  if (!configuration) {
-    throw new Error(
-      "useCopilotChatConfiguration must be used within CopilotChatConfigurationProvider"
-    );
-  }
   return configuration;
 };
 
@@ -554,6 +591,18 @@ function CopilotChatInput({
   const resolvedValue = isControlled ? value ?? "" : internalValue;
   const inputRef = (0, import_react4.useRef)(null);
   const audioRecorderRef = (0, import_react4.useRef)(null);
+  const config = useCopilotChatConfiguration();
+  const previousModalStateRef = (0, import_react4.useRef)(void 0);
+  (0, import_react4.useEffect)(() => {
+    if (!autoFocus) {
+      previousModalStateRef.current = config?.isModalOpen;
+      return;
+    }
+    if (config?.isModalOpen && !previousModalStateRef.current) {
+      inputRef.current?.focus();
+    }
+    previousModalStateRef.current = config?.isModalOpen;
+  }, [config?.isModalOpen, autoFocus]);
   (0, import_react4.useEffect)(() => {
     const recorder = audioRecorderRef.current;
     if (!recorder) {
@@ -604,59 +653,32 @@ function CopilotChatInput({
     onKeyDown: handleKeyDown,
     autoFocus
   });
-  const BoundAudioRecorder = renderSlot(
-    audioRecorder,
-    CopilotChatAudioRecorder,
-    {
-      ref: audioRecorderRef
-    }
-  );
+  const BoundAudioRecorder = renderSlot(audioRecorder, CopilotChatAudioRecorder, {
+    ref: audioRecorderRef
+  });
   const BoundSendButton = renderSlot(sendButton, CopilotChatInput.SendButton, {
     onClick: send,
     disabled: !resolvedValue.trim() || !onSubmitMessage
   });
-  const BoundStartTranscribeButton = renderSlot(
-    startTranscribeButton,
-    CopilotChatInput.StartTranscribeButton,
-    {
-      onClick: onStartTranscribe
-    }
-  );
-  const BoundCancelTranscribeButton = renderSlot(
-    cancelTranscribeButton,
-    CopilotChatInput.CancelTranscribeButton,
-    {
-      onClick: onCancelTranscribe
-    }
-  );
-  const BoundFinishTranscribeButton = renderSlot(
-    finishTranscribeButton,
-    CopilotChatInput.FinishTranscribeButton,
-    {
-      onClick: onFinishTranscribe
-    }
-  );
-  const BoundAddFileButton = renderSlot(
-    addFileButton,
-    CopilotChatInput.AddFileButton,
-    {
-      onClick: onAddFile,
-      disabled: mode === "transcribe"
-    }
-  );
-  const BoundToolsButton = renderSlot(
-    toolsButton,
-    CopilotChatInput.ToolsButton,
-    {
-      disabled: mode === "transcribe",
-      toolsMenu
-    }
-  );
+  const BoundStartTranscribeButton = renderSlot(startTranscribeButton, CopilotChatInput.StartTranscribeButton, {
+    onClick: onStartTranscribe
+  });
+  const BoundCancelTranscribeButton = renderSlot(cancelTranscribeButton, CopilotChatInput.CancelTranscribeButton, {
+    onClick: onCancelTranscribe
+  });
+  const BoundFinishTranscribeButton = renderSlot(finishTranscribeButton, CopilotChatInput.FinishTranscribeButton, {
+    onClick: onFinishTranscribe
+  });
+  const BoundAddFileButton = renderSlot(addFileButton, CopilotChatInput.AddFileButton, {
+    onClick: onAddFile,
+    disabled: mode === "transcribe"
+  });
+  const BoundToolsButton = renderSlot(toolsButton, CopilotChatInput.ToolsButton, {
+    disabled: mode === "transcribe",
+    toolsMenu
+  });
   const BoundToolbar = renderSlot(
-    typeof toolbar === "string" || toolbar === void 0 ? (0, import_tailwind_merge3.twMerge)(
-      toolbar,
-      "w-full h-[60px] bg-transparent flex items-center justify-between"
-    ) : toolbar,
+    typeof toolbar === "string" || toolbar === void 0 ? (0, import_tailwind_merge3.twMerge)(toolbar, "w-full h-[60px] bg-transparent flex items-center justify-between") : toolbar,
     CopilotChatInput.Toolbar,
     {
       children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
@@ -697,6 +719,12 @@ function CopilotChatInput({
       additionalToolbarItems
     }) });
   }
+  const handleContainerClick = (e) => {
+    const target = e.target;
+    if (target.tagName !== "BUTTON" && !target.closest("button") && inputRef.current && mode === "input") {
+      inputRef.current.focus();
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
@@ -713,6 +741,7 @@ function CopilotChatInput({
         "shadow-[0_4px_4px_0_#0000000a,0_0_1px_0_#0000009e] rounded-[28px]",
         className
       ),
+      onClick: handleContainerClick,
       ...props,
       children: [
         mode === "transcribe" ? BoundAudioRecorder : BoundTextArea,
@@ -734,7 +763,8 @@ function CopilotChatInput({
     }
   ) });
   CopilotChatInput2.ToolbarButton = ({ icon, labelKey, defaultClassName, className, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Tooltip, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         Button,
@@ -787,7 +817,8 @@ function CopilotChatInput({
     }
   );
   CopilotChatInput2.ToolsButton = ({ className, toolsMenu, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
     const renderMenuItems = (items) => {
       return items.map((item, index) => {
         if (item === "-") {
@@ -823,99 +854,83 @@ function CopilotChatInput({
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuContent, { side: "top", align: "end", children: renderMenuItems(toolsMenu) })
     ] });
   };
-  CopilotChatInput2.Toolbar = ({
-    className,
-    ...props
-  }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "div",
-    {
-      className: (0, import_tailwind_merge3.twMerge)(
-        "w-full h-[60px] bg-transparent flex items-center",
-        className
-      ),
-      ...props
-    }
-  );
-  CopilotChatInput2.TextArea = (0, import_react4.forwardRef)(
-    function TextArea2({ maxRows = 5, style, className, ...props }, ref) {
-      const internalTextareaRef = (0, import_react4.useRef)(null);
-      const [maxHeight, setMaxHeight] = (0, import_react4.useState)(0);
-      const { labels } = useCopilotChatConfiguration();
-      (0, import_react4.useImperativeHandle)(
-        ref,
-        () => internalTextareaRef.current
-      );
-      const adjustHeight = () => {
+  CopilotChatInput2.Toolbar = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("w-full h-[60px] bg-transparent flex items-center", className), ...props });
+  CopilotChatInput2.TextArea = (0, import_react4.forwardRef)(function TextArea2({ maxRows = 5, style, className, ...props }, ref) {
+    const internalTextareaRef = (0, import_react4.useRef)(null);
+    const [maxHeight, setMaxHeight] = (0, import_react4.useState)(0);
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
+    (0, import_react4.useImperativeHandle)(ref, () => internalTextareaRef.current);
+    const adjustHeight = () => {
+      const textarea = internalTextareaRef.current;
+      if (textarea && maxHeight > 0) {
+        textarea.style.height = "auto";
+        textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
+      }
+    };
+    (0, import_react4.useEffect)(() => {
+      const calculateMaxHeight = () => {
         const textarea = internalTextareaRef.current;
-        if (textarea && maxHeight > 0) {
+        if (textarea) {
+          const currentValue = textarea.value;
+          textarea.value = "";
           textarea.style.height = "auto";
-          textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
-        }
-      };
-      (0, import_react4.useEffect)(() => {
-        const calculateMaxHeight = () => {
-          const textarea = internalTextareaRef.current;
-          if (textarea) {
-            const currentValue = textarea.value;
-            textarea.value = "";
+          const computedStyle = window.getComputedStyle(textarea);
+          const paddingTop = parseFloat(computedStyle.paddingTop);
+          const paddingBottom = parseFloat(computedStyle.paddingBottom);
+          const contentHeight = textarea.scrollHeight - paddingTop - paddingBottom;
+          setMaxHeight(contentHeight * maxRows + paddingTop + paddingBottom);
+          textarea.value = currentValue;
+          if (currentValue) {
             textarea.style.height = "auto";
-            const computedStyle = window.getComputedStyle(textarea);
-            const paddingTop = parseFloat(computedStyle.paddingTop);
-            const paddingBottom = parseFloat(computedStyle.paddingBottom);
-            const contentHeight = textarea.scrollHeight - paddingTop - paddingBottom;
-            setMaxHeight(contentHeight * maxRows + paddingTop + paddingBottom);
-            textarea.value = currentValue;
-            if (currentValue) {
-              textarea.style.height = "auto";
-              textarea.style.height = `${Math.min(textarea.scrollHeight, contentHeight * maxRows + paddingTop + paddingBottom)}px`;
-            }
-            if (props.autoFocus) {
-              textarea.focus();
-            }
+            textarea.style.height = `${Math.min(textarea.scrollHeight, contentHeight * maxRows + paddingTop + paddingBottom)}px`;
+          }
+          if (props.autoFocus) {
+            textarea.focus();
           }
-        };
-        calculateMaxHeight();
-      }, [maxRows, props.autoFocus]);
-      (0, import_react4.useEffect)(() => {
-        adjustHeight();
-      }, [props.value, maxHeight]);
-      const handleInput = (e) => {
-        adjustHeight();
-        if (props.onChange) {
-          props.onChange(e);
         }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        "textarea",
-        {
-          ref: internalTextareaRef,
-          ...props,
-          onChange: handleInput,
-          style: {
-            overflow: "auto",
-            resize: "none",
-            maxHeight: `${maxHeight}px`,
-            ...style
-          },
-          placeholder: labels.chatInputPlaceholder,
-          className: (0, import_tailwind_merge3.twMerge)(
-            // Layout and sizing
-            "w-full p-5 pb-0",
-            // Behavior
-            "outline-none resize-none",
-            // Background
-            "bg-transparent",
-            // Typography
-            "antialiased font-regular leading-relaxed text-[16px]",
-            // Placeholder styles
-            "placeholder:text-[#00000077] dark:placeholder:text-[#fffc]",
-            className
-          ),
-          rows: 1
-        }
-      );
-    }
-  );
+      calculateMaxHeight();
+    }, [maxRows, props.autoFocus]);
+    (0, import_react4.useEffect)(() => {
+      adjustHeight();
+    }, [props.value, maxHeight]);
+    const handleInput = (e) => {
+      adjustHeight();
+      if (props.onChange) {
+        props.onChange(e);
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "textarea",
+      {
+        ref: internalTextareaRef,
+        ...props,
+        onChange: handleInput,
+        style: {
+          overflow: "auto",
+          resize: "none",
+          maxHeight: `${maxHeight}px`,
+          ...style
+        },
+        placeholder: labels.chatInputPlaceholder,
+        className: (0, import_tailwind_merge3.twMerge)(
+          // Layout and sizing
+          "w-full p-5 pb-0",
+          // Behavior
+          "outline-none resize-none",
+          // Background
+          "bg-transparent",
+          // Typography
+          "antialiased font-regular leading-relaxed text-[16px]",
+          // Placeholder styles
+          "placeholder:text-[#00000077] dark:placeholder:text-[#fffc]",
+          className
+        ),
+        rows: 1
+      }
+    );
+  });
   CopilotChatInput2.AudioRecorder = CopilotChatAudioRecorder;
 })(CopilotChatInput || (CopilotChatInput = {}));
 CopilotChatInput.TextArea.displayName = "CopilotChatInput.TextArea";
@@ -935,7 +950,7 @@ var import_remark_gfm = __toESM(require("remark-gfm"));
 var import_remark_math = __toESM(require("remark-math"));
 var import_rehype_pretty_code = __toESM(require("rehype-pretty-code"));
 var import_rehype_katex = __toESM(require("rehype-katex"));
-var import_react13 = require("react");
+var import_react15 = require("react");
 var import_lucide_react3 = require("lucide-react");
 var import_tailwind_merge4 = require("tailwind-merge");
 var import_katex_min = require("katex/dist/katex.min.css");
@@ -1013,9 +1028,7 @@ var CopilotKitProvider = ({
         ...tool.agentId && { agentId: tool.agentId },
         handler: async () => {
           return new Promise((resolve) => {
-            console.warn(
-              `Human-in-the-loop tool '${tool.name}' called but no interactive handler is set up.`
-            );
+            console.warn(`Human-in-the-loop tool '${tool.name}' called but no interactive handler is set up.`);
             resolve(void 0);
           });
         }
@@ -1057,11 +1070,10 @@ var CopilotKitProvider = ({
   }, [renderToolCallsList, frontendToolsList, processedHumanInTheLoopTools]);
   const copilotkit = (0, import_react5.useMemo)(() => {
     const config = {
-      // Don't set runtimeUrl during initialization to prevent server-side fetching
-      runtimeUrl: void 0,
+      runtimeUrl,
       headers,
       properties,
-      agents,
+      agents__unsafe_dev_only: agents,
       tools: allTools
     };
     const copilotkit2 = new import_core.CopilotKitCore(config);
@@ -1097,7 +1109,7 @@ var CopilotKitProvider = ({
     copilotkit.setRuntimeUrl(runtimeUrl);
     copilotkit.setHeaders(headers);
     copilotkit.setProperties(properties);
-    copilotkit.setAgents(agents);
+    copilotkit.setAgents__unsafe_dev_only(agents);
   }, [runtimeUrl, headers, properties, agents]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     CopilotKitContext.Provider,
@@ -1133,10 +1145,12 @@ var useCopilotKit = () => {
 
 // src/hooks/use-render-tool-call.tsx
 var import_shared2 = require("@copilotkitnext/shared");
+var import_shared3 = require("@copilotkitnext/shared");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function useRenderToolCall() {
   const { currentRenderToolCalls, copilotkit } = useCopilotKit();
-  const { agentId } = useCopilotChatConfiguration();
+  const config = useCopilotChatConfiguration();
+  const agentId = config?.agentId ?? import_shared2.DEFAULT_AGENT_ID;
   const [executingToolCallIds, setExecutingToolCallIds] = (0, import_react6.useState)(() => /* @__PURE__ */ new Set());
   (0, import_react6.useEffect)(() => {
     const unsubscribe = copilotkit.subscribe({
@@ -1172,7 +1186,7 @@ function useRenderToolCall() {
         return null;
       }
       const RenderComponent = renderConfig.render;
-      const args = (0, import_shared2.partialJSONParse)(toolCall.function.arguments);
+      const args = (0, import_shared3.partialJSONParse)(toolCall.function.arguments);
       const toolName = toolCall.function.name;
       if (toolMessage) {
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1325,14 +1339,14 @@ function useHumanInTheLoop(tool) {
 
 // src/hooks/use-agent.tsx
 var import_react10 = require("react");
-var import_shared3 = require("@copilotkitnext/shared");
+var import_shared4 = require("@copilotkitnext/shared");
 var ALL_UPDATES = [
   "OnMessagesChanged" /* OnMessagesChanged */,
   "OnStateChanged" /* OnStateChanged */,
   "OnRunStatusChanged" /* OnRunStatusChanged */
 ];
 function useAgent({ agentId, updates } = {}) {
-  agentId ??= import_shared3.DEFAULT_AGENT_ID;
+  agentId ??= import_shared4.DEFAULT_AGENT_ID;
   const { copilotkit } = useCopilotKit();
   const [, forceUpdate] = (0, import_react10.useReducer)((x) => x + 1, 0);
   const updateFlags = (0, import_react10.useMemo)(
@@ -1398,8 +1412,192 @@ function useAgentContext(context) {
   }, [description, value, copilotkit]);
 }
 
+// src/hooks/use-suggestions.tsx
+var import_react12 = require("react");
+var import_shared5 = require("@copilotkitnext/shared");
+function useSuggestions({ agentId } = {}) {
+  const { copilotkit } = useCopilotKit();
+  const config = useCopilotChatConfiguration();
+  const resolvedAgentId = (0, import_react12.useMemo)(() => agentId ?? config?.agentId ?? import_shared5.DEFAULT_AGENT_ID, [agentId, config?.agentId]);
+  const [suggestions, setSuggestions] = (0, import_react12.useState)(() => {
+    const result = copilotkit.getSuggestions(resolvedAgentId);
+    return result.suggestions;
+  });
+  const [isLoading, setIsLoading] = (0, import_react12.useState)(() => {
+    const result = copilotkit.getSuggestions(resolvedAgentId);
+    return result.isLoading;
+  });
+  (0, import_react12.useEffect)(() => {
+    const result = copilotkit.getSuggestions(resolvedAgentId);
+    setSuggestions(result.suggestions);
+    setIsLoading(result.isLoading);
+  }, [copilotkit, resolvedAgentId]);
+  (0, import_react12.useEffect)(() => {
+    const unsubscribe = copilotkit.subscribe({
+      onSuggestionsChanged: ({ agentId: changedAgentId, suggestions: suggestions2 }) => {
+        if (changedAgentId !== resolvedAgentId) {
+          return;
+        }
+        setSuggestions(suggestions2);
+      },
+      onSuggestionsStartedLoading: ({ agentId: changedAgentId }) => {
+        if (changedAgentId !== resolvedAgentId) {
+          return;
+        }
+        setIsLoading(true);
+      },
+      onSuggestionsFinishedLoading: ({ agentId: changedAgentId }) => {
+        if (changedAgentId !== resolvedAgentId) {
+          return;
+        }
+        setIsLoading(false);
+      },
+      onSuggestionsConfigChanged: () => {
+        const result = copilotkit.getSuggestions(resolvedAgentId);
+        setSuggestions(result.suggestions);
+        setIsLoading(result.isLoading);
+      }
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [copilotkit, resolvedAgentId]);
+  const reloadSuggestions = (0, import_react12.useCallback)(() => {
+    copilotkit.reloadSuggestions(resolvedAgentId);
+  }, [copilotkit, resolvedAgentId]);
+  const clearSuggestions = (0, import_react12.useCallback)(() => {
+    copilotkit.clearSuggestions(resolvedAgentId);
+  }, [copilotkit, resolvedAgentId]);
+  return {
+    suggestions,
+    reloadSuggestions,
+    clearSuggestions,
+    isLoading
+  };
+}
+
+// src/hooks/use-configure-suggestions.tsx
+var import_react13 = require("react");
+var import_shared6 = require("@copilotkitnext/shared");
+var EMPTY_DEPS = [];
+function useConfigureSuggestions(config, options) {
+  const { copilotkit } = useCopilotKit();
+  const chatConfig = useCopilotChatConfiguration();
+  const extraDeps = options?.deps ?? EMPTY_DEPS;
+  const resolvedConsumerAgentId = (0, import_react13.useMemo)(() => chatConfig?.agentId ?? import_shared6.DEFAULT_AGENT_ID, [chatConfig?.agentId]);
+  const rawConsumerAgentId = (0, import_react13.useMemo)(() => config ? config.consumerAgentId : void 0, [config]);
+  const normalizationCacheRef = (0, import_react13.useRef)({
+    serialized: null,
+    config: null
+  });
+  const { normalizedConfig, serializedConfig } = (0, import_react13.useMemo)(() => {
+    if (!config) {
+      normalizationCacheRef.current = { serialized: null, config: null };
+      return { normalizedConfig: null, serializedConfig: null };
+    }
+    if (config.available === "disabled") {
+      normalizationCacheRef.current = { serialized: null, config: null };
+      return { normalizedConfig: null, serializedConfig: null };
+    }
+    let built;
+    if (isDynamicConfig(config)) {
+      built = {
+        ...config
+      };
+    } else {
+      const normalizedSuggestions = normalizeStaticSuggestions(config.suggestions);
+      const baseConfig = {
+        ...config,
+        suggestions: normalizedSuggestions
+      };
+      built = baseConfig;
+    }
+    const serialized = JSON.stringify(built);
+    const cache = normalizationCacheRef.current;
+    if (cache.serialized === serialized && cache.config) {
+      return { normalizedConfig: cache.config, serializedConfig: serialized };
+    }
+    normalizationCacheRef.current = { serialized, config: built };
+    return { normalizedConfig: built, serializedConfig: serialized };
+  }, [config, resolvedConsumerAgentId, ...extraDeps]);
+  const latestConfigRef = (0, import_react13.useRef)(null);
+  latestConfigRef.current = normalizedConfig;
+  const previousSerializedConfigRef = (0, import_react13.useRef)(null);
+  const targetAgentId = (0, import_react13.useMemo)(() => {
+    if (!normalizedConfig) {
+      return resolvedConsumerAgentId;
+    }
+    const consumer = normalizedConfig.consumerAgentId;
+    if (!consumer || consumer === "*") {
+      return resolvedConsumerAgentId;
+    }
+    return consumer;
+  }, [normalizedConfig, resolvedConsumerAgentId]);
+  const isGlobalConfig = rawConsumerAgentId === void 0 || rawConsumerAgentId === "*";
+  const requestReload = (0, import_react13.useCallback)(() => {
+    if (!normalizedConfig) {
+      return;
+    }
+    if (isGlobalConfig) {
+      const agents = Object.values(copilotkit.agents ?? {});
+      for (const entry of agents) {
+        const agentId = entry.agentId;
+        if (!agentId) {
+          continue;
+        }
+        if (!entry.isRunning) {
+          copilotkit.reloadSuggestions(agentId);
+        }
+      }
+      return;
+    }
+    if (!targetAgentId) {
+      return;
+    }
+    copilotkit.reloadSuggestions(targetAgentId);
+  }, [copilotkit, isGlobalConfig, normalizedConfig, targetAgentId]);
+  (0, import_react13.useEffect)(() => {
+    if (!serializedConfig || !latestConfigRef.current) {
+      return;
+    }
+    const id = copilotkit.addSuggestionsConfig(latestConfigRef.current);
+    requestReload();
+    return () => {
+      copilotkit.removeSuggestionsConfig(id);
+    };
+  }, [copilotkit, serializedConfig, requestReload]);
+  (0, import_react13.useEffect)(() => {
+    if (!normalizedConfig) {
+      previousSerializedConfigRef.current = null;
+      return;
+    }
+    if (serializedConfig && previousSerializedConfigRef.current === serializedConfig) {
+      return;
+    }
+    if (serializedConfig) {
+      previousSerializedConfigRef.current = serializedConfig;
+    }
+    requestReload();
+  }, [normalizedConfig, requestReload, serializedConfig]);
+  (0, import_react13.useEffect)(() => {
+    if (!normalizedConfig || extraDeps.length === 0) {
+      return;
+    }
+    requestReload();
+  }, [extraDeps.length, normalizedConfig, requestReload, ...extraDeps]);
+}
+function isDynamicConfig(config) {
+  return "instructions" in config;
+}
+function normalizeStaticSuggestions(suggestions) {
+  return suggestions.map((suggestion) => ({
+    ...suggestion,
+    isLoading: suggestion.isLoading ?? false
+  }));
+}
+
 // src/components/chat/CopilotChatToolCallsView.tsx
-var import_react12 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function CopilotChatToolCallsView({
   message,
@@ -1413,7 +1611,7 @@ function CopilotChatToolCallsView({
     const toolMessage = messages.find(
       (m) => m.role === "tool" && m.toolCallId === toolCall.id
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react12.default.Fragment, { children: renderToolCall({
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react14.default.Fragment, { children: renderToolCall({
       toolCall,
       toolMessage
     }) }, toolCall.id);
@@ -1572,8 +1770,9 @@ function CopilotChatAssistantMessage({
     );
   };
   const CodeBlock = ({ children, className, onClick, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
-    const [copied, setCopied] = (0, import_react13.useState)(false);
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
+    const [copied, setCopied] = (0, import_react15.useState)(false);
     const getCodeContent = (node) => {
       if (typeof node === "string") return node;
       if (Array.isArray(node)) return node.map(getCodeContent).join("");
@@ -1685,8 +1884,9 @@ function CopilotChatAssistantMessage({
     ] });
   };
   CopilotChatAssistantMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
-    const [copied, setCopied] = (0, import_react13.useState)(false);
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
+    const [copied, setCopied] = (0, import_react15.useState)(false);
     const handleClick = (event) => {
       setCopied(true);
       setTimeout(() => setCopied(false), 2e3);
@@ -1706,7 +1906,8 @@ function CopilotChatAssistantMessage({
     );
   };
   CopilotChatAssistantMessage2.ThumbsUpButton = ({ title, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
@@ -1717,7 +1918,8 @@ function CopilotChatAssistantMessage({
     );
   };
   CopilotChatAssistantMessage2.ThumbsDownButton = ({ title, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
@@ -1728,7 +1930,8 @@ function CopilotChatAssistantMessage({
     );
   };
   CopilotChatAssistantMessage2.ReadAloudButton = ({ title, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
@@ -1739,7 +1942,8 @@ function CopilotChatAssistantMessage({
     );
   };
   CopilotChatAssistantMessage2.RegenerateButton = ({ title, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
@@ -1760,7 +1964,7 @@ CopilotChatAssistantMessage.RegenerateButton.displayName = "CopilotChatAssistant
 var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
 
 // src/components/chat/CopilotChatUserMessage.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 var import_lucide_react4 = require("lucide-react");
 var import_tailwind_merge5 = require("tailwind-merge");
 var import_jsx_runtime11 = require("react/jsx-runtime");
@@ -1903,8 +2107,9 @@ function CopilotChatUserMessage({
     ] });
   };
   CopilotChatUserMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
-    const [copied, setCopied] = (0, import_react14.useState)(false);
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
+    const [copied, setCopied] = (0, import_react16.useState)(false);
     const handleClick = (event) => {
       setCopied(true);
       setTimeout(() => setCopied(false), 2e3);
@@ -1924,7 +2129,8 @@ function CopilotChatUserMessage({
     );
   };
   CopilotChatUserMessage2.EditButton = ({ className, title, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       CopilotChatUserMessage2.ToolbarButton,
       {
@@ -1996,9 +2202,118 @@ CopilotChatUserMessage.EditButton.displayName = "CopilotChatUserMessage.EditButt
 CopilotChatUserMessage.BranchNavigation.displayName = "CopilotChatUserMessage.BranchNavigation";
 var CopilotChatUserMessage_default = CopilotChatUserMessage;
 
+// src/components/chat/CopilotChatSuggestionPill.tsx
+var import_react17 = __toESM(require("react"));
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var baseClasses = "group inline-flex h-8 items-center gap-1.5 rounded-full border border-border/60 bg-background px-3 text-xs leading-none text-foreground transition-colors cursor-pointer hover:bg-accent/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:text-muted-foreground disabled:hover:bg-background disabled:hover:text-muted-foreground pointer-events-auto";
+var labelClasses = "whitespace-nowrap font-medium leading-none";
+var CopilotChatSuggestionPill = import_react17.default.forwardRef(function CopilotChatSuggestionPill2({ className, children, icon, isLoading, type, ...props }, ref) {
+  const showIcon = !isLoading && icon;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "button",
+    {
+      ref,
+      "data-slot": "suggestion-pill",
+      className: cn(baseClasses, className),
+      type: type ?? "button",
+      "aria-busy": isLoading || void 0,
+      disabled: isLoading || props.disabled,
+      ...props,
+      children: [
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex h-4 w-4 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }) }) : showIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex h-4 w-4 items-center justify-center text-muted-foreground", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: labelClasses, children })
+      ]
+    }
+  );
+});
+CopilotChatSuggestionPill.displayName = "CopilotChatSuggestionPill";
+var CopilotChatSuggestionPill_default = CopilotChatSuggestionPill;
+
+// src/components/chat/CopilotChatSuggestionView.tsx
+var import_react18 = __toESM(require("react"));
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var DefaultContainer = import_react18.default.forwardRef(function DefaultContainer2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-wrap items-center gap-2 px-4 sm:px-0 pointer-events-none",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var CopilotChatSuggestionView = import_react18.default.forwardRef(function CopilotChatSuggestionView2({
+  suggestions,
+  onSelectSuggestion,
+  loadingIndexes,
+  container,
+  suggestion: suggestionSlot,
+  className,
+  children,
+  ...restProps
+}, ref) {
+  const loadingSet = import_react18.default.useMemo(() => {
+    if (!loadingIndexes || loadingIndexes.length === 0) {
+      return /* @__PURE__ */ new Set();
+    }
+    return new Set(loadingIndexes);
+  }, [loadingIndexes]);
+  const ContainerElement = renderSlot(container, DefaultContainer, {
+    ref,
+    className,
+    ...restProps
+  });
+  const suggestionElements = suggestions.map((suggestion, index) => {
+    const isLoading = loadingSet.has(index) || suggestion.isLoading === true;
+    const pill = renderSlot(suggestionSlot, CopilotChatSuggestionPill_default, {
+      children: suggestion.title,
+      isLoading,
+      type: "button",
+      onClick: () => onSelectSuggestion?.(suggestion, index)
+    });
+    return import_react18.default.cloneElement(pill, {
+      key: `${suggestion.title}-${index}`
+    });
+  });
+  const boundContainer = import_react18.default.cloneElement(
+    ContainerElement,
+    void 0,
+    suggestionElements
+  );
+  if (typeof children === "function") {
+    const sampleSuggestion = renderSlot(suggestionSlot, CopilotChatSuggestionPill_default, {
+      children: suggestions[0]?.title ?? "",
+      isLoading: suggestions.length > 0 ? loadingSet.has(0) || suggestions[0]?.isLoading === true : false,
+      type: "button"
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: children({
+      container: boundContainer,
+      suggestion: sampleSuggestion,
+      suggestions,
+      onSelectSuggestion,
+      loadingIndexes,
+      className,
+      ...restProps
+    }) });
+  }
+  if (children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      boundContainer,
+      children
+    ] });
+  }
+  return boundContainer;
+});
+CopilotChatSuggestionView.displayName = "CopilotChatSuggestionView";
+var CopilotChatSuggestionView_default = CopilotChatSuggestionView;
+
 // src/components/chat/CopilotChatMessageView.tsx
 var import_tailwind_merge6 = require("tailwind-merge");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function CopilotChatMessageView({
   messages = [],
   assistantMessage,
@@ -2028,7 +2343,7 @@ function CopilotChatMessageView({
   if (children) {
     return children({ messageElements, messages, isRunning });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: (0, import_tailwind_merge6.twMerge)("flex flex-col", className), ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: (0, import_tailwind_merge6.twMerge)("flex flex-col", className), ...props, children: [
     messageElements,
     isRunning && renderSlot(cursor, CopilotChatMessageView.Cursor, {})
   ] });
@@ -2037,7 +2352,7 @@ CopilotChatMessageView.Cursor = function Cursor({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       className: (0, import_tailwind_merge6.twMerge)(
@@ -2051,11 +2366,11 @@ CopilotChatMessageView.Cursor = function Cursor({
 var CopilotChatMessageView_default = CopilotChatMessageView;
 
 // src/components/chat/CopilotChatView.tsx
-var import_react15 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var import_tailwind_merge7 = require("tailwind-merge");
 var import_use_stick_to_bottom = require("use-stick-to-bottom");
-var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function CopilotChatView({
   messageView,
   input,
@@ -2064,19 +2379,23 @@ function CopilotChatView({
   feather,
   inputContainer,
   disclaimer,
+  suggestionView,
   messages = [],
   autoScroll = true,
   inputProps,
   isRunning = false,
+  suggestions,
+  suggestionLoadingIndexes,
+  onSelectSuggestion,
   children,
   className,
   ...props
 }) {
-  const inputContainerRef = (0, import_react15.useRef)(null);
-  const [inputContainerHeight, setInputContainerHeight] = (0, import_react15.useState)(0);
-  const [isResizing, setIsResizing] = (0, import_react15.useState)(false);
-  const resizeTimeoutRef = (0, import_react15.useRef)(null);
-  (0, import_react15.useEffect)(() => {
+  const inputContainerRef = (0, import_react19.useRef)(null);
+  const [inputContainerHeight, setInputContainerHeight] = (0, import_react19.useState)(0);
+  const [isResizing, setIsResizing] = (0, import_react19.useState)(false);
+  const resizeTimeoutRef = (0, import_react19.useRef)(null);
+  (0, import_react19.useEffect)(() => {
     const element = inputContainerRef.current;
     if (!element) return;
     const resizeObserver = new ResizeObserver((entries) => {
@@ -2110,40 +2429,38 @@ function CopilotChatView({
     messages,
     isRunning
   });
-  const BoundInput = renderSlot(
-    input,
-    CopilotChatInput_default,
-    inputProps ?? {}
-  );
+  const BoundInput = renderSlot(input, CopilotChatInput_default, inputProps ?? {});
+  const hasSuggestions = Array.isArray(suggestions) && suggestions.length > 0;
+  const BoundSuggestionView = hasSuggestions ? renderSlot(
+    suggestionView,
+    CopilotChatSuggestionView_default,
+    {
+      suggestions,
+      loadingIndexes: suggestionLoadingIndexes,
+      onSelectSuggestion,
+      className: "mb-3 lg:ml-4 lg:mr-4 ml-0 mr-0"
+    }
+  ) : null;
   const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
   const BoundScrollView = renderSlot(scrollView, CopilotChatView.ScrollView, {
     autoScroll,
     scrollToBottomButton,
     inputContainerHeight,
     isResizing,
-    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { paddingBottom: `${inputContainerHeight + 32}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "max-w-3xl mx-auto", children: BoundMessageView }) })
+    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { paddingBottom: `${inputContainerHeight + (hasSuggestions ? 4 : 32)}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "max-w-3xl mx-auto", children: [
+      BoundMessageView,
+      hasSuggestions ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-4 sm:px-0 mt-4", children: BoundSuggestionView }) : null
+    ] }) })
+  });
+  const BoundScrollToBottomButton = renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, {});
+  const BoundDisclaimer = renderSlot(disclaimer, CopilotChatView.Disclaimer, {});
+  const BoundInputContainer = renderSlot(inputContainer, CopilotChatView.InputContainer, {
+    ref: inputContainerRef,
+    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "max-w-3xl mx-auto py-0 px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 pointer-events-auto", children: BoundInput }),
+      BoundDisclaimer
+    ] })
   });
-  const BoundScrollToBottomButton = renderSlot(
-    scrollToBottomButton,
-    CopilotChatView.ScrollToBottomButton,
-    {}
-  );
-  const BoundDisclaimer = renderSlot(
-    disclaimer,
-    CopilotChatView.Disclaimer,
-    {}
-  );
-  const BoundInputContainer = renderSlot(
-    inputContainer,
-    CopilotChatView.InputContainer,
-    {
-      ref: inputContainerRef,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "max-w-3xl mx-auto py-0 px-4 sm:px-0", children: BoundInput }),
-        BoundDisclaimer
-      ] })
-    }
-  );
   if (children) {
     return children({
       messageView: BoundMessageView,
@@ -2152,10 +2469,11 @@ function CopilotChatView({
       scrollToBottomButton: BoundScrollToBottomButton,
       feather: BoundFeather,
       inputContainer: BoundInputContainer,
-      disclaimer: BoundDisclaimer
+      disclaimer: BoundDisclaimer,
+      suggestionView: BoundSuggestionView ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {})
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_tailwind_merge7.twMerge)("relative h-full", className), ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: (0, import_tailwind_merge7.twMerge)("relative h-full", className), ...props, children: [
     BoundScrollView,
     BoundFeather,
     BoundInputContainer
@@ -2164,22 +2482,18 @@ function CopilotChatView({
 ((CopilotChatView2) => {
   const ScrollContent = ({ children, scrollToBottomButton, inputContainerHeight, isResizing }) => {
     const { isAtBottom, scrollToBottom } = (0, import_use_stick_to_bottom.useStickToBottomContext)();
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_use_stick_to_bottom.StickToBottom.Content, { className: "overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "px-4 sm:px-0", children }) }),
-      !isAtBottom && !isResizing && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_use_stick_to_bottom.StickToBottom.Content, { className: "overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8", children }) }),
+      !isAtBottom && !isResizing && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "div",
         {
-          className: "absolute inset-x-0 flex justify-center z-10",
+          className: "absolute inset-x-0 flex justify-center z-10 pointer-events-none",
           style: {
             bottom: `${inputContainerHeight + 16}px`
           },
-          children: renderSlot(
-            scrollToBottomButton,
-            CopilotChatView2.ScrollToBottomButton,
-            {
-              onClick: () => scrollToBottom()
-            }
-          )
+          children: renderSlot(scrollToBottomButton, CopilotChatView2.ScrollToBottomButton, {
+            onClick: () => scrollToBottom()
+          })
         }
       )
     ] });
@@ -2193,13 +2507,13 @@ function CopilotChatView({
     className,
     ...props
   }) => {
-    const [hasMounted, setHasMounted] = (0, import_react15.useState)(false);
+    const [hasMounted, setHasMounted] = (0, import_react19.useState)(false);
     const { scrollRef, contentRef, scrollToBottom } = (0, import_use_stick_to_bottom.useStickToBottom)();
-    const [showScrollButton, setShowScrollButton] = (0, import_react15.useState)(false);
-    (0, import_react15.useEffect)(() => {
+    const [showScrollButton, setShowScrollButton] = (0, import_react19.useState)(false);
+    (0, import_react19.useEffect)(() => {
       setHasMounted(true);
     }, []);
-    (0, import_react15.useEffect)(() => {
+    (0, import_react19.useEffect)(() => {
       if (autoScroll) return;
       const scrollElement = scrollRef.current;
       if (!scrollElement) return;
@@ -2217,45 +2531,44 @@ function CopilotChatView({
       };
     }, [scrollRef, autoScroll]);
     if (!hasMounted) {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "h-full max-h-full flex flex-col min-h-0 overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "px-4 sm:px-0", children }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "h-full max-h-full flex flex-col min-h-0 overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8", children }) });
     }
     if (!autoScroll) {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
         "div",
         {
           ref: scrollRef,
-          className: cn("h-full max-h-full flex flex-col min-h-0 overflow-y-scroll overflow-x-hidden relative", className),
+          className: cn(
+            "h-full max-h-full flex flex-col min-h-0 overflow-y-scroll overflow-x-hidden relative",
+            className
+          ),
           ...props,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: contentRef, className: "px-4 sm:px-0", children }),
-            showScrollButton && !isResizing && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: contentRef, className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8", children }),
+            showScrollButton && !isResizing && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "div",
               {
-                className: "absolute inset-x-0 flex justify-center z-10",
+                className: "absolute inset-x-0 flex justify-center z-10 pointer-events-none",
                 style: {
                   bottom: `${inputContainerHeight + 16}px`
                 },
-                children: renderSlot(
-                  scrollToBottomButton,
-                  CopilotChatView2.ScrollToBottomButton,
-                  {
-                    onClick: () => scrollToBottom()
-                  }
-                )
+                children: renderSlot(scrollToBottomButton, CopilotChatView2.ScrollToBottomButton, {
+                  onClick: () => scrollToBottom()
+                })
               }
             )
           ]
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       import_use_stick_to_bottom.StickToBottom,
       {
         className: cn("h-full max-h-full flex flex-col min-h-0 relative", className),
         resize: "smooth",
         initial: "smooth",
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           ScrollContent,
           {
             scrollToBottomButton,
@@ -2267,13 +2580,16 @@ function CopilotChatView({
       }
     );
   };
-  CopilotChatView2.ScrollToBottomButton = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  CopilotChatView2.ScrollToBottomButton = ({
+    className,
+    ...props
+  }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     Button,
     {
       variant: "outline",
       size: "sm",
       className: (0, import_tailwind_merge7.twMerge)(
-        "rounded-full w-10 h-10 p-0",
+        "rounded-full w-10 h-10 p-0 pointer-events-auto",
         "bg-white dark:bg-gray-900",
         "shadow-lg border border-gray-200 dark:border-gray-700",
         "hover:bg-gray-50 dark:hover:bg-gray-800",
@@ -2281,14 +2597,10 @@ function CopilotChatView({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.ChevronDown, { className: "w-4 h-4 text-gray-600 dark:text-white" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react6.ChevronDown, { className: "w-4 h-4 text-gray-600 dark:text-white" })
     }
   );
-  CopilotChatView2.Feather = ({
-    className,
-    style,
-    ...props
-  }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  CopilotChatView2.Feather = ({ className, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       className: cn(
@@ -2301,28 +2613,15 @@ function CopilotChatView({
       ...props
     }
   );
-  CopilotChatView2.InputContainer = import_react15.default.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    "div",
-    {
-      ref,
-      className: cn("absolute bottom-0 left-0 right-0 z-20", className),
-      ...props,
-      children
-    }
-  ));
+  CopilotChatView2.InputContainer = import_react19.default.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref, className: cn("absolute bottom-0 left-0 right-0 z-20 pointer-events-none", className), ...props, children }));
   CopilotChatView2.InputContainer.displayName = "CopilotChatView.InputContainer";
-  CopilotChatView2.Disclaimer = ({
-    className,
-    ...props
-  }) => {
-    const { labels } = useCopilotChatConfiguration();
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  CopilotChatView2.Disclaimer = ({ className, ...props }) => {
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
-        className: cn(
-          "text-center text-xs text-muted-foreground py-3 px-4 max-w-3xl mx-auto",
-          className
-        ),
+        className: cn("text-center text-xs text-muted-foreground py-3 px-4 max-w-3xl mx-auto", className),
         ...props,
         children: labels.chatDisclaimerText
       }
@@ -2332,23 +2631,31 @@ function CopilotChatView({
 var CopilotChatView_default = CopilotChatView;
 
 // src/components/chat/CopilotChat.tsx
-var import_shared4 = require("@copilotkitnext/shared");
-var import_react16 = require("react");
+var import_shared7 = require("@copilotkitnext/shared");
+var import_react20 = require("react");
 var import_ts_deepmerge = require("ts-deepmerge");
 var import_client = require("@ag-ui/client");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-function CopilotChat({
-  agentId = import_shared4.DEFAULT_AGENT_ID,
-  threadId,
-  ...props
-}) {
-  const { agent } = useAgent({ agentId });
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen, ...props }) {
+  const existingConfig = useCopilotChatConfiguration();
+  const resolvedAgentId = agentId ?? existingConfig?.agentId ?? import_shared7.DEFAULT_AGENT_ID;
+  const resolvedThreadId = (0, import_react20.useMemo)(
+    () => threadId ?? existingConfig?.threadId ?? (0, import_shared7.randomUUID)(),
+    [threadId, existingConfig?.threadId]
+  );
+  const { agent } = useAgent({ agentId: resolvedAgentId });
   const { copilotkit } = useCopilotKit();
-  const resolvedThreadId = (0, import_react16.useMemo)(() => threadId ?? (0, import_shared4.randomUUID)(), [threadId]);
-  (0, import_react16.useEffect)(() => {
+  const { suggestions: autoSuggestions } = useSuggestions({ agentId: resolvedAgentId });
+  const {
+    inputProps: providedInputProps,
+    messageView: providedMessageView,
+    suggestionView: providedSuggestionView,
+    ...restProps
+  } = props;
+  (0, import_react20.useEffect)(() => {
     const connect = async (agent2) => {
       try {
-        await copilotkit.connectAgent({ agent: agent2, agentId });
+        await copilotkit.connectAgent({ agent: agent2 });
       } catch (error) {
         if (error instanceof import_client.AGUIConnectNotImplementedError) {
         } else {
@@ -2362,59 +2669,392 @@ function CopilotChat({
     }
     return () => {
     };
-  }, [resolvedThreadId, agent, copilotkit, agentId]);
-  const onSubmitInput = (0, import_react16.useCallback)(
+  }, [resolvedThreadId, agent, copilotkit, resolvedAgentId]);
+  const onSubmitInput = (0, import_react20.useCallback)(
     async (value) => {
       agent?.addMessage({
-        id: (0, import_shared4.randomUUID)(),
+        id: (0, import_shared7.randomUUID)(),
         role: "user",
         content: value
       });
       if (agent) {
         try {
-          await copilotkit.runAgent({ agent, agentId });
+          await copilotkit.runAgent({ agent });
         } catch (error) {
           console.error("CopilotChat: runAgent failed", error);
         }
       }
     },
-    [agent, copilotkit, agentId]
+    [agent, copilotkit]
+  );
+  const handleSelectSuggestion = (0, import_react20.useCallback)(
+    async (suggestion) => {
+      if (!agent) {
+        return;
+      }
+      agent.addMessage({
+        id: (0, import_shared7.randomUUID)(),
+        role: "user",
+        content: suggestion.message
+      });
+      try {
+        await copilotkit.runAgent({ agent });
+      } catch (error) {
+        console.error("CopilotChat: runAgent failed after selecting suggestion", error);
+      }
+    },
+    [agent, copilotkit]
   );
-  const {
-    inputProps: providedInputProps,
-    messageView: providedMessageView,
-    ...restProps
-  } = props;
   const mergedProps = (0, import_ts_deepmerge.merge)(
     {
-      isRunning: agent?.isRunning ?? false
+      isRunning: agent?.isRunning ?? false,
+      suggestions: autoSuggestions,
+      onSelectSuggestion: handleSelectSuggestion,
+      suggestionView: providedSuggestionView
     },
     {
       ...restProps,
       ...typeof providedMessageView === "string" ? { messageView: { className: providedMessageView } } : providedMessageView !== void 0 ? { messageView: providedMessageView } : {}
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  const finalProps = (0, import_ts_deepmerge.merge)(mergedProps, {
+    messages: agent?.messages ?? [],
+    inputProps: {
+      onSubmitMessage: onSubmitInput,
+      ...providedInputProps
+    }
+  });
+  const RenderedChatView = renderSlot(chatView, CopilotChatView, finalProps);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     CopilotChatConfigurationProvider,
     {
-      agentId,
+      agentId: resolvedAgentId,
       threadId: resolvedThreadId,
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        CopilotChatView,
+      labels,
+      isModalDefaultOpen,
+      children: RenderedChatView
+    }
+  );
+}
+((CopilotChat2) => {
+  CopilotChat2.View = CopilotChatView;
+})(CopilotChat || (CopilotChat = {}));
+
+// src/components/chat/CopilotChatToggleButton.tsx
+var import_react21 = __toESM(require("react"));
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var DefaultOpenIcon = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.MessageCircle, { className: cn("h-6 w-6", className), strokeWidth: 1.75, fill: "currentColor", ...props });
+var DefaultCloseIcon = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.X, { className: cn("h-6 w-6", className), strokeWidth: 1.75, ...props });
+DefaultOpenIcon.displayName = "CopilotChatToggleButton.OpenIcon";
+DefaultCloseIcon.displayName = "CopilotChatToggleButton.CloseIcon";
+var ICON_TRANSITION_STYLE = Object.freeze({
+  transition: "opacity 120ms ease-out, transform 260ms cubic-bezier(0.22, 1, 0.36, 1)"
+});
+var ICON_WRAPPER_BASE = "pointer-events-none absolute inset-0 flex items-center justify-center will-change-transform";
+var BUTTON_BASE_CLASSES = cn(
+  "fixed bottom-6 right-6 z-[1100] flex h-14 w-14 items-center justify-center",
+  "rounded-full border border-primary bg-primary text-primary-foreground",
+  "shadow-sm transition-all duration-200 ease-out",
+  "hover:scale-[1.04] hover:shadow-md",
+  "cursor-pointer",
+  "active:scale-[0.96]",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  "disabled:pointer-events-none disabled:opacity-60"
+);
+var CopilotChatToggleButton = import_react21.default.forwardRef(function CopilotChatToggleButton2({ openIcon, closeIcon, className, ...buttonProps }, ref) {
+  const { onClick, type, disabled, ...restProps } = buttonProps;
+  const configuration = useCopilotChatConfiguration();
+  const labels = configuration?.labels ?? CopilotChatDefaultLabels;
+  const [fallbackOpen, setFallbackOpen] = (0, import_react21.useState)(false);
+  const isOpen = configuration?.isModalOpen ?? fallbackOpen;
+  const setModalOpen = configuration?.setModalOpen ?? setFallbackOpen;
+  const handleClick = (event) => {
+    if (disabled) {
+      return;
+    }
+    if (onClick) {
+      onClick(event);
+    }
+    if (event.defaultPrevented) {
+      return;
+    }
+    const nextOpen = !isOpen;
+    setModalOpen(nextOpen);
+  };
+  const renderedOpenIcon = renderSlot(
+    openIcon,
+    DefaultOpenIcon,
+    {
+      className: "h-6 w-6",
+      "aria-hidden": true,
+      focusable: false
+    }
+  );
+  const renderedCloseIcon = renderSlot(
+    closeIcon,
+    DefaultCloseIcon,
+    {
+      className: "h-6 w-6",
+      "aria-hidden": true,
+      focusable: false
+    }
+  );
+  const openIconElement = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slot": "chat-toggle-button-open-icon",
+      className: ICON_WRAPPER_BASE,
+      style: {
+        ...ICON_TRANSITION_STYLE,
+        opacity: isOpen ? 0 : 1,
+        transform: `scale(${isOpen ? 0.75 : 1}) rotate(${isOpen ? 90 : 0}deg)`
+      },
+      children: renderedOpenIcon
+    }
+  );
+  const closeIconElement = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slot": "chat-toggle-button-close-icon",
+      className: ICON_WRAPPER_BASE,
+      style: {
+        ...ICON_TRANSITION_STYLE,
+        opacity: isOpen ? 1 : 0,
+        transform: `scale(${isOpen ? 1 : 0.75}) rotate(${isOpen ? 0 : -90}deg)`
+      },
+      children: renderedCloseIcon
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "button",
+    {
+      ref,
+      type: type ?? "button",
+      "data-slot": "chat-toggle-button",
+      "data-state": isOpen ? "open" : "closed",
+      className: cn(BUTTON_BASE_CLASSES, className),
+      "aria-label": isOpen ? labels.chatToggleCloseLabel : labels.chatToggleOpenLabel,
+      "aria-pressed": isOpen,
+      disabled,
+      onClick: handleClick,
+      ...restProps,
+      children: [
+        openIconElement,
+        closeIconElement
+      ]
+    }
+  );
+});
+CopilotChatToggleButton.displayName = "CopilotChatToggleButton";
+var CopilotChatToggleButton_default = CopilotChatToggleButton;
+
+// src/components/chat/CopilotSidebarView.tsx
+var import_react23 = require("react");
+
+// src/components/chat/CopilotModalHeader.tsx
+var import_react22 = require("react");
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function CopilotModalHeader({
+  title,
+  titleContent,
+  closeButton,
+  children,
+  className,
+  ...rest
+}) {
+  const configuration = useCopilotChatConfiguration();
+  const fallbackTitle = configuration?.labels.modalHeaderTitle ?? CopilotChatDefaultLabels.modalHeaderTitle;
+  const resolvedTitle = title ?? fallbackTitle;
+  const handleClose = (0, import_react22.useCallback)(() => {
+    configuration?.setModalOpen(false);
+  }, [configuration]);
+  const BoundTitle = renderSlot(titleContent, CopilotModalHeader.Title, {
+    children: resolvedTitle
+  });
+  const BoundCloseButton = renderSlot(closeButton, CopilotModalHeader.CloseButton, {
+    onClick: handleClose
+  });
+  if (children) {
+    return children({
+      titleContent: BoundTitle,
+      closeButton: BoundCloseButton,
+      title: resolvedTitle,
+      ...rest
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "header",
+    {
+      "data-slot": "copilot-modal-header",
+      className: cn(
+        "flex items-center justify-between border-b border-border px-4 py-4",
+        "bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80",
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex-1", "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-1 justify-center text-center", children: BoundTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-1 justify-end", children: BoundCloseButton })
+      ] })
+    }
+  );
+}
+CopilotModalHeader.displayName = "CopilotModalHeader";
+((CopilotModalHeader2) => {
+  CopilotModalHeader2.Title = ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "div",
+    {
+      className: cn(
+        "w-full text-base font-medium leading-none tracking-tight text-foreground",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+  CopilotModalHeader2.CloseButton = ({
+    className,
+    ...props
+  }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "button",
+    {
+      type: "button",
+      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",
+        className
+      ),
+      "aria-label": "Close",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.X, { className: "h-4 w-4", "aria-hidden": "true" })
+    }
+  );
+})(CopilotModalHeader || (CopilotModalHeader = {}));
+CopilotModalHeader.Title.displayName = "CopilotModalHeader.Title";
+CopilotModalHeader.CloseButton.displayName = "CopilotModalHeader.CloseButton";
+
+// src/components/chat/CopilotSidebarView.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var DEFAULT_SIDEBAR_WIDTH = 480;
+var SIDEBAR_TRANSITION_MS = 260;
+function CopilotSidebarView({ header, width, ...props }) {
+  const configuration = useCopilotChatConfiguration();
+  const isSidebarOpen = configuration?.isModalOpen ?? false;
+  const sidebarRef = (0, import_react23.useRef)(null);
+  const [sidebarWidth, setSidebarWidth] = (0, import_react23.useState)(width ?? DEFAULT_SIDEBAR_WIDTH);
+  const widthToCss = (w) => {
+    return typeof w === "number" ? `${w}px` : w;
+  };
+  const widthToMargin = (w) => {
+    if (typeof w === "number") {
+      return `${w}px`;
+    }
+    return w;
+  };
+  (0, import_react23.useEffect)(() => {
+    if (width !== void 0) {
+      return;
+    }
+    if (typeof window === "undefined") {
+      return;
+    }
+    const element = sidebarRef.current;
+    if (!element) {
+      return;
+    }
+    const updateWidth = () => {
+      const rect = element.getBoundingClientRect();
+      if (rect.width > 0) {
+        setSidebarWidth(rect.width);
+      }
+    };
+    updateWidth();
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(() => updateWidth());
+      observer.observe(element);
+      return () => observer.disconnect();
+    }
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
+  }, [width]);
+  const headerElement = renderSlot(header, CopilotModalHeader, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    isSidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "style",
+      {
+        dangerouslySetInnerHTML: {
+          __html: `body {
+            margin-inline-end: ${widthToMargin(sidebarWidth)};
+            transition: margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease;
+          }`
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CopilotChatToggleButton_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "aside",
+      {
+        ref: sidebarRef,
+        "data-copilot-sidebar": true,
+        className: cn(
+          "fixed right-0 top-0 z-[1200] flex h-dvh max-h-screen",
+          "border-l border-border bg-background text-foreground shadow-xl",
+          "transition-transform duration-300 ease-out",
+          isSidebarOpen ? "translate-x-0" : "translate-x-full pointer-events-none"
+        ),
+        style: { width: widthToCss(sidebarWidth) },
+        "aria-hidden": !isSidebarOpen,
+        "aria-label": "Copilot chat sidebar",
+        role: "complementary",
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex h-full w-full flex-col overflow-hidden", children: [
+          headerElement,
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex-1 overflow-hidden", "data-sidebar-chat": true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CopilotChatView_default, { ...props }) })
+        ] })
+      }
+    )
+  ] });
+}
+CopilotSidebarView.displayName = "CopilotSidebarView";
+
+// src/components/chat/CopilotSidebar.tsx
+var import_react24 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
+  const SidebarViewOverride = (0, import_react24.useMemo)(() => {
+    const Component = (viewProps) => {
+      const { header: viewHeader, width: viewWidth, ...restProps } = viewProps;
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        CopilotSidebarView,
         {
-          ...{
-            messages: agent?.messages ?? [],
-            inputProps: {
-              onSubmitMessage: onSubmitInput,
-              ...providedInputProps
-            },
-            ...mergedProps
-          }
+          ...restProps,
+          header: header ?? viewHeader,
+          width: width ?? viewWidth
         }
-      )
+      );
+    };
+    return Object.assign(Component, CopilotChatView_default);
+  }, [header, width]);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    CopilotChat,
+    {
+      ...chatProps,
+      chatView: SidebarViewOverride,
+      isModalDefaultOpen: defaultOpen
     }
   );
 }
+CopilotSidebar.displayName = "CopilotSidebar";
 
 // src/types/defineToolCallRender.ts
 var import_zod2 = require("zod");
@@ -2429,25 +3069,25 @@ function defineToolCallRender(def) {
 }
 
 // src/components/WildcardToolCallRender.tsx
-var import_react17 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var WildcardToolCallRender = defineToolCallRender({
   name: "*",
   render: ({ args, result, name, status }) => {
-    const [isExpanded, setIsExpanded] = (0, import_react17.useState)(false);
+    const [isExpanded, setIsExpanded] = (0, import_react25.useState)(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__ */ (0, import_jsx_runtime15.jsx)("div", { className: "mt-2 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("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__ */ (0, import_jsx_runtime15.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mt-2 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("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__ */ (0, import_jsx_runtime21.jsxs)(
         "div",
         {
           className: "flex items-center justify-between gap-3 cursor-pointer",
           onClick: () => setIsExpanded(!isExpanded),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "svg",
                 {
                   className: `h-4 w-4 text-zinc-500 dark:text-zinc-400 transition-transform ${isExpanded ? "rotate-90" : ""}`,
@@ -2455,7 +3095,7 @@ var WildcardToolCallRender = defineToolCallRender({
                   viewBox: "0 0 24 24",
                   strokeWidth: 2,
                   stroke: "currentColor",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -2465,10 +3105,10 @@ var WildcardToolCallRender = defineToolCallRender({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-blue-500" }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "truncate text-sm font-medium text-zinc-900 dark:text-zinc-100", children: name })
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-blue-500" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "truncate text-sm font-medium text-zinc-900 dark:text-zinc-100", children: name })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "span",
               {
                 className: `inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${statusStyles}`,
@@ -2478,14 +3118,14 @@ var WildcardToolCallRender = defineToolCallRender({
           ]
         }
       ),
-      isExpanded && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "mt-3 grid gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Arguments" }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "mt-3 grid gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Arguments" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Result" }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Result" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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) })
         ] })
       ] })
     ] }) });
@@ -2500,18 +3140,28 @@ var WildcardToolCallRender = defineToolCallRender({
   CopilotChatConfigurationProvider,
   CopilotChatInput,
   CopilotChatMessageView,
+  CopilotChatSuggestionPill,
+  CopilotChatSuggestionView,
+  CopilotChatToggleButton,
+  CopilotChatToggleButtonCloseIcon,
+  CopilotChatToggleButtonOpenIcon,
   CopilotChatToolCallsView,
   CopilotChatUserMessage,
   CopilotChatView,
   CopilotKitProvider,
+  CopilotModalHeader,
+  CopilotSidebar,
+  CopilotSidebarView,
   WildcardToolCallRender,
   defineToolCallRender,
   useAgent,
   useAgentContext,
+  useConfigureSuggestions,
   useCopilotChatConfiguration,
   useCopilotKit,
   useFrontendTool,
   useHumanInTheLoop,
-  useRenderToolCall
+  useRenderToolCall,
+  useSuggestions
 });
 //# sourceMappingURL=index.js.map