ai-design-system 0.1.53 → 0.1.54

package/components/blocks/AIConversation/AIConversation.tsx

@@ -61,6 +61,10 @@ export interface AIConversationProps
     description?: string
     icon?: React.ReactNode
   }
+  /**
+   * Callback fired when a tool action (like a link click) is triggered
+   */
+  onToolAction?: (toolCall: ToolCall, action: string) => void
 }
 
 /**
@@ -73,6 +77,7 @@ export const AIConversation = React.memo<AIConversationProps>(
     onSelectSubAgent,
     selectedSubAgent,
     emptyState,
+    onToolAction,
     ...conversationProps
   }) => {
     const isEmpty = React.useMemo(
@@ -146,7 +151,7 @@ export const AIConversation = React.memo<AIConversationProps>(
               >
                 {/* Render direct tool calls */}
                 {directToolCalls.map((tc) => (
-                  <ToolCallDisplay key={tc.id} toolCall={tc} />
+                  <ToolCallDisplay key={tc.id} toolCall={tc} onToolAction={onToolAction} />
                 ))}
 
                 {/* Render specialist sub-agents */}

package/components/composites/FileTreeExplorer/FileTreeExplorer.tsx

@@ -41,6 +41,40 @@ function renderTree(nodes: FileTreeNode[]): React.ReactNode {
   })
 }
 
