@copilotkitnext/react 1.51.2 → 1.51.3-next.0

package/dist/index.js

@@ -104,7 +104,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 = (0, import_react.createContext)(null);
 var CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, isModalDefaultOpen }) => {
@@ -457,28 +458,126 @@ var AudioRecorderError = class extends Error {
 var CopilotChatAudioRecorder = (0, import_react2.forwardRef)((props, ref) => {
   const { className, ...divProps } = props;
   const canvasRef = (0, import_react2.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] = (0, import_react2.useState)("idle");
+  const mediaRecorderRef = (0, import_react2.useRef)(null);
+  const audioChunksRef = (0, import_react2.useRef)([]);
+  const streamRef = (0, import_react2.useRef)(null);
+  const analyserRef = (0, import_react2.useRef)(null);
+  const audioContextRef = (0, import_react2.useRef)(null);
+  const animationIdRef = (0, import_react2.useRef)(null);
+  const amplitudeHistoryRef = (0, import_react2.useRef)([]);
+  const frameCountRef = (0, import_react2.useRef)(0);
+  const scrollOffsetRef = (0, import_react2.useRef)(0);
+  const smoothedAmplitudeRef = (0, import_react2.useRef)(0);
+  const fadeOpacityRef = (0, import_react2.useRef)(0);
+  const cleanup = (0, import_react2.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 = (0, import_react2.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 = (0, import_react2.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);
   };
   (0, import_react2.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;
@@ -486,64 +585,87 @@ var CopilotChatAudioRecorder = (0, import_react2.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]);
+  (0, import_react2.useEffect)(() => {
+    return cleanup;
+  }, [cleanup]);
   (0, import_react2.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__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_tailwind_merge2.twMerge)("h-[44px] w-full px-5", className), ...divProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "canvas",
-    {
-      ref: canvasRef,
-      className: "w-full h-full",
-      style: { imageRendering: "pixelated" }
-    }
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_tailwind_merge2.twMerge)("w-full py-3 px-5", className), ...divProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("canvas", { ref: canvasRef, className: "block w-full h-[26px]" }) });
 });
-CopilotChatAudioRecorder.displayName = "WebAudioRecorder";
+CopilotChatAudioRecorder.displayName = "CopilotChatAudioRecorder";
 
 // src/lib/slots.tsx
 var import_react3 = __toESM(require("react"));
@@ -611,6 +733,7 @@ function CopilotChatInput({
   onStartTranscribe,
   onCancelTranscribe,
   onFinishTranscribe,
+  onFinishTranscribeWithAudio,
   onAddFile,
   onChange,
   value,
@@ -915,8 +1038,22 @@ function CopilotChatInput({
   const BoundCancelTranscribeButton = renderSlot(cancelTranscribeButton, CopilotChatInput.CancelTranscribeButton, {
     onClick: onCancelTranscribe
   });
+  const handleFinishTranscribe = (0, import_react4.useCallback)(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",
@@ -1216,10 +1353,10 @@ function CopilotChatInput({
               "div",
               {
                 className: (0, import_tailwind_merge3.twMerge)(
-                  "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__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                children: mode === "transcribe" ? BoundAudioRecorder : mode === "processing" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex w-full items-center justify-center py-3 px-5", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.Loader2, { className: "size-[26px] animate-spin text-muted-foreground" }) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
                   BoundTextArea,
                   slashMenu
                 ] })
@@ -2021,6 +2158,7 @@ var CopilotKitProvider = ({
   children,
   runtimeUrl,
   headers = {},
+  credentials,
   publicApiKey,
   publicLicenseKey,
   properties = {},
@@ -2166,6 +2304,7 @@ var CopilotKitProvider = ({
       runtimeUrl: chatApiEndpoint,
       runtimeTransport: useSingleEndpoint ? "single" : "rest",
       headers: mergedHeaders,
+      credentials,
       properties,
       agents__unsafe_dev_only: agents,
       tools: allTools,
@@ -2214,9 +2353,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__ */ (0, import_jsx_runtime9.jsxs)(
     CopilotKitContext.Provider,
     {
@@ -3767,6 +3907,7 @@ function CopilotChatView({
   inputContainer,
   disclaimer,
   suggestionView,
+  welcomeScreen,
   messages = [],
   autoScroll = true,
   inputProps,
@@ -3846,6 +3987,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__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, {})
+      }
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: (0, import_tailwind_merge7.twMerge)("relative h-full", className), ...props, children: BoundWelcomeScreen });
+  }
   if (children) {
     return children({
       messageView: BoundMessageView,
@@ -4025,25 +4181,188 @@ function CopilotChatView({
       }
     );
   };
+  CopilotChatView2.WelcomeMessage = ({
+    className,
+    ...props
+  }) => {
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "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__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: children({
+        welcomeMessage: BoundWelcomeMessage,
+        input,
+        suggestionView,
+        className,
+        ...props
+      }) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "div",
+      {
+        className: cn(
+          "h-full flex flex-col items-center justify-center px-4",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "w-full max-w-3xl flex flex-col items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mb-6", children: BoundWelcomeMessage }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-full", children: input }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mt-4 flex justify-center", children: suggestionView })
+        ] })
+      }
+    );
+  };
 })(CopilotChatView || (CopilotChatView = {}));
 var CopilotChatView_default = CopilotChatView;
 
 // src/components/chat/CopilotChat.tsx
