@vertesia/ui 1.5.0-dev.20260722.120446Z → 1.5.0-dev.20260804.124748Z

package/src/features/agent/chat/ModernAgentOutput/ActiveWorkstreamsSummary.tsx

@@ -1,7 +1,7 @@
-import { cn } from '@vertesia/ui/core';
+import { Button, cn } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
-import { Bot } from 'lucide-react';
-import { useMemo } from 'react';
+import { Bot, ChevronDown, ChevronRight } from 'lucide-react';
+import { useEffect, useId, useMemo, useState } from 'react';
 import {
     formatWorkstreamName,
     getWorkstreamDisplayName,
@@ -11,17 +11,35 @@ import {
 
 interface ActiveWorkstreamsSummaryProps {
     activeWorkstreams: WorkstreamInfo[];
+    onSelectWorkstream?: (workstreamId: string) => void;
     className?: string;
 }
 
-export function ActiveWorkstreamsSummary({ activeWorkstreams, className }: ActiveWorkstreamsSummaryProps) {
+const COLLAPSED_WORKSTREAM_COUNT = 3;
+
+export function ActiveWorkstreamsSummary({
+    activeWorkstreams,
+    onSelectWorkstream,
+    className,
+}: ActiveWorkstreamsSummaryProps) {
     const { t } = useUITranslation();
+    const [isExpanded, setIsExpanded] = useState(false);
+    const listId = useId();
     const runningWorkstreams = useMemo(
         () => activeWorkstreams.filter((ws) => ws.status === 'running' || ws.status === 'canceling'),
         [activeWorkstreams],
     );
-    const visibleRunningWorkstreams = runningWorkstreams.slice(0, 3);
+    const visibleRunningWorkstreams = isExpanded
+        ? runningWorkstreams
+        : runningWorkstreams.slice(0, COLLAPSED_WORKSTREAM_COUNT);
     const hiddenRunningWorkstreamCount = Math.max(0, runningWorkstreams.length - visibleRunningWorkstreams.length);
+    const canExpand = runningWorkstreams.length > COLLAPSED_WORKSTREAM_COUNT;
+
+    useEffect(() => {
+        if (!canExpand) {
+            setIsExpanded(false);
+        }
+    }, [canExpand]);
 
     if (runningWorkstreams.length === 0) return null;
 
@@ -31,23 +49,20 @@ export function ActiveWorkstreamsSummary({ activeWorkstreams, className }: Activ
                 className="flex flex-col gap-1.5 rounded-2xl border border-border/70 bg-background/95 p-2 text-xs text-muted shadow-lg shadow-black/5"
                 aria-live="polite"
             >
-                <div className="flex items-center gap-2 px-1 font-medium">
-                    <Bot className="size-3.5 text-muted" aria-hidden="true" />
-                    <span>{t('agent.activeWorkstreams', { count: runningWorkstreams.length })}</span>
+                <div className="flex min-w-0 items-center gap-2 px-1 font-medium">
+                    <Bot className="size-3.5 shrink-0 text-muted" aria-hidden="true" />
+                    <span className="truncate">
+                        {t('agent.activeWorkstreams', { count: runningWorkstreams.length })}
+                    </span>
                 </div>
-                <div className="flex flex-col gap-0.5">
+                <div id={listId} className="flex flex-col gap-0.5">
                     {visibleRunningWorkstreams.map((workstream) => {
                         const workstreamName = getWorkstreamDisplayName(
                             workstream.workstream_id,
                             workstream.interaction,
                         );
-
-                        return (
-                            <span
-                                key={workstream.launch_id || workstream.workstream_id}
-                                className="flex min-w-0 items-center gap-2 rounded-lg px-1 py-1 text-sm text-foreground/80"
-                                title={workstreamName}
-                            >
+                        const content = (
+                            <>
                                 <span
                                     className={cn(
                                         'size-1.5 shrink-0 rounded-full',
@@ -61,13 +76,53 @@ export function ActiveWorkstreamsSummary({ activeWorkstreams, className }: Activ
                                         {formatWorkstreamName(workstream.phase)}
                                     </span>
                                 )}
-                            </span>
+                            </>
+                        );
+
+                        return onSelectWorkstream ? (
+                            <Button
+                                key={workstream.launch_id || workstream.workstream_id}
+                                type="button"
+                                variant="ghost"
+                                className="h-auto min-w-0 justify-start gap-2 rounded-lg px-1 py-1 text-sm text-foreground/80"
+                                title={workstreamName}
+                                onClick={() => {
+                                    setIsExpanded(false);
+                                    onSelectWorkstream(workstream.workstream_id);
+                                }}
+                            >
+                                {content}
+                                <ChevronRight className="ms-auto size-3.5 shrink-0 rtl:rotate-180" aria-hidden="true" />
+                            </Button>
+                        ) : (
+                            <div
+                                key={workstream.launch_id || workstream.workstream_id}
+                                className="flex min-w-0 items-center gap-2 rounded-lg px-1 py-1 text-sm text-foreground/80"
+                                title={workstreamName}
+                            >
+                                {content}
+                            </div>
                         );
                     })}
-                    {hiddenRunningWorkstreamCount > 0 && (
-                        <span className="px-1 py-1 text-xs text-muted">+{hiddenRunningWorkstreamCount}</span>
-                    )}
                 </div>
+                {canExpand && (
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 w-fit shrink-0 gap-1 rounded-xl px-2.5 text-xs text-muted"
+                        aria-expanded={isExpanded}
+                        aria-controls={listId}
+                        onClick={() => setIsExpanded((expanded) => !expanded)}
+                    >
+                        {!isExpanded && <span>+{hiddenRunningWorkstreamCount}</span>}
+                        {isExpanded ? t('agent.showLess') : t('agent.showMore')}
+                        <ChevronDown
+                            className={cn('size-3.5 transition-transform', isExpanded && 'rotate-180')}
+                            aria-hidden="true"
+                        />
+                    </Button>
+                )}
             </output>
         </div>
     );

package/src/features/agent/chat/ModernAgentOutput/AgentMarkdownAnchor.test.tsx

@@ -0,0 +1,79 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from '@testing-library/react';
+import type React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { createAgentMarkdownAnchor } from './AgentMarkdownAnchor';
+
+afterEach(() => cleanup());
+
+describe('createAgentMarkdownAnchor', () => {
+    it.each([
+        'https://example.com/store/objects/doc-1?view=full#section',
+        '//example.com/store/collections/col-1?view=full#section',
+    ])('keeps external resource-shaped URLs external: %s', (href) => {
+        const StoreLinkComponent = vi.fn(() => null);
+        const CollectionLinkComponent = vi.fn(() => null);
+        const Anchor = createAgentMarkdownAnchor({ StoreLinkComponent, CollectionLinkComponent });
+
+        render(<Anchor href={href}>External</Anchor>);
+
+        expect(screen.getByRole('link', { name: 'External' }).getAttribute('href')).toBe(href);
+        expect(screen.getByRole('link', { name: 'External' }).getAttribute('target')).toBe('_blank');
+        expect(StoreLinkComponent).not.toHaveBeenCalled();
+        expect(CollectionLinkComponent).not.toHaveBeenCalled();
+    });
+
+    it('passes a clean document id and styling to the host document link', () => {
+        const StoreLinkComponent = ({
+            href,
+            documentId,
+            className,
+            children,
+        }: {
+            href: string;
+            documentId: string;
+            className?: string;
+            children: React.ReactNode;
+        }) => (
+            <a href={href} className={className} data-document-id={documentId}>
+                {children}
+            </a>
+        );
+        const Anchor = createAgentMarkdownAnchor({
+            StoreLinkComponent,
+            addStickyParams: (href) => `${href}&a=account-1`,
+        });
+
+        render(
+            <Anchor href="/store/objects/doc-1?revision=rev-1#properties" className="resource-link">
+                Document
+            </Anchor>,
+        );
+
+        const link = screen.getByRole('link', { name: 'Document' });
+        expect(link.getAttribute('data-document-id')).toBe('doc-1');
+        expect(link.getAttribute('href')).toBe('/store/objects/doc-1?revision=rev-1#properties&a=account-1');
+        expect(link.className).toBe('resource-link');
+    });
+
+    it('passes a clean collection id to the host collection link', () => {
+        const CollectionLinkComponent = ({
+            href,
+            collectionId,
+            children,
+        }: {
+            href: string;
+            collectionId: string;
+            children: React.ReactNode;
+        }) => (
+            <a href={href} data-collection-id={collectionId}>
+                {children}
+            </a>
+        );
+        const Anchor = createAgentMarkdownAnchor({ CollectionLinkComponent });
+
+        render(<Anchor href="/store/collections/col-1?tab=objects#top">Collection</Anchor>);
+
+        expect(screen.getByRole('link', { name: 'Collection' }).getAttribute('data-collection-id')).toBe('col-1');
+    });
+});

package/src/features/agent/chat/ModernAgentOutput/AgentMarkdownAnchor.tsx

@@ -0,0 +1,94 @@
+import { NavLink } from '@vertesia/ui/router';
+import type React from 'react';
+
+/** Host-provided renderer for store/document links (e.g. to open a side panel instead of navigating). */
+export type StoreLinkComponentType = React.ComponentType<{
+    href: string;
+    documentId: string;
+    children: React.ReactNode;
+    className?: string;
+}>;
+
+/** Host-provided renderer for store/collection links. */
+export type CollectionLinkComponentType = React.ComponentType<{
+    href: string;
+    collectionId: string;
+    children: React.ReactNode;
+    className?: string;
+}>;
+
+export interface AgentMarkdownAnchorOptions {
+    /** Custom component to render store/document links instead of default NavLink navigation. */
+    StoreLinkComponent?: StoreLinkComponentType;
+    /** Custom component to render store/collection links instead of default NavLink navigation. */
+    CollectionLinkComponent?: CollectionLinkComponentType;
+    /**
+     * Applies tenant sticky params (account `a` / project `p`) to internal routes so copy-link and
+     * open-in-new-tab preserve the current tenant. Left undefined when no router is in scope.
+     */
+    addStickyParams?: (href: string) => string;
+}
+
+interface AnchorProps {
+    node?: unknown;
+    ref?: unknown;
+    href?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+
+function getInternalRouteId(href: string, routePrefix: string): string | undefined {
+    if (!href.startsWith(routePrefix)) {
+        return undefined;
+    }
+    return href.slice(routePrefix.length).split(/[/?#]/, 1)[0] || undefined;
+}
+
+/**
+ * Builds the markdown `a` renderer used across agent chat.
+ *
+ * Custom-scheme links (`store:`, `collection:`, `interaction:`, `prompt:`, ...) are resolved by the
+ * host's AgentResourceResolver upstream in MarkdownLink, so navigable targets reach this renderer as
+ * concrete paths. We route relative paths through NavLink (preserving tenant params); only document
+ * and collection paths get the optional host-provided link components. External URLs open in a new
+ * tab, matching prior behavior.
+ */
+export function createAgentMarkdownAnchor(options: AgentMarkdownAnchorOptions = {}) {
+    const { StoreLinkComponent, CollectionLinkComponent, addStickyParams } = options;
+
+    return function AgentMarkdownAnchor({ node: _node, ref: _ref, ...props }: AnchorProps) {
+        const href = props.href || '';
+        const isInternal = href.startsWith('/') && !href.startsWith('//');
+        const withParams = isInternal && addStickyParams ? addStickyParams(href) : href;
+        const documentId = isInternal ? getInternalRouteId(href, '/store/objects/') : undefined;
+
+        if (documentId && StoreLinkComponent) {
+            return (
+                <StoreLinkComponent href={withParams} documentId={documentId} className={props.className}>
+                    {props.children}
+                </StoreLinkComponent>
+            );
+        }
+
+        const collectionId = isInternal ? getInternalRouteId(href, '/store/collections/') : undefined;
+        if (collectionId && CollectionLinkComponent) {
+            return (
+                <CollectionLinkComponent href={withParams} collectionId={collectionId} className={props.className}>
+                    {props.children}
+                </CollectionLinkComponent>
+            );
+        }
+
+        // Any other relative in-app path (e.g. /studio/interactions/:id, /store/workflows/:id)
+        // navigates internally so tenant params are preserved and the SPA is not reloaded.
+        if (isInternal) {
+            return (
+                <NavLink href={withParams} className={props.className} topLevelNav>
+                    {props.children}
+                </NavLink>
+            );
+        }
+
+        return <a {...props} target="_blank" rel="noopener noreferrer" />;
+    };
+}