ai-design-system 0.1.44 → 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}
               >
@@ -142,7 +151,7 @@ export const AIConversation = React.memo<AIConversationProps>(
                     message={{
                       id: subAgent.id,
                       name: subAgent.subAgentName,
-                      description: typeof subAgent.input === 'string' ? subAgent.input : JSON.stringify(subAgent.input),
+                      description: undefined,
                       content: typeof subAgent.output === 'string' ? subAgent.output : (subAgent.output ? JSON.stringify(subAgent.output) : ''),
                       status: subAgent.status,
                       toolCalls: [],

package/components/{composites → blocks}/PromptInput/PromptInput.stories.tsx

@@ -61,7 +61,7 @@ export const ControlledState: Story = {
           placeholder="Type something (controlled mode)"
           onSubmit={(message) => {
             setSubmittedMessages((prev) => [...prev, message.text || ""]);
-            setValue(""); // Clear after submit
+            setValue("");
           }}
         />
 
@@ -164,7 +164,6 @@ export const CustomSubmitHandler: Story = {
           disabled={isSubmitting}
           onSubmit={async (message) => {
             setIsSubmitting(true);
-            // Simulate async processing
             await new Promise((resolve) => setTimeout(resolve, 2000));
             setLastSubmitted(message.text || "");
             setIsSubmitting(false);
@@ -198,3 +197,79 @@ export const NoAttachmentUI: Story = {
     },
   },
 };
+
+/**
+ * Dialog replacement — static content
+ * Shows PromptInput rendering a dialog instead of the input when `dialog` is set.
+ * The dialog content replaces the input entirely; no input is shown.
+ */
+export const WithDialog: Story = {
+  args: {
+    placeholder: "This should not appear — dialog is active",
+    onSubmit: (message) => {
+      console.log("Submitted:", message);
+    },
+    dialog: (
+      <div className="rounded-lg border border-border bg-card p-6 text-center text-sm text-muted-foreground">
+        <p className="font-medium text-foreground">Dialog Content</p>
+        <p className="mt-1">This replaces the prompt input when the <code>dialog</code> prop is set.</p>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "When the `dialog` prop is set, PromptInput renders that ReactNode instead of the input form. This is used by features like RefinementPanel to show file reviews or HITL approval cards in place of the input.",
+      },
+    },
+  },
+};
+
+/**
+ * Dialog replacement — interactive toggle
+ * Demonstrates switching between input mode and dialog mode.
+ */
+export const ToggleDialog: Story = {
+  render: () => {
+    const [showDialog, setShowDialog] = useState(false);
+
+    return (
+      <div className="space-y-4">
+        <div className="rounded-md border border-border bg-muted p-4">
+          <label className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={showDialog}
+              onChange={(e) => setShowDialog(e.target.checked)}
+            />
+            <span className="text-sm">Show dialog (replaces input)</span>
+          </label>
+        </div>
+
+        <PromptInput
+          placeholder="Type a message..."
+          onSubmit={(message) => {
+            console.log("Submitted:", message);
+          }}
+          dialog={
+            showDialog ? (
+              <div className="rounded-lg border border-border bg-card p-6 text-center text-sm text-muted-foreground">
+                <p className="font-medium text-foreground">Dialog Active</p>
+                <p className="mt-1">Uncheck the toggle above to return to input mode.</p>
+              </div>
+            ) : undefined
+          }
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive demonstration of the dialog replacement. Toggle the checkbox to switch between showing the prompt input and showing dialog content. This is the same pattern RefinementPanel uses for file review and HITL approval states.",
+      },
+    },
+  },
+};

package/components/{composites → blocks}/PromptInput/PromptInput.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import type { ReactNode } from "react";
 import {
   PromptInput as AIPromptInput,
   PromptInputBody,
@@ -14,52 +15,22 @@ import {
 } from "@/components/ai-elements/prompt-input";
 import type { FormEvent } from "react";
 
-/**
- * PromptInput Block
- *
- * A thin wrapper around the PromptInput AI element that hides attachment functionality.
- * This block provides a simplified prompt input interface focused on text-only input.
- *
- * Features:
- * - Controlled and uncontrolled state support
- * - Disabled state (blocks submission, keeps textarea editable)
- * - Custom placeholder text
- * - No attachment UI (compositional hiding)
- */
-
 export interface PromptInputBlockProps
   extends Omit<
     AIPromptInputProps,
     "accept" | "multiple" | "maxFiles" | "maxFileSize" | "globalDrop" | "syncHiddenInput" | "onSubmit" | "onChange"
   > {
-  /**
-   * Blocks form submission when true. Textarea remains editable for drafts.
-   */
   disabled?: boolean;
-  /**
-   * Placeholder text for the textarea input
-   */
   placeholder?: string;
-  /**
-   * Controlled state value (when provided with onChange)
-   */
   value?: string;
-  /**
-   * Controlled state change handler (when provided with value)
-   */
   onChange?: (value: string) => void;
-  /**
-   * Submit handler called when form is submitted
-   */
   onSubmit: (
     message: PromptInputMessage,
     event: FormEvent<HTMLFormElement>
   ) => void | Promise<void>;
+  dialog?: ReactNode;
 }
 
-/**
- * PromptInput component - text-only prompt input without attachments
- */
 export const PromptInput = React.memo<PromptInputBlockProps>(
   ({
     disabled = false,
@@ -67,9 +38,9 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
     value,
     onChange,
     onSubmit,
+    dialog,
     ...props
   }) => {
-    // Handle form submission with disabled state
     const handleSubmit = React.useCallback(
       (message: PromptInputMessage, event: FormEvent<HTMLFormElement>) => {
         if (disabled) {
@@ -81,10 +52,8 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
       [disabled, onSubmit]
     );
 
-    // Controlled mode: wrap in PromptInputProvider
     const isControlled = value !== undefined && onChange !== undefined;
 
-    // Handle controlled state change
     const handleControlledChange = React.useCallback(
       (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         if (onChange) {
@@ -94,26 +63,28 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
       [onChange]
     );
 
-    // Render the prompt input composition
+    if (dialog) {
+      return <>{dialog}</>;
+    }
+
     const promptInputContent = (
       <AIPromptInput onSubmit={handleSubmit} {...props}>
         <PromptInputBody>
           <PromptInputTextarea
             placeholder={placeholder}
-            disabled={false} // Keep editable even when form is disabled
+            disabled={false}
             onChange={isControlled ? handleControlledChange : undefined}
           />
         </PromptInputBody>
         <PromptInputFooter>
           <PromptInputTools>
-            {/* No attachment menu - compositionally hidden */}
+            {}
           </PromptInputTools>
           <PromptInputSubmit disabled={disabled} />
         </PromptInputFooter>
       </AIPromptInput>
     );
 
-    // Wrap in provider for controlled mode
     if (isControlled) {
       return (
         <PromptInputProvider initialInput={value}>

package/components/blocks/PromptInput/index.ts

@@ -0,0 +1,3 @@
+export { PromptInput } from "./PromptInput";
+
+export type { PromptInputBlockProps } from "./PromptInput";

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/blocks/index.ts

@@ -10,6 +10,9 @@ export type { DocumentEditorWithCommentsProps } from './DocumentEditorWithCommen
 export { FileChangeQueue } from './FileChangeQueue'
 export type { FileChangeQueueProps } from './FileChangeQueue'
 
+export { PromptInput } from './PromptInput'
+export type { PromptInputBlockProps } from './PromptInput'
+
 // Blocks
 export * from './LayoutProvider'
 export * from './SectionLayout'

package/components/composites/ApprovalCard/ApprovalCard.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ApprovalCard } from "./ApprovalCard";
+import { fn } from "@storybook/test";
+
+const meta: Meta<typeof ApprovalCard> = {
+  title: "Composites/ApprovalCard",
+  component: ApprovalCard,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    onApprove: fn(),
+    onReject: fn(),
+    onEdit: fn(),
+    isProcessing: false,
+  },
+} satisfies Meta<typeof ApprovalCard>;
+
+export default meta;
+type Story = StoryObj<typeof ApprovalCard>;
+
+export const Default: Story = {
+  args: {
+    actionRequest: {
+      name: "send_email",
+      description: "Review email before sending to team",
+      args: {
+        to: "team@acme.com",
+        subject: "Q4 Results",
+        body: "Revenue grew 15% this quarter.",
+      },
+    },
+    reviewConfig: {
+      allowedDecisions: ["approve", "edit", "reject"],
+    },
+  },
+};
+
+export const SimpleApprovalOnly: Story = {
+  args: {
+    actionRequest: {
+      name: "publish_content",
+      description: "Publish video narration to production database",
+      args: {
+        document_id: "doc_123",
+        environment: "production",
+      },
+    },
+    reviewConfig: {
+      allowedDecisions: ["approve", "reject"],
+    },
+  },
+};
+
+export const MultilineArguments: Story = {
+  args: {
+    actionRequest: {
+      name: "apply_patch",
+      description: "Approve and apply code patch to target repository",
+      args: {
+        patch: `diff --git a/src/index.ts b/src/index.ts
+index 83a2d78..d3345f1 100644
+--- a/src/index.ts
++++ b/src/index.ts
+@@ -10,3 +10,4 @@
+ export function hello() {
+-  console.log("hello");
++  console.log("hello world!");
+ }`,
+        author: "AI Developer Agent",
+      },
+    },
+    reviewConfig: {
+      allowedDecisions: ["approve", "edit", "reject"],
+    },
+  },
+};
+
+export const InteractiveQuestion: Story = {
+  args: {
+    actionRequest: {
+      name: "ask_question",
+      args: {
+        question: "Where in the workflow timeline should the SEO review step run?",
+        options: [
+          "(Recommended) Before the main human content approval, so the editor can see the SEO recommendations and scores when reviewing the script.",
+          "After the main human content approval, so that the general content is finalized first before being tuned for SEO."
+        ],
+        is_multi_select: false
+      }
+    }
+  }
+};
+
+export const MultiQuestionPoll: Story = {
+  args: {
+    actionRequest: {
+      name: "ask_question",
+      args: {
+        questions: [
+          {
+            question: "Choose preferred publication channel:",
+            options: ["YouTube", "Vimeo", "TikTok", "Instagram Reels"],
+            is_multi_select: false
+          },
+          {
+            question: "Which departments need to sign off on budget?",
+            options: ["Marketing", "Finance", "Legal", "Operations"],
+            is_multi_select: true
+          }
+        ]
+      }
+    }
+  }
+};