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

package/src/features/store/objects/components/ContentOverview.tsx

@@ -24,11 +24,12 @@ import {
     useToast,
 } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
-import { NavLink } from '@vertesia/ui/router';
+import { NavLink, useNavigate } from '@vertesia/ui/router';
 import { useUserSession } from '@vertesia/ui/session';
 import { JSONDisplay, Progress } from '@vertesia/ui/widgets';
-import { AlertTriangle, Copy, Download, FileSearch, ScanSearch, SquarePen } from 'lucide-react';
-import { memo, type RefObject, useEffect, useMemo, useRef, useState } from 'react';
+import { AlertTriangle, Copy, Download, FileSearch, ScanSearch, Sparkles, SquarePen } from 'lucide-react';
+import { memo, type RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { SendAgentMessageFn } from '../../../agent/chat/ModernAgentConversation.js';
 import {
     type UniversalDocumentConverter,
     type UniversalDocumentSource,
@@ -44,6 +45,15 @@ import { AudioPanel, ImagePanel, VideoPanel } from '../../../media-viewer';
 import { SecureButton } from '../../../permissions/SecureButton.js';
 import { getWorkflowStatusColor, getWorkflowStatusName, isPreviewableAsPdf } from '../../../utils/index.js';
 import { resolveTypeCached } from '../../types/typeCatalogCache.js';
+import { DocumentEditingPanel } from './DocumentEditingPanel.js';
+import {
+    createDocumentEditingScopeKey,
+    getDocumentTextActionAccess,
+    isDocumentEditingContentType,
+    isDocumentEditingScopeOpen,
+    isMarkdownContentType,
+    setDocumentEditingScopeOpen,
+} from './documentEditingRun.js';
 import { PropertiesEditorModal } from './PropertiesEditorModal';
 import { TextEditorPanel } from './TextEditorPanel.js';
 import { useObjectText, useOfficePdfConversion, usePdfProcessingStatus } from './useContentPanelHooks.js';
@@ -60,6 +70,9 @@ interface TextActionsProps {
     isEditing?: boolean;
     onToggleEdit?: () => void;
     canEdit?: boolean;
+    isCollaborating?: boolean;
+    onToggleCollaborate?: () => void;
+    canCollaborate?: boolean;
 }
 
 interface TextPanelProps {
@@ -178,10 +191,87 @@ interface ContentOverviewProps {
     loadText?: boolean;
     refetch?: () => Promise<unknown>;
     canEditProperties?: boolean;
+    canCollaborate?: boolean;
 }
-export function ContentOverview({ object, loadText, refetch, canEditProperties = true }: ContentOverviewProps) {
+export function ContentOverview({
+    object,
+    loadText,
+    refetch,
+    canEditProperties = true,
+    canCollaborate = false,
+}: ContentOverviewProps) {
     const toast = useToast();
     const { t } = useUITranslation();
+    const { project, store } = useUserSession();
+    const navigate = useNavigate();
+    const documentRootId = object.revision?.root || object.id;
+    const editingScopeKey = project?.id ? createDocumentEditingScopeKey(project.id, documentRootId) : undefined;
+    const [activeObject, setActiveObject] = useState(object);
+    const [isCollaborating, setIsCollaborating] = useState(() =>
+        editingScopeKey ? isDocumentEditingScopeOpen(editingScopeKey) : false,
+    );
+    const sendMessageRef = useRef<SendAgentMessageFn | null>(null);
+    const latestDocumentIdRef = useRef(object.id);
+    const sourceObjectIdRef = useRef(object.id);
+    const editingScopeKeyRef = useRef(editingScopeKey);
+
+    useEffect(() => {
+        if (editingScopeKeyRef.current === editingScopeKey) return;
+        editingScopeKeyRef.current = editingScopeKey;
+        setIsCollaborating(editingScopeKey ? isDocumentEditingScopeOpen(editingScopeKey) : false);
+    }, [editingScopeKey]);
+
+    const toggleCollaboration = useCallback(() => {
+        setIsCollaborating((current) => {
+            const next = !current;
+            if (editingScopeKey) setDocumentEditingScopeOpen(editingScopeKey, next);
+            return next;
+        });
+    }, [editingScopeKey]);
+
+    const closeCollaboration = useCallback(() => {
+        if (editingScopeKey) setDocumentEditingScopeOpen(editingScopeKey, false);
+        setIsCollaborating(false);
+    }, [editingScopeKey]);
+
+    useEffect(() => {
+        const sourceObjectChanged = sourceObjectIdRef.current !== object.id;
+        sourceObjectIdRef.current = object.id;
+        setActiveObject((current) => {
+            if (!sourceObjectChanged && current.id !== object.id) return current;
+            latestDocumentIdRef.current = object.id;
+            return current.id === object.id && current.text && !object.text
+                ? { ...object, text: current.text }
+                : object;
+        });
+    }, [object]);
+
+    const handleDocumentUpdated = useCallback(
+        async (updatedDocumentId: string, createdVersion: boolean) => {
+            latestDocumentIdRef.current = updatedDocumentId;
+
+            try {
+                const [updatedObject, updatedText] = await Promise.all([
+                    store.objects.retrieve(updatedDocumentId),
+                    store.objects.getObjectText(updatedDocumentId),
+                ]);
+                if (latestDocumentIdRef.current === updatedDocumentId) {
+                    setActiveObject({ ...updatedObject, text: updatedText.text });
+                }
+            } catch (err: unknown) {
+                console.error('Failed to load the updated document revision', err);
+                toast({
+                    status: 'error',
+                    title: t('agent.failedToLoadDocument'),
+                    description: err instanceof Error ? err.message : undefined,
+                    duration: 5000,
+                });
+            } finally {
+                if (createdVersion) navigate(`/objects/${updatedDocumentId}`);
+            }
+        },
+        [navigate, store.objects, t, toast],
+    );
 
     const handleCopyContent = async (content: string, type: 'text' | 'properties') => {
         try {
@@ -206,25 +296,41 @@ export function ContentOverview({ object, loadText, refetch, canEditProperties =
     };
 
     return (
-        <ResizablePanelGroup direction="horizontal" className="h-full">
-            <ResizablePanel defaultSize={67} className="min-w-[100px]">
-                <DataPanel
-                    object={object}
-                    loadText={loadText ?? false}
-                    handleCopyContent={handleCopyContent}
-                    refetch={refetch}
-                />
-            </ResizablePanel>
-            <ResizableHandle withHandle />
-            <ResizablePanel defaultSize={33} className="min-w-[100px]">
-                <PropertiesPanel
-                    object={object}
-                    refetch={refetch ?? (() => Promise.resolve())}
-                    handleCopyContent={handleCopyContent}
-                    canEditProperties={canEditProperties}
+        <>
+            <ResizablePanelGroup direction="horizontal" className="h-full">
+                <ResizablePanel defaultSize={67} className="min-w-[100px]">
+                    <DataPanel
+                        object={activeObject}
+                        loadText={loadText ?? false}
+                        handleCopyContent={handleCopyContent}
+                        refetch={refetch}
+                        canCollaborate={canCollaborate}
+                        isCollaborating={isCollaborating}
+                        onToggleCollaborate={toggleCollaboration}
+                    />
+                </ResizablePanel>
+                <ResizableHandle withHandle />
+                <ResizablePanel defaultSize={33} className="min-w-[100px]">
+                    <PropertiesPanel
+                        object={activeObject}
+                        refetch={refetch ?? (() => Promise.resolve())}
+                        handleCopyContent={handleCopyContent}
+                        canEditProperties={canEditProperties}
+                    />
+                </ResizablePanel>
+            </ResizablePanelGroup>
+            {isCollaborating ? (
+                <DocumentEditingPanel
+                    object={activeObject}
+                    initialContent={activeObject.text ?? ''}
+                    onClose={closeCollaboration}
+                    onDocumentUpdated={(updatedDocumentId, createdVersion) =>
+                        void handleDocumentUpdated(updatedDocumentId, createdVersion)
+                    }
+                    sendMessageRef={sendMessageRef}
                 />
-            </ResizablePanel>
-        </ResizablePanelGroup>
+            ) : null}
+        </>
     );
 }
 
@@ -349,6 +455,9 @@ interface DataPanelProps {
     loadText: boolean;
     handleCopyContent: (content: string, type: 'text' | 'properties') => Promise<void>;
     refetch?: () => Promise<unknown>;
+    canCollaborate: boolean;
+    isCollaborating: boolean;
+    onToggleCollaborate: () => void;
 }
 
 /**
@@ -386,6 +495,9 @@ function DataPanelContent({
     handleCopyContent,
     refetch,
     defaultView,
+    canCollaborate,
+    isCollaborating,
+    onToggleCollaborate,
 }: DataPanelProps & { defaultView?: IntakeDefaultView }) {
     const { client } = useUserSession();
     const { t } = useUITranslation();
@@ -439,15 +551,14 @@ function DataPanelContent({
     // Text editing state
     const [isEditing, setIsEditing] = useState(false);
     const canEdit = !!(
-        object.content?.source &&
         object.content?.type &&
-        !isCreatedOrProcessing &&
         !object.is_locked &&
         object.user_permissions?.can_write !== false &&
         (object.content.type.startsWith('text/') ||
             object.content.type === 'application/json' ||
             object.content.type === 'application/xml')
     );
+    const textActionAccess = getDocumentTextActionAccess(canEdit, canCollaborate);
 
     // Use custom hooks for text loading, PDF processing, and Office conversion
     const {
@@ -456,7 +567,7 @@ function DataPanelContent({
         isLoading: isLoadingText,
         isCropped: isTextCropped,
         loadText: reloadText,
-    } = useObjectText(object.id, object.text, loadText);
+    } = useObjectText(object.id, object.text, loadText, object.revision?.root || object.id);
 
     // Only poll while the active panel can actually surface processing progress.
     const shouldPollProgress =
@@ -624,7 +735,10 @@ function DataPanelContent({
                         textContainerRef={textContainerRef}
                         isEditing={isEditing}
                         onToggleEdit={() => setIsEditing(true)}
-                        canEdit={canEdit}
+                        canEdit={textActionAccess.canEdit}
+                        isCollaborating={isCollaborating}
+                        onToggleCollaborate={onToggleCollaborate}
+                        canCollaborate={textActionAccess.canCollaborate}
                     />
                 )}
                 {currentPanel === PanelView.Pdf && isPreviewableAsPdfDoc && (pdfRendition || officePdfUrl) && (
@@ -673,23 +787,26 @@ function DataPanelContent({
                     <PdfProcessingPanel progress={pdfProgress} status={pdfStatus} />
                 </div>
             )}
-            {currentPanel === PanelView.Text && !showProcessingPanel && !isEditing && isLoadingText && (
+            {currentPanel === PanelView.Text && !showProcessingPanel && !isEditing && isLoadingText && !displayText && (
                 <div className={getPanelVisibility(true)}>
                     <div className="flex justify-center items-center flex-1">
                         <Spinner size="lg" />
                     </div>
                 </div>
             )}
-            {currentPanel === PanelView.Text && !showProcessingPanel && !isEditing && !isLoadingText && (
-                <div className={getPanelVisibility(true)}>
-                    <TextPanel
-                        object={object}
-                        text={displayText}
-                        isTextCropped={isTextCropped}
-                        textContainerRef={textContainerRef}
-                    />
-                </div>
-            )}
+            {currentPanel === PanelView.Text &&
+                !showProcessingPanel &&
+                !isEditing &&
+                (!isLoadingText || displayText) && (
+                    <div className={getPanelVisibility(true)}>
+                        <TextPanel
+                            object={object}
+                            text={displayText}
+                            isTextCropped={isTextCropped}
+                            textContainerRef={textContainerRef}
+                        />
+                    </div>
+                )}
             {isEditing && currentPanel === PanelView.Text && fullText != null && (
                 <TextEditorPanel
                     object={object}
@@ -706,7 +823,17 @@ function DataPanelContent({
     );
 }
 
-function TextActions({ object, text, fullText, handleCopyContent, onToggleEdit, canEdit }: TextActionsProps) {
+function TextActions({
+    object,
+    text,
+    fullText,
+    handleCopyContent,
+    onToggleEdit,
+    canEdit,
+    isCollaborating,
+    onToggleCollaborate,
+    canCollaborate,
+}: TextActionsProps) {
     const { client, project } = useUserSession();
     const toast = useToast();
     const { t } = useUITranslation();
@@ -718,7 +845,8 @@ function TextActions({ object, text, fullText, handleCopyContent, onToggleEdit,
     );
     const pdfTemplateObjectId = fullProject?.configuration?.pdf_template_object_id;
 
-    const isMarkdown = content?.type && content.type === 'text/markdown';
+    const isMarkdown = isMarkdownContentType(content?.type);
+    const isDocumentEditingContent = isDocumentEditingContentType(content?.type);
 
     const handleExportDocument = async (format: MarkdownRenditionFormat, useDefaultTemplate?: boolean) => {
         // Prevent multiple concurrent exports
@@ -781,31 +909,24 @@ function TextActions({ object, text, fullText, handleCopyContent, onToggleEdit,
         <div className="h-[41px] text-lg font-semibold flex justify-between items-center px-2">
             <div className="flex items-center gap-2">
                 {fullText && (
-                    <>
-                        <Button
-                            variant="ghost"
-                            size="sm"
-                            title="Copy text"
-                            onClick={() => handleCopyContent(fullText, 'text')}
-                        >
-                            <Copy className="size-4" />
-                        </Button>
-                        {canEdit && onToggleEdit && (
-                            <SecureButton
-                                permission={Permission.content_write}
-                                variant="ghost"
-                                size="sm"
-                                onClick={onToggleEdit}
-                                title={t('store.editText')}
-                                className="flex items-center gap-2"
-                            >
-                                <SquarePen className="size-4" />
-                            </SecureButton>
-                        )}
-                    </>
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        title="Copy text"
+                        onClick={() => handleCopyContent(fullText, 'text')}
+                    >
+                        <Copy className="size-4" />
+                    </Button>
                 )}
                 {isDownloading ? (
-                    <Button variant="ghost" size="sm" disabled className="flex items-center gap-2" title="download">
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        disabled
+                        className="h-8 w-8 p-0"
+                        title={t('agent.download')}
+                        aria-label={t('agent.download')}
+                    >
                         <Spinner size="sm" />
                     </Button>
                 ) : (
@@ -815,8 +936,9 @@ function TextActions({ object, text, fullText, handleCopyContent, onToggleEdit,
                                 variant="ghost"
                                 size="sm"
                                 disabled={!text}
-                                className="flex items-center gap-2"
-                                title="download"
+                                className="h-8 w-8 p-0"
+                                title={t('agent.download')}
+                                aria-label={t('agent.download')}
                             >
                                 <Download className="size-4" />
                             </Button>
@@ -854,6 +976,35 @@ function TextActions({ object, text, fullText, handleCopyContent, onToggleEdit,
                         )}
                     </Dropdown>
                 )}
+                {fullText && (
+                    <>
+                        {canEdit && onToggleEdit && (
+                            <SecureButton
+                                permission={Permission.content_write}
+                                variant="ghost"
+                                size="sm"
+                                onClick={onToggleEdit}
+                                title={t('store.editText')}
+                                aria-label={t('store.editText')}
+                                className="h-8 w-8 p-0"
+                            >
+                                <SquarePen className="size-4" />
+                            </SecureButton>
+                        )}
+                        {canCollaborate && onToggleCollaborate && isDocumentEditingContent && (
+                            <Button
+                                variant={isCollaborating ? 'primary' : 'ghost'}
+                                size="sm"
+                                onClick={onToggleCollaborate}
+                                title={t('agent.editWithAI')}
+                                aria-label={t('agent.editWithAI')}
+                                className="h-8 w-8 p-0"
+                            >
+                                <Sparkles className="size-4" />
+                            </Button>
+                        )}
+                    </>
+                )}
             </div>
         </div>
     );
@@ -867,7 +1018,7 @@ const TextPanel = memo(({ object, text, isTextCropped, textContainerRef }: TextP
     const isXml = contentProcessorType === 'xml' || content?.type === 'application/xml' || content?.type === 'text/xml';
 
     // Check if content type is markdown or plain text
-    const isMarkdownOrText = content?.type && (content.type === 'text/markdown' || content.type === 'text/plain');
+    const isMarkdownOrText = isDocumentEditingContentType(content?.type);
 
     // Render as markdown if it's markdown/text type OR if text looks like markdown (but not if XML)
     const shouldRenderAsMarkdown = !isXml && (isMarkdownOrText || looksLikeMarkdown(text));

package/src/features/store/objects/components/DocumentEditingConfigurationSelector.test.ts

@@ -0,0 +1,34 @@
+import type { Project } from '@vertesia/common';
+import { describe, expect, it } from 'vitest';
+import { getDocumentEditingProjectDefault } from './DocumentEditingConfigurationSelector.js';
+
+describe('document editing configuration', () => {
+    it('prefers the project agent default over the base default', () => {
+        const project = {
+            configuration: {
+                defaults: {
+                    base: { environment: 'base-env', model: 'base-model' },
+                    system: { agent: { environment: 'agent-env', model: 'agent-model' } },
+                },
+            },
+        } as Pick<Project, 'configuration'>;
+
+        expect(getDocumentEditingProjectDefault(project)).toEqual({
+            environment: 'agent-env',
+            model: 'agent-model',
+        });
+    });
+
+    it('falls back to the project base default', () => {
+        const project = {
+            configuration: {
+                defaults: { base: { environment: 'base-env', model: 'base-model' } },
+            },
+        } as Pick<Project, 'configuration'>;
+
+        expect(getDocumentEditingProjectDefault(project)).toEqual({
+            environment: 'base-env',
+            model: 'base-model',
+        });
+    });
+});

package/src/features/store/objects/components/DocumentEditingConfigurationSelector.tsx

@@ -0,0 +1,211 @@
+import type { ExecutionEnvironmentRef, InteractionExecutionConfiguration, Project } from '@vertesia/common';
+import { Button, Popover, PopoverContent, PopoverTrigger, SelectBox, Spinner } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { useUserSession } from '@vertesia/ui/session';
+import { ChevronDown, SlidersHorizontal } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+export interface DocumentEditingConfiguration {
+    environment?: string;
+    model?: string;
+    model_options?: InteractionExecutionConfiguration['model_options'];
+}
+
+interface ModelOption {
+    id: string;
+    name: string;
+}
+
+export function getDocumentEditingProjectDefault(
+    project: Pick<Project, 'configuration'>,
+): DocumentEditingConfiguration {
+    const defaults = project.configuration?.defaults?.system?.agent ?? project.configuration?.defaults?.base;
+    return {
+        environment: defaults?.environment,
+        model: defaults?.model,
+    };
+}
+
+function environmentLabel(environment: ExecutionEnvironmentRef): string {
+    return environment.name;
+}
+
+function modelLabel(model: ModelOption): string {
+    return model.name;
+}
+
+/** Provider model ids can be long resource paths; display only the final segment. */
+function shortModelName(model: string): string {
+    const segment = model.split('/').filter(Boolean).pop();
+    return segment || model;
+}
+
+interface DocumentEditingConfigurationSelectorProps {
+    value: DocumentEditingConfiguration;
+    onChange: (value: DocumentEditingConfiguration) => void;
+    disabled?: boolean;
+    isLoading?: boolean;
+}
+
+export function DocumentEditingConfigurationSelector({
+    value,
+    onChange,
+    disabled = false,
+    isLoading = false,
+}: DocumentEditingConfigurationSelectorProps) {
+    const { client } = useUserSession();
+    const { t } = useUITranslation();
+    const [environments, setEnvironments] = useState<ExecutionEnvironmentRef[]>([]);
+    const [models, setModels] = useState<ModelOption[]>([]);
+    const [isLoadingEnvironments, setIsLoadingEnvironments] = useState(true);
+    const [isLoadingModels, setIsLoadingModels] = useState(false);
+    const latestEnvironmentRequestRef = useRef<string | undefined>(undefined);
+
+    useEffect(() => {
+        let cancelled = false;
+        setIsLoadingEnvironments(true);
+        void client.environments
+            .list()
+            .then((items) => {
+                if (!cancelled) setEnvironments(items.slice().sort((a, b) => a.name.localeCompare(b.name)));
+            })
+            .catch((err: unknown) => {
+                console.warn('Failed to list document editing environments', err);
+                if (!cancelled) setEnvironments([]);
+            })
+            .finally(() => {
+                if (!cancelled) setIsLoadingEnvironments(false);
+            });
+        return () => {
+            cancelled = true;
+        };
+    }, [client]);
+
+    useEffect(() => {
+        if (!value.environment) {
+            setModels([]);
+            setIsLoadingModels(false);
+            return;
+        }
+
+        let cancelled = false;
+        const environmentId = value.environment;
+        setIsLoadingModels(true);
+        void client.environments
+            .retrieve(environmentId)
+            .then((environment) => {
+                if (cancelled) return;
+                setModels(
+                    (environment.enabled_models ?? [])
+                        .map((model) => ({ id: model.id, name: model.name || model.id }))
+                        .sort((a, b) => a.name.localeCompare(b.name)),
+                );
+            })
+            .catch((err: unknown) => {
+                console.warn('Failed to load document editing models', err);
+                if (!cancelled) setModels([]);
+            })
+            .finally(() => {
+                if (!cancelled) setIsLoadingModels(false);
+            });
+        return () => {
+            cancelled = true;
+        };
+    }, [client, value.environment]);
+
+    const selectedEnvironment = environments.find((environment) => environment.id === value.environment);
+    const selectedModel = useMemo<ModelOption | undefined>(() => {
+        if (!value.model) return undefined;
+        return (
+            models.find((model) => model.id === value.model) ?? { id: value.model, name: shortModelName(value.model) }
+        );
+    }, [models, value.model]);
+
+    const selectEnvironment = (environment: ExecutionEnvironmentRef) => {
+        latestEnvironmentRequestRef.current = environment.id;
+        onChange({ environment: environment.id });
+        void client.environments
+            .retrieve(environment.id)
+            .then((details) => {
+                if (latestEnvironmentRequestRef.current !== environment.id) return;
+                const nextModel = details.default_model ?? details.enabled_models?.[0]?.id;
+                onChange({ environment: environment.id, model: nextModel });
+            })
+            .catch((err: unknown) => {
+                console.warn('Failed to select a default document editing model', err);
+            });
+    };
+
+    const selectModel = (model: ModelOption) => {
+        latestEnvironmentRequestRef.current = undefined;
+        onChange({ environment: value.environment, model: model.id });
+    };
+
+    const buttonLabel = selectedModel?.name || t('agent.documentEditingSelectModel');
+
+    return (
+        <Popover>
+            <PopoverTrigger asChild>
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 max-w-[15rem] gap-1.5 px-2 text-xs"
+                    aria-label={t('agent.documentEditingConfiguration')}
+                    title={t('agent.documentEditingConfiguration')}
+                >
+                    {isLoading ? <Spinner size="sm" /> : <SlidersHorizontal className="size-3.5 shrink-0" />}
+                    <span className="min-w-0 truncate">{buttonLabel}</span>
+                    <ChevronDown className="size-3.5 shrink-0 opacity-70" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent align="end" className="z-[1000000] w-80 space-y-3 p-3">
+                <div>
+                    <div className="text-sm font-semibold text-foreground">
+                        {t('agent.documentEditingConfiguration')}
+                    </div>
+                    <div className="mt-0.5 text-xs leading-4 text-muted">
+                        {disabled
+                            ? t('agent.documentEditingConfigurationLocked')
+                            : t('agent.documentEditingConfigurationDescription')}
+                    </div>
+                </div>
+                <div className="space-y-1">
+                    <label className="text-xs font-medium text-foreground" htmlFor="document-editing-environment">
+                        {t('agent.environment')}
+                    </label>
+                    <SelectBox
+                        id="document-editing-environment"
+                        by="id"
+                        options={environments}
+                        value={selectedEnvironment}
+                        optionLabel={environmentLabel}
+                        filterBy="name"
+                        placeholder={t('agent.documentEditingSelectEnvironment')}
+                        onChange={selectEnvironment}
+                        disabled={disabled}
+                        isLoading={isLoadingEnvironments}
+                    />
+                </div>
+                <div className="space-y-1">
+                    <label className="text-xs font-medium text-foreground" htmlFor="document-editing-model">
+                        {t('agent.model')}
+                    </label>
+                    <SelectBox
+                        id="document-editing-model"
+                        by="id"
+                        options={models}
+                        value={selectedModel}
+                        optionLabel={modelLabel}
+                        filterBy="name"
+                        placeholder={t('agent.documentEditingSelectModel')}
+                        onChange={selectModel}
+                        disabled={disabled || !value.environment}
+                        isLoading={isLoadingModels}
+                        warnOnMissingValue={false}
+                    />
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+}