nodes (CodeBlock and inline code) are left untouched — the regex
// shouldn't run inside code spans.
function linkifyChildren(children: ReactNode, keyPrefix = 'l'): ReactNode {
const arr = Children.toArray(children);
return arr.map((child, i) => {
if (typeof child === 'string') {
return (
{linkifyPaths(child, `${keyPrefix}-${i}`)}
);
}
if (isValidElement(child)) {
const el = child as ReactElement<{ children?: ReactNode }>;
// Skip inline/block code — paths in code spans aren't link targets.
if (el.type === 'code' || el.type === CodeBlock) return child;
const grandchildren = el.props.children;
if (grandchildren === undefined) return child;
return cloneElement(el, {
key: el.key ?? `linkified-${i}`,
children: linkifyChildren(grandchildren, `${keyPrefix}-${i}`),
});
}
return child;
});
}
interface Props {
message: Message;
sessionChats?: Chat[];
}
function MarkdownBody({ content }: { content: string }) {
return (
<>{children},
code: (props) => {
const { children, className, ...rest } = props as {
children?: unknown;
className?: string;
};
const text = String(children ?? '').replace(/\n$/, '');
const langMatch = /language-([\w-]+)/.exec(className ?? '');
const isBlock = !!langMatch || text.includes('\n');
if (isBlock) {
return
{children as React.ReactNode}
);
},
a: ({ children, href }) => (
{children}
),
ul: ({ children }) => (
{children}
),
ol: ({ children }) => (
{children}
),
li: ({ children }) => {linkifyChildren(children)} ,
p: ({ children }) => (
{linkifyChildren(children)}
),
h1: ({ children }) => {children}
,
h2: ({ children }) => {children}
,
h3: ({ children }) => {children}
,
blockquote: ({ children }) => (
{children}
),
table: ({ children }) => (
{children}
),
th: ({ children }) => (
{children}
),
td: ({ children }) => (
{linkifyChildren(children)}
),
}}
>
{content}
);
}
function StatsLine({ message }: { message: Message }) {
const tokens = message.tokens_used;
if (typeof tokens !== 'number' || tokens <= 0) return null;
const started = message.started_at ? Date.parse(message.started_at) : NaN;
const finished = message.finished_at ? Date.parse(message.finished_at) : NaN;
let tps: number | null = null;
if (!Number.isNaN(started) && !Number.isNaN(finished) && finished > started) {
const seconds = (finished - started) / 1000;
if (seconds > 0) tps = Math.round((tokens / seconds) * 10) / 10;
}
const ctxUsed = message.ctx_used;
const ctxMax = message.ctx_max;
const ctxPart =
typeof ctxUsed === 'number'
? typeof ctxMax === 'number' && ctxMax > 0
? `${ctxUsed} / ${ctxMax} ctx`
: `${ctxUsed} ctx`
: null;
const parts: string[] = [`${tokens} tokens`];
if (tps !== null) parts.push(`${tps.toFixed(1)} tok/s`);
if (ctxPart) parts.push(ctxPart);
return (
{parts.join(' · ')}
);
}
function ActionRow({
message,
}: {
message: Message;
}) {
const [justCopied, setJustCopied] = useState(false);
const [regenerating, setRegenerating] = useState(false);
const [forking, setForking] = useState(false);
const [deleteOpen, setDeleteOpen] = useState(false);
const [deleting, setDeleting] = useState(false);
async function copy() {
try {
await navigator.clipboard.writeText(message.content);
setJustCopied(true);
setTimeout(() => setJustCopied(false), 1200);
} catch (err) {
toast.error(err instanceof Error ? err.message : 'copy failed');
}
}
async function regenerate() {
if (regenerating || message.status === 'streaming') return;
setRegenerating(true);
try {
await api.messages.regenerate(message.chat_id, message.id);
} catch (err) {
toast.error(err instanceof Error ? err.message : 'regenerate failed');
} finally {
setRegenerating(false);
}
}
async function fork() {
if (forking || message.status !== 'complete') return;
setForking(true);
try {
const chat = await api.chats.fork(message.chat_id, { messageId: message.id });
sessionEvents.emit({ type: 'open_chat_in_active_pane', chat_id: chat.id });
} catch (err) {
toast.error(err instanceof Error ? err.message : 'fork failed');
} finally {
setForking(false);
}
}
async function confirmDelete() {
if (deleting) return;
setDeleting(true);
try {
await api.messages.remove(message.chat_id, message.id);
setDeleteOpen(false);
} catch (err) {
toast.error(err instanceof Error ? err.message : 'delete failed');
} finally {
setDeleting(false);
}
}
const isAssistant = message.role === 'assistant';
const canRegen = isAssistant && message.status !== 'streaming';
const canFork = message.status === 'complete';
const canDelete = message.status !== 'streaming';
return (
<>
{isAssistant && (
)}
);
}
function CompactCard({ message, sessionChats }: { message: Message; sessionChats?: Chat[] }) {
const [expanded, setExpanded] = useState(false);
const [copied, setCopied] = useState(false);
const [shareOpen, setShareOpen] = useState(false);
const [rerunning, setRerunning] = useState(false);
const headerMatch = message.content.match(/^\[Context compacted — (\d+) messages summarized\]/);
const headerText = headerMatch ? headerMatch[0] : 'Context compacted';
const summaryText = headerMatch
? message.content.slice(headerMatch[0].length).trim()
: message.content;
async function handleCopy() {
try {
await navigator.clipboard.writeText(summaryText);
setCopied(true);
setTimeout(() => setCopied(false), 1200);
toast.success('Summary copied to clipboard');
} catch {
toast.error('Copy failed');
}
}
async function handleShareToChat(chat: Chat) {
try {
await api.messages.send(chat.id, summaryText);
toast.success(`Summary sent to ${chat.name ?? 'New chat'}`);
setShareOpen(false);
} catch (err) {
toast.error(err instanceof Error ? err.message : 'Failed to share');
}
}
async function handleRerun() {
if (rerunning) return;
setRerunning(true);
try {
await api.chats.compact(message.chat_id);
} catch (err) {
toast.error(err instanceof Error ? err.message : 'Re-run failed');
} finally {
setRerunning(false);
}
}
const otherChats = (sessionChats ?? []).filter(
(c) => c.id !== message.chat_id && c.status === 'open'
);
return (
{shareOpen && (
{otherChats.length === 0 ? (
No other chats in this session
) : (
otherChats.map((c) => (
))
)}
)}
{expanded && (
{summaryText}
)}
);
}
export function MessageBubble({ message, sessionChats }: Props) {
if (message.kind === 'compact') {
return