@nextclaw/ui 0.5.21 → 0.5.22

package/src/components/config/SecretsConfig.tsx

@@ -0,0 +1,469 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useConfig, useUpdateSecrets } from '@/hooks/useConfig';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { PageHeader, PageLayout } from '@/components/layout/page-layout';
+import type { SecretProviderView, SecretRefView, SecretSourceView } from '@/api/types';
+import { t } from '@/lib/i18n';
+import { Plus, Save, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
+
+type ProviderRow = {
+  alias: string;
+  source: SecretSourceView;
+  prefix: string;
+  path: string;
+  command: string;
+  argsText: string;
+  cwd: string;
+  timeoutMs: number;
+};
+
+type RefRow = {
+  path: string;
+  source: SecretSourceView;
+  provider: string;
+  id: string;
+};
+
+const SOURCE_OPTIONS: SecretSourceView[] = ['env', 'file', 'exec'];
+
+function createProviderRow(alias = ''): ProviderRow {
+  return {
+    alias,
+    source: 'env',
+    prefix: '',
+    path: '',
+    command: '',
+    argsText: '',
+    cwd: '',
+    timeoutMs: 5000
+  };
+}
+
+function createRefRow(): RefRow {
+  return {
+    path: '',
+    source: 'env',
+    provider: '',
+    id: ''
+  };
+}
+
+function providerToRow(alias: string, provider: SecretProviderView): ProviderRow {
+  if (provider.source === 'env') {
+    return {
+      ...createProviderRow(alias),
+      source: 'env',
+      prefix: provider.prefix ?? ''
+    };
+  }
+
+  if (provider.source === 'file') {
+    return {
+      ...createProviderRow(alias),
+      source: 'file',
+      path: provider.path
+    };
+  }
+
+  return {
+    ...createProviderRow(alias),
+    source: 'exec',
+    command: provider.command,
+    argsText: (provider.args ?? []).join('\n'),
+    cwd: provider.cwd ?? '',
+    timeoutMs: provider.timeoutMs ?? 5000
+  };
+}
+
+function rowToProvider(row: ProviderRow): SecretProviderView {
+  if (row.source === 'env') {
+    return {
+      source: 'env',
+      ...(row.prefix.trim() ? { prefix: row.prefix.trim() } : {})
+    };
+  }
+
+  if (row.source === 'file') {
+    return {
+      source: 'file',
+      path: row.path.trim(),
+      format: 'json'
+    };
+  }
+
+  return {
+    source: 'exec',
+    command: row.command.trim(),
+    args: row.argsText
+      .split('\n')
+      .map((item) => item.trim())
+      .filter(Boolean),
+    ...(row.cwd.trim() ? { cwd: row.cwd.trim() } : {}),
+    timeoutMs: Math.max(1, Math.trunc(row.timeoutMs || 5000))
+  };
+}
+
+export function SecretsConfig() {
+  const { data: config, isLoading } = useConfig();
+  const updateSecrets = useUpdateSecrets();
+
+  const [enabled, setEnabled] = useState(true);
+  const [defaultEnv, setDefaultEnv] = useState('');
+  const [defaultFile, setDefaultFile] = useState('');
+  const [defaultExec, setDefaultExec] = useState('');
+  const [providers, setProviders] = useState<ProviderRow[]>([]);
+  const [refs, setRefs] = useState<RefRow[]>([]);
+
+  useEffect(() => {
+    const secrets = config?.secrets;
+    if (!secrets) {
+      setEnabled(true);
+      setDefaultEnv('');
+      setDefaultFile('');
+      setDefaultExec('');
+      setProviders([]);
+      setRefs([]);
+      return;
+    }
+
+    setEnabled(Boolean(secrets.enabled));
+    setDefaultEnv(secrets.defaults.env ?? '');
+    setDefaultFile(secrets.defaults.file ?? '');
+    setDefaultExec(secrets.defaults.exec ?? '');
+
+    const nextProviders = Object.entries(secrets.providers).map(([alias, provider]) =>
+      providerToRow(alias, provider)
+    );
+    const nextRefs = Object.entries(secrets.refs).map(([path, ref]) => ({
+      path,
+      source: ref.source,
+      provider: ref.provider ?? '',
+      id: ref.id
+    }));
+
+    setProviders(nextProviders);
+    setRefs(nextRefs);
+  }, [config?.secrets]);
+
+  const providerAliases = useMemo(() => {
+    const aliases = providers
+      .map((item) => item.alias.trim())
+      .filter(Boolean);
+    return Array.from(new Set(aliases));
+  }, [providers]);
+
+  const updateProvider = (index: number, patch: Partial<ProviderRow>) => {
+    setProviders((prev) => prev.map((entry, cursor) => (cursor === index ? { ...entry, ...patch } : entry)));
+  };
+
+  const updateRef = (index: number, patch: Partial<RefRow>) => {
+    setRefs((prev) => prev.map((entry, cursor) => (cursor === index ? { ...entry, ...patch } : entry)));
+  };
+
+  const handleSave = () => {
+    try {
+      const providerMap: Record<string, SecretProviderView> = {};
+      for (const [index, row] of providers.entries()) {
+        const alias = row.alias.trim();
+        if (!alias) {
+          throw new Error(`${t('providerAlias')} #${index + 1} ${t('isRequired')}`);
+        }
+
+        if (providerMap[alias]) {
+          throw new Error(`${t('providerAlias')}: ${alias} (${t('duplicate')})`);
+        }
+
+        if (row.source === 'file' && !row.path.trim()) {
+          throw new Error(`${t('secretFilePath')} #${index + 1} ${t('isRequired')}`);
+        }
+
+        if (row.source === 'exec' && !row.command.trim()) {
+          throw new Error(`${t('secretExecCommand')} #${index + 1} ${t('isRequired')}`);
+        }
+
+        providerMap[alias] = rowToProvider(row);
+      }
+
+      const refMap: Record<string, SecretRefView> = {};
+      for (const [index, row] of refs.entries()) {
+        const path = row.path.trim();
+        const id = row.id.trim();
+        if (!path) {
+          throw new Error(`${t('secretConfigPath')} #${index + 1} ${t('isRequired')}`);
+        }
+        if (!id) {
+          throw new Error(`${t('secretId')} #${index + 1} ${t('isRequired')}`);
+        }
+
+        const provider = row.provider.trim();
+        if (provider && !providerMap[provider]) {
+          throw new Error(`${t('secretProviderAlias')}: ${provider} ${t('notFound')}`);
+        }
+
+        refMap[path] = {
+          source: row.source,
+          ...(provider ? { provider } : {}),
+          id
+        };
+      }
+
+      updateSecrets.mutate({
+        data: {
+          enabled,
+          defaults: {
+            env: defaultEnv.trim() || null,
+            file: defaultFile.trim() || null,
+            exec: defaultExec.trim() || null
+          },
+          providers: providerMap,
+          refs: refMap
+        }
+      });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      toast.error(message);
+    }
+  };
+
+  if (isLoading) {
+    return <div className="p-8 text-gray-400">{t('loading')}</div>;
+  }
+
+  return (
+    <PageLayout className="space-y-6">
+      <PageHeader title={t('secretsPageTitle')} description={t('secretsPageDescription')} />
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('secrets')}</CardTitle>
+          <CardDescription>{t('secretsEnabledHelp')}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between rounded-xl border border-gray-200 p-3">
+            <div>
+              <p className="text-sm font-medium text-gray-800">{t('enabled')}</p>
+              <p className="text-xs text-gray-500">{t('secretsEnabledHelp')}</p>
+            </div>
+            <Switch checked={enabled} onCheckedChange={setEnabled} />
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+            <div className="space-y-2">
+              <Label>{t('defaultEnvProvider')}</Label>
+              <Select value={defaultEnv || '__none__'} onValueChange={(value) => setDefaultEnv(value === '__none__' ? '' : value)}>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('noneOption')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">{t('noneOption')}</SelectItem>
+                  {providerAliases.map((alias) => (
+                    <SelectItem key={alias} value={alias}>
+                      {alias}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label>{t('defaultFileProvider')}</Label>
+              <Select value={defaultFile || '__none__'} onValueChange={(value) => setDefaultFile(value === '__none__' ? '' : value)}>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('noneOption')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">{t('noneOption')}</SelectItem>
+                  {providerAliases.map((alias) => (
+                    <SelectItem key={alias} value={alias}>
+                      {alias}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label>{t('defaultExecProvider')}</Label>
+              <Select value={defaultExec || '__none__'} onValueChange={(value) => setDefaultExec(value === '__none__' ? '' : value)}>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('noneOption')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">{t('noneOption')}</SelectItem>
+                  {providerAliases.map((alias) => (
+                    <SelectItem key={alias} value={alias}>
+                      {alias}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('secretProvidersTitle')}</CardTitle>
+          <CardDescription>{t('secretProvidersDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {providers.map((provider, index) => (
+            <div key={`provider-${index}`} className="rounded-xl border border-gray-200 p-3 space-y-3">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                <Input
+                  value={provider.alias}
+                  onChange={(event) => updateProvider(index, { alias: event.target.value })}
+                  placeholder={t('providerAlias')}
+                />
+                <Select value={provider.source} onValueChange={(value) => updateProvider(index, { source: value as SecretSourceView })}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {SOURCE_OPTIONS.map((source) => (
+                      <SelectItem key={source} value={source}>
+                        {source}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button type="button" variant="outline" onClick={() => setProviders((prev) => prev.filter((_, i) => i !== index))}>
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  {t('removeProvider')}
+                </Button>
+              </div>
+
+              {provider.source === 'env' && (
+                <Input
+                  value={provider.prefix}
+                  onChange={(event) => updateProvider(index, { prefix: event.target.value })}
+                  placeholder={t('envPrefix')}
+                />
+              )}
+
+              {provider.source === 'file' && (
+                <Input
+                  value={provider.path}
+                  onChange={(event) => updateProvider(index, { path: event.target.value })}
+                  placeholder={t('secretFilePath')}
+                />
+              )}
+
+              {provider.source === 'exec' && (
+                <div className="space-y-2">
+                  <Input
+                    value={provider.command}
+                    onChange={(event) => updateProvider(index, { command: event.target.value })}
+                    placeholder={t('secretExecCommand')}
+                  />
+                  <textarea
+                    className="min-h-[84px] w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-mono"
+                    value={provider.argsText}
+                    onChange={(event) => updateProvider(index, { argsText: event.target.value })}
+                    placeholder={t('secretExecArgs')}
+                  />
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                    <Input
+                      value={provider.cwd}
+                      onChange={(event) => updateProvider(index, { cwd: event.target.value })}
+                      placeholder={t('secretExecCwd')}
+                    />
+                    <Input
+                      type="number"
+                      min={1}
+                      value={provider.timeoutMs}
+                      onChange={(event) => updateProvider(index, { timeoutMs: Number.parseInt(event.target.value, 10) || 5000 })}
+                      placeholder={t('secretExecTimeoutMs')}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+
+          <Button type="button" variant="outline" onClick={() => setProviders((prev) => [...prev, createProviderRow()])}>
+            <Plus className="h-4 w-4 mr-2" />
+            {t('addSecretProvider')}
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('secretRefsTitle')}</CardTitle>
+          <CardDescription>{t('secretRefsDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {refs.map((ref, index) => (
+            <div key={`ref-${index}`} className="rounded-xl border border-gray-200 p-3 space-y-3">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <Input
+                  value={ref.path}
+                  onChange={(event) => updateRef(index, { path: event.target.value })}
+                  placeholder={t('secretConfigPath')}
+                />
+                <Input
+                  value={ref.id}
+                  onChange={(event) => updateRef(index, { id: event.target.value })}
+                  placeholder={t('secretId')}
+                />
+                <Select value={ref.source} onValueChange={(value) => updateRef(index, { source: value as SecretSourceView })}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {SOURCE_OPTIONS.map((source) => (
+                      <SelectItem key={source} value={source}>
+                        {source}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <div className="grid grid-cols-[1fr_auto] gap-2">
+                  <Select
+                    value={ref.provider || '__none__'}
+                    onValueChange={(value) => updateRef(index, { provider: value === '__none__' ? '' : value })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder={t('secretProviderAlias')} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="__none__">{t('noneOption')}</SelectItem>
+                      {providerAliases.map((alias) => (
+                        <SelectItem key={alias} value={alias}>
+                          {alias}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <Button type="button" variant="outline" onClick={() => setRefs((prev) => prev.filter((_, i) => i !== index))}>
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            </div>
+          ))}
+
+          <Button type="button" variant="outline" onClick={() => setRefs((prev) => [...prev, createRefRow()])}>
+            <Plus className="h-4 w-4 mr-2" />
+            {t('addSecretRef')}
+          </Button>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-end">
+        <Button type="button" onClick={handleSave} disabled={updateSecrets.isPending}>
+          <Save className="h-4 w-4 mr-2" />
+          {updateSecrets.isPending ? t('saving') : t('save')}
+        </Button>
+      </div>
+    </PageLayout>
+  );
+}

package/src/components/layout/Sidebar.tsx

@@ -1,7 +1,7 @@
 import { cn } from '@/lib/utils';
 import { LANGUAGE_OPTIONS, t, type I18nLanguage } from '@/lib/i18n';
 import { THEME_OPTIONS, type UiTheme } from '@/lib/theme';
-import { Cpu, GitBranch, History, MessageCircle, MessageSquare, Sparkles, BookOpen, Plug, BrainCircuit, AlarmClock, Languages, Palette } from 'lucide-react';
+import { Cpu, GitBranch, History, MessageCircle, MessageSquare, Sparkles, BookOpen, Plug, BrainCircuit, AlarmClock, Languages, Palette, KeyRound } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 import { useDocBrowser } from '@/components/doc-browser';
 import { useI18n } from '@/components/providers/I18nProvider';
@@ -66,6 +66,11 @@ export function Sidebar() {
       label: t('cron'),
       icon: AlarmClock,
     },
+    {
+      target: '/secrets',
+      label: t('secrets'),
+      icon: KeyRound,
+    },
     {
       target: '/marketplace/plugins',
       label: t('marketplaceFilterPlugins'),

package/src/hooks/useConfig.ts

@@ -7,6 +7,7 @@ import {
   updateProvider,
   updateChannel,
   updateRuntime,
+  updateSecrets,
   executeConfigAction,
   fetchSessions,
   fetchSessionHistory,
@@ -109,6 +110,22 @@ export function useUpdateRuntime() {
   });
 }
 
+export function useUpdateSecrets() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ data }: { data: unknown }) =>
+      updateSecrets(data as Parameters<typeof updateSecrets>[0]),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['config'] });
+      toast.success(t('configSavedApplied'));
+    },
+    onError: (error: Error) => {
+      toast.error(t('configSaveFailed') + ': ' + error.message);
+    }
+  });
+}
+
 export function useExecuteConfigAction() {
   return useMutation({
     mutationFn: ({ actionId, data }: { actionId: string; data: unknown }) =>

package/src/lib/i18n.ts

@@ -128,6 +128,7 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   providers: { zh: '提供商', en: 'Providers' },
   channels: { zh: '渠道', en: 'Channels' },
   cron: { zh: '定时任务', en: 'Cron Jobs' },
+  secrets: { zh: '密钥管理', en: 'Secrets' },
   runtime: { zh: '路由与运行时', en: 'Routing & Runtime' },
   marketplace: { zh: '市场', en: 'Marketplace' },
 
@@ -149,10 +150,14 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   all: { zh: '全部', en: 'All' },
   prev: { zh: '上一页', en: 'Prev' },
   next: { zh: '下一页', en: 'Next' },
+  noneOption: { zh: '无', en: 'None' },
   language: { zh: '语言', en: 'Language' },
   theme: { zh: '主题', en: 'Theme' },
   themeWarm: { zh: '暖色', en: 'Warm' },
   themeCool: { zh: '冷色', en: 'Cool' },
+  isRequired: { zh: '必填', en: 'is required' },
+  duplicate: { zh: '重复', en: 'duplicate' },
+  notFound: { zh: '未找到', en: 'not found' },
 
   // Model
   modelPageTitle: { zh: '模型配置', en: 'Model Configuration' },
@@ -315,6 +320,43 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   addBinding: { zh: '添加绑定', en: 'Add Binding' },
   saveRuntimeSettings: { zh: '保存运行时设置', en: 'Save Runtime Settings' },
 
+  // Secrets
+  secretsPageTitle: { zh: '密钥管理', en: 'Secrets Management' },
+  secretsPageDescription: {
+    zh: '集中管理 secrets.providers、secrets.defaults 与 secrets.refs。',
+    en: 'Manage secrets.providers, secrets.defaults, and secrets.refs in one place.'
+  },
+  secretsEnabledHelp: {
+    zh: '关闭后不会解析 `{{secret:*}}` 引用。',
+    en: 'When disabled, `{{secret:*}}` refs are not resolved.'
+  },
+  defaultEnvProvider: { zh: '默认 Env 提供器', en: 'Default Env Provider' },
+  defaultFileProvider: { zh: '默认 File 提供器', en: 'Default File Provider' },
+  defaultExecProvider: { zh: '默认 Exec 提供器', en: 'Default Exec Provider' },
+  secretProvidersTitle: { zh: 'Secret Providers', en: 'Secret Providers' },
+  secretProvidersDescription: {
+    zh: '定义可复用的 secrets provider（env/file/exec）。',
+    en: 'Define reusable secret providers (env/file/exec).'
+  },
+  providerAlias: { zh: '提供器别名', en: 'Provider Alias' },
+  removeProvider: { zh: '移除提供器', en: 'Remove Provider' },
+  envPrefix: { zh: '环境变量前缀', en: 'Environment Prefix' },
+  secretFilePath: { zh: 'Secrets 文件路径', en: 'Secrets File Path' },
+  secretExecCommand: { zh: '执行命令', en: 'Exec Command' },
+  secretExecArgs: { zh: '命令参数（每行一个）', en: 'Exec Args (one per line)' },
+  secretExecCwd: { zh: '执行目录（可选）', en: 'Exec Working Directory (optional)' },
+  secretExecTimeoutMs: { zh: '超时（毫秒）', en: 'Timeout (ms)' },
+  addSecretProvider: { zh: '添加 Provider', en: 'Add Provider' },
+  secretRefsTitle: { zh: 'Secret Refs', en: 'Secret Refs' },
+  secretRefsDescription: {
+    zh: '把配置路径映射到 secret 引用（source/provider/id）。',
+    en: 'Map config paths to secret refs (source/provider/id).'
+  },
+  secretConfigPath: { zh: '配置路径', en: 'Config Path' },
+  secretId: { zh: 'Secret ID', en: 'Secret ID' },
+  secretProviderAlias: { zh: 'Provider 别名', en: 'Provider Alias' },
+  addSecretRef: { zh: '添加 Ref', en: 'Add Ref' },
+
   // Sessions
   sessionsPageTitle: { zh: '会话管理', en: 'Sessions' },
   sessionsPageDescription: {

package/dist/assets/ChannelsList-TFFw4Cem.js

@@ -1 +0,0 @@
-import{r as v,j as a,ac as ae,M as S,ad as M,ae as N,aa as te,_ as ne,ab as le,af as se,ag as oe,n as H,ah as re,ai as ce,aj as ie}from"./vendor-RXIbhDBC.js";import{u as _,a as q,i as me,j as pe,I as D,g as de}from"./useConfig-vFQvF4kn.js";import{t as e,c as G,u as J,S as be,b as ue,d as ge,e as ye,g as xe}from"./index-CrUDzcei.js";import{D as he,a as fe,b as we,c as je,d as ve,e as ke}from"./dialog-DJs630RE.js";import{B as F,P as Ce,a as Pe}from"./page-layout-BVZlyPFt.js";import{L as Ne}from"./label-CXGuE6Oa.js";import{S as Se}from"./switch-BLF45eI3.js";import{h as T}from"./config-hints-CApS3K_7.js";import{T as Ie}from"./tabs-custom-DQ0GpEV5.js";import{C as De,a as Fe,L as Te,d as Me,S as Ae,b as Le,c as Ue,A as Ee}from"./action-link-C9xMkxl2.js";function Be({value:n,onChange:d,className:i,placeholder:m=""}){const[c,y]=v.useState(""),b=u=>{u.key==="Enter"&&c.trim()?(u.preventDefault(),d([...n,c.trim()]),y("")):u.key==="Backspace"&&!c&&n.length>0&&d(n.slice(0,-1))},f=u=>{d(n.filter((o,g)=>g!==u))};return a.jsxs("div",{className:G("flex flex-wrap gap-2 p-2 border rounded-md min-h-[42px]",i),children:[n.map((u,o)=>a.jsxs("span",{className:"inline-flex items-center gap-1 px-2 py-1 bg-primary text-primary-foreground rounded text-sm",children:[u,a.jsx("button",{type:"button",onClick:()=>f(o),className:"hover:text-red-300 transition-colors",children:a.jsx(ae,{className:"h-3 w-3"})})]},o)),a.jsx("input",{type:"text",value:c,onChange:u=>y(u.target.value),onKeyDown:b,className:"flex-1 outline-none min-w-[100px] bg-transparent text-sm",placeholder:m||e("enterTag")})]})}const U=[{value:"pairing",label:"pairing"},{value:"allowlist",label:"allowlist"},{value:"open",label:"open"},{value:"disabled",label:"disabled"}],E=[{value:"open",label:"open"},{value:"allowlist",label:"allowlist"},{value:"disabled",label:"disabled"}],Oe=[{value:"off",label:"off"},{value:"partial",label:"partial"},{value:"block",label:"block"},{value:"progress",label:"progress"}],$e=n=>n.includes("token")||n.includes("secret")||n.includes("password")?a.jsx(te,{className:"h-3.5 w-3.5 text-gray-500"}):n.includes("url")||n.includes("host")?a.jsx(ne,{className:"h-3.5 w-3.5 text-gray-500"}):n.includes("email")||n.includes("mail")?a.jsx(M,{className:"h-3.5 w-3.5 text-gray-500"}):n.includes("id")||n.includes("from")?a.jsx(le,{className:"h-3.5 w-3.5 text-gray-500"}):n==="enabled"||n==="consentGranted"?a.jsx(se,{className:"h-3.5 w-3.5 text-gray-500"}):a.jsx(oe,{className:"h-3.5 w-3.5 text-gray-500"});function B(){return{telegram:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"token",type:"password",label:e("botToken")},{name:"allowFrom",type:"tags",label:e("allowFrom")},{name:"proxy",type:"text",label:e("proxy")},{name:"accountId",type:"text",label:e("accountId")},{name:"dmPolicy",type:"select",label:e("dmPolicy"),options:U},{name:"groupPolicy",type:"select",label:e("groupPolicy"),options:E},{name:"groupAllowFrom",type:"tags",label:e("groupAllowFrom")},{name:"requireMention",type:"boolean",label:e("requireMention")},{name:"mentionPatterns",type:"tags",label:e("mentionPatterns")},{name:"groups",type:"json",label:e("groupRulesJson")}],discord:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"token",type:"password",label:e("botToken")},{name:"allowBots",type:"boolean",label:e("allowBotMessages")},{name:"allowFrom",type:"tags",label:e("allowFrom")},{name:"gatewayUrl",type:"text",label:e("gatewayUrl")},{name:"intents",type:"number",label:e("intents")},{name:"proxy",type:"text",label:e("proxy")},{name:"mediaMaxMb",type:"number",label:e("attachmentMaxSizeMb")},{name:"streaming",type:"select",label:e("streamingMode"),options:Oe},{name:"draftChunk",type:"json",label:e("draftChunkingJson")},{name:"textChunkLimit",type:"number",label:e("textChunkLimit")},{name:"accountId",type:"text",label:e("accountId")},{name:"dmPolicy",type:"select",label:e("dmPolicy"),options:U},{name:"groupPolicy",type:"select",label:e("groupPolicy"),options:E},{name:"groupAllowFrom",type:"tags",label:e("groupAllowFrom")},{name:"requireMention",type:"boolean",label:e("requireMention")},{name:"mentionPatterns",type:"tags",label:e("mentionPatterns")},{name:"groups",type:"json",label:e("groupRulesJson")}],whatsapp:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"bridgeUrl",type:"text",label:e("bridgeUrl")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],feishu:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"appId",type:"text",label:e("appId")},{name:"appSecret",type:"password",label:e("appSecret")},{name:"encryptKey",type:"password",label:e("encryptKey")},{name:"verificationToken",type:"password",label:e("verificationToken")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],dingtalk:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"clientId",type:"text",label:e("clientId")},{name:"clientSecret",type:"password",label:e("clientSecret")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],wecom:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"corpId",type:"text",label:e("corpId")},{name:"agentId",type:"text",label:e("agentId")},{name:"secret",type:"password",label:e("secret")},{name:"token",type:"password",label:e("token")},{name:"callbackPort",type:"number",label:e("callbackPort")},{name:"callbackPath",type:"text",label:e("callbackPath")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],slack:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"mode",type:"text",label:e("mode")},{name:"webhookPath",type:"text",label:e("webhookPath")},{name:"allowBots",type:"boolean",label:e("allowBotMessages")},{name:"botToken",type:"password",label:e("botToken")},{name:"appToken",type:"password",label:e("appToken")}],email:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"consentGranted",type:"boolean",label:e("consentGranted")},{name:"imapHost",type:"text",label:e("imapHost")},{name:"imapPort",type:"number",label:e("imapPort")},{name:"imapUsername",type:"text",label:e("imapUsername")},{name:"imapPassword",type:"password",label:e("imapPassword")},{name:"fromAddress",type:"email",label:e("fromAddress")}],mochat:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"baseUrl",type:"text",label:e("baseUrl")},{name:"clawToken",type:"password",label:e("clawToken")},{name:"agentUserId",type:"text",label:e("agentUserId")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],qq:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"appId",type:"text",label:e("appId")},{name:"secret",type:"password",label:e("appSecret")},{name:"markdownSupport",type:"boolean",label:e("markdownSupport")},{name:"allowFrom",type:"tags",label:e("allowFrom")}]}}const O={telegram:S,slack:S,email:M,default:S},$={telegram:"from-primary-300 to-primary-600",slack:"from-primary-200 to-primary-500",email:"from-primary-100 to-primary-400",default:"from-gray-300 to-gray-500"};function I(n){return typeof n=="object"&&n!==null&&!Array.isArray(n)}function K(n,d){const i={...n};for(const[m,c]of Object.entries(d)){const y=i[m];if(I(y)&&I(c)){i[m]=K(y,c);continue}i[m]=c}return i}function Re(n,d){const i=n.split("."),m={};let c=m;for(let y=0;y<i.length-1;y+=1){const b=i[y];c[b]={},c=c[b]}return c[i[i.length-1]]=d,m}function He(){var A,L;const{channelModal:n,closeChannelModal:d}=J(),{data:i}=_(),{data:m}=q(),c=me(),y=pe(),[b,f]=v.useState({}),[u,o]=v.useState({}),[g,x]=v.useState(null),l=n.channel,w=l?i==null?void 0:i.channels[l]:null,k=l?B()[l]??[]:[],C=m==null?void 0:m.uiHints,P=l?`channels.${l}`:null,z=((A=m==null?void 0:m.actions)==null?void 0:A.filter(t=>t.scope===P))??[],V=l&&(((L=T(`channels.${l}`,C))==null?void 0:L.label)??l);v.useEffect(()=>{if(w){f({...w});const t={};(l?B()[l]??[]:[]).filter(r=>r.type==="json").forEach(r=>{const h=w[r.name];t[r.name]=JSON.stringify(h??{},null,2)}),o(t)}else f({}),o({})},[w,l]);const j=(t,s)=>{f(r=>({...r,[t]:s}))},Y=t=>{if(t.preventDefault(),!l)return;const s={...b};for(const r of k){if(r.type!=="json")continue;const h=u[r.name]??"";try{s[r.name]=h.trim()?JSON.parse(h):{}}catch{N.error(`${e("invalidJson")}: ${r.name}`);return}}c.mutate({channel:l,data:s},{onSuccess:()=>d()})},W=t=>{if(!t||!l)return;const s=t.channels;if(!I(s))return;const r=s[l];I(r)&&f(h=>K(h,r))},X=async t=>{if(!(!l||!P)){x(t.id);try{let s={...b};t.saveBeforeRun&&(s={...s,...t.savePatch??{}},f(s),await c.mutateAsync({channel:l,data:s}));const r=await y.mutateAsync({actionId:t.id,data:{scope:P,draftConfig:Re(P,s)}});W(r.patch),r.ok?N.success(r.message||e("success")):N.error(r.message||e("error"))}catch(s){const r=s instanceof Error?s.message:String(s);N.error(`${e("error")}: ${r}`)}finally{x(null)}}},Q=O[l||""]||O.default,Z=$[l||""]||$.default;return a.jsx(he,{open:n.open,onOpenChange:d,children:a.jsxs(fe,{className:"sm:max-w-[550px] max-h-[85vh] overflow-hidden flex flex-col",children:[a.jsx(we,{children:a.jsxs("div",{className:"flex items-center gap-3",children:[a.jsx("div",{className:`h-10 w-10 rounded-xl bg-gradient-to-br ${Z} flex items-center justify-center`,children:a.jsx(Q,{className:"h-5 w-5 text-white"})}),a.jsxs("div",{children:[a.jsx(je,{className:"capitalize",children:V}),a.jsx(ve,{children:e("configureMessageChannelParameters")})]})]})}),a.jsxs("form",{onSubmit:Y,className:"flex flex-col flex-1 overflow-hidden",children:[a.jsx("div",{className:"flex-1 overflow-y-auto custom-scrollbar py-2 pr-2 space-y-5",children:k.map(t=>{const s=l?T(`channels.${l}.${t.name}`,C):void 0,r=(s==null?void 0:s.label)??t.label,h=s==null?void 0:s.placeholder;return a.jsxs("div",{className:"space-y-2.5",children:[a.jsxs(Ne,{htmlFor:t.name,className:"text-sm font-medium text-gray-900 flex items-center gap-2",children:[$e(t.name),r]}),t.type==="boolean"&&a.jsxs("div",{className:"flex items-center justify-between p-3 rounded-xl bg-gray-50",children:[a.jsx("span",{className:"text-sm text-gray-500",children:b[t.name]?e("enabled"):e("disabled")}),a.jsx(Se,{id:t.name,checked:b[t.name]||!1,onCheckedChange:p=>j(t.name,p),className:"data-[state=checked]:bg-emerald-500"})]}),(t.type==="text"||t.type==="email")&&a.jsx(D,{id:t.name,type:t.type,value:b[t.name]||"",onChange:p=>j(t.name,p.target.value),placeholder:h,className:"rounded-xl"}),t.type==="password"&&a.jsx(D,{id:t.name,type:"password",value:b[t.name]||"",onChange:p=>j(t.name,p.target.value),placeholder:h??e("leaveBlankToKeepUnchanged"),className:"rounded-xl"}),t.type==="number"&&a.jsx(D,{id:t.name,type:"number",value:b[t.name]||0,onChange:p=>j(t.name,parseInt(p.target.value)||0),placeholder:h,className:"rounded-xl"}),t.type==="tags"&&a.jsx(Be,{value:b[t.name]||[],onChange:p=>j(t.name,p)}),t.type==="select"&&a.jsxs(be,{value:b[t.name]||"",onValueChange:p=>j(t.name,p),children:[a.jsx(ue,{className:"rounded-xl",children:a.jsx(ge,{})}),a.jsx(ye,{children:(t.options??[]).map(p=>a.jsx(xe,{value:p.value,children:p.label},p.value))})]}),t.type==="json"&&a.jsx("textarea",{id:t.name,value:u[t.name]??"{}",onChange:p=>o(ee=>({...ee,[t.name]:p.target.value})),className:"min-h-[120px] w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-mono"})]},t.name)})}),a.jsxs(ke,{className:"pt-4 flex-shrink-0",children:[a.jsx(F,{type:"button",variant:"outline",onClick:d,children:e("cancel")}),a.jsx(F,{type:"submit",disabled:c.isPending||!!g,children:c.isPending?e("saving"):e("save")}),z.filter(t=>t.trigger==="manual").map(t=>a.jsx(F,{type:"button",onClick:()=>X(t),disabled:c.isPending||!!g,variant:"secondary",children:g===t.id?e("connecting"):t.title},t.id))]})]})]})})}const R={telegram:S,slack:ce,email:M,webhook:re,default:H},_e={telegram:"channelDescTelegram",slack:"channelDescSlack",email:"channelDescEmail",webhook:"channelDescWebhook",discord:"channelDescDiscord",feishu:"channelDescFeishu"};function Ze(){const{data:n}=_(),{data:d}=de(),{data:i}=q(),{openChannelModal:m}=J(),[c,y]=v.useState("active"),b=i==null?void 0:i.uiHints;if(!n||!d)return a.jsx("div",{className:"p-8 text-gray-400",children:e("channelsLoading")});const f=[{id:"active",label:e("channelsTabEnabled"),count:d.channels.filter(o=>{var g;return(g=n.channels[o.name])==null?void 0:g.enabled}).length},{id:"all",label:e("channelsTabAll"),count:d.channels.length}],u=d.channels.filter(o=>{var x;const g=((x=n.channels[o.name])==null?void 0:x.enabled)||!1;return c==="all"||g});return a.jsxs(Ce,{children:[a.jsx(Pe,{title:e("channelsPageTitle")}),a.jsx(Ie,{tabs:f,activeTab:c,onChange:y}),a.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4",children:u.map(o=>{const g=n.channels[o.name],x=(g==null?void 0:g.enabled)||!1,l=R[o.name]||R.default,w=T(`channels.${o.name}`,b),k=(w==null?void 0:w.help)||e(_e[o.name]||"channelDescriptionDefault");return a.jsxs(De,{onClick:()=>m(o.name),children:[a.jsxs(Fe,{children:[a.jsx(Te,{name:o.name,src:Me(o.name),className:G("h-11 w-11 rounded-xl border transition-all",x?"bg-white border-primary/30":"bg-white border-gray-200/60 group-hover:border-gray-300"),imgClassName:"h-5 w-5",fallback:a.jsx(l,{className:"h-5 w-5"})}),a.jsx(Ae,{status:x?"active":"inactive",label:x?e("statusActive"):e("statusInactive")})]}),a.jsx(Le,{title:o.displayName||o.name,description:k}),a.jsxs(Ue,{children:[a.jsx(Ee,{label:x?e("actionConfigure"):e("actionEnable")}),o.tutorialUrl&&a.jsx("a",{href:o.tutorialUrl,target:"_blank",rel:"noreferrer",onClick:C=>C.stopPropagation(),className:"flex items-center justify-center h-6 w-6 rounded-md text-gray-300 hover:text-gray-500 hover:bg-gray-100/60 transition-colors",title:e("channelsGuideTitle"),children:a.jsx(ie,{className:"h-3.5 w-3.5"})})]})]},o.name)})}),u.length===0&&a.jsxs("div",{className:"flex flex-col items-center justify-center py-16 text-center",children:[a.jsx("div",{className:"h-14 w-14 flex items-center justify-center rounded-xl bg-gray-100/80 mb-4",children:a.jsx(H,{className:"h-6 w-6 text-gray-300"})}),a.jsx("h3",{className:"text-[14px] font-semibold text-gray-900 mb-1.5",children:e("channelsEmptyTitle")}),a.jsx("p",{className:"text-[13px] text-gray-400 max-w-sm",children:e("channelsEmptyDescription")})]}),a.jsx(He,{})]})}export{Ze as ChannelsList};