npm - @nextclaw/ui - Versions diffs - 0.5.35 → 0.5.37 - Mend

@nextclaw/ui 0.5.35 → 0.5.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/dist/index.html CHANGED Viewed

@@ -6,9 +6,9 @@
   <link rel="icon" type="image/svg+xml" href="/logo.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>NextClaw - 系统配置</title>
-  <script type="module" crossorigin src="/assets/index-q2B1bssI.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/vendor-CmqkRoMs.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-B8Wh_FvS.css">
+  <script type="module" crossorigin src="/assets/index-C1NAfZSm.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-DN_iJQc4.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-DWgSvrx4.css">
 </head>
 <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.5.35",
+  "version": "0.5.37",
   "private": false,
   "type": "module",
   "license": "MIT",

package/src/components/common/LogoBadge.tsx CHANGED Viewed

@@ -14,12 +14,12 @@ export function LogoBadge({ name, src, className, imgClassName, fallback }: Logo
   const showImage = Boolean(src) && !failed;
   return (
-    <div className={cn('flex items-center justify-center', className)}>
+    <div className={cn('inline-flex shrink-0 items-center justify-center overflow-hidden', className)}>
       {showImage ? (
         <img
           src={src as string}
           alt={`${name} logo`}
-          className={cn('h-6 w-6 object-contain', imgClassName)}
+          className={cn('block h-6 w-6 object-contain', imgClassName)}
           onError={() => setFailed(true)}
           draggable={false}
         />

package/src/components/config/ChannelForm.tsx CHANGED Viewed

@@ -1,31 +1,31 @@
 import { useEffect, useState } from 'react';
 import { useConfig, useConfigMeta, useConfigSchema, useUpdateChannel, useExecuteConfigAction } from '@/hooks/useConfig';
-import { useUiStore } from '@/stores/ui.store';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-} from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { TagInput } from '@/components/common/TagInput';
+import { StatusDot } from '@/components/ui/status-dot';
+import { LogoBadge } from '@/components/common/LogoBadge';
 import { t } from '@/lib/i18n';
 import { hintForPath } from '@/lib/config-hints';
+import { cn } from '@/lib/utils';
 import { toast } from 'sonner';
-import { MessageCircle, Settings, ToggleLeft, Hash, Mail, Globe, KeyRound, BookOpen } from 'lucide-react';
+import { Settings, ToggleLeft, Hash, Mail, Globe, KeyRound, BookOpen } from 'lucide-react';
 import type { ConfigActionManifest } from '@/api/types';
 import { resolveChannelTutorialUrl } from '@/lib/channel-tutorials';
+import { getChannelLogo } from '@/lib/logos';
+import { CONFIG_DETAIL_CARD_CLASS, CONFIG_EMPTY_DETAIL_CARD_CLASS } from './config-layout';
 type ChannelFieldType = 'boolean' | 'text' | 'email' | 'password' | 'number' | 'tags' | 'select' | 'json';
 type ChannelOption = { value: string; label: string };
 type ChannelField = { name: string; type: ChannelFieldType; label: string; options?: ChannelOption[] };
+type ChannelFormProps = {
+  channelName?: string;
+};
 const DM_POLICY_OPTIONS: ChannelOption[] = [
   { value: 'pairing', label: 'pairing' },
   { value: 'allowlist', label: 'allowlist' },
@@ -46,7 +46,6 @@ const STREAMING_MODE_OPTIONS: ChannelOption[] = [
   { value: 'progress', label: 'progress' }
 ];
-// Field icon mapping
 const getFieldIcon = (fieldName: string) => {
   if (fieldName.includes('token') || fieldName.includes('secret') || fieldName.includes('password')) {
     return <KeyRound className="h-3.5 w-3.5 text-gray-500" />;
@@ -164,20 +163,6 @@ function buildChannelFields(): Record<string, ChannelField[]> {
   };
 }
-const channelIcons: Record<string, typeof MessageCircle> = {
-  telegram: MessageCircle,
-  slack: MessageCircle,
-  email: Mail,
-  default: MessageCircle
-};
-const channelColors: Record<string, string> = {
-  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 isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
@@ -208,8 +193,7 @@ function buildScopeDraft(scope: string, value: Record<string, unknown>): Record<
   return output;
 }
-export function ChannelForm() {
-  const { channelModal, closeChannelModal } = useUiStore();
+export function ChannelForm({ channelName }: ChannelFormProps) {
   const { data: config } = useConfig();
   const { data: meta } = useConfigMeta();
   const { data: schema } = useConfigSchema();
@@ -220,7 +204,6 @@ export function ChannelForm() {
   const [jsonDrafts, setJsonDrafts] = useState<Record<string, string>>({});
   const [runningActionId, setRunningActionId] = useState<string | null>(null);
-  const channelName = channelModal.channel;
   const channelConfig = channelName ? config?.channels[channelName] : null;
   const fields = channelName ? buildChannelFields()[channelName] ?? [] : [];
   const uiHints = schema?.uiHints;
@@ -282,10 +265,7 @@ export function ChannelForm() {
       }
     }
-    updateChannel.mutate(
-      { channel: channelName, data: payload },
-      { onSuccess: () => closeChannelModal() }
-    );
+    updateChannel.mutate({ channel: channelName, data: payload });
   };
   const applyActionPatchToForm = (patch?: Record<string, unknown>) => {
@@ -344,156 +324,163 @@ export function ChannelForm() {
     }
   };
-  const Icon = channelIcons[channelName || ''] || channelIcons.default;
-  const gradientClass = channelColors[channelName || ''] || channelColors.default;
+  if (!channelName || !channelMeta || !channelConfig) {
+    return (
+      <div className={CONFIG_EMPTY_DETAIL_CARD_CLASS}>
+        <div>
+          <h3 className="text-base font-semibold text-gray-900">{t('channelsSelectTitle')}</h3>
+          <p className="mt-2 text-sm text-gray-500">{t('channelsSelectDescription')}</p>
+        </div>
+      </div>
+    );
+  }
+  const enabled = Boolean(channelConfig.enabled);
   return (
-    <Dialog open={channelModal.open} onOpenChange={closeChannelModal}>
-      <DialogContent className="sm:max-w-[550px] max-h-[85vh] overflow-hidden flex flex-col">
-        <DialogHeader>
-          <div className="flex items-center gap-3">
-            <div className={`h-10 w-10 rounded-xl bg-gradient-to-br ${gradientClass} flex items-center justify-center`}>
-              <Icon className="h-5 w-5 text-white" />
-            </div>
-            <div>
-              <DialogTitle className="capitalize">{channelLabel}</DialogTitle>
-              <DialogDescription>{t('configureMessageChannelParameters')}</DialogDescription>
-              {tutorialUrl && (
-                <a
-                  href={tutorialUrl}
-                  className="mt-2 inline-flex items-center gap-1.5 text-xs text-primary hover:text-primary-hover transition-colors"
-                >
-                  <BookOpen className="h-3.5 w-3.5" />
-                  {t('channelsGuideTitle')}
-                </a>
-              )}
+    <div className={CONFIG_DETAIL_CARD_CLASS}>
+      <div className="border-b border-gray-100 px-6 py-5">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="min-w-0">
+            <div className="flex items-center gap-3">
+              <LogoBadge
+                name={channelName}
+                src={getChannelLogo(channelName)}
+                className={cn(
+                  'h-9 w-9 rounded-lg border',
+                  enabled ? 'border-primary/30 bg-white' : 'border-gray-200/70 bg-white'
+                )}
+                imgClassName="h-5 w-5 object-contain"
+                fallback={<span className="text-sm font-semibold uppercase text-gray-500">{channelName[0]}</span>}
+              />
+              <h3 className="truncate text-lg font-semibold text-gray-900 capitalize">{channelLabel}</h3>
             </div>
+            <p className="mt-2 text-sm text-gray-500">{t('channelsFormDescription')}</p>
+            {tutorialUrl && (
+              <a
+                href={tutorialUrl}
+                className="mt-2 inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover"
+              >
+                <BookOpen className="h-3.5 w-3.5" />
+                {t('channelsGuideTitle')}
+              </a>
+            )}
           </div>
-        </DialogHeader>
-        <form onSubmit={handleSubmit} className="flex flex-col flex-1 overflow-hidden">
-          <div className="flex-1 overflow-y-auto custom-scrollbar py-2 pr-2 space-y-5">
-            {fields.map((field) => {
-              const hint = channelName
-                ? hintForPath(`channels.${channelName}.${field.name}`, uiHints)
-                : undefined;
-              const label = hint?.label ?? field.label;
-              const placeholder = hint?.placeholder;
-              return (
-                <div key={field.name} className="space-y-2.5">
-                  <Label
-                    htmlFor={field.name}
-                    className="text-sm font-medium text-gray-900 flex items-center gap-2"
-                  >
-                    {getFieldIcon(field.name)}
-                    {label}
-                  </Label>
-                  {field.type === 'boolean' && (
-                    <div className="flex items-center justify-between p-3 rounded-xl bg-gray-50">
-                      <span className="text-sm text-gray-500">
-                        {(formData[field.name] as boolean) ? t('enabled') : t('disabled')}
-                      </span>
-                      <Switch
-                        id={field.name}
-                        checked={(formData[field.name] as boolean) || false}
-                        onCheckedChange={(checked) => updateField(field.name, checked)}
-                        className="data-[state=checked]:bg-emerald-500"
-                      />
-                    </div>
-                  )}
-                  {(field.type === 'text' || field.type === 'email') && (
-                    <Input
-                      id={field.name}
-                      type={field.type}
-                      value={(formData[field.name] as string) || ''}
-                      onChange={(e) => updateField(field.name, e.target.value)}
-                      placeholder={placeholder}
-                      className="rounded-xl"
-                    />
-                  )}
-                  {field.type === 'password' && (
-                    <Input
-                      id={field.name}
-                      type="password"
-                      value={(formData[field.name] as string) || ''}
-                      onChange={(e) => updateField(field.name, e.target.value)}
-                      placeholder={placeholder ?? t('leaveBlankToKeepUnchanged')}
-                      className="rounded-xl"
-                    />
-                  )}
-                  {field.type === 'number' && (
-                    <Input
-                      id={field.name}
-                      type="number"
-                      value={(formData[field.name] as number) || 0}
-                      onChange={(e) => updateField(field.name, parseInt(e.target.value) || 0)}
-                      placeholder={placeholder}
-                      className="rounded-xl"
-                    />
-                  )}
-                  {field.type === 'tags' && (
-                    <TagInput
-                      value={(formData[field.name] as string[]) || []}
-                      onChange={(tags) => updateField(field.name, tags)}
-                    />
-                  )}
-                  {field.type === 'select' && (
-                    <Select
-                      value={(formData[field.name] as string) || ''}
-                      onValueChange={(v) => updateField(field.name, v)}
-                    >
-                      <SelectTrigger className="rounded-xl">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {(field.options ?? []).map((option) => (
-                          <SelectItem key={option.value} value={option.value}>
-                            {option.label}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  )}
-                  {field.type === 'json' && (
-                    <textarea
+          <StatusDot status={enabled ? 'active' : 'inactive'} label={enabled ? t('statusActive') : t('statusInactive')} />
+        </div>
+      </div>
+      <form onSubmit={handleSubmit} className="flex min-h-0 flex-1 flex-col">
+        <div className="min-h-0 flex-1 space-y-6 overflow-y-auto px-6 py-5">
+          {fields.map((field) => {
+            const hint = channelName
+              ? hintForPath(`channels.${channelName}.${field.name}`, uiHints)
+              : undefined;
+            const label = hint?.label ?? field.label;
+            const placeholder = hint?.placeholder;
+            return (
+              <div key={field.name} className="space-y-2.5">
+                <Label
+                  htmlFor={field.name}
+                  className="flex items-center gap-2 text-sm font-medium text-gray-900"
+                >
+                  {getFieldIcon(field.name)}
+                  {label}
+                </Label>
+                {field.type === 'boolean' && (
+                  <div className="flex items-center justify-between rounded-xl bg-gray-50 p-3">
+                    <span className="text-sm text-gray-500">
+                      {(formData[field.name] as boolean) ? t('enabled') : t('disabled')}
+                    </span>
+                    <Switch
                       id={field.name}
-                      value={jsonDrafts[field.name] ?? '{}'}
-                      onChange={(event) =>
-                        setJsonDrafts((prev) => ({
-                          ...prev,
-                          [field.name]: event.target.value
-                        }))
-                      }
-                      className="min-h-[120px] w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-mono"
+                      checked={(formData[field.name] as boolean) || false}
+                      onCheckedChange={(checked) => updateField(field.name, checked)}
+                      className="data-[state=checked]:bg-emerald-500"
                     />
-                  )}
-                </div>
-              );
-            })}
-          </div>
-          <DialogFooter className="pt-4 flex-shrink-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={closeChannelModal}
-            >
-              {t('cancel')}
-            </Button>
-            <Button
-              type="submit"
-              disabled={updateChannel.isPending || Boolean(runningActionId)}
-            >
-              {updateChannel.isPending ? t('saving') : t('save')}
-            </Button>
+                  </div>
+                )}
+                {(field.type === 'text' || field.type === 'email') && (
+                  <Input
+                    id={field.name}
+                    type={field.type}
+                    value={(formData[field.name] as string) || ''}
+                    onChange={(e) => updateField(field.name, e.target.value)}
+                    placeholder={placeholder}
+                    className="rounded-xl"
+                  />
+                )}
+                {field.type === 'password' && (
+                  <Input
+                    id={field.name}
+                    type="password"
+                    value={(formData[field.name] as string) || ''}
+                    onChange={(e) => updateField(field.name, e.target.value)}
+                    placeholder={placeholder ?? t('leaveBlankToKeepUnchanged')}
+                    className="rounded-xl"
+                  />
+                )}
+                {field.type === 'number' && (
+                  <Input
+                    id={field.name}
+                    type="number"
+                    value={(formData[field.name] as number) || 0}
+                    onChange={(e) => updateField(field.name, parseInt(e.target.value, 10) || 0)}
+                    placeholder={placeholder}
+                    className="rounded-xl"
+                  />
+                )}
+                {field.type === 'tags' && (
+                  <TagInput
+                    value={(formData[field.name] as string[]) || []}
+                    onChange={(tags) => updateField(field.name, tags)}
+                  />
+                )}
+                {field.type === 'select' && (
+                  <Select
+                    value={(formData[field.name] as string) || ''}
+                    onValueChange={(v) => updateField(field.name, v)}
+                  >
+                    <SelectTrigger className="rounded-xl">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {(field.options ?? []).map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+                {field.type === 'json' && (
+                  <textarea
+                    id={field.name}
+                    value={jsonDrafts[field.name] ?? '{}'}
+                    onChange={(event) =>
+                      setJsonDrafts((prev) => ({
+                        ...prev,
+                        [field.name]: event.target.value
+                      }))
+                    }
+                    className="min-h-[120px] w-full resize-none rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-mono"
+                  />
+                )}
+              </div>
+            );
+          })}
+        </div>
+        <div className="flex flex-wrap items-center justify-between gap-3 border-t border-gray-100 px-6 py-4">
+          <div className="flex flex-wrap items-center gap-2">
             {actions
               .filter((action) => action.trigger === 'manual')
               .map((action) => (
@@ -507,9 +494,12 @@ export function ChannelForm() {
                   {runningActionId === action.id ? t('connecting') : action.title}
                 </Button>
               ))}
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
+          </div>
+          <Button type="submit" disabled={updateChannel.isPending || Boolean(runningActionId)}>
+            {updateChannel.isPending ? t('saving') : t('save')}
+          </Button>
+        </div>
+      </form>
+    </div>
   );
 }