feat: add support for emoji inside messages markdown

Closes 5382

client/package.json

@@ -94,6 +94,7 @@
     "rehype-highlight": "^6.0.0",
     "rehype-katex": "^6.0.3",
     "remark-directive": "^3.0.0",
+    "remark-emoji": "^5.0.1",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "remark-supersub": "^1.0.0",

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

@@ -1,20 +1,21 @@
-import React, { memo, useMemo, useRef, useEffect } from 'react';
-import remarkGfm from 'remark-gfm';
-import remarkMath from 'remark-math';
-import supersub from 'remark-supersub';
-import rehypeKatex from 'rehype-katex';
-import { useRecoilValue } from 'recoil';
+import React, { memo, useEffect, useMemo, useRef } from 'react';
 import ReactMarkdown from 'react-markdown';
+import { useRecoilValue } from 'recoil';
 import rehypeHighlight from 'rehype-highlight';
+import rehypeKatex from 'rehype-katex';
 import remarkDirective from 'remark-directive';
+import remarkEmoji from 'remark-emoji';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import supersub from 'remark-supersub';
 import type { Pluggable } from 'unified';
+import { CodeBlockProvider, useCodeBlockContext, useToastContext } from '~/Providers';
 import { Artifact, artifactPlugin } from '~/components/Artifacts/Artifact';
-import { langSubset, preprocessLaTeX, handleDoubleClick } from '~/utils';
-import { useToastContext, CodeBlockProvider, useCodeBlockContext } from '~/Providers';
 import CodeBlock from '~/components/Messages/Content/CodeBlock';
 import { useFileDownload } from '~/data-provider';
 import useLocalize from '~/hooks/useLocalize';
 import store from '~/store';
+import { handleDoubleClick, langSubset, preprocessLaTeX } from '~/utils';
 
 type TCodeProps = {
   inline: boolean;
@@ -185,13 +186,14 @@ const Markdown = memo(({ content = '', showCursor, isLatestMessage }: TContentPr
 
   const remarkPlugins: Pluggable[] = codeArtifacts
     ? [
-      supersub,
-      remarkGfm,
-      [remarkMath, { singleDollarTextMath: true }],
-      remarkDirective,
-      artifactPlugin,
-    ]
-    : [supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]];
+        supersub,
+        remarkEmoji,
+        remarkGfm,
+        [remarkMath, { singleDollarTextMath: true }],
+        remarkDirective,
+        artifactPlugin,
+      ]
+    : [supersub, remarkEmoji, remarkGfm, [remarkMath, { singleDollarTextMath: true }]];
 
   return (
     <CodeBlockProvider>

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

@@ -1,14 +1,15 @@
 import { memo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeHighlight from 'rehype-highlight';
+import rehypeKatex from 'rehype-katex';
+import remarkEmoji from 'remark-emoji';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
-import rehypeKatex from 'rehype-katex';
 import supersub from 'remark-supersub';
-import ReactMarkdown from 'react-markdown';
-import rehypeHighlight from 'rehype-highlight';
 import type { PluggableList } from 'unified';
-import { code, codeNoExecution, a, p } from './Markdown';
 import { CodeBlockProvider } from '~/Providers';
 import { langSubset } from '~/utils';
+import { a, code, codeNoExecution, p } from './Markdown';
 
 const MarkdownLite = memo(
   ({ content = '', codeExecution = true }: { content?: string; codeExecution?: boolean }) => {
@@ -30,6 +31,7 @@ const MarkdownLite = memo(
           remarkPlugins={[
             /** @ts-ignore */
             supersub,
+            remarkEmoji,
             remarkGfm,
             [remarkMath, { singleDollarTextMath: true }],
           ]}