Compare commits
10
Commits
master
..
32544db27e
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
32544db27e | ||
|
|
cfce250d07 | ||
|
|
bd4dfe7bc5 | ||
|
|
cacdf23c87 | ||
|
|
915077b034 | ||
|
|
93750c63c6 | ||
|
|
1ccb499066 | ||
|
|
65eb2ce3cb | ||
|
|
436e425119 | ||
|
|
a8e9582fe6 |
@@ -11,13 +11,11 @@ Docuservix docs — шаблон документационного сайта
|
|||||||
|
|
||||||
## Commands
|
## Commands
|
||||||
|
|
||||||
Используется **yarn**.
|
- `npm start` — dev-сервер
|
||||||
|
- `npm run build` — production-сборка в `build/`
|
||||||
- `yarn start` — dev-сервер
|
- `npm run typecheck` — проверка типов (tsc)
|
||||||
- `yarn build` — production-сборка в `build/`
|
- `npm run prettier:check` — проверка форматирования
|
||||||
- `yarn typecheck` — проверка типов (tsc)
|
- `npm run prettier:fix` — автоформатирование
|
||||||
- `yarn prettier:check` — проверка форматирования
|
|
||||||
- `yarn prettier:fix` — автоформатирование
|
|
||||||
|
|
||||||
## Architecture
|
## Architecture
|
||||||
|
|
||||||
|
|||||||
@@ -1,70 +1,3 @@
|
|||||||
# Добро пожаловать в Docuservix!
|
# Добро пожаловать в Docuservix!
|
||||||
|
|
||||||
Вам надо настроить публикацию документации по инструкции в https://git.jt4d.ru/jt4d/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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|||||||
@@ -35,7 +35,7 @@ const config: Config = {
|
|||||||
markdown: {
|
markdown: {
|
||||||
mermaid: true,
|
mermaid: true,
|
||||||
},
|
},
|
||||||
plugins: [docuservix()],
|
plugins: [docuservix],
|
||||||
themes: ['@docusaurus/theme-mermaid'],
|
themes: ['@docusaurus/theme-mermaid'],
|
||||||
|
|
||||||
// Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
|
// Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
|
||||||
@@ -127,12 +127,6 @@ const config: Config = {
|
|||||||
theme: prismThemes.github,
|
theme: prismThemes.github,
|
||||||
darkTheme: prismThemes.dracula,
|
darkTheme: prismThemes.dracula,
|
||||||
},
|
},
|
||||||
mermaid: {
|
|
||||||
theme: {
|
|
||||||
light: 'default',
|
|
||||||
dark: 'base',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
} satisfies Preset.ThemeConfig,
|
} satisfies Preset.ThemeConfig,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
+1
-3
@@ -48,9 +48,7 @@
|
|||||||
"js-yaml": "^4.2.0",
|
"js-yaml": "^4.2.0",
|
||||||
"prism-react-renderer": "^2.3.0",
|
"prism-react-renderer": "^2.3.0",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0"
|
||||||
"react-markdown": "^10.1.0",
|
|
||||||
"remark-gfm": "^4.0.1"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@docusaurus/module-type-aliases": "3.10.1",
|
"@docusaurus/module-type-aliases": "3.10.1",
|
||||||
|
|||||||
@@ -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);
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { MD } from './MD';
|
|
||||||
@@ -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,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
import { usePluginData } from '@docusaurus/useGlobalData';
|
|
||||||
|
|
||||||
import { DocuservixOptions } from '@docuservix/models/docuservix';
|
|
||||||
|
|
||||||
export function useOptions(): DocuservixOptions {
|
|
||||||
return usePluginData('docuservix') as DocuservixOptions;
|
|
||||||
}
|
|
||||||
+21
-29
@@ -2,38 +2,30 @@ import path from 'path';
|
|||||||
|
|
||||||
import type { LoadContext, Plugin } from '@docusaurus/types';
|
import type { LoadContext, Plugin } from '@docusaurus/types';
|
||||||
|
|
||||||
import { DocuservixOptions } from '@docuservix/models/docuservix';
|
function pluginDocuservix(_context: LoadContext): Plugin {
|
||||||
|
return {
|
||||||
|
name: 'docuservix',
|
||||||
|
|
||||||
export default function docuservix(options: Partial<DocuservixOptions> = {}) {
|
configureWebpack() {
|
||||||
const api = process.env.DOCUSERVIX_API || options.api || '/api';
|
return {
|
||||||
|
resolve: {
|
||||||
return function pluginDocuservix(_context: LoadContext): Plugin {
|
alias: {
|
||||||
return {
|
'@docuservix': path.resolve(__dirname),
|
||||||
name: 'docuservix',
|
|
||||||
|
|
||||||
configureWebpack() {
|
|
||||||
return {
|
|
||||||
resolve: {
|
|
||||||
alias: {
|
|
||||||
'@docuservix': path.resolve(__dirname),
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
},
|
||||||
},
|
};
|
||||||
|
},
|
||||||
|
|
||||||
async contentLoaded({ actions }) {
|
async contentLoaded({ actions }) {
|
||||||
const { addRoute, setGlobalData } = actions;
|
const { addRoute } = actions;
|
||||||
|
|
||||||
setGlobalData({
|
addRoute({
|
||||||
api,
|
path: '/chat',
|
||||||
});
|
component: '@docuservix/pages/chat',
|
||||||
|
exact: true,
|
||||||
addRoute({
|
});
|
||||||
path: '/chat',
|
},
|
||||||
component: '@docuservix/pages/chat',
|
|
||||||
exact: true,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default pluginDocuservix;
|
||||||
|
|||||||
@@ -2,19 +2,7 @@ export interface IChat {
|
|||||||
messages: IChatMessage[];
|
messages: IChatMessage[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IChatSource {
|
|
||||||
file: string;
|
|
||||||
heading: string;
|
|
||||||
anchor: string;
|
|
||||||
score: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IChatMessage {
|
export interface IChatMessage {
|
||||||
role: 'user' | 'assistant';
|
role: 'user' | 'assistant';
|
||||||
content: string;
|
content: string;
|
||||||
sources?: IChatSource[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function sourceToUrl(file: string, anchor: string): string {
|
|
||||||
return `/${file}${anchor ? `#${anchor}` : ''}`;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +0,0 @@
|
|||||||
export interface DocuservixOptions {
|
|
||||||
api?: string;
|
|
||||||
}
|
|
||||||
@@ -1,20 +1,30 @@
|
|||||||
import Layout from '@theme/Layout';
|
import Layout from '@theme/Layout';
|
||||||
import { ReactNode } from 'react';
|
import { ReactNode } from 'react';
|
||||||
|
|
||||||
import { useChat } from '@docuservix/hooks/useChat';
|
import { IChat } from '@docuservix/models/chat';
|
||||||
import { Chat } from '@docuservix/widgets/chat';
|
import { Chat } from '@docuservix/widgets/chat';
|
||||||
|
|
||||||
export function ChatPage(): ReactNode {
|
const dialog: IChat = {
|
||||||
const { dialog, typing, statusMessage, sendMessage } = useChat();
|
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 (
|
return (
|
||||||
<Layout title="Чат">
|
<Layout title="Чат">
|
||||||
<main className="container margin-vert--lg">
|
<main className="container margin-vert--lg">
|
||||||
<Chat
|
<Chat
|
||||||
dialog={dialog}
|
dialog={dialog}
|
||||||
typing={typing}
|
statusMessage="Unable to connect to the server"
|
||||||
statusMessage={statusMessage}
|
typing
|
||||||
onSend={sendMessage}
|
|
||||||
/>
|
/>
|
||||||
</main>
|
</main>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ export function Chat({ dialog, typing, statusMessage, onSend }: ChatProps): Reac
|
|||||||
/>
|
/>
|
||||||
{statusMessage && <div className={b('statusMessage')}>{statusMessage}</div>}
|
{statusMessage && <div className={b('statusMessage')}>{statusMessage}</div>}
|
||||||
<Input
|
<Input
|
||||||
disabled={typing}
|
loading={typing}
|
||||||
onSend={onSend}
|
onSend={onSend}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -7,17 +7,17 @@ import styles from './Input.module.css';
|
|||||||
const b = block(styles, 'Input');
|
const b = block(styles, 'Input');
|
||||||
|
|
||||||
interface InputProps {
|
interface InputProps {
|
||||||
disabled?: boolean;
|
loading?: boolean;
|
||||||
onSend?: (text: string) => void;
|
onSend?: (text: string) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Input({ disabled, onSend }: InputProps): ReactNode {
|
export function Input({ loading, onSend }: InputProps): ReactNode {
|
||||||
const [input, setInput] = useState('');
|
const [input, setInput] = useState('');
|
||||||
|
|
||||||
const handleSend = () => {
|
const handleSend = () => {
|
||||||
const text = input.trim();
|
const text = input.trim();
|
||||||
|
|
||||||
if (!text || disabled) {
|
if (!text || loading) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -41,12 +41,12 @@ export function Input({ disabled, onSend }: InputProps): ReactNode {
|
|||||||
onKeyDown={handleKeyDown}
|
onKeyDown={handleKeyDown}
|
||||||
placeholder="Type your message here..."
|
placeholder="Type your message here..."
|
||||||
rows={1}
|
rows={1}
|
||||||
disabled={disabled}
|
disabled={loading}
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
className={b('send')}
|
className={b('send')}
|
||||||
onClick={handleSend}
|
onClick={handleSend}
|
||||||
disabled={disabled || !input.trim()}
|
disabled={loading || !input.trim()}
|
||||||
>
|
>
|
||||||
<PaperPlaneIcon />
|
<PaperPlaneIcon />
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
.Message {
|
.Message {
|
||||||
max-width: 90%;
|
max-width: 85%;
|
||||||
animation: slideIn 0.3s ease-out;
|
animation: slideIn 0.3s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -34,37 +34,8 @@
|
|||||||
border-bottom-right-radius: 0.25rem;
|
border-bottom-right-radius: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Message__sources {
|
@media (min-width: 576px) {
|
||||||
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 {
|
.Message {
|
||||||
max-width: 100%;
|
max-width: 75%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,11 +1,6 @@
|
|||||||
import Link from '@docusaurus/Link';
|
|
||||||
import block from 'bem-css-modules';
|
import block from 'bem-css-modules';
|
||||||
import React, { ReactNode } from 'react';
|
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';
|
import styles from './Message.module.css';
|
||||||
|
|
||||||
const b = block(styles, 'Message');
|
const b = block(styles, 'Message');
|
||||||
@@ -13,30 +8,12 @@ const b = block(styles, 'Message');
|
|||||||
interface MessageProps {
|
interface MessageProps {
|
||||||
role: 'user' | 'assistant';
|
role: 'user' | 'assistant';
|
||||||
content: string;
|
content: string;
|
||||||
sources?: IChatSource[];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Message({ role, content, sources }: MessageProps): ReactNode {
|
export function Message({ role, content }: MessageProps): ReactNode {
|
||||||
return (
|
return (
|
||||||
<div className={b({ role })}>
|
<div className={b({ role })}>
|
||||||
<div className={b('content')}>
|
<div className={b('content')}>{content}</div>
|
||||||
<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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -21,7 +21,6 @@ export function Messages({ messages, typing }: MessagesProps): ReactNode {
|
|||||||
key={i}
|
key={i}
|
||||||
role={msg.role}
|
role={msg.role}
|
||||||
content={msg.content}
|
content={msg.content}
|
||||||
sources={msg.sources}
|
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
|
|||||||
+9
-30
@@ -17,35 +17,14 @@
|
|||||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
|
--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'] {
|
[data-theme='dark'] {
|
||||||
/* Frost — основной акцент (nord8) */
|
--ifm-color-primary: #25c2a0;
|
||||||
--ifm-color-primary: #88c0d0;
|
--ifm-color-primary-dark: #21af90;
|
||||||
--ifm-color-primary-dark: #76b5c7;
|
--ifm-color-primary-darker: #1fa588;
|
||||||
--ifm-color-primary-darker: #6dafc3;
|
--ifm-color-primary-darkest: #1a8870;
|
||||||
--ifm-color-primary-darkest: #5e81ac;
|
--ifm-color-primary-light: #29d5b0;
|
||||||
--ifm-color-primary-light: #95c8d8;
|
--ifm-color-primary-lighter: #32d8b4;
|
||||||
--ifm-color-primary-lighter: #9ecfdd;
|
--ifm-color-primary-lightest: #4fddbf;
|
||||||
--ifm-color-primary-lightest: #b4dce8;
|
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
/* 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);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
.container {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container > svg {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
@@ -7308,11 +7308,6 @@ html-tags@^3.3.1:
|
|||||||
resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
|
resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
|
||||||
integrity sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==
|
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:
|
html-void-elements@^3.0.0:
|
||||||
version "3.0.0"
|
version "3.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-3.0.0.tgz#fc9dbd84af9e747249034d4d62602def6517f1d7"
|
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:
|
dependencies:
|
||||||
"@types/react" "*"
|
"@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:
|
react-router-config@^5.1.1:
|
||||||
version "5.1.1"
|
version "5.1.1"
|
||||||
resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988"
|
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"
|
micromark-extension-frontmatter "^2.0.0"
|
||||||
unified "^11.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"
|
version "4.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/remark-gfm/-/remark-gfm-4.0.1.tgz#33227b2a74397670d357bf05c098eaf8513f0d6b"
|
resolved "https://registry.yarnpkg.com/remark-gfm/-/remark-gfm-4.0.1.tgz#33227b2a74397670d357bf05c098eaf8513f0d6b"
|
||||||
integrity sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==
|
integrity sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==
|
||||||
|
|||||||
Reference in New Issue
Block a user