ai-design-system 0.1.45 → 0.1.46

package/components/ai-elements/code-block.tsx

@@ -110,12 +110,12 @@ export const CodeBlock = ({
       >
         <div className="relative">
           <div
-            className="overflow-hidden dark:hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+            className="overflow-x-auto overflow-y-hidden dark:hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
             // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
             dangerouslySetInnerHTML={{ __html: html }}
           />
           <div
-            className="hidden overflow-hidden dark:block [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+            className="hidden overflow-x-auto overflow-y-hidden dark:block [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
             // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
             dangerouslySetInnerHTML={{ __html: darkHtml }}
           />

package/components/ai-elements/message.tsx

@@ -16,7 +16,7 @@ export const Message = ({ className, from, ...props }: MessageProps) => (
   <div
     className={cn(
       "group flex w-full items-start gap-2 py-2",
-      from === "user" ? "is-user flex-row-reverse" : "is-assistant bg-muted/50 -mx-4 px-4",
+      from === "user" ? "is-user flex-row-reverse" : "is-assistant",
       className
     )}
     {...props}
@@ -24,7 +24,7 @@ export const Message = ({ className, from, ...props }: MessageProps) => (
 );
 
 const messageContentVariants = cva(
-  "is-user:dark flex flex-col gap-2 overflow-hidden rounded-lg text-sm group-[.is-user]:ml-auto",
+  "is-user:dark flex flex-col gap-2 overflow-hidden rounded-lg text-sm group-[.is-user]:ml-auto min-w-0",
   {
     variants: {
       variant: {
@@ -78,3 +78,11 @@ export const MessageAvatar = ({
     <AvatarFallback>{name?.slice(0, 2) || "ME"}</AvatarFallback>
   </Avatar>
 );
+
+export const MessageTypingIndicator = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex items-center space-x-1 py-1.5 px-1 h-[24px]", className)} {...props}>
+    <div className="w-1.5 h-1.5 bg-current rounded-full animate-bounce [animation-delay:-0.3s]"></div>
+    <div className="w-1.5 h-1.5 bg-current rounded-full animate-bounce [animation-delay:-0.15s]"></div>
+    <div className="w-1.5 h-1.5 bg-current rounded-full animate-bounce"></div>
+  </div>
+);

package/components/blocks/AIConversation/AIConversation.tsx

@@ -11,6 +11,7 @@ import { UserMessage } from "@/components/composites/UserMessage"
 import { SpecialistMessage } from "@/components/composites/SpecialistMessage"
 import { OrchestratorMessage } from "@/components/composites/OrchestratorMessage"
 import { ToolCallDisplay } from "@/components/composites/ToolCallDisplay"
+import { ApprovalCard } from "@/components/composites/ApprovalCard"
 
 /**
  * AIConversation Section
@@ -31,6 +32,7 @@ interface AIMessage {
   avatarName?: string;
   toolCalls?: ToolCall[];
   subAgents?: SubAgent[];
+  isLoading?: boolean;
 }
 
 export interface AIConversationProps
@@ -114,11 +116,17 @@ export const AIConversation = React.memo<AIConversationProps>(
             const subAgents = message.subAgents || []
 
             // Filter tool calls that aren't "task" type (those become sub-agents)
+            // Also completely hide "ask_user" and "ask_question" tools so they are ONLY rendered in the prompt input area
             const directToolCalls =
               message.toolCalls?.filter(
-                (tc) => tc.name !== "task"
+                (tc) => tc.name !== "task" && tc.name !== "ask_user"
               ) || []
 
+            const hasContent = message.content && message.content.trim() !== ""
+            if (!hasContent && directToolCalls.length === 0 && subAgents.length === 0 && !message.isLoading) {
+              return null;
+            }
+
             return (
               <OrchestratorMessage
                 key={message.id}
@@ -127,6 +135,7 @@ export const AIConversation = React.memo<AIConversationProps>(
                   content: message.content,
                   avatarSrc: message.avatarSrc,
                   avatarName: message.avatarName,
+                  isLoading: message.isLoading,
                 }}
                 showAvatar={showAvatars}
               >
@@ -143,7 +152,7 @@ export const AIConversation = React.memo<AIConversationProps>(
                       id: subAgent.id,
                       name: subAgent.subAgentName,
                       description: undefined,
-                      content: `**Task:** ${typeof subAgent.input === 'string' ? subAgent.input : JSON.stringify(subAgent.input)}${subAgent.output ? `\n\n**Output:** ${typeof subAgent.output === 'string' ? subAgent.output : JSON.stringify(subAgent.output)}` : ''}`,
+                      content: typeof subAgent.output === 'string' ? subAgent.output : (subAgent.output ? JSON.stringify(subAgent.output) : ''),
                       status: subAgent.status,
                       toolCalls: [],
                     }}

package/components/blocks/SectionLayout/SectionLayout.tsx

@@ -28,11 +28,11 @@ export const SectionLayout = React.memo<SectionLayoutProps>(
       ...section,
       resizable,
       content: (
-        <div className="h-full min-h-0 flex flex-col overflow-hidden">
+        <div className="h-full min-h-0 flex flex-col overflow-auto">
           {section.header && (
             <AppHeader {...section.header} />
           )}
-          <div className="min-h-0 flex-1 overflow-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
+          <div className="min-h-0 flex-1 overflow-hidden">
             {section.content}
           </div>
         </div>

package/components/composites/OrchestratorMessage/OrchestratorMessage.tsx

@@ -3,6 +3,7 @@ import {
   Message,
   MessageContent,
   MessageAvatar,
+  MessageTypingIndicator,
 } from "@/components/ai-elements/message"
 
 /**
@@ -17,6 +18,7 @@ export interface OrchestratorMessageData {
   content: string
   avatarSrc?: string
   avatarName?: string
+  isLoading?: boolean
 }
 
 export interface OrchestratorMessageProps {
@@ -53,9 +55,13 @@ export const OrchestratorMessage = React.memo<OrchestratorMessageProps>(
           />
         )}
 
-        <div className="flex-1">
+        <div className="flex-1 min-w-0">
           {/* Orchestrator's message content */}
-          {hasContent && (
+          {message.isLoading ? (
+            <MessageContent variant="contained" className="w-fit pr-6">
+              <MessageTypingIndicator />
+            </MessageContent>
+          ) : hasContent && (
             <MessageContent variant="contained">
               {message.content}
             </MessageContent>

package/components/composites/SpecialistMessage/SpecialistMessage.tsx

@@ -9,6 +9,7 @@ import {
 } from "@/components/ai-elements/plan"
 import { ToolCallDisplay, type ToolCall } from "@/components/composites/ToolCallDisplay"
 import { cn } from "@/lib/utils"
+import { Streamdown } from "streamdown"
 
 /**
  * SpecialistMessage Block
@@ -85,9 +86,12 @@ export const SpecialistMessage = React.memo<SpecialistMessageProps>(
         <PlanContent>
           {/* Message content */}
           {hasContent && (
-            <div className="prose prose-sm dark:prose-invert max-w-none">
+            <Streamdown
+              className="size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
+              mode="static"
+            >
               {message.content}
-            </div>
+            </Streamdown>
           )}
 
           {/* Tool calls */}

package/components/features/AIDocEditor/AIDocEditor.tsx

@@ -38,6 +38,7 @@ import { DocumentTabBar } from '@/components/composites/DocumentTabBar'
 import { cn } from '@/lib/utils'
 import type { JSONContent } from '@tiptap/core'
 import type { Annotation, User } from '@/types/ai-editor/annotations'
+import { Streamdown } from 'streamdown'
 
 interface DocumentWithAnnotations {
   file: { id: string; name: string; isDirty?: boolean; format?: 'json' | 'markdown' | string; lastModified?: number }
@@ -145,6 +146,7 @@ function isMultiTabMode(props: AIDocEditorProps): props is AIDocEditorMultiTabPr
  * - Support for comments, suggestions, and block additions
  * - Controlled component pattern (all state managed by parent)
  * - Backward-compatible with single-document consumers
+ * - Markdown content rendered via Streamdown for proper formatting
  * 
  * Note: The refinement panel (right sidebar with Accept All/Reject All) is a
  * separate component in the parent application, not part of this feature.
@@ -156,7 +158,7 @@ export const AIDocEditor = React.memo<AIDocEditorProps>(
       mode,
       onAnnotationAdd,
       onAnnotationUpdate,
-      onAnnotationDelete: _onAnnotationDelete, // Callback for consumers; passed through on demand
+      onAnnotationDelete: _onAnnotationDelete,
       className,
     } = props
 
@@ -199,6 +201,16 @@ export const AIDocEditor = React.memo<AIDocEditorProps>(
      * Single-document mode
      */
     if (!isMultiTab) {
+      const isMarkdown = props.format === 'markdown'
+      if (isMarkdown) {
+        return (
+          <div className={cn('ai-doc-editor p-6', className)}>
+            <Streamdown mode="streaming">
+              {props.content as string}
+            </Streamdown>
+          </div>
+        )
+      }
       return (
         <DocumentEditorWithComments
           content={props.content}
@@ -234,6 +246,8 @@ export const AIDocEditor = React.memo<AIDocEditorProps>(
       )
     }
 
+    const isMarkdown = currentDocument.file.format === 'markdown'
+
     return (
       <div className={cn('ai-doc-editor flex flex-col h-full', className)}>
         <DocumentTabBar
@@ -243,17 +257,29 @@ export const AIDocEditor = React.memo<AIDocEditorProps>(
           onTabClose={props.onTabClose}
         />
         <div className="flex-1 overflow-auto">
-          <DocumentEditorWithComments
-            content={currentDocument.content}
-            format={currentDocument.file.format as 'json' | 'markdown' | undefined}
-            annotations={currentDocument.annotations}
-            currentUserId={currentUser.id}
-            currentUserName={currentUser.name}
-            readOnly={mode === 'readonly'}
-            onAnnotationAdd={handleAnnotationAdd}
-            onAnnotationUpdate={handleAnnotationUpdate}
-            className="p-6"
-          />
+          {isMarkdown ? (
+            <div className="p-6">
+              <Streamdown
+                mode="streaming"
+                isAnimating
+                className="[&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
+              >
+                {currentDocument.content as string}
+              </Streamdown>
+            </div>
+          ) : (
+            <DocumentEditorWithComments
+              content={currentDocument.content}
+              format={currentDocument.file.format as 'json' | 'markdown' | undefined}
+              annotations={currentDocument.annotations}
+              currentUserId={currentUser.id}
+              currentUserName={currentUser.name}
+              readOnly={mode === 'readonly'}
+              onAnnotationAdd={handleAnnotationAdd}
+              onAnnotationUpdate={handleAnnotationUpdate}
+              className="p-6"
+            />
+          )}
         </div>
       </div>
     )

package/components/features/RefinementPanel/RefinementPanel.mocks.ts

@@ -105,6 +105,62 @@ export const reviewStateMessages: RefinementMessage[] = [
       },
     ],
   },
+  {
+    id: '3',
+    type: 'human',
+    role: 'user',
+    content: 'Can we also make sure the colors meet the contrast requirements for dark mode?',
+    avatarSrc:
+      'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=32&h=32&fit=crop&crop=face',
+    avatarName: 'User',
+  },
+  {
+    id: '4',
+    type: 'ai',
+    role: 'orchestrator',
+    content: 'Absolutely. I will have the accessibility specialist double-check the color contrast ratios in both light and dark mode.',
+    avatarSrc:
+      'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face',
+    avatarName: 'Coordinator',
+    subAgents: [
+      {
+        id: 'agent_3',
+        name: 'accessibility-specialist',
+        subAgentName: 'a11y-agent',
+        input: 'Verify color contrast ratios for the new Button styles in both light and dark mode themes according to WCAG 2.1 AA.',
+        output: 'Contrast ratios checked: Primary button passes at 4.5:1 on light mode, but fails on dark mode (3.2:1). Adjusting the primary-dark token to #66b2ff to meet the 4.5:1 requirement.',
+        status: 'completed',
+      }
+    ]
+  },
+  {
+    id: '5',
+    type: 'human',
+    role: 'user',
+    content: 'Perfect! How about the hover state? Does it also pass?',
+    avatarSrc:
+      'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=32&h=32&fit=crop&crop=face',
+    avatarName: 'User',
+  },
+  {
+    id: '6',
+    type: 'ai',
+    role: 'orchestrator',
+    content: 'Good catch. Let me check the hover and active states for both themes.',
+    avatarSrc:
+      'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face',
+    avatarName: 'Coordinator',
+    subAgents: [
+      {
+        id: 'agent_4',
+        name: 'accessibility-specialist',
+        subAgentName: 'a11y-agent',
+        input: 'Verify color contrast for hover and active states.',
+        output: 'Hover states pass contrast checks. The active state requires a slight tweak for the outline variant. Applied fixes.',
+        status: 'completed',
+      }
+    ]
+  },
 ]
 
 /**
@@ -114,7 +170,7 @@ export const reviewStateMessages: RefinementMessage[] = [
  * Sample single-question approval request (HITL interactive question)
  */
 export const approvalQuestionRequest: ActionRequest = {
-  name: "ask_question",
+  name: "ask_user",
   description: "The agent needs your input to determine the workflow order",
   args: {
     question: "Where in the workflow timeline should the SEO review step run?",
@@ -130,7 +186,7 @@ export const approvalQuestionRequest: ActionRequest = {
  * Sample multi-question approval request (HITL poll with multiple questions)
  */
 export const approvalMultiQuestionRequest: ActionRequest = {
-  name: "ask_question",
+  name: "ask_user",
   description: "The agent needs your preferences to proceed",
   args: {
     questions: [

package/components/features/RefinementPanel/RefinementPanel.tsx

@@ -35,6 +35,7 @@ export interface RefinementMessage {
   avatarName?: string;
   toolCalls?: ToolCall[];
   subAgents?: SubAgent[];
+  isLoading?: boolean;
 }
 
 /**
@@ -157,12 +158,47 @@ export const RefinementPanel = React.memo<RefinementPanelProps>(
       onApprovalReject?.(reason);
     }, [onApprovalReject]);
 
+    // Extract pending ask_user tool call from messages
+    const pendingAskUser = React.useMemo(() => {
+      // Look from the end
+      for (let i = messages.length - 1; i >= 0; i--) {
+        const msg = messages[i];
+        if (msg.toolCalls) {
+          const askUserTc = msg.toolCalls.find(tc => tc.name === "ask_user" && tc.status === "pending");
+          if (askUserTc) {
+            return askUserTc;
+          }
+        }
+      }
+      return null;
+    }, [messages]);
+
+    const activeApprovalRequest = React.useMemo(() => {
+      if (approvalRequest) return approvalRequest;
+      if (pendingAskUser) {
+        return {
+          name: pendingAskUser.name,
+          args: pendingAskUser.args,
+        };
+      }
+      return undefined;
+    }, [approvalRequest, pendingAskUser]);
+
     // Handle edit for HITL approval request
     const handleApprovalEdit = React.useCallback((editedArgs: Record<string, unknown>) => {
       setApprovalCardState("approval-responded");
       setApprovalCardApproval({ approved: true });
       onApprovalEdit?.(editedArgs);
-    }, [onApprovalEdit]);
+      
+      // If there's a pendingAskUser and answers are provided, submit them!
+      if (pendingAskUser && editedArgs.answers) {
+        const answers = Array.isArray(editedArgs.answers) ? editedArgs.answers : [editedArgs.answers];
+        const text = answers.join(', ');
+        // Submit the text response
+        const dummyEvent = { preventDefault: () => {} } as React.FormEvent<HTMLFormElement>;
+        onSubmit({ text, files: [] }, dummyEvent);
+      }
+    }, [onApprovalEdit, pendingAskUser, onSubmit]);
 
     // Reset file change state when fileChanges are cleared
     React.useEffect(() => {
@@ -172,24 +208,22 @@ export const RefinementPanel = React.memo<RefinementPanelProps>(
       }
     }, [fileChanges.length]);
 
-    // Reset approval card state when approvalRequest is cleared
+    // Reset approval card state when activeApprovalRequest is cleared
     React.useEffect(() => {
-      if (!approvalRequest) {
+      if (!activeApprovalRequest) {
         setApprovalCardState("approval-requested");
         setApprovalCardApproval({});
       }
-    }, [approvalRequest]);
-
-
+    }, [activeApprovalRequest]);
 
     // Construct dialog content that replaces the prompt input when active
     let dialog: React.ReactNode = null;
 
-    if (approvalRequest) {
+    if (activeApprovalRequest) {
       dialog = (
         <div className="w-full flex-shrink-0 bg-background p-4">
           <ApprovalCard
-            actionRequest={approvalRequest}
+            actionRequest={activeApprovalRequest}
             reviewConfig={reviewConfig}
             onApprove={handleApprovalApprove}
             onReject={handleApprovalReject}
@@ -218,18 +252,21 @@ export const RefinementPanel = React.memo<RefinementPanelProps>(
     }
 
     return (
-      <div className={`relative flex h-dvh flex-col ${className || ""}`}>
-        <AIConversation
-          messages={messages}
-          showAvatars={true}
-          className="relative min-h-0 flex-1 overflow-y-auto"
-        />
-        <PromptInput
-          dialog={dialog}
-          placeholder={placeholder}
-          onSubmit={onSubmit}
-          className="border-t"
-        />
+      <div className={`relative flex h-full flex-col ${className || ""}`}>
+        <div className="flex-1 flex flex-col pb-4 min-h-0">
+          <AIConversation
+            messages={messages}
+            showAvatars={true}
+            className="relative"
+          />
+        </div>
+        <div className="sticky bottom-0 z-10 bg-background border-t">
+          <PromptInput
+            dialog={dialog}
+            placeholder={placeholder}
+            onSubmit={onSubmit}
+          />
+        </div>
       </div>
     );
   }