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

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

@@ -1,59 +0,0 @@
-.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

@@ -1,17 +0,0 @@
-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

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

plugins/docuservix/widgets/chat/Message.module.css

@@ -34,6 +34,68 @@
     border-bottom-right-radius: 0.25rem;
 }
 
+/* Markdown typography */
+
+.Message__content p:last-child {
+    margin-bottom: 0;
+}
+
+.Message__content p:first-child {
+    margin-top: 0;
+}
+
+.Message__content code {
+    padding: 0.15em 0.4em;
+    border-radius: 4px;
+    background: var(--ifm-color-emphasis-200);
+    font-size: 0.85em;
+}
+
+.Message__content pre {
+    margin: 0.5em 0;
+    padding: 0.75em;
+    overflow-x: auto;
+    border-radius: 6px;
+    background: var(--ifm-color-emphasis-100);
+}
+
+.Message__content pre code {
+    padding: 0;
+    background: none;
+}
+
+.Message__content ul,
+.Message__content ol {
+    padding-left: 1.5em;
+    margin: 0.5em 0;
+}
+
+.Message__content table {
+    width: 100%;
+    margin: 0.5em 0;
+    border-collapse: collapse;
+    font-size: 0.9em;
+}
+
+.Message__content th,
+.Message__content td {
+    padding: 0.4em 0.75em;
+    border: 1px solid var(--ifm-color-emphasis-300);
+    text-align: left;
+}
+
+.Message__content th {
+    background: var(--ifm-color-emphasis-100);
+    font-weight: var(--ifm-font-weight-semibold);
+}
+
+.Message__content blockquote {
+    margin: 0.5em 0;
+    padding: 0.25em 1em;
+    border-left: 3px solid var(--ifm-color-emphasis-300);
+    color: var(--ifm-color-emphasis-700);
+}
+
 /* User role overrides for light-on-dark text */
 
 .Message_role_user .Message__content code {

plugins/docuservix/widgets/chat/Message.tsx

@@ -1,7 +1,7 @@
 import block from 'bem-css-modules';
 import React, { ReactNode } from 'react';
-
+import Markdown from 'react-markdown';
-import { MD } from '@docuservix/entities/markdown';
+import remarkGfm from 'remark-gfm';
 
 import styles from './Message.module.css';
 
@@ -16,7 +16,7 @@ export function Message({ role, content }: MessageProps): ReactNode {
     return (
         <div className={b({ role })}>
             <div className={b('content')}>
-                <MD>{content}</MD>
+                <Markdown remarkPlugins={[remarkGfm]}>{content}</Markdown>
             </div>
         </div>
     );