@vertesia/ui 1.6.0-dev.20261004.085740Z → 1.6.0-dev.20261008.064737Z

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

@@ -64,6 +64,12 @@ export interface AskUserWidgetProps {
     compact?: boolean;
     /** Render as a resolved transcript prompt, without pending controls */
     answered?: boolean;
+    /** Optional action beside the question, inside the existing card header. */
+    headerAction?: React.ReactNode;
+    /** ID of the response controls for an accessible disclosure action. */
+    responseControlsId?: string;
+    /** Hide response controls while keeping drafts and selections mounted. */
+    responseControlsHidden?: boolean;
 
     // Styling props for full customization
     /** Additional className for the outer container */
@@ -146,6 +152,9 @@ export function AskUserWidget({
     hideBorder = false,
     compact = false,
     answered = false,
+    headerAction,
+    responseControlsId,
+    responseControlsHidden = false,
     // Styling props
     className,
     cardClassName,
@@ -260,124 +269,127 @@ export function AskUserWidget({
                                     )}
                                 </div>
                             </div>
+                            {headerAction}
                         </div>
                     </div>
 
-                    {safeOptions.length > 0 && (
-                        <div className={cn('flex flex-col gap-1.5 px-3 pb-3 pt-0', optionsClassName)}>
-                            {multiSelect ? (
-                                <>
-                                    {safeOptions.map((option) => {
-                                        const selected = selectedOptions.has(option.id);
-                                        return (
-                                            <label
-                                                key={option.id}
-                                                className={cn(
-                                                    'flex cursor-pointer items-start gap-2.5 rounded-md border px-3 py-2 text-start transition-colors',
-                                                    selected
-                                                        ? 'border-info/60 bg-info/10'
-                                                        : 'border-border bg-background/70 hover:bg-mixer-muted/15',
-                                                    isLoading && 'cursor-not-allowed opacity-50',
-                                                    buttonClassName,
-                                                )}
-                                            >
-                                                <input
-                                                    type="checkbox"
-                                                    checked={selected}
-                                                    onChange={() => toggleOption(option.id)}
-                                                    disabled={isLoading}
-                                                    className="mt-1 size-4 rounded border-border bg-background text-info focus:ring-info"
-                                                />
-                                                <span className="min-w-0 flex-1">
-                                                    <span className="flex items-center gap-2 text-sm font-medium leading-5 text-foreground">
-                                                        {option.icon}
-                                                        <span className="break-words">{option.label}</span>
-                                                    </span>
-                                                    {option.description && (
-                                                        <span className="mt-0.5 block break-words text-xs leading-5 text-muted">
-                                                            {option.description}
-                                                        </span>
+                    <div id={responseControlsId} hidden={responseControlsHidden}>
+                        {safeOptions.length > 0 && (
+                            <div className={cn('flex flex-col gap-1.5 px-3 pb-3 pt-0', optionsClassName)}>
+                                {multiSelect ? (
+                                    <>
+                                        {safeOptions.map((option) => {
+                                            const selected = selectedOptions.has(option.id);
+                                            return (
+                                                <label
+                                                    key={option.id}
+                                                    className={cn(
+                                                        'flex cursor-pointer items-start gap-2.5 rounded-md border px-3 py-2 text-start transition-colors',
+                                                        selected
+                                                            ? 'border-info/60 bg-info/10'
+                                                            : 'border-border bg-background/70 hover:bg-mixer-muted/15',
+                                                        isLoading && 'cursor-not-allowed opacity-50',
+                                                        buttonClassName,
                                                     )}
-                                                </span>
-                                            </label>
-                                        );
-                                    })}
-                                    <div className="pt-1">
-                                        <Button
-                                            size="sm"
-                                            onClick={handleMultiSubmit}
-                                            disabled={isLoading || selectedOptions.size === 0}
-                                            className="inline-flex items-center gap-2"
+                                                >
+                                                    <input
+                                                        type="checkbox"
+                                                        checked={selected}
+                                                        onChange={() => toggleOption(option.id)}
+                                                        disabled={isLoading}
+                                                        className="mt-1 size-4 rounded border-border bg-background text-info focus:ring-info"
+                                                    />
+                                                    <span className="min-w-0 flex-1">
+                                                        <span className="flex items-center gap-2 text-sm font-medium leading-5 text-foreground">
+                                                            {option.icon}
+                                                            <span className="break-words">{option.label}</span>
+                                                        </span>
+                                                        {option.description && (
+                                                            <span className="mt-0.5 block break-words text-xs leading-5 text-muted">
+                                                                {option.description}
+                                                            </span>
+                                                        )}
+                                                    </span>
+                                                </label>
+                                            );
+                                        })}
+                                        <div className="pt-1">
+                                            <Button
+                                                size="sm"
+                                                onClick={handleMultiSubmit}
+                                                disabled={isLoading || selectedOptions.size === 0}
+                                                className="inline-flex items-center gap-2"
+                                            >
+                                                <Send className="size-4" />
+                                                {selectedOptions.size > 0
+                                                    ? t('agent.submitSelectionCount', { count: selectedOptions.size })
+                                                    : t('agent.submitSelection')}
+                                            </Button>
+                                        </div>
+                                    </>
+                                ) : (
+                                    safeOptions.map((option) => (
+                                        <button
+                                            type="button"
+                                            key={option.id}
+                                            onClick={() => onSelect?.(option.id)}
+                                            disabled={isLoading}
+                                            className={cn(
+                                                'flex w-full cursor-pointer items-start gap-2.5 rounded-md border border-border bg-background/70 px-3 py-2 text-start transition-colors',
+                                                'hover:bg-mixer-muted/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                                                isLoading && 'cursor-not-allowed opacity-50',
+                                                buttonClassName,
+                                            )}
                                         >
-                                            <Send className="size-4" />
-                                            {selectedOptions.size > 0
-                                                ? t('agent.submitSelectionCount', { count: selectedOptions.size })
-                                                : t('agent.submitSelection')}
-                                        </Button>
-                                    </div>
-                                </>
-                            ) : (
-                                safeOptions.map((option) => (
-                                    <button
-                                        type="button"
-                                        key={option.id}
-                                        onClick={() => onSelect?.(option.id)}
+                                            <span
+                                                className="mt-1 size-4 flex-shrink-0 rounded-full border border-border"
+                                                aria-hidden="true"
+                                            />
+                                            <span className="min-w-0 flex-1">
+                                                <span className="flex items-center gap-2 text-sm font-medium leading-5 text-foreground">
+                                                    {option.icon}
+                                                    <span className="break-words">{option.label}</span>
+                                                </span>
+                                                {option.description && (
+                                                    <span className="mt-0.5 block break-words text-xs leading-5 text-muted">
+                                                        {option.description}
+                                                    </span>
+                                                )}
+                                            </span>
+                                        </button>
+                                    ))
+                                )}
+                            </div>
+                        )}
+
+                        {allowFreeResponse && (
+                            <div className={cn('px-3 pb-3 pt-0', inputContainerClassName)}>
+                                <div className="flex gap-2">
+                                    <input
+                                        ref={inputRef}
+                                        type="text"
+                                        value={inputValue}
+                                        onChange={(e) => setInputValue(e.target.value)}
+                                        onKeyDown={handleKeyDown}
+                                        placeholder={resolvedPlaceholder}
                                         disabled={isLoading}
                                         className={cn(
-                                            'flex w-full cursor-pointer items-start gap-2.5 rounded-md border border-border bg-background/70 px-3 py-2 text-start transition-colors',
-                                            'hover:bg-mixer-muted/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                                            isLoading && 'cursor-not-allowed opacity-50',
-                                            buttonClassName,
+                                            'min-w-0 flex-1 rounded-md border border-border bg-background/70 px-3 py-2 text-sm text-foreground focus:border-transparent focus:ring-2 focus:ring-ring',
+                                            inputClassName,
                                         )}
+                                    />
+                                    <Button
+                                        size="sm"
+                                        onClick={handleSubmit}
+                                        disabled={isLoading || !inputValue.trim()}
+                                        className={submitButtonClassName}
                                     >
-                                        <span
-                                            className="mt-1 size-4 flex-shrink-0 rounded-full border border-border"
-                                            aria-hidden="true"
-                                        />
-                                        <span className="min-w-0 flex-1">
-                                            <span className="flex items-center gap-2 text-sm font-medium leading-5 text-foreground">
-                                                {option.icon}
-                                                <span className="break-words">{option.label}</span>
-                                            </span>
-                                            {option.description && (
-                                                <span className="mt-0.5 block break-words text-xs leading-5 text-muted">
-                                                    {option.description}
-                                                </span>
-                                            )}
-                                        </span>
-                                    </button>
-                                ))
-                            )}
-                        </div>
-                    )}
-
-                    {allowFreeResponse && (
-                        <div className={cn('px-3 pb-3 pt-0', inputContainerClassName)}>
-                            <div className="flex gap-2">
-                                <input
-                                    ref={inputRef}
-                                    type="text"
-                                    value={inputValue}
-                                    onChange={(e) => setInputValue(e.target.value)}
-                                    onKeyDown={handleKeyDown}
-                                    placeholder={resolvedPlaceholder}
-                                    disabled={isLoading}
-                                    className={cn(
-                                        'min-w-0 flex-1 rounded-md border border-border bg-background/70 px-3 py-2 text-sm text-foreground focus:border-transparent focus:ring-2 focus:ring-ring',
-                                        inputClassName,
-                                    )}
-                                />
-                                <Button
-                                    size="sm"
-                                    onClick={handleSubmit}
-                                    disabled={isLoading || !inputValue.trim()}
-                                    className={submitButtonClassName}
-                                >
-                                    {isLoading ? '...' : resolvedSubmitLabel}
-                                </Button>
+                                        {isLoading ? '...' : resolvedSubmitLabel}
+                                    </Button>
+                                </div>
                             </div>
-                        </div>
-                    )}
+                        )}
+                    </div>
                 </div>
             </div>
         );
@@ -408,124 +420,129 @@ export function AskUserWidget({
                                 )}
                             </div>
                         </div>
+                        {headerAction}
                     </div>
                 </div>
 
-                {/* Options */}
-                {safeOptions.length > 0 && (
-                    <div className={`px-4 pb-3 pt-1 ${optionsClassName || ''}`}>
-                        {multiSelect ? (
-                            /* Multi-select mode with checkboxes */
-                            <div className="space-y-2">
-                                {safeOptions.map((option) => (
-                                    <label
-                                        key={option.id}
-                                        className={`flex items-start gap-3 px-4 py-3 rounded-lg cursor-pointer transition-colors
+                <div id={responseControlsId} hidden={responseControlsHidden}>
+                    {/* Options */}
+                    {safeOptions.length > 0 && (
+                        <div className={`px-4 pb-3 pt-1 ${optionsClassName || ''}`}>
+                            {multiSelect ? (
+                                /* Multi-select mode with checkboxes */
+                                <div className="space-y-2">
+                                    {safeOptions.map((option) => (
+                                        <label
+                                            key={option.id}
+                                            className={`flex items-start gap-3 px-4 py-3 rounded-lg cursor-pointer transition-colors
                                             ${
                                                 selectedOptions.has(option.id)
                                                     ? 'bg-info border border-info'
                                                     : 'bg-card text-card-foreground border border-border hover:bg-muted'
                                             }
                                             ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}`}
-                                    >
-                                        <input
-                                            type="checkbox"
-                                            checked={selectedOptions.has(option.id)}
-                                            onChange={() => toggleOption(option.id)}
-                                            disabled={isLoading}
-                                            className="mt-0.5 w-4 h-4 rounded border-border text-info focus:ring-info bg-background"
-                                        />
-                                        <div className="flex-1 overflow-hidden">
-                                            <div className="flex items-center gap-2 text-sm font-medium text-foreground break-words">
-                                                {option.icon}
-                                                <span className="break-words">{option.label}</span>
-                                            </div>
-                                            {option.description && (
-                                                <div className="mt-1 text-sm text-muted break-words whitespace-pre-wrap">
-                                                    {option.description}
+                                        >
+                                            <input
+                                                type="checkbox"
+                                                checked={selectedOptions.has(option.id)}
+                                                onChange={() => toggleOption(option.id)}
+                                                disabled={isLoading}
+                                                className="mt-0.5 w-4 h-4 rounded border-border text-info focus:ring-info bg-background"
+                                            />
+                                            <div className="flex-1 overflow-hidden">
+                                                <div className="flex items-center gap-2 text-sm font-medium text-foreground break-words">
+                                                    {option.icon}
+                                                    <span className="break-words">{option.label}</span>
                                                 </div>
-                                            )}
-                                        </div>
-                                    </label>
-                                ))}
-                                <div className="pt-2">
-                                    <Button
-                                        size="sm"
-                                        onClick={handleMultiSubmit}
-                                        disabled={isLoading || selectedOptions.size === 0}
-                                        className="flex items-center gap-2"
-                                    >
-                                        <Send className="size-4" />
-                                        {selectedOptions.size > 0
-                                            ? t('agent.submitSelectionCount', { count: selectedOptions.size })
-                                            : t('agent.submitSelection')}
-                                    </Button>
+                                                {option.description && (
+                                                    <div className="mt-1 text-sm text-muted break-words whitespace-pre-wrap">
+                                                        {option.description}
+                                                    </div>
+                                                )}
+                                            </div>
+                                        </label>
+                                    ))}
+                                    <div className="pt-2">
+                                        <Button
+                                            size="sm"
+                                            onClick={handleMultiSubmit}
+                                            disabled={isLoading || selectedOptions.size === 0}
+                                            className="flex items-center gap-2"
+                                        >
+                                            <Send className="size-4" />
+                                            {selectedOptions.size > 0
+                                                ? t('agent.submitSelectionCount', { count: selectedOptions.size })
+                                                : t('agent.submitSelection')}
+                                        </Button>
+                                    </div>
                                 </div>
-                            </div>
-                        ) : (
-                            /* Single-select mode - always use full-width card layout for clarity */
-                            <div className="flex flex-col gap-2 w-full">
-                                {safeOptions.map((option) => (
-                                    <Button
-                                        variant="unstyled"
-                                        key={option.id}
-                                        onClick={() => onSelect?.(option.id)}
-                                        disabled={isLoading}
-                                        className={`w-full h-auto whitespace-normal text-start px-4 py-3 rounded-lg border border-border
+                            ) : (
+                                /* Single-select mode - always use full-width card layout for clarity */
+                                <div className="flex flex-col gap-2 w-full">
+                                    {safeOptions.map((option) => (
+                                        <Button
+                                            variant="unstyled"
+                                            key={option.id}
+                                            onClick={() => onSelect?.(option.id)}
+                                            disabled={isLoading}
+                                            className={`w-full h-auto whitespace-normal text-start px-4 py-3 rounded-lg border border-border
                                             bg-card text-card-foreground
                                             hover:bg-muted hover:border-border
                                             focus:outline-none focus:ring-2 focus:ring-info focus:ring-offset-1
                                             transition-colors
                                             ${isLoading ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
                                             ${buttonClassName || ''}`}
-                                    >
-                                        <div className="flex items-start gap-3">
-                                            {option.icon && (
-                                                <span className="flex-shrink-0 mt-0.5 text-muted">{option.icon}</span>
-                                            )}
-                                            <div className="flex-1 overflow-hidden">
-                                                <div className="font-medium text-sm text-foreground break-words text-center">
-                                                    {option.label}
-                                                </div>
-                                                {option.description && (
-                                                    <div className="mt-1 text-sm text-muted break-words whitespace-pre-wrap">
-                                                        {option.description}
-                                                    </div>
+                                        >
+                                            <div className="flex items-start gap-3">
+                                                {option.icon && (
+                                                    <span className="flex-shrink-0 mt-0.5 text-muted">
+                                                        {option.icon}
+                                                    </span>
                                                 )}
+                                                <div className="flex-1 overflow-hidden">
+                                                    <div className="font-medium text-sm text-foreground break-words text-center">
+                                                        {option.label}
+                                                    </div>
+                                                    {option.description && (
+                                                        <div className="mt-1 text-sm text-muted break-words whitespace-pre-wrap">
+                                                            {option.description}
+                                                        </div>
+                                                    )}
+                                                </div>
                                             </div>
-                                        </div>
-                                    </Button>
-                                ))}
-                            </div>
-                        )}
-                    </div>
-                )}
+                                        </Button>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    )}
 
-                {/* Free-form input */}
-                {allowFreeResponse && (
-                    <div className={`px-4 pb-3 pt-1 ${inputContainerClassName || ''}`}>
-                        <div className="flex gap-2">
-                            <input
-                                ref={inputRef}
-                                type="text"
-                                value={inputValue}
-                                onChange={(e) => setInputValue(e.target.value)}
-                                onKeyDown={handleKeyDown}
-                                placeholder={resolvedPlaceholder}
-                                disabled={isLoading}
-                                className={`flex-1 px-3 py-2 text-sm border border-border rounded-md bg-card text-card-foreground focus:ring-2 focus:ring-info focus:border-transparent ${inputClassName || ''}`}
-                            />
-                            <Button
-                                size="sm"
-                                onClick={handleSubmit}
-                                disabled={isLoading || !inputValue.trim()}
-                                className={submitButtonClassName}
-                            >
-                                {isLoading ? '...' : resolvedSubmitLabel}
-                            </Button>
+                    {/* Free-form input */}
+                    {allowFreeResponse && (
+                        <div className={`px-4 pb-3 pt-1 ${inputContainerClassName || ''}`}>
+                            <div className="flex gap-2">
+                                <input
+                                    ref={inputRef}
+                                    type="text"
+                                    value={inputValue}
+                                    onChange={(e) => setInputValue(e.target.value)}
+                                    onKeyDown={handleKeyDown}
+                                    placeholder={resolvedPlaceholder}
+                                    disabled={isLoading}
+                                    className={`flex-1 px-3 py-2 text-sm border border-border rounded-md bg-card text-card-foreground focus:ring-2 focus:ring-info focus:border-transparent ${inputClassName || ''}`}
+                                />
+                                <Button
+                                    size="sm"
+                                    onClick={handleSubmit}
+                                    disabled={isLoading || !inputValue.trim()}
+                                    className={submitButtonClassName}
+                                >
+                                    {isLoading ? '...' : resolvedSubmitLabel}
+                                </Button>
+                            </div>
                         </div>
-                    </div>
-                )}
+                    )}
+                </div>
             </div>
         </div>
     );

package/src/features/media-viewer/ImagePanel.tsx

@@ -1,5 +1,6 @@
 import { ContentNature, type ContentObject, ImageRenditionFormat } from '@vertesia/common';
-import { Spinner } from '@vertesia/ui/core';
+import { Button, Spinner } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
 import { useEffect, useState } from 'react';
 import { WEB_SUPPORTED_IMAGE_FORMATS } from './formats.js';
@@ -19,12 +20,27 @@ interface ImagePanelProps {
  * Renders an image from a direct URL, a storage source path, or a Vertesia ContentObject.
  * Resolution priority: `url` > `source` > `object`.
  */
-export function ImagePanel({ url, source, object, className }: ImagePanelProps) {
+export function ImagePanel(props: ImagePanelProps) {
+    const [attempt, setAttempt] = useState(0);
+    const identity =
+        props.url ??
+        props.source ??
+        `${props.object?.id}:${props.object?.content?.source}:${props.object?.content?.etag}`;
+    return (
+        <ImagePanelContent key={`${identity}:${attempt}`} {...props} onRetry={() => setAttempt((value) => value + 1)} />
+    );
+}
+
+function ImagePanelContent({ url, source, object, className, onRetry }: ImagePanelProps & { onRetry: () => void }) {
+    const { t } = useUITranslation();
+    const [failed, setFailed] = useState(false);
     const { client } = useUserSession();
     const [imageUrl, setImageUrl] = useState<string | undefined>(url);
     const [isLoading, setIsLoading] = useState<boolean>(!url && (!!source || !!object));
 
     useEffect(() => {
+        let active = true;
+        setFailed(false);
         if (url) {
             setImageUrl(url);
             setIsLoading(false);
@@ -37,17 +53,17 @@ export function ImagePanel({ url, source, object, className }: ImagePanelProps)
             try {
                 if (source) {
                     const downloadUrl = await client.files.getDownloadUrl(source);
-                    setImageUrl(downloadUrl.url);
+                    if (active) setImageUrl(downloadUrl.url);
                     return;
                 }
 
                 if (!object) return;
 
-                const isImage = object.metadata?.type === ContentNature.Image;
+                const mime = object.content?.type?.split(';', 1)[0].trim().toLowerCase();
+                const isImage = object.metadata?.type === ContentNature.Image || mime?.startsWith('image/');
                 if (!isImage) return;
 
-                const isOriginalWebSupported =
-                    object.content?.type && WEB_SUPPORTED_IMAGE_FORMATS.includes(object.content.type);
+                const isOriginalWebSupported = mime && WEB_SUPPORTED_IMAGE_FORMATS.includes(mime);
 
                 try {
                     const rendition = await client.objects.getRendition(object.id, {
@@ -56,7 +72,7 @@ export function ImagePanel({ url, source, object, className }: ImagePanelProps)
                         sign_url: true,
                     });
                     if (rendition.status === 'found' && rendition.renditions?.length) {
-                        setImageUrl(rendition.renditions[0]);
+                        if (active) setImageUrl(rendition.renditions[0]);
                         return;
                     }
                 } catch {
@@ -65,10 +81,14 @@ export function ImagePanel({ url, source, object, className }: ImagePanelProps)
 
                 if (isOriginalWebSupported && object.content?.source) {
                     const downloadUrl = await client.files.getDownloadUrl(object.content.source);
-                    setImageUrl(downloadUrl.url);
+                    if (active) setImageUrl(downloadUrl.url);
+                } else if (active) {
+                    setFailed(true);
                 }
+            } catch {
+                if (active) setFailed(true);
             } finally {
-                setIsLoading(false);
+                if (active) setIsLoading(false);
             }
         };
 
@@ -78,6 +98,9 @@ export function ImagePanel({ url, source, object, className }: ImagePanelProps)
         } else {
             setIsLoading(false);
         }
+        return () => {
+            active = false;
+        };
     }, [url, source, object, client]);
 
     if (isLoading) {
@@ -88,9 +111,27 @@ export function ImagePanel({ url, source, object, className }: ImagePanelProps)
         );
     }
 
+    if (failed) {
+        return (
+            <div role="alert" className={`flex flex-col items-center gap-2 p-4 ${className ?? ''}`.trim()}>
+                <p>{t('store.failedToLoadDocument')}</p>
+                <Button variant="outline" onClick={onRetry}>
+                    {t('agent.retry')}
+                </Button>
+            </div>
+        );
+    }
+
     if (!imageUrl) {
         return null;
     }
 
-    return <img src={imageUrl} alt={object?.name} className={`w-full object-contain ${className ?? ''}`.trim()} />;
+    return (
+        <img
+            src={imageUrl}
+            alt={object?.name ?? t('intakePolicy.option.image')}
+            onError={() => setFailed(true)}
+            className={`w-full object-contain ${className ?? ''}`.trim()}
+        />
+    );
 }

package/src/features/store/types/IntakePolicyEditor.tsx

@@ -547,6 +547,7 @@ export function IntakePolicyEditor({
         <div className="flex h-full min-h-0 w-full flex-col gap-2">
             <IntakeSummary policy={summaryPolicy} />
             <Tabs
+                orientation="vertical"
                 tabs={leadingTabs ? [...leadingTabs, ...policyTabs] : policyTabs}
                 current={activeTab}
                 onTabChange={onTabChange}
@@ -554,7 +555,7 @@ export function IntakePolicyEditor({
                 fullHeight
                 className="px-0 min-h-0 flex-1 flex-row!"
             >
-                <TabsBar className="py-2 w-48 shrink-0" direction="vertical" />
+                <TabsBar className="py-2 w-48 shrink-0" />
                 <TabsPanel className="min-h-0 min-w-0 flex-1 overflow-auto pb-0!" />
             </Tabs>
         </div>