@nextclaw/ui 0.6.10 → 0.6.12

package/src/components/chat/stores/chat-session-list.store.ts

@@ -0,0 +1,34 @@
+import { create } from 'zustand';
+import type { SessionEntryView } from '@/api/types';
+
+export type ChatSessionListSnapshot = {
+  sessions: SessionEntryView[];
+  selectedSessionKey: string | null;
+  selectedAgentId: string;
+  query: string;
+  isLoading: boolean;
+};
+
+type ChatSessionListStore = {
+  snapshot: ChatSessionListSnapshot;
+  setSnapshot: (patch: Partial<ChatSessionListSnapshot>) => void;
+};
+
+const initialSnapshot: ChatSessionListSnapshot = {
+  sessions: [],
+  selectedSessionKey: null,
+  selectedAgentId: 'main',
+  query: '',
+  isLoading: false
+};
+
+export const useChatSessionListStore = create<ChatSessionListStore>((set) => ({
+  snapshot: initialSnapshot,
+  setSnapshot: (patch) =>
+    set((state) => ({
+      snapshot: {
+        ...state.snapshot,
+        ...patch
+      }
+    }))
+}));

package/src/components/chat/stores/chat-thread.store.ts

@@ -0,0 +1,52 @@
+import { create } from 'zustand';
+import type { MutableRefObject } from 'react';
+import type { UiMessage } from '@nextclaw/agent-chat';
+import type { ChatModelOption } from '@/components/chat/chat-input.types';
+
+export type ChatThreadSnapshot = {
+  isProviderStateResolved: boolean;
+  modelOptions: ChatModelOption[];
+  sessionTypeUnavailable: boolean;
+  sessionTypeUnavailableMessage?: string | null;
+  selectedSessionKey: string | null;
+  sessionDisplayName?: string;
+  canDeleteSession: boolean;
+  isDeletePending: boolean;
+  threadRef: MutableRefObject<HTMLDivElement | null> | null;
+  isHistoryLoading: boolean;
+  uiMessages: UiMessage[];
+  isSending: boolean;
+  isAwaitingAssistantOutput: boolean;
+};
+
+type ChatThreadStore = {
+  snapshot: ChatThreadSnapshot;
+  setSnapshot: (patch: Partial<ChatThreadSnapshot>) => void;
+};
+
+const initialSnapshot: ChatThreadSnapshot = {
+  isProviderStateResolved: false,
+  modelOptions: [],
+  sessionTypeUnavailable: false,
+  sessionTypeUnavailableMessage: null,
+  selectedSessionKey: null,
+  sessionDisplayName: undefined,
+  canDeleteSession: false,
+  isDeletePending: false,
+  threadRef: null,
+  isHistoryLoading: false,
+  uiMessages: [],
+  isSending: false,
+  isAwaitingAssistantOutput: false
+};
+
+export const useChatThreadStore = create<ChatThreadStore>((set) => ({
+  snapshot: initialSnapshot,
+  setSnapshot: (patch) =>
+    set((state) => ({
+      snapshot: {
+        ...state.snapshot,
+        ...patch
+      }
+    }))
+}));

package/src/components/chat/useChatRuntimeController.ts

