docuservix chat

CLAUDE.md

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

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,
 };
 

package.json

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

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/hooks/useChat.ts

@@ -19,7 +19,7 @@ function useQuery(): string {
 }
 
 export function useChat(): UseChatResult {
-    const chatEndpoint = useOptions().api + '/v1/chat';
+    const chatEndpoint = useOptions().api + '/chat';
     const urlQuery = useQuery();
 
     const [messages, setMessages] = useState<IChatMessage[]>([]);

plugins/docuservix/index.ts

@@ -5,7 +5,7 @@ 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';
+    const { api = '/api' } = options;
 
     return function pluginDocuservix(_context: LoadContext): Plugin {
         return {

plugins/docuservix/models/chat.ts

@@ -15,6 +15,23 @@ export interface IChatMessage {
     sources?: IChatSource[];
 }
 
+function stripNumericPrefixes(p: string): string {
+    return p
+        .split('/')
+        .map((seg) => seg.replace(/^\d+-/, ''))
+        .join('/');
+}
+
 export function sourceToUrl(file: string, anchor: string): string {
-    return `/${file}${anchor ? `#${anchor}` : ''}`;
+    let p = file.replace(/^docs\//, '').replace(/\.md$/, '');
+
+    p = stripNumericPrefixes(p);
+
+    return `/docs/${p}${anchor ? `#${anchor}` : ''}`;
+}
+
+export function sourceToPath(file: string): string {
+    const p = file.replace(/^docs\//, '').replace(/\.md$/, '');
+
+    return stripNumericPrefixes(p);
 }

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

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

@@ -1,5 +1,5 @@
 .Message {
-    max-width: 90%;
+    max-width: 85%;
     animation: slideIn 0.3s ease-out;
 }
 
@@ -63,8 +63,8 @@
     text-decoration: underline;
 }
 
-@media (max-width: 576px) {
+@media (min-width: 576px) {
     .Message {
-        max-width: 100%;
+        max-width: 75%;
     }
 }

plugins/docuservix/widgets/chat/Message.tsx

@@ -2,8 +2,6 @@ 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';
@@ -19,9 +17,7 @@ interface MessageProps {
 export function Message({ role, content, sources }: MessageProps): ReactNode {
     return (
         <div className={b({ role })}>
-            <div className={b('content')}>
-                <MD>{content}</MD>
-            </div>
+            <div className={b('content')}>{content}</div>
 
             {sources && sources.length > 0 && (
                 <div className={b('sources')}>
@@ -32,7 +28,7 @@ export function Message({ role, content, sources }: MessageProps): ReactNode {
                             to={sourceToUrl(src.file, src.anchor)}
                             className={b('sourceLink')}
                         >
-                            {src.heading}
+                            {src.heading || sourceToPath(src.file)}
                         </Link>
                     ))}
                 </div>

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%;
-}

yarn.lock

@@ -7308,11 +7308,6 @@ 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"
@@ -10561,23 +10556,6 @@ 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"
@@ -10831,7 +10809,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.1:
+remark-gfm@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/remark-gfm/-/remark-gfm-4.0.1.tgz#33227b2a74397670d357bf05c098eaf8513f0d6b"
   integrity sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==