1.1.4 • Published 12 months ago
@spencerlepine/connect-chat-frontend-components v1.1.4
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>
);
}
}