-var import_shared8 = require("@copilotkitnext/shared");
+var import_shared9 = require("@copilotkitnext/shared");
 var import_react25 = require("react");
 var import_ts_deepmerge = require("ts-deepmerge");
 var import_client = require("@ag-ui/client");
+
+// src/lib/transcription-client.ts
+var import_shared8 = require("@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: import_shared8.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: import_shared8.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: import_shared8.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: import_shared8.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
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen, ...props }) {
   const existingConfig = useCopilotChatConfiguration();
-  const resolvedAgentId = agentId ?? existingConfig?.agentId ?? import_shared8.DEFAULT_AGENT_ID;
+  const resolvedAgentId = agentId ?? existingConfig?.agentId ?? import_shared9.DEFAULT_AGENT_ID;
   const resolvedThreadId = (0, import_react25.useMemo)(
-    () => threadId ?? existingConfig?.threadId ?? (0, import_shared8.randomUUID)(),
+    () => threadId ?? existingConfig?.threadId ?? (0, import_shared9.randomUUID)(),
     [threadId, existingConfig?.threadId]
   );
   const { agent } = useAgent({ agentId: resolvedAgentId });
   const { copilotkit } = useCopilotKit();
   const { suggestions: autoSuggestions } = useSuggestions({ agentId: resolvedAgentId });
+  const [transcribeMode, setTranscribeMode] = (0, import_react25.useState)("input");
+  const [inputValue, setInputValue] = (0, import_react25.useState)("");
+  const [transcriptionError, setTranscriptionError] = (0, import_react25.useState)(null);
+  const [isTranscribing, setIsTranscribing] = (0, import_react25.useState)(false);
+  const isTranscriptionEnabled = copilotkit.audioFileTranscriptionEnabled;
+  const isMediaRecorderSupported = typeof window !== "undefined" && typeof MediaRecorder !== "undefined";
   const {
     inputProps: providedInputProps,
     messageView: providedMessageView,
@@ -4069,10 +4388,11 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
   const onSubmitInput = (0, import_react25.useCallback)(
     async (value) => {
       agent.addMessage({
-        id: (0, import_shared8.randomUUID)(),
+        id: (0, import_shared9.randomUUID)(),
         role: "user",
         content: value
       });
+      setInputValue("");
       try {
         await copilotkit.runAgent({ agent });
       } catch (error) {
@@ -4084,7 +4404,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
   const handleSelectSuggestion = (0, import_react25.useCallback)(
     async (suggestion) => {
       agent.addMessage({
-        id: (0, import_shared8.randomUUID)(),
+        id: (0, import_shared9.randomUUID)(),
         role: "user",
         content: suggestion.message
       });
@@ -4108,6 +4428,75 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
       }
     }
   }, [agent, copilotkit]);
+  const handleStartTranscribe = (0, import_react25.useCallback)(() => {
+    setTranscriptionError(null);
+    setTranscribeMode("transcribe");
+  }, []);
+  const handleCancelTranscribe = (0, import_react25.useCallback)(() => {
+    setTranscriptionError(null);
+    setTranscribeMode("input");
+  }, []);
+  const handleFinishTranscribe = (0, import_react25.useCallback)(() => {
+    setTranscribeMode("input");
+  }, []);
+  const handleFinishTranscribeWithAudio = (0, import_react25.useCallback)(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 import_shared9.TranscriptionErrorCode.RATE_LIMITED:
+            setTranscriptionError("Too many requests. Please wait a moment.");
+            break;
+          case import_shared9.TranscriptionErrorCode.AUTH_FAILED:
+            setTranscriptionError("Authentication error. Please check your configuration.");
+            break;
+          case import_shared9.TranscriptionErrorCode.AUDIO_TOO_LONG:
+            setTranscriptionError("Recording is too long. Please try a shorter recording.");
+            break;
+          case import_shared9.TranscriptionErrorCode.AUDIO_TOO_SHORT:
+            setTranscriptionError("Recording is too short. Please try again.");
+            break;
+          case import_shared9.TranscriptionErrorCode.INVALID_AUDIO_FORMAT:
+            setTranscriptionError("Audio format not supported.");
+            break;
+          case import_shared9.TranscriptionErrorCode.SERVICE_NOT_CONFIGURED:
+            setTranscriptionError("Transcription service is not available.");
+            break;
+          case import_shared9.TranscriptionErrorCode.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]);
+  (0, import_react25.useEffect)(() => {
+    if (transcriptionError) {
+      const timer = setTimeout(() => {
+        setTranscriptionError(null);
+      }, 5e3);
+      return () => clearTimeout(timer);
+    }
+  }, [transcriptionError]);
   const mergedProps = (0, import_ts_deepmerge.merge)(
     {
       isRunning: agent.isRunning,
@@ -4124,27 +4513,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 = (0, import_react25.useMemo)(() => [...agent.messages], [JSON.stringify(agent.messages)]);
   const finalProps = (0, import_ts_deepmerge.merge)(mergedProps, {
     messages,
     inputProps: finalInputProps
   });
   const RenderedChatView = renderSlot(chatView, CopilotChatView, finalProps);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     CopilotChatConfigurationProvider,
     {
       agentId: resolvedAgentId,
       threadId: resolvedThreadId,
       labels,
       isModalDefaultOpen,
-      children: RenderedChatView
+      children: [
+        transcriptionError && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "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
+      ]
     }
   );
 }
@@ -4451,6 +4869,45 @@ 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__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: children({
+        welcomeMessage: BoundWelcomeMessage,
+        input,
+        suggestionView,
+        className,
+        ...props
+      }) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      "div",
+      {
+        className: cn("h-full flex flex-col", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 flex flex-col items-center justify-center px-4", children: BoundWelcomeMessage }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "px-8 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "max-w-3xl mx-auto", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mb-4 flex justify-center", children: suggestionView }),
+            input
+          ] }) })
+        ]
+      }
+    );
+  };
+})(CopilotSidebarView || (CopilotSidebarView = {}));
 
 // src/components/chat/CopilotPopupView.tsx
 var import_react29 = require("react");
