@nextclaw/ui 0.7.0 → 0.9.0

package/src/components/chat/useChatSessionTypeState.test.tsx

@@ -0,0 +1,58 @@
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { resolveSessionTypeLabel, useChatSessionTypeState } from '@/components/chat/useChatSessionTypeState';
+
+vi.mock('@/lib/i18n', () => ({
+  t: (key: string) => key
+}));
+
+describe('useChatSessionTypeState', () => {
+  it('formats non-native runtime labels generically when no explicit label is provided', () => {
+    expect(resolveSessionTypeLabel('workspace-agent')).toBe('Workspace Agent');
+  });
+
+  it('preserves an explicitly selected draft session type instead of resetting to the default', () => {
+    const setPendingSessionType = vi.fn();
+
+    const { result } = renderHook(() =>
+      useChatSessionTypeState({
+        selectedSession: null,
+        selectedSessionKey: null,
+        pendingSessionType: 'codex-sdk',
+        setPendingSessionType,
+        sessionTypesData: {
+          defaultType: 'native',
+          options: [
+            { value: 'native', label: 'Native' },
+            { value: 'codex-sdk', label: 'Codex' }
+          ]
+        }
+      })
+    );
+
+    expect(result.current.selectedSessionType).toBe('codex-sdk');
+    expect(setPendingSessionType).not.toHaveBeenCalled();
+  });
+
+  it('hydrates the draft session type from the runtime default when no explicit type exists', () => {
+    const setPendingSessionType = vi.fn();
+
+    renderHook(() =>
+      useChatSessionTypeState({
+        selectedSession: null,
+        selectedSessionKey: null,
+        pendingSessionType: '',
+        setPendingSessionType,
+        sessionTypesData: {
+          defaultType: 'codex-sdk',
+          options: [
+            { value: 'native', label: 'Native' },
+            { value: 'codex-sdk', label: 'Codex' }
+          ]
+        }
+      })
+    );
+
+    expect(setPendingSessionType).toHaveBeenCalledWith('codex-sdk');
+  });
+});

package/src/components/chat/useChatSessionTypeState.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
 import type { SessionEntryView } from '@/api/types';
 import { t } from '@/lib/i18n';
@@ -33,13 +33,16 @@ export function resolveSessionTypeLabel(sessionType: string, fallbackLabel?: str
   if (sessionType === 'native') {
     return t('chatSessionTypeNative');
   }
-  if (sessionType === 'codex-sdk') {
-    return t('chatSessionTypeCodex');
+  const normalizedFallback = fallbackLabel?.trim();
+  if (normalizedFallback) {
+    return normalizedFallback;
   }
-  if (sessionType === 'claude-agent-sdk') {
-    return t('chatSessionTypeClaude');
-  }
-  return fallbackLabel?.trim() || sessionType;
+  return sessionType
+    .trim()
+    .split(/[-_]+/g)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ') || sessionType;
 }
 
 function buildSessionTypeOptions(
@@ -113,6 +116,7 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
     () => normalizeSessionType(sessionTypesData?.defaultType ?? DEFAULT_SESSION_TYPE),
     [sessionTypesData?.defaultType]
   );
+  const lastAutoPendingSessionTypeRef = useRef<string | null>(null);
   const selectedSessionType = useMemo(
     () => normalizeSessionType(selectedSession?.sessionType ?? pendingSessionType ?? defaultSessionType),
     [defaultSessionType, pendingSessionType, selectedSession?.sessionType]
@@ -122,8 +126,21 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
     if (selectedSessionKey) {
       return;
     }
+    const rawPending = typeof pendingSessionType === 'string' ? pendingSessionType.trim() : '';
+    const normalizedPending = normalizeSessionType(pendingSessionType);
+    const shouldFollowDefault =
+      rawPending.length === 0 ||
+      lastAutoPendingSessionTypeRef.current === normalizedPending ||
+      (lastAutoPendingSessionTypeRef.current === null && normalizedPending === DEFAULT_SESSION_TYPE);
+    if (!shouldFollowDefault) {
+      return;
+    }
+    lastAutoPendingSessionTypeRef.current = defaultSessionType;
+    if (normalizedPending === defaultSessionType) {
+      return;
+    }
     setPendingSessionType(defaultSessionType);
-  }, [defaultSessionType, selectedSessionKey, setPendingSessionType]);
+  }, [defaultSessionType, pendingSessionType, selectedSessionKey, setPendingSessionType]);
 
   const canEditSessionType = !selectedSessionKey || Boolean(selectedSession?.sessionTypeMutable);
   const availableSessionTypeSet = useMemo(

package/src/hooks/use-ncp-chat-session-types.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+import { fetchNcpChatSessionTypes } from '@/api/config';
+
+export function useNcpChatSessionTypes() {
+  return useQuery({
+    queryKey: ['ncp-session-types'],
+    queryFn: fetchNcpChatSessionTypes,
+    staleTime: 10_000,
+    retry: false
+  });
+}

package/src/hooks/useConfig.ts

@@ -31,6 +31,7 @@ import {
   setCronJobEnabled,
   runCronJob
 } from '@/api/config';
+import { deleteNcpSession, fetchNcpSessionMessages, fetchNcpSessions } from '@/api/ncp-session';
 import { toast } from 'sonner';
 import { t } from '@/lib/i18n';
 
@@ -252,6 +253,29 @@ export function useSessionHistory(key: string | null, limit = 200) {
   });
 }
 
