can1357
d0d5b547ff
- Added atomicTokenPattern support to treat image and paste markers as indivisible tokens, enabling atomic deletion on backspace and forward-delete instead of character-by-character removal. - Extended image marker format to include pixel dimensions [Image #N, WxH] and updated paste marker format to [Paste #N, +X lines] or [Paste #N, Y chars] with consistent comma-separated metadata. - Implemented accent styling for paste markers in editor rendering while preserving hyperlinks for image markers, improving visual distinction between marker types. - Refactored image reference handling to unified placeholder system supporting both image and paste markers with kind-aware rendering callbacks and regex patterns.
55 lines
2.2 KiB
TypeScript
55 lines
2.2 KiB
TypeScript
import { Container, Markdown } from "@oh-my-pi/pi-tui";
|
|
import { getMarkdownTheme, theme } from "../../modes/theme/theme";
|
|
import { imageReferenceHyperlink, renderPlaceholders } from "../image-references";
|
|
import { highlightMagicKeywords } from "../magic-keywords";
|
|
|
|
// OSC 133 shell integration: marks prompt zones for terminal multiplexers
|
|
const OSC133_ZONE_START = "\x1b]133;A\x07";
|
|
const OSC133_ZONE_END = "\x1b]133;B\x07";
|
|
const OSC133_ZONE_FINAL = "\x1b]133;C\x07";
|
|
|
|
/**
|
|
* Component that renders a user message
|
|
*/
|
|
export class UserMessageComponent extends Container {
|
|
constructor(text: string, synthetic = false, imageLinks?: readonly (string | undefined)[]) {
|
|
super();
|
|
const bgColor = (value: string) => theme.bg("userMessageBg", value);
|
|
// Paint the magic keywords ("ultrathink"/"orchestrate"/"workflowz") inside the rendered
|
|
// bubble too — matching the live editor glow. The Markdown component routes code spans and
|
|
// fenced blocks through its own code styling (never `color`), so those are already excluded;
|
|
// `highlightMagicKeywords` additionally restores the bubble's own foreground after each
|
|
// painted keyword so the gradient never bleeds into the rest of the line.
|
|
const keywordReset = theme.getFgAnsi("userMessageText") || "\x1b[39m";
|
|
const baseText = synthetic
|
|
? (value: string) => theme.fg("dim", value)
|
|
: (value: string) => theme.fg("userMessageText", highlightMagicKeywords(value, keywordReset));
|
|
const imageLabel = (value: string) => theme.fg("accent", `\x1b[1m\x1b[4m${value}\x1b[24m\x1b[22m`);
|
|
const color = (value: string) =>
|
|
renderPlaceholders(value, {
|
|
renderText: baseText,
|
|
renderReference: (label, kind, index) =>
|
|
kind === "image"
|
|
? imageReferenceHyperlink(label, index, imageLinks, imageLabel)
|
|
: theme.fg("accent", `\x1b[1m${label}\x1b[22m`),
|
|
});
|
|
this.addChild(
|
|
new Markdown(text, 1, 1, getMarkdownTheme(), {
|
|
bgColor,
|
|
color,
|
|
}),
|
|
);
|
|
}
|
|
|
|
override render(width: number): string[] {
|
|
const lines = super.render(width);
|
|
if (lines.length === 0) {
|
|
return lines;
|
|
}
|
|
|
|
lines[0] = OSC133_ZONE_START + lines[0];
|
|
lines[lines.length - 1] = lines[lines.length - 1] + OSC133_ZONE_END + OSC133_ZONE_FINAL;
|
|
return lines;
|
|
}
|
|
}
|