@vertesia/ui 1.0.0-dev.20260128.144200 → 1.0.0-dev.20260225.024852Z

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { Button } from "@vertesia/ui/core";
+import { MarkdownRenderer } from "@vertesia/ui/widgets";
 import { MessageSquare, CheckCircle, XCircle, AlertCircle, HelpCircle, Send } from "lucide-react";
 
 /** Option for user to select */
@@ -186,9 +187,9 @@ export function AskUserWidget({
                             </div>
                         )}
                         <div className="flex-1 min-w-0">
-                            <h4 className={`text-sm font-semibold text-gray-900 dark:text-gray-100 ${questionClassName || ""}`}>
-                                {question}
-                            </h4>
+                            <div className={`prose prose-sm dark:prose-invert max-w-none text-gray-900 dark:text-gray-100 ${questionClassName || ""}`}>
+                                <MarkdownRenderer>{question}</MarkdownRenderer>
+                            </div>
                             {description && (
                                 <p className={`mt-1 text-sm text-gray-600 dark:text-gray-400 ${descriptionClassName || ""}`}>
                                     {description}

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

@@ -0,0 +1,120 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { FileTextIcon, Loader2Icon, X } from 'lucide-react';
+import { useUserSession } from '@vertesia/ui/session';
+import { Button } from '@vertesia/ui/core';
+import { MarkdownRenderer } from '@vertesia/ui/widgets';
+import { DocumentTabBar } from './DocumentTabBar.js';
+import type { OpenDocument } from './types/document.js';
+
+interface DocumentPanelProps {
+    isOpen: boolean;
+    onClose: () => void;
+    documents: OpenDocument[];
+    activeDocumentId: string | null;
+    onSelectDocument: (id: string) => void;
+    onCloseDocument: (id: string) => void;
+    refreshKey: number;
+    runId?: string;
+}
+
+function DocumentPanelComponent({
+    isOpen,
+    onClose,
+    documents,
+    activeDocumentId,
+    onSelectDocument,
+    onCloseDocument,
+    refreshKey,
+    runId,
+}: DocumentPanelProps) {
+    const { client } = useUserSession();
+    const [content, setContent] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [docName, setDocName] = useState<string | null>(null);
+
+    const fetchContent = useCallback(async (docId: string) => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const [textResult, obj] = await Promise.all([
+                client.store.objects.getObjectText(docId),
+                client.store.objects.retrieve(docId),
+            ]);
+            setContent(textResult.text);
+            setDocName(obj.name);
+        } catch (err: unknown) {
+            const message = err instanceof Error ? err.message : 'Failed to load document';
+            setError(message);
+            setContent(null);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [client]);
+
+    // Fetch content when active document changes or refreshKey bumps
+    useEffect(() => {
+        if (activeDocumentId && isOpen) {
+            fetchContent(activeDocumentId);
+        }
+    }, [activeDocumentId, refreshKey, isOpen, fetchContent]);
+
+    if (!isOpen || documents.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className="h-full shadow-xl border border-muted/20 overflow-hidden flex flex-col">
+            {/* Header */}
+            <div className="flex items-center justify-between px-3 py-2 border-b border-muted/20 shrink-0">
+                <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'}
+                    </h3>
+                </div>
+                <Button variant="ghost" size="sm" onClick={onClose}>
+                    <X className="size-4" />
+                    <span className="sr-only">Close</span>
+                </Button>
+            </div>
+
+            {/* Tab bar */}
+            <div className="shrink-0">
+                <DocumentTabBar
+                    documents={documents}
+                    activeId={activeDocumentId}
+                    onSelect={onSelectDocument}
+                    onClose={onCloseDocument}
+                />
+            </div>
+
+            {/* Content area */}
+            <div className="flex-1 overflow-y-auto px-4 py-4">
+                {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>
+                    </div>
+                ) : error ? (
+                    <div className="p-4 rounded-md bg-destructive/10 text-destructive text-sm">
+                        {error}
+                    </div>
+                ) : content ? (
+                    <div className="prose prose-sm dark:prose-invert max-w-none">
+                        <MarkdownRenderer artifactRunId={runId}>
+                            {content}
+                        </MarkdownRenderer>
+                    </div>
+                ) : (
+                    <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>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export const DocumentPanel = React.memo(DocumentPanelComponent);

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

@@ -0,0 +1,49 @@
+import { XIcon } from 'lucide-react';
+import { cn } from '@vertesia/ui/core';
+import type { OpenDocument } from './types/document.js';
+
+interface DocumentTabBarProps {
+    documents: OpenDocument[];
+    activeId: string | null;
+    onSelect: (id: string) => void;
+    onClose: (id: string) => void;
+}
+
+export function DocumentTabBar({ documents, activeId, onSelect, onClose }: DocumentTabBarProps) {
+    if (documents.length === 0) return null;
+
+    return (
+        <div className="flex items-center gap-1 overflow-x-auto px-2 py-1.5 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
+            {documents.map((doc) => {
+                const isActive = doc.id === activeId;
+                return (
+                    <button
+                        key={doc.id}
+                        onClick={() => onSelect(doc.id)}
+                        className={cn(
+                            'group flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md transition-colors whitespace-nowrap max-w-[200px]',
+                            isActive
+                                ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm'
+                                : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700/50'
+                        )}
+                    >
+                        <span className="truncate">{doc.title}</span>
+                        <span
+                            role="button"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                onClose(doc.id);
+                            }}
+                            className={cn(
+                                'shrink-0 p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-600',
+                                isActive ? 'opacity-60 hover:opacity-100' : 'opacity-0 group-hover:opacity-60 hover:!opacity-100'
+                            )}
+                        >
+                            <XIcon className="size-3" />
+                        </span>
+                    </button>
+                );
+            })}
+        </div>
+    );
+}