COPY docuservix
This commit is contained in:
@@ -0,0 +1,210 @@
|
||||
import { useLocation } from '@docusaurus/router';
|
||||
import Link from '@docusaurus/Link';
|
||||
import Layout from '@theme/Layout';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { chatUrl } from '@docuservix-search/config';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
interface Source {
|
||||
file: string;
|
||||
heading: string;
|
||||
anchor: string;
|
||||
score: number;
|
||||
}
|
||||
|
||||
interface Message {
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
sources?: Source[];
|
||||
}
|
||||
|
||||
function stripNumericPrefixes(p: string): string {
|
||||
return p
|
||||
.split('/')
|
||||
.map((seg) => seg.replace(/^\d+-/, ''))
|
||||
.join('/');
|
||||
}
|
||||
|
||||
function sourceToUrl(file: string, anchor: string): string {
|
||||
let p = file.replace(/^docs\//, '').replace(/\.md$/, '');
|
||||
|
||||
p = stripNumericPrefixes(p);
|
||||
|
||||
return `/docs/${p}${anchor ? `#${anchor}` : ''}`;
|
||||
}
|
||||
|
||||
function sourceToPath(file: string): string {
|
||||
const p = file.replace(/^docs\//, '').replace(/\.md$/, '');
|
||||
|
||||
return stripNumericPrefixes(p);
|
||||
}
|
||||
|
||||
function useQuery(): string {
|
||||
const location = useLocation();
|
||||
const params = new URLSearchParams(location.search);
|
||||
|
||||
return params.get('q') ?? '';
|
||||
}
|
||||
|
||||
export default function ChatPage(): JSX.Element {
|
||||
const urlQuery = useQuery();
|
||||
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [input, setInput] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
const initialSentRef = useRef(false);
|
||||
|
||||
const sendMessage = useCallback(async (content: string, history: Message[]) => {
|
||||
if (!content.trim()) return;
|
||||
|
||||
const userMessage: Message = { role: 'user', content };
|
||||
const newHistory = [...history, userMessage];
|
||||
|
||||
setMessages(newHistory);
|
||||
setInput('');
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const res = await fetch(chatUrl, {
|
||||
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?: Source[] } = 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);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (urlQuery && !initialSentRef.current) {
|
||||
initialSentRef.current = true;
|
||||
sendMessage(urlQuery, []);
|
||||
}
|
||||
}, [urlQuery, sendMessage]);
|
||||
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, [messages, loading]);
|
||||
|
||||
const handleSend = () => {
|
||||
if (!loading && input.trim()) {
|
||||
sendMessage(input, messages);
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSend();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout title="Чат">
|
||||
<div className={styles.page}>
|
||||
{urlQuery && (
|
||||
<div className={styles.header}>
|
||||
<Link
|
||||
to={`/search?q=${encodeURIComponent(urlQuery)}`}
|
||||
className={styles.backLink}
|
||||
>
|
||||
← Назад к поиску
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={styles.messages}>
|
||||
{messages.length === 0 && !loading && (
|
||||
<div className={styles.empty}>Задайте вопрос...</div>
|
||||
)}
|
||||
|
||||
{messages.map((msg, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`${styles.messageRow} ${msg.role === 'user' ? styles.messageRowUser : styles.messageRowAssistant}`}
|
||||
>
|
||||
<div
|
||||
className={`${styles.bubble} ${msg.role === 'user' ? styles.userBubble : styles.assistantBubble}`}
|
||||
>
|
||||
<div className={styles.bubbleContent}>{msg.content}</div>
|
||||
|
||||
{msg.sources && msg.sources.length > 0 && (
|
||||
<div className={styles.sources}>
|
||||
<div className={styles.sourcesLabel}>Источники:</div>
|
||||
{msg.sources.map((src, j) => (
|
||||
<Link
|
||||
key={j}
|
||||
to={sourceToUrl(src.file, src.anchor)}
|
||||
className={styles.sourceLink}
|
||||
>
|
||||
{src.heading || sourceToPath(src.file)}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{loading && (
|
||||
<div className={`${styles.messageRow} ${styles.messageRowAssistant}`}>
|
||||
<div
|
||||
className={`${styles.bubble} ${styles.assistantBubble} ${styles.loadingBubble}`}
|
||||
>
|
||||
<span className={styles.loadingDot} />
|
||||
<span className={styles.loadingDot} />
|
||||
<span className={styles.loadingDot} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className={styles.errorRow}>
|
||||
<div className={styles.errorText}>{error}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
<div className={styles.inputRow}>
|
||||
<textarea
|
||||
className={styles.input}
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Введите сообщение... (Enter — отправить, Shift+Enter — перенос)"
|
||||
rows={2}
|
||||
disabled={loading}
|
||||
/>
|
||||
<button
|
||||
className={styles.sendBtn}
|
||||
onClick={handleSend}
|
||||
disabled={loading || !input.trim()}
|
||||
>
|
||||
Отправить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,203 @@
|
||||
.page {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem 2rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid var(--ifm-color-emphasis-200);
|
||||
}
|
||||
|
||||
.backLink {
|
||||
color: var(--ifm-color-primary);
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.backLink:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.messages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 2rem 0;
|
||||
color: var(--ifm-color-emphasis-500);
|
||||
font-size: 0.95rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.messageRow {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.messageRowUser {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.messageRowAssistant {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
max-width: 75%;
|
||||
padding: 10px 14px;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
border-radius: var(--ifm-global-radius);
|
||||
}
|
||||
|
||||
.userBubble {
|
||||
color: var(--ifm-color-primary-contrast-foreground);
|
||||
background: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.assistantBubble {
|
||||
color: var(--ifm-font-color-base);
|
||||
background: var(--ifm-background-surface-color);
|
||||
border: 1px solid var(--ifm-color-emphasis-200);
|
||||
}
|
||||
|
||||
.bubbleContent {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sources {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--ifm-color-emphasis-200);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.sourceLink {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: var(--ifm-color-primary);
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sourceLink:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.loadingBubble {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.loadingDot {
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: var(--ifm-color-emphasis-400);
|
||||
border-radius: 50%;
|
||||
animation: bounce 1.2s infinite;
|
||||
}
|
||||
|
||||
.loadingDot:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.loadingDot:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
60%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
.errorRow {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.errorText {
|
||||
padding: 8px 14px;
|
||||
color: var(--ifm-color-danger);
|
||||
font-size: 0.85rem;
|
||||
background: var(--ifm-color-danger-contrast-background);
|
||||
border: 1px solid var(--ifm-color-danger);
|
||||
border-radius: var(--ifm-global-radius);
|
||||
}
|
||||
|
||||
.inputRow {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-end;
|
||||
padding: 0.75rem 0;
|
||||
border-top: 1px solid var(--ifm-color-emphasis-200);
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
color: var(--ifm-font-color-base);
|
||||
font-size: var(--ifm-font-size-base);
|
||||
font-family: inherit;
|
||||
background: var(--ifm-background-surface-color);
|
||||
border: 1px solid var(--ifm-color-emphasis-300);
|
||||
border-radius: var(--ifm-global-radius);
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border-color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.input:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.sendBtn {
|
||||
padding: 8px 18px;
|
||||
color: var(--ifm-color-primary-contrast-foreground);
|
||||
font-weight: var(--ifm-font-weight-semibold);
|
||||
font-size: 0.875rem;
|
||||
white-space: nowrap;
|
||||
background: var(--ifm-color-primary);
|
||||
border: none;
|
||||
border-radius: var(--ifm-global-radius);
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.sendBtn:hover:not(:disabled) {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.sendBtn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
Reference in New Issue
Block a user