feat: add support for emoji inside messages markdown

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

@@ -3,14 +3,15 @@ import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import supersub from 'remark-supersub';
 import rehypeKatex from 'rehype-katex';
+import remarkEmoji from 'remark-emoji';
 import { useRecoilValue } from 'recoil';
 import ReactMarkdown from 'react-markdown';
 import rehypeHighlight from 'rehype-highlight';
 import remarkDirective from 'remark-directive';
 import type { Pluggable } from 'unified';
+import { useToastContext, CodeBlockProvider, useCodeBlockContext } 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';
@@ -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

@@ -3,6 +3,7 @@ import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import supersub from 'remark-supersub';
+import remarkEmoji from 'remark-emoji';
 import ReactMarkdown from 'react-markdown';
 import rehypeHighlight from 'rehype-highlight';
 import type { PluggableList } from 'unified';
@@ -30,6 +31,7 @@ const MarkdownLite = memo(
           remarkPlugins={[
             /** @ts-ignore */
             supersub,
+            remarkEmoji,
             remarkGfm,
             [remarkMath, { singleDollarTextMath: true }],
           ]}