{t("setting.ai.transcription-provider")} {noProviders &&

{t("setting.ai.transcription-empty-providers")}

} {referencedProvider && !referencedProvider.apiKeySet && (

{t("setting.ai.transcription-warning-no-key")}

)} {referencedProvider?.type === InstanceSetting_AIProviderType.GEMINI && (

{t("setting.ai.transcription-warning-gemini-webm")}

)}

{t("setting.ai.transcription-model")} update({ model: e.target.value })} placeholder={placeholderForProvider(referencedProvider)} disabled={!transcription.providerId} />

{t("setting.ai.transcription-model-help")}

{t("setting.ai.transcription-language")} update({ language: e.target.value })} placeholder={t("setting.ai.transcription-language-placeholder")} disabled={!transcription.providerId} />

{t("setting.ai.transcription-language-help")}

{t("setting.ai.transcription-prompt")}

update({ prompt: e.target.value })}
          placeholder={t("setting.ai.transcription-prompt-placeholder")}
          rows={3}
          disabled={!transcription.providerId}
        />
        <p className="text-xs text-muted-foreground">{t("setting.ai.transcription-prompt-help")}</p>
      </div>
    </div>
  );
};

interface AIProviderDialogProps {
  provider?: LocalAIProvider;
  onOpenChange: (open: boolean) => void;
  onSave: (provider: LocalAIProvider) => void;
}

