feat: allow dangerous html flag (CT-000) (voiceflow#88)

ChidiNweze · Nov 25, 2023 · bc42b1b · bc42b1b
1 parent 38ef190
commit bc42b1b
Show file tree

Hide file tree

Showing 6 changed files with 752 additions and 282 deletions.
diff --git a/packages/react-chat/package.json b/packages/react-chat/package.json
@@ -21,9 +21,9 @@
     "dayjs": "^1.11.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-markdown": "^8.0.7",
-    "rehype-raw": "^6.1.1",
-    "remark-gfm": "^3.0.1",
+    "react-markdown": "9.0.0",
+    "rehype-raw": "7.0.0",
+    "remark-gfm": "4.0.0",
     "remeda": "^1.0.1",
     "slate": "^0.94.1",
     "ts-pattern": "^4.0.5",

diff --git a/packages/react-chat/src/common/types.ts b/packages/react-chat/src/common/types.ts
@@ -23,6 +23,8 @@ export interface RuntimeOptions<Verify extends AuthVerify | PublicVerify = AuthV
   userID?: string;
   versionID?: string | undefined;
   launch?: LaunchOptions;
+
+  allowDangerousHTML?: boolean;
 }
 
 export enum SessionStatus {

diff --git a/packages/react-chat/src/components/Text/Default.tsx b/packages/react-chat/src/components/Text/Default.tsx
@@ -1,8 +1,10 @@
 import { serializeToMarkdown } from '@voiceflow/slate-serializer/markdown';
 import React from 'react';
+import rehypeRaw from 'rehype-raw';
 
 import Message from '@/components/Message';
 import type { TextMessageProps } from '@/components/SystemResponse/types';
+import { RuntimeStateAPIContext } from '@/contexts';
 
 import Markdown from './Markdown';
 
@@ -13,12 +15,27 @@ export interface DefaultTextProps {
   text: TextMessageProps['text'];
 }
 
+// this is just eslint being dumb because "allowDangerousHTML" contains "HTML"
+// eslint-disable-next-line xss/no-mixed-html
 const DefaultText: React.FC<DefaultTextProps> = ({ text }) => {
+  const api = React.useContext(RuntimeStateAPIContext);
+
+  const content = typeof text === 'string' ? text : serializeToMarkdown(text);
+
+  if (api?.config?.allowDangerousHTML) {
+    return (
+      <Message from="system">
+        <Markdown rehypePlugins={[rehypeRaw]}>{content}</Markdown>
+      </Message>
+    );
+  }
+
   return (
     <Message from="system">
-      <Markdown>{typeof text === 'string' ? text : serializeToMarkdown(text)}</Markdown>
+      <Markdown>{content}</Markdown>
     </Message>
   );
 };
 
-export default DefaultText;
+// memoize to prevent re-rendering
+export default React.memo(DefaultText);
diff --git a/packages/react-chat/src/components/Text/Markdown.tsx b/packages/react-chat/src/components/Text/Markdown.tsx
@@ -1,5 +1,4 @@
 import ReactMarkdown from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 
 import { styled } from '@/styles';
@@ -35,14 +34,18 @@ const MarkdownText = styled(ReactMarkdown, {
 });
 
 MarkdownText.defaultProps = {
-  rehypePlugins: [rehypeRaw],
   remarkPlugins: [remarkGfm],
-  linkTarget: '_blank',
+  components: {
+    a: ({ node, href, children, ...props }) => (
+      <a href={href} target="_blank" rel="noopener noreferrer" {...props}>
+        {children}
+      </a>
+    ),
+  },
   remarkRehypeOptions: {
     handlers: {
       break: () => [{ type: 'text', value: '\n' }],
     },
-    allowDangerousHtml: false,
   },
 };
 

diff --git a/packages/react-chat/src/utils/config.ts b/packages/react-chat/src/utils/config.ts
@@ -17,7 +17,7 @@ const tryDecodeURIComponent = (str: string) => {
 
 export const sanitizeConfig = (config: unknown): Partial<ChatConfig> & Pick<ChatConfig, 'verify' | 'url'> => {
   const ref = isObject(config) ? config : {};
-  const { url, user, userID, versionID, verify, assistant, launch } = ref;
+  const { url, user, userID, versionID, verify, assistant, launch, allowDangerousHTML } = ref;
 
   if (!validateVerify(verify)) {
     throw new Error('no projectID on load');
@@ -38,5 +38,8 @@ export const sanitizeConfig = (config: unknown): Partial<ChatConfig> & Pick<Chat
     }),
     ...(isObject(assistant) && ({ assistant } as Partial<Pick<ChatConfig, 'assistant'>>)),
     ...(isObject(launch) && ({ launch } as Pick<ChatConfig, 'launch'>)),
+
+    // default to true during migration period, turn off later
+    ...(typeof allowDangerousHTML === 'boolean' ? { allowDangerousHTML } : { allowDangerousHTML: true }),
   };
 };