@@ -0,0 +1,134 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { type AgentChatController, getStopDisabledReason } from '@nextclaw/agent-chat';
+import type { ChatRunView, SessionMessageView } from '@/api/types';
+import type { SendMessageParams, UseChatStreamControllerParams } from '@/components/chat/chat-stream/types';
+import { buildResumeMetadata, buildSendMetadata } from '@/components/chat/chat-stream/nextbot-parsers';
+import { buildUiMessagesFromHistoryMessages, normalizeRequestedSkills } from '@/lib/chat-runtime-utils';
+import { useValueFromBehaviorSubject, useValueFromObservable } from '@/hooks/useObservable';
+
+export function useChatRuntimeController(
+  params: UseChatStreamControllerParams,
+  controller: AgentChatController
+) {
+  const paramsRef = useRef(params);
+  useEffect(() => {
+    paramsRef.current = params;
+  });
+
+  const activeHistorySessionKeyRef = useRef<string | null>(null);
+
+  // Bind callbacks to controller
+  useEffect(() => {
+    controller.setCallbacks({
+      onRunSettled: async ({ sourceSessionId, resultSessionId }) => {
+        const bindings = paramsRef.current;
+        await bindings.refetchSessions();
+        const activeSessionKey = bindings.selectedSessionKeyRef.current;
+        if (!activeSessionKey || activeSessionKey === sourceSessionId || (resultSessionId && activeSessionKey === resultSessionId)) {
+          await bindings.refetchHistory();
+        }
+      },
+      onRunError: ({ sourceMessage, restoreDraft }) => {
+        if (restoreDraft) {
+          paramsRef.current.setDraft((prev) => (prev.trim().length === 0 && sourceMessage ? sourceMessage : prev));
+        }
+      },
+      onSessionChanged: (sessionId) => {
+        paramsRef.current.setSelectedSessionKey((prev) => (prev === sessionId ? prev : sessionId));
+      }
+    });
+  }, [controller]);
+
+  // Reactive state from controller observables
+  const uiMessages = useValueFromObservable(controller.messages$, controller.getMessages());
+  const isSending = useValueFromBehaviorSubject(controller.isAgentResponding$);
+  const isAwaitingAssistantOutput = useValueFromBehaviorSubject(controller.isAwaitingResponse$);
+  const activeRun = useValueFromBehaviorSubject(controller.activeRun$);
+  const lastSendError = useValueFromBehaviorSubject(controller.lastError$);
+
+  // Derived state
+  const activeBackendRunId = activeRun?.remoteRunId ?? null;
+  const stopDisabledReason = getStopDisabledReason(activeRun);
+  const canStopCurrentRun = Boolean(
+    activeRun && (stopDisabledReason === null || (activeRun.remoteStopCapable && !activeBackendRunId))
+  );
+
+  const sendMessage = useCallback(async (payload: SendMessageParams) => {
+    const requestedSkills = normalizeRequestedSkills(payload.requestedSkills);
+    const metadata = buildSendMetadata(payload, requestedSkills);
+    await controller.send({
+      message: payload.message,
+      sessionId: payload.sessionKey,
+      agentId: payload.agentId,
+      metadata,
+      restoreDraftOnError: payload.restoreDraftOnError,
+      stopCapable: payload.stopSupported,
+      stopReason: payload.stopReason
+    });
+  }, [controller]);
+
+  const resumeRun = useCallback(async (run: ChatRunView) => {
+    const backendRunId = run.runId?.trim();
+    const sessionKey = run.sessionKey?.trim();
+    if (!backendRunId || !sessionKey) {
+      return;
+    }
+    const metadata = buildResumeMetadata(run);
+    await controller.resume({
+      remoteRunId: backendRunId,
+      sessionId: sessionKey,
+      agentId: run.agentId,
+      metadata,
+      stopCapable: run.stopSupported,
+      stopReason: run.stopReason
+    });
+  }, [controller]);
+
+  const stopCurrentRun = useCallback(async () => {
+    await controller.stop();
+  }, [controller]);
+
+  const resetStreamState = useCallback(() => {
+    activeHistorySessionKeyRef.current = null;
+    controller.reset();
+  }, [controller]);
+
+  const applyHistoryMessages = useCallback((messages: SessionMessageView[], options?: { isLoading?: boolean }) => {
+    const isRunActive = Boolean(controller.activeRun$.getValue() || controller.isAgentResponding$.getValue());
+    if (isRunActive) {
+      return;
+    }
+    const selectedSessionKey = paramsRef.current.selectedSessionKeyRef.current;
+    if (selectedSessionKey !== activeHistorySessionKeyRef.current) {
+      activeHistorySessionKeyRef.current = selectedSessionKey;
+      if (controller.getMessages().length > 0) {
+        controller.setMessages([]);
+      }
+    }
+    if (!selectedSessionKey) {
+      if (controller.getMessages().length > 0) {
+        controller.setMessages([]);
+      }
+      return;
+    }
+    if (options?.isLoading && messages.length === 0) {
+      return;
+    }
+    controller.setMessages(buildUiMessagesFromHistoryMessages(messages));
+  }, [controller]);
+
+  return {
+    uiMessages,
+    isSending,
+    isAwaitingAssistantOutput,
+    canStopCurrentRun,
+    stopDisabledReason,
+    lastSendError,
+    activeBackendRunId,
+    sendMessage,
+    stopCurrentRun,
+    resumeRun,
+    resetStreamState,
+    applyHistoryMessages
+  };
+}

