@renxqoo/renx-code 0.0.9 → 0.0.10

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

@@ -1,136 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import type { AssistantReply as AssistantReplyType } from '../../types/chat';
-import { uiTheme } from '../../ui/theme';
-import { AssistantSegment } from './assistant-segment';
-import { AssistantToolGroup } from './assistant-tool-group';
-import { buildReplyRenderItems } from './segment-groups';
-
-type AssistantReplyProps = {
-  reply: AssistantReplyType;
-};
-
-export type AssistantReplyUsageItem = {
-  icon: '↓' | '↑';
-  value: string;
-};
-
-const renderStatus = (status: AssistantReplyType['status']) => {
-  if (status === 'streaming') {
-    return 'streaming';
-  }
-  if (status === 'error') {
-    return 'error';
-  }
-  return undefined;
-};
-
-const formatDurationSeconds = (reply: AssistantReplyType, nowMs: number): string => {
-  if (reply.status !== 'streaming') {
-    return reply.durationSeconds.toFixed(1);
-  }
-  if (typeof reply.startedAtMs !== 'number') {
-    return reply.durationSeconds.toFixed(1);
-  }
-  const elapsedSeconds = Math.max(0, (nowMs - reply.startedAtMs) / 1000);
-  return Math.max(reply.durationSeconds, elapsedSeconds).toFixed(1);
-};
-
-const formatTokenCount = (tokens: number): string => {
-  if (tokens >= 1_000_000) {
-    return `${(tokens / 1_000_000).toFixed(2)}M`;
-  }
-  return `${(tokens / 1_000).toFixed(2)}k`;
-};
-
-const normalizeUsageTokens = (tokens: number | undefined): string | undefined => {
-  if (typeof tokens !== 'number' || !Number.isFinite(tokens)) {
-    return undefined;
-  }
-  return formatTokenCount(Math.max(0, Math.round(tokens)));
-};
-
-export const buildUsageItems = (
-  reply: Pick<AssistantReplyType, 'usagePromptTokens' | 'usageCompletionTokens'>
-): AssistantReplyUsageItem[] => {
-  const items: AssistantReplyUsageItem[] = [];
-  const promptTokens = normalizeUsageTokens(reply.usagePromptTokens);
-  const completionTokens = normalizeUsageTokens(reply.usageCompletionTokens);
-
-  if (promptTokens) {
-    items.push({ icon: '↑', value: promptTokens });
-  }
-  if (completionTokens) {
-    items.push({ icon: '↓', value: completionTokens });
-  }
-
-  return items;
-};
-
-export const getCompletionErrorMessage = (reply: AssistantReplyType): string | undefined => {
-  if (reply.status !== 'error' && reply.completionReason !== 'error') {
-    return undefined;
-  }
-
-  const message = reply.completionMessage?.trim();
-  return message ? message : undefined;
-};
-
-export const AssistantReply = ({ reply }: AssistantReplyProps) => {
-  const status = renderStatus(reply.status);
-  const [nowMs, setNowMs] = useState(() => Date.now());
-  const items = buildReplyRenderItems(reply.segments);
-  const isStreaming = reply.status === 'streaming';
-
-  useEffect(() => {
-    if (reply.status !== 'streaming') {
-      return;
-    }
-    const timer = setInterval(() => {
-      setNowMs(Date.now());
-    }, 100);
-    return () => {
-      clearInterval(timer);
-    };
-  }, [reply.status]);
-
-  const durationText = formatDurationSeconds(reply, nowMs);
-  const usageItems = buildUsageItems(reply);
-  const completionErrorMessage = getCompletionErrorMessage(reply);
-
-  return (
-    <box flexDirection="column" gap={1}>
-      {items.map((item, index) =>
-        item.type === 'tool' ? (
-          <AssistantToolGroup
-            key={`tool-group:${item.group.toolCallId}:${index}`}
-            group={item.group}
-          />
-        ) : (
-          <AssistantSegment key={item.segment.id} segment={item.segment} streaming={isStreaming} />
-        )
-      )}
-      {completionErrorMessage ? (
-        <box backgroundColor={uiTheme.surface} paddingX={2} paddingY={1}>
-          <text fg="#c2410c" attributes={uiTheme.typography.body} wrapMode="word">
-            {completionErrorMessage}
-          </text>
-        </box>
-      ) : null}
-      <box flexDirection="row" gap={1} paddingLeft={3}>
-        <text fg={uiTheme.muted} attributes={uiTheme.typography.muted}>
-          <span fg={uiTheme.accent}>▣</span> assistant
-          <span fg={uiTheme.muted}> · {reply.modelLabel}</span>
-          <span fg={uiTheme.muted}> · {durationText}s</span>
-          {usageItems.map(item => (
-            <span key={`${item.icon}:${item.value}`} fg={uiTheme.muted}>
-              {' · '}
-              {item.icon} {item.value}
-            </span>
-          ))}
-          {status ? <span fg={uiTheme.muted}> · {status}</span> : null}
-        </text>
-      </box>
-    </box>
-  );
-};

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

@@ -1,99 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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} />;
-};