npm - @nextclaw/ui - Versions diffs - 0.5.48 → 0.6.1 - Mend

@nextclaw/ui 0.5.48 → 0.6.1

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

package/CHANGELOG.md +18 -0
package/dist/assets/ChannelsList-CkCpHSto.js +1 -0
package/dist/assets/ChatPage-DM4XNsrW.js +32 -0
package/dist/assets/DocBrowser-B5Aqiz6W.js +1 -0
package/dist/assets/MarketplacePage-BIi0bBdW.js +49 -0
package/dist/assets/ModelConfig-BTFiEAxQ.js +1 -0
package/dist/assets/{ProvidersList-BXHpjVtO.js → ProvidersList-cdk1d-G_.js} +1 -1
package/dist/assets/RuntimeConfig-CFqFsXmR.js +1 -0
package/dist/assets/{SecretsConfig-KkgMzdt1.js → SecretsConfig-CIKasCek.js} +2 -2
package/dist/assets/SessionsConfig-mnCLFtbo.js +2 -0
package/dist/assets/{card-D7NY0Szf.js → card-C1BUfR85.js} +1 -1
package/dist/assets/index-Dxas8MJ9.js +2 -0
package/dist/assets/index-P4YzN9iS.css +1 -0
package/dist/assets/{label-Ojs7Al6B.js → label-CwWfYbuj.js} +1 -1
package/dist/assets/{logos-B1qBsCSi.js → logos-DDyjHSEU.js} +1 -1
package/dist/assets/{page-layout-CUMMO0nN.js → page-layout-DKTRKcHL.js} +1 -1
package/dist/assets/provider-models-y4mUDcGF.js +1 -0
package/dist/assets/{switch-BdhS_16-.js → switch-Bi3yeYiC.js} +1 -1
package/dist/assets/{tabs-custom-D261E5EA.js → tabs-custom-HZFNZrc0.js} +1 -1
package/dist/assets/useConfig-CgzVQTZl.js +6 -0
package/dist/assets/{useConfirmDialog-BUKGHDL6.js → useConfirmDialog-DwD21HlD.js} +2 -2
package/dist/assets/{vendor-Dh04PGww.js → vendor-Ylg6Wdt_.js} +84 -69
package/dist/index.html +3 -3
package/package.json +2 -1
package/src/App.tsx +10 -6
package/src/api/config.ts +42 -1
package/src/api/types.ts +29 -0
package/src/components/chat/ChatConversationPanel.tsx +109 -85
package/src/components/chat/ChatInputBar.tsx +245 -0
package/src/components/chat/ChatPage.tsx +365 -187
package/src/components/chat/ChatSidebar.tsx +242 -0
package/src/components/chat/ChatThread.tsx +92 -25
package/src/components/chat/ChatWelcome.tsx +61 -0
package/src/components/chat/SkillsPicker.tsx +137 -0
package/src/components/chat/useChatStreamController.ts +287 -56
package/src/components/config/ChannelForm.tsx +1 -1
package/src/components/config/ChannelsList.tsx +3 -3
package/src/components/config/ModelConfig.tsx +11 -89
package/src/components/config/RuntimeConfig.tsx +29 -1
package/src/components/layout/AppLayout.tsx +42 -6
package/src/components/layout/Sidebar.tsx +68 -62
package/src/components/marketplace/MarketplacePage.tsx +13 -3
package/src/components/ui/popover.tsx +31 -0
package/src/hooks/useConfig.ts +18 -0
package/src/lib/i18n.ts +53 -0
package/src/lib/provider-models.ts +129 -0
package/dist/assets/ChannelsList-C8cguFLc.js +0 -1
package/dist/assets/ChatPage-BkHWNUNR.js +0 -32
package/dist/assets/CronConfig-D-ESQlvk.js +0 -1
package/dist/assets/DocBrowser-B9ZD6pAk.js +0 -1
package/dist/assets/MarketplacePage-Ds_l9KTF.js +0 -49
package/dist/assets/ModelConfig-N1tbLv9b.js +0 -1
package/dist/assets/RuntimeConfig-KsKfkjgv.js +0 -1
package/dist/assets/SessionsConfig-CWBp8IPf.js +0 -2
package/dist/assets/index-BRBYYgR_.js +0 -2
package/dist/assets/index-C5cdRzpO.css +0 -1
package/dist/assets/useConfig-txxbxXnT.js +0 -6

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-BRBYYgR_.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/vendor-Dh04PGww.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-C5cdRzpO.css">
+  <script type="module" crossorigin src="/assets/index-Dxas8MJ9.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-Ylg6Wdt_.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-P4YzN9iS.css">
 </head>
 <body>