package/src/components/chat/useChatSessionTypeState.ts

@@ -0,0 +1,148 @@
+import { useEffect, useMemo } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+import type { SessionEntryView } from '@/api/types';
+import { t } from '@/lib/i18n';
+
+export const DEFAULT_SESSION_TYPE = 'native';
+
+export type ChatSessionTypeOption = {
+  value: string;
+  label: string;
+};
+
+type UseChatSessionTypeStateParams = {
+  selectedSession: SessionEntryView | null;
+  selectedSessionKey: string | null;
+  pendingSessionType: string;
+  setPendingSessionType: Dispatch<SetStateAction<string>>;
+  sessionTypesData?: {
+    defaultType?: string;
+    options?: Array<{ value: string; label: string }>;
+  } | null;
+};
+
+export function normalizeSessionType(value: unknown): string {
+  if (typeof value !== 'string') {
+    return DEFAULT_SESSION_TYPE;
+  }
+  const normalized = value.trim().toLowerCase();
+  return normalized || DEFAULT_SESSION_TYPE;
+}
+
+export function resolveSessionTypeLabel(sessionType: string, fallbackLabel?: string): string {
+  if (sessionType === 'native') {
+    return t('chatSessionTypeNative');
+  }
+  if (sessionType === 'codex-sdk') {
+    return t('chatSessionTypeCodex');
+  }
+  if (sessionType === 'claude-agent-sdk') {
+    return t('chatSessionTypeClaude');
+  }
+  return fallbackLabel?.trim() || sessionType;
+}
+
+function buildSessionTypeOptions(
+  options: Array<{ value: string; label: string }>
+): ChatSessionTypeOption[] {
+  const deduped = new Map<string, ChatSessionTypeOption>();
+  for (const option of options) {
+    const value = normalizeSessionType(option.value);
+    deduped.set(value, {
+      value,
+      label: option.label?.trim() || resolveSessionTypeLabel(value)
+    });
+  }
+  if (!deduped.has(DEFAULT_SESSION_TYPE)) {
+    deduped.set(DEFAULT_SESSION_TYPE, {
+      value: DEFAULT_SESSION_TYPE,
+      label: resolveSessionTypeLabel(DEFAULT_SESSION_TYPE)
+    });
+  }
+  return Array.from(deduped.values()).sort((left, right) => {
+    if (left.value === DEFAULT_SESSION_TYPE) {
+      return -1;
+    }
+    if (right.value === DEFAULT_SESSION_TYPE) {
+      return 1;
+    }
+    return left.value.localeCompare(right.value);
+  });
+}
+
+export function useChatSessionTypeState(params: UseChatSessionTypeStateParams): {
+  sessionTypeOptions: ChatSessionTypeOption[];
+  defaultSessionType: string;
+  selectedSessionType: string;
+  canEditSessionType: boolean;
+  sessionTypeUnavailable: boolean;
+  sessionTypeUnavailableMessage: string | null;
+} {
+  const {
+    selectedSession,
+    selectedSessionKey,
+    pendingSessionType,
+    setPendingSessionType,
+    sessionTypesData
+  } = params;
+
+  const runtimeSessionTypeOptions = useMemo(
+    () => buildSessionTypeOptions(sessionTypesData?.options ?? []),
+    [sessionTypesData?.options]
+  );
+  const sessionTypeOptions = useMemo(() => {
+    const options = [...runtimeSessionTypeOptions];
+    const currentSessionType = normalizeSessionType(selectedSession?.sessionType);
+    if (!options.some((option) => option.value === currentSessionType)) {
+      options.push({
+        value: currentSessionType,
+        label: resolveSessionTypeLabel(currentSessionType)
+      });
+    }
+    return options.sort((left, right) => {
+      if (left.value === DEFAULT_SESSION_TYPE) {
+        return -1;
+      }
+      if (right.value === DEFAULT_SESSION_TYPE) {
+        return 1;
+      }
+      return left.value.localeCompare(right.value);
+    });
+  }, [runtimeSessionTypeOptions, selectedSession?.sessionType]);
+  const defaultSessionType = useMemo(
+    () => normalizeSessionType(sessionTypesData?.defaultType ?? DEFAULT_SESSION_TYPE),
+    [sessionTypesData?.defaultType]
+  );
+  const selectedSessionType = useMemo(
+    () => normalizeSessionType(selectedSession?.sessionType ?? pendingSessionType ?? defaultSessionType),
+    [defaultSessionType, pendingSessionType, selectedSession?.sessionType]
+  );
+
+  useEffect(() => {
+    if (selectedSessionKey) {
+      return;
+    }
+    setPendingSessionType(defaultSessionType);
+  }, [defaultSessionType, selectedSessionKey, setPendingSessionType]);
+
+  const canEditSessionType = !selectedSessionKey || Boolean(selectedSession?.sessionTypeMutable);
+  const availableSessionTypeSet = useMemo(
+    () => new Set(runtimeSessionTypeOptions.map((option) => option.value)),
+    [runtimeSessionTypeOptions]
+  );
+  const sessionTypeUnavailable = Boolean(
+    selectedSession && !availableSessionTypeSet.has(normalizeSessionType(selectedSession.sessionType))
+  );
+  const sessionTypeUnavailableMessage = sessionTypeUnavailable
+    ? `${resolveSessionTypeLabel(selectedSessionType)} ${t('chatSessionTypeUnavailableSuffix')}`
+    : null;
+
+  return {
+    sessionTypeOptions,
+    defaultSessionType,
+    selectedSessionType,
+    canEditSessionType,
+    sessionTypeUnavailable,
+    sessionTypeUnavailableMessage
+  };
+}

