npm - @nextclaw/ui - Versions diffs - 0.6.3 → 0.6.5 - Mend

@nextclaw/ui 0.6.3 → 0.6.5

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 (31) 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-Cb9xiqC5.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/vendor-Ylg6Wdt_.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-BiJ2xs5X.css">
+  <script type="module" crossorigin src="/assets/index-DP9xXu9V.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-Dj2ULvht.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-6azf0otP.css">
 </head>
 <body>

package/package.json CHANGED Viewed

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

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

@@ -40,6 +40,34 @@ type ChatConversationPanelProps = {
   queuedCount: number;
 };
+function ChatConversationSkeleton() {
+  return (
+    <section className="flex-1 min-h-0 flex flex-col overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
+      <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar">
+        <div className="mx-auto w-full max-w-[min(1120px,100%)] px-6 py-5">
+          <div className="space-y-4">
+            <div className="h-6 w-48 animate-pulse rounded bg-gray-200" />
+            <div className="h-24 w-[78%] animate-pulse rounded-2xl bg-gray-200/80" />
+            <div className="h-20 w-[62%] animate-pulse rounded-2xl bg-gray-200/80" />
+            <div className="h-28 w-[84%] animate-pulse rounded-2xl bg-gray-200/80" />
+          </div>
+        </div>
+      </div>
+      <div className="border-t border-gray-200/80 bg-white p-4">
+        <div className="mx-auto w-full max-w-[min(1120px,100%)]">
+          <div className="rounded-2xl border border-gray-200 bg-white shadow-card p-4">
+            <div className="h-16 w-full animate-pulse rounded-xl bg-gray-200/80" />
+            <div className="mt-3 flex items-center justify-between">
+              <div className="h-8 w-36 animate-pulse rounded-lg bg-gray-200/80" />
+              <div className="h-8 w-20 animate-pulse rounded-lg bg-gray-200/80" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
 export function ChatConversationPanel({
   isProviderStateResolved,
   modelOptions,
@@ -82,6 +110,10 @@ export function ChatConversationPanel({
     !isAwaitingAssistantOutput &&
     !streamingAssistantText.trim();
+  if (!isProviderStateResolved) {
+    return <ChatConversationSkeleton />;
+  }
   return (
     <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 */}
@@ -134,6 +166,7 @@ export function ChatConversationPanel({
       {/* Enhanced input bar */}
       <ChatInputBar
+        isProviderStateResolved={isProviderStateResolved}
         draft={draft}
         onDraftChange={onDraftChange}
         onSend={onSend}

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

@@ -13,6 +13,7 @@ export type ChatModelOption = {
 };
 type ChatInputBarProps = {
+  isProviderStateResolved: boolean;
   draft: string;
   onDraftChange: (value: string) => void;
   onSend: () => Promise<void> | void;
@@ -33,6 +34,7 @@ type ChatInputBarProps = {
 };
 export function ChatInputBar({
+  isProviderStateResolved,
   draft,
   onDraftChange,
   onSend,
@@ -52,7 +54,9 @@ export function ChatInputBar({
   onSelectedSkillsChange
 }: ChatInputBarProps) {
   const hasModelOptions = modelOptions.length > 0;
-  const inputDisabled = !hasModelOptions && !isSending;
+  const isModelOptionsLoading = !isProviderStateResolved && !hasModelOptions;
+  const isModelOptionsEmpty = isProviderStateResolved && !hasModelOptions;
+  const inputDisabled = (isModelOptionsLoading || isModelOptionsEmpty) && !isSending;
   const selectedModelOption = modelOptions.find((option) => option.value === selectedModel);
   const resolvedStopHint =
     stopDisabledReason === '__preparing__'
@@ -86,10 +90,24 @@ export function ChatInputBar({
                 void onSend();
               }
             }}
-            placeholder={hasModelOptions ? t('chatInputPlaceholder') : t('chatModelNoOptions')}
+            placeholder={
+              isModelOptionsLoading
+                ? ''
+                : hasModelOptions
+                  ? t('chatInputPlaceholder')
+                  : t('chatModelNoOptions')
+            }
             className="w-full min-h-[68px] max-h-[220px] resize-y bg-transparent outline-none text-sm px-4 py-3 text-gray-800 placeholder:text-gray-400"
           />
-          {!hasModelOptions && (
+          {isModelOptionsLoading && (
+            <div className="px-4 pb-2">
+              <div className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
+                <span className="h-3 w-28 animate-pulse rounded bg-gray-200" />
+                <span className="h-3 w-16 animate-pulse rounded bg-gray-200" />
+              </div>
+            </div>
+          )}
+          {isModelOptionsEmpty && (
             <div className="px-4 pb-2">
               <div className="inline-flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-1.5 text-xs text-amber-800">
                 <span>{t('chatModelNoOptions')}</span>
@@ -147,13 +165,23 @@ export function ChatInputBar({
                         {selectedModelOption.providerLabel}/{selectedModelOption.modelLabel}
                       </span>
                     </div>
+                  ) : isModelOptionsLoading ? (
+                    <div className="h-3 w-24 animate-pulse rounded bg-gray-200" />
                   ) : (
                     <SelectValue placeholder={t('chatSelectModel')} />
                   )}
                 </SelectTrigger>
                 <SelectContent className="w-[320px]">
                   {modelOptions.length === 0 && (
-                    <div className="px-3 py-2 text-xs text-gray-500">{t('chatModelNoOptions')}</div>
+                    isModelOptionsLoading ? (
+                      <div className="space-y-2 px-3 py-2">
+                        <div className="h-3 w-36 animate-pulse rounded bg-gray-200" />
+                        <div className="h-3 w-28 animate-pulse rounded bg-gray-200" />
+                        <div className="h-3 w-32 animate-pulse rounded bg-gray-200" />
+                      </div>
+                    ) : (
+                      <div className="px-3 py-2 text-xs text-gray-500">{t('chatModelNoOptions')}</div>
+                    )
                   )}
                   {modelOptions.map((option) => (
                     <SelectItem key={option.value} value={option.value} className="py-2">

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

@@ -1,4 +1,4 @@
-import { useMemo, type ReactNode } from 'react';
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
 import type { SessionEventView, SessionMessageView } from '@/api/types';
 import { cn } from '@/lib/utils';
 import {
@@ -11,10 +11,9 @@ import {
   type ToolCard
 } from '@/lib/chat-message';
 import { formatDateTime, t } from '@/lib/i18n';
-import ReactMarkdown from 'react-markdown';
-import rehypeSanitize from 'rehype-sanitize';
+import ReactMarkdown, { type Components } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { Bot, Clock3, FileSearch, Globe, Search, SendHorizontal, Terminal, User, Wrench } from 'lucide-react';
+import { Bot, Check, Clock3, Copy, FileSearch, Globe, Search, SendHorizontal, Terminal, User, Wrench } from 'lucide-react';
 type ChatThreadProps = {
   events: SessionEventView[];
@@ -24,6 +23,8 @@ type ChatThreadProps = {
 const MARKDOWN_MAX_CHARS = 140_000;
 const TOOL_OUTPUT_PREVIEW_MAX = 220;
+const CODE_LANGUAGE_REGEX = /language-([a-z0-9-]+)/i;
+const SAFE_LINK_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'tel:']);
 type WorkflowToolCard = ToolCard & {
   _workflowStep?: number;
@@ -36,6 +37,91 @@ function trimMarkdown(value: string): string {
   return `${value.slice(0, MARKDOWN_MAX_CHARS)}\n\n…`;
 }
+function flattenNodeText(value: ReactNode): string {
+  if (typeof value === 'string' || typeof value === 'number') {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map(flattenNodeText).join('');
+  }
+  return '';
+}
+function normalizeCodeText(value: ReactNode): string {
+  const content = flattenNodeText(value);
+  return content.endsWith('\n') ? content.slice(0, -1) : content;
+}
+function resolveCodeLanguage(className?: string): string {
+  const match = className ? CODE_LANGUAGE_REGEX.exec(className) : null;
+  return match?.[1]?.toLowerCase() || 'text';
+}
+function resolveSafeHref(href?: string): string | null {
+  if (!href) {
+    return null;
+  }
+  if (href.startsWith('#') || href.startsWith('/') || href.startsWith('./') || href.startsWith('../')) {
+    return href;
+  }
+  try {
+    const url = new URL(href);
+    return SAFE_LINK_PROTOCOLS.has(url.protocol) ? href : null;
+  } catch {
+    return null;
+  }
+}
+function isExternalHref(href: string): boolean {
+  return /^https?:\/\//i.test(href);
+}
+function MarkdownCodeBlock({ className, children }: { className?: string; children: ReactNode }) {
+  const [copied, setCopied] = useState(false);
+  const language = useMemo(() => resolveCodeLanguage(className), [className]);
+  const codeText = useMemo(() => normalizeCodeText(children), [children]);
+  const handleCopy = useCallback(async () => {
+    if (!codeText || typeof navigator === 'undefined' || !navigator.clipboard?.writeText) {
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(codeText);
+      setCopied(true);
+    } catch {
+      setCopied(false);
+    }
+  }, [codeText]);
+  useEffect(() => {
+    if (!copied || typeof window === 'undefined') {
+      return;
+    }
+    const timer = window.setTimeout(() => setCopied(false), 1300);
+    return () => window.clearTimeout(timer);
+  }, [copied]);
+  return (
+    <div className="chat-codeblock">
+      <div className="chat-codeblock-toolbar">
+        <span className="chat-codeblock-language">{language}</span>
+        <button
+          type="button"
+          className="chat-codeblock-copy"
+          onClick={handleCopy}
+          aria-label={copied ? t('chatCodeCopied') : t('chatCodeCopy')}
+        >
+          {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+          <span>{copied ? t('chatCodeCopied') : t('chatCodeCopy')}</span>
+        </button>
+      </div>
+      <pre>
+        <code className={className}>{codeText}</code>
+      </pre>
+    </div>
+  );
+}
 function roleTitle(role: ChatRole): string {
   if (role === 'user') return t('chatRoleUser');
   if (role === 'assistant') return t('chatRoleAssistant');
@@ -91,16 +177,71 @@ function RoleAvatar({ role }: { role: ChatRole }) {
 function MarkdownBlock({ text, role }: { text: string; role: ChatRole }) {
   const isUser = role === 'user';
+  const markdownComponents = useMemo<Components>(() => ({
+    a: ({ href, children, ...props }) => {
+      const safeHref = resolveSafeHref(href);
+      if (!safeHref) {
+        return <span className="chat-link-invalid">{children}</span>;
+      }
+      const external = isExternalHref(safeHref);
+      return (
+        <a
+          {...props}
+          href={safeHref}
+          target={external ? '_blank' : undefined}
+          rel={external ? 'noreferrer noopener' : undefined}
+        >
+          {children}
+        </a>
+      );
+    },
+    table: ({ children, ...props }) => (
+      <div className="chat-table-wrap">
+        <table {...props}>{children}</table>
+      </div>
+    ),
+    input: ({ type, checked, ...props }) => {
+      if (type !== 'checkbox') {
+        return <input {...props} type={type} />;
+      }
+      return (
+        <input
+          {...props}
+          type="checkbox"
+          checked={checked}
+          readOnly
+          disabled
+          className="chat-task-checkbox"
+        />
+      );
+    },
+    img: ({ src, alt, ...props }) => {
+      const safeSrc = resolveSafeHref(src);
+      if (!safeSrc) {
+        return null;
+      }
+      return <img {...props} src={safeSrc} alt={alt || ''} loading="lazy" decoding="async" />;
+    },
+    code: ({ className, children, ...props }) => {
+      const plainText = String(children ?? '');
+      const isInlineCode = !className && !plainText.includes('\n');
+      if (isInlineCode) {
+        return (
+          <code {...props} className={cn('chat-inline-code', className)}>
+            {children}
+          </code>
+        );
+      }
+      return <MarkdownCodeBlock className={className}>{children}</MarkdownCodeBlock>;
+    }
+  }), []);
   return (
     <div className={cn('chat-markdown', isUser ? 'chat-markdown-user' : 'chat-markdown-assistant')}>
       <ReactMarkdown
+        skipHtml
         remarkPlugins={[remarkGfm]}
-        rehypePlugins={[rehypeSanitize]}
-        components={{
-          a: ({ ...props }) => (
-            <a {...props} target="_blank" rel="noreferrer noopener" />
-          )
-        }}
+        components={markdownComponents}
       >
         {trimMarkdown(text)}
       </ReactMarkdown>

package/src/index.css CHANGED Viewed

@@ -184,70 +184,267 @@
 }
 .chat-markdown {
-  font-size: 0.9rem;
-  line-height: 1.6;
+  --md-text: #0f172a;
+  --md-muted: #334155;
+  --md-border: rgba(148, 163, 184, 0.34);
+  --md-link: hsl(var(--primary));
+  --md-inline-code-bg: rgba(15, 23, 42, 0.08);
+  --md-inline-code-color: #1e293b;
+  --md-blockquote-border: rgba(14, 165, 233, 0.45);
+  --md-blockquote-bg: rgba(14, 165, 233, 0.08);
+  --md-code-surface: #0b1220;
+  --md-code-toolbar-bg: rgba(15, 23, 42, 0.56);
+  --md-code-toolbar-border: rgba(148, 163, 184, 0.3);
+  --md-code-text: #e5e7eb;
+  --md-table-head-bg: rgba(148, 163, 184, 0.14);
+  color: var(--md-text);
+  font-size: 0.925rem;
+  line-height: 1.72;
   word-break: break-word;
 }
+.chat-markdown-user {
+  --md-text: rgba(255, 255, 255, 0.97);
+  --md-muted: rgba(219, 234, 254, 0.92);
+  --md-border: rgba(191, 219, 254, 0.35);
+  --md-link: #dbeafe;
+  --md-inline-code-bg: rgba(15, 23, 42, 0.35);
+  --md-inline-code-color: #eff6ff;
+  --md-blockquote-border: rgba(191, 219, 254, 0.8);
+  --md-blockquote-bg: rgba(15, 23, 42, 0.2);
+  --md-code-surface: rgba(2, 6, 23, 0.92);
+  --md-code-toolbar-bg: rgba(2, 6, 23, 0.88);
+  --md-code-toolbar-border: rgba(191, 219, 254, 0.26);
+  --md-code-text: #e2e8f0;
+  --md-table-head-bg: rgba(191, 219, 254, 0.16);
+}
 .chat-markdown > * + * {
-  margin-top: 0.5rem;
+  margin-top: 0.72rem;
+}
+.chat-markdown p,
+.chat-markdown li,
+.chat-markdown blockquote {
+  color: var(--md-text);
 }
 .chat-markdown h1,
 .chat-markdown h2,
-.chat-markdown h3 {
-  font-size: 1rem;
+.chat-markdown h3,
+.chat-markdown h4,
+.chat-markdown h5,
+.chat-markdown h6 {
+  margin: 0.2rem 0 0;
   font-weight: 700;
+  line-height: 1.35;
+  letter-spacing: -0.01em;
+}
+.chat-markdown h1 {
+  font-size: 1.22rem;
+}
+.chat-markdown h2 {
+  font-size: 1.12rem;
+}
+.chat-markdown h3 {
+  font-size: 1.02rem;
+}
+.chat-markdown h4,
+.chat-markdown h5,
+.chat-markdown h6 {
+  font-size: 0.96rem;
 }
 .chat-markdown ul,
 .chat-markdown ol {
-  padding-left: 1.1rem;
+  margin: 0.35rem 0;
+  padding-left: 1.35rem;
+}
+.chat-markdown li + li {
+  margin-top: 0.25rem;
+}
+.chat-markdown li > p {
+  margin: 0;
+}
+.chat-markdown ul.contains-task-list,
+.chat-markdown ol.contains-task-list {
+  list-style: none;
+  padding-left: 0.2rem;
+}
+.chat-markdown li.task-list-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.52rem;
+}
+.chat-markdown .chat-task-checkbox {
+  position: relative;
+  top: 0.2rem;
+  width: 0.92rem;
+  height: 0.92rem;
+  cursor: default;
+}
+.chat-markdown hr {
+  border: 0;
+  border-top: 1px solid var(--md-border);
+  margin: 0.92rem 0;
+}
+.chat-markdown a {
+  color: var(--md-link);
+  text-decoration-line: underline;
+  text-decoration-thickness: 1.2px;
+  text-underline-offset: 2px;
+  word-break: break-all;
+}
+.chat-markdown .chat-link-invalid {
+  color: var(--md-muted);
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
 }
 .chat-markdown code {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  font-size: 0.8rem;
+  font-size: 0.82rem;
 }
+.chat-markdown .chat-inline-code,
 .chat-markdown :not(pre) > code {
-  padding: 0.1rem 0.3rem;
-  border-radius: 0.35rem;
-  background: rgba(148, 163, 184, 0.18);
+  padding: 0.1rem 0.35rem;
+  border-radius: 0.4rem;
+  background: var(--md-inline-code-bg);
+  color: var(--md-inline-code-color);
+  border: 1px solid var(--md-border);
+  font-weight: 520;
+}
+.chat-codeblock {
+  margin: 0.2rem 0 0.1rem;
+  border: 1px solid var(--md-code-toolbar-border);
+  border-radius: 0.78rem;
+  overflow: hidden;
+  background: var(--md-code-surface);
+}
+.chat-codeblock-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.43rem 0.58rem;
+  background: var(--md-code-toolbar-bg);
+  border-bottom: 1px solid var(--md-code-toolbar-border);
+}
+.chat-codeblock-language {
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--md-code-text);
+  opacity: 0.8;
+}
+.chat-codeblock-copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--md-code-text);
+  border: 1px solid var(--md-code-toolbar-border);
+  border-radius: 0.48rem;
+  padding: 0.18rem 0.36rem;
+  background: transparent;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+.chat-codeblock-copy:hover {
+  background: rgba(148, 163, 184, 0.2);
+}
+.chat-codeblock pre {
+  margin: 0;
+  padding: 0.75rem 0.82rem 0.8rem;
+  overflow-x: auto;
+  background: transparent;
+}
+.chat-codeblock code {
+  display: block;
+  min-width: max-content;
+  white-space: pre;
+  line-height: 1.58;
+  color: var(--md-code-text);
 }
-.chat-markdown pre {
+.chat-table-wrap {
+  margin: 0.15rem 0;
+  border: 1px solid var(--md-border);
+  border-radius: 0.72rem;
   overflow-x: auto;
-  border-radius: 0.65rem;
-  padding: 0.65rem 0.75rem;
-  background: rgba(15, 23, 42, 0.9);
-  color: #e2e8f0;
 }
 .chat-markdown table {
   width: 100%;
-  border-collapse: collapse;
-  font-size: 0.8rem;
+  min-width: 420px;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 0.82rem;
+}
+.chat-markdown thead {
+  background: var(--md-table-head-bg);
 }
 .chat-markdown th,
 .chat-markdown td {
-  border: 1px solid rgba(148, 163, 184, 0.3);
-  padding: 0.35rem 0.45rem;
+  padding: 0.45rem 0.58rem;
+  border-bottom: 1px solid var(--md-border);
+  text-align: left;
+  vertical-align: top;
 }
-.chat-markdown blockquote {
-  border-left: 3px solid rgba(148, 163, 184, 0.55);
-  padding-left: 0.65rem;
-  color: rgba(30, 41, 59, 0.85);
+.chat-markdown th + th,
+.chat-markdown td + td {
+  border-left: 1px solid var(--md-border);
 }
-.chat-markdown-user a {
-  color: #dbeafe;
-  text-decoration: underline;
+.chat-markdown tbody tr:last-child td {
+  border-bottom: none;
 }
-.chat-markdown-assistant a {
-  color: hsl(var(--primary));
-  text-decoration: underline;
+.chat-markdown th {
+  font-weight: 650;
+}
+.chat-markdown strong {
+  font-weight: 650;
+}
+.chat-markdown img {
+  max-width: 100%;
+  border-radius: 0.75rem;
+  border: 1px solid var(--md-border);
+}
+.chat-markdown blockquote {
+  margin: 0.2rem 0;
+  border-left: 3px solid var(--md-blockquote-border);
+  border-radius: 0 0.55rem 0.55rem 0;
+  padding: 0.45rem 0.72rem;
+  background: var(--md-blockquote-bg);
+  color: var(--md-muted);
 }

package/src/lib/i18n.ts CHANGED Viewed

@@ -525,6 +525,8 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   chatToolOutput: { zh: '查看输出', en: 'View Output' },
   chatToolNoOutput: { zh: '无输出（执行完成）', en: 'No output (completed)' },
   chatReasoning: { zh: '查看推理内容', en: 'Show reasoning' },
+  chatCodeCopy: { zh: '复制代码', en: 'Copy' },
+  chatCodeCopied: { zh: '已复制', en: 'Copied' },
   // Chat Sidebar (unified)
   chatSidebarNewTask: { zh: '新任务', en: 'New Task' },