diff --git a/.changeset/fifty-crabs-mix.md b/.changeset/fifty-crabs-mix.md
new file mode 100644
index 0000000000000..20c43be3f4d27
--- /dev/null
+++ b/.changeset/fifty-crabs-mix.md
@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": patch
+"gradio": patch
+---
+
+fix:Some agent low-hanging issues
diff --git a/js/chatbot/Chatbot.stories.svelte b/js/chatbot/Chatbot.stories.svelte
index 2d15c1f25a386..da8bc2abf7e8c 100644
--- a/js/chatbot/Chatbot.stories.svelte
+++ b/js/chatbot/Chatbot.stories.svelte
@@ -422,3 +422,22 @@ This document is a showcase of various Markdown capabilities.`,
 		]
 	}}
 />
+
+<Story
+	name="Displaying Tool Message"
+	args={{
+		type: "messages",
+		display_consecutive_in_same_bubble: true,
+		value: [
+			{
+				role: "user",
+				content: "What is the weather like today?"
+			},
+			{
+				role: "assistant",
+				metadata: { title: "☀️ Using Weather Tool" },
+				content: "Weather looks sunny today."
+			}
+		]
+	}}
+/>
diff --git a/js/chatbot/shared/Component.svelte b/js/chatbot/shared/Component.svelte
index a06864c1116dd..12c1f48d1950f 100644
--- a/js/chatbot/shared/Component.svelte
+++ b/js/chatbot/shared/Component.svelte
@@ -39,19 +39,21 @@
 		on:load
 	/>
 {:else if type === "audio"}
-	<svelte:component
-		this={components[type]}
-		{value}
-		show_label={false}
-		show_share_button={true}
-		{i18n}
-		label=""
-		waveform_settings={{ autoplay: props.autoplay }}
-		waveform_options={{}}
-		show_download_button={allow_file_downloads}
-		{display_icon_button_wrapper_top_corner}
-		on:load
-	/>
+	<div style="position: relative;">
+		<svelte:component
+			this={components[type]}
+			{value}
+			show_label={false}
+			show_share_button={true}
+			{i18n}
+			label=""
+			waveform_settings={{ autoplay: props.autoplay }}
+			waveform_options={{}}
+			show_download_button={allow_file_downloads}
+			{display_icon_button_wrapper_top_corner}
+			on:load
+		/>
+	</div>
 {:else if type === "video"}
 	<svelte:component
 		this={components[type]}
diff --git a/js/chatbot/shared/Message.svelte b/js/chatbot/shared/Message.svelte
index 011174225f6e2..5e4e6f43de431 100644
--- a/js/chatbot/shared/Message.svelte
+++ b/js/chatbot/shared/Message.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
 	import { is_component_message, is_last_bot_message } from "../shared/utils";
-	import { File } from "@gradio/icons";
+
 	import { Image } from "@gradio/image/shared";
-	import Component from "./Component.svelte";
 	import type { FileData, Client } from "@gradio/client";
 	import type { NormalisedMessage } from "../types";
-	import MessageBox from "./MessageBox.svelte";
-	import { MarkdownCode as Markdown } from "@gradio/markdown-code";
+
 	import type { I18nFormatter } from "js/core/src/gradio_helper";
 	import type { ComponentType, SvelteComponent } from "svelte";
 	import ButtonPanel from "./ButtonPanel.svelte";
+	import MessageContent from "./MessageContent.svelte";
+	import MessageBox from "./MessageBox.svelte";
 
 	export let value: NormalisedMessage[];
 	export let avatar_img: FileData | null;
@@ -148,86 +148,50 @@
 						dir={rtl ? "rtl" : "ltr"}
 						aria-label={role + "'s message: " + get_message_label_data(message)}
 					>
-						{#if message.type === "text"}
-							<div class="message-content">
-								{#if message?.metadata?.title}
-									<MessageBox
-										title={message.metadata.title}
-										expanded={is_last_bot_message([message], value)}
-									>
-										<Markdown
-											message={message.content}
-											{latex_delimiters}
-											{sanitize_html}
-											{render_markdown}
-											{line_breaks}
-											on:load={scroll}
-											{root}
-										/>
-									</MessageBox>
-								{:else}
-									<Markdown
-										message={message.content}
-										{latex_delimiters}
-										{sanitize_html}
-										{render_markdown}
-										{line_breaks}
-										on:load={scroll}
-										{root}
-									/>
-								{/if}
-							</div>
-						{:else if message.type === "component" && message.content.component in _components}
-							<Component
+						{#if message?.metadata?.title}
+							<MessageBox
+								title={message.metadata.title}
+								expanded={is_last_bot_message([message], value)}
+								{rtl}
+							>
+								<MessageContent
+									{message}
+									{sanitize_html}
+									{latex_delimiters}
+									{render_markdown}
+									{_components}
+									{upload}
+									{thought_index}
+									{target}
+									{root}
+									{theme_mode}
+									{_fetch}
+									{scroll}
+									{allow_file_downloads}
+									{display_consecutive_in_same_bubble}
+									{i18n}
+									{line_breaks}
+								/>
+							</MessageBox>
+						{:else}
+							<MessageContent
+								{message}
+								{sanitize_html}
+								{latex_delimiters}
+								{render_markdown}
+								{_components}
+								{upload}
+								{thought_index}
 								{target}
+								{root}
 								{theme_mode}
-								props={message.content.props}
-								type={message.content.component}
-								components={_components}
-								value={message.content.value}
-								display_icon_button_wrapper_top_corner={thought_index > 0 &&
-									display_consecutive_in_same_bubble}
-								{i18n}
-								{upload}
 								{_fetch}
-								on:load={() => scroll()}
+								{scroll}
 								{allow_file_downloads}
+								{display_consecutive_in_same_bubble}
+								{i18n}
+								{line_breaks}
 							/>
-						{:else if message.type === "component" && message.content.component === "file"}
-							<div class="file-container">
-								<div class="file-icon">
-									<File />
-								</div>
-								<div class="file-info">
-									<a
-										data-testid="chatbot-file"
-										class="file-link"
-										href={message.content.value.url}
-										target="_blank"
-										download={window.__is_colab__
-											? null
-											: message.content.value?.orig_name ||
-												message.content.value?.path.split("/").pop() ||
-												"file"}
-									>
-										<span class="file-name"
-											>{message.content.value?.orig_name ||
-												message.content.value?.path.split("/").pop() ||
-												"file"}</span
-										>
-									</a>
-									<span class="file-type"
-										>{(
-											message.content.value?.orig_name ||
-											message.content.value?.path ||
-											""
-										)
-											.split(".")
-											.pop()
-											.toUpperCase()}</span
-									>
-								</div>
-							</div>
 						{/if}
 					</button>
 				</div>
@@ -447,10 +411,6 @@
 		}
 	}
 
-	.message-content {
-		padding: var(--spacing-sm) var(--spacing-xl);
-	}
-
 	.avatar-container {
 		align-self: flex-start;
 		position: relative;
@@ -594,52 +554,4 @@
 	.panel .message {
 		margin-bottom: var(--spacing-md);
 	}
-
-	.file-container {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-lg);
-		padding: var(--spacing-lg);
-		border-radius: var(--radius-lg);
-		width: fit-content;
-		margin: var(--spacing-sm) 0;
-	}
-
-	.file-icon {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: var(--body-text-color);
-	}
-
-	.file-icon :global(svg) {
-		width: var(--size-7);
-		height: var(--size-7);
-	}
-
-	.file-info {
-		display: flex;
-		flex-direction: column;
-	}
-
-	.file-link {
-		text-decoration: none;
-		color: var(--body-text-color);
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-xs);
-	}
-
-	.file-name {
-		font-family: var(--font);
-		font-size: var(--text-md);
-		font-weight: 500;
-	}
-
-	.file-type {
-		font-family: var(--font);
-		font-size: var(--text-sm);
-		color: var(--body-text-color-subdued);
-		text-transform: uppercase;
-	}
 </style>
diff --git a/js/chatbot/shared/MessageBox.svelte b/js/chatbot/shared/MessageBox.svelte
index 5affb8369c008..30f4fbf64d48d 100644
--- a/js/chatbot/shared/MessageBox.svelte
+++ b/js/chatbot/shared/MessageBox.svelte
@@ -1,33 +1,41 @@
 <script lang="ts">
 	export let expanded = false;
 	export let title: string;
+	export let rtl = false;
 
 	function toggleExpanded(): void {
 		expanded = !expanded;
 	}
 </script>
 
-<button class="box" on:click={toggleExpanded}>
-	<div class="title">
-		<span class="title-text">{title}</span>
-		<span
-			style:transform={expanded ? "rotate(0)" : "rotate(90deg)"}
-			class="arrow"
+<div style:padding="var(--spacing-sm) var(--spacing-xl)">
+	<div class="box" style:text-align={rtl ? "right" : "left"}>
+		<div
+			class="title"
+			on:click|stopPropagation={toggleExpanded}
+			role="button"
+			tabindex="0"
+			on:keydown={(e) => e.key === "Enter" && toggleExpanded()}
 		>
-			▼
-		</span>
-	</div>
-	{#if expanded}
-		<div class="content">
-			<slot></slot>
+			<span class="title-text">{title}</span>
+			<span
+				style:transform={expanded ? "rotate(0)" : "rotate(90deg)"}
+				class="arrow"
+			>
+				▼
+			</span>
 		</div>
-	{/if}
-</button>
+		{#if expanded}
+			<div class="content">
+				<slot></slot>
+			</div>
+		{/if}
+	</div>
+</div>
 
 <style>
 	.box {
 		border-radius: 4px;
-		cursor: pointer;
 		max-width: max-content;
 		background: var(--color-accent-soft);
 		border: 1px solid var(--border-color-accent-subdued);
@@ -40,6 +48,7 @@
 		padding: 3px 6px;
 		color: var(--body-text-color);
 		opacity: 0.8;
+		cursor: pointer;
 	}
 
 	.content {
diff --git a/js/chatbot/shared/MessageContent.svelte b/js/chatbot/shared/MessageContent.svelte
new file mode 100644
index 0000000000000..bc7daa38d7820
--- /dev/null
+++ b/js/chatbot/shared/MessageContent.svelte
@@ -0,0 +1,150 @@
+<script lang="ts">
+	import { File } from "@gradio/icons";
+	import Component from "./Component.svelte";
+	import { MarkdownCode as Markdown } from "@gradio/markdown-code";
+	import type { NormalisedMessage } from "../types";
+	import type { I18nFormatter } from "js/core/src/gradio_helper";
+	import type { Client } from "@gradio/client";
+	import type { ComponentType, SvelteComponent } from "svelte";
+
+	export let latex_delimiters: {
+		left: string;
+		right: string;
+		display: boolean;
+	}[];
+	export let sanitize_html: boolean;
+	export let _fetch: typeof fetch;
+	export let i18n: I18nFormatter;
+	export let line_breaks: boolean;
+	export let upload: Client["upload"];
+	export let target: HTMLElement | null;
+	export let root: string;
+	export let theme_mode: "light" | "dark" | "system";
+	export let _components: Record<string, ComponentType<SvelteComponent>>;
+	export let render_markdown: boolean;
+	export let scroll: () => void;
+	export let allow_file_downloads: boolean;
+	export let display_consecutive_in_same_bubble: boolean;
+	export let thought_index: number;
+
+	export let message: NormalisedMessage;
+</script>
+
+{#if message.type === "text"}
+	<div class="message-content">
+		<Markdown
+			message={message.content}
+			{latex_delimiters}
+			{sanitize_html}
+			{render_markdown}
+			{line_breaks}
+			on:load={scroll}
+			{root}
+		/>
+	</div>
+{:else if message.type === "component" && message.content.component in _components}
+	<Component
+		{target}
+		{theme_mode}
+		props={message.content.props}
+		type={message.content.component}
+		components={_components}
+		value={message.content.value}
+		display_icon_button_wrapper_top_corner={thought_index > 0 &&
+			display_consecutive_in_same_bubble}
+		{i18n}
+		{upload}
+		{_fetch}
+		on:load={() => scroll()}
+		{allow_file_downloads}
+	/>
+{:else if message.type === "component" && message.content.component === "file"}
+	<div class="file-container">
+		<div class="file-icon">
+			<File />
+		</div>
+		<div class="file-info">
+			<a
+				data-testid="chatbot-file"
+				class="file-link"
+				href={message.content.value.url}
+				target="_blank"
+				download={window.__is_colab__
+					? null
+					: message.content.value?.orig_name ||
+						message.content.value?.path.split("/").pop() ||
+						"file"}
+			>
+				<span class="file-name"
+					>{message.content.value?.orig_name ||
+						message.content.value?.path.split("/").pop() ||
+						"file"}</span
+				>
+			</a>
+			<span class="file-type"
+				>{(
+					message.content.value?.orig_name ||
+					message.content.value?.path ||
+					""
+				)
+					.split(".")
+					.pop()
+					.toUpperCase()}</span
+			>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.message-content {
+		padding: var(--spacing-sm) var(--spacing-xl);
+	}
+
+	.file-container {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-lg);
+		padding: var(--spacing-lg);
+		border-radius: var(--radius-lg);
+		width: fit-content;
+		margin: var(--spacing-sm) 0;
+	}
+
+	.file-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--body-text-color);
+	}
+
+	.file-icon :global(svg) {
+		width: var(--size-7);
+		height: var(--size-7);
+	}
+
+	.file-info {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.file-link {
+		text-decoration: none;
+		color: var(--body-text-color);
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-xs);
+	}
+
+	.file-name {
+		font-family: var(--font);
+		font-size: var(--text-md);
+		font-weight: 500;
+	}
+
+	.file-type {
+		font-family: var(--font);
+		font-size: var(--text-sm);
+		color: var(--body-text-color-subdued);
+		text-transform: uppercase;
+	}
+</style>
diff --git a/js/spa/test/chatbot_with_tools.spec.ts b/js/spa/test/chatbot_with_tools.spec.ts
index 652d3a5bade7c..b19f72d1c5882 100644
--- a/js/spa/test/chatbot_with_tools.spec.ts
+++ b/js/spa/test/chatbot_with_tools.spec.ts
@@ -5,7 +5,7 @@ test("Chatbot can support agentic demos by displaying messages with metadata", a
 }) => {
 	await page.getByRole("button", { name: "Get San Francisco Weather" }).click();
 	await expect(
-		await page.locator("button").filter({ hasText: "💥 Error" }).nth(1)
+		await page.locator("div").filter({ hasText: "💥 Error" }).nth(1)
 	).toBeVisible();
 	await expect(
 		page.locator("span").filter({ hasText: "🛠️ Used tool" })