🎯 refactor: LaTeX and Math Rendering (#7952)

* refactor: Markdown LaTeX processing

- Added micromark-extension-llm-math as a dependency in package.json and package-lock.json.
- Updated Vite configuration to alias micromark-extension-math.
- Modified Markdown components to use singleDollarTextMath: false for improved LaTeX rendering.
- Refactored latex utility functions to enhance LaTeX processing and escaping mechanisms.

* chore: linting of `EditTextPart`

* fix: handle key up to initiate edit of latest user message by adding id prop to Edit Message HoverButton

* chore: linting in Artifact component

* refactor: enhance LaTeX preprocessing functionality

- Updated `preprocessLaTeX` to improve handling of currency and LaTeX expressions.
- Introduced optimized regex patterns for better performance.
- Added support for escaping mhchem commands and handling code blocks.
- Enhanced tests for various LaTeX scenarios, including currency and special characters.
- Refactored existing tests to align with new preprocessing logic.

* chore: filter out false positives in unused packages workflow

- Added a grep command to exclude the micromark-extension-llm-math package from the list of unused dependencies in the GitHub Actions workflow.

client/src/components/Artifacts/Artifact.tsx

@@ -40,7 +40,7 @@ const defaultType = 'unknown';
 const defaultIdentifier = 'lc-no-identifier';
 
 export function Artifact({
-  node,
+  node: _node,
   ...props
 }: Artifact & {
   children: React.ReactNode | { props: { children: React.ReactNode } };
@@ -95,7 +95,7 @@ export function Artifact({
       setArtifacts((prevArtifacts) => {
         if (
           prevArtifacts?.[artifactKey] != null &&
-          prevArtifacts[artifactKey].content === content
+          prevArtifacts[artifactKey]?.content === content
         ) {
           return prevArtifacts;
         }

client/src/components/Chat/Messages/Content/Markdown.tsx

@@ -204,7 +204,7 @@ const Markdown = memo(({ content = '', isLatestMessage }: TContentProps) => {
     remarkGfm,
     remarkDirective,
     artifactPlugin,
-    [remarkMath, { singleDollarTextMath: true }],
+    [remarkMath, { singleDollarTextMath: false }],
     unicodeCitation,
   ];
 

client/src/components/Chat/Messages/Content/MarkdownLite.tsx

@@ -32,7 +32,7 @@ const MarkdownLite = memo(
               /** @ts-ignore */
               supersub,
               remarkGfm,
-              [remarkMath, { singleDollarTextMath: true }],
+              [remarkMath, { singleDollarTextMath: false }],
             ]}
             /** @ts-ignore */
             rehypePlugins={rehypePlugins}

client/src/components/Chat/Messages/Content/Parts/EditTextPart.tsx

@@ -117,9 +117,9 @@ const EditTextPart = ({
       messages.map((msg) =>
         msg.messageId === messageId
           ? {
-            ...msg,
-            content: updatedContent,
-          }
+              ...msg,
+              content: updatedContent,
+            }
           : msg,
       ),
     );

client/src/components/Chat/Messages/HoverButtons.tsx

@@ -25,6 +25,7 @@ type THoverButtons = {
 };
 
 type HoverButtonProps = {
+  id?: string;
   onClick: (e?: React.MouseEvent<HTMLButtonElement>) => void;
   title: string;
   icon: React.ReactNode;
@@ -67,6 +68,7 @@ const extractMessageContent = (message: TMessage): string => {
 
 const HoverButton = memo(
   ({
+    id,
     onClick,
     title,
     icon,
@@ -89,6 +91,7 @@ const HoverButton = memo(
 
     return (
       <button
+        id={id}
         className={buttonStyle}
         onClick={onClick}
         type="button"
@@ -213,6 +216,7 @@ const HoverButtons = ({
       {/* Edit Button */}
       {isEditableEndpoint && (
         <HoverButton
+          id={`edit-${message.messageId}`}
           onClick={onEdit}
           title={localize('com_ui_edit')}
           icon={<EditIcon size="19" />}

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

@@ -143,7 +143,7 @@ export default function VariableForm({
         <div className="mb-6 max-h-screen max-w-[90vw] overflow-auto rounded-md bg-surface-tertiary p-4 text-text-secondary dark:bg-surface-primary sm:max-w-full md:max-h-96">
           <ReactMarkdown
             /** @ts-ignore */
-            remarkPlugins={[supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]]}
+            remarkPlugins={[supersub, remarkGfm, [remarkMath, { singleDollarTextMath: false }]]}
             rehypePlugins={[
               /** @ts-ignore */
               [rehypeKatex],

client/src/components/Prompts/PromptDetails.tsx

@@ -55,7 +55,7 @@ const PromptDetails = ({ group }: { group?: TPromptGroup }) => {
                   /** @ts-ignore */
                   supersub,
                   remarkGfm,
-                  [remarkMath, { singleDollarTextMath: true }],
+                  [remarkMath, { singleDollarTextMath: false }],
                 ]}
                 rehypePlugins={[
                   /** @ts-ignore */

client/src/components/Prompts/PromptEditor.tsx

@@ -130,7 +130,7 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
                     /** @ts-ignore */
                     supersub,
                     remarkGfm,
-                    [remarkMath, { singleDollarTextMath: true }],
+                    [remarkMath, { singleDollarTextMath: false }],
                   ]}
                   /** @ts-ignore */
                   rehypePlugins={rehypePlugins}