@renxqoo/renx-code 0.0.2 → 0.0.4

package/src/components/chat/assistant-segment.test.ts

@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest';
+
+import type { ReplySegment } from '../../types/chat';
+import { AssistantSegment } from './assistant-segment';
+
+type ElementLike = {
+  type: unknown;
+  props?: {
+    children?: unknown;
+    [key: string]: unknown;
+  };
+};
+
+const isElementLike = (value: unknown): value is ElementLike => {
+  return (
+    Boolean(value) && typeof value === 'object' && 'type' in (value as Record<string, unknown>)
+  );
+};
+
+const findElementByType = (node: unknown, targetType: string): ElementLike | null => {
+  if (!node) {
+    return null;
+  }
+
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      const match = findElementByType(child, targetType);
+      if (match) {
+        return match;
+      }
+    }
+    return null;
+  }
+
+  if (!isElementLike(node)) {
+    return null;
+  }
+
+  if (typeof node.type === 'function') {
+    return findElementByType(
+      (node.type as (props: object) => unknown)(node.props ?? {}),
+      targetType
+    );
+  }
+
+  if (node.type === targetType) {
+    return node;
+  }
+
+  return findElementByType(node.props?.children, targetType);
+};
+
+describe('AssistantSegment', () => {
+  it('renders text segments with markdown renderable and finalized streaming state', () => {
+    const segment: ReplySegment = {
+      id: '1:text:1',
+      type: 'text',
+      content: '## Summary\n\n| a | b |\n|---|---|\n| 1 | 2 |',
+    };
+
+    const tree = AssistantSegment({ segment, streaming: false });
+    const markdownNode = findElementByType(tree, 'markdown');
+
+    expect(markdownNode).not.toBeNull();
+    expect(markdownNode?.props?.content).toBe(segment.content);
+    expect(markdownNode?.props?.streaming).toBe(false);
+    expect(markdownNode?.props?.conceal).toBe(true);
+    expect(typeof markdownNode?.props?.renderNode).toBe('function');
+  });
+
+  it('renders thinking segments with markdown renderable', () => {
+    const segment: ReplySegment = {
+      id: '1:thinking:1',
+      type: 'thinking',
+      content: '先整理一下结论。',
+    };
+
+    const tree = AssistantSegment({ segment, streaming: true });
+    const markdownNode = findElementByType(tree, 'markdown');
+
+    expect(markdownNode).not.toBeNull();
+    expect(markdownNode?.props?.content).toBe('_Thinking:_ 先整理一下结论。');
+    expect(markdownNode?.props?.streaming).toBe(true);
+  });
+
+  it('renders code segments with the OpenTUI code renderable', () => {
+    const segment: ReplySegment = {
+      id: '1:code:1',
+      type: 'code',
+      content: '{\n  "ok": true\n}',
+    };
+
+    const tree = AssistantSegment({ segment, streaming: false });
+    const codeNode = findElementByType(tree, 'code');
+
+    expect(codeNode).not.toBeNull();
+    expect(codeNode?.props?.filetype).toBe('json');
+  });
+});

package/src/components/chat/assistant-segment.tsx

@@ -0,0 +1,125 @@
+import type { RenderNodeContext, Renderable } from '@opentui/core';
+import type { Token } from 'marked';
+
+import type { ReplySegment } from '../../types/chat';
+import { opencodeMarkdownSyntax, opencodeSubtleMarkdownSyntax } from '../../ui/opencode-markdown';
+import { uiTheme } from '../../ui/theme';
+import { CodeBlock } from './code-block';
+
+type AssistantSegmentProps = {
+  segment: ReplySegment;
+  streaming: boolean;
+};
+
+const markdownTableOptions = {
+  widthMode: 'full' as const,
+  wrapMode: 'word' as const,
+  selectable: true,
+};
+
+type TextBufferRenderableLike = Renderable & {
+  fg?: string;
+  bg?: string;
+  selectionBg?: string;
+  selectionFg?: string;
+};
+
+const patchMarkdownCodeBlockRenderable = (
+  token: Token,
+  context: RenderNodeContext
+): Renderable | null => {
+  const renderable = context.defaultRender();
+  if (!renderable || token.type !== 'code') {
+    return renderable;
+  }
+
+  const textBufferRenderable = renderable as TextBufferRenderableLike;
+  textBufferRenderable.fg = uiTheme.text;
+  textBufferRenderable.bg = uiTheme.codeBlock.bg;
+  textBufferRenderable.selectionBg = uiTheme.codeBlock.selectionBg;
+  textBufferRenderable.selectionFg = uiTheme.codeBlock.selectionText;
+
+  return renderable;
+};
+
+const ThinkingSegment = ({ content, streaming }: { content: string; streaming: boolean }) => {
+  const normalized = content.trim();
+  if (!normalized) {
+    return null;
+  }
+
+  return (
+    <box flexDirection="row">
+      <box width={1} backgroundColor={uiTheme.divider} />
+      <box flexGrow={1} paddingLeft={2}>
+        <markdown
+          streaming={streaming}
+          syntaxStyle={opencodeSubtleMarkdownSyntax}
+          content={`_Thinking:_ ${normalized}`}
+          conceal={true}
+          renderNode={patchMarkdownCodeBlockRenderable}
+          tableOptions={markdownTableOptions}
+        />
+      </box>
+    </box>
+  );
+};
+
+const CodeSegment = ({ content }: { content: string }) => {
+  return (
+    <box>
+      <CodeBlock content={content} />
+    </box>
+  );
+};
+
+const NoteSegment = ({ content }: { content: string }) => {
+  return (
+    <box paddingLeft={3}>
+      <text
+        fg={uiTheme.muted}
+        attributes={uiTheme.typography.note}
+        wrapMode="word"
+        selectable={true}
+      >
+        {content}
+      </text>
+    </box>
+  );
+};
+
+const TextSegment = ({ content, streaming }: { content: string; streaming: boolean }) => {
+  const normalized = content.trim();
+  if (!normalized) {
+    return null;
+  }
+
+  return (
+    <box paddingLeft={3}>
+      <markdown
+        streaming={streaming}
+        syntaxStyle={opencodeMarkdownSyntax}
+        content={normalized}
+        conceal={true}
+        renderNode={patchMarkdownCodeBlockRenderable}
+        tableOptions={markdownTableOptions}
+      />
+    </box>
+  );
+};
+
+export const AssistantSegment = ({ segment, streaming }: AssistantSegmentProps) => {
+  if (segment.type === 'thinking') {
+    return <ThinkingSegment content={segment.content} streaming={streaming} />;
+  }
+
+  if (segment.type === 'code') {
+    return <CodeSegment content={segment.content} />;
+  }
+
+  if (segment.type === 'note') {
+    return <NoteSegment content={segment.content} />;
+  }
+
+  return <TextSegment content={segment.content} streaming={streaming} />;
+};