ai-design-system 0.1.60 → 0.1.62

package/components/ai-elements/tool.tsx

@@ -40,7 +40,7 @@ export type ToolProps = ComponentProps<typeof Collapsible>;
 
 export const Tool = ({ className, ...props }: ToolProps) => (
   <Collapsible
-    className={cn("not-prose mb-4 w-full rounded-md border", className)}
+    className={cn("group not-prose mb-4 w-full rounded-md border overflow-hidden", className)}
     {...props}
   />
 );

package/components/blocks/AIConversation/AIConversation.tsx

@@ -267,6 +267,7 @@ export const AIConversation = React.memo<AIConversationProps>(
                           id: subAgent.id,
                           name: subAgent.subAgentName,
                           description: undefined,
+                          input: subAgent.input,
                           content: typeof subAgent.output === 'string' ? subAgent.output : (subAgent.output ? JSON.stringify(subAgent.output) : ''),
                           status: subAgent.status,
                           toolCalls: [],

package/components/blocks/DocumentEditorWithComments/DocumentEditorWithComments.tsx

@@ -26,7 +26,7 @@ export interface DocumentEditorWithCommentsProps {
    * Content format - determines how content prop is interpreted
    * @default 'json'
    */
-  format?: 'json' | 'markdown'
+  format?: 'json' | 'markdown' | string
   /** Array of annotations to display */
   annotations: Annotation[]
   /** ID of currently selected annotation */

package/components/composites/FileTreeExplorer/FileTreeExplorer.tsx

@@ -24,6 +24,7 @@ export interface FileTreeExplorerProps {
   searchPlaceholder?: string
   onCreateClick?: () => void
   createButtonLabel?: string
+  onDownloadClick?: () => void
   headerClassName?: string
   className?: string
 }
@@ -84,6 +85,7 @@ export const FileTreeExplorer = React.memo<FileTreeExplorerProps>(
     searchPlaceholder = "Filter files...",
     onCreateClick,
     createButtonLabel,
+    onDownloadClick,
     headerClassName,
     className,
   }) => {
@@ -145,6 +147,16 @@ export const FileTreeExplorer = React.memo<FileTreeExplorerProps>(
               {createButtonLabel ?? "New"}
             </button>
           ) : null}
+          {onDownloadClick ? (
+            <button
+              type="button"
+              onClick={onDownloadClick}
+              title="Download all files"
+              className="inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            >
+              <Icon name="download" size="sm" />
+            </button>
+          ) : null}
         </div>
         <div className="p-2">
           <FileTree

package/components/composites/SpecialistMessage/SpecialistMessage.tsx

@@ -1,12 +1,10 @@
 import * as React from "react"
 import {
-  Plan,
-  PlanHeader,
-  PlanTitle,
-  PlanDescription,
-  PlanTrigger,
-  PlanContent,
-} from "@/components/ai-elements/plan"
+  Tool,
+  ToolHeader,
+  ToolContent,
+  ToolInput,
+} from "@/components/ai-elements/tool"
 import { ToolCallDisplay, type ToolCall } from "@/components/composites/ToolCallDisplay"
 import { cn } from "@/lib/utils"
 import { Response } from "@/components/composites/response"
@@ -15,7 +13,7 @@ import { Response } from "@/components/composites/response"
  * SpecialistMessage Block
  *
  * A block component for displaying specialist agent messages with optional collapsible content.
