npm - @nextclaw/ui - Versions diffs - 0.5.19 → 0.5.21 - Mend

@nextclaw/ui 0.5.19 → 0.5.21

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 (48) hide show

package/CHANGELOG.md +12 -0
package/dist/assets/ChannelsList-TFFw4Cem.js +1 -0
package/dist/assets/ChatPage-BUm3UPap.js +32 -0
package/dist/assets/CronConfig-9dYfTRJl.js +1 -0
package/dist/assets/{DocBrowser-BDQFCtYk.js → DocBrowser-BIV0vpA0.js} +1 -1
package/dist/assets/MarketplacePage-2Zi0JSVi.js +1 -0
package/dist/assets/{ModelConfig-Ditrj5-j.js → ModelConfig-h21P5rV0.js} +1 -1
package/dist/assets/ProvidersList-DEaK1a3y.js +1 -0
package/dist/assets/RuntimeConfig-DXMzf-gF.js +1 -0
package/dist/assets/SessionsConfig-SdXvn_9E.js +2 -0
package/dist/assets/{action-link-C13-2zV4.js → action-link-C9xMkxl2.js} +1 -1
package/dist/assets/{card-wQP6HJ6W.js → card-Cnqfntk5.js} +1 -1
package/dist/assets/chat-message-B7oqvJ2d.js +3 -0
package/dist/assets/dialog-DJs630RE.js +5 -0
package/dist/assets/index-CrUDzcei.js +2 -0
package/dist/assets/index-Zy7fAOe1.css +1 -0
package/dist/assets/{label-BNwROQB2.js → label-CXGuE6Oa.js} +1 -1
package/dist/assets/{page-layout-BXJRMNor.js → page-layout-BVZlyPFt.js} +1 -1
package/dist/assets/{switch-CsMPT5De.js → switch-BLF45eI3.js} +1 -1
package/dist/assets/{tabs-custom-DczZ7pO4.js → tabs-custom-DQ0GpEV5.js} +1 -1
package/dist/assets/useConfig-vFQvF4kn.js +1 -0
package/dist/assets/{useConfirmDialog-CKMEeckR.js → useConfirmDialog-CK7KAyDf.js} +1 -1
package/dist/assets/{vendor-Bhv7yx8z.js → vendor-RXIbhDBC.js} +95 -60
package/dist/index.html +3 -3
package/package.json +4 -1
package/src/App.tsx +4 -2
package/src/api/config.ts +11 -0
package/src/api/types.ts +23 -1
package/src/components/chat/ChatPage.tsx +378 -0
package/src/components/chat/ChatThread.tsx +210 -0
package/src/components/config/CronConfig.tsx +1 -1
package/src/components/config/SessionsConfig.tsx +4 -2
package/src/components/layout/Sidebar.tsx +6 -1
package/src/components/marketplace/MarketplacePage.tsx +39 -20
package/src/hooks/useConfig.ts +11 -0
package/src/index.css +69 -0
package/src/lib/chat-message.ts +215 -0
package/src/lib/i18n.ts +36 -0
package/dist/assets/ChannelsList-GbfILabx.js +0 -1
package/dist/assets/CronConfig-BV-xuLqt.js +0 -1
package/dist/assets/MarketplacePage-B2BPK3EZ.js +0 -1
package/dist/assets/ProvidersList-Dl-9bD7O.js +0 -1
package/dist/assets/RuntimeConfig-DTzfw7el.js +0 -1
package/dist/assets/SessionsConfig-CBD8eCim.js +0 -2
package/dist/assets/dialog-CCWBaWyg.js +0 -5
package/dist/assets/index-CDWTAUj_.js +0 -2
package/dist/assets/index-DdpR1fdj.css +0 -1
package/dist/assets/useConfig-JBr27I5l.js +0 -1

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-CDWTAUj_.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/vendor-Bhv7yx8z.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-DdpR1fdj.css">
+  <script type="module" crossorigin src="/assets/index-CrUDzcei.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-RXIbhDBC.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-Zy7fAOe1.css">
 </head>
 <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.5.19",
+  "version": "0.5.21",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -19,7 +19,10 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.2",
+    "react-markdown": "^10.1.0",
     "react-router-dom": "^7.13.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
     "sonner": "^1.7.1",
     "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8",

package/src/App.tsx CHANGED Viewed

@@ -15,6 +15,7 @@ const queryClient = new QueryClient({
 });
 const ModelConfigPage = lazy(async () => ({ default: (await import('@/components/config/ModelConfig')).ModelConfig }));
