@copilotkitnext/react 1.51.2 → 1.51.3-next.0

package/dist/index.mjs

@@ -5,17 +5,17 @@ export * from "@ag-ui/client";
 
 // src/components/chat/CopilotChatInput.tsx
 import {
-  useState as useState2,
+  useState as useState3,
   useRef as useRef2,
   useEffect as useEffect2,
   useLayoutEffect,
   forwardRef as forwardRef2,
   useImperativeHandle as useImperativeHandle2,
-  useCallback,
+  useCallback as useCallback2,
   useMemo as useMemo2
 } from "react";
 import { twMerge as twMerge3 } from "tailwind-merge";
-import { Plus, Mic, ArrowUp, X, Check, Square } from "lucide-react";
+import { Plus, Mic, ArrowUp, X, Check, Square, Loader2 } from "lucide-react";
 
 // src/providers/CopilotChatConfigurationProvider.tsx
 import { createContext, useContext, useMemo, useState } from "react";
@@ -40,7 +40,8 @@ var CopilotChatDefaultLabels = {
   chatDisclaimerText: "AI can make mistakes. Please verify important information.",
   chatToggleOpenLabel: "Open chat",
   chatToggleCloseLabel: "Close chat",
-  modalHeaderTitle: "CopilotKit Chat"
+  modalHeaderTitle: "CopilotKit Chat",
+  welcomeMessageText: "How can I help you today?"
 };
 var CopilotChatConfiguration = createContext(null);
 var CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, isModalDefaultOpen }) => {
@@ -381,7 +382,7 @@ function DropdownMenuSubContent({
 }
 
 // src/components/chat/CopilotChatAudioRecorder.tsx
-import { useRef, useEffect, useImperativeHandle, forwardRef } from "react";
+import { useRef, useEffect, useImperativeHandle, forwardRef, useCallback, useState as useState2 } from "react";
 import { twMerge as twMerge2 } from "tailwind-merge";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var AudioRecorderError = class extends Error {
@@ -393,28 +394,126 @@ var AudioRecorderError = class extends Error {
 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;
+  const [recorderState, setRecorderState] = useState2("idle");
+  const mediaRecorderRef = useRef(null);
+  const audioChunksRef = useRef([]);
+  const streamRef = useRef(null);
+  const analyserRef = useRef(null);
+  const audioContextRef = useRef(null);
+  const animationIdRef = useRef(null);
+  const amplitudeHistoryRef = useRef([]);
+  const frameCountRef = useRef(0);
+  const scrollOffsetRef = useRef(0);
+  const smoothedAmplitudeRef = useRef(0);
+  const fadeOpacityRef = useRef(0);
+  const cleanup = useCallback(() => {
+    if (animationIdRef.current) {
+      cancelAnimationFrame(animationIdRef.current);
+      animationIdRef.current = null;
+    }
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+      try {
+        mediaRecorderRef.current.stop();
+      } catch {
+      }
+    }
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => track.stop());
+      streamRef.current = null;
+    }
+    if (audioContextRef.current && audioContextRef.current.state !== "closed") {
+      audioContextRef.current.close().catch(() => {
+      });
+      audioContextRef.current = null;
+    }
+    mediaRecorderRef.current = null;
+    analyserRef.current = null;
+    audioChunksRef.current = [];
+    amplitudeHistoryRef.current = [];
+    frameCountRef.current = 0;
+    scrollOffsetRef.current = 0;
+    smoothedAmplitudeRef.current = 0;
+    fadeOpacityRef.current = 0;
+  }, []);
+  const start = useCallback(async () => {
+    if (recorderState !== "idle") {
+      throw new AudioRecorderError("Recorder is already active");
+    }
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+      const audioContext = new AudioContext();
+      audioContextRef.current = audioContext;
+      const source = audioContext.createMediaStreamSource(stream);
+      const analyser = audioContext.createAnalyser();
+      analyser.fftSize = 2048;
+      source.connect(analyser);
+      analyserRef.current = analyser;
+      const mimeType = MediaRecorder.isTypeSupported("audio/webm;codecs=opus") ? "audio/webm;codecs=opus" : MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : MediaRecorder.isTypeSupported("audio/mp4") ? "audio/mp4" : "";
+      const options = mimeType ? { mimeType } : {};
+      const mediaRecorder = new MediaRecorder(stream, options);
+      mediaRecorderRef.current = mediaRecorder;
+      audioChunksRef.current = [];
+      mediaRecorder.ondataavailable = (event) => {
+        if (event.data.size > 0) {
+          audioChunksRef.current.push(event.data);
+        }
+      };
+      mediaRecorder.start(100);
+      setRecorderState("recording");
+    } catch (error) {
+      cleanup();
+      if (error instanceof Error && error.name === "NotAllowedError") {
+        throw new AudioRecorderError("Microphone permission denied");
+      }
+      if (error instanceof Error && error.name === "NotFoundError") {
+        throw new AudioRecorderError("No microphone found");
+      }
+      throw new AudioRecorderError(
+        error instanceof Error ? error.message : "Failed to start recording"
+      );
+    }
+  }, [recorderState, cleanup]);
+  const stop = useCallback(() => {
+    return new Promise((resolve, reject) => {
+      const mediaRecorder = mediaRecorderRef.current;
+      if (!mediaRecorder || recorderState !== "recording") {
+        reject(new AudioRecorderError("No active recording"));
+        return;
+      }
+      setRecorderState("processing");
+      mediaRecorder.onstop = () => {
+        const mimeType = mediaRecorder.mimeType || "audio/webm";
+        const audioBlob = new Blob(audioChunksRef.current, { type: mimeType });
+        cleanup();
+        setRecorderState("idle");
+        resolve(audioBlob);
+      };
+      mediaRecorder.onerror = () => {
+        cleanup();
+        setRecorderState("idle");
+        reject(new AudioRecorderError("Recording failed"));
+      };
+      mediaRecorder.stop();
+    });
+  }, [recorderState, cleanup]);
+  const calculateAmplitude = (dataArray) => {
+    let sum = 0;
+    for (let i = 0; i < dataArray.length; i++) {
+      const sample = (dataArray[i] ?? 128) / 128 - 1;
+      sum += sample * sample;
+    }
+    return Math.sqrt(sum / dataArray.length);
   };
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
-    let animationId;
+    const barWidth = 2;
+    const barGap = 1;
+    const barSpacing = barWidth + barGap;
+    const scrollSpeed = 1 / 3;
     const draw = () => {
       const rect = canvas.getBoundingClientRect();
       const dpr = window.devicePixelRatio || 1;
@@ -422,64 +521,87 @@ var CopilotChatAudioRecorder = forwardRef((props, ref) => {
         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);
+      const maxBars = Math.floor(rect.width / barSpacing) + 2;
+      if (analyserRef.current && recorderState === "recording") {
+        if (amplitudeHistoryRef.current.length === 0) {
+          amplitudeHistoryRef.current = new Array(maxBars).fill(0);
+        }
+        if (fadeOpacityRef.current < 1) {
+          fadeOpacityRef.current = Math.min(1, fadeOpacityRef.current + 0.03);
+        }
+        scrollOffsetRef.current += scrollSpeed;
+        const bufferLength = analyserRef.current.fftSize;
+        const dataArray = new Uint8Array(bufferLength);
+        analyserRef.current.getByteTimeDomainData(dataArray);
+        const rawAmplitude = calculateAmplitude(dataArray);
+        const attackSpeed = 0.12;
+        const decaySpeed = 0.08;
+        const speed = rawAmplitude > smoothedAmplitudeRef.current ? attackSpeed : decaySpeed;
+        smoothedAmplitudeRef.current += (rawAmplitude - smoothedAmplitudeRef.current) * speed;
+        if (scrollOffsetRef.current >= barSpacing) {
+          scrollOffsetRef.current -= barSpacing;
+          amplitudeHistoryRef.current.push(smoothedAmplitudeRef.current);
+          if (amplitudeHistoryRef.current.length > maxBars) {
+            amplitudeHistoryRef.current = amplitudeHistoryRef.current.slice(-maxBars);
+          }
+        }
+      }
       ctx.clearRect(0, 0, rect.width, rect.height);
       const computedStyle = getComputedStyle(canvas);
-      const currentForeground = computedStyle.color;
-      ctx.fillStyle = currentForeground;
+      ctx.fillStyle = computedStyle.color;
+      ctx.globalAlpha = fadeOpacityRef.current;
       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);
+      const maxAmplitude = rect.height / 2 - 2;
+      const history = amplitudeHistoryRef.current;
+      if (history.length > 0) {
+        const offset = scrollOffsetRef.current;
+        const edgeFadeWidth = 12;
+        for (let i = 0; i < history.length; i++) {
+          const amplitude = history[i] ?? 0;
+          const scaledAmplitude = Math.min(amplitude * 4, 1);
+          const barHeight = Math.max(2, scaledAmplitude * maxAmplitude * 2);
+          const x = rect.width - (history.length - i) * barSpacing - offset;
+          const y = centerY - barHeight / 2;
+          if (x + barWidth > 0 && x < rect.width) {
+            let edgeOpacity = 1;
+            if (x < edgeFadeWidth) {
+              edgeOpacity = Math.max(0, x / edgeFadeWidth);
+            } else if (x > rect.width - edgeFadeWidth) {
+              edgeOpacity = Math.max(0, (rect.width - x) / edgeFadeWidth);
+            }
+            ctx.globalAlpha = fadeOpacityRef.current * edgeOpacity;
+            ctx.fillRect(x, y, barWidth, barHeight);
+          }
+        }
       }
-      animationId = requestAnimationFrame(draw);
+      animationIdRef.current = requestAnimationFrame(draw);
     };
     draw();
     return () => {
-      if (animationId) {
-        cancelAnimationFrame(animationId);
+      if (animationIdRef.current) {
+        cancelAnimationFrame(animationIdRef.current);
       }
     };
-  }, []);
+  }, [recorderState]);
+  useEffect(() => {
+    return cleanup;
+  }, [cleanup]);
   useImperativeHandle(
     ref,
     () => ({
       get state() {
-        return "idle";
-      },
-      start: async () => {
+        return recorderState;
       },
-      stop: () => new Promise((resolve) => {
-        const emptyBlob = new Blob([], { type: "audio/webm" });
-        resolve(emptyBlob);
-      }),
-      dispose: () => {
-      }
+      start,
+      stop,
+      dispose: cleanup
     }),
-    []
+    [recorderState, start, stop, cleanup]
   );
