ai-design-system 0.1.62 → 0.1.64

package/components/composites/FileTreeExplorer/FileTreeExplorer.tsx

@@ -16,6 +16,11 @@ export type FileTreeNode = {
   children?: FileTreeNode[]
 }
 
+export interface FileDownloadResult {
+  blob: Blob
+  filename: string
+}
+
 export interface FileTreeExplorerProps {
   tree: FileTreeNode[]
   defaultExpanded?: Set<string>
@@ -24,7 +29,7 @@ export interface FileTreeExplorerProps {
   searchPlaceholder?: string
   onCreateClick?: () => void
   createButtonLabel?: string
-  onDownloadClick?: () => void
+  onDownload?: () => Promise<FileDownloadResult | undefined>
   headerClassName?: string
   className?: string
 }
@@ -85,13 +90,28 @@ export const FileTreeExplorer = React.memo<FileTreeExplorerProps>(
     searchPlaceholder = "Filter files...",
     onCreateClick,
     createButtonLabel,
-    onDownloadClick,
+    onDownload,
     headerClassName,
     className,
   }) => {
+    const downloadRef = React.useRef<HTMLAnchorElement>(null)
     const [searchQuery, setSearchQuery] = React.useState("")
     const [userExpanded, setUserExpanded] = React.useState<Set<string>>(defaultExpanded || new Set())
 
+    const handleDownloadClick = React.useCallback(async () => {
+      if (!onDownload) return
+      const result = await onDownload()
+      if (!result) return
+      const url = URL.createObjectURL(result.blob)
+      const anchor = downloadRef.current
+      if (anchor) {
+        anchor.href = url
+        anchor.download = result.filename
+        anchor.click()
+      }
+      URL.revokeObjectURL(url)
+    }, [onDownload])
+
     // Auto-expand parents when selectedPath changes
     React.useEffect(() => {
       if (selectedPath) {
@@ -147,16 +167,17 @@ export const FileTreeExplorer = React.memo<FileTreeExplorerProps>(
               {createButtonLabel ?? "New"}
             </button>
           ) : null}
-          {onDownloadClick ? (
+          {onDownload ? (
             <button
               type="button"
-              onClick={onDownloadClick}
+              onClick={handleDownloadClick}
               title="Download all files"
               className="inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
             >
               <Icon name="download" size="sm" />
             </button>
           ) : null}
+          <a ref={downloadRef} style={{ display: 'none' }} />
         </div>
         <div className="p-2">
           <FileTree

package/components/composites/FileTreeExplorer/index.ts

@@ -3,6 +3,7 @@ export {
 } from "./FileTreeExplorer"
 
 export type {
+  FileDownloadResult,
   FileTreeExplorerProps,
   FileTreeNode,
 } from "./FileTreeExplorer"

package/components/composites/SessionHeader/SessionHeader.tsx

@@ -16,12 +16,16 @@ export interface ChatSessionInfo {
   created_at: string;
 }
 
+import type { FileDownloadResult } from '@/components/composites/FileTreeExplorer';
+
+
 export interface SessionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   sessions?: ChatSessionInfo[];
   activeSessionId?: string | null;
   onNewSession?: () => void;
   onCloseSession?: (id: string) => void;
   onSelectSession?: (id: string) => void;
+  onDownloadSession?: () => Promise<FileDownloadResult | undefined>;
 }
 
 /**
@@ -31,8 +35,23 @@ export interface SessionHeaderProps extends React.HTMLAttributes<HTMLDivElement>
  * and a dropdown history of past sessions.
  */
 export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps>(
-  ({ sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, className, ...props }, ref) => {
+  ({ sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, className, ...props }, ref) => {
     const activeSession = sessions?.find(s => s.id === activeSessionId);
+    const downloadRef = React.useRef<HTMLAnchorElement>(null);
+
+    const handleDownloadClick = React.useCallback(async () => {
+      if (!onDownloadSession) return;
+      const result = await onDownloadSession();
+      if (!result) return;
+      const url = URL.createObjectURL(result.blob);
+      const anchor = downloadRef.current;
+      if (anchor) {
+        anchor.href = url;
+        anchor.download = result.filename;
+        anchor.click();
+      }
+      URL.revokeObjectURL(url);
+    }, [onDownloadSession]);
 
     return (
       <div 
@@ -48,7 +67,12 @@ export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps
           </span>
         </div>
         <div className="flex items-center space-x-1 flex-none">
-          <Button variant="ghost" size="icon" onClick={onNewSession} className="h-8 w-8">
+          {onDownloadSession && (
+            <Button variant="ghost" size="icon" onClick={handleDownloadClick} className="h-8 w-8" title="Download Chat History">
+              <Icon name="download" className="h-4 w-4" />
+            </Button>
+          )}
+          <Button variant="ghost" size="icon" onClick={onNewSession} className="h-8 w-8" title="New Session">
             <Icon name="plus" className="h-4 w-4" />
           </Button>
           
@@ -77,6 +101,7 @@ export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps
               )}
             </DropdownMenuContent>
           </DropdownMenu>
+          <a ref={downloadRef} style={{ display: 'none' }} />
         </div>
       </div>
     );

package/components/features/RefinementPanel/RefinementPanel.tsx

@@ -13,6 +13,7 @@ import type { ActionRequest, ReviewConfig, ToolUIState, ToolApproval } from "@/c
 import type { FormEvent } from "react";
 import { SessionHeader } from "@/components/composites/SessionHeader";
 import type { ChatSessionInfo } from "@/components/composites/SessionHeader";
+import type { FileDownloadResult } from "@/components/composites/FileTreeExplorer";
 
 /**
  * RefinementPanel Feature
@@ -127,6 +128,10 @@ export interface RefinementPanelProps {
    * Handler to switch sessions
    */
   onSelectSession?: (id: string) => void;
+  /**
+   * Handler to download the session chat history
+   */
+  onDownloadSession?: () => Promise<FileDownloadResult | undefined>;
 }
 
 /**
@@ -154,6 +159,7 @@ export const RefinementPanel = React.memo<RefinementPanelProps>(
     onNewSession,
     onCloseSession,
     onSelectSession,
+    onDownloadSession,
   }) => {
     // File change queue state
     const [fileChangeState, setFileChangeState] = React.useState<
@@ -298,6 +304,7 @@ export const RefinementPanel = React.memo<RefinementPanelProps>(
           onNewSession={onNewSession}
           onCloseSession={onCloseSession}
           onSelectSession={onSelectSession}
+          onDownloadSession={onDownloadSession}
         />
 
         <AIConversation

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

@@ -12,6 +12,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";
+import type { FileDownloadResult } from "@/components/composites/FileTreeExplorer";
 
 /**
  * Return type for the refinement panel hook
@@ -55,6 +56,9 @@ export interface UseRefinementPanelReturn {
 
   /** Action handler for tool interactions */
   handleToolAction?: (toolCall: ToolCall, action: string) => void;
+
+  /** Handler to download the session chat history */
+  handleDownloadSession?: () => Promise<FileDownloadResult | undefined>;
 }
 
 /**

package/components/features/TextEditor/TextEditor.tsx

@@ -37,7 +37,7 @@ import { DocumentEditorWithComments } from '@/components/blocks/DocumentEditorWi
 import { DocumentTabBar } from '@/components/composites/DocumentTabBar'
 import { AdjustableLayout } from '@/components/composites/AdjustableLayout'
 import { FileTreeExplorer } from '@/components/composites/FileTreeExplorer'
-import type { FileTreeNode } from '@/components/composites/FileTreeExplorer'
+import type { FileDownloadResult, FileTreeNode } from '@/components/composites/FileTreeExplorer'
 import { cn } from '@/lib/utils'
 import type { JSONContent } from '@tiptap/core'
 import type { Annotation, User } from '@/types/ai-editor/annotations'
@@ -106,7 +106,7 @@ export interface TextEditorMultiTabProps {
   /** When true, hides the document tab bar — useful for single-file mode where the file tree provides navigation. */
   hideTabBar?: boolean
   /** Callback when download all button is clicked in the file tree header */
-  onDownloadAllFiles?: () => void
+  onDownloadAllFiles?: () => Promise<FileDownloadResult | undefined>
 }
 
 /**
@@ -389,7 +389,7 @@ export const TextEditor = React.memo<TextEditorProps>(
                 tree={fileTreeNodes}
                 selectedPath={props.activeDocumentId}
                 onSelect={props.onTabSelect}
-                onDownloadClick={onDownloadAllFiles}
+                onDownload={onDownloadAllFiles}
               />
             ),
           },

package/dist/index.cjs

@@ -6005,8 +6005,22 @@ var ApprovalCard = React3__namespace.memo(
 ApprovalCard.displayName = "ApprovalCard";
 var SessionHeader = React3__namespace.forwardRef(
   (_a, ref) => {
-    var _b = _a, { sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, className } = _b, props = __objRest(_b, ["sessions", "activeSessionId", "onNewSession", "onCloseSession", "onSelectSession", "className"]);
+    var _b = _a, { sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, className } = _b, props = __objRest(_b, ["sessions", "activeSessionId", "onNewSession", "onCloseSession", "onSelectSession", "onDownloadSession", "className"]);
     const activeSession = sessions == null ? void 0 : sessions.find((s) => s.id === activeSessionId);
+    const downloadRef = React3__namespace.useRef(null);
+    const handleDownloadClick = React3__namespace.useCallback(async () => {
+      if (!onDownloadSession) return;
+      const result = await onDownloadSession();
+      if (!result) return;
+      const url = URL.createObjectURL(result.blob);
+      const anchor = downloadRef.current;
+      if (anchor) {
+        anchor.href = url;
+        anchor.download = result.filename;
+        anchor.click();
+      }
+      URL.revokeObjectURL(url);
+    }, [onDownloadSession]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       __spreadProps(__spreadValues({
@@ -6016,7 +6030,8 @@ var SessionHeader = React3__namespace.forwardRef(
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-2 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate", children: activeSessionId ? (activeSession == null ? void 0 : activeSession.title) || "Untitled Session" : "New Session" }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-1 flex-none", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "ghost", size: "icon", onClick: onNewSession, className: "h-8 w-8", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "plus", className: "h-4 w-4" }) }),
+            onDownloadSession && /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "ghost", size: "icon", onClick: handleDownloadClick, className: "h-8 w-8", title: "Download Chat History", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "download", className: "h-4 w-4" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "ghost", size: "icon", onClick: onNewSession, className: "h-8 w-8", title: "New Session", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "plus", className: "h-4 w-4" }) }),
             /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "ghost", size: "icon", className: "h-8 w-8", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "clock", className: "h-4 w-4" }) }) }),
               /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "end", className: "w-64 max-h-80 overflow-y-auto", children: [
@@ -6035,7 +6050,8 @@ var SessionHeader = React3__namespace.forwardRef(
                   session.id
                 )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-sm text-center text-muted-foreground", children: "No previous sessions" })
               ] })
-            ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("a", { ref: downloadRef, style: { display: "none" } })
           ] })
         ]
       })
@@ -6064,7 +6080,8 @@ var RefinementPanel = React3__namespace.memo(
     activeSessionId,
     onNewSession,
     onCloseSession,
-    onSelectSession
+    onSelectSession,
+    onDownloadSession
   }) => {
     const [fileChangeState, setFileChangeState] = React3__namespace.useState("approval-requested");
     const [approval, setApproval] = React3__namespace.useState({});
@@ -6177,7 +6194,8 @@ var RefinementPanel = React3__namespace.memo(
           activeSessionId,
           onNewSession,
           onCloseSession,
-          onSelectSession
+          onSelectSession,
+          onDownloadSession
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -11440,12 +11458,26 @@ var FileTreeExplorer = React3__namespace.memo(
     searchPlaceholder = "Filter files...",
     onCreateClick,
     createButtonLabel,
-    onDownloadClick,
+    onDownload,
     headerClassName,
     className
   }) => {
+    const downloadRef = React3__namespace.useRef(null);
     const [searchQuery, setSearchQuery] = React3__namespace.useState("");
     const [userExpanded, setUserExpanded] = React3__namespace.useState(defaultExpanded || /* @__PURE__ */ new Set());
+    const handleDownloadClick = React3__namespace.useCallback(async () => {
+      if (!onDownload) return;
+      const result = await onDownload();
+      if (!result) return;
+      const url = URL.createObjectURL(result.blob);
+      const anchor = downloadRef.current;
+      if (anchor) {
+        anchor.href = url;
+        anchor.download = result.filename;
+        anchor.click();
+      }
+      URL.revokeObjectURL(url);
+    }, [onDownload]);
     React3__namespace.useEffect(() => {
       if (selectedPath) {
         const parts = selectedPath.split("/");
@@ -11504,16 +11536,17 @@ var FileTreeExplorer = React3__namespace.memo(
             ]
           }
         ) : null,
-        onDownloadClick ? /* @__PURE__ */ jsxRuntime.jsx(
+        onDownload ? /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
-            onClick: onDownloadClick,
+            onClick: handleDownloadClick,
             title: "Download all files",
             className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
             children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "download", size: "sm" })
           }
-        ) : null
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("a", { ref: downloadRef, style: { display: "none" } })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
         FileTree,
@@ -11717,7 +11750,7 @@ ${format === "json" ? formatJson(currentDocument.content) : currentDocument.cont
                 tree: fileTreeNodes,
                 selectedPath: props.activeDocumentId,
                 onSelect: props.onTabSelect,
-                onDownloadClick: onDownloadAllFiles
+                onDownload: onDownloadAllFiles
               }
             )
           },