allow html behind feature flag

backend/chainlit/config.py

@@ -47,6 +47,12 @@
 # Show the prompt playground
 prompt_playground = true
 
+# Process and display HTML in messages. This can be a security risk (see https://stackoverflow.com/questions/19603097/why-is-it-dangerous-to-render-user-generated-html-or-javascript)
+unsafe_allow_html = false
+
+# Process and display mathematical expressions. This can clash with "$" characters in messages.
+latex = false
+
 # Authorize users to upload files with messages
 multi_modal = true
 
@@ -157,6 +163,8 @@ class SpeechToTextFeature:
 class FeaturesSettings(DataClassJsonMixin):
     prompt_playground: bool = True
     multi_modal: bool = True
+    latex: bool = False
+    unsafe_allow_html: bool = False
     speech_to_text: Optional[SpeechToTextFeature] = None
 
 

frontend/src/AppWrapper.tsx

@@ -33,7 +33,6 @@ export default function AppWrapper() {
 
   useEffect(() => {
     if (!data) return;
-
     setProjectSettings(data);
     setAppSettings((prev) => ({
       ...prev,

frontend/src/components/molecules/chatProfiles.tsx

@@ -50,6 +50,9 @@ export default function ChatProfiles() {
     return null;
   }
 
+  const allowHtml = pSettings?.features?.unsafe_allow_html;
+  const latex = pSettings?.features?.latex;
+
   const popoverOpen = Boolean(anchorEl);
 
   return (
@@ -167,7 +170,9 @@ export default function ChatProfiles() {
         disableRestoreFocus
       >
         <Box p={2} maxWidth="20rem">
-          <Markdown>{chatProfileDescription}</Markdown>
+          <Markdown allowHtml={allowHtml} latex={latex}>
+            {chatProfileDescription}
+          </Markdown>
         </Box>
       </Popover>
       <NewChatDialog

frontend/src/components/organisms/chat/Messages/container.tsx

@@ -175,6 +175,8 @@ const MessageContainer = memo(
     const memoizedContext = useMemo(() => {
       return {
         askUser,
+        allowHtml: projectSettings?.features?.unsafe_allow_html,
+        latex: projectSettings?.features?.latex,
         avatars,
         defaultCollapseContent: appSettings.defaultCollapseContent,
         expandAll: appSettings.expandAll,
@@ -198,6 +200,7 @@ const MessageContainer = memo(
       highlightedMessage,
       loading,
       projectSettings?.ui?.name,
+      projectSettings?.features?.unsafe_allow_html,
       onElementRefClick,
       onError,
       onFeedbackUpdated,

frontend/src/components/organisms/chat/Messages/index.tsx

@@ -29,7 +29,11 @@ const Messages = ({
   return !idToResume &&
     !messages.length &&
     projectSettings?.ui.show_readme_as_default ? (
-    <WelcomeScreen markdown={projectSettings?.markdown} />
+    <WelcomeScreen
+      markdown={projectSettings?.markdown}
+      allowHtml={projectSettings?.features?.unsafe_allow_html}
+      latex={projectSettings?.features?.latex}
+    />
   ) : (
     <MessageContainer
       avatars={avatars}

frontend/src/components/organisms/chat/Messages/welcomeScreen.tsx

@@ -4,32 +4,41 @@ import { Box } from '@mui/material';
 
 import { Markdown } from '@chainlit/react-components';
 
-const WelcomeScreen = memo(({ markdown }: { markdown?: string }) => {
-  if (!markdown) return <Box flexGrow={1} />;
+const WelcomeScreen = memo(
+  ({
+    markdown,
+    allowHtml
+  }: {
+    markdown?: string;
+    allowHtml?: boolean;
+    latex?: boolean;
+  }) => {
+    if (!markdown) return <Box flexGrow={1} />;
 
-  return (
-    <Box overflow="auto" flexGrow={1}>
-      <Box
-        id="welcome-screen"
-        sx={{
-          p: 2,
-          boxSizing: 'border-box',
-          maxWidth: '60rem',
-          width: '100%',
-          mx: 'auto',
-          color: 'text.primary',
-          lineHeight: '25px',
-          fontSize: '1rem',
-          fontFamily:
-            '-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji',
-          display: 'flex',
-          flexDirection: 'column'
-        }}
-      >
-        <Markdown>{markdown}</Markdown>
+    return (
+      <Box overflow="auto" flexGrow={1}>
+        <Box
+          id="welcome-screen"
+          sx={{
+            p: 2,
+            boxSizing: 'border-box',
+            maxWidth: '60rem',
+            width: '100%',
+            mx: 'auto',
+            color: 'text.primary',
+            lineHeight: '25px',
+            fontSize: '1rem',
+            fontFamily:
+              '-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji',
+            display: 'flex',
+            flexDirection: 'column'
+          }}
+        >
+          <Markdown allowHtml={allowHtml}>{markdown}</Markdown>
+        </Box>
       </Box>
-    </Box>
-  );
-});
+    );
+  }
+);
 
 export default WelcomeScreen;

frontend/src/pages/Readme.tsx

@@ -14,7 +14,11 @@ export default function Readme() {
   return (
     <Page>
       <Box my={2} display="flex" flexGrow={1}>
-        <WelcomeScreen markdown={projectSettings?.markdown} />
+        <WelcomeScreen
+          markdown={projectSettings?.markdown}
+          allowHtml={projectSettings?.features?.unsafe_allow_html}
+          latex={projectSettings?.features?.latex}
+        />
       </Box>
     </Page>
   );

frontend/src/state/project.ts

@@ -21,6 +21,8 @@ export interface IProjectSettings {
   };
   features: {
     multi_modal?: boolean;
+    unsafe_allow_html?: boolean;
+    latex?: boolean;
     speech_to_text?: {
       enabled?: boolean;
       language?: string;

libs/react-client/src/types/message.ts

@@ -1,4 +1,4 @@
-import { IFileElement, IMessageElement } from './element';
+import { IFileElement } from './element';
 
 interface IBaseTemplate {
   template?: string;
@@ -57,9 +57,3 @@ export interface IMessage {
   waitForAnswer?: boolean;
   subMessages?: IMessage[];
 }
-
-export interface IMessageContent {
-  elements: IMessageElement[];
-  message: IMessage;
-  preserveSize?: boolean;
-}

libs/react-components/package.json

@@ -73,6 +73,7 @@
     "react-plotly.js": "^2.6.0",
     "react-resizable": "^3.0.5",
     "rehype-katex": "^7.0.0",
+    "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "swr": "^2.2.2",

libs/react-components/src/Markdown.tsx

@@ -1,6 +1,9 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
+import { useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
+import { PluggableList } from 'react-markdown/lib';
 import rehypeKatex from 'rehype-katex';
+import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import { Code } from 'src/Code';
@@ -21,15 +24,37 @@ import type { IMessageElement } from 'client-types/';
 import { InlineCode } from './InlineCode';
 
 interface Props {
+  allowHtml?: boolean;
+  latex?: boolean;
   refElements?: IMessageElement[];
   children: string;
 }
 
-function Markdown({ refElements, children }: Props) {
+function Markdown({ refElements, allowHtml, latex, children }: Props) {
+  const rehypePlugins = useMemo(() => {
+    let rehypePlugins: PluggableList = [];
+    if (allowHtml) {
+      rehypePlugins = [rehypeRaw as any, ...rehypePlugins];
+    }
+    if (latex) {
+      rehypePlugins = [rehypeKatex as any, ...rehypePlugins];
+    }
+    return rehypePlugins;
+  }, [allowHtml, latex]);
+
+  const remarkPlugins = useMemo(() => {
+    let remarkPlugins: PluggableList = [remarkGfm as any];
+
+    if (latex) {
+      remarkPlugins = [remarkMath as any, ...remarkPlugins];
+    }
+    return remarkPlugins;
+  }, [latex]);
+
   return (
     <ReactMarkdown
-      remarkPlugins={[remarkGfm as any, remarkMath]}
-      rehypePlugins={[rehypeKatex]}
+      remarkPlugins={remarkPlugins}
+      rehypePlugins={rehypePlugins}
       className="markdown-body"
       components={{
         a({ children, ...props }) {

libs/react-components/src/messages/Message.tsx

@@ -42,6 +42,8 @@ const Message = memo(
       hideCot,
       highlightedMessage,
       defaultCollapseContent,
+      allowHtml,
+      latex,
       onError
     } = useContext(MessageContext);
 
@@ -106,6 +108,8 @@ const Message = memo(
                 elements={elements}
                 message={message}
                 preserveSize={!!message.streaming || !defaultCollapseContent}
+                allowHtml={allowHtml}
+                latex={latex}
               />
               <DetailsButton
                 message={message}

libs/react-components/src/messages/components/MessageContent.tsx

@@ -9,15 +9,23 @@ import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
-import type { IMessageContent } from 'client-types/';
+import type { IMessage, IMessageElement } from 'client-types/';
 
 import { MessageButtons } from './MessageButtons';
 
 const COLLAPSE_MIN_LINES = 25; // Set this to the maximum number of lines you want to display before collapsing
 const COLLAPSE_MIN_LENGTH = 3000; // Set this to the maximum number of characters you want to display before collapsing
 
+export interface Props {
+  elements: IMessageElement[];
+  message: IMessage;
+  preserveSize?: boolean;
+  allowHtml?: boolean;
+  latex?: boolean;
+}
+
 const MessageContent = memo(
-  ({ message, elements, preserveSize }: IMessageContent) => {
+  ({ message, elements, preserveSize, allowHtml, latex }: Props) => {
     const { preparedContent, inlinedElements, refElements } = prepareContent({
       elements,
       id: message.id,
@@ -37,7 +45,9 @@ const MessageContent = memo(
         }}
         component="div"
       >
-        <Markdown refElements={refElements}>{preparedContent}</Markdown>
+        <Markdown allowHtml={allowHtml} latex={latex} refElements={refElements}>
+          {preparedContent}
+        </Markdown>
       </Typography>
     );
 

libs/react-components/src/types/messageContext.ts

@@ -15,6 +15,8 @@ interface IMessageContext {
   loading: boolean;
   showFeedbackButtons: boolean;
   uiName: string;
+  allowHtml?: boolean;
+  latex?: boolean;
   onPlaygroundButtonClick?: (message: IMessage) => void;
   onElementRefClick?: (element: IMessageElement) => void;
   onFeedbackUpdated?: (