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

docs/index.md

@@ -1,70 +1,3 @@
 # Добро пожаловать в Docuservix!
 
 Вам надо настроить публикацию документации по инструкции в https://git.jt4d.ru/jt4d/docuservix
-
----
-
-```mermaid
-classDiagram
-    class IApi
-
-    class ProductService {
-        +IProduct[] getProducts
-    }
-
-    ProductService --> IApi
-
-    Animal <|-- Duck
-    Animal <|-- Fish
-    Animal <|-- Zebra
-    Animal : +int age
-    Animal : +String gender
-    Animal: +isMammal()
-    Animal: +mate()
-    class Duck{
-      +String beakColor
-      +swim()
-      +quack()
-    }
-    class Fish{
-      -int sizeInFeet
-      -canEat()
-    }
-    class Zebra{
-      +bool is_wild
-      +run()
-    }
-```
-
-Для современного мира высококачественный прототип будущего проекта предполагает независимые способы
-реализации существующих финансовых и административных условий. Идейные соображения высшего порядка,
-а также начало повседневной работы по формированию позиции обеспечивает широкому кругу
-(специалистов) участие в формировании существующих финансовых и административных условий.
-Безусловно, курс на социально-ориентированный национальный проект прекрасно подходит для реализации
-глубокомысленных рассуждений. Каждый из нас понимает очевидную вещь: консультация с широким активом
-играет определяющее значение для модели развития. Не следует, однако, забывать, что выбранный нами
-инновационный путь создаёт предпосылки для форм воздействия.
-
-Есть над чем задуматься: реплицированные с зарубежных источников, современные исследования призывают
-нас к новым свершениям, которые, в свою очередь, должны быть подвергнуты целой серии независимых
-исследований. Приятно, граждане, наблюдать, как многие известные личности будут обнародованы.
-Следует отметить, что повышение уровня гражданского сознания играет определяющее значение для
-экспериментов, поражающих по своей масштабности и грандиозности.
-
-Безусловно, внедрение современных методик создаёт необходимость включения в производственный план
-целого ряда внеочередных мероприятий с учётом комплекса позиций, занимаемых участниками в отношении
-поставленных задач. Кстати, акционеры крупнейших компаний разоблачены. В своём стремлении улучшить
-пользовательский опыт мы упускаем, что диаграммы связей, превозмогая сложившуюся непростую
-экономическую ситуацию, разоблачены.
-
-```ts
-/**
- * Очень важный класс
- */
-export class Foo {
-    bar(value: number): number {
-        console.log('Bar: ' + value);
-        return value;
-    }
-}
-```

docusaurus.config.ts

@@ -127,12 +127,6 @@ const config: Config = {
             theme: prismThemes.github,
             darkTheme: prismThemes.dracula,
         },
-        mermaid: {
-            theme: {
-                light: 'default',
-                dark: 'base',
-            },
-        },
     } satisfies Preset.ThemeConfig,
 };
 

plugins/docuservix/hooks/useChat.ts

