67 lines
1.5 KiB
TypeScript
67 lines
1.5 KiB
TypeScript
import { Text } from 'ink'
|
|
import { memo, useEffect, useState } from 'react'
|
|
|
|
import { FACES, SPINNER, TOOL_VERBS, VERBS } from '../constants.js'
|
|
import { pick } from '../lib/text.js'
|
|
import type { Theme } from '../theme.js'
|
|
import type { ActiveTool } from '../types.js'
|
|
|
|
function Spinner({ color }: { color: string }) {
|
|
const [i, setI] = useState(0)
|
|
|
|
useEffect(() => {
|
|
const id = setInterval(() => setI(p => (p + 1) % SPINNER.length), 80)
|
|
|
|
return () => clearInterval(id)
|
|
}, [])
|
|
|
|
return <Text color={color}>{SPINNER[i]}</Text>
|
|
}
|
|
|
|
export const Thinking = memo(function Thinking({
|
|
reasoning,
|
|
t,
|
|
tools
|
|
}: {
|
|
reasoning: string
|
|
t: Theme
|
|
tools: ActiveTool[]
|
|
}) {
|
|
const [verb, setVerb] = useState(() => pick(VERBS))
|
|
const [face, setFace] = useState(() => pick(FACES))
|
|
|
|
useEffect(() => {
|
|
const id = setInterval(() => {
|
|
setVerb(pick(VERBS))
|
|
setFace(pick(FACES))
|
|
}, 1100)
|
|
|
|
return () => clearInterval(id)
|
|
}, [])
|
|
|
|
const tail = reasoning.slice(-160).replace(/\n/g, ' ')
|
|
|
|
return (
|
|
<>
|
|
{tools.map(tool => (
|
|
<Text color={t.color.dim} key={tool.id}>
|
|
<Spinner color={t.color.amber} /> {TOOL_VERBS[tool.name] ?? tool.name}
|
|
{tool.context ? `: ${tool.context}` : ''}
|
|
</Text>
|
|
))}
|
|
|
|
{!tools.length && (
|
|
<Text color={t.color.dim}>
|
|
<Spinner color={t.color.dim} /> {face} {verb}…
|
|
</Text>
|
|
)}
|
|
|
|
{tail && (
|
|
<Text color={t.color.dim} dimColor wrap="truncate-end">
|
|
💭 {tail}
|
|
</Text>
|
|
)}
|
|
</>
|
|
)
|
|
})
|