ai-design-system 0.1.94 → 0.1.96

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/StoriesBar/StoriesBar.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { StoriesBar, type StoryItem } from "./StoriesBar";
+import { fn } from "@storybook/test";
+
+/**
+ * StoriesBar Composite Stories
+ *
+ * Displays circular story avatar bubbles with status indicators and titles.
+ */
+const meta = {
+  title: "Composites/StoriesBar",
+  component: StoriesBar,
+  tags: ["autodocs"],
+  parameters: { layout: "padded" },
+  args: {
+    onStoryClick: fn(),
+  },
+} satisfies Meta<typeof StoriesBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockStories: StoryItem[] = [
+  {
+    id: "story-1",
+    title: "Devin iOS",
+    status: "ready",
+  },
+  {
+    id: "story-2",
+    title: "Waypoint",
+    status: "ready",
+  },
+  {
+    id: "story-3",
+    title: "Design Sys",
+    status: "generating",
+  },
+  {
+    id: "story-4",
+    title: "Workspace",
+    status: "ready",
+  },
+  {
+    id: "story-5",
+    title: "ZeroOps",
+    status: "draft",
+  },
+];
+
+/**
+ * Default usage with active story
+ */
+export const Default: Story = {
+  args: {
+    activeStoryId: "story-1",
+    stories: mockStories,
+  },
+};
+
+/**
+ * Empty stories bar
+ */
+export const EmptyState: Story = {
+  args: {
+    activeStoryId: null,
+    stories: [],
+  },
+};

package/components/composites/StoriesBar/StoriesBar.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import * as React from "react";
+import { Button } from "@/components/primitives/Button";
+import { Icon } from "@/components/primitives/Icon";
+import { cn } from "@/lib/utils";
+
+export interface StoryItem {
+  id: string;
+  sessionId?: string;
+  title: string;
+  videoTitle?: string;
+  subtitle?: string;
+  icon?: string;
+  time?: string;
+  status?: "ready" | "generating" | "draft";
+  thumbnailUrl?: string;
+  avatarColor?: string;
+  avatarInitials?: string;
+}
+
+export interface StoriesBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  stories: StoryItem[];
+  activeStoryId?: string | null;
+  onStoryClick: (story: StoryItem) => void;
+  defaultIcon?: string;
+}
+
+function getStoryStatusStyle(status?: StoryItem["status"]) {
+  switch (status) {
+    case "generating":
+      return {
+        iconColor: "text-amber-500",
+        ringClass: "ring-2 ring-amber-500 animate-pulse",
+        badgeBg: "bg-amber-500",
+      };
+    case "ready":
+      return {
+        iconColor: "text-emerald-500",
+        ringClass: "ring-1 ring-emerald-500/70 group-hover:ring-emerald-500",
+        badgeBg: "bg-emerald-500",
+      };
+    case "draft":
+    default:
+      return {
+        iconColor: "text-muted-foreground",
+        ringClass: "ring-1 ring-border group-hover:ring-primary/60",
+        badgeBg: "bg-muted-foreground",
+      };
+  }
+}
+
+export const StoriesBar = React.forwardRef<HTMLDivElement, StoriesBarProps>(
+  ({ stories, activeStoryId, onStoryClick, defaultIcon = "clapperboard", className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("w-full border-b shrink-0", className)}
+        data-testid="stories-bar"
+        {...props}
+      >
+        <div className="flex items-center gap-3 overflow-x-auto no-scrollbar scroll-smooth">
+          {stories.map((story) => {
+            const isActive = story.id === activeStoryId;
+            const isGenerating = story.status === "generating";
+            const statusStyle = getStoryStatusStyle(story.status);
+            const iconName = story.icon || defaultIcon;
+
+            return (
+              <Button
+                key={story.id}
+                variant="ghost"
+                onClick={() => onStoryClick(story)}
+                className="flex flex-col items-center gap-1 h-auto p-0 hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-lg cursor-pointer group shrink-0"
+                data-testid={`btn-story-${story.id}`}
+                aria-label={`Open story: ${story.title}`}
+              >
+                <div
+                  className={cn(
+                    "relative w-12 h-12 shrink-0 aspect-square rounded-full transition-transform group-hover:scale-105",
+                    isActive
+                      ? "ring-2 ring-primary ring-offset-2 ring-offset-background"
+                      : statusStyle.ringClass
+                  )}
+                >
+                  <div className="w-full h-full rounded-full flex items-center justify-center border shadow-sm overflow-hidden select-none">
+                    {story.thumbnailUrl ? (
+                      <img
+                        src={story.thumbnailUrl}
+                        alt={story.title}
+                        className="w-full h-full object-cover"
+                      />
+                    ) : (
+                      <Icon
+                        name={iconName}
+                        className={cn("w-5 h-5 transition-colors", statusStyle.iconColor)}
+                      />
+                    )}
+                  </div>
+
+                  {isGenerating ? (
+                    <span className="absolute bottom-0 right-0 flex h-2.5 w-2.5">
+                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-500 opacity-75" />
+                      <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-amber-500" />
+                    </span>
+                  ) : (
+                    <span
+                      className={cn(
+                        "absolute bottom-0 right-0 inline-flex rounded-full h-2.5 w-2.5 ring-2 ring-background",
+                        statusStyle.badgeBg
+                      )}
+                    />
+                  )}
+                </div>
+
+                <span
+                  className={cn(
+                    "text-xs truncate max-w-[58px] text-center",
+                    isActive
+                      ? "font-semibold text-foreground"
+                      : "text-muted-foreground group-hover:text-foreground"
+                  )}
+                  title={story.title}
+                >
+                  {story.title}
+                </span>
+              </Button>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+);
+
+StoriesBar.displayName = "StoriesBar";

package/components/composites/StoriesBar/index.ts

@@ -0,0 +1,2 @@
+export { StoriesBar } from "./StoriesBar";
+export type { StoriesBarProps, StoryItem } from "./StoriesBar";