docuservix/widgets/chat: добавлен компонент чата

Reviewed-on: #6
Co-authored-by: Arswarog <arswarog@yandex.ru>
Co-committed-by: Arswarog <arswarog@yandex.ru>

docusaurus.config.ts

@@ -35,7 +35,7 @@ const config: Config = {
     markdown: {
         mermaid: true,
     },
-    plugins: [docuservix],
+    plugins: [docuservix()],
     themes: ['@docusaurus/theme-mermaid'],
 
     // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future

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/index.ts

@@ -2,30 +2,30 @@ import path from 'path';
 
 import type { LoadContext, Plugin } from '@docusaurus/types';
 
-function pluginDocuservix(_context: LoadContext): Plugin {
-    return {
-        name: 'docuservix',
+export default function docuservix() {
+    return function pluginDocuservix(_context: LoadContext): Plugin {
+        return {
+            name: 'docuservix',
 
-        configureWebpack() {
-            return {
-                resolve: {
-                    alias: {
-                        '@docuservix': path.resolve(__dirname),
+            configureWebpack() {
+                return {
+                    resolve: {
+                        alias: {
+                            '@docuservix': path.resolve(__dirname),
+                        },
                     },
-                },
-            };
-        },
+                };
+            },
 
-        async contentLoaded({ actions }) {
-            const { addRoute } = actions;
+            async contentLoaded({ actions }) {
+                const { addRoute } = actions;
 
-            addRoute({
-                path: '/chat',
-                component: '@docuservix/pages/chat',
-                exact: true,
-            });
-        },
+                addRoute({
+                    path: '/chat',
+                    component: '@docuservix/pages/chat',
+                    exact: true,
+                });
+            },
+        };
     };
 }
-
-export default pluginDocuservix;

plugins/docuservix/widgets/chat/Chat.tsx

@@ -29,7 +29,7 @@ export function Chat({ dialog, typing, statusMessage, onSend }: ChatProps): Reac
             />
             {statusMessage && <div className={b('statusMessage')}>{statusMessage}</div>}
             <Input
-                loading={typing}
+                disabled={typing}
                 onSend={onSend}
             />
         </div>

plugins/docuservix/widgets/chat/Input.tsx

@@ -7,17 +7,17 @@ import styles from './Input.module.css';
 const b = block(styles, 'Input');
 
 interface InputProps {
-    loading?: boolean;
+    disabled?: boolean;
     onSend?: (text: string) => void;
 }
 
-export function Input({ loading, onSend }: InputProps): ReactNode {
+export function Input({ disabled, onSend }: InputProps): ReactNode {
     const [input, setInput] = useState('');
 
     const handleSend = () => {
         const text = input.trim();
 
-        if (!text || loading) {
+        if (!text || disabled) {
             return;
         }
 
@@ -41,12 +41,12 @@ export function Input({ loading, onSend }: InputProps): ReactNode {
                 onKeyDown={handleKeyDown}
                 placeholder="Type your message here..."
                 rows={1}
-                disabled={loading}
+                disabled={disabled}
             />
             <button
                 className={b('send')}
                 onClick={handleSend}
-                disabled={loading || !input.trim()}
+                disabled={disabled || !input.trim()}
             >
                 <PaperPlaneIcon />
             </button>

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

@@ -1,5 +1,5 @@
 .Message {
-    max-width: 85%;
+    max-width: 90%;
     animation: slideIn 0.3s ease-out;
 }
 
@@ -34,94 +34,8 @@
     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) {
+@media (max-width: 576px) {
     .Message {
-        max-width: 75%;
+        max-width: 100%;
     }
 }

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 remarkGfm from 'remark-gfm';
+
+import { MD } from '@docuservix/entities/markdown';
 
 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')}>
-                <Markdown remarkPlugins={[remarkGfm]}>{content}</Markdown>
+                <MD>{content}</MD>
             </div>
         </div>
     );