MessageList

import { MessageList, useWebchat, Configuration } from '@botpress/webchat'

const { client, messages, isTyping, user } = useWebchat({
  clientId: '$CLIENT_ID$', // Insert your Client ID here
})

const config: Configuration = {
  botName: 'SupportBot',
  botAvatar: 'https://picsum.photos/id/80/400',
  botDescription: 'Your virtual assistant for all things support.',
}

const enrichedMessages: RichMessageObject[] = useMemo(
  () =>
    messages.map((message) => {
      const { authorId } = message
      const direction = authorId === user?.id ? 'outgoing' : 'incoming'
      return {
        ...message,
        direction,
        sender:
          direction === 'outgoing'
            ? { name: user?.name ?? 'You', avatar: user?.pictureUrl }
            : { name: config.botName ?? 'Bot', avatar: config.botAvatar },
      }
    }),
  [config.botAvatar, config.botName, messages, user?.id, user?.name, user?.pictureUrl]
)

function App() {
  return (
    <MessageList
      botAvatar={config.botAvatar}
      botName={config.botName}
      botDescription={config.botDescription}
      isTyping={isTyping}
      showMarquee={true}
      messages={enrichedMessages}
      sendMessage={client?.sendMessage}
    />
  )
}