package/src/components/common/MaskedInput.tsx

@@ -9,7 +9,7 @@ interface MaskedInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   isSet?: boolean;
 }
 
-export function MaskedInput({ maskedValue, isSet, className, value, onChange, placeholder, ...props }: MaskedInputProps) {
+export function MaskedInput({ isSet, className, value, onChange, placeholder, ...props }: MaskedInputProps) {
   const [showKey, setShowKey] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
   const hasUserInput = typeof value === 'string' && value.length > 0;

package/src/components/config/SearchConfig.tsx

@@ -0,0 +1,297 @@
+import { useEffect, useMemo, useState } from 'react';
+import { ExternalLink, KeyRound, Search as SearchIcon } from 'lucide-react';
+import { PageHeader, PageLayout } from '@/components/layout/page-layout';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { useConfig, useConfigMeta, useUpdateSearch } from '@/hooks/useConfig';
+import { t } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+import { CONFIG_DETAIL_CARD_CLASS, CONFIG_SIDEBAR_CARD_CLASS, CONFIG_SPLIT_GRID_CLASS } from './config-layout';
+import type { SearchConfigUpdate, SearchProviderName } from '@/api/types';
+
+const FRESHNESS_OPTIONS = [
+  { value: 'noLimit', label: 'searchFreshnessNoLimit' },
+  { value: 'oneDay', label: 'searchFreshnessOneDay' },
+  { value: 'oneWeek', label: 'searchFreshnessOneWeek' },
+  { value: 'oneMonth', label: 'searchFreshnessOneMonth' },
+  { value: 'oneYear', label: 'searchFreshnessOneYear' }
+] as const;
+
+export function SearchConfig() {
+  const { data: config } = useConfig();
+  const { data: meta } = useConfigMeta();
+  const updateSearch = useUpdateSearch();
+  const providers = meta?.search ?? [];
+  const search = config?.search;
+
+  const [selectedProvider, setSelectedProvider] = useState<SearchProviderName>('bocha');
+  const [activeProvider, setActiveProvider] = useState<SearchProviderName>('bocha');
+  const [enabledProviders, setEnabledProviders] = useState<SearchProviderName[]>(['bocha']);
+  const [maxResults, setMaxResults] = useState('10');
+  const [bochaApiKey, setBochaApiKey] = useState('');
+  const [bochaBaseUrl, setBochaBaseUrl] = useState('https://api.bocha.cn/v1/web-search');
+  const [bochaSummary, setBochaSummary] = useState(true);
+  const [bochaFreshness, setBochaFreshness] = useState('noLimit');
+  const [braveApiKey, setBraveApiKey] = useState('');
+  const [braveBaseUrl, setBraveBaseUrl] = useState('https://api.search.brave.com/res/v1/web/search');
+
+  useEffect(() => {
+    if (!search) {
+      return;
+    }
+    setSelectedProvider(search.provider);
+    setActiveProvider(search.provider);
+    setEnabledProviders(search.enabledProviders);
+    setMaxResults(String(search.defaults.maxResults));
+    setBochaBaseUrl(search.providers.bocha.baseUrl);
+    setBochaSummary(Boolean(search.providers.bocha.summary));
+    setBochaFreshness(search.providers.bocha.freshness ?? 'noLimit');
+    setBraveBaseUrl(search.providers.brave.baseUrl);
+  }, [search]);
+
+  const selectedMeta = useMemo(
+    () => providers.find((provider) => provider.name === selectedProvider),
+    [providers, selectedProvider]
+  );
+  const selectedView = search?.providers[selectedProvider];
+  const selectedEnabled = enabledProviders.includes(selectedProvider);
+  const bochaDocsUrl = search?.providers.bocha.docsUrl ?? meta?.search.find((provider) => provider.name === 'bocha')?.docsUrl ?? 'https://open.bocha.cn';
+  const activationButtonLabel = selectedEnabled
+    ? t('searchProviderDeactivate')
+    : t('searchProviderActivate');
+
+  const buildSearchPayload = (
+    nextEnabledProviders: SearchProviderName[] = enabledProviders,
+    nextActiveProvider: SearchProviderName = activeProvider
+  ): SearchConfigUpdate => ({
+    provider: nextActiveProvider,
+    enabledProviders: nextEnabledProviders,
+    defaults: {
+      maxResults: Number(maxResults) || 10
+    },
+    providers: {
+      bocha: {
+        apiKey: bochaApiKey || undefined,
+        baseUrl: bochaBaseUrl,
+        summary: bochaSummary,
+        freshness: bochaFreshness
+      },
+      brave: {
+        apiKey: braveApiKey || undefined,
+        baseUrl: braveBaseUrl
+      }
+    }
+  });
+
+  const handleToggleEnabled = () => {
+    const nextEnabledProviders = selectedEnabled
+      ? enabledProviders.filter((provider) => provider !== selectedProvider)
+      : [...enabledProviders, selectedProvider];
+    setEnabledProviders(nextEnabledProviders);
+    updateSearch.mutate({
+      data: buildSearchPayload(nextEnabledProviders)
+    });
+  };
+
+  const handleActiveProviderChange = (value: string) => {
+    setActiveProvider(value as SearchProviderName);
+  };
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    updateSearch.mutate({
+      data: buildSearchPayload()
+    });
+  };
+
+  if (!search || providers.length === 0) {
+    return <div className="p-8">{t('loading')}</div>;
+  }
+
+  return (
+    <PageLayout>
+      <PageHeader title={t('searchPageTitle')} description={t('searchPageDescription')} />
+
+      <div className={CONFIG_SPLIT_GRID_CLASS}>
+        <section className={CONFIG_SIDEBAR_CARD_CLASS}>
+          <div className="border-b border-gray-100 px-4 py-4">
+            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-gray-500">{t('searchChannels')}</p>
+          </div>
+          <div className="min-h-0 flex-1 space-y-2 overflow-y-auto p-3">
+            {providers.map((provider) => {
+              const providerView = search.providers[provider.name];
+              const isEnabled = enabledProviders.includes(provider.name);
+              const isSelected = selectedProvider === provider.name;
+              return (
+                <button
+                  key={provider.name}
+                  type="button"
+                  onClick={() => setSelectedProvider(provider.name)}
+                  className={cn(
+                    'w-full rounded-xl border p-3 text-left transition-all',
+                    isSelected
+                      ? 'border-primary/30 bg-primary-50/40 shadow-sm'
+                      : 'border-gray-200/70 bg-white hover:border-gray-300 hover:bg-gray-50/70'
+                  )}
+                >
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                      <p className="truncate text-sm font-semibold text-gray-900">{provider.displayName}</p>
+                      <p className="line-clamp-2 text-[11px] text-gray-500">
+                        {provider.name === 'bocha' ? t('searchProviderBochaDescription') : t('searchProviderBraveDescription')}
+                      </p>
+                    </div>
+                    <div className="flex flex-col items-end gap-1">
+                      <span className="rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">
+                        {providerView.apiKeySet ? t('searchStatusConfigured') : t('searchStatusNeedsSetup')}
+                      </span>
+                      {isEnabled ? (
+                        <span className="rounded-full bg-emerald-50 px-2 py-0.5 text-[11px] font-medium text-emerald-700">
+                          {t('searchProviderActivated')}
+                        </span>
+                      ) : null}
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </section>
+
+        <form onSubmit={handleSubmit} className={cn(CONFIG_DETAIL_CARD_CLASS, 'p-6')}>
+          {!selectedMeta || !selectedView ? (
+            <div className="flex h-full items-center justify-center text-sm text-gray-500">{t('searchNoProviderSelected')}</div>
+          ) : (
+            <div className="space-y-6 overflow-y-auto">
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex items-center gap-3">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-white">
+                    <SearchIcon className="h-5 w-5" />
+                  </div>
+                  <div>
+                    <h3 className="text-lg font-semibold text-gray-900">{selectedMeta.displayName}</h3>
+                    <p className="text-sm text-gray-500">{selectedMeta.description}</p>
+                  </div>
+                </div>
+                <Button
+                  type="button"
+                  variant={selectedEnabled ? 'secondary' : 'outline'}
+                  className="rounded-xl"
+                  onClick={handleToggleEnabled}
+                >
+                  {activationButtonLabel}
+                </Button>
+              </div>
+
+              <div className="grid gap-4 md:grid-cols-2">
+                <div className="space-y-2">
+                  <Label>{t('searchActiveProvider')}</Label>
+                  <Select value={activeProvider} onValueChange={handleActiveProviderChange}>
+                    <SelectTrigger className="rounded-xl">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {providers.map((provider) => (
+                        <SelectItem key={provider.name} value={provider.name}>{provider.displayName}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="space-y-2">
+                  <Label>{t('searchDefaultMaxResults')}</Label>
+                  <Input
+                    value={maxResults}
+                    onChange={(event) => setMaxResults(event.target.value)}
+                    inputMode="numeric"
+                    className="rounded-xl"
+                  />
+                </div>
+              </div>
+
+              {selectedProvider === 'bocha' ? (
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <Label>{t('apiKey')}</Label>
+                    <Input
+                      type="password"
+                      value={bochaApiKey}
+                      onChange={(event) => setBochaApiKey(event.target.value)}
+                      placeholder={search.providers.bocha.apiKeyMasked || t('enterApiKey')}
+                      className="rounded-xl"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>{t('searchProviderBaseUrl')}</Label>
+                    <Input value={bochaBaseUrl} onChange={(event) => setBochaBaseUrl(event.target.value)} className="rounded-xl" />
+                  </div>
+                  <div className="grid gap-4 md:grid-cols-2">
+                    <div className="space-y-2">
+                      <Label>{t('searchProviderSummary')}</Label>
+                      <Select value={bochaSummary ? 'true' : 'false'} onValueChange={(value) => setBochaSummary(value === 'true')}>
+                        <SelectTrigger className="rounded-xl">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="true">{t('enabled')}</SelectItem>
+                          <SelectItem value="false">{t('disabled')}</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-2">
+                      <Label>{t('searchProviderFreshness')}</Label>
+                      <Select value={bochaFreshness} onValueChange={setBochaFreshness}>
+                        <SelectTrigger className="rounded-xl">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {FRESHNESS_OPTIONS.map((option) => (
+                            <SelectItem key={option.value} value={option.value}>{t(option.label)}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <a href={bochaDocsUrl} target="_blank" rel="noreferrer">
+                      <Button type="button" variant="outline" className="rounded-xl">
+                        <ExternalLink className="mr-2 h-4 w-4" />
+                        {t('searchProviderOpenDocs')}
+                      </Button>
+                    </a>
+                  </div>
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <Label>{t('apiKey')}</Label>
+                    <Input
+                      type="password"
+                      value={braveApiKey}
+                      onChange={(event) => setBraveApiKey(event.target.value)}
+                      placeholder={search.providers.brave.apiKeyMasked || t('enterApiKey')}
+                      className="rounded-xl"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>{t('searchProviderBaseUrl')}</Label>
+                    <Input value={braveBaseUrl} onChange={(event) => setBraveBaseUrl(event.target.value)} className="rounded-xl" />
+                  </div>
+                </div>
+              )}
+
+              <div className="flex justify-end">
+                <Button type="submit" disabled={updateSearch.isPending}>
+                  <KeyRound className="mr-2 h-4 w-4" />
+                  {updateSearch.isPending ? t('saving') : t('saveChanges')}
+                </Button>
+              </div>
+            </div>
+          )}
+        </form>
+      </div>
+    </PageLayout>
+  );
+}