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/entities/markdown/MD.module.css b/plugins/docuservix/entities/markdown/MD.module.css
new file mode 100644
index 0000000..94c3868
--- /dev/null
+++ b/plugins/docuservix/entities/markdown/MD.module.css
@@ -0,0 +1,59 @@
+.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);
+}
diff --git a/plugins/docuservix/entities/markdown/MD.tsx b/plugins/docuservix/entities/markdown/MD.tsx
new file mode 100644
index 0000000..add0a1d
--- /dev/null
+++ b/plugins/docuservix/entities/markdown/MD.tsx
@@ -0,0 +1,17 @@
+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 (
+
+ {children}
+
+ );
+}
diff --git a/plugins/docuservix/entities/markdown/index.ts b/plugins/docuservix/entities/markdown/index.ts
new file mode 100644
index 0000000..3288ffa
--- /dev/null
+++ b/plugins/docuservix/entities/markdown/index.ts
@@ -0,0 +1 @@
+export { MD } from './MD';
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.tsx b/plugins/docuservix/widgets/chat/Message.tsx
index 9bdcd1a..a09498f 100644
--- a/plugins/docuservix/widgets/chat/Message.tsx
+++ b/plugins/docuservix/widgets/chat/Message.tsx
@@ -1,6 +1,8 @@
import block from 'bem-css-modules';
import React, { ReactNode } from 'react';
+import { MD } from '@docuservix/entities/markdown';
+
import styles from './Message.module.css';
const b = block(styles, 'Message');
@@ -13,7 +15,9 @@ interface MessageProps {
export function Message({ role, content }: MessageProps): ReactNode {
return (
-
{content}
+
+ {content}
+