[#852] Add google rich text to render library (#902)

lib/typescript/render/components/RichText/index.module.scss

@@ -0,0 +1,59 @@
+@import 'assets/scss/fonts.scss';
+@import 'assets/scss/colors.scss';
+
+.container {
+  display: flex;
+  align-self: flex-end;
+  width: 100%;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  margin: 6px 8px 0 0;
+}
+
+.userContainer {
+  display: flex;
+  flex-direction: row;
+}
+
+.user {
+  align-self: flex-start;
+  text-align: left;
+  position: relative;
+}
+
+.userText {
+  display: inline-flex;
+  padding: 10px;
+  margin-top: 5px;
+  background: var(--color-background-blue);
+  color: var(--color-text-contrast);
+  border-radius: 8px;
+}
+
+.member {
+  margin-top: 5px;
+  justify-content: flex-end;
+  width: 100%;
+  text-align: right;
+}
+
+.memberText {
+  display: inline-flex;
+  padding: 10px;
+  position: relative;
+  background: var(--color-airy-blue);
+  color: white;
+  position: relative;
+  text-align: left;
+  border-radius: 8px;
+}
+
+.time {
+  @include font-s;
+  color: var(--color-text-gray);
+}

lib/typescript/render/components/RichText/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styles from './index.module.scss';
+import {Avatar} from '../Avatar';
+import {Message} from 'httpclient';
+import {DefaultMessageRenderingProps} from '..';
+
+type RichTextRenderProps = DefaultMessageRenderingProps & {
+  message: Message;
+  text: string;
+  fallback: string;
+  containsRichText: boolean;
+};
+
+export const RichText = (props: RichTextRenderProps) => {
+  const {message, text, fallback, containsRichText, fromContact, sentAt, contact} = props;
+
+  return (
+    <div className={styles.container} id={`message-item-${message.id}`}>
+      {!fromContact ? (
+        <div className={styles.member}>
+          <div className={styles.memberText}>{containsRichText ? text : fallback}</div>
+          {sentAt && <div className={styles.time}>{sentAt}</div>}
+        </div>
+      ) : (
+        <div className={styles.userContainer}>
+          <div className={styles.avatar}>{contact && <Avatar contact={contact} />}</div>
+          <div className={styles.user}>
+            <div className={styles.userText}>{containsRichText ? text : fallback}</div>
+            {sentAt && <div className={styles.time}>{sentAt}</div>}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

lib/typescript/render/providers/chatplugin/ChatPluginRender.tsx

@@ -1,18 +1,32 @@
 import React from 'react';
-import {Message} from '../../../httpclient/model';
 import {getDefaultMessageRenderingProps, MessageRenderProps} from '../../shared';
+import {RichText} from '../../components/RichText';
 import {RichCard} from '../../components/RichCard';
-import {ContentUnion} from './chatPluginModel';
 import {Text} from '../../components/Text';
+import {ContentUnion} from './chatPluginModel';
+import {Message, isFromContact} from 'httpclient';
 
 export const ChatPluginRender = (props: MessageRenderProps) => {
-  return render(mapContent(props.message), props);
+  const {message} = props;
+
+  return render(mapContent(message), props);
 };
 
 function render(content: ContentUnion, props: MessageRenderProps) {
+  const messageContent = JSON.parse(props.message.content);
   switch (content.type) {
     case 'text':
       return <Text {...getDefaultMessageRenderingProps(props)} text={content.text} />;
+    case 'richText':
+      return (
+        <RichText
+          {...getDefaultMessageRenderingProps(props)}
+          message={props.message}
+          text={messageContent.text}
+          fallback={messageContent.fallback}
+          containsRichText={messageContent.containsRichText}
+        />
+      );
     case 'richCard':
       return (
         <RichCard
@@ -23,19 +37,21 @@ function render(content: ContentUnion, props: MessageRenderProps) {
           suggestions={content.suggestions}
         />
       );
+
+    // TODO render more chatplugin models
   }
 }
 
 function mapContent(message: Message): ContentUnion {
   const messageContent = JSON.parse(message.content);
-
-  if (messageContent.text) {
+  if (messageContent.containsRichText) {
     return {
-      type: 'text',
-      text: JSON.parse(message.content).text,
+      type: 'richText',
+      text: messageContent.text,
+      fallback: messageContent.fallback,
+      containsRichtText: messageContent.containsRichText,
     };
   }
-
   if (messageContent.richCard) {
     const {
       richCard: {
@@ -50,5 +66,10 @@ function mapContent(message: Message): ContentUnion {
       media: cardContent.media,
       suggestions: cardContent.suggestions,
     };
+  } else {
+    return {
+      type: 'text',
+      text: messageContent.text,
+    };
   }
 }

lib/typescript/render/providers/chatplugin/chatPluginModel.ts

@@ -1,12 +1,19 @@
 export interface Content {
-  type: 'text' | 'richCard';
+  type: 'text' | 'richText' | 'richCard';
 }
 
 export interface TextContent extends Content {
   type: 'text';
   text: string;
 }
 
+export interface RichTextContent extends Content {
+  type: 'richText';
+  text: string;
+  fallback: string;
+  containsRichtText: boolean;
+}
+
 export enum MediaHeight {
   short = 'SHORT',
   medium = 'MEDIUM',
@@ -41,4 +48,6 @@ export interface RichCardContent extends Content {
   ];
 }
 
-export type ContentUnion = TextContent | RichCardContent;
+// TODO add a new chatplugin content model here
+
+export type ContentUnion = TextContent | RichTextContent | RichCardContent;