1  import { Box, Text } from 'ink'
 2  import * as React from 'react'
 3  import { getTheme } from '../../utils/theme.js'
 4  import { extractTag } from '../../utils/messages.js'
 5  import { TextBlockParam } from '@anthropic-ai/sdk/resources/index.mjs'
 6  
 7  type Props = {
 8    addMargin: boolean
 9    param: TextBlockParam
10  }
11  
12  export function UserCommandMessage({
13    addMargin,
14    param: { text },
15  }: Props): React.ReactNode {
16    const commandMessage = extractTag(text, 'command-message')
17    const args = extractTag(text, 'command-args')
18    if (!commandMessage) {
19      return null
20    }
21  
22    const theme = getTheme()
23    return (
24      <Box flexDirection="column" marginTop={addMargin ? 1 : 0} width="100%">
25        <Text color={theme.secondaryText}>
26          &gt; /{commandMessage} {args}
27        </Text>
28      </Box>
29    )
30  }