Tweak behavior related to the status of gr.Chatbot thought messag…

…es (#10404) * chatbot * changes * add changeset * changes * format * add changeset --------- Co-authored-by: gradio-pr-bot <[email protected]>
gradio-app · Jan 22, 2025 · 9dc5d15 · 9dc5d15
1 parent 43e7cce
commit 9dc5d15
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 6 deletions.
diff --git a/.changeset/honest-frogs-fall.md b/.changeset/honest-frogs-fall.md
@@ -0,0 +1,7 @@
+---
+"@gradio/chatbot": patch
+"gradio": patch
+"website": patch
+---
+
+fix:Tweak behavior related to the `status` of `gr.Chatbot` thought messages
diff --git a/gradio/components/chatbot.py b/gradio/components/chatbot.py
@@ -44,7 +44,7 @@ class MetadataDict(TypedDict):
         parent_id: The ID of the parent message. Only used for nested thoughts.
         log: A string message to display next to the thought title in a subdued font.
         duration: The duration of the message in seconds. Appears next to the thought title in a subdued font inside a parentheses.
-        status: The status of the message. If "pending", the status is displayed as a spinner icon.
+        status: The status of the message. If "pending", a spinner icon appears next to the thought title. If "done", the thought accordion becomes closed. If no value is provided, the thought accordion is open and no spinner is displayed.
     """
 
     title: NotRequired[str]

diff --git a/guides/05_chatbots/03_agents-and-tool-usage.md b/guides/05_chatbots/03_agents-and-tool-usage.md
@@ -62,7 +62,7 @@ In addition to `title`, the dictionary provided to `metadata` can take several o
 
 * `log`: an optional string value to be displayed in a subdued font next to the thought title.
 * `duration`: an optional numeric value representing the duration of the thought/tool usage, in seconds. Displayed in a subdued font next inside parentheses next to the thought title.
-* `status`: if set to `pending`, a spinner appears next to the thought title.
+* `status`: if set to `pending`, a spinner appears next to the thought title.  If "done", the thought accordion becomes closed. If not provided, the thought accordion is open and no spinner is displayed.
 * `id` and `parent_id`: if these are provided, they can be used to nest thoughts inside other thoughts.
 
 Below, we show several complete examples of using `gr.Chatbot` and `gr.ChatInterface` to display tool use or thinking UIs.

diff --git a/js/_website/src/lib/templates/gradio/03_components/chatbot.svx b/js/_website/src/lib/templates/gradio/03_components/chatbot.svx
@@ -57,7 +57,7 @@
         {
             "name": "status",
             "annotation": "Literal['pending', 'done']",
-            "doc": "The status of the message. If 'pending', the status is displayed as a spinner icon."
+            "doc": "The status of the message. If "pending", a spinner icon appears next to the thought title. If "done", the thought accordion becomes closed. If not provided, the thought accordion is open and no spinner is displayed."
         }
     ]
 

diff --git a/js/chatbot/shared/Thought.svelte b/js/chatbot/shared/Thought.svelte
@@ -31,8 +31,6 @@
 	export let i18n: I18nFormatter;
 	export let line_breaks: boolean;
 
-	let expanded = true;
-
 	function is_thought_node(msg: NormalisedMessage): msg is ThoughtNode {
 		return "children" in msg;
 	}
@@ -46,6 +44,8 @@
 	function toggleExpanded(): void {
 		expanded = !expanded;
 	}
+
+	$: expanded = thought_node.metadata?.status !== "done";
 </script>
 
 <div class="thought-group">
@@ -71,7 +71,7 @@
 			{sanitize_html}
 			{root}
 		/>
-		{#if thought_node.metadata?.status === "pending" || (thought_node.metadata?.status !== "done" && (thought_node.content === "" || thought_node.content === null))}
+		{#if thought_node.metadata?.status === "pending"}
 			<span class="loading-spinner"></span>
 		{/if}
 		{#if thought_node?.metadata?.log || thought_node?.metadata?.duration}