From 2777d3ec49ca399d30aa925592a5bc736bd9761c Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 22 Jan 2025 00:23:47 -0800
Subject: [PATCH] refac: think tag styling

---
 backend/open_webui/utils/middleware.py | 20 +++++++++++++++++++-
 src/app.css                            |  4 ++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/backend/open_webui/utils/middleware.py b/backend/open_webui/utils/middleware.py
index cf43aaa8f..d9ba29b2b 100644
--- a/backend/open_webui/utils/middleware.py
+++ b/backend/open_webui/utils/middleware.py
@@ -1137,6 +1137,15 @@ async def process_chat_response(
                                             )
 
                                             if reasoning_content:
+                                                reasoning_content = "\n".join(
+                                                    (
+                                                        f"> {line}"
+                                                        if not line.startswith(">")
+                                                        else line
+                                                    )
+                                                    for line in reasoning_content.splitlines()
+                                                )
+
                                                 # Format reasoning with <details> tag
                                                 content = f"<details>\n<summary>Thought for {reasoning_duration} seconds</summary>\n{reasoning_content}\n</details>\n"
                                             else:
@@ -1144,8 +1153,17 @@ async def process_chat_response(
 
                                             reasoning_start_time = None
                                         else:
+                                            ongoing_content = "\n".join(
+                                                (
+                                                    f"> {line}"
+                                                    if not line.startswith(">")
+                                                    else line
+                                                )
+                                                for line in reasoning_content.splitlines()
+                                            )
+
                                             # Show ongoing thought process
-                                            content = f"<details>\n<summary>Thinking… <loading/></summary>\n{reasoning_content}\n</details>\n"
+                                            content = f"<details>\n<summary>Thinking… <loading/></summary>\n{ongoing_content}\n</details>\n"
 
                                 if ENABLE_REALTIME_CHAT_SAVE:
                                     # Save message in the database
diff --git a/src/app.css b/src/app.css
index f0ddfb522..dadfda78f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -53,11 +53,11 @@ math {
 }
 
 .markdown-prose {
-	@apply prose dark:prose-invert prose-headings:font-semibold prose-hr:my-4 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
+	@apply prose dark:prose-invert prose-blockquote:border-gray-100 prose-blockquote:dark:border-gray-800 prose-blockquote:border-l-2 prose-blockquote:not-italic prose-blockquote:font-normal  prose-headings:font-semibold prose-hr:my-4 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
 }
 
 .markdown-prose-xs {
-	@apply text-xs prose dark:prose-invert prose-headings:font-semibold prose-hr:my-0  prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
+	@apply text-xs prose dark:prose-invert prose-blockquote:border-gray-100 prose-blockquote:dark:border-gray-800 prose-blockquote:border-l-2 prose-blockquote:not-italic prose-blockquote:font-normal  prose-headings:font-semibold prose-hr:my-0  prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
 }
 
 .markdown a {