@spencerlepine/connect-chat-frontend-components

Amazon Connect Chat Frontend Components

This package houses the shared frontend components, used across the Amazon Connect messaging products.

Exports CommonJS bundle file, with React 16 components.

Usage

npm install @spencer/amazon-connect-chat-frontend-components@^1.0.0

<RichTextEditor />

import { RichTextEditor } from '@spencer/amazon-connect-chat-frontend-components';

export default function ChatComposer(props) {
  function sendMarkdownMessage(markdownMessage) {
    if (markdownMessage.trim()) {
      addMessage(contactId, {
        text: markdownMessage,
        type: ContentType.MESSAGE_CONTENT_TYPE.TEXT_MARKDOWN
      });
    }
  }

  return (
    <ChatComposerWrapper>
      <RichTextEditor
        allowedFileContentTypes={ATTACHMENT_ACCEPT_CONTENT_TYPES}
        attachmentsEnabled={composerConfig && composerConfig.attachmentsEnabled}
        sendMessage={sendMarkdownMessage}
        sendAttachment={sendAttachmentGivenFile}
        placeholder={placeholder}
        onTyping={throttledOnTyping}
      ></RichTextEditor>
    </ChatComposerWrapper>
  );
}

<RichMessageRenderer />

import { RichMessageRenderer } from '@spencer/amazon-connect-chat-frontend-components';

export class ParticipantMessage extends PureComponent {
  renderContent(textContent, contentType) {
    // ...
    if (contentType === ContentType.MESSAGE_CONTENT_TYPE.TEXT_MARKDOWN) {
      return <RichMessageRenderer content={textContent} />;
    }
    return <PlainTextMessage content={textContent} />;
  }

  render() {
    return (
      <div data-testid="main-message">
        {this.renderContent('**bold message**', 'text/markdown')}
      </div>
    );
  }
}