104 lines
2.9 KiB
TypeScript
104 lines
2.9 KiB
TypeScript
import { Ansi, Box, NoSelect, Text } from '@hermes/ink'
|
|
import { memo } from 'react'
|
|
|
|
import { LONG_MSG, ROLE } from '../constants.js'
|
|
import { compactPreview, hasAnsi, isPasteBackedText, stripAnsi, userDisplay } from '../lib/text.js'
|
|
import type { Theme } from '../theme.js'
|
|
import type { DetailsMode, Msg } from '../types.js'
|
|
|
|
import { Md } from './markdown.js'
|
|
import { ToolTrail } from './thinking.js'
|
|
|
|
export const MessageLine = memo(function MessageLine({
|
|
cols,
|
|
compact,
|
|
detailsMode = 'collapsed',
|
|
isStreaming = false,
|
|
msg,
|
|
t
|
|
}: {
|
|
cols: number
|
|
compact?: boolean
|
|
detailsMode?: DetailsMode
|
|
isStreaming?: boolean
|
|
msg: Msg
|
|
t: Theme
|
|
}) {
|
|
if (msg.kind === 'trail' && msg.tools?.length) {
|
|
return detailsMode === 'hidden' ? null : (
|
|
<Box flexDirection="column" marginTop={1}>
|
|
<ToolTrail detailsMode={detailsMode} t={t} trail={msg.tools} />
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
if (msg.role === 'tool') {
|
|
return (
|
|
<Box alignSelf="flex-start" borderColor={t.color.dim} borderStyle="round" marginLeft={3} paddingX={1}>
|
|
<Text color={t.color.dim} wrap="truncate-end">
|
|
{compactPreview(hasAnsi(msg.text) ? stripAnsi(msg.text) : msg.text, Math.max(24, cols - 14)) ||
|
|
'(empty tool result)'}
|
|
</Text>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
const { body, glyph, prefix } = ROLE[msg.role](t)
|
|
const thinking = msg.thinking?.replace(/\n/g, ' ').trim() ?? ''
|
|
const showDetails = detailsMode !== 'hidden' && (Boolean(msg.tools?.length) || Boolean(thinking))
|
|
|
|
const content = (() => {
|
|
if (msg.kind === 'slash') {
|
|
return <Text color={t.color.dim}>{msg.text}</Text>
|
|
}
|
|
|
|
if (msg.role !== 'user' && hasAnsi(msg.text)) {
|
|
return <Ansi>{msg.text}</Ansi>
|
|
}
|
|
|
|
if (msg.role === 'assistant') {
|
|
return isStreaming ? <Text color={body}>{msg.text}</Text> : <Md compact={compact} t={t} text={msg.text} />
|
|
}
|
|
|
|
if (msg.role === 'user' && msg.text.length > LONG_MSG && isPasteBackedText(msg.text)) {
|
|
const [head, ...rest] = userDisplay(msg.text).split('[long message]')
|
|
|
|
return (
|
|
<Text color={body}>
|
|
{head}
|
|
<Text color={t.color.dim} dimColor>
|
|
[long message]
|
|
</Text>
|
|
{rest.join('')}
|
|
</Text>
|
|
)
|
|
}
|
|
|
|
return <Text {...(body ? { color: body } : {})}>{msg.text}</Text>
|
|
})()
|
|
|
|
return (
|
|
<Box
|
|
flexDirection="column"
|
|
marginBottom={msg.role === 'user' ? 1 : 0}
|
|
marginTop={msg.role === 'user' || msg.kind === 'slash' ? 1 : 0}
|
|
>
|
|
{showDetails && (
|
|
<Box flexDirection="column" marginBottom={1}>
|
|
<ToolTrail detailsMode={detailsMode} reasoning={thinking} t={t} trail={msg.tools} />
|
|
</Box>
|
|
)}
|
|
|
|
<Box>
|
|
<NoSelect flexShrink={0} fromLeftEdge width={3}>
|
|
<Text bold={msg.role === 'user'} color={prefix}>
|
|
{glyph}{' '}
|
|
</Text>
|
|
</NoSelect>
|
|
|
|
<Box width={Math.max(20, cols - 5)}>{content}</Box>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
})
|