diff --git a/plugins/docuservix/widgets/chat/Message.module.css b/plugins/docuservix/widgets/chat/Message.module.css index 4e3d362..0484719 100644 --- a/plugins/docuservix/widgets/chat/Message.module.css +++ b/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%; diff --git a/plugins/docuservix/widgets/chat/Message.tsx b/plugins/docuservix/widgets/chat/Message.tsx index a09498f..fa120bd 100644 --- a/plugins/docuservix/widgets/chat/Message.tsx +++ b/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 (