npm - @nextclaw/ui - Versions diffs - 0.5.28 → 0.5.30 - Mend

@nextclaw/ui 0.5.28 → 0.5.30

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 (38) 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-CtNWUrVR.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/vendor-H2M3a_4Z.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-B_OeEGic.css">
+  <script type="module" crossorigin src="/assets/index-BDnLuH5V.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-CrNxGKd2.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-yypHrk9r.css">
 </head>
 <body>

package/package.json CHANGED Viewed

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

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

@@ -94,10 +94,12 @@ export function ChatPage() {
   const [draft, setDraft] = useState('');
   const [selectedSessionKey, setSelectedSessionKey] = useState<string | null>(() => readStoredSessionKey());
   const [selectedAgentId, setSelectedAgentId] = useState('main');
+  const [optimisticUserEvent, setOptimisticUserEvent] = useState<SessionEventView | null>(null);
   const [streamingSessionEvents, setStreamingSessionEvents] = useState<SessionEventView[]>([]);
   const [streamingAssistantText, setStreamingAssistantText] = useState('');
   const [streamingAssistantTimestamp, setStreamingAssistantTimestamp] = useState<string | null>(null);
   const [isSending, setIsSending] = useState(false);
+  const [isAwaitingAssistantOutput, setIsAwaitingAssistantOutput] = useState(false);
   const [queuedMessages, setQueuedMessages] = useState<PendingChatMessage[]>([]);
   const { confirm, ConfirmDialog } = useConfirmDialog();
@@ -152,7 +154,11 @@ export function ChatPage() {
       ? historyData.events
       : buildFallbackEventsFromMessages(historyMessages);
   const mergedEvents = useMemo(() => {
-    const next = [...historyEvents, ...streamingSessionEvents];
+    const next = [...historyEvents];
+    if (optimisticUserEvent) {
+      next.push(optimisticUserEvent);
+    }
+    next.push(...streamingSessionEvents);
     if (streamingAssistantText.trim()) {
       const maxSeq = next.reduce((max, event) => {
         const seq = Number.isFinite(event.seq) ? event.seq : 0;
@@ -170,7 +176,7 @@ export function ChatPage() {
       });
     }
     return next;
-  }, [historyEvents, streamingAssistantText, streamingAssistantTimestamp, streamingSessionEvents]);
+  }, [historyEvents, optimisticUserEvent, streamingAssistantText, streamingAssistantTimestamp, streamingSessionEvents]);
   useEffect(() => {
     if (!selectedSessionKey && filteredSessions.length > 0) {
@@ -214,9 +220,11 @@ export function ChatPage() {
     streamRunIdRef.current += 1;
     setIsSending(false);
     setQueuedMessages([]);
+    setOptimisticUserEvent(null);
     setStreamingSessionEvents([]);
     setStreamingAssistantText('');
     setStreamingAssistantTimestamp(null);
+    setIsAwaitingAssistantOutput(false);
     const next = buildNewSessionKey(selectedAgentId);
     setSelectedSessionKey(next);
   };
@@ -240,9 +248,11 @@ export function ChatPage() {
           streamRunIdRef.current += 1;
           setIsSending(false);
           setQueuedMessages([]);
+          setOptimisticUserEvent(null);
           setStreamingSessionEvents([]);
           setStreamingAssistantText('');
           setStreamingAssistantTimestamp(null);
+          setIsAwaitingAssistantOutput(false);
           setSelectedSessionKey(null);
           await sessionsQuery.refetch();
         }
@@ -257,7 +267,18 @@ export function ChatPage() {
     setStreamingSessionEvents([]);
     setStreamingAssistantText('');
     setStreamingAssistantTimestamp(null);
+    setOptimisticUserEvent({
+      seq: 0,
+      type: 'message.user.optimistic',
+      timestamp: new Date().toISOString(),
+      message: {
+        role: 'user',
+        content: item.message,
+        timestamp: new Date().toISOString()
+      }
+    });
     setIsSending(true);
+    setIsAwaitingAssistantOutput(true);
     try {
       let streamText = '';
@@ -285,11 +306,15 @@ export function ChatPage() {
           }
           streamText += event.delta;
           setStreamingAssistantText(streamText);
+          setIsAwaitingAssistantOutput(false);
         },
         onSessionEvent: (event) => {
           if (runId !== streamRunIdRef.current) {
             return;
           }
+          if (event.data.message?.role === 'user') {
+            setOptimisticUserEvent(null);
+          }
           setStreamingSessionEvents((prev) => {
             const next = [...prev];
             const hit = next.findIndex((item) => item.seq === event.data.seq);
@@ -302,12 +327,14 @@ export function ChatPage() {
           });
           if (event.data.message?.role === 'assistant') {
             setStreamingAssistantText('');
+            setIsAwaitingAssistantOutput(false);
           }
         }
       });
       if (runId !== streamRunIdRef.current) {
         return;
       }
+      setOptimisticUserEvent(null);
       if (result.sessionKey !== item.sessionKey) {
         setSelectedSessionKey(result.sessionKey);
       }
@@ -319,6 +346,7 @@ export function ChatPage() {
       setStreamingSessionEvents([]);
       setStreamingAssistantText('');
       setStreamingAssistantTimestamp(null);
+      setIsAwaitingAssistantOutput(false);
       setIsSending(false);
     } catch {
       if (runId !== streamRunIdRef.current) {
@@ -326,9 +354,11 @@ export function ChatPage() {
       }
       streamRunIdRef.current += 1;
       setIsSending(false);
+      setOptimisticUserEvent(null);
       setStreamingSessionEvents([]);
       setStreamingAssistantText('');
       setStreamingAssistantTimestamp(null);
+      setIsAwaitingAssistantOutput(false);
       if (options?.restoreDraftOnError) {
         setDraft((prev) => prev.trim().length === 0 ? item.message : prev);
       }
@@ -512,14 +542,14 @@ export function ChatPage() {
                   <div className="text-xs mt-1">{t('chatNoSessionHint')}</div>
                 </div>
               </div>
-            ) : historyQuery.isLoading ? (
+            ) : historyQuery.isLoading && mergedEvents.length === 0 && !isSending && !isAwaitingAssistantOutput && !streamingAssistantText.trim() ? (
               <div className="text-sm text-gray-500">{t('chatHistoryLoading')}</div>
             ) : (
               <>
                 {mergedEvents.length === 0 ? (
                   <div className="text-sm text-gray-500">{t('chatNoMessages')}</div>
                 ) : (
-                  <ChatThread events={mergedEvents} isSending={isSending && !streamingAssistantText.trim()} />
+                  <ChatThread events={mergedEvents} isSending={isSending && isAwaitingAssistantOutput} />
                 )}
               </>
             )}

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

@@ -1,27 +1,57 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useConfig, useConfigMeta, useConfigSchema, useUpdateProvider } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { MaskedInput } from '@/components/common/MaskedInput';
 import { KeyValueEditor } from '@/components/common/KeyValueEditor';
+import { StatusDot } from '@/components/ui/status-dot';
 import { t } from '@/lib/i18n';
 import { hintForPath } from '@/lib/config-hints';
 import type { ProviderConfigUpdate } from '@/api/types';
-import { KeyRound, Globe, Hash } from 'lucide-react';
+import { KeyRound, Globe, Hash, RotateCcw } from 'lucide-react';
-export function ProviderForm() {
-  const { providerModal, closeProviderModal } = useUiStore();
+type WireApiType = 'auto' | 'chat' | 'responses';
+type ProviderFormProps = {
+  providerName?: string;
+};
+function normalizeHeaders(input: Record<string, string> | null | undefined): Record<string, string> | null {
+  if (!input) {
+    return null;
+  }
+  const entries = Object.entries(input)
+    .map(([key, value]) => [key.trim(), value] as const)
+    .filter(([key]) => key.length > 0);
+  if (entries.length === 0) {
+    return null;
+  }
+  return Object.fromEntries(entries);
+}
+function headersEqual(
+  left: Record<string, string> | null | undefined,
+  right: Record<string, string> | null | undefined
+): boolean {
+  const a = normalizeHeaders(left);
+  const b = normalizeHeaders(right);
+  if (a === null && b === null) {
+    return true;
+  }
+  if (!a || !b) {
+    return false;
+  }
+  const aEntries = Object.entries(a).sort(([ak], [bk]) => ak.localeCompare(bk));
+  const bEntries = Object.entries(b).sort(([ak], [bk]) => ak.localeCompare(bk));
+  if (aEntries.length !== bEntries.length) {
+    return false;
+  }
+  return aEntries.every(([key, value], index) => key === bEntries[index][0] && value === bEntries[index][1]);
+}
+export function ProviderForm({ providerName }: ProviderFormProps) {
   const { data: config } = useConfig();
   const { data: meta } = useConfigMeta();
   const { data: schema } = useConfigSchema();
@@ -30,174 +60,199 @@ export function ProviderForm() {
   const [apiKey, setApiKey] = useState('');
   const [apiBase, setApiBase] = useState('');
   const [extraHeaders, setExtraHeaders] = useState<Record<string, string> | null>(null);
-  const [wireApi, setWireApi] = useState<'auto' | 'chat' | 'responses'>('auto');
+  const [wireApi, setWireApi] = useState<WireApiType>('auto');
-  const providerName = providerModal.provider;
   const providerSpec = meta?.providers.find((p) => p.name === providerName);
   const providerConfig = providerName ? config?.providers[providerName] : null;
   const uiHints = schema?.uiHints;
   const apiKeyHint = providerName ? hintForPath(`providers.${providerName}.apiKey`, uiHints) : undefined;
   const apiBaseHint = providerName ? hintForPath(`providers.${providerName}.apiBase`, uiHints) : undefined;
   const extraHeadersHint = providerName ? hintForPath(`providers.${providerName}.extraHeaders`, uiHints) : undefined;
   const wireApiHint = providerName ? hintForPath(`providers.${providerName}.wireApi`, uiHints) : undefined;
+  const providerTitle = providerSpec?.displayName || providerName || t('providersSelectPlaceholder');
+  const defaultApiBase = providerSpec?.defaultApiBase || '';
+  const currentApiBase = providerConfig?.apiBase || defaultApiBase;
+  const currentHeaders = normalizeHeaders(providerConfig?.extraHeaders || null);
+  const currentWireApi = (providerConfig?.wireApi || providerSpec?.defaultWireApi || 'auto') as WireApiType;
   useEffect(() => {
-    if (providerConfig) {
-      setApiBase(providerConfig.apiBase || providerSpec?.defaultApiBase || '');
-      setExtraHeaders(providerConfig.extraHeaders || null);
-      setApiKey(''); // Always start with empty for security
-      const nextWireApi =
-        providerConfig.wireApi || providerSpec?.defaultWireApi || 'auto';
-      setWireApi(nextWireApi as 'auto' | 'chat' | 'responses');
+    if (!providerName) {
+      setApiKey('');
+      setApiBase('');
+      setExtraHeaders(null);
+      setWireApi('auto');
+      return;
     }
-  }, [providerConfig, providerSpec]);
+    setApiKey('');
+    setApiBase(currentApiBase);
+    setExtraHeaders(providerConfig?.extraHeaders || null);
+    setWireApi(currentWireApi);
+  }, [providerName, currentApiBase, providerConfig?.extraHeaders, currentWireApi]);
+  const hasChanges = useMemo(() => {
+    if (!providerName) {
+      return false;
+    }
+    const apiKeyChanged = apiKey.trim().length > 0;
+    const apiBaseChanged = apiBase.trim() !== currentApiBase.trim();
+    const headersChanged = !headersEqual(extraHeaders, currentHeaders);
+    const wireApiChanged = providerSpec?.supportsWireApi ? wireApi !== currentWireApi : false;
+    return apiKeyChanged || apiBaseChanged || headersChanged || wireApiChanged;
+  }, [
+    providerName,
+    apiKey,
+    apiBase,
+    currentApiBase,
+    extraHeaders,
+    currentHeaders,
+    providerSpec?.supportsWireApi,
+    wireApi,
+    currentWireApi
+  ]);
+  const resetToDefault = () => {
+    setApiKey('');
+    setApiBase(defaultApiBase);
+    setExtraHeaders(null);
+    setWireApi((providerSpec?.defaultWireApi || 'auto') as WireApiType);
+  };
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+    if (!providerName) {
+      return;
+    }
     const payload: ProviderConfigUpdate = {};
+    const trimmedApiKey = apiKey.trim();
+    const trimmedApiBase = apiBase.trim();
+    const normalizedHeaders = normalizeHeaders(extraHeaders);
-    // Only include apiKey if user has entered something
-    if (apiKey !== '') {
-      payload.apiKey = apiKey;
+    if (trimmedApiKey.length > 0) {
+      payload.apiKey = trimmedApiKey;
     }
-    if (apiBase && apiBase !== providerSpec?.defaultApiBase) {
-      payload.apiBase = apiBase;
+    if (trimmedApiBase !== currentApiBase.trim()) {
+      payload.apiBase = trimmedApiBase.length > 0 && trimmedApiBase !== defaultApiBase ? trimmedApiBase : null;
     }
-    if (extraHeaders && Object.keys(extraHeaders).length > 0) {
-      payload.extraHeaders = extraHeaders;
+    if (!headersEqual(normalizedHeaders, currentHeaders)) {
+      payload.extraHeaders = normalizedHeaders;
     }
-    if (providerSpec?.supportsWireApi) {
-      const currentWireApi =
-        providerConfig?.wireApi || providerSpec.defaultWireApi || 'auto';
-      if (wireApi !== currentWireApi) {
-        payload.wireApi = wireApi;
-      }
+    if (providerSpec?.supportsWireApi && wireApi !== currentWireApi) {
+      payload.wireApi = wireApi;
     }
-    if (!providerName) return;
+    updateProvider.mutate({ provider: providerName, data: payload });
+  };
-    updateProvider.mutate(
-      { provider: providerName, data: payload },
-      { onSuccess: () => closeProviderModal() }
+  if (!providerName || !providerSpec || !providerConfig) {
+    return (
+      <div className="flex min-h-[520px] items-center justify-center rounded-2xl border border-gray-200/70 bg-white px-6 text-center xl:h-[calc(100vh-180px)] xl:min-h-[600px] xl:max-h-[860px]">
+        <div>
+          <h3 className="text-base font-semibold text-gray-900">{t('providersSelectTitle')}</h3>
+          <p className="mt-2 text-sm text-gray-500">{t('providersSelectDescription')}</p>
+        </div>
+      </div>
     );
-  };
+  }
+  const statusLabel = providerConfig.apiKeySet ? t('statusReady') : t('statusSetup');
   return (
-    <Dialog open={providerModal.open} onOpenChange={closeProviderModal}>
-      <DialogContent className="sm:max-w-[500px]">
-        <DialogHeader>
-          <div className="flex items-center gap-3">
-            <div className="h-10 w-10 rounded-xl bg-primary flex items-center justify-center">
-              <KeyRound className="h-5 w-5 text-white" />
-            </div>
-            <div>
-              <DialogTitle>{providerSpec?.displayName || providerName}</DialogTitle>
-              <DialogDescription>{t('providerFormDescription')}</DialogDescription>
-            </div>
+    <div className="flex min-h-[520px] flex-col rounded-2xl border border-gray-200/70 bg-white shadow-card xl:h-[calc(100vh-180px)] xl:min-h-[600px] xl:max-h-[860px]">
+      <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">
+            <h3 className="truncate text-lg font-semibold text-gray-900">{providerTitle}</h3>
+            <p className="mt-1 text-sm text-gray-500">{t('providerFormDescription')}</p>
           </div>
-        </DialogHeader>
+          <StatusDot status={providerConfig.apiKeySet ? 'ready' : 'setup'} label={statusLabel} />
+        </div>
+      </div>
-        <form onSubmit={handleSubmit} className="flex flex-col pt-2">
-          <div className="space-y-5 max-h-[60vh] overflow-y-auto pr-1">
-            <div className="space-y-2.5">
-              <Label htmlFor="apiKey" className="text-sm font-medium text-gray-900 flex items-center gap-2">
-                <KeyRound className="h-3.5 w-3.5 text-gray-500" />
-                {apiKeyHint?.label ?? t('apiKey')}
-              </Label>
-              <MaskedInput
-                id="apiKey"
-                value={apiKey}
-                isSet={providerConfig?.apiKeySet}
-                onChange={(e) => setApiKey(e.target.value)}
-                placeholder={
-                  providerConfig?.apiKeySet
-                    ? t('apiKeySet')
-                    : apiKeyHint?.placeholder ?? t('enterApiKey')
-                }
-                className="rounded-xl"
-              />
-            </div>
-            <div className="space-y-2.5">
-              <Label htmlFor="apiBase" className="text-sm font-medium text-gray-900 flex items-center gap-2">
-                <Globe className="h-3.5 w-3.5 text-gray-500" />
-                {apiBaseHint?.label ?? t('apiBase')}
-              </Label>
-              <Input
-                id="apiBase"
-                type="text"
-                value={apiBase}
-                onChange={(e) => setApiBase(e.target.value)}
-                placeholder={
-                  providerSpec?.defaultApiBase ||
-                  apiBaseHint?.placeholder ||
-                  'https://api.example.com'
-                }
-                className="rounded-xl"
-              />
-              {apiBaseHint?.help && (
-                <p className="text-xs text-gray-500">{apiBaseHint.help}</p>
-              )}
-            </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">
+          <div className="space-y-2.5">
+            <Label htmlFor="apiKey" className="flex items-center gap-2 text-sm font-medium text-gray-900">
+              <KeyRound className="h-3.5 w-3.5 text-gray-500" />
+              {apiKeyHint?.label ?? t('apiKey')}
+            </Label>
+            <MaskedInput
+              id="apiKey"
+              value={apiKey}
+              isSet={providerConfig.apiKeySet}
+              onChange={(e) => setApiKey(e.target.value)}
+              placeholder={providerConfig.apiKeySet ? t('apiKeySet') : apiKeyHint?.placeholder ?? t('enterApiKey')}
+              className="rounded-xl"
+            />
+            <p className="text-xs text-gray-500">{t('leaveBlankToKeepUnchanged')}</p>
+          </div>
-            {providerSpec?.supportsWireApi && (
-              <div className="space-y-2.5">
-                <Label htmlFor="wireApi" className="text-sm font-medium text-gray-900 flex items-center gap-2">
-                  <Hash className="h-3.5 w-3.5 text-gray-500" />
-                  {wireApiHint?.label ?? t('wireApi')}
-                </Label>
-                <Select value={wireApi} onValueChange={(v) => setWireApi(v as 'auto' | 'chat' | 'responses')}>
-                  <SelectTrigger className="rounded-xl">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {(providerSpec.wireApiOptions || ['auto', 'chat', 'responses']).map((option) => (
-                      <SelectItem key={option} value={option}>
-                        {option === 'chat'
-                          ? t('wireApiChat')
-                          : option === 'responses'
-                            ? t('wireApiResponses')
-                            : t('wireApiAuto')}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            )}
+          <div className="space-y-2.5">
+            <Label htmlFor="apiBase" className="flex items-center gap-2 text-sm font-medium text-gray-900">
+              <Globe className="h-3.5 w-3.5 text-gray-500" />
+              {apiBaseHint?.label ?? t('apiBase')}
+            </Label>
+            <Input
+              id="apiBase"
+              type="text"
+              value={apiBase}
+              onChange={(e) => setApiBase(e.target.value)}
+              placeholder={defaultApiBase || apiBaseHint?.placeholder || 'https://api.example.com'}
+              className="rounded-xl"
+            />
+            <p className="text-xs text-gray-500">{apiBaseHint?.help || t('providerApiBaseHelp')}</p>
+          </div>
+          {providerSpec.supportsWireApi && (
             <div className="space-y-2.5">
-              <Label className="text-sm font-medium text-gray-900 flex items-center gap-2">
+              <Label htmlFor="wireApi" className="flex items-center gap-2 text-sm font-medium text-gray-900">
                 <Hash className="h-3.5 w-3.5 text-gray-500" />
-                {extraHeadersHint?.label ?? t('extraHeaders')}
+                {wireApiHint?.label ?? t('wireApi')}
               </Label>
-              <KeyValueEditor
-                value={extraHeaders}
-                onChange={setExtraHeaders}
-              />
+              <Select value={wireApi} onValueChange={(v) => setWireApi(v as WireApiType)}>
+                <SelectTrigger className="rounded-xl">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {(providerSpec.wireApiOptions || ['auto', 'chat', 'responses']).map((option) => (
+                    <SelectItem key={option} value={option}>
+                      {option === 'chat' ? t('wireApiChat') : option === 'responses' ? t('wireApiResponses') : t('wireApiAuto')}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {wireApiHint?.help && <p className="text-xs text-gray-500">{wireApiHint.help}</p>}
             </div>
+          )}
+          <div className="space-y-2.5">
+            <Label className="flex items-center gap-2 text-sm font-medium text-gray-900">
+              <Hash className="h-3.5 w-3.5 text-gray-500" />
+              {extraHeadersHint?.label ?? t('extraHeaders')}
+            </Label>
+            <KeyValueEditor value={extraHeaders} onChange={setExtraHeaders} />
+            <p className="text-xs text-gray-500">{extraHeadersHint?.help || t('providerExtraHeadersHelp')}</p>
           </div>
+        </div>
-          <DialogFooter className="pt-4 flex-shrink-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={closeProviderModal}
-            >
-              {t('cancel')}
-            </Button>
-            <Button
-              type="submit"
-              disabled={updateProvider.isPending}
-            >
-              {updateProvider.isPending ? t('saving') : t('save')}
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
+        <div className="flex flex-wrap items-center justify-between gap-3 border-t border-gray-100 px-6 py-4">
+          <Button type="button" variant="outline" onClick={resetToDefault}>
+            <RotateCcw className="mr-2 h-4 w-4" />
+            {t('resetToDefault')}
+          </Button>
+          <Button type="submit" disabled={updateProvider.isPending || !hasChanges}>
+            {updateProvider.isPending ? t('saving') : hasChanges ? t('save') : t('unchanged')}
+          </Button>
+        </div>
+      </form>
+    </div>
   );
 }