@steerable/agent-shell-web 0.6.15

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

@@ -0,0 +1,170 @@
+/**
+ * 消息气泡里的 token 渲染契约：发出去的消息要和输入框看到的一致——
+ * `@专家` / `@对话` 渲染成提及卡片，`/技能` / `/mcp__srv__tool` 渲染成工具
+ * 卡片，而路径、URL 这类带斜杠的普通文本必须保持原样。
+ */
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Markdown } from './Markdown';
+import type { McpToolItem, SkillItem } from '@/lib/slash-sources';
+
+afterEach(() => cleanup());
+
+const SKILLS: SkillItem[] = [
+  { name: 'loop', id: '11-loop', displayName: '循环执行', description: '重复执行' },
+  { name: 'goal', id: '10-goal', displayName: '目标跟踪', description: '目标与验收' },
+  { name: 'plan-mode', id: '70-plan-mode', description: '计划模式约束' },
+];
+
+const MCP_TOOLS: McpToolItem[] = [
+  {
+    token: 'mcp__sqlite__query',
+    toolName: 'query',
+    serverKey: 'sqlite',
+    serverName: 'SQLite',
+    description: '执行 SQL',
+  },
+];
+
+function renderMessage(content: string) {
+  render(
+    <Markdown inlineParagraph skills={SKILLS} mcpTools={MCP_TOOLS}>
+      {content}
+    </Markdown>,
+  );
+}
+
+describe('Markdown 消息内的工具 token', () => {
+  it('把行首的技能 token 渲染成琥珀色工具卡片，后续文字保持原样', () => {
+    const { container } = render(
+      <Markdown inlineParagraph skills={SKILLS} mcpTools={MCP_TOOLS}>
+        {'/loop 5分钟说一次你好'}
+      </Markdown>,
+    );
+
+    const chip = container.querySelector('[data-message-tool-chip]');
+    expect(chip).not.toBeNull();
+    expect(chip!.getAttribute('data-tool-type')).toBe('skill');
+    expect(chip!.textContent).toBe('/loop');
+    expect(chip!.className).toContain('amber');
+    expect(container.textContent).toBe('/loop 5分钟说一次你好');
+  });
+
+  it('把 MCP token 渲染成天蓝色工具卡片', () => {
+    const { container } = render(
+      <Markdown inlineParagraph skills={SKILLS} mcpTools={MCP_TOOLS}>
+        {'/mcp__sqlite__query 查一下用户表'}
+      </Markdown>,
+    );
+
+    const chip = container.querySelector('[data-message-tool-chip]');
+    expect(chip!.getAttribute('data-tool-type')).toBe('mcp');
+    expect(chip!.textContent).toBe('/mcp__sqlite__query');
+    expect(chip!.className).toContain('sky');
+  });
+
+  it('句中的技能 token 也成卡片', () => {
+    const { container } = render(
+      <Markdown inlineParagraph skills={SKILLS} mcpTools={MCP_TOOLS}>
+        {'帮我用 /goal 把这件事跟到底'}
+      </Markdown>,
+    );
+
+    const chip = container.querySelector('[data-message-tool-chip]');
+    expect(chip!.textContent).toBe('/goal');
+    expect(container.textContent).toBe('帮我用 /goal 把这件事跟到底');
+  });
+
+  it('路径、URL 与未知 token 保持纯文本', () => {
+    const { container } = render(
+      <Markdown inlineParagraph skills={SKILLS} mcpTools={MCP_TOOLS}>
+        {'看下 /mnt/c 和 /not-a-skill'}
+      </Markdown>,
+    );
+
+    expect(container.querySelector('[data-message-tool-chip]')).toBeNull();
+    expect(container.textContent).toBe('看下 /mnt/c 和 /not-a-skill');
+  });
+
+  it('引擎内部技能不渲染成卡片', () => {
+    const { container } = render(
+      <Markdown inlineParagraph skills={SKILLS} mcpTools={MCP_TOOLS}>
+        {'/plan-mode 试试'}
+      </Markdown>,
+    );
+
+    expect(container.querySelector('[data-message-tool-chip]')).toBeNull();
+  });
+
+  it('@提及与 /工具可以共存', () => {
+    const { container } = render(
+      <Markdown
+        inlineParagraph
+        skills={SKILLS}
+        mcpTools={MCP_TOOLS}
+        agents={[
+          {
+            id: 'a1',
+            slug: 'ops',
+            name: '电脑操作员',
+            icon: null,
+            color: '#2563eb',
+            description: '',
+            rolePrompt: '',
+            isBuiltin: true,
+            sortOrder: 1,
+          },
+        ]}
+      >
+        {'@电脑操作员 用 /loop 每小时跑一次'}
+      </Markdown>,
+    );
+
+    const toolChip = container.querySelector('[data-message-tool-chip]');
+    expect(toolChip!.textContent).toBe('/loop');
+    const mentionChip = container.querySelector('[data-mention-chip]');
+    expect(mentionChip!.getAttribute('data-mention-type')).toBe('agent');
+    expect(screen.getByText('@电脑操作员')).toBeTruthy();
+  });
+
+  it('邮箱与认不出的 @token 保持纯文本', () => {
+    const { container } = render(
+      <Markdown inlineParagraph skills={SKILLS} mcpTools={MCP_TOOLS}>
+        {'发到 a@b.com，参数写 @param'}
+      </Markdown>,
+    );
+
+    expect(container.querySelector('[data-mention-chip]')).toBeNull();
+    expect(container.textContent).toBe('发到 a@b.com，参数写 @param');
+  });
+
+  it('没有传目录时斜杠 token 保持纯文本', () => {
+    const { container } = render(<Markdown inlineParagraph>{'/loop 你好'}</Markdown>);
+    expect(container.querySelector('[data-message-tool-chip]')).toBeNull();
+    expect(container.textContent).toBe('/loop 你好');
+  });
+});
+
+describe('Markdown 消息内的代码块', () => {
+  it('代码块里的斜杠 token 不做替换', () => {
+    const { container } = renderFenced();
+    expect(container.querySelector('[data-message-tool-chip]')).toBeNull();
+    expect(container.textContent).toContain('/loop');
+  });
+
+  function renderFenced() {
+    return render(
+      <Markdown skills={SKILLS} mcpTools={MCP_TOOLS}>
+        {'```\n/loop 5m\n```'}
+      </Markdown>,
+    );
+  }
+});
+
+// 保证渲染入口本身没有在无 token 时改写文本节点
+describe('Markdown 普通文本', () => {
+  it('不含 token 的段落原样渲染', () => {
+    renderMessage('普通一句话，没有任何 token。');
+    expect(screen.getByText('普通一句话，没有任何 token。')).toBeTruthy();
+  });
+});

