feat: markdown serializer (CT-000) (#66)

packages/react-chat/package.json

@@ -10,14 +10,15 @@
     "@stitches/react": "^1.2.8",
     "@voiceflow/base-types": "2.85.0",
     "@voiceflow/sdk-runtime": "1.7.0",
-    "@voiceflow/slate-serializer": "1.2.2",
+    "@voiceflow/slate-serializer": "1.5.1",
     "@voiceflow/voiceflow-types": "3.24.0",
     "bowser": "^2.11.0",
     "chroma-js": "2.4.2",
     "clsx": "1.2.1",
     "csstype": "3.1.0",
     "cuid": "^2.1.8",
     "dayjs": "^1.11.5",
+    "markdown-to-jsx": "^7.3.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "remeda": "^1.0.1",

packages/react-chat/src/components/SystemResponse/SystemMessage.tsx

@@ -1,4 +1,3 @@
-import { serializeToJSX } from '@voiceflow/slate-serializer/jsx';
 import { useRef } from 'react';
 import * as R from 'remeda';
 import { match } from 'ts-pattern';
@@ -7,7 +6,7 @@ import Avatar from '@/components/Avatar';
 import Card from '@/components/Card';
 import Carousel from '@/components/Carousel';
 import Image from '@/components/Image';
-import Message from '@/components/Message';
+import Text from '@/components/Text';
 import Timestamp from '@/components/Timestamp';
 
 import Feedback, { FeedbackProps } from '../Feedback';
@@ -60,9 +59,7 @@ const SystemMessage: React.FC<SystemMessageProps> = ({ avatar, feedback, timesta
         <List>
           {children ??
             match(message)
-              .with({ type: MessageType.TEXT }, ({ text }) => (
-                <Message from="system">{typeof text === 'string' ? text : serializeToJSX(text)}</Message>
-              ))
+              .with({ type: MessageType.TEXT }, ({ text }) => <Text text={text} />)
               .with({ type: MessageType.IMAGE }, ({ url }) => <Image image={url} />)
               .with({ type: MessageType.CARD }, (props) => <Card {...R.omit(props, ['type'])} />)
               .with({ type: MessageType.CAROUSEL }, (props) => (

packages/react-chat/src/components/Text/Default.tsx

@@ -0,0 +1,24 @@
+import { serializeToMarkdown } from '@voiceflow/slate-serializer/markdown';
+import React from 'react';
+
+import Message from '@/components/Message';
+import type { TextMessageProps } from '@/components/SystemResponse/types';
+
+import Markdown from './Markdown';
+
+export interface DefaultTextProps {
+  /**
+   * text whether in string or slate format
+   */
+  text: TextMessageProps['text'];
+}
+
+const DefaultText: React.FC<DefaultTextProps> = ({ text }) => {
+  return (
+    <Message from="system">
+      <Markdown>{typeof text === 'string' ? text : serializeToMarkdown(text)}</Markdown>
+    </Message>
+  );
+};
+
+export default DefaultText;

packages/react-chat/src/components/Text/Image.story.tsx

@@ -0,0 +1,21 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import Image from '.';
+
+export default {
+  title: 'Core/Image',
+  component: Image,
+  args: {
+    image: 'https://source.unsplash.com/featured/248x200',
+    isRounded: true,
+  },
+} as ComponentMeta<typeof Image>;
+
+const Template: ComponentStory<typeof Image> = (args) => <Image {...args} />;
+
+export const RoundCorners = Template.bind({});
+
+export const StraightCorners = Template.bind({});
+StraightCorners.args = {
+  isRounded: false,
+};

packages/react-chat/src/components/Text/Markdown.tsx

@@ -0,0 +1,51 @@
+import Markdown, { MarkdownToJSX } from 'markdown-to-jsx';
+
+import { styled } from '@/styles';
+
+const MarkdownText = styled(Markdown, {
+  '*': {
+    whiteSpace: 'pre-wrap',
+  },
+  blockquote: {
+    marginLeft: 0,
+    paddingLeft: '$4',
+    borderLeft: '3px solid $medGrey',
+  },
+  code: {
+    color: '#e83e8c',
+  },
+  p: {
+    marginTop: 0,
+  },
+  'img,video': {
+    maxWidth: '100%',
+    borderRadius: '$2',
+    marginBottom: '$4',
+  },
+  'ol,ul': {
+    paddingInlineStart: '$4',
+  },
+  '> *:last-child': {
+    marginBottom: 0,
+  },
+  '> *:first-child': {
+    marginTop: 0,
+  },
+});
+
+const options: MarkdownToJSX.Options = {
+  forceWrapper: true,
+  overrides: {
+    a: ({ children, ...props }) => (
+      <a {...props} target="_blank" rel="noopener noreferrer">
+        {children}
+      </a>
+    ),
+  },
+};
+
+MarkdownText.defaultProps = {
+  options,
+};
+
+export default MarkdownText;

packages/react-chat/src/components/Text/index.tsx

@@ -0,0 +1,5 @@
+import Default from './Default';
+
+export { default as Markdown } from './Markdown';
+
+export default Default;

packages/react-chat/src/components/index.ts

@@ -16,6 +16,7 @@ export { default as Loader } from './Loader';
 export { default as Message } from './Message';
 export { default as Prompt } from './Prompt';
 export { default as SystemResponse } from './SystemResponse';
+export { Markdown, default as Text } from './Text';
 export { default as Timestamp } from './Timestamp';
 export { default as Tooltip } from './Tooltip';
 export { default as TypingIndicator } from './TypingIndicator';

yarn.lock

@@ -5332,7 +5332,7 @@ __metadata:
     "@voiceflow/eslint-config": 6.1.0
     "@voiceflow/prettier-config": 1.2.1
     "@voiceflow/sdk-runtime": 1.7.0
-    "@voiceflow/slate-serializer": 1.2.2
+    "@voiceflow/slate-serializer": 1.5.1
     "@voiceflow/tsconfig": 1.4.8
     "@voiceflow/voiceflow-types": 3.24.0
     bowser: ^2.11.0
@@ -5350,6 +5350,7 @@ __metadata:
     happy-dom: ^6.0.4
     husky: ^8.0.0
     lint-staged: 13.0.3
+    markdown-to-jsx: ^7.3.2
     prettier: 2.7.1
     react: 18.2.0
     react-dom: 18.2.0
@@ -5382,16 +5383,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@voiceflow/slate-serializer@npm:1.2.2":
-  version: 1.2.2
-  resolution: "@voiceflow/slate-serializer@npm:1.2.2"
+"@voiceflow/slate-serializer@npm:1.5.1":
+  version: 1.5.1
+  resolution: "@voiceflow/slate-serializer@npm:1.5.1"
   dependencies:
-    csstype: ^3.0.9
+    csstype: 3.1.2
   peerDependencies:
     "@voiceflow/base-types": ^2.67.0
     react: ^17.0.2
     slate: ^0.72.3
-  checksum: dd69b2f2b037253667bfb5be280311b5add1df4cf12c90d58cb95ebad27792a1b7c8c5fc417f2b59b4f91691f6724562b98e1c956545614b1f90254ca16f5dfe
+  checksum: ca595174b473e3f59ef5cc4ec0f3293733c2c437226d9a522bd04d6917108e2a617af0f5365812ee36a6a349a3242dcf25678cff4ec830191b0097170bddbb03
   languageName: node
   linkType: hard
 
@@ -8569,20 +8570,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"csstype@npm:3.1.2":
+  version: 3.1.2
+  resolution: "csstype@npm:3.1.2"
+  checksum: e1a52e6c25c1314d6beef5168da704ab29c5186b877c07d822bd0806717d9a265e8493a2e35ca7e68d0f5d472d43fac1cdce70fd79fd0853dff81f3028d857b5
+  languageName: node
+  linkType: hard
+
 "csstype@npm:^2.5.7":
   version: 2.6.20
   resolution: "csstype@npm:2.6.20"
   checksum: cb5d5ded49c3390909e93b20b285d4a63d0ba5b10294bdfbc4cf911f80e91d6cf367ea671f99f09570762535c14ea7074a2c7fa73f02008203f01328dea8968b
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.9":
-  version: 3.1.1
-  resolution: "csstype@npm:3.1.1"
-  checksum: 1f7b4f5fdd955b7444b18ebdddf3f5c699159f13e9cf8ac9027ae4a60ae226aef9bbb14a6e12ca7dba3358b007cee6354b116e720262867c398de6c955ea451d
-  languageName: node
-  linkType: hard
-
 "cuid@npm:^2.1.8":
   version: 2.1.8
   resolution: "cuid@npm:2.1.8"
@@ -14689,6 +14690,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"markdown-to-jsx@npm:^7.3.2":
+  version: 7.3.2
+  resolution: "markdown-to-jsx@npm:7.3.2"
+  peerDependencies:
+    react: ">= 0.14.0"
+  checksum: 8885c6343b71570b0a7ec16cd85a49b853a830234790ee7430e2517ea5d8d361ff138bd52147f650790f3e7b3a28a15c755fc16f8856dd01ddf09a6161782e06
+  languageName: node
+  linkType: hard
+
 "md5.js@npm:^1.3.4":
   version: 1.3.5
   resolution: "md5.js@npm:1.3.5"