diff --git a/frontend/src/components/ai/ChatWindow.tsx b/frontend/src/components/ai/ChatWindow.tsx index ae822bd..726020d 100644 --- a/frontend/src/components/ai/ChatWindow.tsx +++ b/frontend/src/components/ai/ChatWindow.tsx @@ -25,7 +25,7 @@ function MessageContent({ content, role }: { content: string; role: string }) { return
{content}
; } return ( -
+
{content}
); diff --git a/frontend/src/index.css b/frontend/src/index.css index baf0477..4a9ae3b 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -2,6 +2,116 @@ @tailwind components; @tailwind utilities; +/* AI Chat Markdown Styles */ +.ai-markdown { + line-height: 1.6; + color: #0f172a; + font-size: 0.875rem; +} +.ai-markdown p { + margin: 0.5rem 0; +} +.ai-markdown h1 { + font-size: 1.25rem; + font-weight: 700; + margin: 1rem 0 0.5rem; + color: #1e293b; +} +.ai-markdown h2 { + font-size: 1.125rem; + font-weight: 700; + margin: 0.875rem 0 0.5rem; + color: #1e293b; +} +.ai-markdown h3 { + font-size: 1rem; + font-weight: 600; + margin: 0.75rem 0 0.375rem; + color: #334155; +} +.ai-markdown ul { + list-style: disc; + padding-left: 1.25rem; + margin: 0.5rem 0; +} +.ai-markdown ol { + list-style: decimal; + padding-left: 1.25rem; + margin: 0.5rem 0; +} +.ai-markdown li { + margin: 0.25rem 0; +} +.ai-markdown table { + width: 100%; + border-collapse: collapse; + margin: 0.75rem 0; + font-size: 0.75rem; +} +.ai-markdown th { + background: #f1f5f9; + border: 1px solid #e2e8f0; + padding: 0.375rem 0.5rem; + text-align: left; + font-weight: 600; +} +.ai-markdown td { + border: 1px solid #e2e8f0; + padding: 0.375rem 0.5rem; +} +.ai-markdown pre { + background: #1e293b; + color: #e2e8f0; + border-radius: 0.5rem; + padding: 0.75rem; + overflow-x: auto; + margin: 0.5rem 0; + font-size: 0.75rem; + font-family: 'JetBrains Mono', monospace; +} +.ai-markdown code { + background: #f1f5f9; + border-radius: 0.25rem; + padding: 0.125rem 0.25rem; + font-size: 0.75rem; + font-family: 'JetBrains Mono', monospace; +} +.ai-markdown pre code { + background: transparent; + padding: 0; + color: inherit; +} +.ai-markdown blockquote { + border-left: 3px solid #cbd5e1; + padding-left: 0.75rem; + margin: 0.5rem 0; + color: #64748b; + font-style: italic; +} +.ai-markdown strong { + font-weight: 700; +} +.ai-markdown em { + font-style: italic; +} +.ai-markdown a { + color: #2563eb; + text-decoration: underline; +} +.ai-markdown a:hover { + color: #1d4ed8; +} +.ai-markdown hr { + border: none; + border-top: 1px solid #e2e8f0; + margin: 1rem 0; +} +.ai-markdown img { + max-width: 100%; + border-radius: 0.5rem; + margin: 0.5rem 0; +} + :root { /* Design tokens from prototype */ --color-primary: #2563eb;