getcompanion-ai/co-mono
1
0
Fork 0
mirror of https://github.com/getcompanion-ai/co-mono.git synced 2026-04-15 18:01:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix nested background issue in HookMessageComponent

Browse source 
When custom renderer returns a component with its own background,
don't wrap it in another background box. The nested bg resets
were causing padding to lose its background color.
This commit is contained in:
Mario Zechner 2025-12-28 17:08:49 +01:00
parent 41af99cccf
commit 26e1c9d91c
1 changed files with 17 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

22
packages/coding-agent/src/modes/interactive/components/hook-message.ts
View file

@ -1,4 +1,5 @@
import type { TextContent } from "@mariozechner/pi-ai";
import type { Component } from "@mariozechner/pi-tui";
import { Box, Container, Markdown, Spacer, Text } from "@mariozechner/pi-tui";
import type { HookMessageRenderer } from "../../../core/hooks/types.js";
import type { HookMessage } from "../../../core/messages.js";
@ -12,6 +13,7 @@ export class HookMessageComponent extends Container {
private message: HookMessage<unknown>;
private customRenderer?: HookMessageRenderer;
private box: Box;
private customComponent?: Component;
private _expanded = false;
constructor(message: HookMessage<unknown>, customRenderer?: HookMessageRenderer) {
@ -21,9 +23,8 @@ export class HookMessageComponent extends Container {
this.addChild(new Spacer(1));
// Create box with purple background
// Create box with purple background (used for default rendering)
this.box = new Box(1, 1, (t) => theme.bg("customMessageBg", t));
this.addChild(this.box);
this.rebuild();
}
@ -36,14 +37,21 @@ export class HookMessageComponent extends Container {
}
private rebuild(): void {
this.box.clear();
// Remove previous content component
if (this.customComponent) {
this.removeChild(this.customComponent);
this.customComponent = undefined;
}
this.removeChild(this.box);
// Try custom renderer first
// Try custom renderer first - it handles its own styling
if (this.customRenderer) {
try {
const component = this.customRenderer(this.message, { expanded: this._expanded }, theme);
if (component) {
this.box.addChild(component);
// Custom renderer provides its own styled component
this.customComponent = component;
this.addChild(component);
return;
}
} catch {
@ -51,6 +59,10 @@ export class HookMessageComponent extends Container {
}
}
// Default rendering uses our box
this.addChild(this.box);
this.box.clear();
// Default rendering: label + content
const label = theme.fg("customMessageLabel", `\x1b[1m[${this.message.customType}]\x1b[22m`);
this.box.addChild(new Text(label, 0, 0));