From 3167908358a83c32fead166a70862ca83c1fb4d8 Mon Sep 17 00:00:00 2001
From: Mathias Fredriksson <mafredri@gmail.com>
Date: Tue, 10 Mar 2026 12:57:08 +0200
Subject: [PATCH] fix(site): fix chat input button icon sizing and centering
 (#22882)

The Button icon variant applies [&>svg]:size-icon-sm (18px) and
the base applies [&>svg]:p-0.5, both of which silently override
h-*/w-* set directly on child SVGs. This caused the stop icon to
render at 18px instead of 12px and the send arrow to shift
off-center due to uncleared padding.

Pin each icon size via !important on the parent className so the
values are deterministic regardless of Tailwind class order:

- Attach: !size-icon-sm (18px, unchanged visual)
- Stop: !size-3 (12px, matches original intent)
- Send: !size-5 (20px, matches prior visual after padding)

Add Streaming and StreamingInterruptPending stories for the stop
button.
---
 .../AgentsPage/AgentChatInput.stories.tsx     | 22 +++++++++++++++++++
 site/src/pages/AgentsPage/AgentChatInput.tsx  | 10 ++++-----
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/site/src/pages/AgentsPage/AgentChatInput.stories.tsx b/site/src/pages/AgentsPage/AgentChatInput.stories.tsx
index 1170ae7fb8..198c2da1c0 100644
--- a/site/src/pages/AgentsPage/AgentChatInput.stories.tsx
+++ b/site/src/pages/AgentsPage/AgentChatInput.stories.tsx
@@ -137,6 +137,28 @@ export const LoadingDisablesSend: Story = {
 	},
 };
 
+export const Streaming: Story = {
+	args: {
+		isStreaming: true,
+		onInterrupt: fn(),
+		isInterruptPending: false,
+		initialValue: "",
+		onAttach: fn(),
+		onRemoveAttachment: fn(),
+	},
+};
+
+export const StreamingInterruptPending: Story = {
+	args: {
+		isStreaming: true,
+		onInterrupt: fn(),
+		isInterruptPending: true,
+		initialValue: "",
+		onAttach: fn(),
+		onRemoveAttachment: fn(),
+	},
+};
+
 const longContent = Array.from(
 	{ length: 60 },
 	(_, i) =>
diff --git a/site/src/pages/AgentsPage/AgentChatInput.tsx b/site/src/pages/AgentsPage/AgentChatInput.tsx
index 33f407634c..09f208a4d0 100644
--- a/site/src/pages/AgentsPage/AgentChatInput.tsx
+++ b/site/src/pages/AgentsPage/AgentChatInput.tsx
@@ -640,12 +640,12 @@ export const AgentChatInput = memo<AgentChatInputProps>(
 										type="button"
 										variant="outline"
 										size="icon"
-										className="size-7 shrink-0 rounded-full [&>svg]:p-0"
+										className="size-7 shrink-0 rounded-full [&>svg]:!size-icon-sm [&>svg]:p-0"
 										onClick={() => fileInputRef.current?.click()}
 										disabled={isDisabled}
 										aria-label="Attach files"
 									>
-										<ImageIcon className="h-4 w-4" />
+										<ImageIcon />
 									</Button>
 								</>
 							)}
@@ -653,11 +653,11 @@ export const AgentChatInput = memo<AgentChatInputProps>(
 								<Button
 									size="icon"
 									variant="default"
-									className="size-7 rounded-full transition-colors [&>svg]:p-0"
+									className="size-7 rounded-full transition-colors [&>svg]:!size-3 [&>svg]:p-0"
 									onClick={onInterrupt}
 									disabled={isInterruptPending}
 								>
-									<Square className="h-3 w-3 fill-current" />
+									<Square className="fill-current" />
 									<span className="sr-only">Stop</span>
 								</Button>
 							)}
@@ -665,7 +665,7 @@ export const AgentChatInput = memo<AgentChatInputProps>(
 								<Button
 									size="icon"
 									variant="default"
-									className="size-7 rounded-full transition-colors [&>svg]:!size-6 flex items-center justify-center"
+									className="size-7 rounded-full transition-colors [&>svg]:!size-5 [&>svg]:p-0"
 									onClick={handleSubmit}
 									disabled={!canSend}
 								>