From c630fcffeeb432a962e25e93d2f4263d12e32d2c Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Thu, 8 Aug 2024 10:12:35 -0700
Subject: [PATCH] Improve code block formatting (#2084)

* initial update to styling

* fix chat input bar padding

* improve color choices
---
 web/src/app/chat/ChatPage.tsx          |  2 +-
 web/src/app/globals.css                | 84 ++++++++++++++++++++++++++
 web/tailwind-themes/tailwind.config.js | 20 +++++-
 3 files changed, 104 insertions(+), 2 deletions(-)

diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx
index ef0e0d929..0e25fbd83 100644
--- a/web/src/app/chat/ChatPage.tsx
+++ b/web/src/app/chat/ChatPage.tsx
@@ -1283,7 +1283,7 @@ export function ChatPage({
                       )}
 
                       <div
-                        className={`h-full w-full relative flex-auto transition-margin duration-300 overflow-x-auto mobile:pb-12 desktop:pb-[140px]`}
+                        className={`h-full w-full relative flex-auto transition-margin duration-300 overflow-x-auto mobile:pb-12 desktop:pb-[100px]`}
                         {...getRootProps()}
                       >
                         {/* <input {...getInputProps()} /> */}
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index e3168446a..e04eb3381 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -140,3 +140,87 @@
 body {
   overscroll-behavior-y: none;
 }
+
+/* Base styles for code blocks */
+.prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  background-color: theme("colors.code-bg");
+  font-size: theme("fontSize.code-sm");
+}
+
+pre[class*="language-"],
+code[class*="language-"] {
+  color: theme("colors.code-text");
+  background: white;
+}
+
+/* Token styles */
+.code-line .token.comment,
+.code-line .token.prolog,
+.code-line .token.doctype,
+.code-line .token.cdata {
+  color: theme("colors.token-comment");
+}
+
+.code-line .token.punctuation,
+.code-line .token.operator,
+.code-line .token.entity,
+.code-line .token.url,
+.code-line .language-css .token.string,
+.code-line .style .token.string {
+  color: theme("colors.token-punctuation");
+}
+
+.code-line .token.property,
+.code-line .token.tag,
+.code-line .token.boolean,
+.code-line .token.number,
+.code-line .token.constant,
+.code-line .token.symbol,
+.code-line .token.deleted,
+.code-line .token.tag .token.punctuation {
+  color: theme("colors.token-property");
+}
+
+.code-line .token.selector,
+.code-line .token.attr-name,
+.code-line .token.string,
+.code-line .token.char,
+.code-line .token.builtin,
+.code-line .token.inserted,
+.code-line .token.attr-value,
+.code-line .token.attr-value .token.punctuation {
+  color: theme("colors.token-selector");
+}
+
+.code-line .token.atrule,
+.code-line .token.keyword {
+  color: theme("colors.token-atrule");
+}
+
+.code-line .token.function,
+.code-line .token.class-name {
+  color: theme("colors.token-function");
+}
+
+.code-line .token.regex,
+.code-line .token.important,
+.code-line .token.variable {
+  color: theme("colors.token-regex");
+}
+
+.code-line .token.important,
+.code-line .token.bold {
+  font-weight: theme("fontWeight.token-bold");
+}
+
+.code-line .token.italic {
+  font-style: theme("fontStyle.token-italic");
+}
+
+.code-line .token.entity {
+  cursor: help;
+}
+
+.code-line .token.attr-name {
+  color: theme("colors.token-attr-name");
+}
diff --git a/web/tailwind-themes/tailwind.config.js b/web/tailwind-themes/tailwind.config.js
index 8a1cae1aa..e43d22043 100644
--- a/web/tailwind-themes/tailwind.config.js
+++ b/web/tailwind-themes/tailwind.config.js
@@ -67,8 +67,19 @@ module.exports = {
         "searchbar-max": "750px",
       },
       colors: {
-        // background
+        // code styling
+        "code-bg": "black", // black
+        "code-text": "#e0e0e0", // light gray
+        "token-comment": "#608b4e", // green
+        "token-punctuation": "#d4d4d4", // light gray
+        "token-property": "#569cd6", // blue
+        "token-selector": "#e07b53", // more vibrant orange
+        "token-atrule": "#d18ad8", // more vibrant purple
+        "token-function": "#f0e68c", // more vibrant light yellow
+        "token-regex": "#9cdcfe", // light blue
+        "token-attr-name": "#9cdcfe", // light blue
 
+        // background
         "background-search": "#ffffff", // white
         input: "#f5f5f5",
 
@@ -232,11 +243,18 @@ module.exports = {
         "tremor-full": "9999px",
       },
       fontSize: {
+        "code-sm": "small",
         "tremor-label": ["0.75rem"],
         "tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
         "tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
         "tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
       },
+      fontWeight: {
+        "token-bold": "bold",
+      },
+      fontStyle: {
+        "token-italic": "italic",
+      },
     },
   },
   safelist: [