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

CLAUDE.md

@@ -11,11 +11,13 @@ Docuservix docs — шаблон документационного сайта
 
 ## Commands
 
-- `npm start` — dev-сервер
-- `npm run build` — production-сборка в `build/`
-- `npm run typecheck` — проверка типов (tsc)
-- `npm run prettier:check` — проверка форматирования
-- `npm run prettier:fix` — автоформатирование
+Используется **yarn**.
+
+- `yarn start` — dev-сервер
+- `yarn build` — production-сборка в `build/`
+- `yarn typecheck` — проверка типов (tsc)
+- `yarn prettier:check` — проверка форматирования
+- `yarn prettier:fix` — автоформатирование
 
 ## Architecture
 

package.json

@@ -48,7 +48,9 @@
         "js-yaml": "^4.2.0",
         "prism-react-renderer": "^2.3.0",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "react-markdown": "^10.1.0",
+        "remark-gfm": "^4.0.1"
     },
     "devDependencies": {
         "@docusaurus/module-type-aliases": "3.10.1",

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.module.css

@@ -34,6 +34,92 @@
     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 {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.Message_role_user .Message__content pre {
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.Message_role_user .Message__content th,
+.Message_role_user .Message__content td {
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.Message_role_user .Message__content th {
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.Message_role_user .Message__content blockquote {
+    border-left-color: rgba(255, 255, 255, 0.4);
+    color: rgba(255, 255, 255, 0.85);
+}
+
 @media (min-width: 576px) {
     .Message {
         max-width: 75%;

plugins/docuservix/widgets/chat/Message.tsx

@@ -1,5 +1,7 @@
 import block from 'bem-css-modules';
 import React, { ReactNode } from 'react';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 import styles from './Message.module.css';
 
@@ -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')}>
+                <Markdown remarkPlugins={[remarkGfm]}>{content}</Markdown>
+            </div>
         </div>
     );
 }

yarn.lock

@@ -7308,6 +7308,11 @@ html-tags@^3.3.1:
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
   integrity sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==
 
+html-url-attributes@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/html-url-attributes/-/html-url-attributes-3.0.1.tgz#83b052cd5e437071b756cd74ae70f708870c2d87"
+  integrity sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==
+
 html-void-elements@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-3.0.0.tgz#fc9dbd84af9e747249034d4d62602def6517f1d7"
@@ -10556,6 +10561,23 @@ react-loadable-ssr-addon-v5-slorber@^1.0.3:
   dependencies:
     "@types/react" "*"
 
+react-markdown@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-10.1.0.tgz#e22bc20faddbc07605c15284255653c0f3bad5ca"
+  integrity sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    "@types/mdast" "^4.0.0"
+    devlop "^1.0.0"
+    hast-util-to-jsx-runtime "^2.0.0"
+    html-url-attributes "^3.0.0"
+    mdast-util-to-hast "^13.0.0"
+    remark-parse "^11.0.0"
+    remark-rehype "^11.0.0"
+    unified "^11.0.0"
+    unist-util-visit "^5.0.0"
+    vfile "^6.0.0"
+
 react-router-config@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988"
@@ -10809,7 +10831,7 @@ remark-frontmatter@^5.0.0:
     micromark-extension-frontmatter "^2.0.0"
     unified "^11.0.0"
 
-remark-gfm@^4.0.0:
+remark-gfm@^4.0.0, remark-gfm@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/remark-gfm/-/remark-gfm-4.0.1.tgz#33227b2a74397670d357bf05c098eaf8513f0d6b"
   integrity sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==