@@ -1,88 +0,0 @@
-import { useLocation } from '@docusaurus/router';
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { useOptions } from '@docuservix/hooks/useOptions';
-import { IChat, IChatMessage, IChatSource } from '@docuservix/models/chat';
-
-interface UseChatResult {
-    dialog: IChat;
-    typing: boolean;
-    statusMessage?: string;
-    sendMessage: (text: string) => void;
-}
-
-function useQuery(): string {
-    const location = useLocation();
-    const params = new URLSearchParams(location.search);
-
-    return params.get('q') ?? '';
-}
-
-export function useChat(): UseChatResult {
-    const chatEndpoint = useOptions().api + '/v1/chat';
-    const urlQuery = useQuery();
-
-    const [messages, setMessages] = useState<IChatMessage[]>([]);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-
-    const initialSentRef = useRef(false);
-    const messagesEndRef = useRef(messages);
-
-    messagesEndRef.current = messages;
-
-    const sendMessage = useCallback(
-        async (text: string) => {
-            const content = text.trim();
-
-            if (!content) {
-                return;
-            }
-
-            const userMessage: IChatMessage = { role: 'user', content };
-            const newHistory = [...messagesEndRef.current, userMessage];
-
-            setMessages(newHistory);
-            setLoading(true);
-            setError(null);
-
-            try {
-                const res = await fetch(chatEndpoint, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ messages: newHistory }),
-                });
-
-                if (!res.ok) {
-                    throw new Error(`HTTP ${res.status}`);
-                }
-
-                const data: { answer: string; sources?: IChatSource[] } = await res.json();
-
-                setMessages((prev) => [
-                    ...prev,
-                    { role: 'assistant', content: data.answer, sources: data.sources },
-                ]);
-            } catch (err) {
-                setError(err instanceof Error ? err.message : 'Ошибка при обращении к серверу');
-            } finally {
-                setLoading(false);
-            }
-        },
-        [chatEndpoint],
-    );
-
-    useEffect(() => {
-        if (urlQuery && !initialSentRef.current) {
-            initialSentRef.current = true;
-            sendMessage(urlQuery);
-        }
-    }, [urlQuery, sendMessage]);
-
-    return {
-        dialog: { messages },
-        typing: loading,
-        statusMessage: error ?? undefined,
-        sendMessage,
-    };
-}

plugins/docuservix/hooks/useOptions.ts

@@ -1,7 +0,0 @@
-import { usePluginData } from '@docusaurus/useGlobalData';
-
-import { DocuservixOptions } from '@docuservix/models/docuservix';
-
-export function useOptions(): DocuservixOptions {
-    return usePluginData('docuservix') as DocuservixOptions;
-}

plugins/docuservix/index.ts

@@ -2,11 +2,7 @@ import path from 'path';
 
 import type { LoadContext, Plugin } from '@docusaurus/types';
 
