ai-design-system 0.1.46 → 0.1.48

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

@@ -3,7 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import type { Element } from "hast";
-import { CheckIcon, CopyIcon } from "lucide-react";
+import { CheckIcon } from "lucide-react";
 import {
   type ComponentProps,
   createContext,
@@ -163,8 +163,6 @@ export const CodeBlockCopyButton = ({
     }
   };
 
-  const Icon = isCopied ? CheckIcon : CopyIcon;
-
   return (
     <Button
       className={cn("shrink-0", className)}
@@ -173,7 +171,7 @@ export const CodeBlockCopyButton = ({
       variant="ghost"
       {...props}
     >
-      {children ?? <Icon size={14} />}
+      {children ?? <CheckIcon size={14} />}
     </Button>
   );
 };

package/components/ai-elements/conversation.tsx

@@ -11,7 +11,7 @@ export type ConversationProps = ComponentProps<typeof StickToBottom>;
 
 export const Conversation = ({ className, ...props }: ConversationProps) => (
   <StickToBottom
-    className={cn("relative flex-1 overflow-y-auto", className)}
+    className={cn("relative flex-1 overflow-hidden", className)}
     initial="smooth"
     resize="smooth"
     role="log"

package/components/ai-elements/prompt-input.tsx

@@ -40,23 +40,21 @@ import {
   ImageIcon,
   Loader2Icon,
   MicIcon,
-  PaperclipIcon,
   PlusIcon,
   SendIcon,
   SquareIcon,
   XIcon,
 } from "lucide-react";
+import React from "react";
 import { nanoid } from "nanoid";
 import {
   type ChangeEvent,
   type ChangeEventHandler,
-  Children,
   type ClipboardEventHandler,
   type ComponentProps,
   createContext,
   type FormEvent,
   type FormEventHandler,
-  Fragment,
   type HTMLAttributes,
   type KeyboardEventHandler,
   type PropsWithChildren,
@@ -295,7 +293,7 @@ export function PromptInputAttachment({
                 />
               ) : (
                 <div className="flex size-5 items-center justify-center text-muted-foreground">
-                  <PaperclipIcon className="size-3" />
+                  <div className="size-3" />
                 </div>
               )}
             </div>
@@ -365,7 +363,7 @@ export function PromptInputAttachments({
   }
 
   return attachments.files.map((file) => (
-    <Fragment key={file.id}>{children(file)}</Fragment>
+    <React.Fragment key={file.id}>{children(file)}</React.Fragment>
   ));
 }
 
@@ -900,7 +898,7 @@ export const PromptInputButton = ({
   ...props
 }: PromptInputButtonProps) => {
   const newSize =
-    size ?? (Children.count(props.children) > 1 ? "sm" : "icon-sm");
+    size ?? (React.Children.count(props.children) > 1 ? "sm" : "icon-sm");
 
   return (
     <InputGroupButton

package/components/blocks/AIConversation/AIConversation.tsx

@@ -92,9 +92,14 @@ export const AIConversation = React.memo<AIConversationProps>(
       [emptyState?.description]
     )
 
+    const toMessageString = (content: unknown): string =>
+      typeof content === 'string' ? content : ''
+
     const renderedMessages = React.useMemo(
       () =>
         messages.map((message) => {
+          const contentStr = toMessageString(message.content)
+
           // Render based on role field
           if (message.role === "user") {
             return (
@@ -102,7 +107,7 @@ export const AIConversation = React.memo<AIConversationProps>(
                 key={message.id}
                 message={{
                   id: message.id,
-                  content: message.content,
+                  content: contentStr,
                   avatarSrc: message.avatarSrc,
                   avatarName: message.avatarName,
                 }}
@@ -122,7 +127,7 @@ export const AIConversation = React.memo<AIConversationProps>(
                 (tc) => tc.name !== "task" && tc.name !== "ask_user"
               ) || []
 
-            const hasContent = message.content && message.content.trim() !== ""
+            const hasContent = contentStr.trim() !== ""
             if (!hasContent && directToolCalls.length === 0 && subAgents.length === 0 && !message.isLoading) {
               return null;
             }
@@ -132,7 +137,7 @@ export const AIConversation = React.memo<AIConversationProps>(
                 key={message.id}
                 message={{
                   id: message.id,
-                  content: message.content,
+                  content: contentStr,
                   avatarSrc: message.avatarSrc,
                   avatarName: message.avatarName,
                   isLoading: message.isLoading,
@@ -170,7 +175,7 @@ export const AIConversation = React.memo<AIConversationProps>(
               message={{
                 id: message.id,
                 name: message.avatarName || "Agent",
-                content: message.content,
+                content: contentStr,
                 toolCalls: message.toolCalls?.filter((tc) => tc.name !== "task"),
                 status: "completed",
               }}

package/components/blocks/DataTable/DataTable.tsx

@@ -1,5 +1,4 @@
 import * as React from "react"
-import { Plus } from "lucide-react"
 
 import {
   EnhancedDataTable,
@@ -8,6 +7,7 @@ import {
 } from "@/components/composites/DataTable"
 import type { DynamicTableSchema } from "ui-schema-contracts"
 import { Button } from "@/components/primitives/Button"
+import { Icon } from "@/components/primitives/Icon"
 
 export interface DataTableProps {
   rows: DashboardRow[]
@@ -29,7 +29,7 @@ export const DataTable = React.memo<DataTableProps>(({ rows, tableSchema, handle
         rightActions={
           handlers?.onAddSection ? (
             <Button variant="outline" size="sm" className="h-8" onClick={handlers.onAddSection}>
-              <Plus className="size-4" />
+              <Icon name="plus" size="sm" />
               <span className="hidden lg:inline">Add Section</span>
             </Button>
           ) : null

package/components/blocks/InboxPanel/InboxPanel.tsx

@@ -13,6 +13,8 @@ export interface InboxPanelProps {
   isLoading?: boolean
   emptyMessage?: string
   className?: string
+  title?: string
+  headerAction?: React.ReactNode
 }
 
 export const InboxPanel = React.memo<InboxPanelProps>(
@@ -26,10 +28,19 @@ export const InboxPanel = React.memo<InboxPanelProps>(
     isLoading = false,
     emptyMessage,
     className,
+    title,
+    headerAction,
   }) => {
     return (
       <section className={`flex min-h-0 flex-1 flex-col overflow-hidden ${className ?? ""}`}>
-        <div className="p-4">
+        {title || headerAction ? (
+          <div className="flex items-center justify-between px-4 pt-4 pb-2">
+            {title ? <h2 className="text-sm font-semibold text-muted-foreground">{title}</h2> : <div />}
+            {headerAction ? <div>{headerAction}</div> : null}
+          </div>
+        ) : null}
+
+        <div className="px-4 pb-2">
           <Input
             aria-label="Search inbox items"
             className="h-8"

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-auto">
+        <div className="h-full min-h-0 flex flex-col overflow-hidden">
           {section.header && (
             <AppHeader {...section.header} />
           )}
-          <div className="min-h-0 flex-1 overflow-hidden">
+          <div className="min-h-0 flex-1 overflow-hidden flex flex-col">
             {section.content}
           </div>
         </div>

package/components/blocks/index.ts

@@ -10,26 +10,15 @@ 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'
-export type { LayoutProviderProps } from './LayoutProvider'
 
 export { WorkflowCanvas, getLayoutedElements } from './WorkflowCanvas'
 export type { WorkflowCanvasProps, WorkflowNode, WorkflowEdge, WorkflowNodeData } from './WorkflowCanvas'
 
-export { DashboardHeader } from './DashboardHeader'
-export type { DashboardHeaderProps } from './DashboardHeader'
-
 export { DashboardMetrics } from './DashboardMetrics'
 export type { DashboardMetricsProps } from './DashboardMetrics'
 
-export { DashboardChart } from './DashboardChart'
-export type { DashboardChartProps } from './DashboardChart'
-
 export { DataTable } from './DataTable'
 export type { DataTableProps } from './DataTable'
 

package/components/composites/AppHeader/AppHeader.tsx

@@ -22,7 +22,11 @@ export const AppHeader = React.memo<AppHeaderProps>(({
           {showSidebarToggle && showTitle && title && (
             <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
           )}
-          {showTitle && title && <h1 className="max-w-[28rem] truncate text-base font-medium">{title}</h1>}
+          {showTitle && title && (
+            typeof title === 'string' 
+              ? <h1 className="max-w-[28rem] truncate text-base font-medium">{title}</h1>
+              : title
+          )}
         </div>
 
         <div className="justify-self-center">

package/components/composites/AppHeader/interfaces.ts

@@ -6,7 +6,7 @@ export interface TabItem {
 }
 
 export interface AppHeaderProps {
-  title?: string;
+  title?: React.ReactNode;
   actions?: React.ReactNode;
   tabs?: TabItem[];
   defaultTab?: string;

package/components/composites/ApprovalCard/ApprovalCard.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { useState } from "react";
-import { Check, Pencil, X, ChevronLeft, ChevronRight } from "lucide-react";
+import { Icon } from "@/components/primitives/Icon";
 import { Input } from "@/components/primitives/Input";
 import { Textarea } from "@/components/primitives/Textarea";
 import { Label } from "@/components/primitives/Label";
@@ -98,6 +98,10 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
     const [rejectReason, setRejectReason] = useState("");
     const [showRejectInput, setShowRejectInput] = useState(false);
 
+    const hideSkipButton = (actionRequest.args?.hide_skip_button as boolean) ?? false;
+    const submitButtonText = (actionRequest.args?.button_submit_text as string) || 'Continue';
+    const skipButtonText = (actionRequest.args?.button_skip_text as string) || 'Skip';
+
     // Question states
     const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
     const [selectedAnswers, setSelectedAnswers] = useState<Record<number, string | string[]>>({});
@@ -117,13 +121,15 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
     const isQuestionAction =
       actionRequest.name === "ask_question" ||
       (actionRequest.args &&
-        (typeof actionRequest.args.question === "string" ||
-          Array.isArray(actionRequest.args.questions)));
+        ((typeof actionRequest.args.question === "string") ||
+          (Array.isArray(actionRequest.args.questions) && actionRequest.args.questions.length > 0)));
 
     // Parse questions
     let questions: Question[] = [];
     if (actionRequest.args && Array.isArray(actionRequest.args.questions)) {
       questions = actionRequest.args.questions as Question[];
+    } else if (actionRequest.args && actionRequest.args.questions && typeof actionRequest.args.questions === "object") {
+      questions = Object.values(actionRequest.args.questions) as Question[];
     } else if (actionRequest.args && typeof actionRequest.args.question === "string") {
       questions = [
         {
@@ -144,19 +150,37 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
     // Render interactive question view
     if (isQuestionAction && currentQuestion) {
       const handleContinue = () => {
+        const qIdx = currentQuestionIndex;
+        const selIdx = selectedOptionIndices[qIdx];
+        const hasOtherSelected = selIdx === options.length;
+        const hasRegularSelection = selIdx !== null && selIdx !== undefined && !hasOtherSelected;
+        const hasMultiSelectItems = isMultiSelect && Array.isArray(selectedAnswers[qIdx]) && (selectedAnswers[qIdx] as string[]).length > 0;
+        
+        const isApprovalType = actionRequest.args?.type === 'approval';
+        const isOtherEmpty = hasOtherSelected && !otherTexts[qIdx]?.trim();
+        const hasNoValidSelection = (!hasRegularSelection && !hasMultiSelectItems && !hasOtherSelected) || isOtherEmpty;
+
+        let answer: string | string[] = "Approved";
+
+        if (hasOtherSelected) {
+          answer = otherTexts[qIdx] || "Approved";
+        } else if (isMultiSelect) {
+          answer = (selectedAnswers[qIdx] as string[]).join(", ") || "Approved";
+        } else if (hasRegularSelection) {
+          answer = selectedAnswers[qIdx] as string || "Approved";
+        }
+
+        if (!isApprovalType && hasNoValidSelection) return;
+
         if (currentQuestionIndex === questions.length - 1) {
           const finalAnswers = questions.map((q, idx) => {
-            if (selectedOptionIndices[idx] === q.options?.length) {
-              return otherTexts[idx] || "";
-            }
+            if (idx === qIdx) return answer;
             return selectedAnswers[idx] || "";
           });
-
-          if (onEdit) {
-            onEdit({ ...actionRequest.args, answers: finalAnswers });
-          }
-          onApprove();
+          if (onEdit) onEdit({ ...actionRequest.args, answers: finalAnswers });
+          else onApprove();
         } else {
+          setSelectedAnswers((prev) => ({ ...prev, [qIdx]: answer }));
           setCurrentQuestionIndex((prev) => prev + 1);
         }
       };
@@ -198,7 +222,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                     disabled={currentQuestionIndex === 0}
                     className="hover:text-foreground disabled:opacity-30 p-0.5 transition-colors"
                   >
-                    <ChevronLeft className="h-4 w-4" />
+                    <Icon name="chevron-left" size="sm" />
                   </button>
                   <span className="font-medium">{currentQuestionIndex + 1} of {questions.length}</span>
                   <button
@@ -209,7 +233,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                     disabled={currentQuestionIndex === questions.length - 1}
                     className="hover:text-foreground disabled:opacity-30 p-0.5 transition-colors"
                   >
-                    <ChevronRight className="h-4 w-4" />
+                    <Icon name="chevron-right" size="sm" />
                   </button>
                 </div>
               )}
@@ -297,17 +321,19 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
           </div>
 
           <ConfirmationActions>
-            <ConfirmationAction
-              variant="outline"
-              type="button"
-              onClick={() => {
-                if (onReject) {
-                  onReject("Skipped question");
-                }
-              }}
-            >
-              Skip
-            </ConfirmationAction>
+            {!hideSkipButton && (
+              <ConfirmationAction
+                variant="outline"
+                type="button"
+                onClick={() => {
+                  if (onReject) {
+                    onReject("Skipped question");
+                  }
+                }}
+              >
+                {skipButtonText}
+              </ConfirmationAction>
+            )}
 
             <ConfirmationAction
               type="button"
@@ -317,13 +343,13 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
             >
               {currentQuestionIndex === questions.length - 1 ? (
                 <>
-                  <Check className="h-4 w-4 mr-2" />
-                  Continue
+                <Icon name="check" size="sm" className="mr-2" />
+                  {submitButtonText}
                 </>
               ) : (
                 <>
                   Next
-                  <ChevronRight className="h-4 w-4 ml-2" />
+                  <Icon name="chevron-right" size="sm" className="ml-2" />
                 </>
               )}
             </ConfirmationAction>
@@ -344,7 +370,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
         {isEditing ? (
           <div className="space-y-4">
             <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
-              <Pencil className="h-4 w-4" />
+              <Icon name="pencil" size="sm" />
               <span>
                 Edit —{" "}
                 <code className="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">
@@ -409,7 +435,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                 }}
                 disabled={isProcessing}
               >
-                <Check className="h-4 w-4 mr-2" />
+                    <Icon name="check" size="sm" className="mr-2" />
                 Save & Approve
               </ConfirmationAction>
             </ConfirmationActions>
@@ -423,24 +449,26 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
               )}
 
               <div className="mt-3 space-y-3">
-                {Object.entries(actionRequest.args).map(([key, value]) => {
-                  const strValue = formatValue(value);
-                  const isMultiline = strValue.includes("\n");
-                  return (
-                    <div key={key} className="space-y-1">
-                      <div className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
-                        {key}
+                {Object.entries(actionRequest.args)
+                  .filter(([_, value]) => typeof value === "string" || typeof value === "number" || typeof value === "boolean")
+                  .map(([key, value]) => {
+                    const strValue = formatValue(value);
+                    const isMultiline = strValue.includes("\n");
+                    return (
+                      <div key={key} className="space-y-1">
+                        <div className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
+                          {key}
+                        </div>
+                        {isMultiline ? (
+                          <pre className="text-xs text-card-foreground whitespace-pre-wrap break-all font-mono bg-muted/50 rounded-md px-2.5 py-1.5 border border-border">
+                            {strValue}
+                          </pre>
+                        ) : (
+                          <div className="text-sm text-card-foreground break-all">{strValue}</div>
+                        )}
                       </div>
-                      {isMultiline ? (
-                        <pre className="text-xs text-card-foreground whitespace-pre-wrap break-all font-mono bg-muted/50 rounded-md px-2.5 py-1.5 border border-border">
-                          {strValue}
-                        </pre>
-                      ) : (
-                        <div className="text-sm text-card-foreground break-all">{strValue}</div>
-                      )}
-                    </div>
-                  );
-                })}
+                    );
+                  })}
               </div>
             </div>
 
@@ -483,21 +511,21 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                     }}
                     disabled={isProcessing}
                   >
-                    <X className="h-4 w-4 mr-2" />
+                      <Icon name="x" size="sm" className="mr-2" />
                     Confirm Rejection
                   </ConfirmationAction>
                 </>
               ) : (
                 <>
-                  {canReject && (
+                  {canReject && !hideSkipButton && (
                     <ConfirmationAction
                       type="button"
                       variant="outline"
                       onClick={() => setShowRejectInput(true)}
                       disabled={isProcessing}
                     >
-                      <X className="h-4 w-4 mr-2" />
-                      Reject
+                    <Icon name="x" size="sm" className="mr-2" />
+                      {skipButtonText}
                     </ConfirmationAction>
                   )}
                   {canEdit && (
@@ -507,7 +535,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                       onClick={() => setIsEditing(true)}
                       disabled={isProcessing}
                     >
-                      <Pencil className="h-4 w-4 mr-2" />
+                      <Icon name="pencil" size="sm" className="mr-2" />
                       Edit
                     </ConfirmationAction>
                   )}
@@ -517,8 +545,8 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                     onClick={onApprove}
                     disabled={isProcessing}
                   >
-                    <Check className="h-4 w-4 mr-2" />
-                    Approve
+                  <Icon name="check" size="sm" className="mr-2" />
+                    {submitButtonText}
                   </ConfirmationAction>
                 </>
               )}

package/components/composites/CommentBox/CommentBox.tsx

@@ -56,7 +56,7 @@ import {
   InputGroupTextarea,
   InputGroupButton,
 } from '@/components/primitives/InputGroup'
-import { Send } from 'lucide-react'
+import { Icon } from '@/components/primitives/Icon'
 import { formatCommentDate } from '@/utils/ai-editor'
 import type { CommentBoxProps, Comment } from '@/types/ai-editor'
 import { cn } from '@/lib/utils'
@@ -132,7 +132,7 @@ const CommentThreadDisplay = React.memo<{
               }
             }}
           >
-            <Send className="h-4 w-4" />
+            <Icon name="send" size="sm" />
           </InputGroupButton>
         </InputGroup>
       </ConversationContent>
@@ -208,7 +208,7 @@ export const CommentBox = React.memo<CommentBoxProps>(
                   }
                 }}
               >
-                <Send className="h-4 w-4" />
+                <Icon name="send" size="sm" />
               </InputGroupButton>
             </InputGroup>
           </div>

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

@@ -18,3 +18,5 @@ export const DashboardHeader = React.memo<DashboardHeaderProps>(({ ctaLabel = "Q
 })
 
 DashboardHeader.displayName = "DashboardHeader"
+
+

package/components/composites/DataTable/DragHandleCell.tsx

@@ -1,7 +1,7 @@
 import { useSortable } from "@dnd-kit/sortable"
-import { GripVertical } from "lucide-react"
 
 import { Button } from "@/components/primitives/Button"
+import { Icon } from "@/components/primitives/Icon"
 
 export interface DragHandleCellProps {
   id: number | string
@@ -19,7 +19,7 @@ export function DragHandleCell({ id }: DragHandleCellProps) {
       className="size-7 text-muted-foreground hover:bg-transparent"
       aria-label="Drag to reorder"
     >
-      <GripVertical className="size-3" />
+      <Icon name="grip-vertical" size="xs" />
     </Button>
   )
 }

package/components/composites/DataTable/EnhancedDataTable.behaviors.stories.tsx

@@ -19,7 +19,7 @@ const tableSchema = dynamicTableSchema.parse({
   enablePagination: true,
   enableRowSelection: true,
   columns: [
-    { key: "header", label: "Header", sortable: true, hideable: false },
+    { key: "header", label: "Header", renderType: "link", sortable: true, hideable: false },
     { key: "type", label: "Type", sortable: true },
     { key: "status", label: "Status", renderType: "badge", sortable: true },
     { key: "target", label: "Target", align: "right", sortable: true },