docuservix/widgets/chat: добавление поддержки markdown

plugins/docuservix/entities/markdown/MD.module.css

@@ -0,0 +1,59 @@
+.MD p:last-child {
+    margin-bottom: 0;
+}
+
+.MD p:first-child {
+    margin-top: 0;
+}
+
+.MD code {
+    padding: 0.15em 0.4em;
+    border-radius: 4px;
+    background: var(--ifm-color-emphasis-200);
+    font-size: 0.85em;
+}
+
+.MD pre {
+    margin: 0.5em 0;
+    padding: 0.75em;
+    overflow-x: auto;
+    border-radius: 6px;
+    background: var(--ifm-color-emphasis-100);
+}
+
+.MD pre code {
+    padding: 0;
+    background: none;
+}
+
+.MD ul,
+.MD ol {
+    padding-left: 1.5em;
+    margin: 0.5em 0;
+}
+
+.MD table {
+    width: 100%;
+    margin: 0.5em 0;
+    border-collapse: collapse;
+    font-size: 0.9em;
+}
+
+.MD th,
+.MD td {
+    padding: 0.4em 0.75em;
+    border: 1px solid var(--ifm-color-emphasis-300);
+    text-align: left;
+}
+
+.MD th {
+    background: var(--ifm-color-emphasis-100);
+    font-weight: var(--ifm-font-weight-semibold);
+}
+
+.MD blockquote {
+    margin: 0.5em 0;
+    padding: 0.25em 1em;
+    border-left: 3px solid var(--ifm-color-emphasis-300);
+    color: var(--ifm-color-emphasis-700);
+}

plugins/docuservix/entities/markdown/MD.tsx

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+import styles from './MD.module.css';
+
+interface MDProps {
+    children: string;
+}
+
+export function MD({ children }: MDProps): ReactNode {
+    return (
+        <div className={styles.MD}>
+            <Markdown remarkPlugins={[remarkGfm]}>{children}</Markdown>
+        </div>
+    );
+}

plugins/docuservix/entities/markdown/index.ts

@@ -0,0 +1 @@
+export { MD } from './MD';

plugins/docuservix/pages/chat/ChatPage.tsx

@@ -12,7 +12,7 @@ const dialog: IChat = {
         },
         {
             role: 'assistant',
-            content: "Hello! I'm your AI assistant. How can I help you today?",
+            content: "Hello! I'm your **AI assistant**. How can I help you today?",
         },
     ],
 };

plugins/docuservix/widgets/chat/Message.tsx

@@ -1,6 +1,8 @@
 import block from 'bem-css-modules';
 import React, { ReactNode } from 'react';
 
+import { MD } from '@docuservix/entities/markdown';
+
 import styles from './Message.module.css';
 
 const b = block(styles, 'Message');
@@ -13,7 +15,9 @@ interface MessageProps {
 export function Message({ role, content }: MessageProps): ReactNode {
     return (
         <div className={b({ role })}>
-            <div className={b('content')}>{content}</div>
+            <div className={b('content')}>
+                <MD>{content}</MD>
+            </div>
         </div>
     );
 }