32 lines
1.0 KiB
TypeScript
32 lines
1.0 KiB
TypeScript
|
import { React, h, Box, Text } from './plugins.js';
|
||
|
|
import type { IChatUsage } from './plugins.js';
|
||
|
|
|
||
|
|
interface IStatusBarProps {
|
||
|
|
modelName?: string;
|
||
|
|
usage: IChatUsage;
|
||
|
|
busy: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function StatusBar({ modelName, usage, busy }: IStatusBarProps): React.ReactElement {
|
||
|
|
const children: React.ReactNode[] = [
|
||
|
|
h(Text, { dimColor: true, key: 'model' }, modelName ? `model: ${modelName}` : 'smartchat'),
|
||
|
|
h(Text, { dimColor: true, key: 'sep1' }, ' | '),
|
||
|
|
h(Text, { dimColor: true, key: 'tokens' }, `tokens: ${usage.totalTokens.toLocaleString()}`),
|
||
|
|
h(Text, { dimColor: true, key: 'sep2' }, ' | '),
|
||
|
|
h(Text, { dimColor: true, key: 'turns' }, `turns: ${usage.turns}`),
|
||
|
|
];
|
||
|
|
|
||
|
|
if (busy) {
|
||
|
|
children.push(
|
||
|
|
h(Text, { dimColor: true, key: 'sep3' }, ' | '),
|
||
|
|
h(Text, { color: 'yellow', key: 'thinking' }, 'thinking...'),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return h(
|
||
|
|
Box,
|
||
|
|
{ borderStyle: 'single' as const, borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, paddingX: 1 },
|
||
|
|
...children,
|
||
|
|
);
|
||
|
|
}
|