diff --git a/site/src/pages/AgentsPage/AgentChatPageView.stories.tsx b/site/src/pages/AgentsPage/AgentChatPageView.stories.tsx
index baed2e4d8e..cd13d358f3 100644
--- a/site/src/pages/AgentsPage/AgentChatPageView.stories.tsx
+++ b/site/src/pages/AgentsPage/AgentChatPageView.stories.tsx
@@ -400,6 +400,33 @@ index abc1234..def5678 100644
},
};
+export const NarrowWithSidebarPanel: Story = {
+ render: () => ,
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const chatPanel = await canvas.findByTestId("agents-chat-panel");
+ const composer = await canvas.findByTestId("chat-composer");
+ const sendButton = canvas.getByRole("button", { name: "Send" });
+
+ await waitFor(() => {
+ const chatPanelRect = chatPanel.getBoundingClientRect();
+ const composerRect = composer.getBoundingClientRect();
+ const sendButtonRect = sendButton.getBoundingClientRect();
+
+ expect(chatPanelRect.width).toBeGreaterThanOrEqual(360);
+ expect(sendButtonRect.left).toBeGreaterThanOrEqual(composerRect.left);
+ expect(sendButtonRect.right).toBeLessThanOrEqual(composerRect.right);
+ });
+ },
+};
+
/**
* Clicking the refresh button in the git panel invalidates the
* cached PR diff contents so that React Query re-fetches from
diff --git a/site/src/pages/AgentsPage/AgentChatPageView.tsx b/site/src/pages/AgentsPage/AgentChatPageView.tsx
index b71f4bf0c4..64da3030c1 100644
--- a/site/src/pages/AgentsPage/AgentChatPageView.tsx
+++ b/site/src/pages/AgentsPage/AgentChatPageView.tsx
@@ -451,8 +451,9 @@ export const AgentChatPageView: FC = ({
>
{titleElement}
= ({
)}
>
{titleElement}
-
-
+
{speech.isSupported && !isStreaming && (
<>