@nextclaw/ui 0.12.9 → 0.12.11

package/src/components/common/{TagInput.tsx → tag-input.tsx}

@@ -1,7 +1,8 @@
-import { useState } from 'react';
-import { X } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { t } from '@/lib/i18n';
+import { useState } from "react";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { t } from "@/lib/i18n";
+import { TagChip } from "@/components/ui/tag-chip";
 
 interface TagInputProps {
   value: string[];
@@ -10,15 +11,20 @@ interface TagInputProps {
   placeholder?: string;
 }
 
-export function TagInput({ value, onChange, className, placeholder = '' }: TagInputProps) {
-  const [input, setInput] = useState('');
+export function TagInput({
+  value,
+  onChange,
+  className,
+  placeholder = "",
+}: TagInputProps) {
+  const [input, setInput] = useState("");
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' && input.trim()) {
+    if (e.key === "Enter" && input.trim()) {
       e.preventDefault();
       onChange([...value, input.trim()]);
-      setInput('');
-    } else if (e.key === 'Backspace' && !input && value.length > 0) {
+      setInput("");
+    } else if (e.key === "Backspace" && !input && value.length > 0) {
       onChange(value.slice(0, -1));
     }
   };
@@ -28,21 +34,23 @@ export function TagInput({ value, onChange, className, placeholder = '' }: TagIn
   };
 
   return (
-    <div className={cn('flex flex-wrap gap-2 p-2 border rounded-md min-h-[42px]', className)}>
+    <div
+      className={cn(
+        "flex min-h-[42px] flex-wrap gap-2 rounded-xl border border-gray-200/80 bg-white p-2",
+        className,
+      )}
+    >
       {value.map((tag, index) => (
-        <span
-          key={index}
-          className="inline-flex items-center gap-1 px-2 py-1 bg-primary text-primary-foreground rounded text-sm"
-        >
+        <TagChip key={index} tone="info" className="gap-1 px-2 py-1 text-sm">
           {tag}
           <button
             type="button"
             onClick={() => removeTag(index)}
-            className="hover:text-red-300 transition-colors"
+            className="transition-colors hover:text-rose-200"
           >
             <X className="h-3 w-3" />
           </button>
-        </span>
+        </TagChip>
       ))}
       <input
         type="text"
@@ -50,7 +58,7 @@ export function TagInput({ value, onChange, className, placeholder = '' }: TagIn
         onChange={(e) => setInput(e.target.value)}
         onKeyDown={handleKeyDown}
         className="flex-1 outline-none min-w-[100px] bg-transparent text-sm"
-        placeholder={placeholder || t('enterTag')}
+        placeholder={placeholder || t("enterTag")}
       />
     </div>
   );

package/src/components/config/ChannelForm.test.tsx

@@ -1,6 +1,19 @@
-import { render, screen, waitFor } from '@testing-library/react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ChannelForm } from './ChannelForm';
 
+const updateChannelMutate = vi.fn();
+const updateChannelMutateAsync = vi.fn();
+let subscribeHandler:
+  | ((event: {
+    type: 'channel.config.apply-status';
+    payload: {
+      channel: string;
+      status: 'started' | 'succeeded' | 'failed';
+      message?: string;
+    };
+  }) => void)
+  | null = null;
+
 vi.mock('@/hooks/useConfig', () => ({
   useConfig: () => ({
     data: {
@@ -29,8 +42,8 @@ vi.mock('@/hooks/useConfig', () => ({
     }
   }),
   useUpdateChannel: () => ({
-    mutate: vi.fn(),
-    mutateAsync: vi.fn(),
+    mutate: updateChannelMutate,
+    mutateAsync: updateChannelMutateAsync,
     isPending: false
   }),
   useExecuteConfigAction: () => ({
@@ -39,6 +52,27 @@ vi.mock('@/hooks/useConfig', () => ({
   })
 }));
 
+vi.mock('@/transport', () => ({
+  appClient: {
+    subscribe: (handler: typeof subscribeHandler) => {
+      subscribeHandler = handler;
+      return () => {
+        subscribeHandler = null;
+      };
+    }
+  }
+}));
+
+vi.mock('./weixin-channel-auth-section', () => ({
+  WeixinChannelAuthSection: () => null
+}));
+
+afterEach(() => {
+  updateChannelMutate.mockReset();
+  updateChannelMutateAsync.mockReset();
+  subscribeHandler = null;
+});
+
 describe('ChannelForm', () => {
   it('renders the empty selection state without entering a render loop', async () => {
     const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
@@ -57,4 +91,56 @@ describe('ChannelForm', () => {
 
     consoleErrorSpy.mockRestore();
   });
+
+  it('submits channel updates without waiting for background apply', () => {
+    render(<ChannelForm channelName="weixin" />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }));
+
+    expect(updateChannelMutate).toHaveBeenCalledWith({
+      channel: 'weixin',
+      data: {
+        accounts: {},
+        enabled: false
+      }
+    });
+  });
+
+  it('shows apply status updates from realtime events for the active channel', async () => {
+    render(<ChannelForm channelName="weixin" />);
+
+    await act(async () => {
+      subscribeHandler?.({
+        type: 'channel.config.apply-status',
+        payload: {
+          channel: 'weixin',
+          status: 'started'
+        }
+      });
+    });
+    expect(screen.getByText('Channel configuration is applying')).toBeTruthy();
+
+    await act(async () => {
+      subscribeHandler?.({
+        type: 'channel.config.apply-status',
+        payload: {
+          channel: 'weixin',
+          status: 'succeeded'
+        }
+      });
+    });
+    expect(screen.getByText('Channel configuration applied')).toBeTruthy();
+
+    await act(async () => {
+      subscribeHandler?.({
+        type: 'channel.config.apply-status',
+        payload: {
+          channel: 'weixin',
+          status: 'failed',
+          message: 'boom'
+        }
+      });
+    });
+    expect(screen.getByText('Failed to apply channel configuration: boom')).toBeTruthy();
+  });
 });