docuservix chat

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

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

@@ -0,0 +1,88 @@
+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 + '/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

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

plugins/docuservix/models/chat.ts

@@ -2,7 +2,36 @@ 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[];
+}
+
+function stripNumericPrefixes(p: string): string {
+    return p
+        .split('/')
+        .map((seg) => seg.replace(/^\d+-/, ''))
+        .join('/');
+}
+
+export function sourceToUrl(file: string, anchor: string): string {
+    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/models/docuservix.ts

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

plugins/docuservix/pages/chat/ChatPage.tsx

@@ -1,30 +1,20 @@
 import Layout from '@theme/Layout';
 import { ReactNode } from 'react';
 
-import { IChat } from '@docuservix/models/chat';
+import { useChat } from '@docuservix/hooks/useChat';
 import { Chat } from '@docuservix/widgets/chat';
 
-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 {
+    const { dialog, typing, statusMessage, sendMessage } = useChat();
+
     return (
         <Layout title="Чат">
             <main className="container margin-vert--lg">
                 <Chat
                     dialog={dialog}
-                    statusMessage="Unable to connect to the server"
+                    typing={typing}
-                    typing
+                    statusMessage={statusMessage}
+                    onSend={sendMessage}
                 />
             </main>
         </Layout>

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

@@ -34,90 +34,33 @@
     border-bottom-right-radius: 0.25rem;
 }
 
-/* Markdown typography */
+.Message__sources {
-
+    margin-top: 8px;
-.Message__content p:last-child {
+    padding: 8px 1rem 0;
-    margin-bottom: 0;
+    border-top: 1px solid var(--ifm-color-emphasis-200);
 }
 
-.Message__content p:first-child {
+.Message__sourcesLabel {
-    margin-top: 0;
+    margin-bottom: 4px;
-}
+    color: var(--ifm-color-emphasis-600);
-
-.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);
+    font-size: 0.75rem;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
 }
 
-.Message__content blockquote {
+.Message__sourceLink {
-    margin: 0.5em 0;
+    display: block;
-    padding: 0.25em 1em;
+    overflow: hidden;
-    border-left: 3px solid var(--ifm-color-emphasis-300);
+    color: var(--ifm-color-primary);
-    color: var(--ifm-color-emphasis-700);
+    font-size: 0.8rem;
+    white-space: nowrap;
+    text-decoration: none;
+    text-overflow: ellipsis;
 }
 
-/* User role overrides for light-on-dark text */
+.Message__sourceLink:hover {
-
+    text-decoration: underline;
-.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 (max-width: 576px) {

plugins/docuservix/widgets/chat/Message.tsx

@@ -1,7 +1,10 @@
+import Link from '@docusaurus/Link';
 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 { IChatSource, sourceToPath, sourceToUrl } from '@docuservix/models/chat';
 
 import styles from './Message.module.css';
 
@@ -10,14 +13,30 @@ const b = block(styles, 'Message');
 interface MessageProps {
     role: 'user' | 'assistant';
     content: string;
+    sources?: IChatSource[];
 }
 
-export function Message({ role, content }: MessageProps): ReactNode {
+export function Message({ role, content, sources }: MessageProps): ReactNode {
     return (
         <div className={b({ role })}>
             <div className={b('content')}>
-                <Markdown remarkPlugins={[remarkGfm]}>{content}</Markdown>
+                <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 || sourceToPath(src.file)}
+                        </Link>
+                    ))}
+                </div>
+            )}
         </div>
     );
 }

plugins/docuservix/widgets/chat/Messages.tsx

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