-  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" }
-    }
-  ) });
+  return /* @__PURE__ */ jsx5("div", { className: twMerge2("w-full py-3 px-5", className), ...divProps, children: /* @__PURE__ */ jsx5("canvas", { ref: canvasRef, className: "block w-full h-[26px]" }) });
 });
-CopilotChatAudioRecorder.displayName = "WebAudioRecorder";
+CopilotChatAudioRecorder.displayName = "CopilotChatAudioRecorder";
 
 // src/lib/slots.tsx
 import React2 from "react";
@@ -547,6 +669,7 @@ function CopilotChatInput({
   onStartTranscribe,
   onCancelTranscribe,
   onFinishTranscribe,
+  onFinishTranscribeWithAudio,
   onAddFile,
   onChange,
   value,
@@ -564,19 +687,19 @@ function CopilotChatInput({
   ...props
 }) {
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = useState2(() => value ?? "");
+  const [internalValue, setInternalValue] = useState3(() => value ?? "");
   useEffect2(() => {
     if (!isControlled && value !== void 0) {
       setInternalValue(value);
     }
   }, [isControlled, value]);
   const resolvedValue = isControlled ? value ?? "" : internalValue;
-  const [layout, setLayout] = useState2("compact");
+  const [layout, setLayout] = useState3("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 [commandQuery, setCommandQuery] = useState3(null);
+  const [slashHighlightIndex, setSlashHighlightIndex] = useState3(0);
   const inputRef = useRef2(null);
   const gridRef = useRef2(null);
   const addButtonContainerRef = useRef2(null);
@@ -699,7 +822,7 @@ function CopilotChatInput({
       setCommandQuery(null);
     }
   }, [mode]);
-  const updateSlashState = useCallback(
+  const updateSlashState = useCallback2(
     (value2) => {
       if (commandItems.length === 0) {
         setCommandQuery((prev) => prev === null ? prev : null);
@@ -726,7 +849,7 @@ function CopilotChatInput({
     onChange?.(nextValue);
     updateSlashState(nextValue);
   };
-  const clearInputValue = useCallback(() => {
+  const clearInputValue = useCallback2(() => {
     if (!isControlled) {
       setInternalValue("");
     }
@@ -734,7 +857,7 @@ function CopilotChatInput({
       onChange("");
     }
   }, [isControlled, onChange]);
-  const runCommand = useCallback(
+  const runCommand = useCallback2(
     (item) => {
       clearInputValue();
       item.action?.();
@@ -851,8 +974,22 @@ function CopilotChatInput({
   const BoundCancelTranscribeButton = renderSlot(cancelTranscribeButton, CopilotChatInput.CancelTranscribeButton, {
     onClick: onCancelTranscribe
   });
+  const handleFinishTranscribe = useCallback2(async () => {
+    const recorder = audioRecorderRef.current;
+    if (recorder && recorder.state === "recording") {
+      try {
+        const audioBlob = await recorder.stop();
+        if (onFinishTranscribeWithAudio) {
+          await onFinishTranscribeWithAudio(audioBlob);
+        }
+      } catch (error) {
+        console.error("Failed to stop recording:", error);
+      }
+    }
+    onFinishTranscribe?.();
+  }, [onFinishTranscribe, onFinishTranscribeWithAudio]);
   const BoundFinishTranscribeButton = renderSlot(finishTranscribeButton, CopilotChatInput.FinishTranscribeButton, {
-    onClick: onFinishTranscribe
+    onClick: handleFinishTranscribe
   });
   const BoundAddMenuButton = renderSlot(addMenuButton, CopilotChatInput.AddMenuButton, {
     disabled: mode === "transcribe",
@@ -887,7 +1024,7 @@ function CopilotChatInput({
       inputRef.current.focus();
     }
   };
-  const ensureMeasurements = useCallback(() => {
+  const ensureMeasurements = useCallback2(() => {
     const textarea = inputRef.current;
     if (!textarea) {
       return;
@@ -914,7 +1051,7 @@ function CopilotChatInput({
     textarea.style.height = previousHeight;
     textarea.style.maxHeight = `${maxHeight}px`;
   }, []);
-  const adjustTextareaHeight = useCallback(() => {
+  const adjustTextareaHeight = useCallback2(() => {
     const textarea = inputRef.current;
     if (!textarea) {
       return 0;
@@ -935,7 +1072,7 @@ function CopilotChatInput({
     }
     return scrollHeight;
   }, [ensureMeasurements]);
-  const updateLayout = useCallback((nextLayout) => {
+  const updateLayout = useCallback2((nextLayout) => {
     setLayout((prev) => {
       if (prev === nextLayout) {
         return prev;
@@ -944,7 +1081,7 @@ function CopilotChatInput({
       return nextLayout;
     });
   }, []);
-  const evaluateLayout = useCallback(() => {
+  const evaluateLayout = useCallback2(() => {
     if (mode !== "input") {
       updateLayout("compact");
       return;
@@ -1152,10 +1289,10 @@ function CopilotChatInput({
               "div",
               {
                 className: twMerge3(
-                  "relative flex min-w-0 flex-col",
+                  "relative flex min-w-0 flex-col min-h-[50px] justify-center",
                   isExpanded ? "col-span-3 row-start-1" : "col-start-2 row-start-1"
                 ),
-                children: mode === "transcribe" ? BoundAudioRecorder : /* @__PURE__ */ jsxs3(Fragment, { children: [
+                children: mode === "transcribe" ? BoundAudioRecorder : mode === "processing" ? /* @__PURE__ */ jsx6("div", { className: "flex w-full items-center justify-center py-3 px-5", children: /* @__PURE__ */ jsx6(Loader2, { className: "size-[26px] animate-spin text-muted-foreground" }) }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
                   BoundTextArea,
                   slashMenu
                 ] })
@@ -1272,7 +1409,7 @@ function CopilotChatInput({
       }
       return items;
     }, [onAddFile, toolsMenu, labels.chatInputToolbarAddButtonLabel]);
-    const renderMenuItems = useCallback(
+    const renderMenuItems = useCallback2(
       (items) => items.map((item, index) => {
         if (item === "-") {
           return /* @__PURE__ */ jsx6(DropdownMenuSeparator, {}, `separator-${index}`);
@@ -1363,7 +1500,7 @@ CopilotChatInput.AddMenuButton.displayName = "CopilotChatInput.AddMenuButton";
 var CopilotChatInput_default = CopilotChatInput;
 
 // src/components/chat/CopilotChatAssistantMessage.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import {
   Copy,
   Check as Check2,
@@ -1377,11 +1514,11 @@ import "katex/dist/katex.min.css";
 import { Streamdown } from "streamdown";
 
 // src/hooks/use-render-tool-call.tsx
-import React7, { useCallback as useCallback3, useMemo as useMemo4, useSyncExternalStore } from "react";
+import React7, { useCallback as useCallback4, useMemo as useMemo4, useSyncExternalStore } from "react";
 import { ToolCallStatus } from "@copilotkitnext/core";
 
 // src/providers/CopilotKitProvider.tsx
-import { createContext as createContext2, useContext as useContext2, useMemo as useMemo3, useEffect as useEffect5, useReducer, useRef as useRef4, useState as useState5 } from "react";
+import { createContext as createContext2, useContext as useContext2, useMemo as useMemo3, useEffect as useEffect5, useReducer, useRef as useRef4, useState as useState6 } from "react";
 import { z as z2 } from "zod";
 
 // src/lib/react-core.ts
@@ -1457,7 +1594,7 @@ var CopilotKitInspector = ({ core, ...rest }) => {
 CopilotKitInspector.displayName = "CopilotKitInspector";
 
 // src/components/MCPAppsActivityRenderer.tsx
-import { useEffect as useEffect4, useRef as useRef3, useState as useState4, useCallback as useCallback2 } from "react";
+import { useEffect as useEffect4, useRef as useRef3, useState as useState5, useCallback as useCallback3 } from "react";
 import { z } from "zod";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var PROTOCOL_VERSION = "2025-06-18";
@@ -1584,37 +1721,37 @@ function isNotification(msg) {
 var MCPAppsActivityRenderer = function MCPAppsActivityRenderer2({ content, agent }) {
   const containerRef = useRef3(null);
   const iframeRef = useRef3(null);
-  const [iframeReady, setIframeReady] = useState4(false);
-  const [error, setError] = useState4(null);
-  const [isLoading, setIsLoading] = useState4(true);
-  const [iframeSize, setIframeSize] = useState4({});
-  const [fetchedResource, setFetchedResource] = useState4(null);
+  const [iframeReady, setIframeReady] = useState5(false);
+  const [error, setError] = useState5(null);
+  const [isLoading, setIsLoading] = useState5(true);
+  const [iframeSize, setIframeSize] = useState5({});
+  const [fetchedResource, setFetchedResource] = useState5(null);
   const contentRef = useRef3(content);
   contentRef.current = content;
   const agentRef = useRef3(agent);
   agentRef.current = agent;
   const fetchStateRef = useRef3({ inProgress: false, promise: null, resourceUri: null });
-  const sendToIframe = useCallback2((msg) => {
+  const sendToIframe = useCallback3((msg) => {
     if (iframeRef.current?.contentWindow) {
       console.log("[MCPAppsRenderer] Sending to iframe:", msg);
       iframeRef.current.contentWindow.postMessage(msg, "*");
     }
   }, []);
-  const sendResponse = useCallback2((id, result) => {
+  const sendResponse = useCallback3((id, result) => {
     sendToIframe({
       jsonrpc: "2.0",
       id,
       result
     });
   }, [sendToIframe]);
-  const sendErrorResponse = useCallback2((id, code, message) => {
+  const sendErrorResponse = useCallback3((id, code, message) => {
     sendToIframe({
       jsonrpc: "2.0",
       id,
       error: { code, message }
     });
   }, [sendToIframe]);
-  const sendNotification = useCallback2((method, params) => {
+  const sendNotification = useCallback3((method, params) => {
     sendToIframe({
       jsonrpc: "2.0",
       method,
@@ -1966,6 +2103,7 @@ var CopilotKitProvider = ({
   children,
   runtimeUrl,
   headers = {},
+  credentials,
   publicApiKey,
   publicLicenseKey,
   properties = {},
@@ -1978,7 +2116,7 @@ var CopilotKitProvider = ({
   showDevConsole = false,
   useSingleEndpoint = false
 }) => {
-  const [shouldRenderInspector, setShouldRenderInspector] = useState5(false);
+  const [shouldRenderInspector, setShouldRenderInspector] = useState6(false);
   useEffect5(() => {
     if (typeof window === "undefined") {
       return;
@@ -2111,6 +2249,7 @@ var CopilotKitProvider = ({
       runtimeUrl: chatApiEndpoint,
       runtimeTransport: useSingleEndpoint ? "single" : "rest",
       headers: mergedHeaders,
+      credentials,
       properties,
       agents__unsafe_dev_only: agents,
       tools: allTools,
@@ -2131,7 +2270,7 @@ var CopilotKitProvider = ({
       subscription.unsubscribe();
     };
   }, [copilotkit]);
-  const [executingToolCallIds, setExecutingToolCallIds] = useState5(() => /* @__PURE__ */ new Set());
+  const [executingToolCallIds, setExecutingToolCallIds] = useState6(() => /* @__PURE__ */ new Set());
   useEffect5(() => {
     const subscription = copilotkit.subscribe({
       onToolExecutionStart: ({ toolCallId }) => {
@@ -2159,9 +2298,10 @@ var CopilotKitProvider = ({
     copilotkit.setRuntimeUrl(chatApiEndpoint);
     copilotkit.setRuntimeTransport(useSingleEndpoint ? "single" : "rest");
     copilotkit.setHeaders(mergedHeaders);
+    copilotkit.setCredentials(credentials);
     copilotkit.setProperties(properties);
     copilotkit.setAgents__unsafe_dev_only(agents);
-  }, [chatApiEndpoint, mergedHeaders, properties, agents, useSingleEndpoint]);
+  }, [chatApiEndpoint, mergedHeaders, credentials, properties, agents, useSingleEndpoint]);
   return /* @__PURE__ */ jsxs5(
     CopilotKitContext.Provider,
     {
@@ -2269,7 +2409,7 @@ function useRenderToolCall() {
     () => copilotkit.renderToolCalls,
     () => copilotkit.renderToolCalls
   );
-  const renderToolCall = useCallback3(
+  const renderToolCall = useCallback4(
     ({
       toolCall,
       toolMessage
@@ -2359,14 +2499,14 @@ function useRenderCustomMessages() {
 
 // src/hooks/use-render-activity-message.tsx
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID3 } from "@copilotkitnext/shared";
-import { useCallback as useCallback4, useMemo as useMemo5 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo5 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 function useRenderActivityMessage() {
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
   const agentId = config?.agentId ?? DEFAULT_AGENT_ID3;
   const renderers = copilotkit.renderActivityMessages;
-  const findRenderer = useCallback4(
+  const findRenderer = useCallback5(
     (activityType) => {
       if (!renderers.length) {
         return null;
@@ -2378,7 +2518,7 @@ function useRenderActivityMessage() {
     },
     [agentId, renderers]
   );
-  const renderActivityMessage = useCallback4(
+  const renderActivityMessage = useCallback5(
     (message) => {
       const renderer = findRenderer(message.activityType);
       if (!renderer) {
@@ -2451,23 +2591,23 @@ function useFrontendTool(tool, deps) {
 }
 
 // src/hooks/use-human-in-the-loop.tsx
-import { useCallback as useCallback5, useRef as useRef5, useEffect as useEffect7 } from "react";
+import { useCallback as useCallback6, useRef as useRef5, useEffect as useEffect7 } from "react";
 import React8 from "react";
 function useHumanInTheLoop(tool, deps) {
   const { copilotkit } = useCopilotKit();
   const resolvePromiseRef = useRef5(null);
-  const respond = useCallback5(async (result) => {
+  const respond = useCallback6(async (result) => {
     if (resolvePromiseRef.current) {
       resolvePromiseRef.current(result);
       resolvePromiseRef.current = null;
     }
   }, []);
-  const handler = useCallback5(async () => {
+  const handler = useCallback6(async () => {
     return new Promise((resolve) => {
       resolvePromiseRef.current = resolve;
     });
   }, []);
-  const RenderComponent = useCallback5(
+  const RenderComponent = useCallback6(
     (props) => {
       const ToolComponent = tool.render;
       if (props.status === "inProgress") {
@@ -2617,17 +2757,17 @@ function useAgentContext(context) {
 }
 
 // src/hooks/use-suggestions.tsx
-import { useCallback as useCallback6, useEffect as useEffect10, useMemo as useMemo8, useState as useState6 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo8, useState as useState7 } from "react";
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID5 } from "@copilotkitnext/shared";
 function useSuggestions({ agentId } = {}) {
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
   const resolvedAgentId = useMemo8(() => agentId ?? config?.agentId ?? DEFAULT_AGENT_ID5, [agentId, config?.agentId]);
-  const [suggestions, setSuggestions] = useState6(() => {
+  const [suggestions, setSuggestions] = useState7(() => {
     const result = copilotkit.getSuggestions(resolvedAgentId);
     return result.suggestions;
   });
-  const [isLoading, setIsLoading] = useState6(() => {
+  const [isLoading, setIsLoading] = useState7(() => {
     const result = copilotkit.getSuggestions(resolvedAgentId);
     return result.isLoading;
   });
@@ -2666,10 +2806,10 @@ function useSuggestions({ agentId } = {}) {
       subscription.unsubscribe();
     };
   }, [copilotkit, resolvedAgentId]);
-  const reloadSuggestions = useCallback6(() => {
+  const reloadSuggestions = useCallback7(() => {
     copilotkit.reloadSuggestions(resolvedAgentId);
   }, [copilotkit, resolvedAgentId]);
-  const clearSuggestions = useCallback6(() => {
+  const clearSuggestions = useCallback7(() => {
     copilotkit.clearSuggestions(resolvedAgentId);
   }, [copilotkit, resolvedAgentId]);
   return {
@@ -2681,7 +2821,7 @@ function useSuggestions({ agentId } = {}) {
 }
 
 // src/hooks/use-configure-suggestions.tsx
-import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo9, useRef as useRef6 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect11, useMemo as useMemo9, useRef as useRef6 } from "react";
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID6 } from "@copilotkitnext/shared";
 function useConfigureSuggestions(config, deps) {
   const { copilotkit } = useCopilotKit();
@@ -2737,7 +2877,7 @@ function useConfigureSuggestions(config, deps) {
     return consumer;
   }, [normalizedConfig, resolvedConsumerAgentId]);
   const isGlobalConfig = rawConsumerAgentId === void 0 || rawConsumerAgentId === "*";
-  const requestReload = useCallback7(() => {
+  const requestReload = useCallback8(() => {
     if (!normalizedConfig) {
       return;
     }
@@ -2992,7 +3132,7 @@ function CopilotChatAssistantMessage({
   CopilotChatAssistantMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    const [copied, setCopied] = useState7(false);
+    const [copied, setCopied] = useState8(false);
     const handleClick = (event) => {
       setCopied(true);
       setTimeout(() => setCopied(false), 2e3);
@@ -3070,7 +3210,7 @@ CopilotChatAssistantMessage.RegenerateButton.displayName = "CopilotChatAssistant
 var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
 
 // src/components/chat/CopilotChatUserMessage.tsx
-import { useMemo as useMemo10, useState as useState8 } from "react";
+import { useMemo as useMemo10, useState as useState9 } from "react";
 import { Copy as Copy2, Check as Check3, Edit, ChevronLeft, ChevronRight } from "lucide-react";
 import { twMerge as twMerge5 } from "tailwind-merge";
 import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -3233,7 +3373,7 @@ function CopilotChatUserMessage({
   CopilotChatUserMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    const [copied, setCopied] = useState8(false);
+    const [copied, setCopied] = useState9(false);
     const handleClick = (event) => {
       setCopied(true);
       setTimeout(() => setCopied(false), 2e3);
@@ -3328,7 +3468,7 @@ var CopilotChatUserMessage_default = CopilotChatUserMessage;
 
 // src/components/chat/CopilotChatSuggestionPill.tsx
 import React10 from "react";
-import { Loader2 } from "lucide-react";
+import { Loader2 as Loader22 } from "lucide-react";
 import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 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";
@@ -3345,7 +3485,7 @@ var CopilotChatSuggestionPill = React10.forwardRef(function CopilotChatSuggestio
       disabled: isLoading || props.disabled,
       ...props,
       children: [
-        isLoading ? /* @__PURE__ */ jsx16("span", { className: "flex h-3.5 sm:h-4 w-3.5 sm:w-4 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx16(Loader2, { className: "h-3.5 sm:h-4 w-3.5 sm:w-4 animate-spin", "aria-hidden": "true" }) }) : showIcon && /* @__PURE__ */ jsx16("span", { className: "flex h-3.5 sm:h-4 w-3.5 sm:w-4 items-center justify-center text-muted-foreground", children: icon }),
+        isLoading ? /* @__PURE__ */ jsx16("span", { className: "flex h-3.5 sm:h-4 w-3.5 sm:w-4 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx16(Loader22, { className: "h-3.5 sm:h-4 w-3.5 sm:w-4 animate-spin", "aria-hidden": "true" }) }) : showIcon && /* @__PURE__ */ jsx16("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__ */ jsx16("span", { className: labelClasses, children })
       ]
     }
@@ -3656,15 +3796,15 @@ CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
 var CopilotChatMessageView_default = CopilotChatMessageView;
 
 // src/components/chat/CopilotChatView.tsx
-import React13, { useRef as useRef7, useState as useState10, useEffect as useEffect14 } from "react";
+import React13, { useRef as useRef7, useState as useState11, useEffect as useEffect14 } from "react";
 import { twMerge as twMerge7 } from "tailwind-merge";
 import { StickToBottom, useStickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 import { ChevronDown } from "lucide-react";
 
 // src/hooks/use-keyboard-height.tsx
-import { useState as useState9, useEffect as useEffect13 } from "react";
+import { useState as useState10, useEffect as useEffect13 } from "react";
 function useKeyboardHeight() {
-  const [keyboardState, setKeyboardState] = useState9({
+  const [keyboardState, setKeyboardState] = useState10({
     isKeyboardOpen: false,
     keyboardHeight: 0,
     availableHeight: typeof window !== "undefined" ? window.innerHeight : 0,
@@ -3712,6 +3852,7 @@ function CopilotChatView({
   inputContainer,
   disclaimer,
   suggestionView,
+  welcomeScreen,
   messages = [],
   autoScroll = true,
   inputProps,
@@ -3724,8 +3865,8 @@ function CopilotChatView({
   ...props
 }) {
   const inputContainerRef = useRef7(null);
-  const [inputContainerHeight, setInputContainerHeight] = useState10(0);
-  const [isResizing, setIsResizing] = useState10(false);
+  const [inputContainerHeight, setInputContainerHeight] = useState11(0);
+  const [isResizing, setIsResizing] = useState11(false);
   const resizeTimeoutRef = useRef7(null);
   const { isKeyboardOpen, keyboardHeight, availableHeight } = useKeyboardHeight();
   useEffect14(() => {
@@ -3791,6 +3932,21 @@ function CopilotChatView({
       BoundDisclaimer
     ] })
   });
+  const isEmpty = messages.length === 0;
+  const welcomeScreenDisabled = welcomeScreen === false;
+  const shouldShowWelcomeScreen = isEmpty && !welcomeScreenDisabled;
+  if (shouldShowWelcomeScreen) {
+    const welcomeScreenSlot = welcomeScreen === true ? void 0 : welcomeScreen;
+    const BoundWelcomeScreen = renderSlot(
+      welcomeScreenSlot,
+      CopilotChatView.WelcomeScreen,
+      {
+        input: BoundInput,
+        suggestionView: BoundSuggestionView ?? /* @__PURE__ */ jsx19(Fragment6, {})
+      }
+    );
+    return /* @__PURE__ */ jsx19("div", { className: twMerge7("relative h-full", className), ...props, children: BoundWelcomeScreen });
+  }
   if (children) {
     return children({
       messageView: BoundMessageView,
@@ -3837,9 +3993,9 @@ function CopilotChatView({
     className,
     ...props
   }) => {
-    const [hasMounted, setHasMounted] = useState10(false);
+    const [hasMounted, setHasMounted] = useState11(false);
     const { scrollRef, contentRef, scrollToBottom } = useStickToBottom();
-    const [showScrollButton, setShowScrollButton] = useState10(false);
+    const [showScrollButton, setShowScrollButton] = useState11(false);
     useEffect14(() => {
       setHasMounted(true);
     }, []);
@@ -3970,15 +4126,174 @@ function CopilotChatView({
       }
     );
   };
+  CopilotChatView2.WelcomeMessage = ({
+    className,
+    ...props
+  }) => {
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
+    return /* @__PURE__ */ jsx19(
+      "h1",
+      {
+        className: cn(
+          "text-xl sm:text-2xl font-medium text-foreground text-center",
+          className
+        ),
+        ...props,
+        children: labels.welcomeMessageText
+      }
+    );
+  };
+  CopilotChatView2.WelcomeScreen = ({
+    welcomeMessage,
+    input,
+    suggestionView,
+    className,
+    children,
+    ...props
+  }) => {
+    const BoundWelcomeMessage = renderSlot(
+      welcomeMessage,
+      CopilotChatView2.WelcomeMessage,
+      {}
+    );
+    if (children) {
+      return /* @__PURE__ */ jsx19(Fragment6, { children: children({
+        welcomeMessage: BoundWelcomeMessage,
+        input,
+        suggestionView,
+        className,
+        ...props
+      }) });
+    }
+    return /* @__PURE__ */ jsx19(
+      "div",
+      {
+        className: cn(
+          "h-full flex flex-col items-center justify-center px-4",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs11("div", { className: "w-full max-w-3xl flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx19("div", { className: "mb-6", children: BoundWelcomeMessage }),
+          /* @__PURE__ */ jsx19("div", { className: "w-full", children: input }),
+          /* @__PURE__ */ jsx19("div", { className: "mt-4 flex justify-center", children: suggestionView })
+        ] })
+      }
+    );
+  };
 })(CopilotChatView || (CopilotChatView = {}));
 var CopilotChatView_default = CopilotChatView;
 
 // src/components/chat/CopilotChat.tsx
-import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID7, randomUUID as randomUUID2 } from "@copilotkitnext/shared";
-import { useCallback as useCallback8, useEffect as useEffect15, useMemo as useMemo11 } from "react";
+import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID7, randomUUID as randomUUID2, TranscriptionErrorCode as TranscriptionErrorCode2 } from "@copilotkitnext/shared";
+import { useCallback as useCallback9, useEffect as useEffect15, useMemo as useMemo11, useState as useState12 } from "react";
 import { merge } from "ts-deepmerge";
 import { AGUIConnectNotImplementedError } from "@ag-ui/client";
-import { jsx as jsx20 } from "react/jsx-runtime";
+
+// src/lib/transcription-client.ts
+import {
+  TranscriptionErrorCode
+} from "@copilotkitnext/shared";
+async function blobToBase64(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const result = reader.result;
+      const base64 = result.split(",")[1];
+      resolve(base64 ?? "");
+    };
+    reader.onerror = () => reject(new Error("Failed to read audio data"));
+    reader.readAsDataURL(blob);
+  });
+}
+function isTranscriptionErrorResponse(data) {
+  return typeof data === "object" && data !== null && "error" in data && "message" in data && typeof data.error === "string" && typeof data.message === "string";
+}
+function parseTranscriptionError(response) {
+  return {
+    code: response.error,
+    message: response.message,
+    retryable: response.retryable ?? false
+  };
+}
+var TranscriptionError = class extends Error {
+  info;
+  constructor(info) {
+    super(info.message);
+    this.name = "TranscriptionError";
+    this.info = info;
+  }
+};
+async function transcribeAudio(core, audioBlob, filename = "recording.webm") {
+  const runtimeUrl = core.runtimeUrl;
+  if (!runtimeUrl) {
+    throw new TranscriptionError({
+      code: TranscriptionErrorCode.INVALID_REQUEST,
+      message: "Runtime URL is not configured",
+      retryable: false
+    });
+  }
+  const headers = { ...core.headers };
+  let response;
+  try {
+    if (core.runtimeTransport === "single") {
+      const base64Audio = await blobToBase64(audioBlob);
+      headers["Content-Type"] = "application/json";
+      response = await fetch(runtimeUrl, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          method: "transcribe",
+          body: {
+            audio: base64Audio,
+            mimeType: audioBlob.type || "audio/webm",
+            filename
+          }
+        })
+      });
+    } else {
+      delete headers["Content-Type"];
+      const formData = new FormData();
+      formData.append("audio", audioBlob, filename);
+      response = await fetch(`${runtimeUrl}/transcribe`, {
+        method: "POST",
+        headers,
+        body: formData
+      });
+    }
+  } catch (error) {
+    throw new TranscriptionError({
+      code: TranscriptionErrorCode.NETWORK_ERROR,
+      message: error instanceof Error ? error.message : "Network request failed",
+      retryable: true
+    });
+  }
+  if (!response.ok) {
+    let errorData;
+    try {
+      errorData = await response.json();
+    } catch {
+      throw new TranscriptionError({
+        code: TranscriptionErrorCode.PROVIDER_ERROR,
+        message: `HTTP ${response.status}: ${response.statusText}`,
+        retryable: response.status >= 500
+      });
+    }
+    if (isTranscriptionErrorResponse(errorData)) {
+      throw new TranscriptionError(parseTranscriptionError(errorData));
+    }
+    throw new TranscriptionError({
+      code: TranscriptionErrorCode.PROVIDER_ERROR,
+      message: typeof errorData === "object" && errorData !== null && "message" in errorData ? String(errorData.message) : "Transcription failed",
+      retryable: response.status >= 500
+    });
+  }
+  return await response.json();
+}
+
+// src/components/chat/CopilotChat.tsx
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen, ...props }) {
   const existingConfig = useCopilotChatConfiguration();
   const resolvedAgentId = agentId ?? existingConfig?.agentId ?? DEFAULT_AGENT_ID7;
@@ -3989,6 +4304,12 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
   const { agent } = useAgent({ agentId: resolvedAgentId });
   const { copilotkit } = useCopilotKit();
   const { suggestions: autoSuggestions } = useSuggestions({ agentId: resolvedAgentId });
+  const [transcribeMode, setTranscribeMode] = useState12("input");
+  const [inputValue, setInputValue] = useState12("");
+  const [transcriptionError, setTranscriptionError] = useState12(null);
+  const [isTranscribing, setIsTranscribing] = useState12(false);
+  const isTranscriptionEnabled = copilotkit.audioFileTranscriptionEnabled;
+  const isMediaRecorderSupported = typeof window !== "undefined" && typeof MediaRecorder !== "undefined";
   const {
     inputProps: providedInputProps,
     messageView: providedMessageView,
@@ -4011,13 +4332,14 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     return () => {
     };
   }, [resolvedThreadId, agent, copilotkit, resolvedAgentId]);
-  const onSubmitInput = useCallback8(
+  const onSubmitInput = useCallback9(
     async (value) => {
       agent.addMessage({
         id: randomUUID2(),
         role: "user",
         content: value
       });
+      setInputValue("");
       try {
         await copilotkit.runAgent({ agent });
       } catch (error) {
@@ -4026,7 +4348,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     },
     [agent, copilotkit]
   );
-  const handleSelectSuggestion = useCallback8(
+  const handleSelectSuggestion = useCallback9(
     async (suggestion) => {
       agent.addMessage({
         id: randomUUID2(),
@@ -4041,7 +4363,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     },
     [agent, copilotkit]
   );
-  const stopCurrentRun = useCallback8(() => {
+  const stopCurrentRun = useCallback9(() => {
     try {
       copilotkit.stopAgent({ agent });
     } catch (error) {
@@ -4053,6 +4375,75 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
       }
     }
   }, [agent, copilotkit]);
+  const handleStartTranscribe = useCallback9(() => {
+    setTranscriptionError(null);
+    setTranscribeMode("transcribe");
+  }, []);
+  const handleCancelTranscribe = useCallback9(() => {
+    setTranscriptionError(null);
+    setTranscribeMode("input");
+  }, []);
+  const handleFinishTranscribe = useCallback9(() => {
+    setTranscribeMode("input");
+  }, []);
+  const handleFinishTranscribeWithAudio = useCallback9(async (audioBlob) => {
+    setIsTranscribing(true);
+    try {
+      setTranscriptionError(null);
+      const result = await transcribeAudio(copilotkit, audioBlob);
+      setInputValue((prev) => {
+        const trimmedPrev = prev.trim();
+        if (trimmedPrev) {
+          return `${trimmedPrev} ${result.text}`;
+        }
+        return result.text;
+      });
+    } catch (error) {
+      console.error("CopilotChat: Transcription failed", error);
+      if (error instanceof TranscriptionError) {
+        const { code, retryable, message } = error.info;
+        switch (code) {
+          case TranscriptionErrorCode2.RATE_LIMITED:
+            setTranscriptionError("Too many requests. Please wait a moment.");
+            break;
+          case TranscriptionErrorCode2.AUTH_FAILED:
+            setTranscriptionError("Authentication error. Please check your configuration.");
+            break;
+          case TranscriptionErrorCode2.AUDIO_TOO_LONG:
+            setTranscriptionError("Recording is too long. Please try a shorter recording.");
+            break;
+          case TranscriptionErrorCode2.AUDIO_TOO_SHORT:
+            setTranscriptionError("Recording is too short. Please try again.");
+            break;
+          case TranscriptionErrorCode2.INVALID_AUDIO_FORMAT:
+            setTranscriptionError("Audio format not supported.");
+            break;
+          case TranscriptionErrorCode2.SERVICE_NOT_CONFIGURED:
+            setTranscriptionError("Transcription service is not available.");
+            break;
+          case TranscriptionErrorCode2.NETWORK_ERROR:
+            setTranscriptionError("Network error. Please check your connection.");
+            break;
+          default:
+            setTranscriptionError(
+              retryable ? "Transcription failed. Please try again." : message
+            );
+        }
+      } else {
+        setTranscriptionError("Transcription failed. Please try again.");
+      }
+    } finally {
+      setIsTranscribing(false);
+    }
+  }, [copilotkit]);
+  useEffect15(() => {
+    if (transcriptionError) {
+      const timer = setTimeout(() => {
+        setTranscriptionError(null);
+      }, 5e3);
+      return () => clearTimeout(timer);
+    }
+  }, [transcriptionError]);
   const mergedProps = merge(
     {
       isRunning: agent.isRunning,
@@ -4069,27 +4460,56 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
   const hasMessages = agent.messages.length > 0;
   const shouldAllowStop = agent.isRunning && hasMessages;
   const effectiveStopHandler = shouldAllowStop ? providedStopHandler ?? stopCurrentRun : providedStopHandler;
+  const showTranscription = isTranscriptionEnabled && isMediaRecorderSupported;
+  const effectiveMode = isTranscribing ? "processing" : transcribeMode;
   const finalInputProps = {
     ...providedInputProps,
     onSubmitMessage: onSubmitInput,
     onStop: effectiveStopHandler,
-    isRunning: agent.isRunning
+    isRunning: agent.isRunning,
+    mode: effectiveMode,
+    value: inputValue,
+    onChange: setInputValue,
+    // Only provide transcription handlers if feature is available
+    onStartTranscribe: showTranscription ? handleStartTranscribe : void 0,
+    onCancelTranscribe: showTranscription ? handleCancelTranscribe : void 0,
+    onFinishTranscribe: showTranscription ? handleFinishTranscribe : void 0,
+    onFinishTranscribeWithAudio: showTranscription ? handleFinishTranscribeWithAudio : void 0
   };
-  finalInputProps.mode = agent.isRunning ? "processing" : finalInputProps.mode ?? "input";
   const messages = useMemo11(() => [...agent.messages], [JSON.stringify(agent.messages)]);
   const finalProps = merge(mergedProps, {
     messages,
     inputProps: finalInputProps
   });
   const RenderedChatView = renderSlot(chatView, CopilotChatView, finalProps);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs12(
     CopilotChatConfigurationProvider,
     {
       agentId: resolvedAgentId,
       threadId: resolvedThreadId,
       labels,
       isModalDefaultOpen,
-      children: RenderedChatView
+      children: [
+        transcriptionError && /* @__PURE__ */ jsx20(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: "100px",
+              left: "50%",
+              transform: "translateX(-50%)",
+              backgroundColor: "#ef4444",
+              color: "white",
+              padding: "8px 16px",
+              borderRadius: "8px",
+              fontSize: "14px",
+              zIndex: 50
+            },
+            children: transcriptionError
+          }
+        ),
+        RenderedChatView
+      ]
     }
   );
 }
@@ -4098,9 +4518,9 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 })(CopilotChat || (CopilotChat = {}));
 
 // src/components/chat/CopilotChatToggleButton.tsx
-import React14, { useState as useState11 } from "react";
+import React14, { useState as useState13 } from "react";
 import { MessageCircle, X as X2 } from "lucide-react";
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 var DefaultOpenIcon = ({
   className,
   ...props
@@ -4129,7 +4549,7 @@ var CopilotChatToggleButton = React14.forwardRef(function CopilotChatToggleButto
   const { onClick, type, disabled, ...restProps } = buttonProps;
   const configuration = useCopilotChatConfiguration();
   const labels = configuration?.labels ?? CopilotChatDefaultLabels;
-  const [fallbackOpen, setFallbackOpen] = useState11(false);
+  const [fallbackOpen, setFallbackOpen] = useState13(false);
   const isOpen = configuration?.isModalOpen ?? fallbackOpen;
   const setModalOpen = configuration?.setModalOpen ?? setFallbackOpen;
   const handleClick = (event) => {
@@ -4191,7 +4611,7 @@ var CopilotChatToggleButton = React14.forwardRef(function CopilotChatToggleButto
       children: renderedCloseIcon
     }
   );
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "button",
     {
       ref,
@@ -4215,12 +4635,12 @@ CopilotChatToggleButton.displayName = "CopilotChatToggleButton";
 var CopilotChatToggleButton_default = CopilotChatToggleButton;
 
 // src/components/chat/CopilotSidebarView.tsx
-import { useEffect as useEffect16, useRef as useRef8, useState as useState12 } from "react";
+import { useEffect as useEffect16, useRef as useRef8, useState as useState14 } from "react";
 
 // src/components/chat/CopilotModalHeader.tsx
-import { useCallback as useCallback9 } from "react";
+import { useCallback as useCallback10 } from "react";
 import { X as X3 } from "lucide-react";
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 function CopilotModalHeader({
   title,
   titleContent,
@@ -4232,7 +4652,7 @@ function CopilotModalHeader({
   const configuration = useCopilotChatConfiguration();
   const fallbackTitle = configuration?.labels.modalHeaderTitle ?? CopilotChatDefaultLabels.modalHeaderTitle;
   const resolvedTitle = title ?? fallbackTitle;
-  const handleClose = useCallback9(() => {
+  const handleClose = useCallback10(() => {
     configuration?.setModalOpen(false);
   }, [configuration]);
   const BoundTitle = renderSlot(titleContent, CopilotModalHeader.Title, {
@@ -4259,7 +4679,7 @@ function CopilotModalHeader({
         className
       ),
       ...rest,
-      children: /* @__PURE__ */ jsxs13("div", { className: "flex w-full items-center gap-2", children: [
+      children: /* @__PURE__ */ jsxs14("div", { className: "flex w-full items-center gap-2", children: [
         /* @__PURE__ */ jsx22("div", { className: "flex-1", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx22("div", { className: "flex flex-1 justify-center text-center", children: BoundTitle }),
         /* @__PURE__ */ jsx22("div", { className: "flex flex-1 justify-end", children: BoundCloseButton })
@@ -4302,14 +4722,14 @@ CopilotModalHeader.Title.displayName = "CopilotModalHeader.Title";
 CopilotModalHeader.CloseButton.displayName = "CopilotModalHeader.CloseButton";
 
 // src/components/chat/CopilotSidebarView.tsx
-import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 var DEFAULT_SIDEBAR_WIDTH = 480;
 var SIDEBAR_TRANSITION_MS = 260;
 function CopilotSidebarView({ header, width, ...props }) {
   const configuration = useCopilotChatConfiguration();
   const isSidebarOpen = configuration?.isModalOpen ?? false;
   const sidebarRef = useRef8(null);
-  const [sidebarWidth, setSidebarWidth] = useState12(width ?? DEFAULT_SIDEBAR_WIDTH);
+  const [sidebarWidth, setSidebarWidth] = useState14(width ?? DEFAULT_SIDEBAR_WIDTH);
   const widthToCss = (w) => {
     return typeof w === "number" ? `${w}px` : w;
   };
@@ -4346,7 +4766,7 @@ function CopilotSidebarView({ header, width, ...props }) {
     return () => window.removeEventListener("resize", updateWidth);
   }, [width]);
   const headerElement = renderSlot(header, CopilotModalHeader, {});
-  return /* @__PURE__ */ jsxs14(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs15(Fragment7, { children: [
     isSidebarOpen && /* @__PURE__ */ jsx23(
       "style",
       {
@@ -4387,7 +4807,7 @@ function CopilotSidebarView({ header, width, ...props }) {
         "aria-hidden": !isSidebarOpen,
         "aria-label": "Copilot chat sidebar",
         role: "complementary",
-        children: /* @__PURE__ */ jsxs14("div", { className: "flex h-full w-full flex-col overflow-hidden", children: [
+        children: /* @__PURE__ */ jsxs15("div", { className: "flex h-full w-full flex-col overflow-hidden", children: [
           headerElement,
           /* @__PURE__ */ jsx23("div", { className: "flex-1 overflow-hidden", "data-sidebar-chat": true, children: /* @__PURE__ */ jsx23(CopilotChatView_default, { ...props }) })
         ] })
@@ -4396,10 +4816,49 @@ function CopilotSidebarView({ header, width, ...props }) {
   ] });
 }
 CopilotSidebarView.displayName = "CopilotSidebarView";
+((CopilotSidebarView2) => {
+  CopilotSidebarView2.WelcomeScreen = ({
+    welcomeMessage,
+    input,
+    suggestionView,
+    className,
+    children,
+    ...props
+  }) => {
+    const BoundWelcomeMessage = renderSlot(
+      welcomeMessage,
+      CopilotChatView_default.WelcomeMessage,
+      {}
+    );
+    if (children) {
+      return /* @__PURE__ */ jsx23(Fragment7, { children: children({
+        welcomeMessage: BoundWelcomeMessage,
+        input,
+        suggestionView,
+        className,
+        ...props
+      }) });
+    }
+    return /* @__PURE__ */ jsxs15(
+      "div",
+      {
+        className: cn("h-full flex flex-col", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx23("div", { className: "flex-1 flex flex-col items-center justify-center px-4", children: BoundWelcomeMessage }),
+          /* @__PURE__ */ jsx23("div", { className: "px-8 pb-4", children: /* @__PURE__ */ jsxs15("div", { className: "max-w-3xl mx-auto", children: [
+            /* @__PURE__ */ jsx23("div", { className: "mb-4 flex justify-center", children: suggestionView }),
+            input
+          ] }) })
+        ]
+      }
+    );
+  };
+})(CopilotSidebarView || (CopilotSidebarView = {}));
 
 // src/components/chat/CopilotPopupView.tsx
-import { useEffect as useEffect17, useMemo as useMemo12, useRef as useRef9, useState as useState13 } from "react";
-import { Fragment as Fragment8, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useEffect as useEffect17, useMemo as useMemo12, useRef as useRef9, useState as useState15 } from "react";
+import { Fragment as Fragment8, jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 var DEFAULT_POPUP_WIDTH = 420;
 var DEFAULT_POPUP_HEIGHT = 560;
 var dimensionToCss = (value, fallback) => {
@@ -4424,8 +4883,8 @@ function CopilotPopupView({
   const setModalOpen = configuration?.setModalOpen;
   const labels = configuration?.labels ?? CopilotChatDefaultLabels;
   const containerRef = useRef9(null);
-  const [isRendered, setIsRendered] = useState13(isPopupOpen);
-  const [isAnimatingOut, setIsAnimatingOut] = useState13(false);
+  const [isRendered, setIsRendered] = useState15(isPopupOpen);
+  const [isAnimatingOut, setIsAnimatingOut] = useState15(false);
   useEffect17(() => {
     if (isPopupOpen) {
       setIsRendered(true);
@@ -4516,7 +4975,7 @@ function CopilotPopupView({
         "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__ */ jsxs15(
+      children: /* @__PURE__ */ jsxs16(
         "div",
         {
           ref: containerRef,
@@ -4549,12 +5008,52 @@ function CopilotPopupView({
       )
     }
   ) : null;
-  return /* @__PURE__ */ jsxs15(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs16(Fragment8, { children: [
     /* @__PURE__ */ jsx24(CopilotChatToggleButton_default, {}),
     popupContent
   ] });
 }
 CopilotPopupView.displayName = "CopilotPopupView";
+((CopilotPopupView2) => {
+  CopilotPopupView2.WelcomeScreen = ({
+    welcomeMessage,
+    input,
+    suggestionView,
+    className,
+    children,
+    ...props
+  }) => {
+    const BoundWelcomeMessage = renderSlot(
+      welcomeMessage,
+      CopilotChatView_default.WelcomeMessage,
+      {}
+    );
+    if (children) {
+      return /* @__PURE__ */ jsx24(Fragment8, { children: children({
+        welcomeMessage: BoundWelcomeMessage,
+        input,
+        suggestionView,
+        className,
+        ...props
+      }) });
+    }
+    return /* @__PURE__ */ jsxs16(
+      "div",
+      {
+        className: cn("h-full flex flex-col", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx24("div", { className: "flex-1 flex flex-col items-center justify-center px-4", children: BoundWelcomeMessage }),
+          /* @__PURE__ */ jsx24("div", { className: "px-6 pb-4", children: /* @__PURE__ */ jsxs16("div", { className: "max-w-3xl mx-auto", children: [
+            /* @__PURE__ */ jsx24("div", { className: "mb-4 flex justify-center", children: suggestionView }),
+            input
+          ] }) })
+        ]
+      }
+    );
+  };
+})(CopilotPopupView || (CopilotPopupView = {}));
+var CopilotPopupView_default = CopilotPopupView;
 
 // src/components/chat/CopilotSidebar.tsx
 import { useMemo as useMemo13 } from "react";
@@ -4577,6 +5076,7 @@ function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
   return /* @__PURE__ */ jsx25(
     CopilotChat,
     {
+      welcomeScreen: CopilotSidebarView.WelcomeScreen,
       ...chatProps,
       chatView: SidebarViewOverride,
       isModalDefaultOpen: defaultOpen
@@ -4606,7 +5106,7 @@ function CopilotPopup({
         ...restProps
       } = viewProps;
       return /* @__PURE__ */ jsx26(
-        CopilotPopupView,
+        CopilotPopupView_default,
         {
           ...restProps,
           header: header ?? viewHeader,
@@ -4621,6 +5121,7 @@ function CopilotPopup({
   return /* @__PURE__ */ jsx26(
     CopilotChat,
     {
+      welcomeScreen: CopilotPopupView_default.WelcomeScreen,
       ...chatProps,
       chatView: PopupViewOverride,
       isModalDefaultOpen: defaultOpen
@@ -4642,24 +5143,24 @@ function defineToolCallRenderer(def) {
 }
 
 // src/components/WildcardToolCallRender.tsx
-import { useState as useState14 } from "react";
-import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { useState as useState16 } from "react";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 var WildcardToolCallRender = defineToolCallRenderer({
   name: "*",
   render: ({ args, result, name, status }) => {
-    const [isExpanded, setIsExpanded] = useState14(false);
+    const [isExpanded, setIsExpanded] = useState16(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__ */ jsx27("div", { className: "mt-2 pb-2", children: /* @__PURE__ */ jsxs16("div", { className: "rounded-xl border border-zinc-200/60 dark:border-zinc-800/60 bg-white/70 dark:bg-zinc-900/50 shadow-sm backdrop-blur p-4", children: [
-      /* @__PURE__ */ jsxs16(
+    return /* @__PURE__ */ jsx27("div", { className: "mt-2 pb-2", children: /* @__PURE__ */ jsxs17("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__ */ jsxs17(
         "div",
         {
           className: "flex items-center justify-between gap-3 cursor-pointer",
           onClick: () => setIsExpanded(!isExpanded),
           children: [
-            /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2 min-w-0", children: [
+            /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2 min-w-0", children: [
               /* @__PURE__ */ jsx27(
                 "svg",
                 {
@@ -4691,12 +5192,12 @@ var WildcardToolCallRender = defineToolCallRenderer({
           ]
         }
       ),
-      isExpanded && /* @__PURE__ */ jsxs16("div", { className: "mt-3 grid gap-4", children: [
-        /* @__PURE__ */ jsxs16("div", { children: [
+      isExpanded && /* @__PURE__ */ jsxs17("div", { className: "mt-3 grid gap-4", children: [
+        /* @__PURE__ */ jsxs17("div", { children: [
           /* @__PURE__ */ jsx27("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Arguments" }),
           /* @__PURE__ */ jsx27("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__ */ jsxs16("div", { children: [
+        result !== void 0 && /* @__PURE__ */ jsxs17("div", { children: [
           /* @__PURE__ */ jsx27("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Result" }),
           /* @__PURE__ */ jsx27("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) })
         ] })