Markdown Support in Prompts

client/src/components/Prompts/Groups/VariableForm.tsx

@@ -1,5 +1,11 @@
 import { useMemo } from 'react';
 import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeKatex from 'rehype-katex';
+import remarkMath from 'remark-math';
+import supersub from 'remark-supersub';
+import rehypeHighlight from 'rehype-highlight';
 import type { TPromptGroup } from 'librechat-data-provider';
 import { extractVariableInfo, wrapVariable, replaceSpecialVars } from '~/utils';
 import { useAuthContext, useLocalize, useSubmitMessage } from '~/hooks';
@@ -50,31 +56,16 @@ export default function VariableForm({
     return null;
   }
 
-  const generateHighlightedText = () => {
+  const generateHighlightedMarkdown = () => {
     let tempText = mainText;
-    const parts: JSX.Element[] = [];
-
     allVariables.forEach((variable, index) => {
       const placeholder = `{{${variable}}}`;
-      const partsBeforePlaceholder = tempText.split(placeholder);
       const fieldIndex = variableIndexMap.get(variable) as string | number;
       const fieldValue = fieldValues[fieldIndex].value as string;
-      parts.push(
-        <span key={`before-${index}`}>{partsBeforePlaceholder[0]}</span>,
-        <span
-          key={`highlight-${index}`}
-          className="rounded bg-yellow-100 p-1 font-medium dark:text-gray-800"
-        >
-          {fieldValue !== '' ? fieldValue : placeholder}
-        </span>,
-      );
-
-      tempText = partsBeforePlaceholder.slice(1).join(placeholder);
+      const highlightText = fieldValue !== '' ? fieldValue : placeholder;
+      tempText = tempText.replaceAll(placeholder, `**${highlightText}**`);
     });
-
-    parts.push(<span key="last-part">{tempText}</span>);
-
-    return parts;
+    return tempText;
   };
 
   const onSubmit = (data: FormValues) => {
@@ -94,7 +85,13 @@ export default function VariableForm({
     <div className="container mx-auto p-1">
       <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
         <div className="mb-6 max-h-screen overflow-auto rounded-md bg-gray-100 p-4 dark:bg-gray-700/50 dark:text-gray-300 md:max-h-80">
-          <p className="text-md whitespace-pre-wrap">{generateHighlightedText()}</p>
+          <ReactMarkdown
+            remarkPlugins={[supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]]}
+            rehypePlugins={[[rehypeKatex, { output: 'mathml' }], [rehypeHighlight, { ignoreMissing: true }]]}
+            className="markdown prose dark:prose-invert light dark:text-gray-70 my-1 w-full break-words"
+          >
+            {generateHighlightedMarkdown()}
+          </ReactMarkdown>
         </div>
         <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
           {fields.map((field, index) => (

client/src/components/Prompts/PromptEditor.tsx

@@ -2,13 +2,21 @@ import { useMemo, memo } from 'react';
 import { useRecoilValue } from 'recoil';
 import { EditIcon } from 'lucide-react';
 import { Controller, useFormContext, useFormState } from 'react-hook-form';
+import remarkGfm from 'remark-gfm';
+import rehypeKatex from 'rehype-katex'
+import remarkMath from 'remark-math';
+import supersub from 'remark-supersub';
+import ReactMarkdown from 'react-markdown';
 import AlwaysMakeProd from '~/components/Prompts/Groups/AlwaysMakeProd';
 import { SaveIcon, CrossIcon } from '~/components/svg';
 import { TextareaAutosize } from '~/components/ui';
 import { PromptsEditorMode } from '~/common';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 import store from '~/store';
+import rehypeHighlight from 'rehype-highlight';
+import type { PluggableList } from 'unified';
+import { langSubset } from '~/utils';
 
 const { promptsEditorMode } = store;
 
@@ -32,6 +40,18 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
     return isEditing ? SaveIcon : EditIcon;
   }, [isEditing, prompt]);
 
+  const rehypePlugins: PluggableList = [
+    [rehypeKatex, { output: 'mathml' }],
+    [
+      rehypeHighlight,
+      {
+        detect: true,
+        ignoreMissing: true,
+        subset: langSubset,
+      },
+    ],
+  ];
+
   return (
     <div>
       <h2 className="flex items-center justify-between rounded-t-lg border border-border-medium py-2 pl-4 text-base font-semibold text-text-primary">
@@ -85,9 +105,13 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
                 }}
               />
             ) : (
-              <pre className="block h-full w-full whitespace-pre-wrap break-words px-2 py-1 text-left text-text-primary">
+              <ReactMarkdown
+                remarkPlugins={[supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]]}
+                rehypePlugins={rehypePlugins}
+                className="markdown prose dark:prose-invert light dark:text-gray-70 my-1 w-full break-words"
+              >
                 {field.value}
-              </pre>
+              </ReactMarkdown>
             )
           }
         />