ai-design-system 0.1.77 → 0.1.78

package/components/blocks/AIConversation/AIConversation.stories.tsx

@@ -127,6 +127,92 @@ export const MultipleAgents: Story = {
   },
 }
 
+export const NestedSubAgents: Story = {
+  args: {
+    messages: [
+      {
+        id: '1',
+        type: 'human',
+        role: 'user',
+        content: 'Generate a 30 second product demo video with motion graphics overlays',
+        avatarSrc: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=32&h=32&fit=crop&crop=face',
+        avatarName: 'User',
+      },
+      {
+        id: '2',
+        type: 'ai',
+        role: 'orchestrator',
+        content: '',
+        avatarSrc: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face',
+        avatarName: 'Coordinator',
+        subAgents: [
+          {
+            id: 'call_00_soED4oref3iyY11T',
+            name: 'task',
+            subAgentName: 'media-generator-agent',
+            input: 'Generate a 30 second product demo video with motion graphics overlays',
+            status: 'active',
+            // Nested children — video-sequencer and motion-graphics are both
+            // dispatched by media-generator-agent (task() calls), and stream
+            // their own tool-call-started/tool-output-delta/tool-finished
+            // events. This is what AIConversation must render one level deep.
+            subAgents: [
+              {
+                id: 'call_00_9LyCOvjRGrApV6II',
+                name: 'task',
+                subAgentName: 'video-sequencer',
+                input: 'Sequence the raw clips into a 30s cut with transitions',
+                output: 'Sequenced 12 clips into a 30s timeline. Exported sequence.json (30069 bytes).',
+                status: 'completed',
+              },
+              {
+                id: 'call_00_pQZBX2VUDWwmKQUz',
+                name: 'task',
+                subAgentName: 'motion-graphics',
+                input: 'Add lower-thirds, logo animation, and title card overlays',
+                output: 'Rendering title card overlay (2 of 4 assets)...',
+                status: 'active',
+              },
+            ],
+          },
+        ],
+        blocks: [
+          { type: 'text', id: 'text-1', text: "I'll generate this using two specialized sub-agents." },
+          {
+            type: 'subAgent',
+            id: 'call_00_soED4oref3iyY11T',
+            subAgent: {
+              id: 'call_00_soED4oref3iyY11T',
+              name: 'task',
+              subAgentName: 'media-generator-agent',
+              input: 'Generate a 30 second product demo video with motion graphics overlays',
+              status: 'active',
+              subAgents: [
+                {
+                  id: 'call_00_9LyCOvjRGrApV6II',
+                  name: 'task',
+                  subAgentName: 'video-sequencer',
+                  input: 'Sequence the raw clips into a 30s cut with transitions',
+                  output: 'Sequenced 12 clips into a 30s timeline. Exported sequence.json (30069 bytes).',
+                  status: 'completed',
+                },
+                {
+                  id: 'call_00_pQZBX2VUDWwmKQUz',
+                  name: 'task',
+                  subAgentName: 'motion-graphics',
+                  input: 'Add lower-thirds, logo animation, and title card overlays',
+                  output: 'Rendering title card overlay (2 of 4 assets)...',
+                  status: 'active',
+                },
+              ],
+            },
+          },
+        ],
+      },
+    ],
+  },
+}
+
 export const Empty: Story = {
   args: {
     messages: [],

package/components/blocks/AIConversation/AIConversation.tsx

@@ -34,6 +34,21 @@ type AIMessageBlock =
   | { type: 'toolCall'; id: string; toolCall: ToolCall }
   | { type: 'subAgent'; id: string; subAgent: SubAgent }
 
+// SpecialistMessage's `subAgents` prop expects string-only `output`, while
+// SubAgent allows structured output — normalize recursively when nesting.
+function toNestedSubAgents(
+  agents?: SubAgent[]
+): { id: string; subAgentName: string; status: SubAgent['status']; input?: string | Record<string, unknown>; output?: string; subAgents?: ReturnType<typeof toNestedSubAgents> }[] | undefined {
+  return agents?.map((a) => ({
+    id: a.id,
+    subAgentName: a.subAgentName,
+    status: a.status,
+    input: a.input,
+    output: typeof a.output === 'string' ? a.output : a.output ? JSON.stringify(a.output) : undefined,
+    subAgents: toNestedSubAgents(a.subAgents),
+  }));
+}
+
 interface AIMessage {
   id: string;
   type: 'human' | 'ai';
@@ -354,6 +369,7 @@ export const AIConversation = React.memo<AIConversationProps>(
                                   content: typeof subAgent.output === 'string' ? subAgent.output : (subAgent.output ? JSON.stringify(subAgent.output) : ''),
                                   status: subAgent.status,
                                   toolCalls: [],
+                                  subAgents: toNestedSubAgents(subAgent.subAgents),
                                 }}
                                 isNested={true}
                               />
@@ -380,6 +396,7 @@ export const AIConversation = React.memo<AIConversationProps>(
                                 content: typeof subAgent.output === 'string' ? subAgent.output : (subAgent.output ? JSON.stringify(subAgent.output) : ''),
                                 status: subAgent.status,
                                 toolCalls: [],
+                                subAgents: toNestedSubAgents(subAgent.subAgents),
                               }}
                               isNested={true}
                             />

package/components/composites/AdjustableLayout/AdjustableLayout.tsx

@@ -60,21 +60,20 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
 
     // Compute default sizes (server-safe — no localStorage access)
     const defaultSizes = React.useMemo(() => {
-      const raw = sections.map(section => section.defaultSize ?? (100 / sections.length))
+      const raw = sections.map((section) => section.defaultSize ?? (100 / sections.length))
       const total = raw.reduce((sum, size) => sum + size, 0)
-      return raw.map(size => (size / total) * 100)
+      return raw.map((size) => (size / total) * 100)
     }, [sections])
 
     const [sizes, setSizes] = React.useState<number[]>(defaultSizes)
 
     // Sync sizes if the number of sections changes (e.g. data loads and new section appears)
+    const prevSectionsLengthRef = React.useRef(sections.length)
     React.useEffect(() => {
-      setSizes((prevSizes) => {
-        if (prevSizes.length !== sections.length) {
-          return defaultSizes;
-        }
-        return prevSizes;
-      });
+      if (prevSectionsLengthRef.current !== sections.length) {
+        prevSectionsLengthRef.current = sections.length
+        setSizes(defaultSizes)
+      }
     }, [sections.length, defaultSizes])
 
     // After hydration, overwrite with persisted sizes if available
@@ -90,8 +89,7 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
       } catch {
         // ignore malformed storage
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [storageKey])
+    }, [storageKey, sections.length])
 
     const [draggingIndex, setDraggingIndex] = React.useState<number | null>(null)
     const [startX, setStartX] = React.useState(0)