package/package.json CHANGED Viewed

@@ -1,12 +1,13 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.5.48",
+  "version": "0.6.1",
   "private": false,
   "type": "module",
   "license": "MIT",
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.1",

package/src/App.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { AppLayout } from '@/components/layout/AppLayout';
 import { useWebSocket } from '@/hooks/useWebSocket';
 import { Toaster } from 'sonner';
-import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
+import { Routes, Route, Navigate } from 'react-router-dom';
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -20,7 +20,6 @@ const ProvidersListPage = lazy(async () => ({ default: (await import('@/componen
 const ChannelsListPage = lazy(async () => ({ default: (await import('@/components/config/ChannelsList')).ChannelsList }));
 const RuntimeConfigPage = lazy(async () => ({ default: (await import('@/components/config/RuntimeConfig')).RuntimeConfig }));
 const SessionsConfigPage = lazy(async () => ({ default: (await import('@/components/config/SessionsConfig')).SessionsConfig }));
-const CronConfigPage = lazy(async () => ({ default: (await import('@/components/config/CronConfig')).CronConfig }));
 const SecretsConfigPage = lazy(async () => ({ default: (await import('@/components/config/SecretsConfig')).SecretsConfig }));
 const MarketplacePage = lazy(async () => ({ default: (await import('@/components/marketplace/MarketplacePage')).MarketplacePage }));
@@ -34,21 +33,26 @@ function LazyRoute({ children }: { children: JSX.Element }) {
 function AppContent() {
   useWebSocket(queryClient); // Initialize WebSocket connection
-  const location = useLocation();
   return (
     <QueryClientProvider client={queryClient}>
       <AppLayout>
-        <div key={location.pathname} className="animate-fade-in w-full h-full">
+        <div className="w-full h-full">
           <Routes>
-            <Route path="/chat" element={<LazyRoute><ChatPage /></LazyRoute>} />
+            <Route path="/chat/skills" element={<Navigate to="/skills" replace />} />
+            <Route path="/chat/cron" element={<Navigate to="/cron" replace />} />
+            <Route path="/chat/:sessionId" element={<LazyRoute><ChatPage view="chat" /></LazyRoute>} />
+            <Route path="/chat" element={<LazyRoute><ChatPage view="chat" /></LazyRoute>} />
+            <Route path="/skills" element={<LazyRoute><ChatPage view="skills" /></LazyRoute>} />
+            <Route path="/cron" element={<LazyRoute><ChatPage view="cron" /></LazyRoute>} />
             <Route path="/model" element={<LazyRoute><ModelConfigPage /></LazyRoute>} />
             <Route path="/providers" element={<LazyRoute><ProvidersListPage /></LazyRoute>} />
             <Route path="/channels" element={<LazyRoute><ChannelsListPage /></LazyRoute>} />
             <Route path="/runtime" element={<LazyRoute><RuntimeConfigPage /></LazyRoute>} />
             <Route path="/sessions" element={<LazyRoute><SessionsConfigPage /></LazyRoute>} />
-            <Route path="/cron" element={<LazyRoute><CronConfigPage /></LazyRoute>} />
             <Route path="/secrets" element={<LazyRoute><SecretsConfigPage /></LazyRoute>} />
+            <Route path="/settings" element={<Navigate to="/model" replace />} />
+            <Route path="/marketplace/skills" element={<Navigate to="/skills" replace />} />
             <Route path="/marketplace" element={<Navigate to="/marketplace/plugins" replace />} />
             <Route path="/marketplace/:type" element={<LazyRoute><MarketplacePage /></LazyRoute>} />
             <Route path="/" element={<Navigate to="/chat" replace />} />

package/src/api/config.ts CHANGED Viewed

@@ -21,6 +21,9 @@ import type {
   SessionPatchUpdate,
   ChatTurnRequest,
   ChatTurnView,
+  ChatCapabilitiesView,
+  ChatTurnStopRequest,
+  ChatTurnStopResult,
   CronListView,
   CronEnableRequest,
   CronRunRequest,
@@ -241,6 +244,32 @@ export async function sendChatTurn(data: ChatTurnRequest): Promise<ChatTurnView>
   return response.data;
 }
+// GET /api/chat/capabilities
+export async function fetchChatCapabilities(params?: { sessionKey?: string; agentId?: string }): Promise<ChatCapabilitiesView> {
+  const query = new URLSearchParams();
+  if (params?.sessionKey?.trim()) {
+    query.set('sessionKey', params.sessionKey.trim());
+  }
+  if (params?.agentId?.trim()) {
+    query.set('agentId', params.agentId.trim());
+  }
+  const suffix = query.toString();
+  const response = await api.get<ChatCapabilitiesView>(suffix ? `/api/chat/capabilities?${suffix}` : '/api/chat/capabilities');
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+// POST /api/chat/turn/stop
+export async function stopChatTurn(data: ChatTurnStopRequest): Promise<ChatTurnStopResult> {
+  const response = await api.post<ChatTurnStopResult>('/api/chat/turn/stop', data);
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
 type ChatTurnStreamOptions = {
   signal?: AbortSignal;
   onReady?: (event: ChatTurnStreamReadyEvent) => void;
@@ -324,11 +353,23 @@ export async function sendChatTurnStream(
         const readyPayload = JSON.parse(parsed.data) as {
           sessionKey?: string;
           requestedAt?: string;
+          runId?: string;
+          stopSupported?: boolean;
+          stopReason?: string;
         };
         options.onReady?.({
           event: 'ready',
           sessionKey: String(readyPayload.sessionKey ?? ''),
-          requestedAt: String(readyPayload.requestedAt ?? '')
+          requestedAt: String(readyPayload.requestedAt ?? ''),
+          ...(typeof readyPayload.runId === 'string' && readyPayload.runId.trim().length > 0
+            ? { runId: readyPayload.runId.trim() }
+            : {}),
+          ...(typeof readyPayload.stopSupported === 'boolean'
+            ? { stopSupported: readyPayload.stopSupported }
+            : {}),
+          ...(typeof readyPayload.stopReason === 'string' && readyPayload.stopReason.trim().length > 0
+            ? { stopReason: readyPayload.stopReason.trim() }
+            : {})
         });
       } catch {
         // ignore malformed ready event payload

package/src/api/types.ts CHANGED Viewed

@@ -74,6 +74,8 @@ export type AgentProfileView = {
   default?: boolean;
   workspace?: string;
   model?: string;
+  engine?: string;
+  engineConfig?: Record<string, unknown>;
   contextTokens?: number;
   maxToolIterations?: number;
 };
@@ -167,10 +169,31 @@ export type ChatTurnView = {
   durationMs: number;
 };
+export type ChatCapabilitiesView = {
+  stopSupported: boolean;
+  stopReason?: string;
+};
+export type ChatTurnStopRequest = {
+  runId: string;
+  sessionKey?: string;
+  agentId?: string;
+};
+export type ChatTurnStopResult = {
+  stopped: boolean;
+  runId: string;
+  sessionKey?: string;
+  reason?: string;
+};
 export type ChatTurnStreamReadyEvent = {
   event: "ready";
   sessionKey: string;
   requestedAt: string;
+  runId?: string;
+  stopSupported?: boolean;
+  stopReason?: string;
 };
 export type ChatTurnStreamDeltaEvent = {
@@ -242,6 +265,8 @@ export type RuntimeConfigUpdate = {
   agents?: {
     defaults?: {
       contextTokens?: number;
+      engine?: string;
+      engineConfig?: Record<string, unknown>;
     };
     list?: AgentProfileView[];
   };
@@ -307,6 +332,8 @@ export type ConfigView = {
     defaults: {
       model: string;
       workspace?: string;
+      engine?: string;
+      engineConfig?: Record<string, unknown>;
       contextTokens?: number;
       maxToolIterations?: number;
     };
@@ -530,6 +557,8 @@ export type MarketplaceInstalledRecord = {
   id?: string;
   spec: string;
   label?: string;
+  description?: string;
+  descriptionZh?: string;
   source?: string;
   installedAt?: string;
   enabled?: boolean;

package/src/components/chat/ChatConversationPanel.tsx CHANGED Viewed

@@ -1,19 +1,27 @@
 import type { MutableRefObject } from 'react';
-import type { SessionEventView } from '@/api/types';
+import type { MarketplaceInstalledRecord, SessionEventView } from '@/api/types';
 import { Button } from '@/components/ui/button';
 import { ChatThread } from '@/components/chat/ChatThread';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { ChatInputBar, type ChatModelOption } from '@/components/chat/ChatInputBar';
+import { ChatWelcome } from '@/components/chat/ChatWelcome';
 import { t } from '@/lib/i18n';
-import { MessageSquareText, Send, Trash2 } from 'lucide-react';
+import { Trash2 } from 'lucide-react';
 type ChatConversationPanelProps = {
-  agentOptions: string[];
-  selectedAgentId: string;
-  onSelectedAgentIdChange: (value: string) => void;
+  modelOptions: ChatModelOption[];
+  selectedModel: string;
+  onSelectedModelChange: (value: string) => void;
+  onGoToProviders: () => void;
+  skillRecords: MarketplaceInstalledRecord[];
+  isSkillsLoading?: boolean;
+  selectedSkills: string[];
+  onSelectedSkillsChange: (next: string[]) => void;
   selectedSessionKey: string | null;
+  sessionDisplayName?: string;
   canDeleteSession: boolean;
   isDeletePending: boolean;
   onDeleteSession: () => void;
+  onCreateSession: () => void;
   threadRef: MutableRefObject<HTMLDivElement | null>;
   onThreadScroll: () => void;
   isHistoryLoading: boolean;
@@ -24,17 +32,28 @@ type ChatConversationPanelProps = {
   draft: string;
   onDraftChange: (value: string) => void;
   onSend: () => Promise<void> | void;
+  onStop: () => Promise<void> | void;
+  canStopGeneration: boolean;
+  stopDisabledReason?: string | null;
+  sendError?: string | null;
   queuedCount: number;
 };
 export function ChatConversationPanel({
-  agentOptions,
-  selectedAgentId,
-  onSelectedAgentIdChange,
+  modelOptions,
+  selectedModel,
+  onSelectedModelChange,
+  onGoToProviders,
+  skillRecords,
+  isSkillsLoading = false,
+  selectedSkills,
+  onSelectedSkillsChange,
   selectedSessionKey,
+  sessionDisplayName,
   canDeleteSession,
   isDeletePending,
   onDeleteSession,
+  onCreateSession,
   threadRef,
   onThreadScroll,
   isHistoryLoading,
@@ -45,104 +64,109 @@ export function ChatConversationPanel({
   draft,
   onDraftChange,
   onSend,
-  queuedCount
+  onStop,
+  canStopGeneration,
+  stopDisabledReason,
+  sendError,
+  queuedCount,
 }: ChatConversationPanelProps) {
-  const showHistoryLoading =
+  const showWelcome = !selectedSessionKey && mergedEvents.length === 0;
+  const hasConfiguredModel = modelOptions.length > 0;
+  const hideEmptyHint =
     isHistoryLoading &&
     mergedEvents.length === 0 &&
     !isSending &&
     !isAwaitingAssistantOutput &&
     !streamingAssistantText.trim();
+  const shouldShowProviderSetup =
+    !hasConfiguredModel &&
+    !selectedSessionKey &&
+    mergedEvents.length === 0 &&
+    !hideEmptyHint &&
+    !isSending;
   return (
-    <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">
-        <div className="grid gap-3 lg:grid-cols-[minmax(220px,300px)_minmax(0,1fr)_auto] items-end">
-          <div className="min-w-0">
-            <div className="text-[11px] text-gray-500 mb-1">{t('chatAgentLabel')}</div>
-            <Select value={selectedAgentId} onValueChange={onSelectedAgentIdChange}>
-              <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="min-w-0">
-            <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>
+    <section className="flex-1 min-h-0 flex flex-col overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
+      {/* Minimal top bar - only shown when session is active */}
+      {selectedSessionKey && (
+        <div className="px-5 py-3 border-b border-gray-200/60 bg-white/80 backdrop-blur-sm flex items-center justify-between shrink-0">
+          <div className="min-w-0 flex-1">
+            <span className="text-sm font-medium text-gray-700 truncate">
+              {sessionDisplayName || selectedSessionKey}
+            </span>
           </div>
           <Button
-            variant="outline"
-            className="rounded-lg"
+            variant="ghost"
+            size="icon"
+            className="rounded-lg shrink-0 text-gray-400 hover:text-destructive"
             onClick={onDeleteSession}
             disabled={!canDeleteSession || isDeletePending}
           >
-            <Trash2 className="h-3.5 w-3.5 mr-1.5" />
-            {t('chatDeleteSession')}
+            <Trash2 className="h-4 w-4" />
           </Button>
         </div>
-      </div>
+      )}
-      <div ref={threadRef} onScroll={onThreadScroll} 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>
+      {!hasConfiguredModel && !showWelcome && (
+        <div className="px-5 py-2.5 border-b border-amber-200/70 bg-amber-50/70 flex items-center justify-between gap-3 shrink-0">
+          <span className="text-xs text-amber-800">{t('chatModelNoOptions')}</span>
+          <button
+            type="button"
+            onClick={onGoToProviders}
+            className="text-xs font-semibold text-amber-900 underline-offset-2 hover:underline"
+          >
+            {t('chatGoConfigureProvider')}
+          </button>
+        </div>
+      )}
+      {/* Message thread or welcome */}
+      <div ref={threadRef} onScroll={onThreadScroll} className="flex-1 min-h-0 overflow-y-auto custom-scrollbar">
+        {showWelcome ? (
+          shouldShowProviderSetup ? (
+            <div className="h-full flex items-center justify-center p-8">
+              <div className="w-full max-w-xl rounded-2xl border border-amber-200 bg-amber-50/70 p-6 text-center">
+                <h2 className="text-lg font-semibold text-amber-900">{t('chatProviderSetupTitle')}</h2>
+                <p className="mt-2 text-sm text-amber-800">{t('chatProviderSetupDescription')}</p>
+                <Button className="mt-4" onClick={onGoToProviders}>
+                  {t('chatGoConfigureProvider')}
+                </Button>
+              </div>
             </div>
-          </div>
-        ) : showHistoryLoading ? (
-          <div className="text-sm text-gray-500">{t('chatHistoryLoading')}</div>
+          ) : (
+            <ChatWelcome onCreateSession={onCreateSession} />
+          )
+        ) : hideEmptyHint ? (
+          <div className="h-full" />
         ) : mergedEvents.length === 0 ? (
-          <div className="text-sm text-gray-500">{t('chatNoMessages')}</div>
+          <div className="px-5 py-5 text-sm text-gray-500">{t('chatNoMessages')}</div>
         ) : (
-          <ChatThread events={mergedEvents} isSending={isSending && isAwaitingAssistantOutput} />
+          <div className="mx-auto w-full max-w-[min(1120px,100%)] px-6 py-5">
+            <ChatThread events={mergedEvents} isSending={isSending && isAwaitingAssistantOutput} />
+          </div>
         )}
       </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) => onDraftChange(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter' && !event.shiftKey) {
-                event.preventDefault();
-                void onSend();
-              }
-            }}
-            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"
-          />
-          <div className="flex items-center justify-between px-2 pb-1">
-            <div className="text-[11px] text-gray-400">
-              {isSending && queuedCount > 0
-                ? `${t('chatQueuedHintPrefix')} ${queuedCount} ${t('chatQueuedHintSuffix')}`
-                : t('chatInputHint')}
-            </div>
-            <Button
-              size="sm"
-              className="rounded-lg"
-              onClick={() => void onSend()}
-              disabled={draft.trim().length === 0}
-            >
-              <Send className="h-3.5 w-3.5 mr-1.5" />
-              {isSending ? t('chatQueueSend') : t('chatSend')}
-            </Button>
-          </div>
-        </div>
-      </div>
+      {/* Enhanced input bar */}
+      <ChatInputBar
+        draft={draft}
+        onDraftChange={onDraftChange}
+        onSend={onSend}
+        onStop={onStop}
+        onGoToProviders={onGoToProviders}
+        canStopGeneration={canStopGeneration}
+        stopDisabledReason={stopDisabledReason}
+        sendError={sendError}
+        isSending={isSending}
+        queuedCount={queuedCount}
+        modelOptions={modelOptions}
+        selectedModel={selectedModel}
+        onSelectedModelChange={onSelectedModelChange}
+        skillRecords={skillRecords}
+        isSkillsLoading={isSkillsLoading}
+        selectedSkills={selectedSkills}
+        onSelectedSkillsChange={onSelectedSkillsChange}
+      />
     </section>
   );
 }