fix(web): preserve new RAG merge contracts

2026-09-05 00:31:19 +08:00 · 2026-08-18 11:13:20 +08:00 · 2026-08-18 11:13:20 +08:00 · 600afe84d9
commit 600afe84d9
parent 52cfbea82b
5 changed files with 41 additions and 36 deletions
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/tests/index.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/tests/index.spec.tsx
@ -108,10 +108,10 @@ describe('ModelSelector', () => {
      </>,
    )

-    expect(screen.getByRole('combobox', { name: 'System reasoning model' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'System reasoning model' })).toBeInTheDocument()
  })

-  it('exposes required and invalid field guidance on the combobox trigger', () => {
+  it('exposes required and invalid field guidance on the popover trigger', () => {
    renderWithQueryClient(
      <>
        <span id="embedding-model-label">Embedding model</span>
@ -126,10 +126,9 @@ describe('ModelSelector', () => {
      </>,
    )

-    const trigger = screen.getByRole('combobox', { name: 'Embedding model' })
+    const trigger = screen.getByRole('button', { name: /Embedding model/ })
    expect(trigger).toHaveAccessibleDescription('Select an embedding model.')
-    expect(trigger).toHaveAttribute('aria-invalid', 'true')
-    expect(trigger).toHaveAttribute('aria-required', 'true')
+    expect(trigger).toHaveAccessibleName(/common\.errorMsg\.fieldRequired/)
  })

  it('should toggle popup and close it after selecting a model', () => {
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/model-selector-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/model-selector-trigger.tsx
@ -3,6 +3,7 @@ import { cn } from '@langgenius/dify-ui/cn'
 import { PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { useQuery } from '@tanstack/react-query'
+import { useId } from 'react'
 import { useTranslation } from 'react-i18next'
 import { consoleQuery } from '@/service/client'
 import {
@ -50,6 +51,7 @@ function ModelSelectorTrigger({
  isModelCompatible = true,
 }: ModelSelectorTriggerProps) {
  const { t } = useTranslation()
+  const requiredTextId = useId()

  const isSelected = !!currentProvider && !!currentModel
  const isDeprecated = !isSelected && !!defaultModel
@ -95,6 +97,13 @@ function ModelSelectorTrigger({
      : isSelected && ((!isActive && statusI18nKey) || !isModelCompatible)
        ? tooltipLabel
        : undefined
+  const configureModelLabel = t(($) => $['detailPanel.configureModel'], { ns: 'plugin' })
+  const requiredText = ariaRequired
+    ? t(($) => $['errorMsg.fieldRequired'], { field: '', ns: 'common' }).trim()
+    : undefined
+  const triggerLabelledBy = [ariaLabelledBy, requiredText ? requiredTextId : undefined]
+    .filter(Boolean)
+    .join(' ')

  return (
    <Tooltip>
@ -110,9 +119,9 @@ function ModelSelectorTrigger({
                aria-label={
                  ariaLabelledBy
                    ? undefined
-                    : t(($) => $['detailPanel.configureModel'], { ns: 'plugin' })
+                    : [configureModelLabel, requiredText].filter(Boolean).join(' ')
                }
-                aria-labelledby={ariaLabelledBy}
+                aria-labelledby={triggerLabelledBy || undefined}
                data-deprecated={isDeprecated ? '' : undefined}
                data-invalid={ariaInvalid ? '' : undefined}
                data-model-status={status}
@ -137,6 +146,11 @@ function ModelSelectorTrigger({
              />
            }
          >
+            {requiredText && (
+              <span id={requiredTextId} className="sr-only">
+                {requiredText}
+              </span>
+            )}
            <span className="flex min-w-0 grow items-center gap-0.5">
              {isEmpty ? (
                <span
@ -182,7 +196,7 @@ function ModelSelectorTrigger({
                )}
                {isEmpty && (
                  <span className="grow truncate text-[13px] text-components-input-text-placeholder">
-                    {t(($) => $['detailPanel.configureModel'], { ns: 'plugin' })}
+                    {configureModelLabel}
                  </span>
                )}

--- a/web/features/new-rag/tests/knowledge-settings-form.spec.tsx
+++ b/web/features/new-rag/tests/knowledge-settings-form.spec.tsx
@ -121,13 +121,12 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/model-selec
      <>
        <button
          type="button"
-          role="combobox"
          aria-controls={popupId}
          aria-expanded="false"
          aria-describedby={ariaDescribedBy}
-          aria-invalid={ariaInvalid || undefined}
          aria-labelledby={ariaLabelledBy}
-          aria-required={ariaRequired}
+          data-invalid={ariaInvalid ? '' : undefined}
+          data-required={ariaRequired ? '' : undefined}
          disabled={disabled}
          onClick={() =>
            onValueChange?.({
@ -400,7 +399,7 @@ describe('KnowledgeSettingsForm', () => {
    const apiAccessSwitch = screen.getByRole('switch', {
      name: 'dataset.newKnowledge.apiAgentAccess',
    })
-    const reasoningSelector = screen.getByRole('combobox', {
+    const reasoningSelector = screen.getByRole('button', {
      name: 'dataset.newKnowledge.settings.systemReasoningModelLabel',
    })
    expect(apiAccessSwitch).not.toHaveAttribute('aria-disabled', 'true')
@ -828,7 +827,7 @@ describe('KnowledgeSettingsForm', () => {
    renderForm()

    await user.click(
-      screen.getByRole('combobox', {
+      screen.getByRole('button', {
        name: 'dataset.newKnowledge.settings.systemReasoningModelLabel',
      }),
    )
@ -903,7 +902,7 @@ describe('KnowledgeSettingsForm', () => {
    renderForm()

    await user.click(
-      screen.getByRole('combobox', {
+      screen.getByRole('button', {
        name: 'dataset.newKnowledge.settings.embeddingModelLabel',
      }),
    )
@ -993,13 +992,12 @@ describe('KnowledgeSettingsForm', () => {
    expect(
      screen.queryByRole('switch', { name: 'common.modelProvider.rerankModel.key' }),
    ).not.toBeInTheDocument()
-    const rerankSelector = screen.getByRole('combobox', {
+    const rerankSelector = screen.getByRole('button', {
      name: 'common.modelProvider.rerankModel.key',
    })
    expect(rerankSelector).toHaveAccessibleDescription(
      'dataset.newKnowledge.settings.rerankModelRequired',
    )
-    expect(rerankSelector).toHaveAttribute('aria-invalid', 'true')
    await user.click(rerankSelector)

    await waitFor(() => expect(serviceMock.patchSettings).toHaveBeenCalledOnce())
@ -1040,7 +1038,7 @@ describe('KnowledgeSettingsForm', () => {
    renderForm()

    await user.click(
-      screen.getByRole('combobox', {
+      screen.getByRole('button', {
        name: 'dataset.newKnowledge.settings.systemReasoningModelLabel',
      }),
    )
@ -1066,10 +1064,10 @@ describe('KnowledgeSettingsForm', () => {
    const onDraftStart = vi.fn()
    renderForm({ onDraftFinish, onDraftStart })

-    const reasoningSelector = screen.getByRole('combobox', {
+    const reasoningSelector = screen.getByRole('button', {
      name: 'dataset.newKnowledge.settings.systemReasoningModelLabel',
    })
-    const rerankSelector = screen.getByRole('combobox', {
+    const rerankSelector = screen.getByRole('button', {
      name: 'common.modelProvider.rerankModel.key',
    })
    await user.click(reasoningSelector)
@ -1160,10 +1158,10 @@ describe('KnowledgeSettingsForm', () => {
    })
    renderForm()

-    const reasoningSelector = screen.getByRole('combobox', {
+    const reasoningSelector = screen.getByRole('button', {
      name: 'dataset.newKnowledge.settings.systemReasoningModelLabel',
    })
-    const rerankSelector = screen.getByRole('combobox', {
+    const rerankSelector = screen.getByRole('button', {
      name: 'common.modelProvider.rerankModel.key',
    })
    await act(async () => {
@ -1233,7 +1231,7 @@ describe('KnowledgeSettingsForm', () => {
      renderForm()

      await userEvent.setup({ advanceTimers: vi.advanceTimersByTime }).click(
-        screen.getByRole('combobox', {
+        screen.getByRole('button', {
          name: 'dataset.newKnowledge.settings.systemReasoningModelLabel',
        }),
      )
@ -1359,28 +1357,24 @@ describe('KnowledgeSettingsForm', () => {
    expect(screen.getByRole('status')).toHaveTextContent(
      'datasetSettings.form.embeddingModel · common.modelProvider.systemReasoningModel.key · common.modelProvider.rerankModel.key',
    )
-    const reasoningSelector = screen.getByRole('combobox', {
+    const reasoningSelector = screen.getByRole('button', {
      name: 'dataset.newKnowledge.settings.systemReasoningModelLabel',
    })
    expect(reasoningSelector).toHaveAccessibleDescription(
      'dataset.newKnowledge.settings.systemReasoningModelRequired',
    )
-    expect(reasoningSelector).toHaveAttribute('aria-invalid', 'true')
-    expect(reasoningSelector).toHaveAttribute('aria-required', 'true')
-    const embeddingSelector = screen.getByRole('combobox', {
+    const embeddingSelector = screen.getByRole('button', {
      name: 'dataset.newKnowledge.settings.embeddingModelLabel',
    })
    expect(embeddingSelector).toHaveAccessibleDescription(
      'dataset.newKnowledge.settings.embeddingModelRequired',
    )
-    expect(embeddingSelector).toHaveAttribute('aria-invalid', 'true')
-    const rerankSelector = screen.getByRole('combobox', {
+    const rerankSelector = screen.getByRole('button', {
      name: 'common.modelProvider.rerankModel.key',
    })
    expect(rerankSelector).toHaveAccessibleDescription(
      'dataset.newKnowledge.settings.rerankModelRequired',
    )
-    expect(rerankSelector).toHaveAttribute('aria-invalid', 'true')
    expect(
      screen.getByRole('switch', { name: 'dataset.newKnowledge.apiAgentAccess' }),
    ).toHaveAttribute('aria-disabled', 'true')
@ -1389,7 +1383,7 @@ describe('KnowledgeSettingsForm', () => {
    ).toHaveAttribute('aria-disabled', 'true')

    await user.click(
-      screen.getByRole('combobox', {
+      screen.getByRole('button', {
        name: 'dataset.newKnowledge.settings.systemReasoningModelLabel',
      }),
    )
@ -1525,7 +1519,7 @@ describe('KnowledgeSettingsForm', () => {
    })

    expect(
-      screen.getByRole('combobox', {
+      screen.getByRole('button', {
        name: 'dataset.newKnowledge.settings.systemReasoningModelLabel',
      }),
    ).toBeInTheDocument()
@ -1536,7 +1530,7 @@ describe('KnowledgeSettingsForm', () => {
    renderForm()

    await user.click(
-      screen.getByRole('combobox', {
+      screen.getByRole('button', {
        name: 'dataset.newKnowledge.settings.systemReasoningModelLabel',
      }),
    )
@ -1593,7 +1587,7 @@ describe('KnowledgeSettingsForm', () => {
    renderForm()

    await user.click(
-      screen.getByRole('combobox', {
+      screen.getByRole('button', {
        name: 'dataset.newKnowledge.settings.systemReasoningModelLabel',
      }),
    )
@ -1645,7 +1639,7 @@ describe('KnowledgeSettingsForm', () => {
    renderForm()

    await user.click(
-      screen.getByRole('combobox', {
+      screen.getByRole('button', {
        name: 'dataset.newKnowledge.settings.systemReasoningModelLabel',
      }),
    )
--- a/web/features/new-rag/create-connected-source-setup.tsx
+++ b/web/features/new-rag/create-connected-source-setup.tsx
@ -338,7 +338,6 @@ export function CreateConnectedSourceSetup({
          disabled={disabled}
          draft={draft}
          preventSubmitOnEnter
-          size="medium"
          onDraftChange={onDraftChange}
        />
        <SourceSyncPolicyField
--- a/web/features/new-rag/create-source-setup.tsx
+++ b/web/features/new-rag/create-source-setup.tsx
@ -506,7 +506,6 @@ export function CreateSourceSetup({
                disabled={disabled}
                draft={draft}
                preventSubmitOnEnter
-                size="large"
                onDraftChange={updateDraft}
              />
            }