+const ChatPage = lazy(async () => ({ default: (await import('@/components/chat/ChatPage')).ChatPage }));
 const ProvidersListPage = lazy(async () => ({ default: (await import('@/components/config/ProvidersList')).ProvidersList }));
 const ChannelsListPage = lazy(async () => ({ default: (await import('@/components/config/ChannelsList')).ChannelsList }));
 const RuntimeConfigPage = lazy(async () => ({ default: (await import('@/components/config/RuntimeConfig')).RuntimeConfig }));
@@ -39,6 +40,7 @@ function AppContent() {
       <AppLayout>
         <div key={location.pathname} className="animate-fade-in w-full h-full">
           <Routes>
+            <Route path="/chat" element={<LazyRoute><ChatPage /></LazyRoute>} />
             <Route path="/model" element={<LazyRoute><ModelConfigPage /></LazyRoute>} />
             <Route path="/providers" element={<LazyRoute><ProvidersListPage /></LazyRoute>} />
             <Route path="/channels" element={<LazyRoute><ChannelsListPage /></LazyRoute>} />
@@ -47,8 +49,8 @@ function AppContent() {
             <Route path="/cron" element={<LazyRoute><CronConfigPage /></LazyRoute>} />
             <Route path="/marketplace" element={<Navigate to="/marketplace/plugins" replace />} />
             <Route path="/marketplace/:type" element={<LazyRoute><MarketplacePage /></LazyRoute>} />
-            <Route path="/" element={<Navigate to="/model" replace />} />
-            <Route path="*" element={<Navigate to="/model" replace />} />
+            <Route path="/" element={<Navigate to="/chat" replace />} />
+            <Route path="*" element={<Navigate to="/chat" replace />} />
           </Routes>
         </div>
       </AppLayout>

package/src/api/config.ts CHANGED Viewed

@@ -12,6 +12,8 @@ import type {
   SessionsListView,
   SessionHistoryView,
   SessionPatchUpdate,
+  ChatTurnRequest,
+  ChatTurnView,
   CronListView,
   CronEnableRequest,
   CronRunRequest,
@@ -167,6 +169,15 @@ export async function deleteSession(key: string): Promise<{ deleted: boolean }>
   return response.data;
 }
+// POST /api/chat/turn
+export async function sendChatTurn(data: ChatTurnRequest): Promise<ChatTurnView> {
+  const response = await api.post<ChatTurnView>('/api/chat/turn', data);
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
 // GET /api/cron
 export async function fetchCronJobs(params?: { all?: boolean }): Promise<CronListView> {
   const query = new URLSearchParams();

package/src/api/types.ts CHANGED Viewed

@@ -73,10 +73,12 @@ export type SessionsListView = {
 export type SessionMessageView = {
   role: string;
-  content: string;
+  content: unknown;
   timestamp: string;
   name?: string;
   tool_call_id?: string;
+  tool_calls?: Array<Record<string, unknown>>;
+  reasoning_content?: string;
 };
 export type SessionHistoryView = {
@@ -92,6 +94,26 @@ export type SessionPatchUpdate = {
   clearHistory?: boolean;
 };
+export type ChatTurnRequest = {
+  message: string;
+  sessionKey?: string;
+  agentId?: string;
+  channel?: string;
+  chatId?: string;
+  model?: string;
+  metadata?: Record<string, unknown>;
+};
+export type ChatTurnView = {
+  reply: string;
+  sessionKey: string;
+  agentId?: string;
+  model?: string;
+  requestedAt: string;
+  completedAt: string;
+  durationMs: number;
+};
 export type CronScheduleView =
   | { kind: "at"; atMs?: number | null }
   | { kind: "every"; everyMs?: number | null }

package/src/components/chat/ChatPage.tsx ADDED Viewed

@@ -0,0 +1,378 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { SessionEntryView, SessionMessageView } from '@/api/types';
+import { useConfig, useDeleteSession, useSendChatTurn, useSessionHistory, useSessions } from '@/hooks/useConfig';
+import { useConfirmDialog } from '@/hooks/useConfirmDialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { PageHeader, PageLayout } from '@/components/layout/page-layout';
+import { ChatThread } from '@/components/chat/ChatThread';
+import { cn } from '@/lib/utils';
+import { formatDateTime, t } from '@/lib/i18n';
+import { MessageSquareText, Plus, RefreshCw, Search, Send, Trash2 } from 'lucide-react';
+const CHAT_SESSION_STORAGE_KEY = 'nextclaw.ui.chat.activeSession';
+function readStoredSessionKey(): string | null {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  try {
+    const value = window.localStorage.getItem(CHAT_SESSION_STORAGE_KEY);
+    return value && value.trim().length > 0 ? value : null;
+  } catch {
+    return null;
+  }
+}
+function writeStoredSessionKey(value: string | null): void {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  try {
+    if (!value) {
+      window.localStorage.removeItem(CHAT_SESSION_STORAGE_KEY);
+      return;
+    }
+    window.localStorage.setItem(CHAT_SESSION_STORAGE_KEY, value);
+  } catch {
+    // ignore storage errors
+  }
+}
+function resolveAgentIdFromSessionKey(sessionKey: string): string | null {
+  const match = /^agent:([^:]+):/i.exec(sessionKey.trim());
+  if (!match) {
+    return null;
+  }
+  const value = match[1]?.trim();
+  return value ? value : null;
+}
+function buildNewSessionKey(agentId: string): string {
+  const slug = Math.random().toString(36).slice(2, 8);
+  return `agent:${agentId}:ui:direct:web-${Date.now().toString(36)}${slug}`;
+}
+function sessionDisplayName(session: SessionEntryView): string {
+  if (session.label && session.label.trim()) {
+    return session.label.trim();
+  }
+  const chunks = session.key.split(':');
+  return chunks[chunks.length - 1] || session.key;
+}
+export function ChatPage() {
+  const [query, setQuery] = useState('');
+  const [draft, setDraft] = useState('');
+  const [selectedSessionKey, setSelectedSessionKey] = useState<string | null>(() => readStoredSessionKey());
+  const [selectedAgentId, setSelectedAgentId] = useState('main');
+  const [optimisticUserMessage, setOptimisticUserMessage] = useState<SessionMessageView | null>(null);
+  const { confirm, ConfirmDialog } = useConfirmDialog();
+  const threadRef = useRef<HTMLDivElement | null>(null);
+  const configQuery = useConfig();
+  const sessionsQuery = useSessions({ q: query.trim() || undefined, limit: 120, activeMinutes: 0 });
+  const historyQuery = useSessionHistory(selectedSessionKey, 300);
+  const deleteSession = useDeleteSession();
+  const sendChatTurn = useSendChatTurn();
+  const agentOptions = useMemo(() => {
+    const list = configQuery.data?.agents.list ?? [];
+    const unique = new Set<string>(['main']);
+    for (const item of list) {
+      if (typeof item.id === 'string' && item.id.trim().length > 0) {
+        unique.add(item.id.trim().toLowerCase());
+      }
+    }
+    return Array.from(unique);
+  }, [configQuery.data?.agents.list]);
+  const sessions = useMemo(() => sessionsQuery.data?.sessions ?? [], [sessionsQuery.data?.sessions]);
+  const selectedSession = useMemo(
+    () => sessions.find((session) => session.key === selectedSessionKey) ?? null,
+    [selectedSessionKey, sessions]
+  );
+  const historyMessages = useMemo(() => historyQuery.data?.messages ?? [], [historyQuery.data?.messages]);
+  const mergedMessages = useMemo(() => {
+    if (!optimisticUserMessage) {
+      return historyMessages;
+    }
+    return [...historyMessages, optimisticUserMessage];
+  }, [historyMessages, optimisticUserMessage]);
+  useEffect(() => {
+    if (!selectedSessionKey && sessions.length > 0) {
+      setSelectedSessionKey(sessions[0].key);
+    }
+  }, [selectedSessionKey, sessions]);
+  useEffect(() => {
+    writeStoredSessionKey(selectedSessionKey);
+  }, [selectedSessionKey]);
+  useEffect(() => {
+    const inferred = selectedSessionKey ? resolveAgentIdFromSessionKey(selectedSessionKey) : null;
+    if (!inferred) {
+      return;
+    }
+    if (selectedAgentId !== inferred) {
+      setSelectedAgentId(inferred);
+    }
+  }, [selectedAgentId, selectedSessionKey]);
+  useEffect(() => {
+    const element = threadRef.current;
+    if (!element) {
+      return;
+    }
+    element.scrollTop = element.scrollHeight;
+  }, [mergedMessages.length, sendChatTurn.isPending, selectedSessionKey]);
+  const createNewSession = () => {
+    const next = buildNewSessionKey(selectedAgentId);
+    setSelectedSessionKey(next);
+    setOptimisticUserMessage(null);
+  };
+  const handleDeleteSession = async () => {
+    if (!selectedSessionKey) {
+      return;
+    }
+    const confirmed = await confirm({
+      title: t('chatDeleteSessionConfirm'),
+      variant: 'destructive',
+      confirmLabel: t('delete')
+    });
+    if (!confirmed) {
+      return;
+    }
+    deleteSession.mutate(
+      { key: selectedSessionKey },
+      {
+        onSuccess: async () => {
+          setSelectedSessionKey(null);
+          setOptimisticUserMessage(null);
+          await sessionsQuery.refetch();
+        }
+      }
+    );
+  };
+  const handleSend = async () => {
+    const message = draft.trim();
+    if (!message || sendChatTurn.isPending) {
+      return;
+    }
+    const hadActiveSession = Boolean(selectedSessionKey);
+    const sessionKey = selectedSessionKey ?? buildNewSessionKey(selectedAgentId);
+    if (!selectedSessionKey) {
+      setSelectedSessionKey(sessionKey);
+    }
+    setDraft('');
+    setOptimisticUserMessage({
+      role: 'user',
+      content: message,
+      timestamp: new Date().toISOString()
+    });
+    try {
+      const result = await sendChatTurn.mutateAsync({
+        data: {
+          message,
+          sessionKey,
+          agentId: selectedAgentId,
+          channel: 'ui',
+          chatId: 'web-ui'
+        }
+      });
+      setOptimisticUserMessage(null);
+      if (result.sessionKey !== sessionKey) {
+        setSelectedSessionKey(result.sessionKey);
+      }
+      await sessionsQuery.refetch();
+      if (hadActiveSession) {
+        await historyQuery.refetch();
+      }
+    } catch {
+      setOptimisticUserMessage(null);
+      setDraft(message);
+    }
+  };
+  return (
+    <PageLayout fullHeight>
+      <PageHeader
+        title={t('chatPageTitle')}
+        description={t('chatPageDescription')}
+        actions={
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" onClick={() => historyQuery.refetch()} className="rounded-lg">
+              <RefreshCw className={cn('h-3.5 w-3.5 mr-1.5', historyQuery.isFetching && 'animate-spin')} />
+              {t('chatRefresh')}
+            </Button>
+            <Button variant="primary" size="sm" onClick={createNewSession} className="rounded-lg">
+              <Plus className="h-3.5 w-3.5 mr-1.5" />
+              {t('chatNewSession')}
+            </Button>
+          </div>
+        }
+      />
+      <div className="flex-1 min-h-0 flex gap-4 max-lg:flex-col">
+        <aside className="w-[320px] max-lg:w-full shrink-0 rounded-2xl border border-gray-200 bg-white shadow-card flex flex-col min-h-0">
+          <div className="p-4 border-b border-gray-100 space-y-3">
+            <div className="relative">
+              <Search className="h-3.5 w-3.5 absolute left-3 top-2.5 text-gray-400" />
+              <Input
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder={t('chatSearchSessionPlaceholder')}
+                className="pl-8 h-9 rounded-lg text-xs"
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              <Button variant="outline" size="sm" className="rounded-lg" onClick={() => sessionsQuery.refetch()}>
+                <RefreshCw className={cn('h-3.5 w-3.5 mr-1.5', sessionsQuery.isFetching && 'animate-spin')} />
+                {t('chatRefresh')}
+              </Button>
+              <Button variant="subtle" size="sm" className="rounded-lg" onClick={createNewSession}>
+                <Plus className="h-3.5 w-3.5 mr-1.5" />
+                {t('chatNewSession')}
+              </Button>
+            </div>
+          </div>
+          <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar p-2">
+            {sessionsQuery.isLoading ? (
+              <div className="text-sm text-gray-500 p-4">{t('sessionsLoading')}</div>
+            ) : sessions.length === 0 ? (
+              <div className="p-5 m-2 rounded-xl border border-dashed border-gray-200 text-center text-sm text-gray-500">
+                <MessageSquareText className="h-7 w-7 mx-auto mb-2 text-gray-300" />
+                {t('sessionsEmpty')}
+              </div>
+            ) : (
+              <div className="space-y-1">
+                {sessions.map((session) => {
+                  const active = selectedSessionKey === session.key;
+                  return (
+                    <button
+                      key={session.key}
+                      onClick={() => setSelectedSessionKey(session.key)}
+                      className={cn(
+                        'w-full rounded-xl border px-3 py-2.5 text-left transition-all',
+                        active
+                          ? 'border-primary/30 bg-primary/5'
+                          : 'border-transparent hover:border-gray-200 hover:bg-gray-50'
+                      )}
+                    >
+                      <div className="text-sm font-semibold text-gray-900 truncate">{sessionDisplayName(session)}</div>
+                      <div className="mt-1 text-[11px] text-gray-500 truncate">{session.key}</div>
+                      <div className="mt-1 text-[11px] text-gray-400">
+                        {session.messageCount} · {formatDateTime(session.updatedAt)}
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </aside>
+        <section className="flex-1 min-h-0 rounded-2xl border border-gray-200 bg-gradient-to-b from-gray-50/60 to-white shadow-card flex flex-col overflow-hidden">
+          <div className="px-5 py-4 border-b border-gray-200/80 bg-white/80 backdrop-blur-sm flex flex-wrap items-center gap-3">
+            <div className="min-w-[220px] max-w-[320px]">
+              <div className="text-[11px] text-gray-500 mb-1">{t('chatAgentLabel')}</div>
+              <Select value={selectedAgentId} onValueChange={setSelectedAgentId}>
+                <SelectTrigger className="h-9 rounded-lg">
+                  <SelectValue placeholder={t('chatSelectAgent')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {agentOptions.map((agent) => (
+                    <SelectItem key={agent} value={agent}>
+                      {agent}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex-1 min-w-[260px]">
+              <div className="text-[11px] text-gray-500 mb-1">{t('chatSessionLabel')}</div>
+              <div className="h-9 rounded-lg border border-gray-200 bg-white px-3 text-xs text-gray-600 flex items-center truncate">
+                {selectedSessionKey ?? t('chatNoSession')}
+              </div>
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              className="rounded-lg self-end"
+              onClick={handleDeleteSession}
+              disabled={!selectedSession || deleteSession.isPending}
+            >
+              <Trash2 className="h-3.5 w-3.5 mr-1.5" />
+              {t('chatDeleteSession')}
+            </Button>
+          </div>
+          <div ref={threadRef} className="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-5 py-5">
+            {!selectedSessionKey ? (
+              <div className="h-full flex items-center justify-center">
+                <div className="text-center text-gray-500">
+                  <MessageSquareText className="h-8 w-8 mx-auto mb-2 text-gray-300" />
+                  <div className="text-sm font-medium">{t('chatNoSession')}</div>
+                  <div className="text-xs mt-1">{t('chatNoSessionHint')}</div>
+                </div>
+              </div>
+            ) : historyQuery.isLoading ? (
+              <div className="text-sm text-gray-500">{t('chatHistoryLoading')}</div>
+            ) : (
+              <>
+                {mergedMessages.length === 0 ? (
+                  <div className="text-sm text-gray-500">{t('chatNoMessages')}</div>
+                ) : (
+                  <ChatThread messages={mergedMessages} isSending={sendChatTurn.isPending} />
+                )}
+              </>
+            )}
+          </div>
+          <div className="border-t border-gray-200 bg-white p-4">
+            <div className="rounded-xl border border-gray-200 bg-white p-2">
+              <textarea
+                value={draft}
+                onChange={(event) => setDraft(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter' && !event.shiftKey) {
+                    event.preventDefault();
+                    void handleSend();
+                  }
+                }}
+                placeholder={t('chatInputPlaceholder')}
+                className="w-full min-h-[68px] max-h-[220px] resize-y bg-transparent outline-none text-sm px-2 py-1.5 text-gray-800 placeholder:text-gray-400"
+                disabled={sendChatTurn.isPending}
+              />
+              <div className="flex items-center justify-between px-2 pb-1">
+                <div className="text-[11px] text-gray-400">{t('chatInputHint')}</div>
+                <Button
+                  size="sm"
+                  className="rounded-lg"
+                  onClick={() => void handleSend()}
+                  disabled={sendChatTurn.isPending || draft.trim().length === 0}
+                >
+                  <Send className="h-3.5 w-3.5 mr-1.5" />
+                  {sendChatTurn.isPending ? t('chatSending') : t('chatSend')}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+      <ConfirmDialog />
+    </PageLayout>
+  );
+}