+export function useNcpSessions(params?: { limit?: number }) {
+  return useQuery({
+    queryKey: ['ncp-sessions', params?.limit ?? null],
+    queryFn: () => fetchNcpSessions(params),
+    staleTime: 5_000,
+    retry: false,
+    refetchInterval: (query) => {
+      const hasRunningSession = Boolean(query.state.data?.sessions.some((session) => session.status === 'running'));
+      return hasRunningSession ? 800 : false;
+    }
+  });
+}
+
+export function useNcpSessionMessages(sessionId: string | null, limit = 200) {
+  return useQuery({
+    queryKey: ['ncp-session-messages', sessionId, limit],
+    queryFn: () => fetchNcpSessionMessages(sessionId as string, limit),
+    enabled: Boolean(sessionId),
+    staleTime: 5_000,
+    retry: false
+  });
+}
+
 export function useUpdateSession() {
   const queryClient = useQueryClient();
 
@@ -285,6 +309,22 @@ export function useDeleteSession() {
   });
 }
 
+export function useDeleteNcpSession() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ sessionId }: { sessionId: string }) => deleteNcpSession(sessionId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['ncp-sessions'] });
+      queryClient.invalidateQueries({ queryKey: ['ncp-session-messages'] });
+      toast.success(t('configSavedApplied'));
+    },
+    onError: (error: Error) => {
+      toast.error(t('configSaveFailed') + ': ' + error.message);
+    }
+  });
+}
+
 export function useSendChatTurn() {
   return useMutation({
     mutationFn: ({ data }: { data: Parameters<typeof sendChatTurn>[0] }) =>
@@ -348,7 +388,7 @@ export function useChatRuns(params?: {
       if (params?.isLocallyRunning) {
         return 800;
       }
-      const data = query.state.data;
+      const { data } = query.state;
       const hasActiveRuns = Array.isArray(data?.runs) && data.runs.length > 0;
       return hasActiveRuns ? 800 : false;
     },

package/src/hooks/useMarketplace.ts

@@ -61,8 +61,10 @@ export function useInstallMarketplaceItem() {
     mutationFn: (request: MarketplaceInstallRequest) => installMarketplaceItem(request),
     onSuccess: (result) => {
       queryClient.invalidateQueries({ queryKey: ['marketplace-installed', result.type] });
-      queryClient.refetchQueries({ queryKey: ['marketplace-installed', result.type], type: 'active' });
-      queryClient.refetchQueries({ queryKey: ['marketplace-items'], type: 'active' });
+      queryClient.invalidateQueries({ queryKey: ['marketplace-items'] });
+      if (result.type === 'plugin') {
+        queryClient.invalidateQueries({ queryKey: ['ncp-session-types'] });
+      }
       const fallback = result.type === 'plugin'
         ? t('marketplaceInstallSuccessPlugin')
         : t('marketplaceInstallSuccessSkill');
@@ -82,8 +84,9 @@ export function useManageMarketplaceItem() {
     onSuccess: (result) => {
       queryClient.invalidateQueries({ queryKey: ['marketplace-installed', result.type] });
       queryClient.invalidateQueries({ queryKey: ['marketplace-items'] });
-      queryClient.refetchQueries({ queryKey: ['marketplace-installed', result.type], type: 'active' });
-      queryClient.refetchQueries({ queryKey: ['marketplace-items'], type: 'active' });
+      if (result.type === 'plugin') {
+        queryClient.invalidateQueries({ queryKey: ['ncp-session-types'] });
+      }
       const fallback = result.action === 'enable'
         ? t('marketplaceEnableSuccess')
         : result.action === 'disable'

package/src/hooks/useWebSocket.ts

@@ -73,11 +73,25 @@ export function useWebSocket(queryClient?: QueryClient) {
         return;
       }
       queryClient.invalidateQueries({ queryKey: ['sessions'] });
+      queryClient.invalidateQueries({ queryKey: ['ncp-sessions'] });
       if (sessionKey && sessionKey.trim().length > 0) {
         queryClient.invalidateQueries({ queryKey: ['session-history', sessionKey.trim()] });
+        queryClient.invalidateQueries({ queryKey: ['ncp-session-messages', sessionKey.trim()] });
         return;
       }
       queryClient.invalidateQueries({ queryKey: ['session-history'] });
+      queryClient.invalidateQueries({ queryKey: ['ncp-session-messages'] });
+    };
+
+    const shouldInvalidateConfigQuery = (configPath: string) => {
+      const normalized = configPath.trim().toLowerCase();
+      if (!normalized) {
+        return true;
+      }
+      if (normalized.startsWith('plugins') || normalized.startsWith('skills')) {
+        return false;
+      }
+      return true;
     };
 
     setConnectionStatus('connecting');
@@ -98,13 +112,20 @@ export function useWebSocket(queryClient?: QueryClient) {
     });
 
     client.on('config.updated', (event) => {
+      const payload = event.payload as { path?: unknown } | undefined;
+      const configPath = typeof payload?.path === 'string' ? payload.path : '';
       // Trigger refetch of config
-      if (queryClient) {
+      if (queryClient && shouldInvalidateConfigQuery(configPath)) {
         queryClient.invalidateQueries({ queryKey: ['config'] });
       }
-      if (event.type === 'config.updated' && event.payload.path.startsWith('session')) {
+      if (configPath.startsWith('session')) {
         invalidateSessionQueries();
       }
+      if (configPath.startsWith('plugins')) {
+        queryClient?.invalidateQueries({ queryKey: ['ncp-session-types'] });
+        queryClient?.invalidateQueries({ queryKey: ['marketplace-installed', 'plugin'] });
+        queryClient?.invalidateQueries({ queryKey: ['marketplace-items'] });
+      }
     });
 
     client.on('run.updated', (event) => {

package/src/lib/i18n.ts

@@ -670,7 +670,7 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   chatToolWorkflowDetails: { zh: '展开查看参数和结果', en: 'Expand to view params and results' },
   chatToolOutput: { zh: '查看输出', en: 'View Output' },
   chatToolNoOutput: { zh: '无输出（执行完成）', en: 'No output (completed)' },
-  chatReasoning: { zh: '查看推理内容', en: 'Show reasoning' },
+  chatReasoning: { zh: '推理过程', en: 'Reasoning' },
   chatUnknownPart: { zh: '未知消息片段', en: 'Unknown message part' },
   chatCodeCopy: { zh: '复制代码', en: 'Copy' },
   chatCodeCopied: { zh: '已复制', en: 'Copied' },

package/tailwind.config.js

@@ -1,7 +1,13 @@
+import tailwindcssAnimate from 'tailwindcss-animate';
+
 /** @type {import('tailwindcss').Config} */
 export default {
   darkMode: ['class'],
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+    '../nextclaw-agent-chat-ui/src/**/*.{js,ts,jsx,tsx}',
+  ],
   theme: {
     extend: {
       colors: {
@@ -146,6 +152,5 @@ export default {
       },
     },
   },
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  plugins: [require('tailwindcss-animate')],
+  plugins: [tailwindcssAnimate],
 };

package/tsconfig.json

@@ -13,7 +13,10 @@
     "paths": {
       "@/*": ["./src/*"],
       "@nextclaw/agent-chat": ["../nextclaw-agent-chat/src/index.ts"],
-      "@nextclaw/agent-chat-ui": ["../nextclaw-agent-chat-ui/src/index.ts"]
+      "@nextclaw/agent-chat-ui": ["../nextclaw-agent-chat-ui/src/index.ts"],
+      "@nextclaw/ncp": ["../ncp-packages/nextclaw-ncp/src/index.ts"],
+      "@nextclaw/ncp-http-agent-client": ["../ncp-packages/nextclaw-ncp-http-agent-client/src/index.ts"],
+      "@nextclaw/ncp-react": ["../ncp-packages/nextclaw-ncp-react/src/index.ts"]
     }
   },
   "include": ["src"]

package/dist/assets/ChannelsList-DF2U-LY1.js

@@ -1 +0,0 @@
-import{r as v,j as a,a5 as Z,F as ee,e as T,K as ae,ai as te,aS as se,aT as ne,aU as le,z as re,s as oe,a9 as ce,v as ie}from"./vendor-B7ozqnFC.js";import{t as e,c as I,U as me,u as q,a as $,b as H,W as pe,X as de,I as D,S as be,e as ue,f as xe,g as ye,h as ge,B as E}from"./index-DK4TS5ev.js";import{L as he}from"./label-D8ly4a2P.js";import{S as fe}from"./switch-Ce_g9lpN.js";import{L as K,S as J}from"./LogoBadge-DvGAzkZ3.js";import{h as U}from"./config-hints-CApS3K_7.js";import{c as we,b as ve,a as je,C as ke}from"./config-layout-BHnOoweL.js";import{T as Se}from"./tabs-custom-Cf5azvT5.js";import{P as Ce,a as Ne}from"./page-layout-BSYfvwbp.js";function Pe({value:t,onChange:m,className:i,placeholder:r=""}){const[o,u]=v.useState(""),d=x=>{x.key==="Enter"&&o.trim()?(x.preventDefault(),m([...t,o.trim()]),u("")):x.key==="Backspace"&&!o&&t.length>0&&m(t.slice(0,-1))},g=x=>{m(t.filter((j,h)=>h!==x))};return a.jsxs("div",{className:I("flex flex-wrap gap-2 p-2 border rounded-md min-h-[42px]",i),children:[t.map((x,j)=>a.jsxs("span",{className:"inline-flex items-center gap-1 px-2 py-1 bg-primary text-primary-foreground rounded text-sm",children:[x,a.jsx("button",{type:"button",onClick:()=>g(j),className:"hover:text-red-300 transition-colors",children:a.jsx(Z,{className:"h-3 w-3"})})]},j)),a.jsx("input",{type:"text",value:o,onChange:x=>u(x.target.value),onKeyDown:d,className:"flex-1 outline-none min-w-[100px] bg-transparent text-sm",placeholder:r||e("enterTag")})]})}function z(t){var r,o;const m=me();return((r=t.tutorialUrls)==null?void 0:r[m])||((o=t.tutorialUrls)==null?void 0:o.default)||t.tutorialUrl}const Ie={telegram:"telegram.svg",slack:"slack.svg",discord:"discord.svg",whatsapp:"whatsapp.svg",qq:"qq.svg",feishu:"feishu.svg",dingtalk:"dingtalk.svg",wecom:"wecom.svg",mochat:"mochat.svg",email:"email.svg"};function Fe(t,m){const i=m.toLowerCase(),r=t[i];return r?`/logos/${r}`:null}function Y(t){return Fe(Ie,t)}const B=[{value:"pairing",label:"pairing"},{value:"allowlist",label:"allowlist"},{value:"open",label:"open"},{value:"disabled",label:"disabled"}],R=[{value:"open",label:"open"},{value:"allowlist",label:"allowlist"},{value:"disabled",label:"disabled"}],Te=[{value:"off",label:"off"},{value:"partial",label:"partial"},{value:"block",label:"block"},{value:"progress",label:"progress"}],De=t=>t.includes("token")||t.includes("secret")||t.includes("password")?a.jsx(ae,{className:"h-3.5 w-3.5 text-gray-500"}):t.includes("url")||t.includes("host")?a.jsx(te,{className:"h-3.5 w-3.5 text-gray-500"}):t.includes("email")||t.includes("mail")?a.jsx(se,{className:"h-3.5 w-3.5 text-gray-500"}):t.includes("id")||t.includes("from")?a.jsx(ne,{className:"h-3.5 w-3.5 text-gray-500"}):t==="enabled"||t==="consentGranted"?a.jsx(le,{className:"h-3.5 w-3.5 text-gray-500"}):a.jsx(re,{className:"h-3.5 w-3.5 text-gray-500"});function G(){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:B},{name:"groupPolicy",type:"select",label:e("groupPolicy"),options:R},{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:Te},{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:B},{name:"groupPolicy",type:"select",label:e("groupPolicy"),options:R},{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")}]}}function A(t){return typeof t=="object"&&t!==null&&!Array.isArray(t)}function V(t,m){const i={...t};for(const[r,o]of Object.entries(m)){const u=i[r];if(A(u)&&A(o)){i[r]=V(u,o);continue}i[r]=o}return i}function Ae(t,m){const i=t.split("."),r={};let o=r;for(let u=0;u<i.length-1;u+=1){const d=i[u];o[d]={},o=o[d]}return o[i[i.length-1]]=m,r}function Le({channelName:t}){var _,O;const{data:m}=q(),{data:i}=$(),{data:r}=H(),o=pe(),u=de(),[d,g]=v.useState({}),[x,j]=v.useState({}),[h,f]=v.useState(null),k=t?m==null?void 0:m.channels[t]:null,w=t?G()[t]??[]:[],c=r==null?void 0:r.uiHints,p=t?`channels.${t}`:null,S=((_=r==null?void 0:r.actions)==null?void 0:_.filter(s=>s.scope===p))??[],C=t&&(((O=U(`channels.${t}`,c))==null?void 0:O.label)??t),P=i==null?void 0:i.channels.find(s=>s.name===t),F=P?z(P):void 0;v.useEffect(()=>{if(k){g({...k});const s={};(t?G()[t]??[]:[]).filter(l=>l.type==="json").forEach(l=>{const y=k[l.name];s[l.name]=JSON.stringify(y??{},null,2)}),j(s)}else g({}),j({})},[k,t]);const N=(s,n)=>{g(l=>({...l,[s]:n}))},L=s=>{if(s.preventDefault(),!t)return;const n={...d};for(const l of w){if(l.type!=="password")continue;const y=n[l.name];(typeof y!="string"||y.length===0)&&delete n[l.name]}for(const l of w){if(l.type!=="json")continue;const y=x[l.name]??"";try{n[l.name]=y.trim()?JSON.parse(y):{}}catch{T.error(`${e("invalidJson")}: ${l.name}`);return}}o.mutate({channel:t,data:n})},W=s=>{if(!s||!t)return;const n=s.channels;if(!A(n))return;const l=n[t];A(l)&&g(y=>V(y,l))},X=async s=>{if(!(!t||!p)){f(s.id);try{let n={...d};s.saveBeforeRun&&(n={...n,...s.savePatch??{}},g(n),await o.mutateAsync({channel:t,data:n}));const l=await u.mutateAsync({actionId:s.id,data:{scope:p,draftConfig:Ae(p,n)}});W(l.patch),l.ok?T.success(l.message||e("success")):T.error(l.message||e("error"))}catch(n){const l=n instanceof Error?n.message:String(n);T.error(`${e("error")}: ${l}`)}finally{f(null)}}};if(!t||!P||!k)return a.jsx("div",{className:we,children:a.jsxs("div",{children:[a.jsx("h3",{className:"text-base font-semibold text-gray-900",children:e("channelsSelectTitle")}),a.jsx("p",{className:"mt-2 text-sm text-gray-500",children:e("channelsSelectDescription")})]})});const M=!!k.enabled;return a.jsxs("div",{className:ve,children:[a.jsx("div",{className:"border-b border-gray-100 px-6 py-5",children:a.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-3",children:[a.jsxs("div",{className:"min-w-0",children:[a.jsxs("div",{className:"flex items-center gap-3",children:[a.jsx(K,{name:t,src:Y(t),className:I("h-9 w-9 rounded-lg border",M?"border-primary/30 bg-white":"border-gray-200/70 bg-white"),imgClassName:"h-5 w-5 object-contain",fallback:a.jsx("span",{className:"text-sm font-semibold uppercase text-gray-500",children:t[0]})}),a.jsx("h3",{className:"truncate text-lg font-semibold text-gray-900 capitalize",children:C})]}),a.jsx("p",{className:"mt-2 text-sm text-gray-500",children:e("channelsFormDescription")}),F&&a.jsxs("a",{href:F,className:"mt-2 inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover",children:[a.jsx(ee,{className:"h-3.5 w-3.5"}),e("channelsGuideTitle")]})]}),a.jsx(J,{status:M?"active":"inactive",label:M?e("statusActive"):e("statusInactive")})]})}),a.jsxs("form",{onSubmit:L,className:"flex min-h-0 flex-1 flex-col",children:[a.jsx("div",{className:"min-h-0 flex-1 space-y-6 overflow-y-auto overscroll-contain px-6 py-5",children:w.map(s=>{const n=t?U(`channels.${t}.${s.name}`,c):void 0,l=(n==null?void 0:n.label)??s.label,y=n==null?void 0:n.placeholder;return a.jsxs("div",{className:"space-y-2.5",children:[a.jsxs(he,{htmlFor:s.name,className:"flex items-center gap-2 text-sm font-medium text-gray-900",children:[De(s.name),l]}),s.type==="boolean"&&a.jsxs("div",{className:"flex items-center justify-between rounded-xl bg-gray-50 p-3",children:[a.jsx("span",{className:"text-sm text-gray-500",children:d[s.name]?e("enabled"):e("disabled")}),a.jsx(fe,{id:s.name,checked:d[s.name]||!1,onCheckedChange:b=>N(s.name,b),className:"data-[state=checked]:bg-emerald-500"})]}),(s.type==="text"||s.type==="email")&&a.jsx(D,{id:s.name,type:s.type,value:d[s.name]||"",onChange:b=>N(s.name,b.target.value),placeholder:y,className:"rounded-xl"}),s.type==="password"&&a.jsx(D,{id:s.name,type:"password",value:d[s.name]||"",onChange:b=>N(s.name,b.target.value),placeholder:y??e("leaveBlankToKeepUnchanged"),className:"rounded-xl"}),s.type==="number"&&a.jsx(D,{id:s.name,type:"number",value:d[s.name]||0,onChange:b=>N(s.name,parseInt(b.target.value,10)||0),placeholder:y,className:"rounded-xl"}),s.type==="tags"&&a.jsx(Pe,{value:d[s.name]||[],onChange:b=>N(s.name,b)}),s.type==="select"&&a.jsxs(be,{value:d[s.name]||"",onValueChange:b=>N(s.name,b),children:[a.jsx(ue,{className:"rounded-xl",children:a.jsx(xe,{})}),a.jsx(ye,{children:(s.options??[]).map(b=>a.jsx(ge,{value:b.value,children:b.label},b.value))})]}),s.type==="json"&&a.jsx("textarea",{id:s.name,value:x[s.name]??"{}",onChange:b=>j(Q=>({...Q,[s.name]:b.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"})]},s.name)})}),a.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-3 border-t border-gray-100 px-6 py-4",children:[a.jsx("div",{className:"flex flex-wrap items-center gap-2",children:S.filter(s=>s.trigger==="manual").map(s=>a.jsx(E,{type:"button",onClick:()=>X(s),disabled:o.isPending||!!h,variant:"secondary",children:h===s.id?e("connecting"):s.title},s.id))}),a.jsx(E,{type:"submit",disabled:o.isPending||!!h,children:o.isPending?e("saving"):e("save")})]})]})]})}const Me={telegram:"channelDescTelegram",slack:"channelDescSlack",email:"channelDescEmail",webhook:"channelDescWebhook",discord:"channelDescDiscord",feishu:"channelDescFeishu"};function He(){const{data:t}=q(),{data:m}=$(),{data:i}=H(),[r,o]=v.useState("enabled"),[u,d]=v.useState(),[g,x]=v.useState(""),j=i==null?void 0:i.uiHints,h=m==null?void 0:m.channels,f=t==null?void 0:t.channels,k=[{id:"enabled",label:e("channelsTabEnabled"),count:(h??[]).filter(c=>{var p;return(p=f==null?void 0:f[c.name])==null?void 0:p.enabled}).length},{id:"all",label:e("channelsTabAll"),count:(h??[]).length}],w=v.useMemo(()=>{const c=g.trim().toLowerCase();return(h??[]).filter(p=>{var C;const S=((C=f==null?void 0:f[p.name])==null?void 0:C.enabled)||!1;return r==="enabled"?S:!0}).filter(p=>c?(p.displayName||p.name).toLowerCase().includes(c)||p.name.toLowerCase().includes(c):!0)},[r,f,h,g]);return v.useEffect(()=>{if(w.length===0){d(void 0);return}w.some(p=>p.name===u)||d(w[0].name)},[w,u]),!t||!m?a.jsx("div",{className:"p-8 text-gray-400",children:e("channelsLoading")}):a.jsxs(Ce,{className:"xl:flex xl:h-full xl:min-h-0 xl:flex-col xl:pb-0",children:[a.jsx(Ne,{title:e("channelsPageTitle"),description:e("channelsPageDescription")}),a.jsxs("div",{className:I(ke,"xl:min-h-0 xl:flex-1"),children:[a.jsxs("section",{className:je,children:[a.jsx("div",{className:"border-b border-gray-100 px-4 pt-4",children:a.jsx(Se,{tabs:k,activeTab:r,onChange:o,className:"mb-0"})}),a.jsx("div",{className:"border-b border-gray-100 px-4 py-3",children:a.jsxs("div",{className:"relative",children:[a.jsx(oe,{className:"pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400"}),a.jsx(D,{value:g,onChange:c=>x(c.target.value),placeholder:e("channelsFilterPlaceholder"),className:"h-10 rounded-xl pl-9"})]})}),a.jsxs("div",{className:"min-h-0 flex-1 space-y-2 overflow-y-auto overscroll-contain p-3",children:[w.map(c=>{const p=t.channels[c.name],S=(p==null?void 0:p.enabled)||!1,C=U(`channels.${c.name}`,j),P=z(c),F=(C==null?void 0:C.help)||e(Me[c.name]||"channelDescriptionDefault"),N=u===c.name;return a.jsx("button",{type:"button",onClick:()=>d(c.name),className:I("w-full rounded-xl border p-2.5 text-left transition-all",N?"border-primary/30 bg-primary-50/40 shadow-sm":"border-gray-200/70 bg-white hover:border-gray-300 hover:bg-gray-50/70"),children:a.jsxs("div",{className:"flex items-start justify-between gap-3",children:[a.jsxs("div",{className:"flex min-w-0 items-center gap-3",children:[a.jsx(K,{name:c.name,src:Y(c.name),className:I("h-10 w-10 rounded-lg border",S?"border-primary/30 bg-white":"border-gray-200/70 bg-white"),imgClassName:"h-5 w-5 object-contain",fallback:a.jsx("span",{className:"text-sm font-semibold uppercase text-gray-500",children:c.name[0]})}),a.jsxs("div",{className:"min-w-0",children:[a.jsx("p",{className:"truncate text-sm font-semibold text-gray-900",children:c.displayName||c.name}),a.jsx("p",{className:"line-clamp-1 text-[11px] text-gray-500",children:F})]})]}),a.jsxs("div",{className:"flex items-center gap-2",children:[P&&a.jsx("a",{href:P,onClick:L=>L.stopPropagation(),className:"inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-300 transition-colors hover:bg-gray-100/70 hover:text-gray-500",title:e("channelsGuideTitle"),children:a.jsx(ce,{className:"h-3.5 w-3.5"})}),a.jsx(J,{status:S?"active":"inactive",label:S?e("statusActive"):e("statusInactive"),className:"min-w-[56px] justify-center"})]})]})},c.name)}),w.length===0&&a.jsxs("div",{className:"flex h-full min-h-[220px] flex-col items-center justify-center rounded-xl border border-dashed border-gray-200 bg-gray-50/70 py-10 text-center",children:[a.jsx("div",{className:"mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-white",children:a.jsx(ie,{className:"h-5 w-5 text-gray-300"})}),a.jsx("p",{className:"text-sm font-medium text-gray-700",children:e("channelsNoMatch")})]})]})]}),a.jsx(Le,{channelName:u})]})]})}export{He as ChannelsList};