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

@@ -34,6 +34,35 @@
     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,8 +1,11 @@
+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');
@@ -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')}>
                 <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}
                 />
             ))}