Simplify assistant message spacing - just add spacer to components

This commit is contained in:
Mario Zechner 2025-11-11 21:51:12 +01:00
parent f5176bb173
commit e2649341f0
3 changed files with 9 additions and 3 deletions

View file

@ -1,18 +1,21 @@
import type { AssistantMessage, Message } from "@mariozechner/pi-ai"; import type { AssistantMessage, Message } from "@mariozechner/pi-ai";
import { Container, Markdown, Text } from "@mariozechner/pi-tui"; import { Container, Markdown, Spacer, Text } from "@mariozechner/pi-tui";
import chalk from "chalk"; import chalk from "chalk";
/** /**
* Component that renders a streaming message with live updates * Component that renders a streaming message with live updates
*/ */
export class StreamingMessageComponent extends Container { export class StreamingMessageComponent extends Container {
private spacer: Spacer;
private markdown: Markdown; private markdown: Markdown;
private statsText: Text; private statsText: Text;
constructor() { constructor() {
super(); super();
this.spacer = new Spacer(1);
this.markdown = new Markdown(""); this.markdown = new Markdown("");
this.statsText = new Text("", 1, 0); this.statsText = new Text("", 1, 0);
this.addChild(this.spacer);
this.addChild(this.markdown); this.addChild(this.markdown);
this.addChild(this.statsText); this.addChild(this.statsText);
} }

View file

@ -199,7 +199,7 @@ export class TuiRenderer {
this.editor.setText(""); this.editor.setText("");
this.ui.requestRender(); this.ui.requestRender();
} else if (event.message.role === "assistant") { } else if (event.message.role === "assistant") {
// Create streaming component for assistant messages // Create streaming component for assistant messages (has its own spacer)
this.streamingComponent = new StreamingMessageComponent(); this.streamingComponent = new StreamingMessageComponent();
this.chatContainer.addChild(this.streamingComponent); this.chatContainer.addChild(this.streamingComponent);
this.streamingComponent.updateContent(event.message); this.streamingComponent.updateContent(event.message);
@ -304,6 +304,9 @@ export class TuiRenderer {
} else if (message.role === "assistant") { } else if (message.role === "assistant") {
const assistantMsg = message as AssistantMessage; const assistantMsg = message as AssistantMessage;
// Add spacer before assistant message
this.chatContainer.addChild(new Spacer(1));
// Render content in order // Render content in order
for (const content of assistantMsg.content) { for (const content of assistantMsg.content) {
if (content.type === "text" && content.text.trim()) { if (content.type === "text" && content.text.trim()) {

View file

@ -210,7 +210,7 @@ export class TUI extends Container {
for (let i = firstChanged; i < newLines.length; i++) { for (let i = firstChanged; i < newLines.length; i++) {
if (i > firstChanged) buffer += "\r\n"; if (i > firstChanged) buffer += "\r\n";
if (visibleWidth(newLines[i]) > width) { if (visibleWidth(newLines[i]) > width) {
throw new Error("Rendered line exceeds terminal width"); throw new Error(`Rendered line ${i} exceeds terminal width\n\n${newLines[i]}`);
} }
buffer += newLines[i]; buffer += newLines[i];
} }