+function filterTree(nodes: FileTreeNode[], query: string): FileTreeNode[] {
+  if (!query) return nodes;
+  const lowerQuery = query.toLowerCase();
+
+  return nodes.reduce<FileTreeNode[]>((acc, node) => {
+    if (node.type === 'file') {
+      if (node.name.toLowerCase().includes(lowerQuery)) {
+        acc.push(node);
+      }
+    } else if (node.type === 'folder' && node.children) {
+      const filteredChildren = filterTree(node.children, query);
+      // Keep the folder if it matches the query itself, or if any of its children match
+      if (node.name.toLowerCase().includes(lowerQuery) || filteredChildren.length > 0) {
+        acc.push({ ...node, children: filteredChildren });
+      }
+    }
+    return acc;
+  }, []);
+}
+
+function getAllFolderPaths(nodes: FileTreeNode[]): Set<string> {
+  const paths = new Set<string>();
+  function traverse(n: FileTreeNode[]) {
+    for (const node of n) {
+      if (node.type === 'folder') {
+        paths.add(node.path);
+        if (node.children) traverse(node.children);
+      }
+    }
+  }
+  traverse(nodes);
+  return paths;
+}
+
 export const FileTreeExplorer = React.memo<FileTreeExplorerProps>(
   ({
     tree,
@@ -53,6 +87,19 @@ export const FileTreeExplorer = React.memo<FileTreeExplorerProps>(
     headerClassName,
     className,
   }) => {
+    const [searchQuery, setSearchQuery] = React.useState("")
+
+    const filteredTree = React.useMemo(() => {
+      return filterTree(tree, searchQuery)
+    }, [tree, searchQuery])
+
+    const expandedPaths = React.useMemo(() => {
+      if (searchQuery) {
+        return getAllFolderPaths(filteredTree)
+      }
+      return defaultExpanded
+    }, [searchQuery, filteredTree, defaultExpanded])
+
     return (
       <div className={cn("flex flex-col rounded-lg border bg-background", className)}>
         <div className={cn("flex items-center gap-2 border-b px-3 py-2", headerClassName)}>
@@ -64,6 +111,8 @@ export const FileTreeExplorer = React.memo<FileTreeExplorerProps>(
             />
             <Input
               placeholder={searchPlaceholder}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
               className="pl-8"
             />
           </div>
@@ -80,11 +129,12 @@ export const FileTreeExplorer = React.memo<FileTreeExplorerProps>(
         </div>
         <div className="p-2">
           <FileTree
-            defaultExpanded={defaultExpanded}
+            className="border-none bg-transparent"
+            defaultExpanded={expandedPaths}
             selectedPath={selectedPath}
             onSelect={onSelect}
           >
-            {renderTree(tree)}
+            {renderTree(filteredTree)}
           </FileTree>
         </div>
       </div>

package/components/composites/ToolCallDisplay/ToolCallDisplay.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { Icon } from "@/components/primitives/Icon"
 import {
   Tool,
   ToolHeader,
@@ -20,6 +21,9 @@ export interface ToolCall {
   args: Record<string, unknown>
   result?: string
   status: "pending" | "completed" | "error"
+  uiVariant?: "default" | "link"
+  linkText?: string
+  linkAction?: string
 }
 
 export interface ToolCallDisplayProps {
@@ -31,13 +35,17 @@ export interface ToolCallDisplayProps {
    * Whether the tool call is initially expanded
    */
   defaultExpanded?: boolean
+  /**
+   * Callback fired when a tool action (like a link click) is triggered
+   */
+  onToolAction?: (toolCall: ToolCall, action: string) => void
 }
 
 /**
  * ToolCallDisplay component - displays tool execution with expandable details
  */
 export const ToolCallDisplay = React.memo<ToolCallDisplayProps>(
-  ({ toolCall, defaultExpanded = false }) => {
+  ({ toolCall, defaultExpanded = false, onToolAction }) => {
     const [isExpanded, setIsExpanded] = React.useState(defaultExpanded)
 
     const { name, args, result, status } = React.useMemo(() => {
@@ -78,6 +86,26 @@ export const ToolCallDisplay = React.memo<ToolCallDisplayProps>(
       }
     }, [status])
 
+    if (toolCall.uiVariant === "link") {
+      return (
+        <div 
+          className="flex items-center gap-2 p-3 my-2 rounded-md border bg-muted/30 cursor-pointer hover:bg-muted/50 transition-colors"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (toolCall.linkAction && onToolAction) {
+              onToolAction(toolCall, toolCall.linkAction);
+            }
+          }}
+        >
+          <Icon name="external-link" className="size-4 text-blue-500" />
+          <span className="font-medium text-sm text-blue-500 hover:underline">
+            {toolCall.linkText || `${name} Action`}
+          </span>
+        </div>
+      )
+    }
+
     return (
       <Tool open={isExpanded} onOpenChange={setIsExpanded}>
         <ToolHeader

package/components/features/AIDocEditor/AIDocEditor.tsx

@@ -103,6 +103,8 @@ export interface AIDocEditorMultiTabProps {
   onTabClose?: (documentId: string) => void
   /** Optional completely separate file tree to show all available files in the explorer (even closed ones). If not provided, it falls back to showing only the currently open documents. */
   fileTree?: FileTreeNode[]
+  /** When true, hides the document tab bar — useful for single-file mode where the file tree provides navigation. */
+  hideTabBar?: boolean
 }
 
 /**
@@ -273,60 +275,70 @@ export const AIDocEditor = React.memo<AIDocEditorProps>(
     /**
      * Multi-tab mode
      */
+    const { hideTabBar } = props as AIDocEditorMultiTabProps
+
+    let editorPane: React.ReactNode
+
     if (!currentDocument) {
-      return (
-        <div className={cn('ai-doc-editor flex flex-col flex-1 h-screen w-full', className)}>
-          <DocumentTabBar
-            tabs={props.documents?.map((doc) => doc.file) || []}
-            activeTabId={props.activeDocumentId}
-            onTabSelect={props.onTabSelect}
-            onTabClose={props.onTabClose}
-          />
+      editorPane = (
+        <div className="ai-doc-editor flex flex-col h-full w-full">
+          {!hideTabBar && (
+            <DocumentTabBar
+              className="w-full"
+              tabs={props.documents?.map((doc) => doc.file) || []}
+              activeTabId={props.activeDocumentId}
+              onTabSelect={props.onTabSelect}
+              onTabClose={props.onTabClose}
+            />
+          )}
           <div className="flex-1 flex items-center justify-center p-6 text-muted-foreground">
             No documents open
           </div>
         </div>
       )
-    }
+    } else {
+      const isMarkdownMulti = currentDocument.file.format === 'markdown'
 
-    const isMarkdownMulti = currentDocument.file.format === 'markdown'
-
-    const editorPane = (
-      <div className="ai-doc-editor flex flex-col h-full w-full">
-        <DocumentTabBar
-          className="w-full"
-          tabs={props.documents?.map((doc) => doc.file) || []}
-          activeTabId={props.activeDocumentId}
-          onTabSelect={props.onTabSelect}
-          onTabClose={props.onTabClose}
-        />
-        <div className="flex-1 overflow-auto">
-          {isMarkdownMulti ? (
-            <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 h-full flex flex-col"
+      editorPane = (
+        <div className="ai-doc-editor flex flex-col h-full w-full">
+          {!hideTabBar && (
+            <DocumentTabBar
+              className="w-full"
+              tabs={props.documents?.map((doc) => doc.file) || []}
+              activeTabId={props.activeDocumentId}
+              onTabSelect={props.onTabSelect}
+              onTabClose={props.onTabClose}
             />
           )}
+          <div className="flex-1 overflow-auto">
+            {isMarkdownMulti ? (
+              <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}
+                selectedAnnotationId={props.selectedAnnotationId}
+                currentUserId={currentUser.id}
+                currentUserName={currentUser.name}
+                readOnly={mode === 'readonly'}
+                onAnnotationAdd={handleAnnotationAdd}
+                onAnnotationUpdate={handleAnnotationUpdate}
+                className="ai-doc-editor p-6 min-h-full"
+              />
+            )}
+          </div>
         </div>
-      </div>
-    )
+      )
+    }
 
     return (
       <AdjustableLayout

package/components/features/AIDocEditor/useAIDocEditor.mock.ts

@@ -127,17 +127,12 @@ function useMultiTabDocEditorMockState(
 
   const closeDocument = useCallback((documentId: string) => {
     console.log('[Multi-Tab Mock] Closing document:', documentId)
-    setDocuments(prev => {
-      const filtered = prev.filter(doc => doc.file.id !== documentId)
-      if (activeDocumentId === documentId && filtered.length > 0) {
-        setActiveDocumentId(filtered[0].file.id)
-      }
-      if (filtered.length === 0) {
-        setActiveDocumentId(undefined)
-      }
-      return filtered
-    })
-  }, [activeDocumentId])
+    setDocuments(prev => prev.filter(doc => doc.file.id !== documentId))
+    if (activeDocumentId === documentId) {
+      const filtered = documents.filter(doc => doc.file.id !== documentId)
+      setActiveDocumentId(filtered.length > 0 ? filtered[0].file.id : undefined)
+    }
+  }, [activeDocumentId, documents])
 
   const switchDocument = useCallback((documentId: string) => {
     console.log('[Multi-Tab Mock] Switching to document:', documentId)

package/components/features/RefinementPanel/RefinementPanel.tsx

@@ -101,6 +101,10 @@ export interface RefinementPanelProps {
    * Additional CSS classes
    */
   className?: string;
+  /**
+   * Action handler for tool interactions
+   */
+  onToolAction?: (toolCall: ToolCall, action: string) => void;
 }
 
 /**
@@ -122,6 +126,7 @@ export const RefinementPanel = React.memo<RefinementPanelProps>(
     loading = false,
     placeholder = "Ask a question or describe a task...",
     className,
+    onToolAction,
   }) => {
     // File change queue state
     const [fileChangeState, setFileChangeState] = React.useState<
@@ -262,6 +267,7 @@ export const RefinementPanel = React.memo<RefinementPanelProps>(
         <AIConversation
           messages={messages}
           showAvatars={true}
+          onToolAction={onToolAction}
           className="flex-1 min-h-0"
         />
         <div className="sticky bottom-0 z-10 p-4 bg-gradient-to-t from-card via-card to-transparent pt-6">

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

@@ -11,6 +11,7 @@
 import type { RefinementMessage } from "./RefinementPanel";
 import type { FileChangeData } from "@/components/composites/FileQueue";
 import type { ActionRequest, ReviewConfig } from "@/components/composites/ApprovalCard";
+import type { ToolCall } from "@/components/composites/ToolCallDisplay";
 
 /**
  * Return type for the refinement panel hook
@@ -51,6 +52,9 @@ export interface UseRefinementPanelReturn {
 
   /** Processing state for HITL approval */
   isApprovalProcessing?: boolean;
+
+  /** Action handler for tool interactions */
+  handleToolAction?: (toolCall: ToolCall, action: string) => void;
 }
 
 /**

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

@@ -3,6 +3,7 @@ import type { RefinementMessage } from "./RefinementPanel";
 import type { FileChangeData } from "@/components/composites/FileQueue";
 import type { PromptInputMessage } from "@/components/ai-elements/prompt-input";
 import type { ActionRequest, ReviewConfig } from "@/components/composites/ApprovalCard";
+import type { ToolCall } from "@/components/composites/ToolCallDisplay";
 import type { FormEvent } from "react";
 
 export interface UseRefinementPanelReturn {
@@ -19,6 +20,7 @@ export interface UseRefinementPanelReturn {
   handleApprovalReject?: (reason: string) => Promise<void>;
   handleApprovalEdit?: (editedArgs: Record<string, unknown>) => Promise<void>;
   isApprovalProcessing?: boolean;
+  handleToolAction?: (toolCall: ToolCall, action: string) => void;
 }
 
 export interface UseRefinementPanelOptions {
@@ -173,5 +175,6 @@ export function useRefinementPanelMock(
     handleApprovalReject: initialApprovalRequest ? handleApprovalReject : undefined,
     handleApprovalEdit: initialApprovalRequest ? handleApprovalEdit : undefined,
     isApprovalProcessing,
+    handleToolAction: (toolCall, action) => console.log(`[Mock Tool Action] ${action} on tool:`, toolCall),
   };
 }

package/dist/index.cjs

@@ -3242,7 +3242,7 @@ var ToolOutput = (_a) => {
   ] }));
 };
 var ToolCallDisplay = React3__namespace.memo(
-  ({ toolCall, defaultExpanded = false }) => {
+  ({ toolCall, defaultExpanded = false, onToolAction }) => {
     const [isExpanded, setIsExpanded] = React3__namespace.useState(defaultExpanded);
     const { name, args, result, status } = React3__namespace.useMemo(() => {
       const toolName = toolCall.name || "Unknown Tool";
@@ -3277,6 +3277,25 @@ var ToolCallDisplay = React3__namespace.memo(
           return "output-available";
       }
     }, [status]);
+    if (toolCall.uiVariant === "link") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex items-center gap-2 p-3 my-2 rounded-md border bg-muted/30 cursor-pointer hover:bg-muted/50 transition-colors",
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (toolCall.linkAction && onToolAction) {
+              onToolAction(toolCall, toolCall.linkAction);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "external-link", className: "size-4 text-blue-500" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm text-blue-500 hover:underline", children: toolCall.linkText || `${name} Action` })
+          ]
+        }
+      );
+    }
     return /* @__PURE__ */ jsxRuntime.jsxs(Tool, { open: isExpanded, onOpenChange: setIsExpanded, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         ToolHeader,
@@ -3395,13 +3414,15 @@ var AIConversation = React3__namespace.memo(
       showAvatars = true,
       onSelectSubAgent,
       selectedSubAgent,
-      emptyState
+      emptyState,
+      onToolAction
     } = _b, conversationProps = __objRest(_b, [
       "messages",
       "showAvatars",
       "onSelectSubAgent",
       "selectedSubAgent",
-      "emptyState"
+      "emptyState",
+      "onToolAction"
     ]);
     const isEmpty = React3__namespace.useMemo(
       () => messages.length === 0,
@@ -3456,7 +3477,7 @@ var AIConversation = React3__namespace.memo(
               },
               showAvatar: showAvatars,
               children: [
-                directToolCalls.map((tc) => /* @__PURE__ */ jsxRuntime.jsx(ToolCallDisplay, { toolCall: tc }, tc.id)),
+                directToolCalls.map((tc) => /* @__PURE__ */ jsxRuntime.jsx(ToolCallDisplay, { toolCall: tc, onToolAction }, tc.id)),
                 subAgents.map((subAgent) => /* @__PURE__ */ jsxRuntime.jsx(
                   SpecialistMessage,
                   {
@@ -5521,7 +5542,8 @@ var RefinementPanel = React3__namespace.memo(
     isApprovalProcessing = false,
     loading = false,
     placeholder = "Ask a question or describe a task...",
-    className
+    className,
+    onToolAction
   }) => {
     const [fileChangeState, setFileChangeState] = React3__namespace.useState("approval-requested");
     const [approval, setApproval] = React3__namespace.useState({});
@@ -5632,6 +5654,7 @@ var RefinementPanel = React3__namespace.memo(
         {
           messages,
           showAvatars: true,
+          onToolAction,
           className: "flex-1 min-h-0"
         }
       ),
@@ -10758,6 +10781,36 @@ function renderTree(nodes) {
     return /* @__PURE__ */ jsxRuntime.jsx(FileTreeFile, { name: node.name, path: node.path }, node.path);
   });
 }
+function filterTree(nodes, query) {
+  if (!query) return nodes;
+  const lowerQuery = query.toLowerCase();
+  return nodes.reduce((acc, node) => {
+    if (node.type === "file") {
+      if (node.name.toLowerCase().includes(lowerQuery)) {
+        acc.push(node);
+      }
+    } else if (node.type === "folder" && node.children) {
+      const filteredChildren = filterTree(node.children, query);
+      if (node.name.toLowerCase().includes(lowerQuery) || filteredChildren.length > 0) {
+        acc.push(__spreadProps(__spreadValues({}, node), { children: filteredChildren }));
+      }
+    }
+    return acc;
+  }, []);
+}
+function getAllFolderPaths(nodes) {
+  const paths = /* @__PURE__ */ new Set();
+  function traverse(n) {
+    for (const node of n) {
+      if (node.type === "folder") {
+        paths.add(node.path);
+        if (node.children) traverse(node.children);
+      }
+    }
+  }
+  traverse(nodes);
+  return paths;
+}
 var FileTreeExplorer = React3__namespace.memo(
   ({
     tree,
@@ -10770,6 +10823,16 @@ var FileTreeExplorer = React3__namespace.memo(
     headerClassName,
     className
   }) => {
+    const [searchQuery, setSearchQuery] = React3__namespace.useState("");
+    const filteredTree = React3__namespace.useMemo(() => {
+      return filterTree(tree, searchQuery);
+    }, [tree, searchQuery]);
+    const expandedPaths = React3__namespace.useMemo(() => {
+      if (searchQuery) {
+        return getAllFolderPaths(filteredTree);
+      }
+      return defaultExpanded;
+    }, [searchQuery, filteredTree, defaultExpanded]);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col rounded-lg border bg-background", className), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 border-b px-3 py-2", headerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1", children: [
@@ -10785,6 +10848,8 @@ var FileTreeExplorer = React3__namespace.memo(
             Input2,
             {
               placeholder: searchPlaceholder,
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
               className: "pl-8"
             }
           )
@@ -10805,10 +10870,11 @@ var FileTreeExplorer = React3__namespace.memo(
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
         FileTree,
         {
-          defaultExpanded,
+          className: "border-none bg-transparent",
+          defaultExpanded: expandedPaths,
           selectedPath,
           onSelect,
-          children: renderTree(tree)
+          children: renderTree(filteredTree)
         }
       ) })
     ] });
@@ -10901,11 +10967,14 @@ var AIDocEditor = React3__namespace.default.memo(
         }
       ) });
     }
+    const { hideTabBar } = props;
+    let editorPane;
     if (!currentDocument) {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("ai-doc-editor flex flex-col flex-1 h-screen w-full", className), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+      editorPane = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ai-doc-editor flex flex-col h-full w-full", children: [
+        !hideTabBar && /* @__PURE__ */ jsxRuntime.jsx(
           DocumentTabBar,
           {
+            className: "w-full",
             tabs: ((_a = props.documents) == null ? void 0 : _a.map((doc) => doc.file)) || [],
             activeTabId: props.activeDocumentId,
             onTabSelect: props.onTabSelect,
@@ -10914,42 +10983,44 @@ var AIDocEditor = React3__namespace.default.memo(
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center p-6 text-muted-foreground", children: "No documents open" })
       ] });
+    } else {
+      const isMarkdownMulti = currentDocument.file.format === "markdown";
+      editorPane = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ai-doc-editor flex flex-col h-full w-full", children: [
+        !hideTabBar && /* @__PURE__ */ jsxRuntime.jsx(
+          DocumentTabBar,
+          {
+            className: "w-full",
+            tabs: ((_b = props.documents) == null ? void 0 : _b.map((doc) => doc.file)) || [],
+            activeTabId: props.activeDocumentId,
+            onTabSelect: props.onTabSelect,
+            onTabClose: props.onTabClose
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: isMarkdownMulti ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+          streamdown.Streamdown,
+          {
+            mode: "streaming",
+            isAnimating: true,
+            className: "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+            children: currentDocument.content
+          }
+        ) }) : /* @__PURE__ */ jsxRuntime.jsx(
+          DocumentEditorWithComments,
+          {
+            content: currentDocument.content,
+            format: currentDocument.file.format,
+            annotations: currentDocument.annotations,
+            selectedAnnotationId: props.selectedAnnotationId,
+            currentUserId: currentUser2.id,
+            currentUserName: currentUser2.name,
+            readOnly: mode === "readonly",
+            onAnnotationAdd: handleAnnotationAdd,
+            onAnnotationUpdate: handleAnnotationUpdate,
+            className: "ai-doc-editor p-6 min-h-full"
+          }
+        ) })
+      ] });
     }
-    const isMarkdownMulti = currentDocument.file.format === "markdown";
-    const editorPane = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ai-doc-editor flex flex-col h-full w-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        DocumentTabBar,
-        {
-          className: "w-full",
-          tabs: ((_b = props.documents) == null ? void 0 : _b.map((doc) => doc.file)) || [],
-          activeTabId: props.activeDocumentId,
-          onTabSelect: props.onTabSelect,
-          onTabClose: props.onTabClose
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: isMarkdownMulti ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx(
-        streamdown.Streamdown,
-        {
-          mode: "streaming",
-          isAnimating: true,
-          className: "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
-          children: currentDocument.content
-        }
-      ) }) : /* @__PURE__ */ jsxRuntime.jsx(
-        DocumentEditorWithComments,
-        {
-          content: currentDocument.content,
-          format: currentDocument.file.format,
-          annotations: currentDocument.annotations,
-          currentUserId: currentUser2.id,
-          currentUserName: currentUser2.name,
-          readOnly: mode === "readonly",
-          onAnnotationAdd: handleAnnotationAdd,
-          onAnnotationUpdate: handleAnnotationUpdate,
-          className: "p-6 h-full flex flex-col"
-        }
-      ) })
-    ] });
     return /* @__PURE__ */ jsxRuntime.jsx(
       AdjustableLayout,
       {