feat: split apart main.tsx

ui-tui/src/components/messageLine.tsx

@@ -0,0 +1,46 @@
+import { Box, Text } from 'ink'
+
+import { LONG_MSG, ROLE } from '../constants.js'
+import { userDisplay } from '../lib/text.js'
+import type { Theme } from '../theme.js'
+import type { Msg } from '../types.js'
+
+import { Md } from './markdown.js'
+
+export function MessageLine({ compact, msg, t }: { compact?: boolean; msg: Msg; t: Theme }) {
+  const { body, glyph, prefix } = ROLE[msg.role](t)
+
+  const content = (() => {
+    if (msg.role === 'assistant') {
+      return <Md compact={compact} t={t} text={msg.text} />
+    }
+
+    if (msg.role === 'user' && msg.text.length > LONG_MSG) {
+      const displayed = userDisplay(msg.text)
+      const [head, ...rest] = displayed.split('[long message]')
+
+      return (
+        <Text color={body}>
+          {head}
+          <Text color={t.color.dim} dimColor>
+            [long message]
+          </Text>
+          {rest.join('')}
+        </Text>
+      )
+    }
+
+    return <Text color={body}>{msg.text}</Text>
+  })()
+
+  return (
+    <Box>
+      <Box width={3}>
+        <Text bold={msg.role === 'user'} color={prefix}>
+          {glyph}{' '}
+        </Text>
+      </Box>
+      {content}
+    </Box>
+  )
+}