@@ -4610,6 +5067,46 @@ function CopilotPopupView({
   ] });
 }
 CopilotPopupView.displayName = "CopilotPopupView";
+((CopilotPopupView2) => {
+  CopilotPopupView2.WelcomeScreen = ({
+    welcomeMessage,
+    input,
+    suggestionView,
+    className,
+    children,
+    ...props
+  }) => {
+    const BoundWelcomeMessage = renderSlot(
+      welcomeMessage,
+      CopilotChatView_default.WelcomeMessage,
+      {}
+    );
+    if (children) {
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: children({
+        welcomeMessage: BoundWelcomeMessage,
+        input,
+        suggestionView,
+        className,
+        ...props
+      }) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      "div",
+      {
+        className: cn("h-full flex flex-col", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex-1 flex flex-col items-center justify-center px-4", children: BoundWelcomeMessage }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "px-6 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "max-w-3xl mx-auto", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mb-4 flex justify-center", children: suggestionView }),
+            input
+          ] }) })
+        ]
+      }
+    );
+  };
+})(CopilotPopupView || (CopilotPopupView = {}));
+var CopilotPopupView_default = CopilotPopupView;
 
 // src/components/chat/CopilotSidebar.tsx
 var import_react30 = require("react");
@@ -4632,6 +5129,7 @@ function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     CopilotChat,
     {
+      welcomeScreen: CopilotSidebarView.WelcomeScreen,
       ...chatProps,
       chatView: SidebarViewOverride,
       isModalDefaultOpen: defaultOpen
@@ -4661,7 +5159,7 @@ function CopilotPopup({
         ...restProps
       } = viewProps;
       return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        CopilotPopupView,
+        CopilotPopupView_default,
         {
           ...restProps,
           header: header ?? viewHeader,
@@ -4676,6 +5174,7 @@ function CopilotPopup({
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     CopilotChat,
     {
+      welcomeScreen: CopilotPopupView_default.WelcomeScreen,
       ...chatProps,
       chatView: PopupViewOverride,
       isModalDefaultOpen: defaultOpen