Skip to main content

Add Lex to chats

First let's create a LexContainer.​

LexContainer.tsx
import React, { useMemo } from 'react';

import { ChatBubble, ChatLexOption, ChatLexOptions } from '@neev/ccp-react';
import type { IChatMessageProps } from '@neev/ccp-react';

const ChatLexComponent = (props: IChatMessageProps) => {
  // checking whether the content is JSON
  // if it is JSON, this means it was sent by the LEX bot,
  // which needs to be rendered in a specific way
  const isContentJSON = useMemo(() => {
    try {
      JSON.parse(props.content);
      return true;
    } catch (e) {
      return false;
    }
  }, [props.content]);

  // show normal chat bubble if content isn't JSON
  if (!isContentJSON) return <ChatBubble {...props} />;

  // JSON format can be anything
  // title -> ChatBubble -> content
  // options -> ChatLexOption -> children

  return (
    <section>
      <ChatBubble {...props} content="Choose any" />
      <ChatLexOptions>
        <ChatLexOption>Option 1</ChatLexOption>
        <ChatLexOption>Option 2</ChatLexOption>
      </ChatLexOptions>
    </section>
  );
};

export default ChatLexComponent;

Next we'll pass this LexComponent to our ChatMessages component in our ChatContainer.tsx.​

ChatContainer.tsx
...
  <ChatMessages
    messagesOrEvents={messages}
    attachmentsEnabled={true}
    onAttachmentClicks={
      contact.getState().type === connect.ContactStateType.ENDED ? undefined : getAttachment
    }
    chatMessageComponent={ChatLexComponent}
  />
...

That's it!