- * Uses Plan AI element for consistent styling and optional space-efficient display.
+ * Uses Tool AI element for consistent styling with tool calls.
  */
 
 export interface SpecialistMessageData {
@@ -28,6 +26,7 @@ export interface SpecialistMessageData {
   status: "pending" | "active" | "completed" | "error"
   avatarSrc?: string
   avatarName?: string
+  input?: string | Record<string, unknown>
 }
 
 export interface SpecialistMessageProps {
@@ -56,6 +55,8 @@ export interface SpecialistMessageProps {
  */
 export const SpecialistMessage = React.memo<SpecialistMessageProps>(
   ({ message, isNested = false, defaultOpen = false, collapsible = true }) => {
+    const [isOpen, setIsOpen] = React.useState(collapsible ? defaultOpen : true)
+
     const hasContent = React.useMemo(
       () => message.content && message.content.trim() !== "",
       [message.content]
@@ -65,53 +66,63 @@ export const SpecialistMessage = React.memo<SpecialistMessageProps>(
       [message.toolCalls]
     )
 
-    const description = React.useMemo(() => {
-      if (message.description) return message.description;
-      if (message.status === "active") return "Thinking...";
-      return undefined;
-    }, [message.description, message.status]);
+    const toolState = React.useMemo(() => {
+      switch (message.status) {
+        case "pending":
+          return "input-streaming" as const
+        case "active":
+          return "input-available" as const
+        case "completed":
+          return "output-available" as const
+        case "error":
+          return "output-error" as const
+        default:
+          return "output-available" as const
+      }
+    }, [message.status])
 
     return (
-      <Plan
-        defaultOpen={collapsible ? defaultOpen : true}
-        className={cn(isNested && "ml-8")}
-        isStreaming={message.status === "active"}
+      <Tool
+        open={isOpen}
+        onOpenChange={collapsible ? setIsOpen : undefined}
       >
-        <PlanHeader>
-          <div>
-            <div className="mb-4 flex items-center gap-2">
-              {message.icon && message.icon}
-              <PlanTitle>{message.name}</PlanTitle>
-            </div>
-            {description && (
-              <PlanDescription>{description}</PlanDescription>
+        <ToolHeader
+          title={message.name}
+          type={`tool-${message.name}` as const}
+          state={toolState}
+        />
+
+        <ToolContent>
+          <div className="p-4 pt-0 flex flex-col gap-4">
+            {message.input && (
+              <ToolInput 
+                input={typeof message.input === 'string' ? { task: message.input } : message.input} 
+                className="p-0" 
+              />
             )}
-          </div>
-          {collapsible && <PlanTrigger />}
-        </PlanHeader>
 
-        <PlanContent>
-          {/* Message content */}
-          {hasContent && (
-            <Response
-              className="size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
-              mode={message.status === "active" ? "streaming" : "static"}
-              isAnimating={message.status === "active"}
-            >
-              {message.content}
-            </Response>
-          )}
+            {/* Message content */}
+            {hasContent && (
+              <Response
+                className="size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
+                mode={message.status === "active" ? "streaming" : "static"}
+                isAnimating={message.status === "active"}
+              >
+                {message.content}
+              </Response>
+            )}
 
-          {/* Tool calls */}
-          {hasToolCalls && (
-            <div className={cn("space-y-2", hasContent && "mt-4")}>
-              {message.toolCalls!.map((toolCall: ToolCall) => (
-                <ToolCallDisplay key={toolCall.id} toolCall={toolCall} />
-              ))}
-            </div>
-          )}
-        </PlanContent>
-      </Plan>
+            {/* Tool calls */}
+            {hasToolCalls && (
+              <div className={cn("space-y-2", hasContent && "mt-4")}>
+                {message.toolCalls!.map((toolCall: ToolCall) => (
+                  <ToolCallDisplay key={toolCall.id} toolCall={toolCall} />
+                ))}
+              </div>
+            )}
+          </div>
+        </ToolContent>
+      </Tool>
     )
   }
 )

package/components/features/TextEditor/TextEditor.tsx

@@ -66,7 +66,7 @@ export interface TextEditorSingleProps {
    * 
    * @default 'json'
    */
-  format?: 'json' | 'markdown'
+  format?: 'json' | 'markdown' | string
   /** Array of annotations to display */
   annotations: Annotation[]
   /** ID of currently selected annotation */
@@ -105,6 +105,8 @@ export interface TextEditorMultiTabProps {
   fileTree?: FileTreeNode[]
   /** When true, hides the document tab bar — useful for single-file mode where the file tree provides navigation. */
   hideTabBar?: boolean
+  /** Callback when download all button is clicked in the file tree header */
+  onDownloadAllFiles?: () => void
 }
 
 /**
@@ -185,8 +187,7 @@ export const TextEditor = React.memo<TextEditorProps>(
     const currentDocument = useMemo(() => {
       if (isMultiTab && props.documents) {
         return (
-          props.documents.find((doc) => doc.file.id === props.activeDocumentId) ||
-          props.documents[0]
+          props.documents.find((doc) => doc.file.id === props.activeDocumentId) || null
         )
       }
       return null
@@ -213,7 +214,7 @@ export const TextEditor = React.memo<TextEditorProps>(
     )
     const fileTreeNodes = useMemo(() => {
       if (!isMultiTab) return []
-      
+
       const multiProps = props as TextEditorMultiTabProps
       if (multiProps.fileTree) {
         return multiProps.fileTree
@@ -262,12 +263,15 @@ export const TextEditor = React.memo<TextEditorProps>(
      * Single-document mode
      */
     if (!isMultiTab) {
-      const isMarkdown = props.format === 'markdown'
-      const isJson = props.format === 'json'
-      if (isMarkdown || isJson) {
-        const content = isJson
-          ? `\`\`\`json\n${formatJson(props.content as string)}\n\`\`\``
-          : (props.content as string)
+      const format = props.format || 'markdown'
+      const isMarkdown = format === 'markdown' || format === 'md' || format === 'mdx'
+      const isCode = !isMarkdown && typeof props.content === 'string'
+
+      if (isMarkdown || isCode) {
+        const contentStr = props.content as string
+        const content = isCode
+          ? `\`\`\`${format}\n${format === 'json' ? formatJson(contentStr) : contentStr}\n\`\`\``
+          : contentStr
         return (
           <div className={cn('text-editor p-6 flex flex-col h-screen w-full flex-1', className)}>
             <StreamingMarkdown mode="streaming">
@@ -297,7 +301,7 @@ export const TextEditor = React.memo<TextEditorProps>(
     /**
      * Multi-tab mode
      */
-    const { hideTabBar } = props as TextEditorMultiTabProps
+    const { hideTabBar, onDownloadAllFiles } = props as TextEditorMultiTabProps
 
     let editorPane: React.ReactNode
 
@@ -314,14 +318,15 @@ export const TextEditor = React.memo<TextEditorProps>(
             />
           )}
           <div className="flex-1 flex items-center justify-center p-6 text-muted-foreground">
-            No documents open
+            No documents selected
           </div>
         </div>
       )
     } else {
-      const isMarkdownMulti = currentDocument.file.format === 'markdown'
-      const isJsonMulti = currentDocument.file.format === 'json'
-      const renderAsStreamdown = isMarkdownMulti || isJsonMulti
+      const format = currentDocument.file.format || 'markdown'
+      const isMarkdownMulti = format === 'markdown' || format === 'md' || format === 'mdx'
+      const isCodeMulti = !isMarkdownMulti && typeof currentDocument.content === 'string'
+      const renderAsStreamdown = isMarkdownMulti || isCodeMulti
 
       editorPane = (
         <div className="text-editor flex flex-col h-full w-full">
@@ -342,8 +347,8 @@ export const TextEditor = React.memo<TextEditorProps>(
                   isAnimating
                   className="[&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
                 >
-                  {isJsonMulti
-                    ? `\`\`\`json\n${formatJson(currentDocument.content as string)}\n\`\`\``
+                  {isCodeMulti
+                    ? `\`\`\`${format}\n${format === 'json' ? formatJson(currentDocument.content as string) : currentDocument.content}\n\`\`\``
                     : (currentDocument.content as string)}
                 </StreamingMarkdown>
               </div>
@@ -384,6 +389,7 @@ export const TextEditor = React.memo<TextEditorProps>(
                 tree={fileTreeNodes}
                 selectedPath={props.activeDocumentId}
                 onSelect={props.onTabSelect}
+                onDownloadClick={onDownloadAllFiles}
               />
             ),
           },

package/components/features/TextEditor/useTextEditor.mock.ts

@@ -16,7 +16,7 @@ interface DocumentFile {
   id: string
   name: string
   isDirty: boolean
-  format?: 'json' | 'markdown'
+  format?: 'json' | 'markdown' | string
   lastModified: number
 }