From 61f2b04d2b5fa1b8421c8d4a92e9834a436e79e2 Mon Sep 17 00:00:00 2001
From: Hugo Dutka <hugo@coder.com>
Date: Wed, 4 Jun 2025 16:52:47 +0200
Subject: [PATCH] fix: embed agentapi chat in the sidebar iframe (#18230)

- hardcode a custom pathname (`/chat/embed`) to use in the sidebar
iframe. this is a temporary fix so that the agentapi chat displays
properly
- make the sidebar a bit wider so that the chat fits without line
wrapping

<img width="1512" alt="Screenshot 2025-06-04 at 15 32 30"
src="https://github.com/user-attachments/assets/8be5d053-d7b3-40da-8b62-a6151975527d"
/>
---
 site/src/pages/TaskPage/TaskAppIframe.tsx | 15 ++++++++++++++-
 site/src/pages/TaskPage/TaskSidebar.tsx   | 12 +++++++++---
 site/src/pages/TaskPage/constants.ts      |  1 +
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/site/src/pages/TaskPage/TaskAppIframe.tsx b/site/src/pages/TaskPage/TaskAppIframe.tsx
index 9d11abc82b..5a3d0ed509 100644
--- a/site/src/pages/TaskPage/TaskAppIframe.tsx
+++ b/site/src/pages/TaskPage/TaskAppIframe.tsx
@@ -8,12 +8,14 @@ type TaskAppIFrameProps = {
 	task: Task;
 	app: WorkspaceApp;
 	active: boolean;
+	pathname?: string;
 };
 
 export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
 	task,
 	app,
 	active,
+	pathname,
 }) => {
 	const agent = task.workspace.latest_build.resources
 		.flatMap((r) => r.agents)
@@ -29,9 +31,20 @@ export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
 		workspace: task.workspace,
 	});
 
+	let href = link.href;
+	try {
+		const url = new URL(link.href);
+		if (pathname) {
+			url.pathname = pathname;
+		}
+		href = url.toString();
+	} catch (err) {
+		console.warn(`Failed to parse URL ${link.href} for app ${app.id}`, err);
+	}
+
 	return (
 		<iframe
-			src={link.href}
+			src={href}
 			title={link.label}
 			loading="eager"
 			className={cn([active ? "block" : "hidden", "w-full h-full border-0"])}
diff --git a/site/src/pages/TaskPage/TaskSidebar.tsx b/site/src/pages/TaskPage/TaskSidebar.tsx
index df469b7965..872d64a60c 100644
--- a/site/src/pages/TaskPage/TaskSidebar.tsx
+++ b/site/src/pages/TaskPage/TaskSidebar.tsx
@@ -29,7 +29,7 @@ import { cn } from "utils/cn";
 import { timeFrom } from "utils/time";
 import { truncateURI } from "utils/uri";
 import { TaskAppIFrame } from "./TaskAppIframe";
-import { AI_APP_CHAT_SLUG } from "./constants";
+import { AI_APP_CHAT_SLUG, AI_APP_CHAT_URL_PATHNAME } from "./constants";
 
 type TaskSidebarProps = {
 	task: Task;
@@ -49,7 +49,7 @@ export const TaskSidebar: FC<TaskSidebarProps> = ({ task }) => {
 					"border-0 border-r border-solid border-border",
 				],
 				// We want to make the sidebar wider for chat apps
-				chatApp ? "w-[440px]" : "w-[320px]",
+				chatApp ? "w-[520px]" : "w-[320px]",
 			])}
 		>
 			<header className="border-0 border-b border-solid border-border p-4 pt-0">
@@ -105,7 +105,13 @@ export const TaskSidebar: FC<TaskSidebarProps> = ({ task }) => {
 			</header>
 
 			{chatApp ? (
-				<TaskAppIFrame active key={chatApp.id} app={chatApp} task={task} />
+				<TaskAppIFrame
+					active
+					key={chatApp.id}
+					app={chatApp}
+					task={task}
+					pathname={AI_APP_CHAT_URL_PATHNAME}
+				/>
 			) : (
 				<TaskStatuses task={task} />
 			)}
diff --git a/site/src/pages/TaskPage/constants.ts b/site/src/pages/TaskPage/constants.ts
index a7a24f21ff..e3d8133802 100644
--- a/site/src/pages/TaskPage/constants.ts
+++ b/site/src/pages/TaskPage/constants.ts
@@ -1 +1,2 @@
 export const AI_APP_CHAT_SLUG = "claude-code-web";
+export const AI_APP_CHAT_URL_PATHNAME = "/chat/embed";