-import { DocuservixOptions } from '@docuservix/models/docuservix';
-
-export default function docuservix(options: Partial<DocuservixOptions> = {}) {
-    const api = process.env.DOCUSERVIX_API || options.api || '/api';
-
+export default function docuservix() {
     return function pluginDocuservix(_context: LoadContext): Plugin {
         return {
             name: 'docuservix',
@@ -22,11 +18,7 @@ export default function docuservix(options: Partial<DocuservixOptions> = {}) {
             },
 
             async contentLoaded({ actions }) {
-                const { addRoute, setGlobalData } = actions;
-
-                setGlobalData({
-                    api,
-                });
+                const { addRoute } = actions;
 
                 addRoute({
                     path: '/chat',

plugins/docuservix/models/chat.ts

@@ -2,19 +2,7 @@ export interface IChat {
     messages: IChatMessage[];
 }
 
-export interface IChatSource {
-    file: string;
-    heading: string;
-    anchor: string;
-    score: number;
-}
-
 export interface IChatMessage {
     role: 'user' | 'assistant';
     content: string;
-    sources?: IChatSource[];
-}
-
-export function sourceToUrl(file: string, anchor: string): string {
-    return `/${file}${anchor ? `#${anchor}` : ''}`;
 }

plugins/docuservix/models/docuservix.ts

@@ -1,3 +0,0 @@
-export interface DocuservixOptions {
-    api?: string;
-}

plugins/docuservix/pages/chat/ChatPage.tsx

@@ -1,20 +1,30 @@
 import Layout from '@theme/Layout';
 import { ReactNode } from 'react';
 
-import { useChat } from '@docuservix/hooks/useChat';
+import { IChat } from '@docuservix/models/chat';
 import { Chat } from '@docuservix/widgets/chat';
 
-export function ChatPage(): ReactNode {
-    const { dialog, typing, statusMessage, sendMessage } = useChat();
+const dialog: IChat = {
+    messages: [
+        {
+            role: 'user',
+            content: 'Can you show me some CSS animations? It can be simple tools like chatbots...',
+        },
+        {
+            role: 'assistant',
+            content: "Hello! I'm your **AI assistant**. How can I help you today?",
+        },
+    ],
+};
 
+export function ChatPage(): ReactNode {
     return (
         <Layout title="Чат">
             <main className="container margin-vert--lg">
                 <Chat
                     dialog={dialog}
-                    typing={typing}
-                    statusMessage={statusMessage}
-                    onSend={sendMessage}
+                    statusMessage="Unable to connect to the server"
+                    typing
                 />
             </main>
         </Layout>

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

@@ -34,35 +34,6 @@
     border-bottom-right-radius: 0.25rem;
 }
 
-.Message__sources {
-    margin-top: 8px;
-    padding: 8px 1rem 0;
-    border-top: 1px solid var(--ifm-color-emphasis-200);
-}
-
-.Message__sourcesLabel {
-    margin-bottom: 4px;
-    color: var(--ifm-color-emphasis-600);
-    font-weight: var(--ifm-font-weight-semibold);
-    font-size: 0.75rem;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-}
-
-.Message__sourceLink {
-    display: block;
-    overflow: hidden;
-    color: var(--ifm-color-primary);
-    font-size: 0.8rem;
-    white-space: nowrap;
-    text-decoration: none;
-    text-overflow: ellipsis;
-}
-
-.Message__sourceLink:hover {
-    text-decoration: underline;
-}
-
 @media (max-width: 576px) {
     .Message {
         max-width: 100%;

plugins/docuservix/widgets/chat/Message.tsx

@@ -1,11 +1,8 @@
-import Link from '@docusaurus/Link';
 import block from 'bem-css-modules';
 import React, { ReactNode } from 'react';
 
 import { MD } from '@docuservix/entities/markdown';
 
-import { IChatSource, sourceToPath, sourceToUrl } from '@docuservix/models/chat';
-
 import styles from './Message.module.css';
 
 const b = block(styles, 'Message');
@@ -13,30 +10,14 @@ const b = block(styles, 'Message');
 interface MessageProps {
     role: 'user' | 'assistant';
     content: string;
-    sources?: IChatSource[];
 }
 
-export function Message({ role, content, sources }: MessageProps): ReactNode {
+export function Message({ role, content }: MessageProps): ReactNode {
     return (
         <div className={b({ role })}>
             <div className={b('content')}>
                 <MD>{content}</MD>
             </div>
-
-            {sources && sources.length > 0 && (
-                <div className={b('sources')}>
-                    <div className={b('sourcesLabel')}>Источники:</div>
-                    {sources.map((src, j) => (
-                        <Link
-                            key={j}
-                            to={sourceToUrl(src.file, src.anchor)}
-                            className={b('sourceLink')}
-                        >
-                            {src.heading}
-                        </Link>
-                    ))}
-                </div>
-            )}
         </div>
     );
 }

plugins/docuservix/widgets/chat/Messages.tsx

@@ -21,7 +21,6 @@ export function Messages({ messages, typing }: MessagesProps): ReactNode {
                     key={i}
                     role={msg.role}
                     content={msg.content}
-                    sources={msg.sources}
                 />
             ))}
 

src/css/custom.css

@@ -17,35 +17,14 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
-/* Nord dark theme — https://www.nordtheme.com */
+/* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  /* Frost — основной акцент (nord8) */
-  --ifm-color-primary: #88c0d0;
-  --ifm-color-primary-dark: #76b5c7;
-  --ifm-color-primary-darker: #6dafc3;
-  --ifm-color-primary-darkest: #5e81ac;
-  --ifm-color-primary-light: #95c8d8;
-  --ifm-color-primary-lighter: #9ecfdd;
-  --ifm-color-primary-lightest: #b4dce8;
-
-  /* Polar Night — фоны */
-  --ifm-background-color: #2e3440;
-  --ifm-background-surface-color: #3b4252;
-  --ifm-navbar-background-color: #2e3440;
-  --ifm-footer-background-color: #2e3440;
-
-  /* Snow Storm — текст */
-  --ifm-font-color-base: #eceff4;
-  --ifm-font-color-secondary: #d8dee9;
-
-  /* Emphasis scale: Polar Night → Snow Storm */
-  --ifm-color-emphasis-100: #3b4252;
-  --ifm-color-emphasis-200: #434c5e;
-  --ifm-color-emphasis-300: #4c566a;
-  --ifm-color-emphasis-400: #7b8ba0;
-  --ifm-color-emphasis-500: #d8dee9;
-  --ifm-color-emphasis-600: #e5e9f0;
-  --ifm-color-emphasis-700: #eceff4;
-
-  --docusaurus-highlighted-code-line-bg: rgba(136, 192, 208, 0.15);
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

src/theme/Mermaid/index.tsx

@@ -1,82 +0,0 @@
-import ErrorBoundary from '@docusaurus/ErrorBoundary';
-import { ErrorBoundaryErrorMessageFallback } from '@docusaurus/theme-common';
-import { useColorMode } from '@docusaurus/theme-common';
-import {
-    MermaidContainerClassName,
-    useMermaidConfig,
-    useMermaidRenderResult,
-} from '@docusaurus/theme-mermaid/client';
-import type { Props } from '@theme/Mermaid';
-import type { RenderResult } from 'mermaid';
-import React, { useRef, useEffect, useMemo, type ReactNode } from 'react';
-
-import styles from './styles.module.css';
-
-const NORD_THEME_VARIABLES = {
-    background: '#2e3440',
-    mainBkg: '#3b4252',
-    primaryColor: '#5e81ac',
-    primaryTextColor: '#eceff4',
-    primaryBorderColor: '#88c0d0',
-    secondaryColor: '#434c5e',
-    secondaryTextColor: '#d8dee9',
-    secondaryBorderColor: '#4c566a',
-    tertiaryColor: '#3b4252',
-    tertiaryTextColor: '#d8dee9',
-    tertiaryBorderColor: '#4c566a',
-    lineColor: '#88c0d0',
-    edgeLabelBackground: '#434c5e',
-    textColor: '#eceff4',
-    titleColor: '#88c0d0',
-    nodeBorder: '#4c566a',
-    clusterBkg: '#434c5e',
-    clusterBorder: '#4c566a',
-};
-
-function MermaidRenderResult({ renderResult }: { renderResult: RenderResult }): ReactNode {
-    const ref = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        const div = ref.current!;
-
-        renderResult.bindFunctions?.(div);
-    }, [renderResult]);
-
-    return (
-        <div
-            ref={ref}
-            className={`${MermaidContainerClassName} ${styles.container}`}
-            // eslint-disable-next-line react/no-danger -- mermaid renders trusted SVG
-            dangerouslySetInnerHTML={{ __html: renderResult.svg }}
-        />
-    );
-}
-
-function MermaidRenderer({ value }: Props): ReactNode {
-    const { colorMode } = useColorMode();
-    const baseConfig = useMermaidConfig();
-
-    const config = useMemo(
-        () =>
-            colorMode === 'dark'
-                ? { ...baseConfig, themeVariables: NORD_THEME_VARIABLES }
-                : baseConfig,
-        [colorMode, baseConfig],
-    );
-
-    const renderResult = useMermaidRenderResult({ text: value, config });
-
-    if (renderResult === null) {
-        return null;
-    }
-
-    return <MermaidRenderResult renderResult={renderResult} />;
-}
-
-export default function Mermaid(props: Props): ReactNode {
-    return (
-        <ErrorBoundary fallback={(params) => <ErrorBoundaryErrorMessageFallback {...params} />}>
-            <MermaidRenderer {...props} />
-        </ErrorBoundary>
-    );
-}

src/theme/Mermaid/styles.module.css

@@ -1,7 +0,0 @@
-.container {
-    max-width: 100%;
-}
-
-.container > svg {
-    max-width: 100%;
-}