ai-design-system 0.1.64 → 0.1.66

package/components/blocks/AIConversation/AIConversation.tsx

@@ -12,7 +12,6 @@ import { SpecialistMessage } from "@/components/composites/SpecialistMessage"
 import { OrchestratorMessage } from "@/components/composites/OrchestratorMessage"
 import { ToolCallDisplay } from "@/components/composites/ToolCallDisplay"
 import { ReasoningDisplay } from "@/components/composites/ReasoningDisplay"
-import { ApprovalCard } from "@/components/composites/ApprovalCard"
 
 /**
  * AIConversation Section
@@ -24,6 +23,11 @@ import { ApprovalCard } from "@/components/composites/ApprovalCard"
  * Based on reference implementation from deep-agents-ui ChatInterface.
  */
 
+type AIMessageBlock =
+  | { type: 'text'; id: string; text: string }
+  | { type: 'toolCall'; id: string; toolCall: ToolCall }
+  | { type: 'subAgent'; id: string; subAgent: SubAgent }
+
 interface AIMessage {
   id: string;
   type: 'human' | 'ai';
@@ -34,6 +38,7 @@ interface AIMessage {
   toolCalls?: ToolCall[];
   subAgents?: SubAgent[];
   isLoading?: boolean;
+  blocks?: AIMessageBlock[];
 }
 
 export interface AIConversationProps
@@ -112,71 +117,95 @@ export const AIConversation = React.memo<AIConversationProps>(
             (!msg.toolCalls || msg.toolCalls.length === 0) &&
             (!msg.subAgents || msg.subAgents.length === 0);
 
-          if (!isFinalResponse) {
-            if (currentGroup) {
-              if (msg.content) {
-                currentGroup.content = currentGroup.content
-                  ? `${currentGroup.content}\n\n${msg.content}`
-                  : msg.content;
+          if (currentGroup) {
+            if (msg.content) {
+              currentGroup.content = currentGroup.content
+                ? `${currentGroup.content}\n\n${msg.content}`
+                : msg.content;
+            }
+            if (msg.toolCalls) {
+              const existingToolCalls = currentGroup.toolCalls || [];
+              const updatedToolCalls = [...existingToolCalls];
+              for (const newCall of msg.toolCalls) {
+                const existingIndex = updatedToolCalls.findIndex(tc => tc.id === newCall.id);
+                if (existingIndex >= 0) {
+                  updatedToolCalls[existingIndex] = newCall;
+                } else {
+                  updatedToolCalls.push(newCall);
+                }
               }
-              if (msg.toolCalls) {
-                const existingToolCalls = currentGroup.toolCalls || [];
-                const updatedToolCalls = [...existingToolCalls];
-                for (const newCall of msg.toolCalls) {
-                  const existingIndex = updatedToolCalls.findIndex(tc => tc.id === newCall.id);
-                  if (existingIndex >= 0) {
-                    updatedToolCalls[existingIndex] = newCall;
+              currentGroup.toolCalls = updatedToolCalls;
+            }
+            if (msg.subAgents) {
+              const existingSubAgents = currentGroup.subAgents || [];
+              const updatedSubAgents = [...existingSubAgents];
+              for (const newAgent of msg.subAgents) {
+                const existingIndex = updatedSubAgents.findIndex(a => a.id === newAgent.id);
+                if (existingIndex >= 0) {
+                  updatedSubAgents[existingIndex] = newAgent;
+                } else {
+                  if (
+                    updatedSubAgents.length > 0 &&
+                    updatedSubAgents[updatedSubAgents.length - 1].subAgentName === newAgent.subAgentName
+                  ) {
+                    const prev = updatedSubAgents[updatedSubAgents.length - 1];
+                    let mergedOutput = prev.output;
+                    if (newAgent.output) {
+                      const prevStr = typeof prev.output === 'string' ? prev.output : (prev.output ? JSON.stringify(prev.output) : '');
+                      const newStr = typeof newAgent.output === 'string' ? newAgent.output : JSON.stringify(newAgent.output);
+                      mergedOutput = prevStr ? `${prevStr}\n\n${newStr}` : newStr;
+                    }
+                    updatedSubAgents[updatedSubAgents.length - 1] = {
+                      ...newAgent,
+                      id: prev.id,
+                      input: prev.input,
+                      output: mergedOutput
+                    };
                   } else {
-                    updatedToolCalls.push(newCall);
+                    updatedSubAgents.push(newAgent);
                   }
                 }
-                currentGroup.toolCalls = updatedToolCalls;
               }
-              if (msg.subAgents) {
-                const existingSubAgents = currentGroup.subAgents || [];
-                const updatedSubAgents = [...existingSubAgents];
-                for (const newAgent of msg.subAgents) {
-                  const existingIndex = updatedSubAgents.findIndex(a => a.id === newAgent.id);
+              currentGroup.subAgents = updatedSubAgents;
+            }
+            if (msg.blocks) {
+              const existingBlocks = currentGroup.blocks || [];
+              const updatedBlocks = [...existingBlocks];
+              for (const newBlock of msg.blocks) {
+                const lastBlock = updatedBlocks[updatedBlocks.length - 1];
+                if (
+                  updatedBlocks.length > 0 &&
+                  lastBlock.type === 'text' &&
+                  newBlock.type === 'text'
+                ) {
+                  updatedBlocks[updatedBlocks.length - 1] = {
+                    ...lastBlock,
+                    text: (lastBlock.text || '') + '\n\n' + (newBlock.text || ''),
+                  };
+                } else {
+                  const existingIndex = updatedBlocks.findIndex(b => b.id === newBlock.id && b.type === newBlock.type && b.type !== 'text');
                   if (existingIndex >= 0) {
-                    updatedSubAgents[existingIndex] = newAgent;
+                    updatedBlocks[existingIndex] = newBlock;
                   } else {
-                    // Merge consecutive subAgents with the same name
-                    if (
-                      updatedSubAgents.length > 0 &&
-                      updatedSubAgents[updatedSubAgents.length - 1].subAgentName === newAgent.subAgentName
-                    ) {
-                      const prev = updatedSubAgents[updatedSubAgents.length - 1];
-                      let mergedOutput = prev.output;
-                      if (newAgent.output) {
-                        const prevStr = typeof prev.output === 'string' ? prev.output : (prev.output ? JSON.stringify(prev.output) : '');
-                        const newStr = typeof newAgent.output === 'string' ? newAgent.output : JSON.stringify(newAgent.output);
-                        mergedOutput = prevStr ? `${prevStr}\n\n${newStr}` : newStr;
-                      }
-                      updatedSubAgents[updatedSubAgents.length - 1] = {
-                        ...newAgent,
-                        id: prev.id, // keep the original id so React keys don't jump
-                        input: prev.input, // keep original input or combine? Just keep original
-                        output: mergedOutput
-                      };
-                    } else {
-                      updatedSubAgents.push(newAgent);
-                    }
+                    updatedBlocks.push(newBlock);
                   }
                 }
-                currentGroup.subAgents = updatedSubAgents;
               }
-              currentGroup.isLoading = msg.isLoading;
-            } else {
-              currentGroup = {
-                ...msg,
-                toolCalls: msg.toolCalls ? [...msg.toolCalls] : undefined,
-                subAgents: msg.subAgents ? [...msg.subAgents] : undefined,
-              };
-              result.push(currentGroup);
+              currentGroup.blocks = updatedBlocks;
             }
+            currentGroup.isLoading = msg.isLoading;
           } else {
+            currentGroup = {
+              ...msg,
+              toolCalls: msg.toolCalls ? [...msg.toolCalls] : undefined,
+              subAgents: msg.subAgents ? [...msg.subAgents] : undefined,
+              blocks: msg.blocks ? [...msg.blocks] : undefined,
+            };
+            result.push(currentGroup);
+          }
+
+          if (isFinalResponse) {
             currentGroup = null;
-            result.push(msg);
           }
         } else {
           currentGroup = null;
@@ -223,11 +252,11 @@ export const AIConversation = React.memo<AIConversationProps>(
             const directToolCalls = allToolCalls.filter((tc) => tc.visibility !== "reasoning")
 
             const hasReasoning = reasoningCalls.length > 0 || subAgents.length > 0 || directToolCalls.length > 0 || (message.isLoading && contentStr.trim() !== "");
-            const reasoningText = hasReasoning ? contentStr : undefined
+            const reasoningText = (hasReasoning && (!message.blocks || message.blocks.length === 0)) ? contentStr : undefined
             const displayContentStr = hasReasoning ? "" : contentStr
             const hasDisplayContent = displayContentStr.trim() !== ""
 
-            if (!hasDisplayContent && directToolCalls.length === 0 && reasoningCalls.length === 0 && subAgents.length === 0 && !message.isLoading) {
+            if (!hasDisplayContent && directToolCalls.length === 0 && reasoningCalls.length === 0 && subAgents.length === 0 && !message.isLoading && (!message.blocks || message.blocks.length === 0)) {
               return null;
             }
 
@@ -249,32 +278,66 @@ export const AIConversation = React.memo<AIConversationProps>(
                 {hasReasoning && (
                   <ReasoningDisplay 
                     content={reasoningText} 
-                    items={reasoningCalls} 
+                    items={message.blocks && message.blocks.length > 0 ? [] : reasoningCalls} 
                     isStreaming={isStreaming} 
                     onToolAction={onToolAction}
                     defaultOpen={isStreaming || index === groupedMessages.length - 1}
                   >
-                    {/* Render direct tool calls */}
-                    {directToolCalls.map((tc) => (
-                      <ToolCallDisplay key={tc.id} toolCall={tc} onToolAction={onToolAction} />
-                    ))}
+                    {message.blocks && message.blocks.length > 0 ? (
+                      message.blocks.map((block, i) => {
+                        if (block.type === 'text') {
+                          return block.text && block.text.trim() ? (
+                            <div key={`text-${i}`} className="mb-4 text-muted-foreground whitespace-pre-wrap">
+                              {block.text}
+                            </div>
+                          ) : null;
+                        } else if (block.type === 'toolCall' && block.toolCall && block.toolCall.name !== 'ask_user' && block.toolCall.name !== 'ask_question') {
+                          return <ToolCallDisplay key={block.id} toolCall={block.toolCall} onToolAction={onToolAction} />;
+                        } else if (block.type === 'subAgent' && block.subAgent) {
+                          const subAgent = block.subAgent;
+                          return (
+                            <SpecialistMessage
+                              key={subAgent.id}
+                              message={{
+                                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: [],
+                              }}
+                              isNested={true}
+                            />
+                          );
+                        }
+                        return null;
+                      })
+                    ) : (
+                      <>
+                        {/* Render direct tool calls fallback */}
+                        {directToolCalls.map((tc) => (
+                          <ToolCallDisplay key={tc.id} toolCall={tc} onToolAction={onToolAction} />
+                        ))}
 
-                    {/* Render specialist sub-agents */}
-                    {subAgents.map((subAgent) => (
-                      <SpecialistMessage
-                        key={subAgent.id}
-                        message={{
-                          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: [],
-                        }}
-                        isNested={true}
-                      />
-                    ))}
+                        {/* Render specialist sub-agents fallback */}
+                        {subAgents.map((subAgent) => (
+                          <SpecialistMessage
+                            key={subAgent.id}
+                            message={{
+                              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: [],
+                            }}
+                            isNested={true}
+                          />
+                        ))}
+                      </>
+                    )}
                   </ReasoningDisplay>
                 )}
               </OrchestratorMessage>

package/components/blocks/AppSidebar/AppSidebar.tsx

@@ -20,6 +20,7 @@ export const AppSidebar = React.memo<AppSidebarProps>(
   ({
     logo,
     mainNavigation,
+    navigationGroups,
     secondaryNavigation,
     documents,
     user,
@@ -46,11 +47,22 @@ export const AppSidebar = React.memo<AppSidebarProps>(
         </SidebarHeader>
 
         <SidebarContent>
-          <SidebarGroup>
-            <SidebarGroupContent>
-              <NavigationList items={mainNavigation} />
-            </SidebarGroupContent>
-          </SidebarGroup>
+          {mainNavigation && mainNavigation.length > 0 && (
+            <SidebarGroup>
+              <SidebarGroupContent>
+                <NavigationList items={mainNavigation} />
+              </SidebarGroupContent>
+            </SidebarGroup>
+          )}
+
+          {navigationGroups?.map((group) => (
+            <SidebarGroup key={group.label}>
+              <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <NavigationList items={group.items} />
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
 
           {documents && documents.length > 0 && (
             <SidebarGroup>

package/components/blocks/AppSidebar/interfaces.ts

@@ -1,13 +1,19 @@
 import type { NavigationItem } from "@/components/composites/NavigationList/interfaces";
 import type { SidebarProps } from "@/components/primitives/Sidebar";
 
+export interface NavigationGroup {
+  label: string;
+  items: NavigationItem[];
+}
+
 export interface AppSidebarProps {
   logo?: {
     icon: string;
     text: string;
     href: string;
   };
-  mainNavigation: NavigationItem[];
+  mainNavigation?: NavigationItem[];
+  navigationGroups?: NavigationGroup[];
   secondaryNavigation?: NavigationItem[];
   documents?: NavigationItem[];
   user: {

package/components/composites/FileTreeExplorer/FileTreeExplorer.tsx

@@ -179,7 +179,7 @@ export const FileTreeExplorer = React.memo<FileTreeExplorerProps>(
           ) : null}
           <a ref={downloadRef} style={{ display: 'none' }} />
         </div>
-        <div className="p-2">
+        <div className="overflow-y-auto p-2">
           <FileTree
             className="border-none bg-transparent"
             expanded={activeExpanded}

package/components/composites/NavigationList/NavigationList.tsx

@@ -25,7 +25,7 @@ export const NavigationList = React.memo<NavigationListProps>(
   ({ items, onItemClick, className }) => {
     return (
       <SidebarMenu className={className}>
-        {items.map((item) => (
+        {items?.map((item) => (
           <SidebarMenuItem key={item.title}>
             <SidebarMenuButton
               tooltip={item.title}

package/components/features/TextEditor/TextEditor.tsx

@@ -176,7 +176,6 @@ export const TextEditor = React.memo<TextEditorProps>(
       className,
       onAnnotationAdd,
       onAnnotationUpdate,
-      onAnnotationClick,
     } = props
 
     const isMultiTab = isMultiTabMode(props)
@@ -212,18 +211,18 @@ export const TextEditor = React.memo<TextEditorProps>(
       },
       [onAnnotationUpdate]
     )
-    const fileTreeNodes = useMemo(() => {
-      if (!isMultiTab) return []
+    const multiTabDocs = isMultiTab ? (props as TextEditorMultiTabProps).documents : undefined
+    const multiTabFileTree = isMultiTab ? (props as TextEditorMultiTabProps).fileTree : undefined
 
-      const multiProps = props as TextEditorMultiTabProps
-      if (multiProps.fileTree) {
-        return multiProps.fileTree
+    const fileTreeNodes = useMemo(() => {
+      if (multiTabFileTree) {
+        return multiTabFileTree
       }
 
-      if (!multiProps.documents) return []
+      if (!multiTabDocs) return []
       const rootNodes: FileTreeNode[] = []
 
-      multiProps.documents.forEach((doc) => {
+      multiTabDocs.forEach((doc) => {
         const parts = doc.file.id.split('/')
         if (parts.length === 1) {
           rootNodes.push({
@@ -257,7 +256,68 @@ export const TextEditor = React.memo<TextEditorProps>(
         })
       })
       return rootNodes
-    }, [isMultiTab, (props as TextEditorMultiTabProps).documents, (props as TextEditorMultiTabProps).fileTree])
+    }, [multiTabDocs, multiTabFileTree])
+
+    const handleTabSelect = isMultiTab ? (props as TextEditorMultiTabProps).onTabSelect : undefined
+
+    const LinkComponent = useCallback((linkProps: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+      const { href, ...rest } = linkProps
+      const isExternal = href?.startsWith('http://') || href?.startsWith('https://') || href?.startsWith('mailto:')
+      const isAnchor = href?.startsWith('#')
+
+      const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+        if (!isExternal && !isAnchor && href) {
+          e.preventDefault()
+          let targetId = href
+          
+          if (targetId.startsWith('file://')) {
+            let path = targetId.replace('file://', '')
+            // On Windows, file:///C:/path becomes /C:/path, we want C:/path
+            if (path.match(/^\/[a-zA-Z]:\//)) {
+              path = path.slice(1)
+            }
+            if (isMultiTab && props.documents) {
+              const matchedDoc = props.documents.find(doc => path.endsWith(doc.file.id) || path.endsWith('/' + doc.file.id))
+              if (matchedDoc) {
+                targetId = matchedDoc.file.id
+              } else {
+                targetId = path
+              }
+            } else {
+              targetId = path
+            }
+          } else if (props.activeDocumentId) {
+            if (targetId.startsWith('/')) {
+              targetId = targetId.slice(1)
+            } else {
+              const baseParts = props.activeDocumentId.split('/')
+              baseParts.pop() // remove current filename
+              const targetParts = targetId.split('/')
+              for (const part of targetParts) {
+                if (part === '.' || part === '') continue
+                if (part === '..') {
+                  if (baseParts.length > 0) baseParts.pop()
+                } else {
+                  baseParts.push(part)
+                }
+              }
+              targetId = baseParts.join('/')
+            }
+          } else if (targetId.startsWith('./')) {
+            targetId = targetId.slice(2)
+          }
+
+          if (handleTabSelect) {
+            handleTabSelect(targetId)
+          }
+        }
+      }
+
+      if (isExternal) {
+        return <a href={href} target="_blank" rel="noopener noreferrer" {...rest} />
+      }
+      return <a href={href} onClick={handleClick} className="text-primary hover:underline cursor-pointer" {...rest} />
+    }, [handleTabSelect, props.activeDocumentId])
 
     /**
      * Single-document mode
@@ -274,7 +334,7 @@ export const TextEditor = React.memo<TextEditorProps>(
           : contentStr
         return (
           <div className={cn('text-editor p-6 flex flex-col h-screen w-full flex-1', className)}>
-            <StreamingMarkdown mode="streaming">
+            <StreamingMarkdown mode="streaming" components={{ a: LinkComponent }}>
               {content}
             </StreamingMarkdown>
           </div>
@@ -346,6 +406,7 @@ export const TextEditor = React.memo<TextEditorProps>(
                   mode="streaming"
                   isAnimating
                   className="[&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
+                  components={{ a: LinkComponent }}
                 >
                   {isCodeMulti
                     ? `\`\`\`${format}\n${format === 'json' ? formatJson(currentDocument.content as string) : currentDocument.content}\n\`\`\``