[Init] Initial commit - NetMesh terminal manager

components/settings/tabs/ai/WebSearchSettings.tsx

@@ -0,0 +1,211 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import type { WebSearchConfig, WebSearchProviderId } from "../../../../infrastructure/ai/types";
+import { WEB_SEARCH_PROVIDER_PRESETS } from "../../../../infrastructure/ai/types";
+import { encryptField, decryptField } from "../../../../infrastructure/persistence/secureFieldAdapter";
+import { useI18n } from "../../../../application/i18n/I18nProvider";
+import { Select, SettingCard, SettingRow, SettingsSection, Toggle } from "../../settings-ui";
+
+const SEARCH_ICON_PATHS: Record<WebSearchProviderId, string> = {
+  tavily: "/ai/search/tavily.svg",
+  exa: "/ai/search/exa.png",
+  bocha: "/ai/search/bocha.webp",
+  zhipu: "/ai/search/zhipu.png",
+  searxng: "/ai/search/searxng.svg",
+};
+
+const SearchProviderIcon: React.FC<{ providerId: WebSearchProviderId }> = ({ providerId }) => (
+  <img
+    src={SEARCH_ICON_PATHS[providerId]}
+    alt=""
+    className="w-4 h-4 shrink-0"
+  />
+);
+
+const PROVIDER_OPTIONS: Array<{ value: WebSearchProviderId; label: string; icon: React.ReactNode }> = Object.entries(
+  WEB_SEARCH_PROVIDER_PRESETS,
+).map(([id, preset]) => ({
+  value: id as WebSearchProviderId,
+  label: preset.name,
+  icon: <SearchProviderIcon providerId={id as WebSearchProviderId} />,
+}));
+
+export const WebSearchSettings: React.FC<{
+  webSearchConfig: WebSearchConfig | null;
+  setWebSearchConfig: (config: WebSearchConfig | null) => void;
+}> = ({ webSearchConfig, setWebSearchConfig }) => {
+  const { t } = useI18n();
+  const [apiKeyInput, setApiKeyInput] = useState("");
+  const [showApiKey, setShowApiKey] = useState(false);
+  const [isDecrypting, setIsDecrypting] = useState(false);
+
+  const config = useMemo(() => webSearchConfig ?? {
+    providerId: "tavily" as WebSearchProviderId,
+    enabled: false,
+    maxResults: 5,
+  }, [webSearchConfig]);
+
+  // Ref to always read the latest config in async callbacks (avoids stale closure)
+  const configRef = useRef(config);
+  configRef.current = config;
+
+  const preset = WEB_SEARCH_PROVIDER_PRESETS[config.providerId];
+
+  // Decrypt API key on mount or when provider changes (with cancellation guard)
+  const decryptSeqRef = useRef(0);
+  useEffect(() => {
+    if (config.apiKey) {
+      const seq = ++decryptSeqRef.current;
+      setIsDecrypting(true);
+      decryptField(config.apiKey)
+        .then((decrypted) => {
+          if (decryptSeqRef.current === seq) setApiKeyInput(decrypted ?? "");
+        })
+        .catch(() => {
+          if (decryptSeqRef.current === seq) setApiKeyInput(config.apiKey ?? "");
+        })
+        .finally(() => {
+          if (decryptSeqRef.current === seq) setIsDecrypting(false);
+        });
+    } else {
+      decryptSeqRef.current++;
+      setApiKeyInput("");
+      setIsDecrypting(false);
+    }
+  }, [config.apiKey, config.providerId]);
+
+  const updateConfig = useCallback(
+    (updates: Partial<WebSearchConfig>) => {
+      setWebSearchConfig({ ...configRef.current, ...updates });
+    },
+    [setWebSearchConfig],
+  );
+
+  const handleProviderChange = useCallback(
+    (val: string) => {
+      const providerId = val as WebSearchProviderId;
+      const newPreset = WEB_SEARCH_PROVIDER_PRESETS[providerId];
+      setWebSearchConfig({
+        ...configRef.current,
+        providerId,
+        apiKey: undefined,
+        apiHost: newPreset.defaultApiHost || undefined,
+      });
+      setApiKeyInput("");
+    },
+    [setWebSearchConfig],
+  );
+
+  // Sequence counter for blur saves — prevents out-of-order encryption results
+  const blurSeqRef = useRef(0);
+  const handleApiKeyBlur = useCallback(async () => {
+    if (!apiKeyInput.trim()) {
+      blurSeqRef.current++;
+      updateConfig({ apiKey: undefined });
+      return;
+    }
+    const seq = ++blurSeqRef.current;
+    const providerAtBlur = configRef.current.providerId;
+    const encrypted = await encryptField(apiKeyInput.trim());
+    // Only apply if this is still the latest blur and provider hasn't changed
+    if (blurSeqRef.current === seq && configRef.current.providerId === providerAtBlur) {
+      updateConfig({ apiKey: encrypted });
+    }
+  }, [apiKeyInput, updateConfig]);
+
+  return (
+    <SettingsSection title={t("ai.webSearch.title")}>
+      <SettingCard divided>
+        <SettingRow
+          anchorId="ai-web-search-enable"
+          label={t("ai.webSearch.enable")}
+          description={t("ai.webSearch.enable.description")}
+        >
+          <Toggle
+            checked={config.enabled}
+            onChange={(enabled) => updateConfig({ enabled })}
+          />
+        </SettingRow>
+
+        {/* Provider */}
+        <SettingRow
+          anchorId="ai-web-search-provider"
+          label={t("ai.webSearch.provider")}
+          description={t("ai.webSearch.provider.description")}
+        >
+          <Select
+            value={config.providerId}
+            options={PROVIDER_OPTIONS}
+            onChange={handleProviderChange}
+            className="w-48"
+          />
+        </SettingRow>
+
+        {/* API Key (hidden for SearXNG) */}
+        {preset.requiresApiKey && (
+          <SettingRow
+            label={t("ai.webSearch.apiKey")}
+            description={t("ai.webSearch.apiKey.description")}
+          >
+            <div className="flex items-center gap-1.5">
+              <input
+                type={showApiKey ? "text" : "password"}
+                value={isDecrypting ? "" : apiKeyInput}
+                placeholder={isDecrypting ? t("ai.providers.apiKey.decrypting") : t("ai.webSearch.apiKey.placeholder")}
+                onChange={(e) => setApiKeyInput(e.target.value)}
+                onBlur={() => void handleApiKeyBlur()}
+                className="w-64 h-9 rounded-md border border-input bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                disabled={isDecrypting}
+              />
+              <button
+                type="button"
+                onClick={() => setShowApiKey(!showApiKey)}
+                className="p-1.5 rounded hover:bg-muted text-muted-foreground"
+              >
+                {showApiKey ? <EyeOff size={14} /> : <Eye size={14} />}
+              </button>
+            </div>
+          </SettingRow>
+        )}
+
+        {/* API Host */}
+        <SettingRow
+          label={t("ai.webSearch.apiHost")}
+          description={
+            config.providerId === "searxng"
+              ? t("ai.webSearch.apiHost.searxngDescription")
+              : t("ai.webSearch.apiHost.description")
+          }
+        >
+          <input
+            type="text"
+            value={config.apiHost ?? preset.defaultApiHost}
+            onChange={(e) => updateConfig({ apiHost: e.target.value || undefined })}
+            placeholder={preset.defaultApiHost || "https://..."}
+            className="w-64 h-9 rounded-md border border-input bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          />
+        </SettingRow>
+
+        {/* Max Results */}
+        <SettingRow
+          label={t("ai.webSearch.maxResults")}
+          description={t("ai.webSearch.maxResults.description")}
+        >
+          <input
+            type="number"
+            value={config.maxResults ?? 5}
+            onChange={(e) => {
+              const val = parseInt(e.target.value, 10);
+              if (!isNaN(val) && val >= 1 && val <= 20) {
+                updateConfig({ maxResults: val });
+              }
+            }}
+            min={1}
+            max={20}
+            className="w-20 h-9 rounded-md border border-input bg-background px-3 text-sm text-right focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          />
+        </SettingRow>
+      </SettingCard>
+    </SettingsSection>
+  );
+};