const AIProviderDialog = ({ provider, onOpenChange, onSave }: AIProviderDialogProps) => {
  const t = useTranslate();
  const [draft, setDraft] = useState<LocalAIProvider>(() => provider ?? newProvider());

useEffect(() => {
    const next = provider ?? newProvider();
    setDraft(next);
  }, [provider]);

const updateDraft = (partial: Partial<LocalAIProvider>) => {
    setDraft((prev) => ({ ...prev, ...partial }));
  };

const handleSave = () => {
    onSave(draft);
  };

return (
    <Dialog open={!!provider} onOpenChange={onOpenChange}>
      <DialogContent size="2xl">
        <DialogHeader>
          <DialogTitle>{provider?.apiKeySet ? t("setting.ai.edit-provider") : t("setting.ai.add-provider")}</DialogTitle>
          <DialogDescription>{t("setting.ai.dialog-description")}</DialogDescription>
        </DialogHeader>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div className="flex flex-col gap-1.5">
            <Label>{t("setting.ai.provider-title")}</Label>
            <Input value={draft.title} onChange={(e) => updateDraft({ title: e.target.value })} placeholder="OpenAI" />
          </div>

<div className="flex flex-col gap-1.5">
            <Label>{t("setting.ai.provider-type")}</Label>
            <Select
              value={String(draft.type)}
              onValueChange={(value) => updateDraft({ type: Number(value) as InstanceSetting_AIProviderType })}
            >
              <SelectTrigger className="w-full">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {providerTypeOptions.map((type) => (
                  <SelectItem key={type} value={String(type)}>
                    {getProviderTypeLabel(type)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

<div className="flex flex-col gap-1.5 sm:col-span-2">
            <Label>{t("setting.ai.endpoint")}</Label>
            <Input
              value={draft.endpoint}
              onChange={(e) => updateDraft({ endpoint: e.target.value })}
              placeholder={getDefaultEndpointPlaceholder(draft.type)}
            />
            <p className="text-xs text-muted-foreground">{t("setting.ai.endpoint-hint")}</p>
          </div>

<div className="flex flex-col gap-1.5 sm:col-span-2">
            <Label>{t("setting.ai.api-key")}</Label>
            <Input
              type="password"
              value={draft.apiKey}
              onChange={(e) => updateDraft({ apiKey: e.target.value })}
              placeholder={draft.apiKeySet ? t("setting.ai.keep-api-key") : ""}
            />
            {draft.apiKeySet && (
              <p className="text-xs text-muted-foreground">{t("setting.ai.current-key", { key: draft.apiKeyHint || "-" })}</p>
            )}
          </div>
        </div>

<DialogFooter>
          <Button variant="ghost" onClick={() => onOpenChange(false)}>
            {t("common.cancel")}
          </Button>
          <Button onClick={handleSave}>{t("common.save")}</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

const getDefaultEndpointPlaceholder = (type: InstanceSetting_AIProviderType) => {
  switch (type) {
    case InstanceSetting_AIProviderType.OPENAI:
      return "https://api.openai.com/v1";
    case InstanceSetting_AIProviderType.GEMINI:
      return "https://generativelanguage.googleapis.com/v1beta";
    default:
      return "";
  }
};

export default AISection;
```

Note: this references `Textarea` from `@/components/ui/textarea`. Verify that component exists by running:

```bash
ls web/src/components/ui/textarea.tsx
```

If the file is missing, the project doesn't have a Textarea primitive yet — fall back to the native `<textarea>` element with the same classes used by the project's `Input` for visual consistency. Keep the same props (`value`, `onChange`, `placeholder`, `rows`, `disabled`).

- [ ] **Step 3: Type-check + lint**

```bash
cd web && pnpm lint 2>&1 | tail -40
```

Expected: PASS. Common failures: missing import, mismatch between schema name (`InstanceSetting_TranscriptionConfigSchema`) and what `buf generate` produced — verify the exact name in `web/src/types/proto/api/v1/instance_service_pb.ts` (it may be `InstanceSetting_TranscriptionConfig` paired with `InstanceSetting_TranscriptionConfigSchema`, matching the AISetting pattern).

- [ ] **Step 4: Manual smoke test**

Start backend and frontend:

```bash
go run ./cmd/memos --port 8081 &
cd web && pnpm dev
```

Open `http://localhost:3001/`, sign in as the host user, navigate to Settings → AI:

- Verify the **AI integrations** group shows the existing provider table (or empty state).
- Verify the **Transcription** group renders with the four fields disabled when no provider is selected.
- Add a provider with type OPENAI and a key. The transcription section now lets you select it. Pick the provider; the model placeholder shows `whisper-1`. Type `whisper-1` in the model field, leave language empty, leave prompt empty, save.
- Refresh the page. The transcription section retains the saved provider and model.
- Change the provider title → save. The transcription section still references the same provider by id (title in dropdown updates).
- Delete the provider → the transcription section's `providerId` is cleared (model field becomes disabled).

- [ ] **Step 5: Commit**

```bash
git add web/src/components/Settings/AISection.tsx web/src/locales/en.json
git commit -m "feat(settings): add Transcription configuration section

Splits the AI settings page into 'AI integrations' (existing
provider list) and 'Transcription' (new). The transcription form
chooses a provider, model, default language, and prompt hint. Save
writes the entire AI setting in one request."
```

---

## Task 8: Wire `MemoEditor` to the persisted transcription config

**Files:**
- Modify: `web/src/components/MemoEditor/index.tsx:31-67,130-159`
- Modify: `web/src/components/MemoEditor/services/transcriptionService.ts`

The editor previously scanned `aiSetting.providers` for the first one with an API key. It now reads `aiSetting.transcription.providerId`, validates the reference, and calls the service without a provider argument.

- [ ] **Step 1: Edit `transcriptionService.ts`**

Replace the entire contents of `web/src/components/MemoEditor/services/transcriptionService.ts` with:

```ts
import { create } from "@bufbuild/protobuf";
import { aiServiceClient } from "@/connect";
import { TranscribeRequestSchema, TranscriptionAudioSchema, TranscriptionConfigSchema } from "@/types/proto/api/v1/ai_service_pb";

export const transcriptionService = {
  async transcribeFile(file: File): Promise<string> {
    const content = new Uint8Array(await file.arrayBuffer());
    const response = await aiServiceClient.transcribe(
      create(TranscribeRequestSchema, {
        config: create(TranscriptionConfigSchema, {}),
        audio: create(TranscriptionAudioSchema, {
          source: {
            case: "content",
            value: content,
          },
          filename: file.name,
          contentType: file.type,
        }),
      }),
    );

return response.text;
  },
};
```

Note: `providerId` is intentionally omitted — the server resolves it from `InstanceAISetting.transcription.providerId`.

- [ ] **Step 2: Edit `MemoEditor/index.tsx`**

Open the file. Two regions change:

**Region A** — replace lines 31–67 (the `TRANSCRIPTION_PROVIDER_TYPES` constant, the `transcriptionProvider` lookup, and the unused `InstanceSetting_AIProviderType` import path) with:

```tsx
// (delete the TRANSCRIPTION_PROVIDER_TYPES constant entirely — no longer needed)
```

And inside `MemoEditorImpl`, replace:

```tsx
  const transcriptionProvider = useMemo(
    () => aiSetting.providers.find((provider) => provider.apiKeySet && TRANSCRIPTION_PROVIDER_TYPES.includes(provider.type)),
    [aiSetting.providers],
  );
```

with:

```tsx
  const canTranscribe = useMemo(() => {
    const providerId = aiSetting.transcription?.providerId ?? "";
    if (!providerId) return false;
    const provider = aiSetting.providers.find((p) => p.id === providerId);
    return Boolean(provider?.apiKeySet);
  }, [aiSetting.providers, aiSetting.transcription?.providerId]);
```

Then update the import line at the top of the file. Currently:

```tsx
import { InstanceSetting_AIProviderType, InstanceSetting_Key } from "@/types/proto/api/v1/instance_service_pb";
```

Becomes (drop the `InstanceSetting_AIProviderType` import — it's no longer referenced in this file):

```tsx
import { InstanceSetting_Key } from "@/types/proto/api/v1/instance_service_pb";
```

**Region B** — replace lines 130–159 (the `handleTranscribeRecordedAudio` callback and any guards) so it consults `canTranscribe` and calls the service without a provider arg:

```tsx
  const handleTranscribeRecordedAudio = useCallback(
    async (localFile: LocalFile) => {
      if (!canTranscribe) {
        dispatch(actions.addLocalFile(localFile));
        setIsTranscribingAudio(false);
        setIsAudioRecorderOpen(false);
        return;
      }

try {
        const text = (await transcriptionService.transcribeFile(localFile.file)).trim();
        if (!text) {
          dispatch(actions.addLocalFile(localFile));
          toast.error(t("editor.audio-recorder.transcribe-empty"));
          return;
        }

insertTranscribedText(text);
        toast.success(t("editor.audio-recorder.transcribe-success"));
      } catch (error) {
        console.error(error);
        toast.error(errorService.getErrorMessage(error) || t("editor.audio-recorder.transcribe-error"));
        dispatch(actions.addLocalFile(localFile));
      } finally {
        setIsTranscribingAudio(false);
        setIsAudioRecorderOpen(false);
      }
    },
    [actions, canTranscribe, dispatch, insertTranscribedText, t],
  );
```

Then update `handleTranscribeAudioRecording` (currently around line 225) so its guard uses `canTranscribe`:

```tsx
  const handleTranscribeAudioRecording = () => {
    if (!canTranscribe || isTranscribingAudio) {
      return;
    }

setIsTranscribingAudio(true);
    const didStop = audioRecorder.stopRecording("transcribe");
    if (!didStop) {
      setIsTranscribingAudio(false);
    }
  };
```

Finally, search the file for any remaining references to `transcriptionProvider` and replace them with `canTranscribe`. Also update the prop passed to `<AudioRecorderPanel canTranscribe={...}>` if it currently uses `transcriptionProvider` — replace with `canTranscribe`.

- [ ] **Step 3: Type-check**

```bash
cd web && pnpm lint 2>&1 | tail -20
```

Expected: PASS.

- [ ] **Step 4: Manual smoke test**

With the dev server running:

1. **No transcription configured**: Settings → AI shows providers but no transcription selection. In the home editor, open the audio recorder. The Transcribe button (waveform icon) should be hidden — only Cancel and Stop visible.
2. **Transcription configured with valid provider**: Select a provider in Transcription, set model to `whisper-1`, save. Open the recorder; the Transcribe button is now visible. Record a short clip in English, click Transcribe — text appears in the editor.
3. **Provider deleted after transcription was configured**: Configure transcription, save, then delete the referenced provider in AI Integrations and save. Reload the editor; the Transcribe button is hidden.
4. **API key cleared from referenced provider**: Edit a referenced provider so it has no API key (this requires backend support — currently impossible since save requires apiKey to be set; verify by writing setting directly via API or skip this case).

- [ ] **Step 5: Commit**

```bash
git add web/src/components/MemoEditor/index.tsx web/src/components/MemoEditor/services/transcriptionService.ts
git commit -m "feat(memo-editor): use persisted transcription config

The editor's transcribe button now reflects InstanceAISetting.
transcription.providerId rather than an implicit \"first provider
with apiKey\" pick. The transcribeFile service no longer takes a
provider argument — the server resolves it from settings."
```

---

## Task 9: Strip the now-unused REQUIRED gate on `provider_id` in the server

**Files:**
- Modify: `server/router/api/v1/ai_service.go` (clean-up only)

Task 6 already deleted the `provider_id is required` `InvalidArgument` branch. This task confirms there's no orphaned helper or constant left behind.

- [ ] **Step 1: Search for orphans**

```bash
grep -n "resolveAIProviderForTranscription\|provider_id is required" server/router/api/v1/ai_service.go
```

Expected: no matches (Task 6 should have removed both). If anything matches, delete it.

- [ ] **Step 2: Run linter**

```bash
golangci-lint run ./server/router/api/v1/...
```

Expected: PASS.

- [ ] **Step 3: Run the full backend suite once more**

```bash
go test -race ./server/... ./internal/...
```

Expected: PASS.

- [ ] **Step 4: Commit (only if Step 1 found anything to clean up)**

If Step 1 returned matches and you removed code, commit:

```bash
git add server/router/api/v1/ai_service.go
git commit -m "chore(api/ai): remove orphaned helpers from old transcribe flow"
```

Otherwise, skip the commit — the task is a no-op verification.

---

## Task 10: End-to-end verification

**Files:** none — verification only.

- [ ] **Step 1: Full backend test suite**

```bash
go test -race ./...
```

Expected: PASS.

- [ ] **Step 2: Frontend lint + build**

```bash
cd web && pnpm lint && pnpm build
```

Expected: PASS for both.

- [ ] **Step 3: Manual end-to-end flow (single-instance smoke test)**

With backend on `:8081` and frontend on `:3001`:

1. Sign in as host user. Settings → AI.
2. Add a provider: type OPENAI, title "OpenAI", endpoint blank (defaults to `https://api.openai.com/v1`), api-key `sk-...` (real or fake).
3. In Transcription, select the provider, set model to `whisper-1`, leave language and prompt empty. Save. Toast confirms.
4. Refresh — transcription section retains the values.
5. Add a second provider: type OPENAI, title "Groq", endpoint `https://api.groq.com/openai/v1`, api-key `gsk_...`. Switch transcription's provider dropdown to Groq, set model to `whisper-large-v3-turbo`, save.
6. Open the home editor. Open audio recorder. Transcribe button visible. (Don't actually call the network unless your test key works.)
7. Switch transcription's provider to "None — transcription disabled". Save. Reopen the recorder — Transcribe button hidden.
8. Set provider back to "OpenAI". Add a Gemini provider; switch transcription to Gemini. Verify the inline warning "Gemini does not accept browser-recorded audio/webm" appears under the provider dropdown.

- [ ] **Step 4: Final commit (if anything was tweaked during verification)**

If verification surfaced any minor fix (e.g., a string typo in the locale), commit it now:

```bash
git add -A
git commit -m "chore(settings): polish transcription section copy"
```

---

## Self-review checklist (run before opening the PR)

1. **Spec coverage:**
   - Schema additive `TranscriptionConfig` (store + api): Tasks 1, 2 ✓
   - Backend: read setting at `Transcribe` start, fall-through resolution, `FailedPrecondition` when unconfigured: Task 6 ✓
   - Validation: `provider_id` references existing provider; length caps on model/language/prompt: Task 4 ✓
   - `TranscribeRequest.provider_id` becomes optional: Task 5 ✓
   - Frontend: AI Integrations + Transcription split, Provider/Model/Language/Prompt fields, provider dropdown disabled when empty, "Add an AI integration first" hint, Gemini webm warning, no-key warning: Task 7 ✓
   - Frontend: editor reads `aiSetting.transcription.providerId`, service drops provider arg: Task 8 ✓
   - Backwards compat (no migration): covered — existing instances default to empty `provider_id` and fall into "transcription disabled" branch ✓
   - Gemini webm: inline warning chosen, implemented as the `transcription-warning-gemini-webm` string in Task 7 ✓

2. **Placeholder scan:** No "TBD", "TODO", or "implement later" markers in this plan. Each step contains exact file paths, exact code, exact commands, expected output.

3. **Type / name consistency:**
   - Store proto: `InstanceAISetting.transcription` → `TranscriptionConfig` (Task 1).
   - Generated Go type: `storepb.TranscriptionConfig` (referenced in Tasks 3, 4, 6).
   - API proto: `InstanceSetting.AISetting.transcription` → `InstanceSetting.TranscriptionConfig` (Task 2). Generated Go type: `v1pb.InstanceSetting_TranscriptionConfig` (Tasks 3, 4). Generated TS type: `InstanceSetting_TranscriptionConfig` and `InstanceSetting_TranscriptionConfigSchema` (Task 7).
   - All uses match.

4. **Things to watch during execution:**
   - `buf generate` produces TS type names that differ slightly across generators. If `InstanceSetting_TranscriptionConfigSchema` doesn't exist after Task 2's regeneration, check the actual export name in `web/src/types/proto/api/v1/instance_service_pb.ts` and adjust Task 7's imports accordingly.
   - The `Textarea` UI primitive existence is verified mid-Task 7. If absent, fall back to `<textarea>` with project styling.
   - `prepareInstanceAISettingForUpdate` runs only when the AI setting key is being updated; the `existing` lookup uses `s.Store.GetInstanceAISetting(ctx)` which already returns the current state with transcription populated (after Task 1).

{t("setting.ai.byok-title")}