ai-design-system 0.1.46 → 0.1.47

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/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/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/PromptInput/PromptInput.tsx

@@ -29,6 +29,7 @@ export interface PromptInputBlockProps
     event: FormEvent<HTMLFormElement>
   ) => void | Promise<void>;
   dialog?: ReactNode;
+  loading?: boolean;
 }
 
 export const PromptInput = React.memo<PromptInputBlockProps>(
@@ -39,6 +40,7 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
     onChange,
     onSubmit,
     dialog,
+    loading = false,
     ...props
   }) => {
     const handleSubmit = React.useCallback(
@@ -80,7 +82,7 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
           <PromptInputTools>
             {}
           </PromptInputTools>
-          <PromptInputSubmit disabled={disabled} />
+          <PromptInputSubmit disabled={disabled} status={loading ? "submitted" : undefined} />
         </PromptInputFooter>
       </AIPromptInput>
     );

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/composites/ApprovalCard/ApprovalCard.tsx

@@ -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);
         }
       };
@@ -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"
@@ -318,7 +344,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
               {currentQuestionIndex === questions.length - 1 ? (
                 <>
                   <Check className="h-4 w-4 mr-2" />
-                  Continue
+                  {submitButtonText}
                 </>
               ) : (
                 <>
@@ -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>
 
@@ -489,7 +517,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                 </>
               ) : (
                 <>
-                  {canReject && (
+                  {canReject && !hideSkipButton && (
                     <ConfirmationAction
                       type="button"
                       variant="outline"
@@ -497,7 +525,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                       disabled={isProcessing}
                     >
                       <X className="h-4 w-4 mr-2" />
-                      Reject
+                      {skipButtonText}
                     </ConfirmationAction>
                   )}
                   {canEdit && (
@@ -518,7 +546,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                     disabled={isProcessing}
                   >
                     <Check className="h-4 w-4 mr-2" />
-                    Approve
+                    {submitButtonText}
                   </ConfirmationAction>
                 </>
               )}

package/components/composites/OrchestratorMessage/OrchestratorMessage.tsx

@@ -5,6 +5,7 @@ import {
   MessageAvatar,
   MessageTypingIndicator,
 } from "@/components/ai-elements/message"
+import { Response } from "@/components/ai-elements/response"
 
 /**
  * OrchestratorMessage Block
@@ -63,7 +64,7 @@ export const OrchestratorMessage = React.memo<OrchestratorMessageProps>(
             </MessageContent>
           ) : hasContent && (
             <MessageContent variant="contained">
-              {message.content}
+              <Response mode={message.isLoading ? "streaming" : "static"} isAnimating={!!message.isLoading}>{message.content}</Response>
             </MessageContent>
           )}
 

package/components/composites/SpecialistMessage/SpecialistMessage.tsx

@@ -9,7 +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"
+import { Response } from "@/components/ai-elements/response"
 
 /**
  * SpecialistMessage Block
@@ -65,10 +65,17 @@ 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]);
+
     return (
       <Plan
         defaultOpen={collapsible ? defaultOpen : true}
         className={cn(isNested && "ml-8")}
+        isStreaming={message.status === "active"}
       >
         <PlanHeader>
           <div>
@@ -76,8 +83,8 @@ export const SpecialistMessage = React.memo<SpecialistMessageProps>(
               {message.icon && message.icon}
               <PlanTitle>{message.name}</PlanTitle>
             </div>
-            {message.description && (
-              <PlanDescription>{message.description}</PlanDescription>
+            {description && (
+              <PlanDescription>{description}</PlanDescription>
             )}
           </div>
           {collapsible && <PlanTrigger />}
@@ -86,12 +93,13 @@ export const SpecialistMessage = React.memo<SpecialistMessageProps>(
         <PlanContent>
           {/* Message content */}
           {hasContent && (
-            <Streamdown
+            <Response
               className="size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
-              mode="static"
+              mode={message.status === "active" ? "streaming" : "static"}
+              isAnimating={message.status === "active"}
             >
               {message.content}
-            </Streamdown>
+            </Response>
           )}
 
           {/* Tool calls */}

package/components/features/RefinementPanel/RefinementPanel.tsx

@@ -89,6 +89,10 @@ export interface RefinementPanelProps {
    * Processing state for HITL approval
    */
   isApprovalProcessing?: boolean;
+  /**
+   * Loading state — shows spinner on send button while streaming
+   */
+  loading?: boolean;
   /**
    * Placeholder text for input
    */
@@ -115,6 +119,7 @@ export const RefinementPanel = React.memo<RefinementPanelProps>(
     onApprovalReject,
     onApprovalEdit,
     isApprovalProcessing = false,
+    loading = false,
     placeholder = "Ask a question or describe a task...",
     className,
   }) => {
@@ -146,26 +151,20 @@ export const RefinementPanel = React.memo<RefinementPanelProps>(
 
     // Handle approve for HITL approval request
     const handleApprovalApprove = React.useCallback(() => {
-      setApprovalCardState("approval-responded");
-      setApprovalCardApproval({ approved: true });
       onApprovalApprove?.();
     }, [onApprovalApprove]);
 
-    // Handle reject for HITL approval request
-    const handleApprovalReject = React.useCallback((reason: string) => {
-      setApprovalCardState("approval-responded");
-      setApprovalCardApproval({ approved: false });
-      onApprovalReject?.(reason);
-    }, [onApprovalReject]);
-
     // Extract pending ask_user tool call from messages
     const pendingAskUser = React.useMemo(() => {
+      console.log("[RefinementPanel] Messages length:", messages.length);
       // Look from the end
       for (let i = messages.length - 1; i >= 0; i--) {
         const msg = messages[i];
-        if (msg.toolCalls) {
+        if (msg.toolCalls && msg.toolCalls.length > 0) {
+          console.log(`[RefinementPanel] Message ${i} (${msg.id}) has ${msg.toolCalls.length} tool calls`, msg.toolCalls.map(tc => `${tc.name} [${tc.status}]`));
           const askUserTc = msg.toolCalls.find(tc => tc.name === "ask_user" && tc.status === "pending");
           if (askUserTc) {
+            console.log("[RefinementPanel] Found pending ask_user:", askUserTc);
             return askUserTc;
           }
         }
@@ -176,6 +175,7 @@ export const RefinementPanel = React.memo<RefinementPanelProps>(
     const activeApprovalRequest = React.useMemo(() => {
       if (approvalRequest) return approvalRequest;
       if (pendingAskUser) {
+        console.log("[RefinementPanel] ask_user args:", JSON.stringify(pendingAskUser.args));
         return {
           name: pendingAskUser.name,
           args: pendingAskUser.args,
@@ -184,21 +184,27 @@ export const RefinementPanel = React.memo<RefinementPanelProps>(
       return undefined;
     }, [approvalRequest, pendingAskUser]);
 
+    // Handle reject for HITL approval request
+    const handleApprovalReject = React.useCallback((reason: string) => {
+      if (activeApprovalRequest?.name === "ask_user") {
+        const dummyEvent = { preventDefault: () => {} } as React.FormEvent<HTMLFormElement>;
+        onSubmit({ text: "Skipped", files: [] }, dummyEvent);
+      } else {
+        onApprovalReject?.(reason);
+      }
+    }, [onApprovalReject, activeApprovalRequest, onSubmit]);
+
     // Handle edit for HITL approval request
     const handleApprovalEdit = React.useCallback((editedArgs: Record<string, unknown>) => {
-      setApprovalCardState("approval-responded");
-      setApprovalCardApproval({ approved: true });
-      onApprovalEdit?.(editedArgs);
-      
-      // If there's a pendingAskUser and answers are provided, submit them!
-      if (pendingAskUser && editedArgs.answers) {
+      if (activeApprovalRequest?.name === "ask_user" && 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);
+      } else {
+        onApprovalEdit?.(editedArgs);
       }
-    }, [onApprovalEdit, pendingAskUser, onSubmit]);
+    }, [onApprovalEdit, activeApprovalRequest, onSubmit]);
 
     // Reset file change state when fileChanges are cleared
     React.useEffect(() => {
@@ -253,18 +259,17 @@ export const RefinementPanel = React.memo<RefinementPanelProps>(
 
     return (
       <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>
+        <AIConversation
+          messages={messages}
+          showAvatars={true}
+          className="flex-1 min-h-0"
+        />
         <div className="sticky bottom-0 z-10 bg-background border-t">
           <PromptInput
             dialog={dialog}
             placeholder={placeholder}
             onSubmit={onSubmit}
+            loading={loading}
           />
         </div>
       </div>

package/components/features/RefinementPanel/useRefinementPanel.d.ts

@@ -43,14 +43,11 @@ export interface UseRefinementPanelReturn {
   /** Review configuration for HITL approval */
   reviewConfig?: ReviewConfig;
 
-  /** Handle approval of HITL approval request */
-  handleApprovalApprove?: () => Promise<void> | void;
+  /** Handle approval of HITL approval request (ask_user or review_content approve) */
+  handleAskUserApprove?: () => Promise<void> | void;
 
   /** Handle rejection of HITL approval request */
-  handleApprovalReject?: (reason: string) => Promise<void> | void;
-
-  /** Handle edit of HITL approval request */
-  handleApprovalEdit?: (editedArgs: Record<string, unknown>) => Promise<void> | void;
+  handleAskUserReject?: (reason: string) => Promise<void> | void;
 
   /** Processing state for HITL approval */
   isApprovalProcessing?: boolean;
@@ -68,11 +65,19 @@ export interface UseRefinementPanelReturn {
  * @example
  * ```tsx
  * // Real application implementation
- * export function useRefinementPanel(): UseRefinementPanelReturn {
+ * export function useRefinementPanel(options?: { threadId?: string }): UseRefinementPanelReturn {
+ *   const { threadId } = options || {};
  *   const [messages, setMessages] = useState<RefinementMessage[]>([]);
  *   const [fileChanges, setFileChanges] = useState<FileChangeData[]>([]);
  *   const [loading, setLoading] = useState(false);
  * 
+ *   useEffect(() => {
+ *     if (!threadId) return;
+ *     fetch(`/api/v1/chat/threads/${threadId}/history`)
+ *       .then((res) => res.json())
+ *       .then((data) => setMessages(data.messages));
+ *   }, [threadId]);
+ * 
  *   const handleSubmit = async (prompt: string) => {
  *     setLoading(true);
  *     try {
@@ -90,4 +95,4 @@ export interface UseRefinementPanelReturn {
  * }
  * ```
  */
-export function useRefinementPanel(): UseRefinementPanelReturn;
+export function useRefinementPanel(options?: { threadId?: string }): UseRefinementPanelReturn;

package/components/features/RefinementPanel/useRefinementPanel.mock.ts

@@ -22,6 +22,7 @@ export interface UseRefinementPanelReturn {
 }
 
 export interface UseRefinementPanelOptions {
+  threadId?: string;
   initialMessages?: RefinementMessage[];
   reviewMessages?: RefinementMessage[];
   reviewFileChanges?: FileChangeData[];
@@ -34,6 +35,7 @@ export function useRefinementPanelMock(
   options: UseRefinementPanelOptions = {}
 ): UseRefinementPanelReturn {
   const {
+    threadId,
     initialMessages = [],
     reviewMessages = [],
     reviewFileChanges = [],
@@ -42,6 +44,10 @@ export function useRefinementPanelMock(
     apiDelay = 800,
   } = options;
 
+  if (threadId) {
+    console.log(`[useRefinementPanelMock] threadId=${threadId} — history would be fetched from API in production`);
+  }
+
   const [messages, setMessages] = useState<RefinementMessage[]>(initialMessages);
   const [fileChanges, setFileChanges] = useState<FileChangeData[]>([]);
   const [loading, setLoading] = useState(false);