package/components/composites/AgentIndicator/AgentIndicator.tsx

@@ -17,6 +17,7 @@ export interface SubAgent {
   input: string | Record<string, unknown>
   output?: string | Record<string, unknown>
   status: "pending" | "active" | "completed" | "error" | "running" | "in_progress"
+  subAgents?: SubAgent[]
 }
 
 export interface AgentIndicatorProps {

package/components/composites/MediaPreview/MediaPreview.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { MediaPreview } from './MediaPreview'
+
+const meta = {
+  title: 'Composites/MediaPreview',
+  component: MediaPreview,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof MediaPreview>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Video: Story = {
+  args: {
+    file: {
+      id: 'video-1',
+      name: 'sample-video.mp4',
+      format: 'mp4',
+      mediaType: 'video/mp4',
+      url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+    },
+  },
+}
+
+export const Audio: Story = {
+  args: {
+    file: {
+      id: 'audio-1',
+      name: 'sample-audio.mp3',
+      format: 'mp3',
+      mediaType: 'audio/mp3',
+      url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
+    },
+  },
+}
+
+export const Image: Story = {
+  args: {
+    file: {
+      id: 'image-1',
+      name: 'sample-image.png',
+      format: 'png',
+      mediaType: 'image/png',
+      url: 'https://picsum.photos/800/600',
+    },
+  },
+}
+
+export const NoUrl: Story = {
+  args: {
+    file: {
+      id: 'file-1',
+      name: 'unknown-media.bin',
+      format: 'bin',
+    },
+  },
+}

package/components/composites/MediaPreview/MediaPreview.tsx

@@ -0,0 +1,186 @@
+/**
+ * MediaPreview Composite Component
+ * 
+ * Renders native preview players and viewers for binary media files
+ * (video, audio, images, documents) within the TextEditor pane.
+ */
+
+import React from 'react'
+import type { DocumentFile } from '@/types/ai-editor/editor'
+import { cn } from '@/lib/utils'
+import { Icon } from '@/components/primitives/Icon'
+
+export interface MediaFileLike {
+  id?: string
+  name?: string
+  format?: 'json' | 'markdown' | string
+  url?: string
+  mediaType?: string
+  isDirty?: boolean
+  lastModified?: number
+}
+
+export interface MediaPreviewProps {
+  file: MediaFileLike
+  className?: string
+}
+
+export function isVideoFile(file: MediaFileLike): boolean {
+  const format = file.format?.toLowerCase() || ''
+  const ext = file.name?.split('.').pop()?.toLowerCase() || ''
+  if (['mp4', 'webm', 'mov', 'mkv', 'avi'].includes(format) || ['mp4', 'webm', 'mov', 'mkv', 'avi'].includes(ext)) return true
+  if (file.mediaType?.startsWith('video/')) return true
+  if (file.url && /\.(mp4|webm|mov|mkv)(\?.*)?$/i.test(file.url)) return true
+  return false
+}
+
+export function isAudioFile(file: MediaFileLike): boolean {
+  const format = file.format?.toLowerCase() || ''
+  const ext = file.name?.split('.').pop()?.toLowerCase() || ''
+  if (['wav', 'mp3', 'ogg', 'm4a', 'flac', 'aac', 'wma'].includes(format) || ['wav', 'mp3', 'ogg', 'm4a', 'flac', 'aac', 'wma'].includes(ext)) return true
+  if (file.mediaType?.startsWith('audio/')) return true
+  if (file.url && /\.(wav|mp3|ogg|m4a|flac|aac)(\?.*)?$/i.test(file.url)) return true
+  return false
+}
+
+export function isImageFile(file: MediaFileLike): boolean {
+  const format = file.format?.toLowerCase() || ''
+  const ext = file.name?.split('.').pop()?.toLowerCase() || ''
+  if (['png', 'jpg', 'jpeg', 'webp', 'gif', 'svg', 'ico', 'bmp'].includes(format) || ['png', 'jpg', 'jpeg', 'webp', 'gif', 'svg', 'ico', 'bmp'].includes(ext)) return true
+  if (file.mediaType?.startsWith('image/')) return true
+  if (file.url && /\.(png|jpg|jpeg|webp|gif|svg)(\?.*)?$/i.test(file.url)) return true
+  return false
+}
+
+export function isPdfFile(file: MediaFileLike): boolean {
+  const format = file.format?.toLowerCase() || ''
+  const ext = file.name?.split('.').pop()?.toLowerCase() || ''
+  return format === 'pdf' || ext === 'pdf' || file.mediaType === 'application/pdf'
+}
+
+export function isMediaFile(file: MediaFileLike): boolean {
+  return isVideoFile(file) || isAudioFile(file) || isImageFile(file) || isPdfFile(file)
+}
+
+export const MediaPreview: React.FC<MediaPreviewProps> = ({ file, className }) => {
+  const isVideo = isVideoFile(file)
+  const isAudio = isAudioFile(file)
+  const isImage = isImageFile(file)
+  const isPdf = isPdfFile(file)
+
+  const mediaUrl = file.url
+
+  if (!mediaUrl) {
+    return (
+      <div className={cn('flex flex-col items-center justify-center h-full p-8 text-center', className)}>
+        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-muted/60 mb-4 text-muted-foreground">
+          {isVideo && <Icon name="film" className="h-8 w-8" />}
+          {isAudio && <Icon name="music" className="h-8 w-8" />}
+          {isImage && <Icon name="image" className="h-8 w-8" />}
+          {isPdf && <Icon name="file-text" className="h-8 w-8" />}
+          {!isVideo && !isAudio && !isImage && !isPdf && <Icon name="alert-circle" className="h-8 w-8" />}
+        </div>
+        <h3 className="text-base font-medium text-foreground mb-1">{file.name || 'Media File'}</h3>
+        <p className="text-sm text-muted-foreground max-w-sm">
+          No direct stream URL is available for this file yet.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('flex flex-col h-full w-full overflow-y-auto p-6 bg-background/50', className)}>
+      {/* Header Info */}
+      <div className="flex items-center justify-between pb-4 mb-6 border-b border-border">
+        <div className="flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
+            {isVideo && <Icon name="film" className="h-5 w-5" />}
+            {isAudio && <Icon name="music" className="h-5 w-5" />}
+            {isImage && <Icon name="image" className="h-5 w-5" />}
+            {isPdf && <Icon name="file-text" className="h-5 w-5" />}
+          </div>
+          <div>
+            <h2 className="text-sm font-semibold text-foreground tracking-tight">{file.name}</h2>
+            <p className="text-xs text-muted-foreground">
+              {file.mediaType || file.format?.toUpperCase() || 'Binary Media'}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <a
+            href={mediaUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            download={file.name}
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border bg-background hover:bg-muted text-foreground transition-colors shadow-sm"
+          >
+            <Icon name="download" className="h-3.5 w-3.5" />
+            Download
+          </a>
+          <a
+            href={mediaUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border bg-background hover:bg-muted text-foreground transition-colors shadow-sm"
+          >
+            <Icon name="external-link" className="h-3.5 w-3.5" />
+            Open
+          </a>
+        </div>
+      </div>
+
+      {/* Main Media Player / Viewer */}
+      <div className="flex-1 flex flex-col items-center justify-center min-h-[300px]">
+        {isVideo && (
+          <div className="w-full max-w-4xl flex flex-col items-center justify-center bg-black/95 rounded-2xl overflow-hidden shadow-lg border border-border/40">
+            <video
+              controls
+              playsInline
+              preload="metadata"
+              src={mediaUrl}
+              className="max-h-[65vh] w-auto max-w-full rounded-2xl"
+            >
+              Your browser does not support the video tag.
+            </video>
+          </div>
+        )}
+
+        {isAudio && (
+          <div className="w-full max-w-xl p-8 rounded-2xl border border-border bg-card shadow-sm flex flex-col items-center gap-6">
+            <div className="flex h-20 w-20 items-center justify-center rounded-full bg-primary/10 text-primary">
+              <Icon name="music" className="h-10 w-10 animate-pulse" />
+            </div>
+            <div className="text-center">
+              <h3 className="text-base font-semibold text-foreground mb-1">{file.name}</h3>
+              <span className="text-xs text-muted-foreground uppercase tracking-wider">Audio Playback</span>
+            </div>
+            <audio controls preload="metadata" src={mediaUrl} className="w-full h-12">
+              Your browser does not support the audio element.
+            </audio>
+          </div>
+        )}
+
+        {isImage && (
+          <div className="flex items-center justify-center w-full max-w-4xl rounded-2xl border border-border bg-muted/20 p-4 shadow-sm">
+            <img
+              src={mediaUrl}
+              alt={file.name}
+              className="max-h-[68vh] w-auto max-w-full rounded-xl object-contain shadow-md"
+            />
+          </div>
+        )}
+
+        {isPdf && (
+          <div className="w-full h-full min-h-[500px] rounded-2xl overflow-hidden border border-border shadow-sm">
+            <iframe
+              src={mediaUrl}
+              title={file.name}
+              className="w-full h-full min-h-[500px]"
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/components/composites/MediaPreview/index.ts

@@ -0,0 +1,9 @@
+export {
+  MediaPreview,
+  isVideoFile,
+  isAudioFile,
+  isImageFile,
+  isPdfFile,
+  isMediaFile,
+} from './MediaPreview'
+export type { MediaPreviewProps, MediaFileLike } from './MediaPreview'

package/components/composites/SpecialistMessage/SpecialistMessage.tsx

@@ -16,6 +16,16 @@ import { Response } from "@/components/composites/response"
  * Uses Tool AI element for consistent styling with tool calls.
  */
 
+// Inline recursive type — avoids circular import with ChatPanel
+type NestedSubAgent = {
+  id: string
+  subAgentName: string
+  status: string
+  input?: string | Record<string, unknown>
+  output?: string
+  subAgents?: NestedSubAgent[]
+}
+
 export interface SpecialistMessageData {
   id: string
   name: string
@@ -23,6 +33,7 @@ export interface SpecialistMessageData {
   icon?: React.ReactNode
   content: string
   toolCalls?: ToolCall[]
+  subAgents?: NestedSubAgent[]
   status: "pending" | "active" | "completed" | "error" | "running" | "in_progress"
   avatarSrc?: string
   avatarName?: string
@@ -65,6 +76,10 @@ export const SpecialistMessage = React.memo<SpecialistMessageProps>(
       () => message.toolCalls !== undefined && message.toolCalls.length > 0,
       [message.toolCalls]
     )
+    const hasSubAgents = React.useMemo(
+      () => message.subAgents !== undefined && message.subAgents.length > 0,
+      [message.subAgents]
+    )
 
     const toolState = React.useMemo(() => {
       switch (message.status) {
@@ -112,7 +127,7 @@ export const SpecialistMessage = React.memo<SpecialistMessageProps>(
               </Response>
             )}
 
-            {/* Tool calls */}
+            {/* Leaf tool calls (read_file, write_file, etc.) */}
             {hasToolCalls && (
               <div className={cn("space-y-2", hasContent && "mt-4")}>
                 {message.toolCalls!.map((toolCall: ToolCall) => (
@@ -120,6 +135,27 @@ export const SpecialistMessage = React.memo<SpecialistMessageProps>(
                 ))}
               </div>
             )}
+
+            {/* Nested subagent cards (video-sequencer, motion-graphics, etc.)
+                Indented with a left border to visually express hierarchy. */}
+            {hasSubAgents && (
+              <div className={cn("space-y-2 pl-3 border-l border-border/50", (hasContent || hasToolCalls) && "mt-4")}>
+                {message.subAgents!.map((sa) => (
+                  <SpecialistMessage
+                    key={sa.id}
+                    isNested={true}
+                    message={{
+                      id: sa.id,
+                      name: sa.subAgentName,
+                      content: typeof sa.output === 'string' ? sa.output : '',
+                      status: sa.status as SpecialistMessageData['status'],
+                      input: sa.input,
+                      subAgents: sa.subAgents,
+                    }}
+                  />
+                ))}
+              </div>
+            )}
           </div>
         </ToolContent>
       </Tool>

package/components/composites/StreamingMarkdown.tsx

@@ -14,6 +14,15 @@ export type StreamingMarkdownProps = ComponentProps<typeof Streamdown> & {
   type?: string;
   status?: string;
 };
+
+const DEFAULT_SHIKI_THEME: NonNullable<StreamingMarkdownProps["shikiTheme"]> = [
+  "vitesse-light",
+  "vitesse-dark",
+];
+const DEFAULT_CONTROLS = {
+  code: true,
+  mermaid: true,
+};
 /**
  * A composite component that wraps Streamdown with all configured plugins.
  * Features should import this component instead of importing Streamdown directly.
@@ -142,11 +151,8 @@ export const StreamingMarkdown = memo(
         )}
         <Streamdown
           remarkPlugins={remarkPlugins || customRemarkPlugins}
-          shikiTheme={["vitesse-light", "vitesse-dark"]}
-          controls={propsControls ?? {
-            code: true,
-            mermaid: true,
-          }}
+          shikiTheme={props.shikiTheme ?? DEFAULT_SHIKI_THEME}
+          controls={propsControls ?? DEFAULT_CONTROLS}
           {...props}
         >
           {content}

package/components/composites/SystemMessage/SystemMessage.tsx

@@ -24,13 +24,61 @@ export interface SystemMessageProps {
   renderContent?: (content: string) => React.ReactNode
 }
 
+function parseSystemMessageContent(content: string): React.ReactNode {
+  try {
+    const parsed = JSON.parse(content)
+    if (parsed && typeof parsed === 'object') {
+      const url = typeof parsed.url === 'string' ? parsed.url : undefined
+      const mediaType = typeof parsed.mediaType === 'string' ? parsed.mediaType : typeof parsed.type === 'string' ? parsed.type : undefined
+      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>
+          )
+        }
+      }
+      if (title) return <span>{title}</span>
+    }
+  } catch {
+    // Plain text content
+  }
+  return <span>{content}</span>
+}
+
 export const SystemMessage = React.memo<SystemMessageProps>(
   ({ message, renderContent }) => {
     if (!message.content || !message.content.trim()) {
       return null;
     }
 
-    const contentNode = renderContent ? renderContent(message.content) : <span>{message.content}</span>;
+    const contentNode = renderContent ? renderContent(message.content) : parseSystemMessageContent(message.content);
     if (!contentNode) {
       return null;
     }

package/components/composites/index.ts

@@ -230,4 +230,6 @@ export type { IconButtonProps } from './IconButton'
 export { AuthCard } from './AuthCard'
 export type { AuthCardProps, AuthMode, SocialProvider } from './AuthCard'
 
-
+// MediaPreview Composite
+export { MediaPreview, isVideoFile, isAudioFile, isImageFile, isPdfFile, isMediaFile } from './MediaPreview'
+export type { MediaPreviewProps, MediaFileLike } from './MediaPreview'