ai-design-system 0.1.94 → 0.1.95

package/components/ai-elements/prompt-input.tsx

@@ -39,6 +39,7 @@ import type { ChatStatus, FileUIPart } from "ai";
 import {
   FileIcon,
   Loader2Icon,
+  MusicIcon,
   SendIcon,
   SquareIcon,
   XIcon,
@@ -248,6 +249,13 @@ export const usePromptInputAttachments = () => {
   return context;
 };
 
+/** Optional variant of usePromptInputAttachments (does NOT throw). */
+export const useOptionalPromptInputAttachments = (): AttachmentsContext | null => {
+  const provider = useOptionalProviderAttachments();
+  const local = useContext(LocalAttachmentsContext);
+  return provider ?? local;
+};
+
 export type PromptInputAttachmentProps = HTMLAttributes<HTMLDivElement> & {
   data: FileUIPart & { id: string };
   className?: string;
@@ -265,6 +273,7 @@ export function PromptInputAttachment({
   const mediaType =
     data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
   const isImage = mediaType === "image";
+  const isAudio = data.mediaType?.startsWith("audio/") ?? false;
 
   // For non-image files, truncate filename to max 20 characters followed by '..'
   const attachmentLabel = filename
@@ -273,6 +282,8 @@ export function PromptInputAttachment({
       : filename
     : isImage
     ? "Image"
+    : isAudio
+    ? "Voice note"
     : "Attachment";
 
   if (isImage) {
@@ -321,7 +332,7 @@ export function PromptInputAttachment({
       <div className="relative size-5 shrink-0">
         <div className="absolute inset-0 flex size-5 items-center justify-center overflow-hidden rounded bg-background transition-opacity group-hover:opacity-0">
           <div className="flex size-5 items-center justify-center text-muted-foreground">
-            <FileIcon className="size-3.5" />
+            {isAudio ? <MusicIcon className="size-3.5" /> : <FileIcon className="size-3.5" />}
           </div>
         </div>
         <Button
@@ -473,11 +484,16 @@ export const PromptInput = ({
       if (!accept || accept.trim() === "") {
         return true;
       }
-      if (accept.includes("image/*")) {
-        return f.type.startsWith("image/");
-      }
-      // NOTE: keep simple; expand as needed
-      return true;
+      // Comma-separated tokens: "image/*", "audio/webm", ".txt", "*".
+      return accept.split(",").some((raw) => {
+        const token = raw.trim();
+        if (!token) return false;
+        if (token === "*" || token === "*/*") return true;
+        if (token.endsWith("/*")) return f.type.startsWith(token.slice(0, -1));
+        if (token.startsWith("."))
+          return f.name.toLowerCase().endsWith(token.toLowerCase());
+        return f.type === token;
+      });
     },
     [accept]
   );
@@ -628,15 +644,26 @@ export const PromptInput = ({
     };
   }, [add, globalDrop]);
 
+  // Latest-ref for the local file list. The unmount cleanup below must NOT
+  // list `files` in its deps: that runs the cleanup after EVERY files change,
+  // revoking the previous list's blob URLs while they are still live — and
+  // submit does `fetch(blobUrl)`, so adding a second attachment (e.g. image
+  // + voice note) made the first file's conversion throw "TypeError: Failed
+  // to fetch" and the message was never submitted. Revoke only on unmount.
+  const filesRef = useRef(files);
+  useEffect(() => {
+    filesRef.current = files;
+  }, [files]);
+
   useEffect(
     () => () => {
       if (!usingProvider) {
-        for (const f of files) {
+        for (const f of filesRef.current) {
           if (f.url) URL.revokeObjectURL(f.url);
         }
       }
     },
-    [usingProvider, files]
+    [usingProvider]
   );
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {

package/components/ai-elements/speech-input.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import { MicIcon } from "lucide-react";
+import { useOptionalPromptInputAttachments } from "@/components/ai-elements/prompt-input";
+import { cn } from "@/lib/utils";
+
+/** Hard cap on a single recording, so a voice note stays far under the 5MB chat-attachment limit. */
+const MAX_RECORDING_MS = 5_000;
+/** Mirrors the SDK's per-attachment cap (chat-attachments.ts). UX-only; the SDK re-checks. */
+const MAX_AUDIO_BYTES = 5 * 1024 * 1024;
+
+export interface SpeechInputProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  /**
+   * Receives the recording only when no attachments context is available.
+   * Inside a PromptInput the recording attaches to the composer as a chip
+   * instead — that is the default path.
+   */
+  onAudioRecorded?: (blob: Blob) => void;
+  className?: string;
+  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link";
+  size?: "default" | "sm" | "lg" | "icon";
+  disabled?: boolean;
+}
+
+/**
+ * SpeechInput — voice-note recorder.
+ *
+ * Records up to MAX_RECORDING_MS from the microphone with MediaRecorder and
+ * attaches the result (audio/webm in Chrome/Firefox, audio/mp4 in Safari) to
+ * the composer's attachments, where it uploads to S3 with the rest of the
+ * message's chat attachments. No live transcription: the message text is typed.
+ */
+export const SpeechInput = React.memo<SpeechInputProps>(
+  ({
+    onAudioRecorded,
+    variant = "ghost",
+    size = "icon",
+    disabled = false,
+    className,
+    ...props
+  }) => {
+    const [isRecording, setIsRecording] = React.useState(false);
+    const [error, setError] = React.useState<string | null>(null);
+    const mediaRecorderRef = React.useRef<MediaRecorder | null>(null);
+    const streamRef = React.useRef<MediaStream | null>(null);
+    const chunksRef = React.useRef<Blob[]>([]);
+    const timerRef = React.useRef<number | null>(null);
+    const disposedRef = React.useRef(false);
+    const attachments = useOptionalPromptInputAttachments();
+
+    const clearTimer = React.useCallback(() => {
+      if (timerRef.current !== null) {
+        window.clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    }, []);
+
+    const releaseStream = React.useCallback(() => {
+      streamRef.current?.getTracks().forEach((track) => track.stop());
+      streamRef.current = null;
+    }, []);
+
+    const finalize = React.useCallback(
+      (blob: Blob) => {
+        if (blob.size === 0) return;
+        if (blob.size > MAX_AUDIO_BYTES) {
+          setError("Recording is too large — record again.");
+          if (process.env.NODE_ENV === "development") {
+            console.warn("[SpeechInput] recording exceeds 5MB after encoding");
+          }
+          return;
+        }
+        // Strip codec parameters: MediaRecorder reports
+        // `audio/webm;codecs=opus`, and every downstream allowlist
+        // (frontend + SDK) matches on the base type.
+        const baseType = (blob.type || "audio/webm").split(";")[0];
+        const subtype = baseType.split("/")[1] ?? "webm";
+        const file = new File([blob], `voice-${Date.now()}.${subtype}`, {
+          type: baseType,
+        });
+        if (attachments) {
+          attachments.add([file]);
+        } else {
+          onAudioRecorded?.(blob);
+        }
+      },
+      [attachments, onAudioRecorded]
+    );
+
+    const stopRecording = React.useCallback(() => {
+      clearTimer();
+      const recorder = mediaRecorderRef.current;
+      if (recorder && recorder.state !== "inactive") {
+        recorder.stop();
+      }
+    }, [clearTimer]);
+
+    const startRecording = React.useCallback(async () => {
+      if (
+        typeof MediaRecorder === "undefined" ||
+        !navigator.mediaDevices?.getUserMedia
+      ) {
+        setError("Voice notes are not supported in this browser.");
+        return;
+      }
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          audio: true,
+        });
+        if (disposedRef.current) {
+          stream.getTracks().forEach((track) => track.stop());
+          return;
+        }
+        streamRef.current = stream;
+        chunksRef.current = [];
+
+        const recorder = new MediaRecorder(stream);
+        recorder.ondataavailable = (event) => {
+          if (event.data && event.data.size > 0) {
+            chunksRef.current.push(event.data);
+          }
+        };
+        recorder.onstop = () => {
+          const blob = new Blob(chunksRef.current, {
+            // Base type only — recorder.mimeType carries `;codecs=…`.
+            type: (recorder.mimeType || "audio/webm").split(";")[0],
+          });
+          chunksRef.current = [];
+          releaseStream();
+          if (disposedRef.current) return;
+          mediaRecorderRef.current = null;
+          setIsRecording(false);
+          finalize(blob);
+        };
+
+        mediaRecorderRef.current = recorder;
+        recorder.start();
+        setError(null);
+        setIsRecording(true);
+        timerRef.current = window.setTimeout(
+          () => stopRecording(),
+          MAX_RECORDING_MS
+        );
+      } catch (err) {
+        releaseStream();
+        mediaRecorderRef.current = null;
+        setIsRecording(false);
+        setError("Microphone access denied.");
+        if (process.env.NODE_ENV === "development") {
+          console.warn("[SpeechInput] failed to start recording:", err);
+        }
+      }
+    }, [finalize, releaseStream, stopRecording]);
+
+    const toggleListening = React.useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isRecording) {
+          stopRecording();
+        } else {
+          void startRecording();
+        }
+      },
+      [isRecording, startRecording, stopRecording]
+    );
+
+    React.useEffect(() => {
+      return () => {
+        disposedRef.current = true;
+        if (timerRef.current !== null) {
+          window.clearTimeout(timerRef.current);
+          timerRef.current = null;
+        }
+        const recorder = mediaRecorderRef.current;
+        if (recorder && recorder.state !== "inactive") {
+          try {
+            recorder.stop();
+          } catch {
+            // already stopped
+          }
+        }
+        releaseStream();
+      };
+    }, [releaseStream]);
+
+    const status = error
+      ? error
+      : isRecording
+        ? `Recording\u2026 (5s max)`
+        : "Record a 5-second voice note";
+
+    return (
+      <Button
+        type="button"
+        variant={variant}
+        size={size}
+        disabled={disabled}
+        onClick={toggleListening}
+        className={cn(
+          "relative h-8 w-8 rounded-full text-muted-foreground hover:text-foreground transition-all duration-200",
+          isRecording &&
+            "bg-red-500/15 text-red-500 hover:bg-red-500/20 animate-pulse",
+          error && "text-red-500",
+          className
+        )}
+        aria-label={isRecording ? "Stop recording" : status}
+        title={status}
+        {...props}
+      >
+        <MicIcon
+          className={cn("h-4 w-4", isRecording && "text-red-500")}
+        />
+        {isRecording && (
+          <span className="absolute -top-0.5 -right-0.5 flex h-2 w-2">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+            <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
+          </span>
+        )}
+      </Button>
+    );
+  }
+);
+
+SpeechInput.displayName = "SpeechInput";

package/components/composites/PromptInput/PromptInput.stories.tsx

@@ -336,3 +336,29 @@ export const WithNearLimitContext: Story = {
   },
 };
 
+/**
+ * With Speech Input
+ * Matches the design with paperclip attachment, speech-input mic, and blue enter button.
+ */
+export const WithSpeechInput: Story = {
+  args: {
+    placeholder: "What would you like to know?",
+    enableSpeech: true,
+    attachIcon: "paperclip",
+    onSubmit: (message) => {
+      console.log("Submitted:", message);
+      alert(`Submitted: ${message.text}`);
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "PromptInput featuring file attachment (paperclip), voice-note SpeechInput (microphone, 5s max), and blue enter return button.",
+      },
+    },
+  },
+};
+
+
+

package/components/composites/PromptInput/PromptInput.tsx

@@ -31,9 +31,11 @@ import {
   ContextReasoningUsage,
   ContextCacheUsage,
 } from "@/components/ai-elements/context";
+import { SpeechInput, type SpeechInputProps } from "@/components/ai-elements/speech-input";
 import type { FormEvent } from "react";
 import { Button } from "@/components/primitives/Button";
 import { Icon } from "@/components/primitives/Icon";
+import { cn } from "@/lib/utils";
 
 export interface PromptInputContextProps {
   usedTokens: number;
@@ -60,6 +62,9 @@ export interface PromptInputBlockProps
   onStop?: () => void;
   context?: PromptInputContextProps | ReactNode;
   tools?: ReactNode;
+  enableSpeech?: boolean;
+  speechProps?: SpeechInputProps;
+  attachIcon?: "paperclip" | "plus";
 }
 
 export const PromptInput = React.memo<PromptInputBlockProps>(
@@ -74,7 +79,10 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
     onStop,
     context,
     tools,
-    accept = "image/*",
+    enableSpeech = true,
+    speechProps,
+    attachIcon = "paperclip",
+    accept = "image/*,audio/*",
     multiple = true,
     maxFiles,
     maxFileSize,
@@ -134,7 +142,13 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
         </PromptInputBody>
         <PromptInputFooter>
           <PromptInputTools>
-            <AttachButton disabled={disabled || loading} />
+            <AttachButton disabled={disabled || loading} icon={attachIcon} />
+            {enableSpeech && (
+              <SpeechInput
+                disabled={disabled || loading}
+                {...speechProps}
+              />
+            )}
             {tools}
             {context ? (
               <PromptInputContextIndicator
@@ -147,7 +161,13 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
             disabled={disabled || (loading && !onStop)}
             status={loading ? (onStop ? "streaming" : "submitted") : undefined}
             onClick={isStopping ? (e: React.MouseEvent) => { e.preventDefault(); onStop?.(); } : undefined}
-          />
+            className={cn(
+              "rounded-lg bg-blue-600 hover:bg-blue-700 text-white transition-colors",
+              isStopping && "bg-transparent hover:bg-accent"
+            )}
+          >
+            {loading ? undefined : <Icon name="corner-down-left" size="sm" />}
+          </PromptInputSubmit>
         </PromptInputFooter>
       </AIPromptInput>
     );
@@ -174,26 +194,35 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
 );
 
 /**
- * The "+" toolbar button — opens the native file picker via the attachments
+ * The attach toolbar button — opens the native file picker via the attachments
  * context. Must render inside <AIPromptInput> (or a PromptInputProvider),
  * since usePromptInputAttachments() reads that context.
  */
-function AttachButton({ disabled }: { disabled?: boolean }) {
+function AttachButton({
+  disabled,
+  icon = "paperclip",
+}: {
+  disabled?: boolean;
+  icon?: "paperclip" | "plus";
+}) {
   const attachments = usePromptInputAttachments();
   return (
     <Button
       variant="ghost"
       size="icon"
-      className="h-8 w-8 rounded-full"
+      className="h-8 w-8 rounded-full text-muted-foreground hover:text-foreground transition-colors"
       type="button"
       disabled={disabled}
       onClick={() => attachments.openFileDialog()}
+      aria-label="Attach files"
+      title="Attach files"
     >
-      <Icon name="plus" size="sm" />
+      <Icon name={icon} size="sm" />
     </Button>
   );
 }
 
+
 /** Renders a preview chip (thumbnail + remove) per attached file. */
 function AttachmentPreviews() {
   return (

package/components/composites/PromptInput/index.ts

@@ -1,6 +1,9 @@
 export { PromptInput } from "./PromptInput";
 export type { PromptInputBlockProps, PromptInputContextProps } from "./PromptInput";
 
+export { SpeechInput } from "@/components/ai-elements/speech-input";
+export type { SpeechInputProps } from "@/components/ai-elements/speech-input";
+
 export {
   PromptInputProvider,
   usePromptInputController,

package/components/composites/SystemMessage/SystemMessage.tsx

@@ -24,6 +24,51 @@ export interface SystemMessageProps {
   renderContent?: (content: string) => React.ReactNode
 }
 
+/**
+ * Renders the player/viewer for a known url + mediaType (video, audio,
+ * image), or null when the pair matches none of them. Shared by
+ * SystemMessage (job notifications) and UserMessage (chat attachments) so
+ * in-chat media rendering lives in one place — an audio voice note gets the
+ * same `<audio controls>` player wherever it appears.
+ */
+export function renderMediaOutput(
+  url: string,
+  mediaType?: string,
+  title?: string
+): React.ReactNode {
+  if (mediaType?.startsWith('audio/')) {
+    return (
+      <div className="flex flex-col items-center gap-2 w-full">
+        {title && <span className="text-xs text-muted-foreground">{title}</span>}
+        <audio controls className="w-full min-w-[240px] max-w-[360px] h-8">
+          <source src={url} type={mediaType} />
+          Your browser does not support the audio element.
+        </audio>
+      </div>
+    )
+  }
+  if (mediaType?.startsWith('video/')) {
+    return (
+      <div className="flex flex-col items-center gap-2">
+        {title && <span className="text-xs text-muted-foreground">{title}</span>}
+        <video controls className="w-full max-w-[360px] rounded-md shadow-sm">
+          <source src={url} type={mediaType} />
+          Your browser does not support the video element.
+        </video>
+      </div>
+    )
+  }
+  if (mediaType?.startsWith('image/')) {
+    return (
+      <div className="flex flex-col items-center gap-2">
+        {title && <span className="text-xs text-muted-foreground">{title}</span>}
+        <img src={url} alt={title || 'Image output'} className="max-w-[360px] rounded-md shadow-sm" />
+      </div>
+    )
+  }
+  return null
+}
+
 function parseSystemMessageContent(content: string): React.ReactNode {
   try {
     const parsed = JSON.parse(content)
@@ -33,36 +78,8 @@ function parseSystemMessageContent(content: string): React.ReactNode {
       const title = typeof parsed.title === 'string' ? parsed.title : typeof parsed.message === 'string' ? parsed.message : undefined
 
       if (url) {
-        if (mediaType?.startsWith('video/') || /\.(mp4|webm|mov)(\?.*)?$/i.test(url)) {
-          return (
-            <div className="flex flex-col items-center gap-2">
-              {title && <span className="text-xs text-muted-foreground">{title}</span>}
-              <video controls className="w-full max-w-[360px] rounded-md shadow-sm">
-                <source src={url} type={mediaType || 'video/mp4'} />
-                Your browser does not support the video element.
-              </video>
-            </div>
-          )
-        }
-        if (mediaType?.startsWith('audio/') || /\.(wav|mp3|ogg|m4a)(\?.*)?$/i.test(url)) {
-          return (
-            <div className="flex flex-col items-center gap-2">
-              {title && <span className="text-xs text-muted-foreground">{title}</span>}
-              <audio controls className="w-full max-w-[360px] h-8">
-                <source src={url} type={mediaType || 'audio/wav'} />
-                Your browser does not support the audio element.
-              </audio>
-            </div>
-          )
-        }
-        if (mediaType?.startsWith('image/') || /\.(png|jpg|jpeg|webp|gif)(\?.*)?$/i.test(url)) {
-          return (
-            <div className="flex flex-col items-center gap-2">
-              {title && <span className="text-xs text-muted-foreground">{title}</span>}
-              <img src={url} alt={title || 'Image output'} className="max-w-[360px] rounded-md shadow-sm" />
-            </div>
-          )
-        }
+        const media = renderMediaOutput(url, mediaType, title)
+        if (media) return media
       }
       if (title) return <span>{title}</span>
     }

package/components/composites/SystemMessage/index.ts

@@ -1,2 +1,2 @@
-export { SystemMessage } from "./SystemMessage"
+export { SystemMessage, renderMediaOutput } from "./SystemMessage"
 export type { SystemMessageProps, SystemMessageData } from "./SystemMessage"

package/components/composites/UserMessage/UserMessage.stories.tsx

@@ -57,3 +57,29 @@ export const ShortQuestion: Story = {
     showAvatar: true,
   },
 }
+
+// 50ms of 8kHz 16-bit mono silence — a real, playable WAV so the audio
+// branch renders an actual player (same data: URI shape a sent voice note
+// has before upload resolution).
+const SILENT_WAV =
+  'data:audio/wav;base64,UklGRkQDAABXQVZFZm10IBAAAAABAAEAQB8AAIA+AAACABAAZGF0YSADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=='
+
+export const WithVoiceNote: Story = {
+  args: {
+    message: {
+      id: '5',
+      content: 'Here is the voice note',
+      avatarSrc: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=32&h=32&fit=crop&crop=face',
+      avatarName: 'User',
+      attachments: [
+        {
+          kind: 'audio',
+          mime: 'audio/wav',
+          filename: 'voice-note.wav',
+          source: { type: 'data', value: SILENT_WAV },
+        },
+      ],
+    },
+    showAvatar: true,
+  },
+}

package/components/composites/UserMessage/UserMessage.tsx

@@ -9,6 +9,7 @@ import {
   MessageContent,
   MessageAvatar,
 } from "@/components/ai-elements/message"
+import { renderMediaOutput } from "@/components/composites/SystemMessage"
 import { cn } from "@/lib/utils"
 
 /**
@@ -66,7 +67,8 @@ export interface UserMessageData {
 
 function UserMessageAttachments({ attachments }: { attachments: UserMessageAttachment[] }) {
   const images = attachments.filter((a) => a.mime.startsWith("image/"))
-  if (images.length === 0) return null
+  const audio = attachments.filter((a) => a.mime.startsWith("audio/"))
+  if (images.length === 0 && audio.length === 0) return null
 
   return (
     <div className="flex flex-wrap justify-end gap-2">
@@ -88,6 +90,18 @@ function UserMessageAttachments({ attachments }: { attachments: UserMessageAttac
           />
         </a>
       ))}
+      {/* Voice notes: the same `<audio controls>` player SystemMessage uses
+          for job notifications — `source.value` works as src for both the
+          optimistic data: URI and the resolved object-store URL, so no
+          branching on source type at render time. */}
+      {audio.map((a, i) => (
+        <div
+          key={a.id ?? `${a.filename ?? "voice-note"}-${i}`}
+          className="shrink-0 rounded-md border border-border p-1.5 w-[280px] sm:w-[320px] max-w-full"
+        >
+          {renderMediaOutput(a.source.value, a.mime)}
+        </div>
+      ))}
     </div>
   )
 }

package/components/composites/index.ts

@@ -227,9 +227,11 @@ export {
   ContextOutputUsage,
   ContextReasoningUsage,
   ContextCacheUsage,
+  SpeechInput,
 } from './PromptInput'
 export type {
   PromptInputBlockProps,
+  SpeechInputProps,
   PromptInputContextProps,
   PromptInputControllerProps,
   AttachmentsContext,