package/src/components/chat/Markdown.tsx

@@ -0,0 +1,432 @@
+import {
+  cloneElement,
+  createElement,
+  Fragment,
+  isValidElement,
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type ReactNode,
+} from 'react';
+import ReactMarkdown, { type Components } from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import { LuBlocks, LuMessageSquare, LuPlug } from 'react-icons/lu';
+import type { LocalChat, LocalChatAgent } from '@/lib/local-api';
+import {
+  resolveSlashTool,
+  type McpToolItem,
+  type SkillItem,
+} from '@/lib/slash-sources';
+import { PlanTodoList } from './PlanTodoList';
+
+/**
+ * Markdown renderer shared by `UserMessage` and `AssistantMessage`.
+ *
+ * Pinned closely to deeppath's renderer so visual parity holds:
+ *   - GFM tables / strikethrough via `remark-gfm`
+ *   - raw HTML escape via `rehype-raw` (agent backends occasionally emit
+ *     `<sub>` / `<sup>` / `<details>` markup)
+ *   - links open in new tab with `noopener`
+ *   - tables wrap inside a scroll container so wide tables don't blow the
+ *     bubble width
+ *   - blockquote — the backend tool summary uses
+ *       `🔧 \`tool\` ✅`
+ *       `> 参数：…`
+ *       `> 结果：…`
+ *     so blockquote gets a subtle gray left border + indent to read as a
+ *     "tool detail callout" instead of plain text.
+ *   - lists, headings, hr — explicit margins / typography classes so the
+ *     agent's multi-step responses don't collapse into a wall of text.
+ *   - cells get `max-width` + word-break so long unbreakable text doesn't
+ *     stretch the row
+ *   - paragraphs preserve `whitespace: pre-line` so single newlines render
+ *     (matches what users typed)
+ */
+
+const components: Components = {
+  a: (props: ComponentPropsWithoutRef<'a'>) => (
+    <a
+      {...props}
+      className="text-agent-accent hover:underline"
+      target="_blank"
+      rel="noopener noreferrer"
+    />
+  ),
+
+  // ── Block-level typography ────────────────────────────────────────────
+  h1: (props: ComponentPropsWithoutRef<'h1'>) => (
+    <h1
+      {...props}
+      className="mb-2 mt-3 text-base font-semibold text-agent-foreground first:mt-0"
+    />
+  ),
+  h2: (props: ComponentPropsWithoutRef<'h2'>) => (
+    <h2
+      {...props}
+      className="mb-1.5 mt-3 text-[14px] font-semibold text-agent-foreground first:mt-0"
+    />
+  ),
+  h3: (props: ComponentPropsWithoutRef<'h3'>) => (
+    <h3
+      {...props}
+      className="mb-1 mt-2 text-[13px] font-semibold text-agent-foreground first:mt-0"
+    />
+  ),
+  h4: (props: ComponentPropsWithoutRef<'h4'>) => (
+    <h4
+      {...props}
+      className="mb-1 mt-2 text-[13px] font-semibold text-agent-foreground first:mt-0"
+    />
+  ),
+
+  p: (props: ComponentPropsWithoutRef<'p'>) => (
+    <p
+      style={{ whiteSpace: 'pre-line' }}
+      {...props}
+      className="my-1 leading-relaxed"
+    />
+  ),
+
+  // ── Lists ─────────────────────────────────────────────────────────────
+  ul: (props: ComponentPropsWithoutRef<'ul'>) => (
+    <ul {...props} className="my-1.5 list-disc space-y-0.5 pl-5" />
+  ),
+  ol: (props: ComponentPropsWithoutRef<'ol'>) => (
+    <ol {...props} className="my-1.5 list-decimal space-y-0.5 pl-5" />
+  ),
+  li: (props: ComponentPropsWithoutRef<'li'>) => (
+    <li
+      {...props}
+      className="leading-relaxed marker:text-agent-muted-foreground/60"
+    />
+  ),
+
+  // ── Inline emphasis ───────────────────────────────────────────────────
+  strong: (props: ComponentPropsWithoutRef<'strong'>) => (
+    <strong {...props} className="font-semibold text-agent-foreground" />
+  ),
+  em: (props: ComponentPropsWithoutRef<'em'>) => (
+    <em {...props} className="italic" />
+  ),
+
+  // ── Blockquote (backend uses this for `> 参数：` / `> 结果：` lines) ─
+  blockquote: (props: ComponentPropsWithoutRef<'blockquote'>) => (
+    <blockquote
+      {...props}
+      className="my-1.5 border-l-2 border-agent-border bg-agent-muted/40 px-3 py-1 text-[13px] text-agent-muted-foreground [&>p]:my-0"
+    />
+  ),
+
+  // ── Horizontal rule ──────────────────────────────────────────────────
+  hr: (props: ComponentPropsWithoutRef<'hr'>) => (
+    <hr {...props} className="my-3 border-agent-border" />
+  ),
+
+  // ── Tables ───────────────────────────────────────────────────────────
+  table: (props: ComponentPropsWithoutRef<'table'>) => (
+    <div className="my-2 w-full overflow-x-auto rounded-md border border-agent-border">
+      <table {...props} className="w-full border-collapse text-[12px]" />
+    </div>
+  ),
+  thead: (props: ComponentPropsWithoutRef<'thead'>) => (
+    <thead {...props} className="bg-agent-muted/60" />
+  ),
+  th: (props: ComponentPropsWithoutRef<'th'>) => (
+    <th
+      {...props}
+      className="border-b border-agent-border px-2 py-1.5 text-left font-medium text-agent-foreground"
+    />
+  ),
+  td: (props: ComponentPropsWithoutRef<'td'>) => (
+    <td
+      {...props}
+      className="border-b border-agent-border px-2 py-1.5 align-top break-words"
+      style={{ maxWidth: '300px' }}
+    />
+  ),
+
+  // ── Code (inline + block) ─────────────────────────────────────────────
+  code: (props) => {
+    const { children, className, ...rest } = props as ComponentPropsWithoutRef<'code'> & {
+      // react-markdown v9 dropped the `inline` typed prop. Distinguish by
+      // language fence (the only time class is set is for fenced blocks
+      // like ```ts which receive `language-ts`).
+      inline?: boolean;
+    };
+    // ```plan fences (emitted by the plan-mode skill) render as a visual
+    // todolist card instead of a monospace block. The matching <pre>
+    // wrapper is unwrapped below in the `pre` renderer.
+    if (isPlanCodeClass(className)) {
+      return <PlanTodoList content={childrenToText(children)} />;
+    }
+    const isBlock = typeof className === 'string' && className.startsWith('language-');
+    if (isBlock) {
+      return (
+        <code {...rest} className={`${className} font-mono text-[12px]`}>
+          {children}
+        </code>
+      );
+    }
+    return (
+      <code
+        {...rest}
+        className="rounded bg-agent-muted px-1 py-0.5 font-mono text-[0.85em] text-agent-foreground"
+      >
+        {children}
+      </code>
+    );
+  },
+  pre: (props: ComponentPropsWithoutRef<'pre'>) => {
+    // A ```plan fence arrives as <pre><code class="language-plan">…</code></pre>.
+    // The code renderer above already swaps the inner node for PlanTodoList;
+    // here we drop the <pre> shell so the card isn't boxed in a code block.
+    if (containsPlanCode(props.children)) {
+      return <>{props.children}</>;
+    }
+    return (
+      <pre
+        {...props}
+        className="my-2 overflow-x-auto rounded-md border border-agent-border bg-agent-muted/60 p-2.5 text-[12px] leading-relaxed text-agent-foreground"
+      />
+    );
+  },
+};
+
+function isPlanCodeClass(className: unknown): boolean {
+  return typeof className === 'string' && className.split(/\s+/).includes('language-plan');
+}
+
+function containsPlanCode(children: ReactNode): boolean {
+  const nodes = Array.isArray(children) ? children : [children];
+  return nodes.some(
+    (node) =>
+      isValidElement<{ className?: string }>(node) &&
+      isPlanCodeClass(node.props.className),
+  );
+}
+
+function childrenToText(children: ReactNode): string {
+  if (typeof children === 'string') return children;
+  if (Array.isArray(children)) return children.map(childrenToText).join('');
+  if (isValidElement<{ children?: ReactNode }>(children)) {
+    return childrenToText(children.props.children);
+  }
+  return children == null ? '' : String(children);
+}
+
+/** Chip shell shared by @mention and /tool tokens inside a sent message. */
+const CHIP_BASE =
+  'inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded font-medium text-xs select-all align-middle';
+
+/**
+ * Split a text node on both token kinds so a message can carry `@专家` and
+ * `/tool` side by side. Both only open at line start or after whitespace, via
+ * a lookbehind so the leading space stays in the surrounding text: that keeps
+ * paths (`/mnt/c`), URLs and email addresses (`a@b.com`) out of the split.
+ */
+const TOKEN_SPLIT_PATTERN = /(?<=^|\s)(?:(@[^\s@]+)|(\/[^\s/]+))/g;
+
+/** Already-built chips are opaque: decorating them again would nest chips. */
+function isChip(node: ReactNode): boolean {
+  if (!isValidElement(node)) return false;
+  const props = node.props as Record<string, unknown>;
+  return 'data-message-tool-chip' in props || 'data-mention-chip' in props;
+}
+
+function renderTextWithMentions(
+  node: ReactNode,
+  agents: LocalChatAgent[] = [],
+  chats: LocalChat[] = [],
+  skills: SkillItem[] = [],
+  mcpTools: McpToolItem[] = [],
+): ReactNode {
+  if (typeof node === 'string') {
+    const parts = node.split(TOKEN_SPLIT_PATTERN).filter((p) => p !== undefined);
+    if (parts.length === 1) return node;
+
+    return parts.map((part, index) => {
+      if (part.startsWith('/')) {
+        const tool = resolveSlashTool(part.slice(1), skills, mcpTools);
+        if (!tool) return part;
+        return tool.type === 'skill' ? (
+          <span
+            key={index}
+            data-message-tool-chip=""
+            data-tool-type="skill"
+            className={`${CHIP_BASE} bg-amber-500/10 text-amber-600 dark:bg-amber-500/20 dark:text-amber-400 border border-amber-500/20`}
+          >
+            <LuBlocks className="h-3 w-3 shrink-0 text-amber-500" />
+            <span>{part}</span>
+          </span>
+        ) : (
+          <span
+            key={index}
+            data-message-tool-chip=""
+            data-tool-type="mcp"
+            className={`${CHIP_BASE} bg-sky-500/10 text-sky-600 dark:bg-sky-500/20 dark:text-sky-400 border border-sky-500/20`}
+          >
+            <LuPlug className="h-3 w-3 shrink-0 text-sky-500" />
+            <span>{part}</span>
+          </span>
+        );
+      }
+
+      if (part.startsWith('@')) {
+        const name = part.slice(1);
+        const agent = agents.find((a) => a.name === name || a.slug === name);
+        if (agent) {
+          return (
+            <span
+              key={index}
+              data-mention-chip=""
+              data-mention-type="agent"
+              className="inline-flex items-center gap-1.5 mx-0.5 px-1.5 py-0.5 rounded bg-indigo-500/10 text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-400 border border-indigo-500/20 font-medium text-xs select-all align-middle"
+            >
+              <span
+                className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full text-[8px] font-semibold text-white"
+                style={{ backgroundColor: agent.color || '#7c3aed' }}
+              >
+                {agent.name.trim()[0]?.toUpperCase() ?? 'A'}
+              </span>
+              <span>{part}</span>
+            </span>
+          );
+        }
+
+        const chat = chats.find((c) => (c.title || '未命名对话') === name);
+        if (chat) {
+          return (
+            <span
+              key={index}
+              data-mention-chip=""
+              data-mention-type="chat"
+              className="inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400 border border-emerald-500/20 font-medium text-xs select-all align-middle"
+            >
+              <LuMessageSquare className="h-3 w-3 text-emerald-500 shrink-0" />
+              <span>{part}</span>
+            </span>
+          );
+        }
+
+        // 认不出的 @token 保持纯文本：助手回复里的 `@param`、`@media` 之类
+        // 不是提及，套上卡片只会误导。
+        return part;
+      }
+      return part;
+    });
+  }
+
+  if (Array.isArray(node)) {
+    return node.map((child, idx) => (
+      <Fragment key={idx}>
+        {renderTextWithMentions(child, agents, chats, skills, mcpTools)}
+      </Fragment>
+    ));
+  }
+
+  if (isValidElement(node)) {
+    const type = node.type;
+    // Custom components (`typeof type !== 'string'`) are react-markdown's own
+    // renderers; they decorate their children themselves via `withTokens`.
+    if (
+      type === 'code' ||
+      type === 'pre' ||
+      type === 'a' ||
+      typeof type !== 'string' ||
+      isChip(node)
+    ) {
+      return node;
+    }
+    const children = (node.props as any).children;
+    if (children) {
+      return cloneElement(node, {
+        ...node.props,
+        children: renderTextWithMentions(children, agents, chats, skills, mcpTools),
+      } as any);
+    }
+  }
+
+  return node;
+}
+
+interface MarkdownProps {
+  children: string;
+  /** Override the `<p>` renderer (UserMessage uses `<span>` to inline). */
+  inlineParagraph?: boolean;
+  agents?: LocalChatAgent[];
+  chats?: LocalChat[];
+  /** Local skills behind `/name` chips. Omit to leave slash tokens as text. */
+  skills?: SkillItem[];
+  /** MCP tools behind `/mcp__srv__tool` chips. */
+  mcpTools?: McpToolItem[];
+}
+
+/**
+ * Tags whose children can hold raw text. Each gets its own decoration pass
+ * because react-markdown hands every element to a custom renderer, so walking
+ * the tree from the outside stops at the first override.
+ */
+const TOKEN_HOST_TAGS = [
+  'p',
+  'li',
+  'td',
+  'th',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'strong',
+  'em',
+] as const;
+
+function withTokens(
+  base: Components,
+  decorate: (children: ReactNode) => ReactNode,
+): Components {
+  // Indexing `Components` by a 10-tag union blows up TS's union budget
+  // (TS2590), so build the overrides against a flat record.
+  const wrapped = { ...base } as Record<string, ElementType>;
+  for (const tag of TOKEN_HOST_TAGS) {
+    const Renderer = (wrapped[tag] ?? tag) as ElementType;
+    wrapped[tag] = ({ children, ...rest }: { children?: ReactNode }) =>
+      createElement(Renderer, rest, decorate(children));
+  }
+  return wrapped as Components;
+}
+
+export function Markdown({
+  children,
+  inlineParagraph,
+  agents = [],
+  chats = [],
+  skills = [],
+  mcpTools = [],
+}: MarkdownProps) {
+  const baseComponents: Components = inlineParagraph
+    ? {
+        ...components,
+        p: (props: ComponentPropsWithoutRef<'p'>) => (
+          <span style={{ whiteSpace: 'pre-line' }} {...props} />
+        ),
+      }
+    : components;
+
+  const finalComponents = withTokens(baseComponents, (node) =>
+    renderTextWithMentions(node, agents, chats, skills, mcpTools),
+  );
+
+  return (
+    <ReactMarkdown
+      // `singleTilde: false` — GFM 删除线只认 `~~text~~`。remark-gfm 默认还把
+      // 单个 `~`（"约~50%"、"5~10 个"、"~/path"）当删除线开闭符，导致普通
+      // 文本被莫名划掉。GitHub 本站也只渲染双波浪线。
+      remarkPlugins={[[remarkGfm, { singleTilde: false }]]}
+      rehypePlugins={[rehypeRaw]}
+      components={finalComponents}
+    >
+      {children}
+    </ReactMarkdown>
+  );
+}
+
+export default Markdown;