diff --git a/components/Chat/ChatLayout.tsx b/components/Chat/ChatLayout.tsx
index bb477ba..d96c14c 100644
--- a/components/Chat/ChatLayout.tsx
+++ b/components/Chat/ChatLayout.tsx
@@ -34,6 +34,7 @@ import { chat, type ChatMessage } from '@/app/actions/chat';
import { getInstalledModels, type OllamaModel } from '@/app/actions/ollama';
import { useThemeContext } from '@/components/DynamicThemeProvider';
import { SettingsModal } from '@/components/Settings/SettingsModal';
+import { MarkdownMessage } from './MarkdownMessage';
interface Message {
id: string;
@@ -371,9 +372,13 @@ export default function ChatLayout() {
borderTopRightRadius: message.role === 'user' ? 0 : undefined,
}}
>
-
- {message.content}
-
+ {message.role === 'assistant' ? (
+
+ ) : (
+
+ {message.content}
+
+ )}
{message.role === 'user' && (
diff --git a/components/Chat/MarkdownMessage.module.css b/components/Chat/MarkdownMessage.module.css
new file mode 100644
index 0000000..b642127
--- /dev/null
+++ b/components/Chat/MarkdownMessage.module.css
@@ -0,0 +1,20 @@
+.markdown {
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+}
+
+.markdown p:last-child {
+ margin-bottom: 0;
+}
+
+.preWrapper {
+ margin: 0.5em 0;
+}
+
+.codeBlock {
+ display: block;
+ white-space: pre-wrap;
+ word-break: break-word;
+ max-width: 100%;
+ overflow-x: auto;
+}
diff --git a/components/Chat/MarkdownMessage.tsx b/components/Chat/MarkdownMessage.tsx
new file mode 100644
index 0000000..2842e15
--- /dev/null
+++ b/components/Chat/MarkdownMessage.tsx
@@ -0,0 +1,79 @@
+import ReactMarkdown from 'react-markdown';
+import { Anchor, Blockquote, Code, List, Text, Title } from '@mantine/core';
+import classes from './MarkdownMessage.module.css';
+
+interface MarkdownMessageProps {
+ content: string;
+}
+
+export function MarkdownMessage({ content }: MarkdownMessageProps) {
+ return (
+
+
(
+
+ {children}
+
+ ),
+ h1: ({ children }) => (
+
+ {children}
+
+ ),
+ h2: ({ children }) => (
+
+ {children}
+
+ ),
+ h3: ({ children }) => (
+
+ {children}
+
+ ),
+ code: ({ className, children, ...props }) => {
+ const isInline = !className;
+ if (isInline) {
+ return {children};
+ }
+ return (
+
+ {children}
+
+ );
+ },
+ pre: ({ children }) => {children}
,
+ ul: ({ children }) => (
+
+ {children}
+
+ ),
+ ol: ({ children }) => (
+
+ {children}
+
+ ),
+ li: ({ children }) => {children},
+ a: ({ href, children }) => (
+
+ {children}
+
+ ),
+ blockquote: ({ children }) => {children}
,
+ strong: ({ children }) => (
+
+ {children}
+
+ ),
+ em: ({ children }) => (
+
+ {children}
+
+ ),
+ }}
+ >
+ {content}
+
+