@nextclaw/ui 0.5.20 → 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/config/SessionsConfig.tsx

@@ -7,6 +7,7 @@ import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { cn } from '@/lib/utils';
 import { formatDateShort, formatDateTime, t } from '@/lib/i18n';
+import { extractMessageText } from '@/lib/chat-message';
 import { PageLayout, PageHeader } from '@/components/layout/page-layout';
 import { RefreshCw, Search, Clock, Inbox, Hash, Bot, User, MessageCircle, Settings as SettingsIcon } from 'lucide-react';
 
@@ -86,6 +87,7 @@ function SessionListItem({ session, channel, isSelected, onSelect }: SessionList
 
 function SessionMessageBubble({ message }: { message: SessionMessageView }) {
   const isUser = message.role.toLowerCase() === 'user';
+  const content = extractMessageText(message.content).trim();
 
   return (
     <div className={cn("flex w-full mb-6", isUser ? "justify-end" : "justify-start")}>
@@ -108,7 +110,7 @@ function SessionMessageBubble({ message }: { message: SessionMessageView }) {
             </span>
           </div>
           <div className="whitespace-pre-wrap break-words leading-relaxed text-[15px]">
-            {message.content}
+            {content || '-'}
           </div>
         </div>
       </div>

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/index.css

@@ -182,3 +182,72 @@
 .animate-pulse-soft {
   animation: pulse-soft 3s ease-in-out infinite;
 }
+
+.chat-markdown {
+  font-size: 0.9rem;
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.chat-markdown > * + * {
+  margin-top: 0.5rem;
+}
+
+.chat-markdown h1,
+.chat-markdown h2,
+.chat-markdown h3 {
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.chat-markdown ul,
+.chat-markdown ol {
+  padding-left: 1.1rem;
+}
+
+.chat-markdown code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.8rem;
+}
+
+.chat-markdown :not(pre) > code {
+  padding: 0.1rem 0.3rem;
+  border-radius: 0.35rem;
+  background: rgba(148, 163, 184, 0.18);
+}
+
+.chat-markdown pre {
+  overflow-x: auto;
+  border-radius: 0.65rem;
+  padding: 0.65rem 0.75rem;
+  background: rgba(15, 23, 42, 0.9);
+  color: #e2e8f0;
+}
+
+.chat-markdown table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8rem;
+}
+
+.chat-markdown th,
+.chat-markdown td {
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  padding: 0.35rem 0.45rem;
+}
+
+.chat-markdown blockquote {
+  border-left: 3px solid rgba(148, 163, 184, 0.55);
+  padding-left: 0.65rem;
+  color: rgba(30, 41, 59, 0.85);
+}
+
+.chat-markdown-user a {
+  color: #dbeafe;
+  text-decoration: underline;
+}
+
+.chat-markdown-assistant a {
+  color: hsl(var(--primary));
+  text-decoration: underline;
+}