refine thinking section

Author: Jicheng Lu

package-lock.json

@@ -73,6 +73,7 @@
 		"svelte-codemirror-editor": "^2.1.0",
 		"svelte-collapse": "^0.1.2",
 		"svelte-file-dropzone": "^2.0.2",
+		"svelte-hero-icons": "^5.2.0",
 		"svelte-i18n": "^4.0.0",
 		"svelte-json-tree": "^2.2.0",
 		"svelte-jsoneditor": "^3.11.0",

package.json

@@ -6,20 +6,22 @@
      *   disableDefaultStyles?: boolean,
      *   containerClasses?: string,
      *   containerStyles?: string,
-     *   size?: number
+     *   size?: number,
+     *   color?: string
      * }}
      */
     let {
         disableDefaultStyles = false,
         containerClasses = '',
         containerStyles = '',
-        size = 100
+        size = 100,
+        color = 'var(--bs-primary)'
     } = $props();
 </script>
 
 <div
     class="{disableDefaultStyles ? '' : 'loader'} {containerClasses}"
     style={`${containerStyles}`}
 >
-    <Circle {size} color="var(--bs-primary)" unit="px" duration="1s" />
+    <Circle {size} {color} unit="px" duration="1s" />
 </div>

src/lib/common/spinners/Loader.svelte

@@ -180,6 +180,7 @@ IRichContent.prototype.language;
  * @property {boolean} is_dummy
  * @property {boolean} is_appended
  * @property {string} [indication]
+ * @property {any} [meta_data]
  */
 
 /**

src/lib/helpers/types/conversationTypes.js

@@ -293,7 +293,8 @@
             .dropdown-menu {
                 box-shadow: $box-shadow;
                 border: 1px solid var(--#{$prefix}border-color);
-                top: 10px !important;
+                top: auto !important;
+                bottom: 100% !important;
             }
         }
 

src/lib/scss/custom/pages/_chat.scss

@@ -578,7 +578,11 @@
 			dialogs.push({
 				...message,
 				is_chat_message: false,
-				is_dummy: true
+				is_dummy: true,
+				meta_data: {
+					...(message.meta_data || {}),
+					thinking_text: message.meta_data?.thinking_text || ''
+				}
 			});
 		}
 		refresh();
@@ -595,7 +599,15 @@
 				&& lastMsg?.is_dummy
 			) {
 				setTimeout(() => {
-					dialogs[dialogs.length - 1].text += message.text;
+					const lastDialog = dialogs[dialogs.length - 1];
+					const thinkingText = message.meta_data?.thinking_text || '';
+					if (thinkingText) {
+						if (!lastDialog.meta_data) {
+							lastDialog.meta_data = { thinking_text: '' };
+						}
+						lastDialog.meta_data.thinking_text += thinkingText;
+					}
+					lastDialog.text += message.text;
 					refreshDialogs();
 				}, 0);
 			}
@@ -624,8 +636,21 @@
 			}
 
 			try {
+				const lastDialog = dialogs[dialogs.length - 1];
+				const thinkingText = item.meta_data?.thinking_text || '';
+				if (thinkingText) {
+					if (!lastDialog.meta_data) {
+						lastDialog.meta_data = { thinking_text: '' };
+					}
+					for (const tt of thinkingText) {
+						lastDialog.meta_data.thinking_text += tt;
+						refreshDialogs();
+						await delay(10);
+					}
+				}
+
 				for (const char of item.text) {
-					dialogs[dialogs.length - 1].text += char;
+					lastDialog.text += char;
 					refreshDialogs();
 					await delay(10);
 				}

src/routes/chat/[agentId]/[conversationId]/chat-box.svelte

@@ -2,6 +2,8 @@
 	import Markdown from "$lib/common/markdown/Markdown.svelte";
 	import { RichType } from "$lib/helpers/enums";
 	import RcJsInterpreter from "./rc-js-interpreter.svelte";
+	import { Icon, Sparkles } from "svelte-hero-icons";
+	import Loader from "$lib/common/spinners/Loader.svelte";
 
     /**
      * @type {{
@@ -19,13 +21,51 @@
     } = $props();
 
     let text = $derived(message?.rich_content?.message?.text || message?.text || '');
+    let thinkingText = $derived(message?.meta_data?.thinking_text || '');
+    let isStillThinking = $derived(!!thinkingText && !text);
+    let isThinkingExpanded = $state(false);
+    let isThinkingAutoControlled = $state(true);
+
+    $effect(() => {
+        if (!isThinkingAutoControlled) {
+            return;
+        }
+
+        if (thinkingText && !text) {
+            isThinkingExpanded = true;
+        } else if (text && thinkingText) {
+            isThinkingExpanded = false;
+            isThinkingAutoControlled = false;
+        }
+    });
 </script>
 
-{#if text}
+{#if text || thinkingText}
     <div
         class={`ctext-wrap bg-primary ${containerClasses}`}
         style={`${containerStyles}`}
     >
+        {#if thinkingText}
+            <div class="thinking-section">
+                <button
+                    class="thinking-toggle"
+                    onclick={() => isThinkingExpanded = !isThinkingExpanded}
+                >
+                    <span class="thinking-sparkle"><Icon src={Sparkles} solid size="16" /></span>
+                    <span>{'Thinking'}</span>
+                    {#if isStillThinking}
+                        <Loader disableDefaultStyles size={14} color="#4285f4" containerStyles="display: flex; align-items: center;" />
+                    {:else}
+                        <span class="thinking-chevron" class:expanded={isThinkingExpanded}>›</span>
+                    {/if}
+                </button>
+                {#if isThinkingExpanded}
+                    <div class="thinking-content">
+                        <Markdown containerStyles="color: #444 !important;" text={thinkingText} rawText />
+                    </div>
+                {/if}
+            </div>
+        {/if}
         <div class="flex-shrink-0 align-self-center">
             {#if message?.rich_content?.message?.rich_type === RichType.ProgramCode
                 && message?.rich_content?.message?.language === 'javascript'}
@@ -35,4 +75,56 @@
             {/if}
         </div>
     </div>
-{/if}
+{/if}
+
+<style>
+    .thinking-section {
+        margin-bottom: 8px;
+    }
+
+    .thinking-toggle {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        background: none;
+        border: none;
+        color: #555;
+        cursor: pointer;
+        padding: 4px 0;
+        font-size: 0.9em;
+    }
+
+    .thinking-toggle:hover {
+        color: #333;
+    }
+
+    .thinking-sparkle {
+        color: #4285f4;
+        display: flex;
+        align-items: center;
+    }
+
+    .thinking-chevron {
+        font-size: 1em;
+        transition: transform 0.2s ease;
+        display: inline-block;
+    }
+
+    .thinking-chevron.expanded {
+        transform: rotate(90deg);
+    }
+
+    .thinking-content {
+        font-size: 0.9em;
+        padding: 4px 0 4px 16px;
+        border-left: 1px solid #888;
+        margin-top: 4px;
+        max-height: 200px;
+        overflow-y: auto;
+        scrollbar-width: none;
+    }
+
+    .thinking-content::-webkit-scrollbar {
+        display: none;
+    }
+</style>