import { Bubble } from '@ant-design/x'
import { GetProp } from 'antd'
import type { AIMessage } from './types'
import MarkdownRender from '@/components/MarkdownRender'
import { useMemo } from 'react'
const renderMarkdown = (content: string) => <MarkdownRender>{content}</MarkdownRender>

const roles: GetProp<typeof Bubble.List, 'roles'> = {
  assistant: {
    placement: 'start',
    typing: { step: 5, interval: 50 },
    messageRender: renderMarkdown,
    styles: { content: { maxWidth: '80%' } },
  },
  user: {
    placement: 'end',
    messageRender: renderMarkdown,
    styles: { content: { maxWidth: '80%' } },
  },
}

export default function AIBubbleList({ messages, style }: { messages: AIMessage[]; style?: React.CSSProperties }) {
  const items = useMemo(() => {
    return messages.map((item: AIMessage) => {
      return {
        key: item.id,
        role: item.role,
        content: item.full_content || item.content,
        loading: item.status === 'loading',
      }
    })
  }, [messages])
  return <Bubble.List roles={roles} items={items} style={style} />
}
