@copilotkitnext/react 0.0.13 → 0.0.15

package/dist/index.mjs

@@ -1,9 +1,18 @@
 "use client";
 
 // src/components/chat/CopilotChatInput.tsx
-import { useState as useState2, useRef as useRef2, useEffect as useEffect2, forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle2 } from "react";
+import {
+  useState as useState2,
+  useRef as useRef2,
+  useEffect as useEffect2,
+  useLayoutEffect,
+  forwardRef as forwardRef2,
+  useImperativeHandle as useImperativeHandle2,
+  useCallback,
+  useMemo as useMemo2
+} from "react";
 import { twMerge as twMerge3 } from "tailwind-merge";
-import { Plus, Settings2, Mic, ArrowUp, X, Check } from "lucide-react";
+import { Plus, Mic, ArrowUp, X, Check } from "lucide-react";
 
 // src/providers/CopilotChatConfigurationProvider.tsx
 import { createContext, useContext, useMemo, useState } from "react";
@@ -493,6 +502,8 @@ function renderSlot(slot, DefaultComponent, props) {
 
 // src/components/chat/CopilotChatInput.tsx
 import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var SLASH_MENU_MAX_VISIBLE_ITEMS = 5;
+var SLASH_MENU_ITEM_HEIGHT_PX = 40;
 function CopilotChatInput({
   mode = "input",
   onSubmitMessage,
@@ -504,15 +515,12 @@ function CopilotChatInput({
   value,
   toolsMenu,
   autoFocus = true,
-  additionalToolbarItems,
   textArea,
   sendButton,
   startTranscribeButton,
   cancelTranscribeButton,
   finishTranscribeButton,
-  addFileButton,
-  toolsButton,
-  toolbar,
+  addMenuButton,
   audioRecorder,
   children,
   className,
@@ -526,10 +534,82 @@ function CopilotChatInput({
     }
   }, [isControlled, value]);
   const resolvedValue = isControlled ? value ?? "" : internalValue;
+  const [layout, setLayout] = useState2("compact");
+  const ignoreResizeRef = useRef2(false);
+  const resizeEvaluationRafRef = useRef2(null);
+  const isExpanded = mode === "input" && layout === "expanded";
+  const [commandQuery, setCommandQuery] = useState2(null);
+  const [slashHighlightIndex, setSlashHighlightIndex] = useState2(0);
   const inputRef = useRef2(null);
+  const gridRef = useRef2(null);
+  const addButtonContainerRef = useRef2(null);
+  const actionsContainerRef = useRef2(null);
   const audioRecorderRef = useRef2(null);
+  const slashMenuRef = useRef2(null);
   const config = useCopilotChatConfiguration();
+  const labels = config?.labels ?? CopilotChatDefaultLabels;
   const previousModalStateRef = useRef2(void 0);
+  const measurementCanvasRef = useRef2(null);
+  const measurementsRef = useRef2({
+    singleLineHeight: 0,
+    maxHeight: 0,
+    paddingLeft: 0,
+    paddingRight: 0
+  });
+  const commandItems = useMemo2(() => {
+    const entries = [];
+    const seen = /* @__PURE__ */ new Set();
+    const pushItem = (item) => {
+      if (item === "-") {
+        return;
+      }
+      if (item.items && item.items.length > 0) {
+        for (const nested of item.items) {
+          pushItem(nested);
+        }
+        return;
+      }
+      if (!seen.has(item.label)) {
+        seen.add(item.label);
+        entries.push(item);
+      }
+    };
+    if (onAddFile) {
+      pushItem({
+        label: labels.chatInputToolbarAddButtonLabel,
+        action: onAddFile
+      });
+    }
+    if (toolsMenu && toolsMenu.length > 0) {
+      for (const item of toolsMenu) {
+        pushItem(item);
+      }
+    }
+    return entries;
+  }, [labels.chatInputToolbarAddButtonLabel, onAddFile, toolsMenu]);
+  const filteredCommands = useMemo2(() => {
+    if (commandQuery === null) {
+      return [];
+    }
+    if (commandItems.length === 0) {
+      return [];
+    }
+    const query = commandQuery.trim().toLowerCase();
+    if (query.length === 0) {
+      return commandItems;
+    }
+    const startsWith = [];
+    const contains = [];
+    for (const item of commandItems) {
+      const label = item.label.toLowerCase();
+      if (label.startsWith(query)) {
+        startsWith.push(item);
+      } else if (label.includes(query)) {
+        contains.push(item);
+      }
+    }
+    return [...startsWith, ...contains];
+  }, [commandItems, commandQuery]);
   useEffect2(() => {
     if (!autoFocus) {
       previousModalStateRef.current = config?.isModalOpen;
@@ -540,6 +620,29 @@ function CopilotChatInput({
     }
     previousModalStateRef.current = config?.isModalOpen;
   }, [config?.isModalOpen, autoFocus]);
+  useEffect2(() => {
+    if (commandItems.length === 0 && commandQuery !== null) {
+      setCommandQuery(null);
+    }
+  }, [commandItems.length, commandQuery]);
+  const previousCommandQueryRef = useRef2(null);
+  useEffect2(() => {
+    if (commandQuery !== null && commandQuery !== previousCommandQueryRef.current && filteredCommands.length > 0) {
+      setSlashHighlightIndex(0);
+    }
+    previousCommandQueryRef.current = commandQuery;
+  }, [commandQuery, filteredCommands.length]);
+  useEffect2(() => {
+    if (commandQuery === null) {
+      setSlashHighlightIndex(0);
+      return;
+    }
+    if (filteredCommands.length === 0) {
+      setSlashHighlightIndex(-1);
+    } else if (slashHighlightIndex < 0 || slashHighlightIndex >= filteredCommands.length) {
+      setSlashHighlightIndex(0);
+    }
+  }, [commandQuery, filteredCommands, slashHighlightIndex]);
   useEffect2(() => {
     const recorder = audioRecorderRef.current;
     if (!recorder) {
@@ -553,14 +656,103 @@ function CopilotChatInput({
       }
     }
   }, [mode]);
+  useEffect2(() => {
+    if (mode !== "input") {
+      setLayout("compact");
+      setCommandQuery(null);
+    }
+  }, [mode]);
+  const updateSlashState = useCallback(
+    (value2) => {
+      if (commandItems.length === 0) {
+        setCommandQuery((prev) => prev === null ? prev : null);
+        return;
+      }
+      if (value2.startsWith("/")) {
+        const firstLine = value2.split(/\r?\n/, 1)[0] ?? "";
+        const query = firstLine.slice(1);
+        setCommandQuery((prev) => prev === query ? prev : query);
+      } else {
+        setCommandQuery((prev) => prev === null ? prev : null);
+      }
+    },
+    [commandItems.length]
+  );
+  useEffect2(() => {
+    updateSlashState(resolvedValue);
+  }, [resolvedValue, updateSlashState]);
   const handleChange = (e) => {
     const nextValue = e.target.value;
     if (!isControlled) {
       setInternalValue(nextValue);
     }
     onChange?.(nextValue);
+    updateSlashState(nextValue);
   };
+  const clearInputValue = useCallback(() => {
+    if (!isControlled) {
+      setInternalValue("");
+    }
+    if (onChange) {
+      onChange("");
+    }
+  }, [isControlled, onChange]);
+  const runCommand = useCallback(
+    (item) => {
+      clearInputValue();
+      item.action?.();
+      setCommandQuery(null);
+      setSlashHighlightIndex(0);
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+      });
+    },
+    [clearInputValue]
+  );
   const handleKeyDown = (e) => {
+    if (commandQuery !== null && mode === "input") {
+      if (e.key === "ArrowDown") {
+        if (filteredCommands.length > 0) {
+          e.preventDefault();
+          setSlashHighlightIndex((prev) => {
+            if (filteredCommands.length === 0) {
+              return prev;
+            }
+            const next = prev === -1 ? 0 : (prev + 1) % filteredCommands.length;
+            return next;
+          });
+        }
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        if (filteredCommands.length > 0) {
+          e.preventDefault();
+          setSlashHighlightIndex((prev) => {
+            if (filteredCommands.length === 0) {
+              return prev;
+            }
+            if (prev === -1) {
+              return filteredCommands.length - 1;
+            }
+            return prev <= 0 ? filteredCommands.length - 1 : prev - 1;
+          });
+        }
+        return;
+      }
+      if (e.key === "Enter") {
+        const selected = slashHighlightIndex >= 0 ? filteredCommands[slashHighlightIndex] : void 0;
+        if (selected) {
+          e.preventDefault();
+          runCommand(selected);
+          return;
+        }
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setCommandQuery(null);
+        return;
+      }
+    }
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       send();
@@ -588,7 +780,11 @@ function CopilotChatInput({
     value: resolvedValue,
     onChange: handleChange,
     onKeyDown: handleKeyDown,
-    autoFocus
+    autoFocus,
+    className: twMerge3(
+      "w-full py-3",
+      isExpanded ? "px-5" : "pr-5"
+    )
   });
   const BoundAudioRecorder = renderSlot(audioRecorder, CopilotChatAudioRecorder, {
     ref: audioRecorderRef
@@ -606,45 +802,20 @@ function CopilotChatInput({
   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, {
+  const BoundAddMenuButton = renderSlot(addMenuButton, CopilotChatInput.AddMenuButton, {
     disabled: mode === "transcribe",
+    onAddFile,
     toolsMenu
   });
-  const BoundToolbar = renderSlot(
-    typeof toolbar === "string" || toolbar === void 0 ? twMerge3(toolbar, "w-full h-[60px] bg-transparent flex items-center justify-between") : toolbar,
-    CopilotChatInput.Toolbar,
-    {
-      children: /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsxs3("div", { className: "flex items-center", children: [
-          onAddFile && BoundAddFileButton,
-          BoundToolsButton,
-          additionalToolbarItems
-        ] }),
-        /* @__PURE__ */ jsx6("div", { className: "flex items-center", children: mode === "transcribe" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-          onCancelTranscribe && BoundCancelTranscribeButton,
-          onFinishTranscribe && BoundFinishTranscribeButton
-        ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-          onStartTranscribe && BoundStartTranscribeButton,
-          BoundSendButton
-        ] }) })
-      ] })
-    }
-  );
   if (children) {
-    return /* @__PURE__ */ jsx6(Fragment, { children: children({
+    const childProps = {
       textArea: BoundTextArea,
       audioRecorder: BoundAudioRecorder,
       sendButton: BoundSendButton,
       startTranscribeButton: BoundStartTranscribeButton,
       cancelTranscribeButton: BoundCancelTranscribeButton,
       finishTranscribeButton: BoundFinishTranscribeButton,
-      addFileButton: BoundAddFileButton,
-      toolsButton: BoundToolsButton,
-      toolbar: BoundToolbar,
+      addMenuButton: BoundAddMenuButton,
       onSubmitMessage,
       onStartTranscribe,
       onCancelTranscribe,
@@ -652,9 +823,9 @@ function CopilotChatInput({
       onAddFile,
       mode,
       toolsMenu,
-      autoFocus,
-      additionalToolbarItems
-    }) });
+      autoFocus
+    };
+    return /* @__PURE__ */ jsx6(Fragment, { children: children(childProps) });
   }
   const handleContainerClick = (e) => {
     const target = e.target;
@@ -662,7 +833,227 @@ function CopilotChatInput({
       inputRef.current.focus();
     }
   };
-  return /* @__PURE__ */ jsxs3(
+  const ensureMeasurements = useCallback(() => {
+    const textarea = inputRef.current;
+    if (!textarea) {
+      return;
+    }
+    const previousValue = textarea.value;
+    const previousHeight = textarea.style.height;
+    textarea.style.height = "auto";
+    const computedStyle = window.getComputedStyle(textarea);
+    const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
+    const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
+    const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
+    const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
+    textarea.value = "";
+    const singleLineHeight = textarea.scrollHeight;
+    textarea.value = previousValue;
+    const contentHeight = singleLineHeight - paddingTop - paddingBottom;
+    const maxHeight = contentHeight * 5 + paddingTop + paddingBottom;
+    measurementsRef.current = {
+      singleLineHeight,
+      maxHeight,
+      paddingLeft,
+      paddingRight
+    };
+    textarea.style.height = previousHeight;
+    textarea.style.maxHeight = `${maxHeight}px`;
+  }, []);
+  const adjustTextareaHeight = useCallback(() => {
+    const textarea = inputRef.current;
+    if (!textarea) {
+      return 0;
+    }
+    if (measurementsRef.current.singleLineHeight === 0) {
+      ensureMeasurements();
+    }
+    const { maxHeight } = measurementsRef.current;
+    if (maxHeight) {
+      textarea.style.maxHeight = `${maxHeight}px`;
+    }
+    textarea.style.height = "auto";
+    const scrollHeight = textarea.scrollHeight;
+    if (maxHeight) {
+      textarea.style.height = `${Math.min(scrollHeight, maxHeight)}px`;
+    } else {
+      textarea.style.height = `${scrollHeight}px`;
+    }
+    return scrollHeight;
+  }, [ensureMeasurements]);
+  const updateLayout = useCallback((nextLayout) => {
+    setLayout((prev) => {
+      if (prev === nextLayout) {
+        return prev;
+      }
+      ignoreResizeRef.current = true;
+      return nextLayout;
+    });
+  }, []);
+  const evaluateLayout = useCallback(() => {
+    if (mode !== "input") {
+      updateLayout("compact");
+      return;
+    }
+    if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+      const isMobileViewport = window.matchMedia("(max-width: 767px)").matches;
+      if (isMobileViewport) {
+        ensureMeasurements();
+        adjustTextareaHeight();
+        updateLayout("expanded");
+        return;
+      }
+    }
+    const textarea = inputRef.current;
+    const grid = gridRef.current;
+    const addContainer = addButtonContainerRef.current;
+    const actionsContainer = actionsContainerRef.current;
+    if (!textarea || !grid || !addContainer || !actionsContainer) {
+      return;
+    }
+    if (measurementsRef.current.singleLineHeight === 0) {
+      ensureMeasurements();
+    }
+    const scrollHeight = adjustTextareaHeight();
+    const baseline = measurementsRef.current.singleLineHeight;
+    const hasExplicitBreak = resolvedValue.includes("\n");
+    const renderedMultiline = baseline > 0 ? scrollHeight > baseline + 1 : false;
+    let shouldExpand = hasExplicitBreak || renderedMultiline;
+    if (!shouldExpand) {
+      const gridStyles = window.getComputedStyle(grid);
+      const paddingLeft = parseFloat(gridStyles.paddingLeft) || 0;
+      const paddingRight = parseFloat(gridStyles.paddingRight) || 0;
+      const columnGap = parseFloat(gridStyles.columnGap) || 0;
+      const gridAvailableWidth = grid.clientWidth - paddingLeft - paddingRight;
+      if (gridAvailableWidth > 0) {
+        const addWidth = addContainer.getBoundingClientRect().width;
+        const actionsWidth = actionsContainer.getBoundingClientRect().width;
+        const compactWidth = Math.max(gridAvailableWidth - addWidth - actionsWidth - columnGap * 2, 0);
+        const canvas = measurementCanvasRef.current ?? document.createElement("canvas");
+        if (!measurementCanvasRef.current) {
+          measurementCanvasRef.current = canvas;
+        }
+        const context = canvas.getContext("2d");
+        if (context) {
+          const textareaStyles = window.getComputedStyle(textarea);
+          const font = textareaStyles.font || `${textareaStyles.fontStyle} ${textareaStyles.fontVariant} ${textareaStyles.fontWeight} ${textareaStyles.fontSize}/${textareaStyles.lineHeight} ${textareaStyles.fontFamily}`;
+          context.font = font;
+          const compactInnerWidth = Math.max(
+            compactWidth - (measurementsRef.current.paddingLeft || 0) - (measurementsRef.current.paddingRight || 0),
+            0
+          );
+          if (compactInnerWidth > 0) {
+            const lines = resolvedValue.length > 0 ? resolvedValue.split("\n") : [""];
+            let longestWidth = 0;
+            for (const line of lines) {
+              const metrics = context.measureText(line || " ");
+              if (metrics.width > longestWidth) {
+                longestWidth = metrics.width;
+              }
+            }
+            if (longestWidth > compactInnerWidth) {
+              shouldExpand = true;
+            }
+          }
+        }
+      }
+    }
+    const nextLayout = shouldExpand ? "expanded" : "compact";
+    updateLayout(nextLayout);
+  }, [adjustTextareaHeight, ensureMeasurements, mode, resolvedValue, updateLayout]);
+  useLayoutEffect(() => {
+    evaluateLayout();
+  }, [evaluateLayout]);
+  useEffect2(() => {
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const textarea = inputRef.current;
+    const grid = gridRef.current;
+    const addContainer = addButtonContainerRef.current;
+    const actionsContainer = actionsContainerRef.current;
+    if (!textarea || !grid || !addContainer || !actionsContainer) {
+      return;
+    }
+    const scheduleEvaluation = () => {
+      if (ignoreResizeRef.current) {
+        ignoreResizeRef.current = false;
+        return;
+      }
+      if (typeof window === "undefined") {
+        evaluateLayout();
+        return;
+      }
+      if (resizeEvaluationRafRef.current !== null) {
+        cancelAnimationFrame(resizeEvaluationRafRef.current);
+      }
+      resizeEvaluationRafRef.current = window.requestAnimationFrame(() => {
+        resizeEvaluationRafRef.current = null;
+        evaluateLayout();
+      });
+    };
+    const observer = new ResizeObserver(() => {
+      scheduleEvaluation();
+    });
+    observer.observe(grid);
+    observer.observe(addContainer);
+    observer.observe(actionsContainer);
+    observer.observe(textarea);
+    return () => {
+      observer.disconnect();
+      if (typeof window !== "undefined" && resizeEvaluationRafRef.current !== null) {
+        cancelAnimationFrame(resizeEvaluationRafRef.current);
+        resizeEvaluationRafRef.current = null;
+      }
+    };
+  }, [evaluateLayout]);
+  const slashMenuVisible = commandQuery !== null && commandItems.length > 0;
+  useEffect2(() => {
+    if (!slashMenuVisible || slashHighlightIndex < 0) {
+      return;
+    }
+    const active = slashMenuRef.current?.querySelector(
+      `[data-slash-index="${slashHighlightIndex}"]`
+    );
+    active?.scrollIntoView({ block: "nearest" });
+  }, [slashMenuVisible, slashHighlightIndex]);
+  const slashMenu = slashMenuVisible ? /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-testid": "copilot-slash-menu",
+      role: "listbox",
+      "aria-label": "Slash commands",
+      ref: slashMenuRef,
+      className: "absolute bottom-full left-0 right-0 z-30 mb-2 max-h-64 overflow-y-auto rounded-lg border border-border bg-white shadow-lg dark:border-[#3a3a3a] dark:bg-[#1f1f1f]",
+      style: { maxHeight: `${SLASH_MENU_MAX_VISIBLE_ITEMS * SLASH_MENU_ITEM_HEIGHT_PX}px` },
+      children: filteredCommands.length === 0 ? /* @__PURE__ */ jsx6("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "No commands found" }) : filteredCommands.map((item, index) => {
+        const isActive = index === slashHighlightIndex;
+        return /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": isActive,
+            "data-active": isActive ? "true" : void 0,
+            "data-slash-index": index,
+            className: twMerge3(
+              "w-full px-3 py-2 text-left text-sm transition-colors",
+              "hover:bg-muted dark:hover:bg-[#2f2f2f]",
+              isActive ? "bg-muted dark:bg-[#2f2f2f]" : "bg-transparent"
+            ),
+            onMouseEnter: () => setSlashHighlightIndex(index),
+            onMouseDown: (event) => {
+              event.preventDefault();
+              runCommand(item);
+            },
+            children: item.label
+          },
+          `${item.label}-${index}`
+        );
+      })
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       className: twMerge3(
@@ -680,10 +1071,62 @@ function CopilotChatInput({
       ),
       onClick: handleContainerClick,
       ...props,
-      children: [
-        mode === "transcribe" ? BoundAudioRecorder : BoundTextArea,
-        BoundToolbar
-      ]
+      "data-layout": isExpanded ? "expanded" : "compact",
+      children: /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          ref: gridRef,
+          className: twMerge3(
+            "grid w-full gap-x-3 gap-y-3 px-3 py-2",
+            isExpanded ? "grid-cols-[auto_minmax(0,1fr)_auto] grid-rows-[auto_auto]" : "grid-cols-[auto_minmax(0,1fr)_auto] items-center"
+          ),
+          "data-layout": isExpanded ? "expanded" : "compact",
+          children: [
+            /* @__PURE__ */ jsx6(
+              "div",
+              {
+                ref: addButtonContainerRef,
+                className: twMerge3(
+                  "flex items-center",
+                  isExpanded ? "row-start-2" : "row-start-1",
+                  "col-start-1"
+                ),
+                children: BoundAddMenuButton
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "div",
+              {
+                className: twMerge3(
+                  "relative flex min-w-0 flex-col",
+                  isExpanded ? "col-span-3 row-start-1" : "col-start-2 row-start-1"
+                ),
+                children: mode === "transcribe" ? BoundAudioRecorder : /* @__PURE__ */ jsxs3(Fragment, { children: [
+                  BoundTextArea,
+                  slashMenu
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "div",
+              {
+                ref: actionsContainerRef,
+                className: twMerge3(
+                  "flex items-center justify-end gap-2",
+                  isExpanded ? "col-start-3 row-start-2" : "col-start-3 row-start-1"
+                ),
+                children: mode === "transcribe" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+                  onCancelTranscribe && BoundCancelTranscribeButton,
+                  onFinishTranscribe && BoundFinishTranscribeButton
+                ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+                  onStartTranscribe && BoundStartTranscribeButton,
+                  BoundSendButton
+                ] })
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }
@@ -744,124 +1187,110 @@ function CopilotChatInput({
       ...props
     }
   );
-  CopilotChatInput2.AddFileButton = (props) => /* @__PURE__ */ jsx6(
-    CopilotChatInput2.ToolbarButton,
-    {
-      icon: /* @__PURE__ */ jsx6(Plus, { className: "size-[20px]" }),
-      labelKey: "chatInputToolbarAddButtonLabel",
-      defaultClassName: "ml-2",
-      ...props
-    }
-  );
-  CopilotChatInput2.ToolsButton = ({ className, toolsMenu, ...props }) => {
+  CopilotChatInput2.AddMenuButton = ({ className, toolsMenu, onAddFile, disabled, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    const renderMenuItems = (items) => {
-      return items.map((item, index) => {
+    const menuItems = useMemo2(() => {
+      const items = [];
+      if (onAddFile) {
+        items.push({
+          label: labels.chatInputToolbarAddButtonLabel,
+          action: onAddFile
+        });
+      }
+      if (toolsMenu && toolsMenu.length > 0) {
+        if (items.length > 0) {
+          items.push("-");
+        }
+        for (const item of toolsMenu) {
+          if (item === "-") {
+            if (items.length === 0 || items[items.length - 1] === "-") {
+              continue;
+            }
+            items.push(item);
+          } else {
+            items.push(item);
+          }
+        }
+        while (items.length > 0 && items[items.length - 1] === "-") {
+          items.pop();
+        }
+      }
+      return items;
+    }, [onAddFile, toolsMenu, labels.chatInputToolbarAddButtonLabel]);
+    const renderMenuItems = useCallback(
+      (items) => items.map((item, index) => {
         if (item === "-") {
-          return /* @__PURE__ */ jsx6(DropdownMenuSeparator, {}, index);
-        } else if (item.items && item.items.length > 0) {
+          return /* @__PURE__ */ jsx6(DropdownMenuSeparator, {}, `separator-${index}`);
+        }
+        if (item.items && item.items.length > 0) {
           return /* @__PURE__ */ jsxs3(DropdownMenuSub, { children: [
             /* @__PURE__ */ jsx6(DropdownMenuSubTrigger, { children: item.label }),
             /* @__PURE__ */ jsx6(DropdownMenuSubContent, { children: renderMenuItems(item.items) })
-          ] }, index);
-        } else {
-          return /* @__PURE__ */ jsx6(DropdownMenuItem, { onClick: item.action, children: item.label }, index);
+          ] }, `group-${index}`);
         }
-      });
-    };
-    if (!toolsMenu || toolsMenu.length === 0) {
-      return null;
-    }
+        return /* @__PURE__ */ jsx6(DropdownMenuItem, { onClick: item.action, children: item.label }, `item-${index}`);
+      }),
+      []
+    );
+    const hasMenuItems = menuItems.length > 0;
+    const isDisabled = disabled || !hasMenuItems;
     return /* @__PURE__ */ jsxs3(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx6(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
-        Button,
-        {
-          type: "button",
-          variant: "chatInputToolbarSecondary",
-          size: "chatInputToolbarIconLabel",
-          className,
-          ...props,
-          children: [
-            /* @__PURE__ */ jsx6(Settings2, { className: "size-[18px]" }),
-            /* @__PURE__ */ jsx6("span", { className: "text-sm font-normal", children: labels.chatInputToolbarToolsButtonLabel })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx6(DropdownMenuContent, { side: "top", align: "end", children: renderMenuItems(toolsMenu) })
+      /* @__PURE__ */ jsxs3(Tooltip, { children: [
+        /* @__PURE__ */ jsx6(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx6(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx6(
+          Button,
+          {
+            type: "button",
+            variant: "chatInputToolbarSecondary",
+            size: "chatInputToolbarIcon",
+            className: twMerge3("ml-1", className),
+            disabled: isDisabled,
+            ...props,
+            children: /* @__PURE__ */ jsx6(Plus, { className: "size-[20px]" })
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx6(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsxs3("p", { className: "flex items-center gap-1 text-xs font-medium", children: [
+          /* @__PURE__ */ jsx6("span", { children: "Add files and more" }),
+          /* @__PURE__ */ jsx6("code", { className: "rounded bg-[#4a4a4a] px-1 py-[1px] font-mono text-[11px] text-white dark:bg-[#e0e0e0] dark:text-black", children: "/" })
+        ] }) })
+      ] }),
+      hasMenuItems && /* @__PURE__ */ jsx6(DropdownMenuContent, { side: "top", align: "start", children: renderMenuItems(menuItems) })
     ] });
   };
-  CopilotChatInput2.Toolbar = ({ className, ...props }) => /* @__PURE__ */ jsx6("div", { className: twMerge3("w-full h-[60px] bg-transparent flex items-center", className), ...props });
-  CopilotChatInput2.TextArea = forwardRef2(function TextArea2({ maxRows = 5, style, className, ...props }, ref) {
+  CopilotChatInput2.TextArea = forwardRef2(function TextArea2({ style, className, autoFocus, ...props }, ref) {
     const internalTextareaRef = useRef2(null);
-    const [maxHeight, setMaxHeight] = useState2(0);
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
     useImperativeHandle2(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`;
-      }
-    };
     useEffect2(() => {
-      const calculateMaxHeight = () => {
-        const textarea = internalTextareaRef.current;
-        if (textarea) {
-          const currentValue = textarea.value;
-          textarea.value = "";
-          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();
-          }
-        }
+      const textarea = internalTextareaRef.current;
+      if (!textarea) return;
+      const handleFocus = () => {
+        setTimeout(() => {
+          textarea.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        }, 300);
       };
-      calculateMaxHeight();
-    }, [maxRows, props.autoFocus]);
+      textarea.addEventListener("focus", handleFocus);
+      return () => textarea.removeEventListener("focus", handleFocus);
+    }, []);
     useEffect2(() => {
-      adjustHeight();
-    }, [props.value, maxHeight]);
-    const handleInput = (e) => {
-      adjustHeight();
-      if (props.onChange) {
-        props.onChange(e);
+      if (autoFocus) {
+        internalTextareaRef.current?.focus();
       }
-    };
+    }, [autoFocus]);
     return /* @__PURE__ */ jsx6(
       "textarea",
       {
         ref: internalTextareaRef,
         ...props,
-        onChange: handleInput,
         style: {
           overflow: "auto",
           resize: "none",
-          maxHeight: `${maxHeight}px`,
           ...style
         },
         placeholder: labels.chatInputPlaceholder,
         className: twMerge3(
-          // 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]",
+          "bg-transparent outline-none antialiased font-regular leading-relaxed text-[16px] placeholder:text-[#00000077] dark:placeholder:text-[#fffc]",
           className
         ),
         rows: 1
@@ -876,17 +1305,10 @@ CopilotChatInput.ToolbarButton.displayName = "CopilotChatInput.ToolbarButton";
 CopilotChatInput.StartTranscribeButton.displayName = "CopilotChatInput.StartTranscribeButton";
 CopilotChatInput.CancelTranscribeButton.displayName = "CopilotChatInput.CancelTranscribeButton";
 CopilotChatInput.FinishTranscribeButton.displayName = "CopilotChatInput.FinishTranscribeButton";
-CopilotChatInput.AddFileButton.displayName = "CopilotChatInput.AddButton";
-CopilotChatInput.ToolsButton.displayName = "CopilotChatInput.ToolsButton";
-CopilotChatInput.Toolbar.displayName = "CopilotChatInput.Toolbar";
+CopilotChatInput.AddMenuButton.displayName = "CopilotChatInput.AddMenuButton";
 var CopilotChatInput_default = CopilotChatInput;
 
 // src/components/chat/CopilotChatAssistantMessage.tsx
-import { MarkdownHooks } from "react-markdown";
-import remarkGfm from "remark-gfm";
-import remarkMath from "remark-math";
-import rehypePrettyCode from "rehype-pretty-code";
-import rehypeKatex from "rehype-katex";
 import { useState as useState7 } from "react";
 import {
   Copy,
@@ -898,17 +1320,17 @@ import {
 } from "lucide-react";
 import { twMerge as twMerge4 } from "tailwind-merge";
 import "katex/dist/katex.min.css";
-import { completePartialMarkdown } from "@copilotkitnext/core";
+import { Streamdown } from "streamdown";
 
 // src/hooks/use-render-tool-call.tsx
-import { useCallback, useEffect as useEffect5, useState as useState4, useSyncExternalStore } from "react";
+import { useCallback as useCallback2, useEffect as useEffect5, useState as useState4, useSyncExternalStore } from "react";
 import { ToolCallStatus } from "@copilotkitnext/core";
 
 // src/providers/CopilotKitProvider.tsx
 import {
   createContext as createContext2,
   useContext as useContext2,
-  useMemo as useMemo2,
+  useMemo as useMemo3,
   useEffect as useEffect4,
   useReducer,
   useRef as useRef4,
@@ -956,7 +1378,7 @@ var CopilotKitCoreReact = class extends CopilotKitCore {
   }
 };
 
-// src/components/WebInspector.tsx
+// src/components/CopilotKitInspector.tsx
 import * as React4 from "react";
 import { createComponent } from "@lit-labs/react";
 import {
@@ -966,12 +1388,12 @@ import {
 } from "@copilotkitnext/web-inspector";
 import { jsx as jsx7 } from "react/jsx-runtime";
 defineWebInspector();
-var WebInspectorBase = createComponent({
+var CopilotKitInspectorBase = createComponent({
   tagName: WEB_INSPECTOR_TAG,
   elementClass: WebInspectorElement,
   react: React4
 });
-var WebInspector = React4.forwardRef(
+var CopilotKitInspector = React4.forwardRef(
   ({ core, ...rest }, ref) => {
     const innerRef = React4.useRef(null);
     React4.useImperativeHandle(ref, () => innerRef.current, []);
@@ -980,10 +1402,16 @@ var WebInspector = React4.forwardRef(
         innerRef.current.core = core ?? null;
       }
     }, [core]);
-    return /* @__PURE__ */ jsx7(WebInspectorBase, { ...rest, ref: innerRef });
+    return /* @__PURE__ */ jsx7(
+      CopilotKitInspectorBase,
+      {
+        ...rest,
+        ref: innerRef
+      }
+    );
   }
 );
-WebInspector.displayName = "WebInspector";
+CopilotKitInspector.displayName = "CopilotKitInspector";
 
 // src/providers/CopilotKitProvider.tsx
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -991,7 +1419,7 @@ var CopilotKitContext = createContext2({
   copilotkit: null
 });
 function useStableArrayProp(prop, warningMessage, isMeaningfulChange) {
-  const empty = useMemo2(() => [], []);
+  const empty = useMemo3(() => [], []);
   const value = prop ?? empty;
   const initial = useRef4(value);
   useEffect4(() => {
@@ -1056,7 +1484,7 @@ var CopilotKitProvider = ({
     humanInTheLoop,
     "humanInTheLoop must be a stable array. If you want to dynamically add or remove human-in-the-loop tools, use `useHumanInTheLoop` instead."
   );
-  const processedHumanInTheLoopTools = useMemo2(() => {
+  const processedHumanInTheLoopTools = useMemo3(() => {
     const processedTools = [];
     const processedRenderToolCalls = [];
     humanInTheLoopList.forEach((tool) => {
@@ -1085,13 +1513,13 @@ var CopilotKitProvider = ({
     });
     return { tools: processedTools, renderToolCalls: processedRenderToolCalls };
   }, [humanInTheLoopList]);
-  const allTools = useMemo2(() => {
+  const allTools = useMemo3(() => {
     const tools = [];
     tools.push(...frontendToolsList);
     tools.push(...processedHumanInTheLoopTools.tools);
     return tools;
   }, [frontendToolsList, processedHumanInTheLoopTools]);
-  const allRenderToolCalls = useMemo2(() => {
+  const allRenderToolCalls = useMemo3(() => {
     const combined = [...renderToolCallsList];
     frontendToolsList.forEach((tool) => {
       if (tool.render) {
@@ -1108,7 +1536,7 @@ var CopilotKitProvider = ({
     combined.push(...processedHumanInTheLoopTools.renderToolCalls);
     return combined;
   }, [renderToolCallsList, frontendToolsList, processedHumanInTheLoopTools]);
-  const copilotkit = useMemo2(() => {
+  const copilotkit = useMemo3(() => {
     const copilotkit2 = new CopilotKitCoreReact({
       runtimeUrl,
       headers,
@@ -1145,7 +1573,7 @@ var CopilotKitProvider = ({
       },
       children: [
         children,
-        shouldRenderInspector ? /* @__PURE__ */ jsx8(WebInspector, { core: copilotkit }) : null
+        shouldRenderInspector ? /* @__PURE__ */ jsx8(CopilotKitInspector, { core: copilotkit }) : null
       ]
     }
   );
@@ -1208,7 +1636,7 @@ function useRenderToolCall() {
     });
     return () => unsubscribe();
   }, [copilotkit]);
-  const renderToolCall = useCallback(
+  const renderToolCall = useCallback2(
     ({
       toolCall,
       toolMessage
@@ -1357,7 +1785,7 @@ function useFrontendTool(tool) {
 }
 
 // src/hooks/use-human-in-the-loop.tsx
-import { useState as useState5, useCallback as useCallback2, useRef as useRef5, useEffect as useEffect7 } from "react";
+import { useState as useState5, useCallback as useCallback3, useRef as useRef5, useEffect as useEffect7 } from "react";
 import React7 from "react";
 function useHumanInTheLoop(tool) {
   const { copilotkit } = useCopilotKit();
@@ -1367,20 +1795,20 @@ function useHumanInTheLoop(tool) {
   const statusRef = useRef5(status);
   const resolvePromiseRef = useRef5(null);
   statusRef.current = status;
-  const respond = useCallback2(async (result) => {
+  const respond = useCallback3(async (result) => {
     if (resolvePromiseRef.current) {
       resolvePromiseRef.current(result);
       setStatus("complete");
       resolvePromiseRef.current = null;
     }
   }, []);
-  const handler = useCallback2(async () => {
+  const handler = useCallback3(async () => {
     return new Promise((resolve) => {
       setStatus("executing");
       resolvePromiseRef.current = resolve;
     });
   }, []);
-  const RenderComponent = useCallback2(
+  const RenderComponent = useCallback3(
     (props) => {
       const ToolComponent = tool.render;
       const currentStatus = statusRef.current;
@@ -1432,7 +1860,7 @@ function useHumanInTheLoop(tool) {
 }
 
 // src/hooks/use-agent.tsx
-import { useMemo as useMemo3, useEffect as useEffect8, useReducer as useReducer2 } from "react";
+import { useMemo as useMemo4, useEffect as useEffect8, useReducer as useReducer2 } from "react";
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID3 } from "@copilotkitnext/shared";
 var ALL_UPDATES = [
   "OnMessagesChanged" /* OnMessagesChanged */,
@@ -1443,11 +1871,11 @@ function useAgent({ agentId, updates } = {}) {
   agentId ??= DEFAULT_AGENT_ID3;
   const { copilotkit } = useCopilotKit();
   const [, forceUpdate] = useReducer2((x) => x + 1, 0);
-  const updateFlags = useMemo3(
+  const updateFlags = useMemo4(
     () => updates ?? ALL_UPDATES,
     [JSON.stringify(updates)]
   );
-  const agent = useMemo3(() => {
+  const agent = useMemo4(() => {
     return copilotkit.getAgent(agentId);
   }, [
     agentId,
@@ -1507,12 +1935,12 @@ function useAgentContext(context) {
 }
 
 // src/hooks/use-suggestions.tsx
-import { useCallback as useCallback3, useEffect as useEffect10, useMemo as useMemo4, useState as useState6 } from "react";
+import { useCallback as useCallback4, 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();
   const config = useCopilotChatConfiguration();
-  const resolvedAgentId = useMemo4(() => agentId ?? config?.agentId ?? DEFAULT_AGENT_ID4, [agentId, config?.agentId]);
+  const resolvedAgentId = useMemo5(() => agentId ?? config?.agentId ?? DEFAULT_AGENT_ID4, [agentId, config?.agentId]);
   const [suggestions, setSuggestions] = useState6(() => {
     const result = copilotkit.getSuggestions(resolvedAgentId);
     return result.suggestions;
@@ -1556,10 +1984,10 @@ function useSuggestions({ agentId } = {}) {
       unsubscribe();
     };
   }, [copilotkit, resolvedAgentId]);
-  const reloadSuggestions = useCallback3(() => {
+  const reloadSuggestions = useCallback4(() => {
     copilotkit.reloadSuggestions(resolvedAgentId);
   }, [copilotkit, resolvedAgentId]);
-  const clearSuggestions = useCallback3(() => {
+  const clearSuggestions = useCallback4(() => {
     copilotkit.clearSuggestions(resolvedAgentId);
   }, [copilotkit, resolvedAgentId]);
   return {
@@ -1571,20 +1999,20 @@ function useSuggestions({ agentId } = {}) {
 }
 
 // src/hooks/use-configure-suggestions.tsx
-import { useCallback as useCallback4, useEffect as useEffect11, useMemo as useMemo5, useRef as useRef6 } from "react";
+import { useCallback as useCallback5, 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) {
   const { copilotkit } = useCopilotKit();
   const chatConfig = useCopilotChatConfiguration();
   const extraDeps = options?.deps ?? EMPTY_DEPS;
-  const resolvedConsumerAgentId = useMemo5(() => chatConfig?.agentId ?? DEFAULT_AGENT_ID5, [chatConfig?.agentId]);
-  const rawConsumerAgentId = useMemo5(() => config ? config.consumerAgentId : void 0, [config]);
+  const resolvedConsumerAgentId = useMemo6(() => chatConfig?.agentId ?? DEFAULT_AGENT_ID5, [chatConfig?.agentId]);
+  const rawConsumerAgentId = useMemo6(() => config ? config.consumerAgentId : void 0, [config]);
   const normalizationCacheRef = useRef6({
     serialized: null,
     config: null
   });
-  const { normalizedConfig, serializedConfig } = useMemo5(() => {
+  const { normalizedConfig, serializedConfig } = useMemo6(() => {
     if (!config) {
       normalizationCacheRef.current = { serialized: null, config: null };
       return { normalizedConfig: null, serializedConfig: null };
@@ -1617,7 +2045,7 @@ function useConfigureSuggestions(config, options) {
   const latestConfigRef = useRef6(null);
   latestConfigRef.current = normalizedConfig;
   const previousSerializedConfigRef = useRef6(null);
-  const targetAgentId = useMemo5(() => {
+  const targetAgentId = useMemo6(() => {
     if (!normalizedConfig) {
       return resolvedConsumerAgentId;
     }
@@ -1628,7 +2056,7 @@ function useConfigureSuggestions(config, options) {
     return consumer;
   }, [normalizedConfig, resolvedConsumerAgentId]);
   const isGlobalConfig = rawConsumerAgentId === void 0 || rawConsumerAgentId === "*";
-  const requestReload = useCallback4(() => {
+  const requestReload = useCallback5(() => {
     if (!normalizedConfig) {
       return;
     }
@@ -1850,105 +2278,7 @@ function CopilotChatAssistantMessage({
   );
 }
 ((CopilotChatAssistantMessage2) => {
-  const InlineCode = ({
-    children,
-    ...props
-  }) => {
-    return /* @__PURE__ */ jsx12(
-      "code",
-      {
-        className: "px-[4.8px] py-[2.5px] bg-[rgb(236,236,236)] dark:bg-gray-800 rounded text-sm font-mono font-medium! text-foreground!",
-        ...props,
-        children
-      }
-    );
-  };
-  const CodeBlock = ({ children, className, onClick, ...props }) => {
-    const config = useCopilotChatConfiguration();
-    const labels = config?.labels ?? CopilotChatDefaultLabels;
-    const [copied, setCopied] = useState7(false);
-    const getCodeContent = (node) => {
-      if (typeof node === "string") return node;
-      if (Array.isArray(node)) return node.map(getCodeContent).join("");
-      if (node?.props?.children) return getCodeContent(node.props.children);
-      return "";
-    };
-    const codeContent = getCodeContent(children);
-    const language = props["data-language"];
-    const copyToClipboard = async () => {
-      if (!codeContent.trim()) return;
-      try {
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2e3);
-        if (onClick) {
-          onClick();
-        }
-      } catch (err) {
-        console.error("Failed to copy code:", err);
-      }
-    };
-    return /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between px-4 pr-3 py-3 text-xs", children: [
-        language && /* @__PURE__ */ jsx12("span", { className: "font-regular text-muted-foreground dark:text-white", children: language }),
-        /* @__PURE__ */ jsxs5(
-          "button",
-          {
-            className: cn(
-              "px-2 gap-0.5 text-xs flex items-center cursor-pointer text-muted-foreground dark:text-white"
-            ),
-            onClick: copyToClipboard,
-            title: copied ? labels.assistantMessageToolbarCopyCodeCopiedLabel : `${labels.assistantMessageToolbarCopyCodeLabel} code`,
-            children: [
-              copied ? /* @__PURE__ */ jsx12(Check2, { className: "h-[10px]! w-[10px]!" }) : /* @__PURE__ */ jsx12(Copy, { className: "h-[10px]! w-[10px]!" }),
-              /* @__PURE__ */ jsx12("span", { className: "text-[11px]", children: copied ? labels.assistantMessageToolbarCopyCodeCopiedLabel : labels.assistantMessageToolbarCopyCodeLabel })
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx12(
-        "pre",
-        {
-          className: cn(
-            className,
-            "rounded-2xl bg-transparent border-t-0 my-1!"
-          ),
-          ...props,
-          children
-        }
-      )
-    ] });
-  };
-  CopilotChatAssistantMessage2.MarkdownRenderer = ({ content, className }) => /* @__PURE__ */ jsx12("div", { className, children: /* @__PURE__ */ jsx12(
-    MarkdownHooks,
-    {
-      remarkPlugins: [remarkGfm, remarkMath],
-      rehypePlugins: [
-        [
-          rehypePrettyCode,
-          {
-            keepBackground: false,
-            theme: {
-              dark: "one-dark-pro",
-              light: "one-light"
-            },
-            bypassInlineCode: true
-          }
-        ],
-        rehypeKatex
-      ],
-      components: {
-        pre: CodeBlock,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        code: ({ className: className2, children, ...props }) => {
-          if (typeof children === "string") {
-            return /* @__PURE__ */ jsx12(InlineCode, { ...props, children });
-          }
-          return /* @__PURE__ */ jsx12("code", { className: className2, ...props, children });
-        }
-      },
-      children: completePartialMarkdown(content || "")
-    }
-  ) });
+  CopilotChatAssistantMessage2.MarkdownRenderer = ({ content, className, ...props }) => /* @__PURE__ */ jsx12(Streamdown, { className, ...props, children: content ?? "" });
   CopilotChatAssistantMessage2.Toolbar = ({
     className,
     ...props
@@ -2300,7 +2630,7 @@ var CopilotChatUserMessage_default = CopilotChatUserMessage;
 import React9 from "react";
 import { Loader2 } from "lucide-react";
 import { jsx as jsx14, jsxs as jsxs7 } from "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 baseClasses = "group inline-flex h-7 sm:h-8 items-center gap-1 sm:gap-1.5 rounded-full border border-border/60 bg-background px-2.5 sm:px-3 text-[11px] sm: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 = React9.forwardRef(function CopilotChatSuggestionPill2({ className, children, icon, isLoading, type, ...props }, ref) {
   const showIcon = !isLoading && icon;
@@ -2315,7 +2645,7 @@ var CopilotChatSuggestionPill = React9.forwardRef(function CopilotChatSuggestion
       disabled: isLoading || props.disabled,
       ...props,
       children: [
-        isLoading ? /* @__PURE__ */ jsx14("span", { className: "flex h-4 w-4 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx14(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }) }) : showIcon && /* @__PURE__ */ jsx14("span", { className: "flex h-4 w-4 items-center justify-center text-muted-foreground", children: icon }),
+        isLoading ? /* @__PURE__ */ jsx14("span", { className: "flex h-3.5 sm:h-4 w-3.5 sm:w-4 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx14(Loader2, { className: "h-3.5 sm:h-4 w-3.5 sm:w-4 animate-spin", "aria-hidden": "true" }) }) : showIcon && /* @__PURE__ */ jsx14("span", { className: "flex h-3.5 sm:h-4 w-3.5 sm:w-4 items-center justify-center text-muted-foreground", children: icon }),
         /* @__PURE__ */ jsx14("span", { className: labelClasses, children })
       ]
     }
@@ -2333,7 +2663,7 @@ var DefaultContainer = React10.forwardRef(function DefaultContainer2({ className
     {
       ref,
       className: cn(
-        "flex flex-wrap items-center gap-2 px-4 sm:px-0 pointer-events-none",
+        "flex flex-wrap items-center gap-1.5 sm:gap-2 pl-0 pr-4 sm:px-0 pointer-events-none",
         className
       ),
       ...props
@@ -2476,10 +2806,52 @@ CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
 var CopilotChatMessageView_default = CopilotChatMessageView;
 
 // src/components/chat/CopilotChatView.tsx
-import React11, { useRef as useRef7, useState as useState9, useEffect as useEffect12 } from "react";
+import React11, { useRef as useRef7, useState as useState10, useEffect as useEffect13 } 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";
+function useKeyboardHeight() {
+  const [keyboardState, setKeyboardState] = useState9({
+    isKeyboardOpen: false,
+    keyboardHeight: 0,
+    availableHeight: typeof window !== "undefined" ? window.innerHeight : 0,
+    viewportHeight: typeof window !== "undefined" ? window.innerHeight : 0
+  });
+  useEffect12(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const visualViewport = window.visualViewport;
+    if (!visualViewport) {
+      return;
+    }
+    const updateKeyboardState = () => {
+      const layoutHeight = window.innerHeight;
+      const visualHeight = visualViewport.height;
+      const keyboardHeight = Math.max(0, layoutHeight - visualHeight);
+      const isKeyboardOpen = keyboardHeight > 150;
+      setKeyboardState({
+        isKeyboardOpen,
+        keyboardHeight,
+        availableHeight: visualHeight,
+        viewportHeight: layoutHeight
+      });
+    };
+    updateKeyboardState();
+    visualViewport.addEventListener("resize", updateKeyboardState);
+    visualViewport.addEventListener("scroll", updateKeyboardState);
+    return () => {
+      visualViewport.removeEventListener("resize", updateKeyboardState);
+      visualViewport.removeEventListener("scroll", updateKeyboardState);
+    };
+  }, []);
+  return keyboardState;
+}
+
+// src/components/chat/CopilotChatView.tsx
 import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 function CopilotChatView({
   messageView,
@@ -2502,10 +2874,11 @@ function CopilotChatView({
   ...props
 }) {
   const inputContainerRef = useRef7(null);
-  const [inputContainerHeight, setInputContainerHeight] = useState9(0);
-  const [isResizing, setIsResizing] = useState9(false);
+  const [inputContainerHeight, setInputContainerHeight] = useState10(0);
+  const [isResizing, setIsResizing] = useState10(false);
   const resizeTimeoutRef = useRef7(null);
-  useEffect12(() => {
+  const { isKeyboardOpen, keyboardHeight, availableHeight } = useKeyboardHeight();
+  useEffect13(() => {
     const element = inputContainerRef.current;
     if (!element) return;
     const resizeObserver = new ResizeObserver((entries) => {
@@ -2559,15 +2932,16 @@ function CopilotChatView({
     isResizing,
     children: /* @__PURE__ */ jsx17("div", { style: { paddingBottom: `${inputContainerHeight + (hasSuggestions ? 4 : 32)}px` }, children: /* @__PURE__ */ jsxs10("div", { className: "max-w-3xl mx-auto", children: [
       BoundMessageView,
-      hasSuggestions ? /* @__PURE__ */ jsx17("div", { className: "px-4 sm:px-0 mt-4", children: BoundSuggestionView }) : null
+      hasSuggestions ? /* @__PURE__ */ jsx17("div", { className: "pl-0 pr-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,
+    keyboardHeight: isKeyboardOpen ? keyboardHeight : 0,
     children: /* @__PURE__ */ jsxs10(Fragment6, { children: [
-      /* @__PURE__ */ jsx17("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 }),
+      /* @__PURE__ */ jsx17("div", { className: "max-w-3xl mx-auto py-0 px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6 pointer-events-auto", children: BoundInput }),
       BoundDisclaimer
     ] })
   });
@@ -2593,7 +2967,7 @@ function CopilotChatView({
   const ScrollContent = ({ children, scrollToBottomButton, inputContainerHeight, isResizing }) => {
     const { isAtBottom, scrollToBottom } = useStickToBottomContext();
     return /* @__PURE__ */ jsxs10(Fragment6, { children: [
-      /* @__PURE__ */ jsx17(StickToBottom.Content, { className: "overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ jsx17("div", { className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8", children }) }),
+      /* @__PURE__ */ jsx17(StickToBottom.Content, { className: "overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ jsx17("div", { className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6", children }) }),
       !isAtBottom && !isResizing && /* @__PURE__ */ jsx17(
         "div",
         {
@@ -2617,13 +2991,13 @@ function CopilotChatView({
     className,
     ...props
   }) => {
-    const [hasMounted, setHasMounted] = useState9(false);
+    const [hasMounted, setHasMounted] = useState10(false);
     const { scrollRef, contentRef, scrollToBottom } = useStickToBottom();
-    const [showScrollButton, setShowScrollButton] = useState9(false);
-    useEffect12(() => {
+    const [showScrollButton, setShowScrollButton] = useState10(false);
+    useEffect13(() => {
       setHasMounted(true);
     }, []);
-    useEffect12(() => {
+    useEffect13(() => {
       if (autoScroll) return;
       const scrollElement = scrollRef.current;
       if (!scrollElement) return;
@@ -2641,7 +3015,7 @@ function CopilotChatView({
       };
     }, [scrollRef, autoScroll]);
     if (!hasMounted) {
-      return /* @__PURE__ */ jsx17("div", { className: "h-full max-h-full flex flex-col min-h-0 overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ jsx17("div", { className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8", children }) });
+      return /* @__PURE__ */ jsx17("div", { className: "h-full max-h-full flex flex-col min-h-0 overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ jsx17("div", { className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6", children }) });
     }
     if (!autoScroll) {
       return /* @__PURE__ */ jsxs10(
@@ -2654,7 +3028,7 @@ function CopilotChatView({
           ),
           ...props,
           children: [
-            /* @__PURE__ */ jsx17("div", { ref: contentRef, className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8", children }),
+            /* @__PURE__ */ jsx17("div", { ref: contentRef, className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6", children }),
             showScrollButton && !isResizing && /* @__PURE__ */ jsx17(
               "div",
               {
@@ -2723,7 +3097,20 @@ function CopilotChatView({
       ...props
     }
   );
-  CopilotChatView2.InputContainer = React11.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsx17("div", { ref, className: cn("absolute bottom-0 left-0 right-0 z-20 pointer-events-none", className), ...props, children }));
+  CopilotChatView2.InputContainer = React11.forwardRef(({ children, className, keyboardHeight = 0, ...props }, ref) => /* @__PURE__ */ jsx17(
+    "div",
+    {
+      ref,
+      className: cn("absolute bottom-0 left-0 right-0 z-20 pointer-events-none", className),
+      style: {
+        // Adjust position when keyboard is open to keep input visible
+        transform: keyboardHeight > 0 ? `translateY(-${keyboardHeight}px)` : void 0,
+        transition: "transform 0.2s ease-out"
+      },
+      ...props,
+      children
+    }
+  ));
   CopilotChatView2.InputContainer.displayName = "CopilotChatView.InputContainer";
   CopilotChatView2.Disclaimer = ({ className, ...props }) => {
     const config = useCopilotChatConfiguration();
@@ -2742,14 +3129,14 @@ 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 useCallback5, useEffect as useEffect13, useMemo as useMemo6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect14, useMemo as useMemo7 } 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 resolvedAgentId = agentId ?? existingConfig?.agentId ?? DEFAULT_AGENT_ID6;
-  const resolvedThreadId = useMemo6(
+  const resolvedThreadId = useMemo7(
     () => threadId ?? existingConfig?.threadId ?? randomUUID2(),
     [threadId, existingConfig?.threadId]
   );
@@ -2762,7 +3149,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     suggestionView: providedSuggestionView,
     ...restProps
   } = props;
-  useEffect13(() => {
+  useEffect14(() => {
     const connect = async (agent2) => {
       try {
         await copilotkit.connectAgent({ agent: agent2 });
@@ -2780,7 +3167,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     return () => {
     };
   }, [resolvedThreadId, agent, copilotkit, resolvedAgentId]);
-  const onSubmitInput = useCallback5(
+  const onSubmitInput = useCallback6(
     async (value) => {
       agent?.addMessage({
         id: randomUUID2(),
@@ -2797,7 +3184,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     },
     [agent, copilotkit]
   );
-  const handleSelectSuggestion = useCallback5(
+  const handleSelectSuggestion = useCallback6(
     async (suggestion) => {
       if (!agent) {
         return;
@@ -2851,7 +3238,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 })(CopilotChat || (CopilotChat = {}));
 
 // src/components/chat/CopilotChatToggleButton.tsx
-import React12, { useState as useState10 } from "react";
+import React12, { useState as useState11 } from "react";
 import { MessageCircle, X as X2 } from "lucide-react";
 import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var DefaultOpenIcon = ({
@@ -2882,7 +3269,7 @@ var CopilotChatToggleButton = React12.forwardRef(function CopilotChatToggleButto
   const { onClick, type, disabled, ...restProps } = buttonProps;
   const configuration = useCopilotChatConfiguration();
   const labels = configuration?.labels ?? CopilotChatDefaultLabels;
-  const [fallbackOpen, setFallbackOpen] = useState10(false);
+  const [fallbackOpen, setFallbackOpen] = useState11(false);
   const isOpen = configuration?.isModalOpen ?? fallbackOpen;
   const setModalOpen = configuration?.setModalOpen ?? setFallbackOpen;
   const handleClick = (event) => {
@@ -2968,10 +3355,10 @@ CopilotChatToggleButton.displayName = "CopilotChatToggleButton";
 var CopilotChatToggleButton_default = CopilotChatToggleButton;
 
 // src/components/chat/CopilotSidebarView.tsx
-import { useEffect as useEffect14, useRef as useRef8, useState as useState11 } from "react";
+import { useEffect as useEffect15, useRef as useRef8, useState as useState12 } from "react";
 
 // src/components/chat/CopilotModalHeader.tsx
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback7 } from "react";
 import { X as X3 } from "lucide-react";
 import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 function CopilotModalHeader({
@@ -2985,7 +3372,7 @@ function CopilotModalHeader({
   const configuration = useCopilotChatConfiguration();
   const fallbackTitle = configuration?.labels.modalHeaderTitle ?? CopilotChatDefaultLabels.modalHeaderTitle;
   const resolvedTitle = title ?? fallbackTitle;
-  const handleClose = useCallback6(() => {
+  const handleClose = useCallback7(() => {
     configuration?.setModalOpen(false);
   }, [configuration]);
   const BoundTitle = renderSlot(titleContent, CopilotModalHeader.Title, {
@@ -3062,7 +3449,7 @@ function CopilotSidebarView({ header, width, ...props }) {
   const configuration = useCopilotChatConfiguration();
   const isSidebarOpen = configuration?.isModalOpen ?? false;
   const sidebarRef = useRef8(null);
-  const [sidebarWidth, setSidebarWidth] = useState11(width ?? DEFAULT_SIDEBAR_WIDTH);
+  const [sidebarWidth, setSidebarWidth] = useState12(width ?? DEFAULT_SIDEBAR_WIDTH);
   const widthToCss = (w) => {
     return typeof w === "number" ? `${w}px` : w;
   };
@@ -3072,7 +3459,7 @@ function CopilotSidebarView({ header, width, ...props }) {
     }
     return w;
   };
-  useEffect14(() => {
+  useEffect15(() => {
     if (width !== void 0) {
       return;
     }
@@ -3104,10 +3491,13 @@ function CopilotSidebarView({ header, width, ...props }) {
       "style",
       {
         dangerouslySetInnerHTML: {
-          __html: `body {
-            margin-inline-end: ${widthToMargin(sidebarWidth)};
-            transition: margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease;
-          }`
+          __html: `
+            @media (min-width: 768px) {
+              body {
+                margin-inline-end: ${widthToMargin(sidebarWidth)};
+                transition: margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease;
+              }
+            }`
         }
       }
     ),
@@ -3118,12 +3508,22 @@ function CopilotSidebarView({ header, width, ...props }) {
         ref: sidebarRef,
         "data-copilot-sidebar": true,
         className: cn(
-          "fixed right-0 top-0 z-[1200] flex h-dvh max-h-screen",
+          "fixed right-0 top-0 z-[1200] flex",
+          // Height with dvh fallback and safe area support
+          "h-[100vh] h-[100dvh] max-h-screen",
+          // Responsive width: full on mobile, custom on desktop
+          "w-full",
           "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) },
+        style: {
+          // Use CSS custom property for responsive width
+          ["--sidebar-width"]: widthToCss(sidebarWidth),
+          // Safe area insets for iOS
+          paddingTop: "env(safe-area-inset-top)",
+          paddingBottom: "env(safe-area-inset-bottom)"
+        },
         "aria-hidden": !isSidebarOpen,
         "aria-label": "Copilot chat sidebar",
         role: "complementary",
@@ -3137,14 +3537,173 @@ 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";
+var DEFAULT_POPUP_WIDTH = 420;
+var DEFAULT_POPUP_HEIGHT = 560;
+var dimensionToCss = (value, fallback) => {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return `${value}px`;
+  }
+  if (typeof value === "string" && value.trim().length > 0) {
+    return value;
+  }
+  return `${fallback}px`;
+};
+function CopilotPopupView({
+  header,
+  width,
+  height,
+  clickOutsideToClose,
+  className,
+  ...restProps
+}) {
+  const configuration = useCopilotChatConfiguration();
+  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(() => {
+    if (isPopupOpen) {
+      setIsRendered(true);
+      setIsAnimatingOut(false);
+      return;
+    }
+    if (!isRendered) {
+      return;
+    }
+    setIsAnimatingOut(true);
+    const timeout = setTimeout(() => {
+      setIsRendered(false);
+      setIsAnimatingOut(false);
+    }, 200);
+    return () => clearTimeout(timeout);
+  }, [isPopupOpen, isRendered]);
+  useEffect16(() => {
+    if (!isPopupOpen) {
+      return;
+    }
+    if (typeof window === "undefined") {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setModalOpen?.(false);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isPopupOpen, setModalOpen]);
+  useEffect16(() => {
+    if (!isPopupOpen) {
+      return;
+    }
+    const focusTimer = setTimeout(() => {
+      containerRef.current?.focus({ preventScroll: true });
+    }, 200);
+    return () => clearTimeout(focusTimer);
+  }, [isPopupOpen]);
+  useEffect16(() => {
+    if (!isPopupOpen || !clickOutsideToClose) {
+      return;
+    }
+    if (typeof document === "undefined") {
+      return;
+    }
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (!target) {
+        return;
+      }
+      const container = containerRef.current;
+      if (container?.contains(target)) {
+        return;
+      }
+      const toggleButton = document.querySelector("[data-slot='chat-toggle-button']");
+      if (toggleButton && toggleButton.contains(target)) {
+        return;
+      }
+      setModalOpen?.(false);
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [isPopupOpen, clickOutsideToClose, setModalOpen]);
+  const headerElement = useMemo8(() => renderSlot(header, CopilotModalHeader, {}), [header]);
+  const resolvedWidth = dimensionToCss(width, DEFAULT_POPUP_WIDTH);
+  const resolvedHeight = dimensionToCss(height, DEFAULT_POPUP_HEIGHT);
+  const popupStyle = useMemo8(
+    () => ({
+      "--copilot-popup-width": resolvedWidth,
+      "--copilot-popup-height": resolvedHeight,
+      "--copilot-popup-max-width": "calc(100vw - 3rem)",
+      "--copilot-popup-max-height": "calc(100dvh - 7.5rem)",
+      paddingTop: "env(safe-area-inset-top)",
+      paddingBottom: "env(safe-area-inset-bottom)",
+      paddingLeft: "env(safe-area-inset-left)",
+      paddingRight: "env(safe-area-inset-right)"
+    }),
+    [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(
+    "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(
+        "div",
+        {
+          ref: containerRef,
+          tabIndex: -1,
+          role: "dialog",
+          "aria-label": labels.modalHeaderTitle,
+          "data-copilot-popup": true,
+          className: cn(
+            "relative flex h-full w-full flex-col overflow-hidden 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",
+            popupAnimationClass
+          ),
+          style: popupStyle,
+          children: [
+            headerElement,
+            /* @__PURE__ */ jsx22("div", { className: "flex-1 overflow-hidden", "data-popup-chat": true, children: /* @__PURE__ */ jsx22(
+              CopilotChatView_default,
+              {
+                ...restProps,
+                className: cn("h-full min-h-0", className)
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs14(Fragment8, { children: [
+    /* @__PURE__ */ jsx22(CopilotChatToggleButton_default, {}),
+    popupContent
+  ] });
+}
+CopilotPopupView.displayName = "CopilotPopupView";
+
 // src/components/chat/CopilotSidebar.tsx
-import { useMemo as useMemo7 } from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { useMemo as useMemo9 } from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
-  const SidebarViewOverride = useMemo7(() => {
+  const SidebarViewOverride = useMemo9(() => {
     const Component = (viewProps) => {
       const { header: viewHeader, width: viewWidth, ...restProps } = viewProps;
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx23(
         CopilotSidebarView,
         {
           ...restProps,
@@ -3155,7 +3714,7 @@ function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
     };
     return Object.assign(Component, CopilotChatView_default);
   }, [header, width]);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     CopilotChat,
     {
       ...chatProps,
@@ -3166,6 +3725,50 @@ 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";
+function CopilotPopup({
+  header,
+  defaultOpen,
+  width,
+  height,
+  clickOutsideToClose,
+  ...chatProps
+}) {
+  const PopupViewOverride = useMemo10(() => {
+    const Component = (viewProps) => {
+      const {
+        header: viewHeader,
+        width: viewWidth,
+        height: viewHeight,
+        clickOutsideToClose: viewClickOutsideToClose,
+        ...restProps
+      } = viewProps;
+      return /* @__PURE__ */ jsx24(
+        CopilotPopupView,
+        {
+          ...restProps,
+          header: header ?? viewHeader,
+          width: width ?? viewWidth,
+          height: height ?? viewHeight,
+          clickOutsideToClose: clickOutsideToClose ?? viewClickOutsideToClose
+        }
+      );
+    };
+    return Object.assign(Component, CopilotChatView_default);
+  }, [clickOutsideToClose, header, height, width]);
+  return /* @__PURE__ */ jsx24(
+    CopilotChat,
+    {
+      ...chatProps,
+      chatView: PopupViewOverride,
+      isModalDefaultOpen: defaultOpen
+    }
+  );
+}
+CopilotPopup.displayName = "CopilotPopup";
+
 // src/types/defineToolCallRenderer.ts
 import { z as z2 } from "zod";
 function defineToolCallRenderer(def) {
@@ -3179,25 +3782,25 @@ function defineToolCallRenderer(def) {
 }
 
 // src/components/WildcardToolCallRender.tsx
-import { useState as useState12 } from "react";
-import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useState as useState14 } from "react";
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var WildcardToolCallRender = defineToolCallRenderer({
   name: "*",
   render: ({ args, result, name, status }) => {
-    const [isExpanded, setIsExpanded] = useState12(false);
+    const [isExpanded, setIsExpanded] = useState14(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__ */ jsx23("div", { className: "mt-2 pb-2", children: /* @__PURE__ */ jsxs14("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__ */ jsxs14(
+    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(
         "div",
         {
           className: "flex items-center justify-between gap-3 cursor-pointer",
           onClick: () => setIsExpanded(!isExpanded),
           children: [
-            /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2 min-w-0", children: [
-              /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 min-w-0", children: [
+              /* @__PURE__ */ jsx25(
                 "svg",
                 {
                   className: `h-4 w-4 text-zinc-500 dark:text-zinc-400 transition-transform ${isExpanded ? "rotate-90" : ""}`,
@@ -3205,7 +3808,7 @@ var WildcardToolCallRender = defineToolCallRenderer({
                   viewBox: "0 0 24 24",
                   strokeWidth: 2,
                   stroke: "currentColor",
-                  children: /* @__PURE__ */ jsx23(
+                  children: /* @__PURE__ */ jsx25(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -3215,10 +3818,10 @@ var WildcardToolCallRender = defineToolCallRenderer({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx23("span", { className: "inline-block h-2 w-2 rounded-full bg-blue-500" }),
-              /* @__PURE__ */ jsx23("span", { className: "truncate text-sm font-medium text-zinc-900 dark:text-zinc-100", children: name })
+              /* @__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__ */ jsx23(
+            /* @__PURE__ */ jsx25(
               "span",
               {
                 className: `inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${statusStyles}`,
@@ -3228,14 +3831,14 @@ var WildcardToolCallRender = defineToolCallRenderer({
           ]
         }
       ),
-      isExpanded && /* @__PURE__ */ jsxs14("div", { className: "mt-3 grid gap-4", children: [
-        /* @__PURE__ */ jsxs14("div", { children: [
-          /* @__PURE__ */ jsx23("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Arguments" }),
-          /* @__PURE__ */ jsx23("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__ */ 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) })
         ] }),
-        result !== void 0 && /* @__PURE__ */ jsxs14("div", { children: [
-          /* @__PURE__ */ jsx23("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Result" }),
-          /* @__PURE__ */ jsx23("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__ */ 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) })
         ] })
       ] })
     ] }) });
@@ -3258,11 +3861,13 @@ export {
   CopilotChatUserMessage_default as CopilotChatUserMessage,
   CopilotChatView_default as CopilotChatView,
   CopilotKitCoreReact,
+  CopilotKitInspector,
   CopilotKitProvider,
   CopilotModalHeader,
+  CopilotPopup,
+  CopilotPopupView,
   CopilotSidebar,
   CopilotSidebarView,
-  WebInspector,
   WildcardToolCallRender,
   defineToolCallRenderer,
   useAgent,