@vertesia/ui 1.0.0-dev.20260227.112605Z → 1.0.0-dev.20260331.091034Z

package/src/features/agent/chat/ArtifactsTab.tsx

@@ -0,0 +1,197 @@
+import { Button } from '@vertesia/ui/core';
+import { useUserSession } from '@vertesia/ui/session';
+import {
+    ChevronDownIcon,
+    ChevronRightIcon,
+    FileIcon,
+    FolderIcon,
+    FolderOpenIcon,
+    Loader2Icon,
+    PackageIcon,
+    RefreshCwIcon,
+} from 'lucide-react';
+import React, { useCallback, useState } from 'react';
+import { useUITranslation } from '../../../i18n/index.js';
+import { useArtifacts, type ArtifactTreeNode } from './hooks/useArtifacts.js';
+
+// ---------------------------------------------------------------------------
+// Tree node component
+// ---------------------------------------------------------------------------
+
+interface TreeNodeProps {
+    node: ArtifactTreeNode;
+    depth: number;
+    runId: string;
+    onDownload: (relativePath: string) => void;
+    downloadingPath: string | null;
+}
+//** Convert a raw directory segment (e.g. "out_files") into a readable label ("Out Files"). */
+function formatDirectoryLabel(name: string): string {
+    return name
+        .replace(/[_-]/g, ' ')
+        .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function TreeNode({ node, depth, runId, onDownload, downloadingPath }: TreeNodeProps) {
+    const [expanded, setExpanded] = useState(true);
+
+    if (node.isDirectory) {
+        return (
+            <div>
+                <button
+                    className="flex items-center gap-1.5 w-full text-left py-1 px-1 rounded hover:bg-muted/30 text-sm"
+                    style={{ paddingLeft: `${depth * 16 + 4}px` }}
+                    onClick={() => setExpanded((prev) => !prev)}
+                >
+                    {expanded
+                        ? <ChevronDownIcon className="size-3.5 shrink-0 text-muted" />
+                        : <ChevronRightIcon className="size-3.5 shrink-0 text-muted" />}
+                    {expanded
+                        ? <FolderOpenIcon className="size-4 shrink-0 text-info" />
+                        : <FolderIcon className="size-4 shrink-0 text-info" />}
+                    <span className="truncate font-medium">{formatDirectoryLabel(node.name)}</span>
+                </button>
+                {expanded && node.children.map((child) => (
+                    <TreeNode
+                        key={child.path}
+                        node={child}
+                        depth={depth + 1}
+                        runId={runId}
+                        onDownload={onDownload}
+                        downloadingPath={downloadingPath}
+                    />
+                ))}
+            </div>
+        );
+    }
+
+    const isDownloading = downloadingPath === node.path;
+
+    return (
+        <button
+            className="flex items-center gap-1.5 w-full text-left py-1 px-1 rounded hover:bg-muted/30 text-sm"
+            style={{ paddingLeft: `${depth * 16 + 4}px` }}
+            onClick={() => onDownload(node.path)}
+            disabled={isDownloading}
+        >
+            {isDownloading
+                ? <Loader2Icon className="size-3.5 shrink-0 animate-spin text-info" />
+                : <span className="size-3.5 shrink-0" />}
+            <FileIcon className="size-4 shrink-0 text-muted" />
+            <span className="truncate">{node.name}</span>
+        </button>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Main tab component
+// ---------------------------------------------------------------------------
+
+interface ArtifactsTabProps {
+    runId?: string;
+    refreshKey?: number;
+}
+
+function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
+    const { t } = useUITranslation();
+    const { client } = useUserSession();
+    const { tree, flatFiles, isLoading, error, refresh } = useArtifacts(client, runId, refreshKey);
+    const [downloadingPath, setDownloadingPath] = useState<string | null>(null);
+
+    const handleDownload = useCallback(async (relativePath: string) => {
+        if (!runId) return;
+        setDownloadingPath(relativePath);
+        // Open the tab synchronously (before the await) so the browser treats it as
+        // a direct user action and doesn't block it as a popup.
+        const newTab = window.open('', '_blank');
+        try {
+            const { url } = await client.files.getArtifactDownloadUrl(runId, relativePath, 'attachment');
+            if (newTab) {
+                newTab.location.href = url;
+            }
+        } catch (err) {
+            console.error('Failed to get artifact download URL:', err);
+            newTab?.close();
+        } finally {
+            setDownloadingPath(null);
+        }
+    }, [client, runId]);
+
+    if (!runId) {
+        return (
+            <div className="flex flex-col items-center justify-center py-8 text-muted">
+                <PackageIcon className="size-8 mb-2" />
+                <span className="text-sm">No run selected</span>
+            </div>
+        );
+    }
+
+    if (isLoading && flatFiles.length === 0) {
+        return (
+            <div className="flex flex-col items-center justify-center py-8 text-muted">
+                <Loader2Icon className="size-6 animate-spin mb-2" />
+                <span className="text-sm">{t('agent.loadingArtifacts')}</span>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="flex flex-col items-center justify-center py-8 text-muted">
+                <span className="text-sm text-destructive mb-2">{error}</span>
+                <Button variant="ghost" size="sm" onClick={refresh}>
+                    <RefreshCwIcon className="size-3.5 mr-1.5" />
+                    {t('agent.retry')}
+                </Button>
+            </div>
+        );
+    }
+
+    if (flatFiles.length === 0) {
+        return (
+            <div className="flex flex-col items-center justify-center py-8 text-muted">
+                <PackageIcon className="size-8 mb-2" />
+                <span className="text-sm">{t('agent.noArtifactsYet')}</span>
+                <Button variant="ghost" size="sm" className="mt-2" onClick={refresh}>
+                    <RefreshCwIcon className="size-3.5 mr-1.5" />
+                    {t('agent.refresh')}
+                </Button>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col h-full">
+            {/* Top bar */}
+            <div className="flex items-center justify-between px-3 py-2 border-b text-xs text-muted">
+                <span>
+                    {flatFiles.length} file{flatFiles.length !== 1 ? 's' : ''}
+                </span>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={refresh}
+                    disabled={isLoading}
+                    className="h-6 w-6 p-0"
+                >
+                    <RefreshCwIcon className={`size-3.5 ${isLoading ? 'animate-spin' : ''}`} />
+                </Button>
+            </div>
+
+            {/* Tree */}
+            <div className="flex-1 overflow-y-auto p-2">
+                {tree.map((node) => (
+                    <TreeNode
+                        key={node.path}
+                        node={node}
+                        depth={0}
+                        runId={runId}
+                        onDownload={handleDownload}
+                        downloadingPath={downloadingPath}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export const ArtifactsTab = React.memo(ArtifactsTabComponent);

package/src/features/agent/chat/AskUserWidget.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Button } from "@vertesia/ui/core";
+import { useUITranslation } from "@vertesia/ui/i18n";
 import { MarkdownRenderer } from "@vertesia/ui/widgets";
 import { MessageSquare, CheckCircle, XCircle, AlertCircle, HelpCircle, Send } from "lucide-react";
 
@@ -112,7 +113,7 @@ export function AskUserWidget({
     onSubmit,
     allowFreeResponse = false,
     multiSelect = false,
-    placeholder = "Type your response...",
+    placeholder,
     isLoading = false,
     icon,
     variant = "default",
@@ -131,6 +132,8 @@ export function AskUserWidget({
     inputClassName,
     submitButtonClassName,
 }: AskUserWidgetProps) {
+    const { t } = useUITranslation();
+    const resolvedPlaceholder = placeholder ?? t('agent.typeYourResponse');
     const [inputValue, setInputValue] = React.useState("");
     const [selectedOptions, setSelectedOptions] = React.useState<Set<string>>(new Set());
     const inputRef = React.useRef<HTMLInputElement>(null);
@@ -243,7 +246,7 @@ export function AskUserWidget({
                                         className="flex items-center gap-2"
                                     >
                                         <Send className="size-4" />
-                                        Submit Selection{selectedOptions.size > 0 ? ` (${selectedOptions.size})` : ""}
+                                        {selectedOptions.size > 0 ? t('agent.submitSelectionCount', { count: selectedOptions.size }) : t('agent.submitSelection')}
                                     </Button>
                                 </div>
                             </div>
@@ -297,7 +300,7 @@ export function AskUserWidget({
                                 value={inputValue}
                                 onChange={(e) => setInputValue(e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                placeholder={placeholder}
+                                placeholder={resolvedPlaceholder}
                                 disabled={isLoading}
                                 className={`flex-1 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent ${inputClassName || ""}`}
                             />
@@ -307,7 +310,7 @@ export function AskUserWidget({
                                 disabled={isLoading || !inputValue.trim()}
                                 className={submitButtonClassName}
                             >
-                                {isLoading ? "..." : "Send"}
+                                {isLoading ? "..." : t('agent.send')}
                             </Button>
                         </div>
                     </div>
@@ -337,12 +340,15 @@ export function ConfirmationWidget({
     description,
     onConfirm,
     onCancel,
-    confirmLabel = "Yes",
-    cancelLabel = "No",
+    confirmLabel,
+    cancelLabel,
     isLoading = false,
     variant = "default",
     className,
 }: ConfirmationWidgetProps) {
+    const { t } = useUITranslation();
+    const resolvedConfirmLabel = confirmLabel ?? t('agent.yes');
+    const resolvedCancelLabel = cancelLabel ?? t('agent.no');
     return (
         <AskUserWidget
             question={question}
@@ -353,12 +359,12 @@ export function ConfirmationWidget({
             options={[
                 {
                     id: "confirm",
-                    label: confirmLabel,
+                    label: resolvedConfirmLabel,
                     icon: <CheckCircle className="size-4" />,
                 },
                 {
                     id: "cancel",
-                    label: cancelLabel,
+                    label: resolvedCancelLabel,
                     icon: <XCircle className="size-4" />,
                 },
             ]}

package/src/features/agent/chat/DocumentPanel.tsx

@@ -1,8 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { FileTextIcon, Loader2Icon, X } from 'lucide-react';
+import { ExternalLinkIcon, FileTextIcon, Loader2Icon, X } from 'lucide-react';
 import { useUserSession } from '@vertesia/ui/session';
 import { Button } from '@vertesia/ui/core';
+import { NavLink } from '@vertesia/ui/router';
 import { MarkdownRenderer } from '@vertesia/ui/widgets';
+import { useUITranslation } from '../../../i18n/index.js';
 import { DocumentTabBar } from './DocumentTabBar.js';
 import type { OpenDocument } from './types/document.js';
 
@@ -28,6 +30,7 @@ function DocumentPanelComponent({
     runId,
 }: DocumentPanelProps) {
     const { client } = useUserSession();
+    const { t } = useUITranslation();
     const [content, setContent] = useState<string | null>(null);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
@@ -44,7 +47,7 @@ function DocumentPanelComponent({
             setContent(textResult.text);
             setDocName(obj.name);
         } catch (err: unknown) {
-            const message = err instanceof Error ? err.message : 'Failed to load document';
+            const message = err instanceof Error ? err.message : t('agent.failedToLoadDocument');
             setError(message);
             setContent(null);
         } finally {
@@ -70,13 +73,25 @@ function DocumentPanelComponent({
                 <div className="flex items-center gap-2 min-w-0">
                     <FileTextIcon className="size-4 text-muted shrink-0" />
                     <h3 className="font-bold text-sm truncate">
-                        {docName || 'Document'}
+                        {docName || t('agent.document')}
                     </h3>
                 </div>
-                <Button variant="ghost" size="sm" onClick={onClose}>
-                    <X className="size-4" />
-                    <span className="sr-only">Close</span>
-                </Button>
+                <div className="flex items-center gap-1">
+                    {activeDocumentId && (
+                        <NavLink
+                            href={`/store/objects/${activeDocumentId}#overview`}
+                            topLevelNav
+                            className="inline-flex items-center justify-center rounded-md text-sm font-medium h-8 w-8 hover:bg-muted/20 text-muted hover:text-foreground"
+                        >
+                            <ExternalLinkIcon className="size-4" />
+                            <span className="sr-only">{t('agent.openDocument')}</span>
+                        </NavLink>
+                    )}
+                    <Button variant="ghost" size="sm" onClick={onClose}>
+                        <X className="size-4" />
+                        <span className="sr-only">{t('agent.close')}</span>
+                    </Button>
+                </div>
             </div>
 
             {/* Tab bar */}
@@ -94,7 +109,7 @@ function DocumentPanelComponent({
                 {isLoading ? (
                     <div className="flex items-center justify-center py-12">
                         <Loader2Icon className="size-5 animate-spin text-muted" />
-                        <span className="ml-2 text-sm text-muted">Loading document...</span>
+                        <span className="ml-2 text-sm text-muted">{t('agent.loadingDocument')}</span>
                     </div>
                 ) : error ? (
                     <div className="p-4 rounded-md bg-destructive/10 text-destructive text-sm">
@@ -109,7 +124,7 @@ function DocumentPanelComponent({
                 ) : (
                     <div className="flex flex-col items-center justify-center py-12 text-muted">
                         <FileTextIcon className="size-8 mb-2" />
-                        <span className="text-sm">No content available</span>
+                        <span className="text-sm">{t('agent.noContentAvailable')}</span>
                     </div>
                 )}
             </div>

package/src/features/agent/chat/ImageLightbox.tsx

@@ -1,5 +1,6 @@
 import { useState, createContext, useContext, useCallback, ReactNode } from "react";
 import { X, ExternalLink } from "lucide-react";
+import { useUITranslation } from '../../../i18n/index.js';
 
 interface ImageLightboxContextValue {
     openImage: (src: string, alt?: string) => void;
@@ -35,6 +36,8 @@ export function ImageLightboxProvider({ children }: ImageLightboxProviderProps)
         setImage(null);
     }, []);
 
+    const { t } = useUITranslation();
+
     return (
         <ImageLightboxContext.Provider value={{ openImage, closeImage }}>
             {children}
@@ -46,14 +49,14 @@ export function ImageLightboxProvider({ children }: ImageLightboxProviderProps)
                     <div className="relative max-w-[90vw] max-h-[90vh]">
                         <img
                             src={image.src}
-                            alt={image.alt || "Enlarged view"}
+                            alt={image.alt || t('agent.enlargedView')}
                             className="max-w-full max-h-[90vh] object-contain rounded-lg shadow-2xl"
                         />
                         {/* Close button */}
                         <button
                             className="absolute top-2 right-2 text-white bg-black/50 rounded-full p-2 hover:bg-black/70 transition-colors"
                             onClick={closeImage}
-                            title="Close"
+                            title={t('agent.close')}
                         >
                             <X className="size-6" />
                         </button>
@@ -64,7 +67,7 @@ export function ImageLightboxProvider({ children }: ImageLightboxProviderProps)
                             rel="noopener noreferrer"
                             className="absolute bottom-2 right-2 text-white bg-black/50 rounded-full p-2 hover:bg-black/70 transition-colors"
                             onClick={(e) => e.stopPropagation()}
-                            title="Open in new tab"
+                            title={t('agent.openInNewTab')}
                         >
                             <ExternalLink className="size-5" />
                         </a>