diff --git a/package.json b/package.json index 23618f2..ce868b3 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,9 @@ "js-yaml": "^4.2.0", "prism-react-renderer": "^2.3.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": { "@docusaurus/module-type-aliases": "3.10.1", diff --git a/plugins/docuservix/pages/chat/ChatPage.tsx b/plugins/docuservix/pages/chat/ChatPage.tsx index 9f9131c..8783705 100644 --- a/plugins/docuservix/pages/chat/ChatPage.tsx +++ b/plugins/docuservix/pages/chat/ChatPage.tsx @@ -12,7 +12,7 @@ const dialog: IChat = { }, { role: 'assistant', - content: "Hello! I'm your AI assistant. How can I help you today?", + content: "Hello! I'm your **AI assistant**. How can I help you today?", }, ], }; diff --git a/plugins/docuservix/widgets/chat/Message.module.css b/plugins/docuservix/widgets/chat/Message.module.css index 4e3d362..e9b7bb4 100644 --- a/plugins/docuservix/widgets/chat/Message.module.css +++ b/plugins/docuservix/widgets/chat/Message.module.css @@ -34,6 +34,92 @@ border-bottom-right-radius: 0.25rem; } +/* Markdown typography */ + +.Message__content p:last-child { + margin-bottom: 0; +} + +.Message__content p:first-child { + margin-top: 0; +} + +.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); +} + +.Message__content blockquote { + margin: 0.5em 0; + padding: 0.25em 1em; + border-left: 3px solid var(--ifm-color-emphasis-300); + color: var(--ifm-color-emphasis-700); +} + +/* User role overrides for light-on-dark text */ + +.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) { .Message { max-width: 100%; diff --git a/plugins/docuservix/widgets/chat/Message.tsx b/plugins/docuservix/widgets/chat/Message.tsx index 9bdcd1a..c2bd02f 100644 --- a/plugins/docuservix/widgets/chat/Message.tsx +++ b/plugins/docuservix/widgets/chat/Message.tsx @@ -1,5 +1,7 @@ import block from 'bem-css-modules'; import React, { ReactNode } from 'react'; +import Markdown from 'react-markdown'; +import remarkGfm from 'remark-gfm'; import styles from './Message.module.css'; @@ -13,7 +15,9 @@ interface MessageProps { export function Message({ role, content }: MessageProps): ReactNode { return (