@copilotkitnext/react 0.0.1

package/dist/index.mjs

@@ -0,0 +1,2291 @@
+// src/components/chat/CopilotChatInput.tsx
+import {
+  useState,
+  useRef as useRef2,
+  useEffect as useEffect2,
+  forwardRef as forwardRef2,
+  useImperativeHandle as useImperativeHandle2
+} from "react";
+import { twMerge as twMerge3 } from "tailwind-merge";
+import { Plus, Settings2, Mic, ArrowUp, X, Check } from "lucide-react";
+
+// src/providers/CopilotChatConfigurationProvider.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var CopilotChatDefaultLabels = {
+  chatInputPlaceholder: "Type a message...",
+  chatInputToolbarStartTranscribeButtonLabel: "Transcribe",
+  chatInputToolbarCancelTranscribeButtonLabel: "Cancel",
+  chatInputToolbarFinishTranscribeButtonLabel: "Finish",
+  chatInputToolbarAddButtonLabel: "Add photos or files",
+  chatInputToolbarToolsButtonLabel: "Tools",
+  assistantMessageToolbarCopyCodeLabel: "Copy",
+  assistantMessageToolbarCopyCodeCopiedLabel: "Copied",
+  assistantMessageToolbarCopyMessageLabel: "Copy",
+  assistantMessageToolbarThumbsUpLabel: "Good response",
+  assistantMessageToolbarThumbsDownLabel: "Bad response",
+  assistantMessageToolbarReadAloudLabel: "Read aloud",
+  assistantMessageToolbarRegenerateLabel: "Regenerate",
+  userMessageToolbarCopyMessageLabel: "Copy",
+  userMessageToolbarEditMessageLabel: "Edit",
+  chatDisclaimerText: "AI can make mistakes. Please verify important information."
+};
+var CopilotChatConfiguration = createContext(null);
+var CopilotChatConfigurationProvider = ({ children, labels = {}, inputValue, onSubmitInput, onChangeInput }) => {
+  const mergedLabels = {
+    ...CopilotChatDefaultLabels,
+    ...labels
+  };
+  const configurationValue = {
+    labels: mergedLabels,
+    inputValue,
+    onSubmitInput,
+    onChangeInput
+  };
+  return /* @__PURE__ */ jsx(CopilotChatConfiguration.Provider, { value: configurationValue, children });
+};
+var useCopilotChatConfiguration = () => {
+  const configuration = useContext(CopilotChatConfiguration);
+  if (!configuration) {
+    throw new Error(
+      "useCopilotChatConfiguration must be used within CopilotChatConfigurationProvider"
+    );
+  }
+  return configuration;
+};
+
+// src/components/ui/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/button.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 cursor-pointer",
+        link: "text-primary underline-offset-4 hover:underline",
+        assistantMessageToolbarButton: [
+          "cursor-pointer",
+          // Background and text
+          "p-0 text-[rgb(93,93,93)] hover:bg-[#E8E8E8]",
+          // Dark mode - lighter gray for better contrast
+          "dark:text-[rgb(243,243,243)] dark:hover:bg-[#303030]",
+          // Shape and sizing
+          "h-8 w-8",
+          // Interactions
+          "transition-colors",
+          // Hover states
+          "hover:text-[rgb(93,93,93)]",
+          "dark:hover:text-[rgb(243,243,243)]"
+        ],
+        chatInputToolbarPrimary: [
+          "cursor-pointer",
+          // Background and text
+          "bg-black text-white",
+          // Dark mode
+          "dark:bg-white dark:text-black dark:focus-visible:outline-white",
+          // Shape and sizing
+          "rounded-full",
+          // Interactions
+          "transition-colors",
+          // Focus states
+          "focus:outline-none",
+          // Hover states
+          "hover:opacity-70 disabled:hover:opacity-100",
+          // Disabled states
+          "disabled:cursor-not-allowed disabled:bg-[#00000014] disabled:text-[rgb(13,13,13)]",
+          "dark:disabled:bg-[#454545] dark:disabled:text-white "
+        ],
+        chatInputToolbarSecondary: [
+          "cursor-pointer",
+          // Background and text
+          "bg-transparent text-[#444444]",
+          // Dark mode
+          "dark:text-white dark:border-[#404040]",
+          // Shape and sizing
+          "rounded-full",
+          // Interactions
+          "transition-colors",
+          // Focus states
+          "focus:outline-none",
+          // Hover states
+          "hover:bg-[#f8f8f8] hover:text-[#333333]",
+          "dark:hover:bg-[#404040] dark:hover:text-[#FFFFFF]",
+          // Disabled states
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "disabled:hover:bg-transparent disabled:hover:text-[#444444]",
+          "dark:disabled:hover:bg-transparent dark:disabled:hover:text-[#CCCCCC]"
+        ]
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        chatInputToolbarIcon: [
+          // Shape and sizing
+          "h-9 w-9 rounded-full"
+        ],
+        chatInputToolbarIconLabel: [
+          // Shape and sizing
+          "h-9 px-3 rounded-full",
+          // Layout
+          "gap-2",
+          // Typography
+          "font-normal"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(TooltipProvider, { children: /* @__PURE__ */ jsx3(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx3(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+
+// src/components/ui/dropdown-menu.tsx
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuSub({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(
+    DropdownMenuPrimitive.SubTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx4(ChevronRightIcon, { className: "ml-auto size-4" })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    DropdownMenuPrimitive.SubContent,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/chat/CopilotChatAudioRecorder.tsx
+import { useRef, useEffect, useImperativeHandle, forwardRef } from "react";
+import { twMerge as twMerge2 } from "tailwind-merge";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var AudioRecorderError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "AudioRecorderError";
+  }
+};
+var CopilotChatAudioRecorder = forwardRef((props, ref) => {
+  const { className, ...divProps } = props;
+  const canvasRef = useRef(null);
+  const getLoudness = (n) => {
+    const elapsed = Date.now() / 1e3;
+    const samples = [];
+    for (let i = 0; i < n; i++) {
+      const position = i / n * 10 + elapsed * 0.5;
+      const wave1 = Math.sin(position * 2) * 0.3;
+      const wave2 = Math.sin(position * 5 + elapsed) * 0.2;
+      const wave3 = Math.sin(position * 0.5 + elapsed * 0.3) * 0.4;
+      const noise = (Math.random() - 0.5) * 0.1;
+      const envelope = Math.sin(elapsed * 0.7) * 0.5 + 0.5;
+      let amplitude = (wave1 + wave2 + wave3 + noise) * envelope;
+      amplitude = Math.max(0, Math.min(1, amplitude * 0.5 + 0.3));
+      samples.push(amplitude);
+    }
+    return samples;
+  };
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    let animationId;
+    const draw = () => {
+      const rect = canvas.getBoundingClientRect();
+      const dpr = window.devicePixelRatio || 1;
+      if (canvas.width !== rect.width * dpr || canvas.height !== rect.height * dpr) {
+        canvas.width = rect.width * dpr;
+        canvas.height = rect.height * dpr;
+        ctx.scale(dpr, dpr);
+        ctx.imageSmoothingEnabled = false;
+      }
+      const barWidth = 2;
+      const minHeight = 2;
+      const maxHeight = 20;
+      const gap = 2;
+      const numSamples = Math.ceil(rect.width / (barWidth + gap));
+      const loudnessData = getLoudness(numSamples);
+      ctx.clearRect(0, 0, rect.width, rect.height);
+      const computedStyle = getComputedStyle(canvas);
+      const currentForeground = computedStyle.color;
+      ctx.fillStyle = currentForeground;
+      const centerY = rect.height / 2;
+      for (let i = 0; i < loudnessData.length; i++) {
+        const sample = loudnessData[i] ?? 0;
+        const barHeight = Math.round(
+          sample * (maxHeight - minHeight) + minHeight
+        );
+        const x = Math.round(i * (barWidth + gap));
+        const y = Math.round(centerY - barHeight / 2);
+        ctx.fillRect(x, y, barWidth, barHeight);
+      }
+      animationId = requestAnimationFrame(draw);
+    };
+    draw();
+    return () => {
+      if (animationId) {
+        cancelAnimationFrame(animationId);
+      }
+    };
+  }, []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      get state() {
+        return "idle";
+      },
+      start: async () => {
+      },
+      stop: () => new Promise((resolve) => {
+        const emptyBlob = new Blob([], { type: "audio/webm" });
+        resolve(emptyBlob);
+      }),
+      dispose: () => {
+      }
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx5("div", { className: twMerge2("h-[44px] w-full px-5", className), ...divProps, children: /* @__PURE__ */ jsx5(
+    "canvas",
+    {
+      ref: canvasRef,
+      className: "w-full h-full",
+      style: { imageRendering: "pixelated" }
+    }
+  ) });
+});
+CopilotChatAudioRecorder.displayName = "WebAudioRecorder";
+
+// src/lib/slots.tsx
+import React2 from "react";
+function renderSlot(slot, DefaultComponent, props) {
+  if (typeof slot === "string") {
+    return React2.createElement(DefaultComponent, {
+      ...props,
+      className: slot
+    });
+  }
+  if (typeof slot === "function") {
+    const Comp = slot;
+    return React2.createElement(Comp, props);
+  }
+  if (slot && typeof slot === "object" && !React2.isValidElement(slot)) {
+    return React2.createElement(DefaultComponent, {
+      ...props,
+      ...slot
+    });
+  }
+  return React2.createElement(DefaultComponent, props);
+}
+
+// src/components/chat/CopilotChatInput.tsx
+import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function CopilotChatInput({
+  mode = "input",
+  onSubmitMessage,
+  onStartTranscribe,
+  onCancelTranscribe,
+  onFinishTranscribe,
+  onAddFile,
+  onChange,
+  value,
+  toolsMenu,
+  autoFocus = true,
+  additionalToolbarItems,
+  textArea,
+  sendButton,
+  startTranscribeButton,
+  cancelTranscribeButton,
+  finishTranscribeButton,
+  addFileButton,
+  toolsButton,
+  toolbar,
+  audioRecorder,
+  children,
+  className,
+  ...props
+}) {
+  const { inputValue, onSubmitInput, onChangeInput } = useCopilotChatConfiguration();
+  value ??= inputValue;
+  onSubmitMessage ??= onSubmitInput;
+  onChange ??= onChangeInput;
+  const inputRef = useRef2(null);
+  const audioRecorderRef = useRef2(null);
+  useEffect2(() => {
+    const recorder = audioRecorderRef.current;
+    if (!recorder) {
+      return;
+    }
+    if (mode === "transcribe") {
+      recorder.start().catch(console.error);
+    } else {
+      if (recorder.state === "recording") {
+        recorder.stop().catch(console.error);
+      }
+    }
+  }, [mode]);
+  const handleChange = (e) => {
+    onChange?.(e.target.value);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      send();
+    }
+  };
+  const send = () => {
+    const trimmed = value?.trim();
+    if (trimmed) {
+      onSubmitMessage?.(trimmed);
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    }
+  };
+  const BoundTextArea = renderSlot(textArea, CopilotChatInput.TextArea, {
+    ref: inputRef,
+    value,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    autoFocus
+  });
+  const BoundAudioRecorder = renderSlot(
+    audioRecorder,
+    CopilotChatAudioRecorder,
+    {
+      ref: audioRecorderRef
+    }
+  );
+  const BoundSendButton = renderSlot(sendButton, CopilotChatInput.SendButton, {
+    onClick: send,
+    disabled: !value?.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 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({
+      textArea: BoundTextArea,
+      audioRecorder: BoundAudioRecorder,
+      sendButton: BoundSendButton,
+      startTranscribeButton: BoundStartTranscribeButton,
+      cancelTranscribeButton: BoundCancelTranscribeButton,
+      finishTranscribeButton: BoundFinishTranscribeButton,
+      addFileButton: BoundAddFileButton,
+      toolsButton: BoundToolsButton,
+      toolbar: BoundToolbar,
+      onSubmitMessage,
+      onStartTranscribe,
+      onCancelTranscribe,
+      onFinishTranscribe,
+      onAddFile,
+      mode,
+      toolsMenu,
+      autoFocus,
+      additionalToolbarItems
+    }) });
+  }
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: twMerge3(
+        // Layout
+        "flex w-full flex-col items-center justify-center",
+        // Interaction
+        "cursor-text",
+        // Overflow and clipping
+        "overflow-visible bg-clip-padding contain-inline-size",
+        // Background
+        "bg-white dark:bg-[#303030]",
+        // Visual effects
+        "shadow-[0_4px_4px_0_#0000000a,0_0_1px_0_#0000009e] rounded-[28px]",
+        className
+      ),
+      ...props,
+      children: [
+        mode === "transcribe" ? BoundAudioRecorder : BoundTextArea,
+        BoundToolbar
+      ]
+    }
+  );
+}
+((CopilotChatInput2) => {
+  CopilotChatInput2.SendButton = ({ className, ...props }) => /* @__PURE__ */ jsx6("div", { className: "mr-[10px]", children: /* @__PURE__ */ jsx6(
+    Button,
+    {
+      type: "button",
+      variant: "chatInputToolbarPrimary",
+      size: "chatInputToolbarIcon",
+      className,
+      ...props,
+      children: /* @__PURE__ */ jsx6(ArrowUp, { className: "size-[18px]" })
+    }
+  ) });
+  CopilotChatInput2.ToolbarButton = ({ icon, labelKey, defaultClassName, className, ...props }) => {
+    const { labels } = useCopilotChatConfiguration();
+    return /* @__PURE__ */ jsxs3(Tooltip, { children: [
+      /* @__PURE__ */ jsx6(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx6(
+        Button,
+        {
+          type: "button",
+          variant: "chatInputToolbarSecondary",
+          size: "chatInputToolbarIcon",
+          className: twMerge3(defaultClassName, className),
+          ...props,
+          children: icon
+        }
+      ) }),
+      /* @__PURE__ */ jsx6(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx6("p", { children: labels[labelKey] }) })
+    ] });
+  };
+  CopilotChatInput2.StartTranscribeButton = (props) => /* @__PURE__ */ jsx6(
+    CopilotChatInput2.ToolbarButton,
+    {
+      icon: /* @__PURE__ */ jsx6(Mic, { className: "size-[18px]" }),
+      labelKey: "chatInputToolbarStartTranscribeButtonLabel",
+      defaultClassName: "mr-2",
+      ...props
+    }
+  );
+  CopilotChatInput2.CancelTranscribeButton = (props) => /* @__PURE__ */ jsx6(
+    CopilotChatInput2.ToolbarButton,
+    {
+      icon: /* @__PURE__ */ jsx6(X, { className: "size-[18px]" }),
+      labelKey: "chatInputToolbarCancelTranscribeButtonLabel",
+      defaultClassName: "mr-2",
+      ...props
+    }
+  );
+  CopilotChatInput2.FinishTranscribeButton = (props) => /* @__PURE__ */ jsx6(
+    CopilotChatInput2.ToolbarButton,
+    {
+      icon: /* @__PURE__ */ jsx6(Check, { className: "size-[18px]" }),
+      labelKey: "chatInputToolbarFinishTranscribeButtonLabel",
+      defaultClassName: "mr-[10px]",
+      ...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 }) => {
+    const { labels } = useCopilotChatConfiguration();
+    const renderMenuItems = (items) => {
+      return items.map((item, index) => {
+        if (item === "-") {
+          return /* @__PURE__ */ jsx6(DropdownMenuSeparator, {}, index);
+        } else 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);
+        }
+      });
+    };
+    if (!toolsMenu || toolsMenu.length === 0) {
+      return null;
+    }
+    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) })
+    ] });
+  };
+  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) {
+      const internalTextareaRef = useRef2(null);
+      const [maxHeight, setMaxHeight] = useState(0);
+      const { labels } = useCopilotChatConfiguration();
+      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();
+            }
+          }
+        };
+        calculateMaxHeight();
+      }, [maxRows, props.autoFocus]);
+      useEffect2(() => {
+        adjustHeight();
+      }, [props.value, maxHeight]);
+      const handleInput = (e) => {
+        adjustHeight();
+        if (props.onChange) {
+          props.onChange(e);
+        }
+      };
+      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]",
+            className
+          ),
+          rows: 1
+        }
+      );
+    }
+  );
+  CopilotChatInput2.AudioRecorder = CopilotChatAudioRecorder;
+})(CopilotChatInput || (CopilotChatInput = {}));
+CopilotChatInput.TextArea.displayName = "CopilotChatInput.TextArea";
+CopilotChatInput.SendButton.displayName = "CopilotChatInput.SendButton";
+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";
+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 useState5 } from "react";
+import {
+  Copy,
+  Check as Check2,
+  ThumbsUp,
+  ThumbsDown,
+  Volume2,
+  RefreshCw
+} from "lucide-react";
+import { twMerge as twMerge4 } from "tailwind-merge";
+import "katex/dist/katex.min.css";
+import { completePartialMarkdown } from "@copilotkitnext/core";
+
+// src/hooks/use-render-tool-call.tsx
+import { useCallback } from "react";
+import { ToolCallStatus } from "@copilotkitnext/core";
+
+// src/providers/CopilotKitProvider.tsx
+import {
+  createContext as createContext2,
+  useContext as useContext2,
+  useMemo,
+  useEffect as useEffect3,
+  useState as useState2,
+  useReducer,
+  useRef as useRef3
+} from "react";
+import {
+  CopilotKitCore
+} from "@copilotkitnext/core";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var CopilotKitContext = createContext2({
+  copilotkit: null,
+  renderToolCalls: [],
+  currentRenderToolCalls: [],
+  setCurrentRenderToolCalls: () => {
+  }
+});
+function useStableArrayProp(prop, warningMessage, isMeaningfulChange) {
+  const empty = useMemo(() => [], []);
+  const value = prop ?? empty;
+  const initial = useRef3(value);
+  useEffect3(() => {
+    if (warningMessage && value !== initial.current && (isMeaningfulChange ? isMeaningfulChange(initial.current, value) : true)) {
+      console.error(warningMessage);
+    }
+  }, [value, warningMessage]);
+  return value;
+}
+var CopilotKitProvider = ({
+  children,
+  runtimeUrl,
+  headers = {},
+  properties = {},
+  agents = {},
+  renderToolCalls,
+  frontendTools,
+  humanInTheLoop
+}) => {
+  const renderToolCallsList = useStableArrayProp(
+    renderToolCalls,
+    "renderToolCalls must be a stable array. If you want to dynamically add or remove tools, use `useFrontendTool` instead.",
+    (initial, next) => {
+      const key = (rc) => `${rc?.agentId ?? ""}:${rc?.name ?? ""}`;
+      const setFrom = (arr) => new Set(arr.map(key));
+      const a = setFrom(initial);
+      const b = setFrom(next);
+      if (a.size !== b.size) return true;
+      for (const k of a) if (!b.has(k)) return true;
+      return false;
+    }
+  );
+  const frontendToolsList = useStableArrayProp(
+    frontendTools,
+    "frontendTools must be a stable array. If you want to dynamically add or remove tools, use `useFrontendTool` instead."
+  );
+  const humanInTheLoopList = useStableArrayProp(
+    humanInTheLoop,
+    "humanInTheLoop must be a stable array. If you want to dynamically add or remove human-in-the-loop tools, use `useHumanInTheLoop` instead."
+  );
+  const initialRenderToolCalls = useMemo(() => renderToolCallsList, []);
+  const [currentRenderToolCalls, setCurrentRenderToolCalls] = useState2([]);
+  const processedHumanInTheLoopTools = useMemo(() => {
+    const processedTools = [];
+    const processedRenderToolCalls = [];
+    humanInTheLoopList.forEach((tool) => {
+      const frontendTool = {
+        name: tool.name,
+        description: tool.description,
+        parameters: tool.parameters,
+        followUp: tool.followUp,
+        ...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.`
+            );
+            resolve(void 0);
+          });
+        }
+      };
+      processedTools.push(frontendTool);
+      if (tool.render) {
+        processedRenderToolCalls.push({
+          name: tool.name,
+          args: tool.parameters,
+          render: tool.render,
+          ...tool.agentId && { agentId: tool.agentId }
+        });
+      }
+    });
+    return { tools: processedTools, renderToolCalls: processedRenderToolCalls };
+  }, [humanInTheLoopList]);
+  const allTools = useMemo(() => {
+    const tools = {};
+    frontendToolsList.forEach((tool) => {
+      tools[tool.name] = tool;
+    });
+    processedHumanInTheLoopTools.tools.forEach((tool) => {
+      tools[tool.name] = tool;
+    });
+    return tools;
+  }, [frontendToolsList, processedHumanInTheLoopTools]);
+  const allRenderToolCalls = useMemo(() => {
+    const combined = [...renderToolCallsList];
+    frontendToolsList.forEach((tool) => {
+      if (tool.render && tool.parameters) {
+        combined.push({
+          name: tool.name,
+          args: tool.parameters,
+          render: tool.render
+        });
+      }
+    });
+    combined.push(...processedHumanInTheLoopTools.renderToolCalls);
+    return combined;
+  }, [renderToolCallsList, frontendToolsList, processedHumanInTheLoopTools]);
+  const copilotkit = useMemo(() => {
+    const config = {
+      // Don't set runtimeUrl during initialization to prevent server-side fetching
+      runtimeUrl: void 0,
+      headers,
+      properties,
+      agents,
+      tools: allTools
+    };
+    const copilotkit2 = new CopilotKitCore(config);
+    return copilotkit2;
+  }, [allTools]);
+  useEffect3(() => {
+    setCurrentRenderToolCalls(
+      (prev) => prev === allRenderToolCalls ? prev : allRenderToolCalls
+    );
+  }, [allRenderToolCalls]);
+  useEffect3(() => {
+    copilotkit.setRuntimeUrl(runtimeUrl);
+    copilotkit.setHeaders(headers);
+    copilotkit.setProperties(properties);
+    copilotkit.setAgents(agents);
+  }, [runtimeUrl, headers, properties, agents]);
+  return /* @__PURE__ */ jsx7(
+    CopilotKitContext.Provider,
+    {
+      value: {
+        copilotkit,
+        renderToolCalls: allRenderToolCalls,
+        currentRenderToolCalls,
+        setCurrentRenderToolCalls
+      },
+      children
+    }
+  );
+};
+var useCopilotKit = () => {
+  const context = useContext2(CopilotKitContext);
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+  if (!context) {
+    throw new Error("useCopilotKit must be used within CopilotKitProvider");
+  }
+  useEffect3(() => {
+    const unsubscribe = context.copilotkit.subscribe({
+      onRuntimeLoaded: () => {
+        forceUpdate();
+      },
+      onRuntimeLoadError: () => {
+        forceUpdate();
+      }
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+  return context;
+};
+
+// src/hooks/use-render-tool-call.tsx
+import { partialJSONParse } from "@copilotkitnext/shared";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function useRenderToolCall() {
+  const { currentRenderToolCalls } = useCopilotKit();
+  const renderToolCall = useCallback(
+    ({
+      toolCall,
+      toolMessage,
+      isLoading
+    }) => {
+      const renderConfig = currentRenderToolCalls.find(
+        (rc) => rc.name === toolCall.function.name
+      ) || currentRenderToolCalls.find((rc) => rc.name === "*");
+      if (!renderConfig) {
+        return null;
+      }
+      const RenderComponent = renderConfig.render;
+      const args = partialJSONParse(toolCall.function.arguments);
+      if (toolMessage) {
+        return /* @__PURE__ */ jsx8(
+          RenderComponent,
+          {
+            args,
+            status: ToolCallStatus.Complete,
+            result: toolMessage.content
+          },
+          toolCall.id
+        );
+      } else if (isLoading) {
+        return /* @__PURE__ */ jsx8(
+          RenderComponent,
+          {
+            args,
+            status: ToolCallStatus.InProgress,
+            result: void 0
+          },
+          toolCall.id
+        );
+      } else {
+        return /* @__PURE__ */ jsx8(
+          RenderComponent,
+          {
+            args,
+            status: ToolCallStatus.Complete,
+            result: ""
+          },
+          toolCall.id
+        );
+      }
+    },
+    [currentRenderToolCalls]
+  );
+  return renderToolCall;
+}
+
+// src/hooks/use-frontend-tool.tsx
+import { useEffect as useEffect4 } from "react";
+function useFrontendTool(tool) {
+  const { renderToolCalls, copilotkit, setCurrentRenderToolCalls } = useCopilotKit();
+  useEffect4(() => {
+    if (tool.name in copilotkit.tools) {
+      console.warn(
+        `Tool '${tool.name}' already exists. It will be overridden.`
+      );
+    }
+    copilotkit.addTool(tool);
+    if (tool.render && tool.name in renderToolCalls) {
+      console.warn(
+        `Render component for tool '${tool.name}' already exists. It will be overridden.`
+      );
+    }
+    if (tool.render && tool.parameters) {
+      setCurrentRenderToolCalls((prev) => [
+        ...prev,
+        {
+          name: tool.name,
+          args: tool.parameters,
+          render: tool.render
+        }
+      ]);
+    }
+    return () => {
+      copilotkit.removeTool(tool.name);
+      setCurrentRenderToolCalls(
+        (prev) => prev.filter((rc) => rc.name !== tool.name)
+      );
+    };
+  }, [tool, copilotkit, renderToolCalls, setCurrentRenderToolCalls]);
+}
+
+// src/hooks/use-human-in-the-loop.tsx
+import { useState as useState3, useCallback as useCallback2, useRef as useRef4 } from "react";
+import React6 from "react";
+function useHumanInTheLoop(tool) {
+  const [status, setStatus] = useState3(
+    "inProgress"
+  );
+  const resolvePromiseRef = useRef4(null);
+  const respond = useCallback2(async (result) => {
+    if (resolvePromiseRef.current) {
+      resolvePromiseRef.current(result);
+      setStatus("complete");
+      resolvePromiseRef.current = null;
+    }
+  }, []);
+  const handler = useCallback2(async () => {
+    return new Promise((resolve) => {
+      setStatus("executing");
+      resolvePromiseRef.current = resolve;
+    });
+  }, []);
+  const RenderComponent = useCallback2(
+    (props) => {
+      const ToolComponent = tool.render;
+      if (status === "inProgress" && props.status === "inProgress") {
+        const enhancedProps = {
+          ...props,
+          name: tool.name,
+          description: tool.description || "",
+          respond: void 0
+        };
+        return React6.createElement(ToolComponent, enhancedProps);
+      } else if (status === "executing" && props.status === "executing") {
+        const enhancedProps = {
+          ...props,
+          name: tool.name,
+          description: tool.description || "",
+          respond
+        };
+        return React6.createElement(ToolComponent, enhancedProps);
+      } else if (status === "complete" && props.status === "complete") {
+        const enhancedProps = {
+          ...props,
+          name: tool.name,
+          description: tool.description || "",
+          respond: void 0
+        };
+        return React6.createElement(ToolComponent, enhancedProps);
+      }
+      return React6.createElement(ToolComponent, props);
+    },
+    [tool.render, tool.name, tool.description, status, respond]
+  );
+  const frontendTool = {
+    ...tool,
+    handler,
+    render: RenderComponent
+  };
+  useFrontendTool(frontendTool);
+}
+
+// src/hooks/use-agent.tsx
+import { useMemo as useMemo2, useEffect as useEffect5, useReducer as useReducer2, useState as useState4 } from "react";
+import { DEFAULT_AGENT_ID } from "@copilotkitnext/shared";
+function useAgent({ agentId } = {}) {
+  agentId ??= DEFAULT_AGENT_ID;
+  const { copilotkit } = useCopilotKit();
+  const [, forceUpdate] = useReducer2((x) => x + 1, 0);
+  const [isRunning, setIsRunning] = useState4(false);
+  const agent = useMemo2(() => {
+    return copilotkit.getAgent(agentId);
+  }, [agentId, copilotkit.agents, copilotkit.didLoadRuntime, copilotkit]);
+  useEffect5(() => {
+    const subscription = agent?.subscribe({
+      onMessagesChanged() {
+        forceUpdate();
+      },
+      onStateChanged() {
+        forceUpdate();
+      },
+      onRunInitialized() {
+        setIsRunning(true);
+      },
+      onRunFinalized() {
+        setIsRunning(false);
+      },
+      onRunFailed() {
+        setIsRunning(false);
+      }
+    });
+    return () => subscription?.unsubscribe();
+  }, [agent]);
+  return {
+    agent,
+    isRunning
+  };
+}
+
+// src/hooks/use-agent-context.tsx
+import { useEffect as useEffect6 } from "react";
+function useAgentContext(context) {
+  const { description, value } = context;
+  const { copilotkit } = useCopilotKit();
+  useEffect6(() => {
+    if (!copilotkit) return;
+    const id = copilotkit.addContext(context);
+    return () => {
+      copilotkit.removeContext(id);
+    };
+  }, [description, value, copilotkit]);
+}
+
+// src/components/chat/CopilotChatToolCallsView.tsx
+import React7 from "react";
+import { Fragment as Fragment2, jsx as jsx9 } from "react/jsx-runtime";
+function CopilotChatToolCallsView({
+  message,
+  messages = [],
+  isLoading = false
+}) {
+  const renderToolCall = useRenderToolCall();
+  if (!message.toolCalls || message.toolCalls.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx9(Fragment2, { children: message.toolCalls.map((toolCall) => {
+    const toolMessage = messages.find(
+      (m) => m.role === "tool" && m.toolCallId === toolCall.id
+    );
+    return /* @__PURE__ */ jsx9(React7.Fragment, { children: renderToolCall({
+      toolCall,
+      toolMessage,
+      isLoading
+    }) }, toolCall.id);
+  }) });
+}
+var CopilotChatToolCallsView_default = CopilotChatToolCallsView;
+
+// src/components/chat/CopilotChatAssistantMessage.tsx
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+function CopilotChatAssistantMessage({
+  message,
+  messages,
+  isLoading,
+  onThumbsUp,
+  onThumbsDown,
+  onReadAloud,
+  onRegenerate,
+  additionalToolbarItems,
+  toolbarVisible = true,
+  markdownRenderer,
+  toolbar,
+  copyButton,
+  thumbsUpButton,
+  thumbsDownButton,
+  readAloudButton,
+  regenerateButton,
+  toolCallsView,
+  children,
+  className,
+  ...props
+}) {
+  const boundMarkdownRenderer = renderSlot(
+    markdownRenderer,
+    CopilotChatAssistantMessage.MarkdownRenderer,
+    {
+      content: message.content || ""
+    }
+  );
+  const boundCopyButton = renderSlot(
+    copyButton,
+    CopilotChatAssistantMessage.CopyButton,
+    {
+      onClick: async () => {
+        if (message.content) {
+          try {
+            await navigator.clipboard.writeText(message.content);
+          } catch (err) {
+            console.error("Failed to copy message:", err);
+          }
+        }
+      }
+    }
+  );
+  const boundThumbsUpButton = renderSlot(
+    thumbsUpButton,
+    CopilotChatAssistantMessage.ThumbsUpButton,
+    {
+      onClick: onThumbsUp
+    }
+  );
+  const boundThumbsDownButton = renderSlot(
+    thumbsDownButton,
+    CopilotChatAssistantMessage.ThumbsDownButton,
+    {
+      onClick: onThumbsDown
+    }
+  );
+  const boundReadAloudButton = renderSlot(
+    readAloudButton,
+    CopilotChatAssistantMessage.ReadAloudButton,
+    {
+      onClick: onReadAloud
+    }
+  );
+  const boundRegenerateButton = renderSlot(
+    regenerateButton,
+    CopilotChatAssistantMessage.RegenerateButton,
+    {
+      onClick: onRegenerate
+    }
+  );
+  const boundToolbar = renderSlot(
+    toolbar,
+    CopilotChatAssistantMessage.Toolbar,
+    {
+      children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1", children: [
+        boundCopyButton,
+        (onThumbsUp || thumbsUpButton) && boundThumbsUpButton,
+        (onThumbsDown || thumbsDownButton) && boundThumbsDownButton,
+        (onReadAloud || readAloudButton) && boundReadAloudButton,
+        (onRegenerate || regenerateButton) && boundRegenerateButton,
+        additionalToolbarItems
+      ] })
+    }
+  );
+  const boundToolCallsView = renderSlot(
+    toolCallsView,
+    CopilotChatToolCallsView_default,
+    {
+      message,
+      messages,
+      isLoading
+    }
+  );
+  if (children) {
+    return /* @__PURE__ */ jsx10(Fragment3, { children: children({
+      markdownRenderer: boundMarkdownRenderer,
+      toolbar: boundToolbar,
+      toolCallsView: boundToolCallsView,
+      copyButton: boundCopyButton,
+      thumbsUpButton: boundThumbsUpButton,
+      thumbsDownButton: boundThumbsDownButton,
+      readAloudButton: boundReadAloudButton,
+      regenerateButton: boundRegenerateButton,
+      message,
+      messages,
+      isLoading,
+      onThumbsUp,
+      onThumbsDown,
+      onReadAloud,
+      onRegenerate,
+      additionalToolbarItems,
+      toolbarVisible
+    }) });
+  }
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: twMerge4(
+        "prose max-w-full break-words dark:prose-invert",
+        className
+      ),
+      ...props,
+      "data-message-id": message.id,
+      children: [
+        boundMarkdownRenderer,
+        boundToolCallsView,
+        toolbarVisible && boundToolbar
+      ]
+    }
+  );
+}
+((CopilotChatAssistantMessage2) => {
+  const InlineCode = ({
+    children,
+    ...props
+  }) => {
+    return /* @__PURE__ */ jsx10(
+      "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 { labels } = useCopilotChatConfiguration();
+    const [copied, setCopied] = useState5(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__ */ jsxs4("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between px-4 pr-3 py-3 text-xs", children: [
+        language && /* @__PURE__ */ jsx10("span", { className: "font-regular text-muted-foreground dark:text-white", children: language }),
+        /* @__PURE__ */ jsxs4(
+          "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__ */ jsx10(Check2, { className: "h-[10px]! w-[10px]!" }) : /* @__PURE__ */ jsx10(Copy, { className: "h-[10px]! w-[10px]!" }),
+              /* @__PURE__ */ jsx10("span", { className: "text-[11px]", children: copied ? labels.assistantMessageToolbarCopyCodeCopiedLabel : labels.assistantMessageToolbarCopyCodeLabel })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx10(
+        "pre",
+        {
+          className: cn(
+            className,
+            "rounded-2xl bg-transparent border-t-0 my-1!"
+          ),
+          ...props,
+          children
+        }
+      )
+    ] });
+  };
+  CopilotChatAssistantMessage2.MarkdownRenderer = ({ content, className }) => /* @__PURE__ */ jsx10("div", { className, children: /* @__PURE__ */ jsx10(
+    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__ */ jsx10(InlineCode, { ...props, children });
+          }
+          return /* @__PURE__ */ jsx10("code", { className: className2, ...props, children });
+        }
+      },
+      children: completePartialMarkdown(content || "")
+    }
+  ) });
+  CopilotChatAssistantMessage2.Toolbar = ({
+    className,
+    ...props
+  }) => /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: twMerge4(
+        "w-full bg-transparent flex items-center -ml-[5px] -mt-[0px]",
+        className
+      ),
+      ...props
+    }
+  );
+  CopilotChatAssistantMessage2.ToolbarButton = ({ title, children, ...props }) => {
+    return /* @__PURE__ */ jsxs4(Tooltip, { children: [
+      /* @__PURE__ */ jsx10(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx10(
+        Button,
+        {
+          type: "button",
+          variant: "assistantMessageToolbarButton",
+          "aria-label": title,
+          ...props,
+          children
+        }
+      ) }),
+      /* @__PURE__ */ jsx10(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx10("p", { children: title }) })
+    ] });
+  };
+  CopilotChatAssistantMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
+    const { labels } = useCopilotChatConfiguration();
+    const [copied, setCopied] = useState5(false);
+    const handleClick = (event) => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+      if (onClick) {
+        onClick(event);
+      }
+    };
+    return /* @__PURE__ */ jsx10(
+      CopilotChatAssistantMessage2.ToolbarButton,
+      {
+        title: title || labels.assistantMessageToolbarCopyMessageLabel,
+        onClick: handleClick,
+        className,
+        ...props,
+        children: copied ? /* @__PURE__ */ jsx10(Check2, { className: "size-[18px]" }) : /* @__PURE__ */ jsx10(Copy, { className: "size-[18px]" })
+      }
+    );
+  };
+  CopilotChatAssistantMessage2.ThumbsUpButton = ({ title, ...props }) => {
+    const { labels } = useCopilotChatConfiguration();
+    return /* @__PURE__ */ jsx10(
+      CopilotChatAssistantMessage2.ToolbarButton,
+      {
+        title: title || labels.assistantMessageToolbarThumbsUpLabel,
+        ...props,
+        children: /* @__PURE__ */ jsx10(ThumbsUp, { className: "size-[18px]" })
+      }
+    );
+  };
+  CopilotChatAssistantMessage2.ThumbsDownButton = ({ title, ...props }) => {
+    const { labels } = useCopilotChatConfiguration();
+    return /* @__PURE__ */ jsx10(
+      CopilotChatAssistantMessage2.ToolbarButton,
+      {
+        title: title || labels.assistantMessageToolbarThumbsDownLabel,
+        ...props,
+        children: /* @__PURE__ */ jsx10(ThumbsDown, { className: "size-[18px]" })
+      }
+    );
+  };
+  CopilotChatAssistantMessage2.ReadAloudButton = ({ title, ...props }) => {
+    const { labels } = useCopilotChatConfiguration();
+    return /* @__PURE__ */ jsx10(
+      CopilotChatAssistantMessage2.ToolbarButton,
+      {
+        title: title || labels.assistantMessageToolbarReadAloudLabel,
+        ...props,
+        children: /* @__PURE__ */ jsx10(Volume2, { className: "size-[20px]" })
+      }
+    );
+  };
+  CopilotChatAssistantMessage2.RegenerateButton = ({ title, ...props }) => {
+    const { labels } = useCopilotChatConfiguration();
+    return /* @__PURE__ */ jsx10(
+      CopilotChatAssistantMessage2.ToolbarButton,
+      {
+        title: title || labels.assistantMessageToolbarRegenerateLabel,
+        ...props,
+        children: /* @__PURE__ */ jsx10(RefreshCw, { className: "size-[18px]" })
+      }
+    );
+  };
+})(CopilotChatAssistantMessage || (CopilotChatAssistantMessage = {}));
+CopilotChatAssistantMessage.MarkdownRenderer.displayName = "CopilotChatAssistantMessage.MarkdownRenderer";
+CopilotChatAssistantMessage.Toolbar.displayName = "CopilotChatAssistantMessage.Toolbar";
+CopilotChatAssistantMessage.CopyButton.displayName = "CopilotChatAssistantMessage.CopyButton";
+CopilotChatAssistantMessage.ThumbsUpButton.displayName = "CopilotChatAssistantMessage.ThumbsUpButton";
+CopilotChatAssistantMessage.ThumbsDownButton.displayName = "CopilotChatAssistantMessage.ThumbsDownButton";
+CopilotChatAssistantMessage.ReadAloudButton.displayName = "CopilotChatAssistantMessage.ReadAloudButton";
+CopilotChatAssistantMessage.RegenerateButton.displayName = "CopilotChatAssistantMessage.RegenerateButton";
+var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
+
+// src/components/chat/CopilotChatUserMessage.tsx
+import { useState as useState6 } from "react";
+import { Copy as Copy2, Check as Check3, Edit, ChevronLeft, ChevronRight } from "lucide-react";
+import { twMerge as twMerge5 } from "tailwind-merge";
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+function CopilotChatUserMessage({
+  message,
+  onEditMessage,
+  branchIndex,
+  numberOfBranches,
+  onSwitchToBranch,
+  additionalToolbarItems,
+  messageRenderer,
+  toolbar,
+  copyButton,
+  editButton,
+  branchNavigation,
+  children,
+  className,
+  ...props
+}) {
+  const BoundMessageRenderer = renderSlot(
+    messageRenderer,
+    CopilotChatUserMessage.MessageRenderer,
+    {
+      content: message.content || ""
+    }
+  );
+  const BoundCopyButton = renderSlot(
+    copyButton,
+    CopilotChatUserMessage.CopyButton,
+    {
+      onClick: async () => {
+        if (message.content) {
+          try {
+            await navigator.clipboard.writeText(message.content);
+          } catch (err) {
+            console.error("Failed to copy message:", err);
+          }
+        }
+      }
+    }
+  );
+  const BoundEditButton = renderSlot(
+    editButton,
+    CopilotChatUserMessage.EditButton,
+    {
+      onClick: () => onEditMessage?.({ message })
+    }
+  );
+  const BoundBranchNavigation = renderSlot(
+    branchNavigation,
+    CopilotChatUserMessage.BranchNavigation,
+    {
+      currentBranch: branchIndex,
+      numberOfBranches,
+      onSwitchToBranch,
+      message
+    }
+  );
+  const showBranchNavigation = numberOfBranches && numberOfBranches > 1 && onSwitchToBranch;
+  const BoundToolbar = renderSlot(toolbar, CopilotChatUserMessage.Toolbar, {
+    children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1 justify-end", children: [
+      additionalToolbarItems,
+      BoundCopyButton,
+      onEditMessage && BoundEditButton,
+      showBranchNavigation && BoundBranchNavigation
+    ] })
+  });
+  if (children) {
+    return /* @__PURE__ */ jsx11(Fragment4, { children: children({
+      messageRenderer: BoundMessageRenderer,
+      toolbar: BoundToolbar,
+      copyButton: BoundCopyButton,
+      editButton: BoundEditButton,
+      branchNavigation: BoundBranchNavigation,
+      message,
+      branchIndex,
+      numberOfBranches,
+      additionalToolbarItems
+    }) });
+  }
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: twMerge5("flex flex-col items-end group pt-10", className),
+      "data-message-id": message.id,
+      ...props,
+      children: [
+        BoundMessageRenderer,
+        BoundToolbar
+      ]
+    }
+  );
+}
+((CopilotChatUserMessage2) => {
+  CopilotChatUserMessage2.Container = ({ children, className, ...props }) => /* @__PURE__ */ jsx11(
+    "div",
+    {
+      className: twMerge5("flex flex-col items-end group", className),
+      ...props,
+      children
+    }
+  );
+  CopilotChatUserMessage2.MessageRenderer = ({ content, className }) => /* @__PURE__ */ jsx11(
+    "div",
+    {
+      className: twMerge5(
+        "prose dark:prose-invert bg-muted relative max-w-[80%] rounded-[18px] px-4 py-1.5 data-[multiline]:py-3 inline-block whitespace-pre-wrap",
+        className
+      ),
+      children: content
+    }
+  );
+  CopilotChatUserMessage2.Toolbar = ({
+    className,
+    ...props
+  }) => /* @__PURE__ */ jsx11(
+    "div",
+    {
+      className: twMerge5(
+        "w-full bg-transparent flex items-center justify-end -mr-[5px] mt-[4px] invisible group-hover:visible",
+        className
+      ),
+      ...props
+    }
+  );
+  CopilotChatUserMessage2.ToolbarButton = ({ title, children, className, ...props }) => {
+    return /* @__PURE__ */ jsxs5(Tooltip, { children: [
+      /* @__PURE__ */ jsx11(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx11(
+        Button,
+        {
+          type: "button",
+          variant: "assistantMessageToolbarButton",
+          "aria-label": title,
+          className: twMerge5(className),
+          ...props,
+          children
+        }
+      ) }),
+      /* @__PURE__ */ jsx11(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx11("p", { children: title }) })
+    ] });
+  };
+  CopilotChatUserMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
+    const { labels } = useCopilotChatConfiguration();
+    const [copied, setCopied] = useState6(false);
+    const handleClick = (event) => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+      if (onClick) {
+        onClick(event);
+      }
+    };
+    return /* @__PURE__ */ jsx11(
+      CopilotChatUserMessage2.ToolbarButton,
+      {
+        title: title || labels.userMessageToolbarCopyMessageLabel,
+        onClick: handleClick,
+        className,
+        ...props,
+        children: copied ? /* @__PURE__ */ jsx11(Check3, { className: "size-[18px]" }) : /* @__PURE__ */ jsx11(Copy2, { className: "size-[18px]" })
+      }
+    );
+  };
+  CopilotChatUserMessage2.EditButton = ({ className, title, ...props }) => {
+    const { labels } = useCopilotChatConfiguration();
+    return /* @__PURE__ */ jsx11(
+      CopilotChatUserMessage2.ToolbarButton,
+      {
+        title: title || labels.userMessageToolbarEditMessageLabel,
+        className,
+        ...props,
+        children: /* @__PURE__ */ jsx11(Edit, { className: "size-[18px]" })
+      }
+    );
+  };
+  CopilotChatUserMessage2.BranchNavigation = ({
+    className,
+    currentBranch = 0,
+    numberOfBranches = 1,
+    onSwitchToBranch,
+    message,
+    ...props
+  }) => {
+    if (!numberOfBranches || numberOfBranches <= 1 || !onSwitchToBranch) {
+      return null;
+    }
+    const canGoPrev = currentBranch > 0;
+    const canGoNext = currentBranch < numberOfBranches - 1;
+    return /* @__PURE__ */ jsxs5("div", { className: twMerge5("flex items-center gap-1", className), ...props, children: [
+      /* @__PURE__ */ jsx11(
+        Button,
+        {
+          type: "button",
+          variant: "assistantMessageToolbarButton",
+          onClick: () => onSwitchToBranch?.({
+            branchIndex: currentBranch - 1,
+            numberOfBranches,
+            message
+          }),
+          disabled: !canGoPrev,
+          className: "h-6 w-6 p-0",
+          children: /* @__PURE__ */ jsx11(ChevronLeft, { className: "size-[20px]" })
+        }
+      ),
+      /* @__PURE__ */ jsxs5("span", { className: "text-sm text-muted-foreground px-0 font-medium", children: [
+        currentBranch + 1,
+        "/",
+        numberOfBranches
+      ] }),
+      /* @__PURE__ */ jsx11(
+        Button,
+        {
+          type: "button",
+          variant: "assistantMessageToolbarButton",
+          onClick: () => onSwitchToBranch?.({
+            branchIndex: currentBranch + 1,
+            numberOfBranches,
+            message
+          }),
+          disabled: !canGoNext,
+          className: "h-6 w-6 p-0",
+          children: /* @__PURE__ */ jsx11(ChevronRight, { className: "size-[20px]" })
+        }
+      )
+    ] });
+  };
+})(CopilotChatUserMessage || (CopilotChatUserMessage = {}));
+CopilotChatUserMessage.Container.displayName = "CopilotChatUserMessage.Container";
+CopilotChatUserMessage.MessageRenderer.displayName = "CopilotChatUserMessage.MessageRenderer";
+CopilotChatUserMessage.Toolbar.displayName = "CopilotChatUserMessage.Toolbar";
+CopilotChatUserMessage.ToolbarButton.displayName = "CopilotChatUserMessage.ToolbarButton";
+CopilotChatUserMessage.CopyButton.displayName = "CopilotChatUserMessage.CopyButton";
+CopilotChatUserMessage.EditButton.displayName = "CopilotChatUserMessage.EditButton";
+CopilotChatUserMessage.BranchNavigation.displayName = "CopilotChatUserMessage.BranchNavigation";
+var CopilotChatUserMessage_default = CopilotChatUserMessage;
+
+// src/components/chat/CopilotChatMessageView.tsx
+import { twMerge as twMerge6 } from "tailwind-merge";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+function CopilotChatMessageView({
+  messages = [],
+  assistantMessage,
+  userMessage,
+  cursor,
+  isLoading = false,
+  children,
+  className,
+  ...props
+}) {
+  const messageElements = messages.map((message) => {
+    if (message.role === "assistant") {
+      return renderSlot(assistantMessage, CopilotChatAssistantMessage_default, {
+        key: message.id,
+        message,
+        messages,
+        isLoading
+      });
+    } else if (message.role === "user") {
+      return renderSlot(userMessage, CopilotChatUserMessage_default, {
+        key: message.id,
+        message
+      });
+    }
+    return;
+  }).filter(Boolean);
+  if (children) {
+    return children({ messageElements, messages, isLoading });
+  }
+  return /* @__PURE__ */ jsxs6("div", { className: twMerge6("flex flex-col", className), ...props, children: [
+    messageElements,
+    isLoading && renderSlot(cursor, CopilotChatMessageView.Cursor, {})
+  ] });
+}
+CopilotChatMessageView.Cursor = function Cursor({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      className: twMerge6(
+        "w-[11px] h-[11px] rounded-full bg-foreground animate-pulse-cursor ml-1",
+        className
+      ),
+      ...props
+    }
+  );
+};
+var CopilotChatMessageView_default = CopilotChatMessageView;
+
+// src/components/chat/CopilotChatView.tsx
+import React8, { useRef as useRef5, useState as useState7, useEffect as useEffect7 } from "react";
+import { twMerge as twMerge7 } from "tailwind-merge";
+import { StickToBottom, useStickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+import { ChevronDown } from "lucide-react";
+import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+function CopilotChatView({
+  messageView,
+  input,
+  scrollView,
+  scrollToBottomButton,
+  feather,
+  inputContainer,
+  disclaimer,
+  messages = [],
+  autoScroll = true,
+  children,
+  className,
+  ...props
+}) {
+  const inputContainerRef = useRef5(null);
+  const [inputContainerHeight, setInputContainerHeight] = useState7(0);
+  const [isResizing, setIsResizing] = useState7(false);
+  const resizeTimeoutRef = useRef5(null);
+  useEffect7(() => {
+    const element = inputContainerRef.current;
+    if (!element) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newHeight = entry.contentRect.height;
+        setInputContainerHeight((prevHeight) => {
+          if (newHeight !== prevHeight) {
+            setIsResizing(true);
+            if (resizeTimeoutRef.current) {
+              clearTimeout(resizeTimeoutRef.current);
+            }
+            resizeTimeoutRef.current = setTimeout(() => {
+              setIsResizing(false);
+            }, 250);
+            return newHeight;
+          }
+          return prevHeight;
+        });
+      }
+    });
+    resizeObserver.observe(element);
+    setInputContainerHeight(element.offsetHeight);
+    return () => {
+      resizeObserver.disconnect();
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+    };
+  }, []);
+  const BoundMessageView = renderSlot(messageView, CopilotChatMessageView_default, {
+    messages
+  });
+  const BoundInput = renderSlot(input, CopilotChatInput_default, {});
+  const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
+  const BoundScrollView = renderSlot(scrollView, CopilotChatView.ScrollView, {
+    autoScroll,
+    scrollToBottomButton,
+    inputContainerHeight,
+    isResizing,
+    children: /* @__PURE__ */ jsx13("div", { style: { paddingBottom: `${inputContainerHeight + 32}px` }, children: /* @__PURE__ */ jsx13("div", { className: "max-w-3xl mx-auto", children: BoundMessageView }) })
+  });
+  const BoundScrollToBottomButton = renderSlot(
+    scrollToBottomButton,
+    CopilotChatView.ScrollToBottomButton,
+    {}
+  );
+  const BoundDisclaimer = renderSlot(
+    disclaimer,
+    CopilotChatView.Disclaimer,
+    {}
+  );
+  const BoundInputContainer = renderSlot(
+    inputContainer,
+    CopilotChatView.InputContainer,
+    {
+      ref: inputContainerRef,
+      children: /* @__PURE__ */ jsxs7(Fragment5, { children: [
+        /* @__PURE__ */ jsx13("div", { className: "max-w-3xl mx-auto py-0 px-4 sm:px-0", children: BoundInput }),
+        BoundDisclaimer
+      ] })
+    }
+  );
+  if (children) {
+    return children({
+      messageView: BoundMessageView,
+      input: BoundInput,
+      scrollView: BoundScrollView,
+      scrollToBottomButton: BoundScrollToBottomButton,
+      feather: BoundFeather,
+      inputContainer: BoundInputContainer,
+      disclaimer: BoundDisclaimer
+    });
+  }
+  return /* @__PURE__ */ jsxs7("div", { className: twMerge7("relative h-full", className), ...props, children: [
+    BoundScrollView,
+    BoundFeather,
+    BoundInputContainer
+  ] });
+}
+((CopilotChatView2) => {
+  const ScrollContent = ({ children, scrollToBottomButton, inputContainerHeight, isResizing }) => {
+    const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+    return /* @__PURE__ */ jsxs7(Fragment5, { children: [
+      /* @__PURE__ */ jsx13(StickToBottom.Content, { className: "overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ jsx13("div", { className: "px-4 sm:px-0", children }) }),
+      !isAtBottom && !isResizing && /* @__PURE__ */ jsx13(
+        "div",
+        {
+          className: "absolute inset-x-0 flex justify-center z-10",
+          style: {
+            bottom: `${inputContainerHeight + 16}px`
+          },
+          children: renderSlot(
+            scrollToBottomButton,
+            CopilotChatView2.ScrollToBottomButton,
+            {
+              onClick: () => scrollToBottom()
+            }
+          )
+        }
+      )
+    ] });
+  };
+  CopilotChatView2.ScrollView = ({
+    children,
+    autoScroll = true,
+    scrollToBottomButton,
+    inputContainerHeight = 0,
+    isResizing = false,
+    className,
+    ...props
+  }) => {
+    const [hasMounted, setHasMounted] = useState7(false);
+    const { scrollRef, contentRef, scrollToBottom } = useStickToBottom();
+    const [showScrollButton, setShowScrollButton] = useState7(false);
+    useEffect7(() => {
+      setHasMounted(true);
+    }, []);
+    useEffect7(() => {
+      if (autoScroll) return;
+      const scrollElement = scrollRef.current;
+      if (!scrollElement) return;
+      const checkScroll = () => {
+        const atBottom = scrollElement.scrollHeight - scrollElement.scrollTop - scrollElement.clientHeight < 10;
+        setShowScrollButton(!atBottom);
+      };
+      checkScroll();
+      scrollElement.addEventListener("scroll", checkScroll);
+      const resizeObserver = new ResizeObserver(checkScroll);
+      resizeObserver.observe(scrollElement);
+      return () => {
+        scrollElement.removeEventListener("scroll", checkScroll);
+        resizeObserver.disconnect();
+      };
+    }, [scrollRef, autoScroll]);
+    if (!hasMounted) {
+      return /* @__PURE__ */ jsx13("div", { className: "h-full max-h-full flex flex-col min-h-0 overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ jsx13("div", { className: "px-4 sm:px-0", children }) });
+    }
+    if (!autoScroll) {
+      return /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          ref: scrollRef,
+          className: cn("h-full max-h-full flex flex-col min-h-0 overflow-y-scroll overflow-x-hidden relative", className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx13("div", { ref: contentRef, className: "px-4 sm:px-0", children }),
+            showScrollButton && !isResizing && /* @__PURE__ */ jsx13(
+              "div",
+              {
+                className: "absolute inset-x-0 flex justify-center z-10",
+                style: {
+                  bottom: `${inputContainerHeight + 16}px`
+                },
+                children: renderSlot(
+                  scrollToBottomButton,
+                  CopilotChatView2.ScrollToBottomButton,
+                  {
+                    onClick: () => scrollToBottom()
+                  }
+                )
+              }
+            )
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx13(
+      StickToBottom,
+      {
+        className: cn("h-full max-h-full flex flex-col min-h-0 relative", className),
+        resize: "smooth",
+        initial: "smooth",
+        ...props,
+        children: /* @__PURE__ */ jsx13(
+          ScrollContent,
+          {
+            scrollToBottomButton,
+            inputContainerHeight,
+            isResizing,
+            children
+          }
+        )
+      }
+    );
+  };
+  CopilotChatView2.ScrollToBottomButton = ({ className, ...props }) => /* @__PURE__ */ jsx13(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      className: twMerge7(
+        "rounded-full w-10 h-10 p-0",
+        "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",
+        "flex items-center justify-center cursor-pointer",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx13(ChevronDown, { className: "w-4 h-4 text-gray-600 dark:text-white" })
+    }
+  );
+  CopilotChatView2.Feather = ({
+    className,
+    style,
+    ...props
+  }) => /* @__PURE__ */ jsx13(
+    "div",
+    {
+      className: cn(
+        "absolute bottom-0 left-0 right-4 h-24 pointer-events-none z-10 bg-gradient-to-t",
+        "from-white via-white to-transparent",
+        "dark:from-[rgb(33,33,33)] dark:via-[rgb(33,33,33)]",
+        className
+      ),
+      style,
+      ...props
+    }
+  );
+  CopilotChatView2.InputContainer = React8.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsx13(
+    "div",
+    {
+      ref,
+      className: cn("absolute bottom-0 left-0 right-0 z-20", className),
+      ...props,
+      children
+    }
+  ));
+  CopilotChatView2.InputContainer.displayName = "CopilotChatView.InputContainer";
+  CopilotChatView2.Disclaimer = ({
+    className,
+    ...props
+  }) => {
+    const { labels } = useCopilotChatConfiguration();
+    return /* @__PURE__ */ jsx13(
+      "div",
+      {
+        className: cn(
+          "text-center text-xs text-muted-foreground py-3 px-4 max-w-3xl mx-auto",
+          className
+        ),
+        ...props,
+        children: labels.chatDisclaimerText
+      }
+    );
+  };
+})(CopilotChatView || (CopilotChatView = {}));
+var CopilotChatView_default = CopilotChatView;
+
+// src/components/chat/CopilotChat.tsx
+import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID2, randomUUID } from "@copilotkitnext/shared";
+import { useCallback as useCallback3, useState as useState8, useEffect as useEffect8, useMemo as useMemo3 } from "react";
+import { merge } from "ts-deepmerge";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function CopilotChat({
+  agentId = DEFAULT_AGENT_ID2,
+  threadId,
+  ...props
+}) {
+  const { agent } = useAgent({ agentId });
+  const [isLoading, setIsLoading] = useState8(false);
+  threadId = threadId ?? useMemo3(() => randomUUID(), []);
+  const subscriber = {
+    onTextMessageStartEvent: () => setIsLoading(false),
+    onToolCallStartEvent: () => setIsLoading(false)
+  };
+  useEffect8(() => {
+    const connect = async () => {
+      setIsLoading(true);
+      await agent?.runAgent(
+        {
+          forwardedProps: { __copilotkitConnect: true }
+        },
+        subscriber
+      );
+      setIsLoading(false);
+    };
+    if (agent) {
+      agent.threadId = threadId;
+      if ("isCopilotKitAgent" in agent) {
+        connect();
+      } else {
+        setIsLoading(false);
+      }
+    }
+    return () => {
+    };
+  }, [threadId, agent]);
+  const [inputValue, setInputValue] = useState8("");
+  const onSubmitInput = useCallback3(
+    async (value) => {
+      setInputValue("");
+      agent?.addMessage({
+        id: randomUUID(),
+        role: "user",
+        content: value
+      });
+      setIsLoading(true);
+      await agent?.runAgent({}, subscriber);
+      setIsLoading(false);
+    },
+    [agent]
+  );
+  const mergedProps = merge(
+    {
+      messageView: { isLoading }
+    },
+    {
+      ...props,
+      ...typeof props.messageView === "string" ? { messageView: { className: props.messageView } } : props.messageView !== void 0 ? { messageView: props.messageView } : {}
+    }
+  );
+  return /* @__PURE__ */ jsx14(
+    CopilotChatConfigurationProvider,
+    {
+      inputValue,
+      onSubmitInput,
+      onChangeInput: setInputValue,
+      children: /* @__PURE__ */ jsx14(
+        CopilotChatView,
+        {
+          ...{ messages: agent?.messages ?? [], ...mergedProps }
+        }
+      )
+    }
+  );
+}
+export {
+  AudioRecorderError,
+  CopilotChat,
+  CopilotChatAssistantMessage_default as CopilotChatAssistantMessage,
+  CopilotChatAudioRecorder,
+  CopilotChatConfigurationProvider,
+  CopilotChatInput_default as CopilotChatInput,
+  CopilotChatMessageView_default as CopilotChatMessageView,
+  CopilotChatToolCallsView_default as CopilotChatToolCallsView,
+  CopilotChatUserMessage_default as CopilotChatUserMessage,
+  CopilotChatView_default as CopilotChatView,
+  CopilotKitProvider,
+  useAgent,
+  useAgentContext,
+  useCopilotChatConfiguration,
+  useCopilotKit,
+  useFrontendTool,
+  useHumanInTheLoop,
+  useRenderToolCall
+};
+//# sourceMappingURL=index.mjs.map