add markdown formatting to the AI's responses for the chat page

2025-09-02 16:49:47 -07:00
parent 8922793188
commit d33c1767bc
9 changed files with 555 additions and 23 deletions
--- a/index.css
+++ b/index.css
@@ -375,4 +375,136 @@ input[type="radio"] {

 input[type="radio"]:focus {
    box-shadow: 0 0 0 3px rgba(94, 72, 252, 0.3);
+}
+
+/* Markdown Content Styling */
+.markdown-content {
+    line-height: 1.6;
+    color: var(--Neutrals-NeutralSlate950);
+}
+
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4,
+.markdown-content h5,
+.markdown-content h6 {
+    font-weight: 600;
+    line-height: 1.3;
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+}
+
+.markdown-content h1:first-child,
+.markdown-content h2:first-child,
+.markdown-content h3:first-child,
+.markdown-content h4:first-child,
+.markdown-content h5:first-child,
+.markdown-content h6:first-child {
+    margin-top: 0;
+}
+
+.markdown-content p {
+    margin-bottom: 1em;
+}
+
+.markdown-content p:last-child {
+    margin-bottom: 0;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+    margin-bottom: 1em;
+    padding-left: 1.5em;
+}
+
+.markdown-content li {
+    margin-bottom: 0.25em;
+}
+
+.markdown-content li:last-child {
+    margin-bottom: 0;
+}
+
+.markdown-content strong {
+    font-weight: 600;
+    color: var(--Neutrals-NeutralSlate950);
+}
+
+.markdown-content code {
+    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+    font-size: 0.875em;
+    padding: 0.2em 0.4em;
+    background-color: var(--Neutrals-NeutralSlate100);
+    border-radius: 4px;
+    color: var(--Neutrals-NeutralSlate800);
+}
+
+.markdown-content pre {
+    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+    font-size: 0.875em;
+    line-height: 1.5;
+    background-color: var(--Neutrals-NeutralSlate100);
+    border-radius: 8px;
+    padding: 1rem;
+    overflow-x: auto;
+    margin-bottom: 1em;
+}
+
+.markdown-content pre code {
+    background: none;
+    padding: 0;
+    border-radius: 0;
+    color: inherit;
+}
+
+.markdown-content blockquote {
+    border-left: 4px solid var(--Neutrals-NeutralSlate300);
+    padding-left: 1rem;
+    margin: 1em 0;
+    color: var(--Neutrals-NeutralSlate700);
+    font-style: italic;
+}
+
+.markdown-content a {
+    color: var(--Brand-Orange);
+    text-decoration: underline;
+    transition: color 0.2s;
+}
+
+.markdown-content a:hover {
+    color: var(--Brand-Orange);
+    opacity: 0.8;
+}
+
+.markdown-content table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 1em;
+    border: 1px solid var(--Neutrals-NeutralSlate200);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.markdown-content th,
+.markdown-content td {
+    padding: 0.75rem 1rem;
+    text-align: left;
+    border-bottom: 1px solid var(--Neutrals-NeutralSlate200);
+}
+
+.markdown-content th {
+    background-color: var(--Neutrals-NeutralSlate100);
+    font-weight: 600;
+    color: var(--Neutrals-NeutralSlate950);
+}
+
+.markdown-content tr:last-child td {
+    border-bottom: none;
+}
+
+.markdown-content hr {
+    border: none;
+    border-top: 1px solid var(--Neutrals-NeutralSlate200);
+    margin: 1.5em 0;
 }