changes

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,
                       }}
                     >
-                      <Text size="sm" style={{ lineHeight: 1.6 }}>
-                        {message.content}
-                      </Text>
+                      {message.role === 'assistant' ? (
+                        <MarkdownMessage content={message.content} />
+                      ) : (
+                        <Text size="sm" style={{ lineHeight: 1.6 }}>
+                          {message.content}
+                        </Text>
+                      )}
                     </Paper>
 
                     {message.role === 'user' && (

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;
+}

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 (
+    <div className={classes.markdown}>
+      <ReactMarkdown
+        components={{
+          p: ({ children }) => (
+            <Text size="sm" style={{ lineHeight: 1.6, marginBottom: '0.5em' }}>
+              {children}
+            </Text>
+          ),
+          h1: ({ children }) => (
+            <Title order={3} mb="xs">
+              {children}
+            </Title>
+          ),
+          h2: ({ children }) => (
+            <Title order={4} mb="xs">
+              {children}
+            </Title>
+          ),
+          h3: ({ children }) => (
+            <Title order={5} mb="xs">
+              {children}
+            </Title>
+          ),
+          code: ({ className, children, ...props }) => {
+            const isInline = !className;
+            if (isInline) {
+              return <Code>{children}</Code>;
+            }
+            return (
+              <Code block className={classes.codeBlock}>
+                {children}
+              </Code>
+            );
+          },
+          pre: ({ children }) => <div className={classes.preWrapper}>{children}</div>,
+          ul: ({ children }) => (
+            <List size="sm" mb="xs">
+              {children}
+            </List>
+          ),
+          ol: ({ children }) => (
+            <List type="ordered" size="sm" mb="xs">
+              {children}
+            </List>
+          ),
+          li: ({ children }) => <List.Item>{children}</List.Item>,
+          a: ({ href, children }) => (
+            <Anchor href={href} target="_blank" rel="noopener noreferrer">
+              {children}
+            </Anchor>
+          ),
+          blockquote: ({ children }) => <Blockquote mb="xs">{children}</Blockquote>,
+          strong: ({ children }) => (
+            <Text component="strong" fw={700} inherit>
+              {children}
+            </Text>
+          ),
+          em: ({ children }) => (
+            <Text component="em" fs="italic" inherit>
+              {children}
+            </Text>
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}