From cc3d1c7e43fad587e3d89d24b397b0f49643016b Mon Sep 17 00:00:00 2001
From: Yiorgis Gozadinos <ggozadinos@gmail.com>
Date: Fri, 17 Oct 2025 14:16:38 +0300
Subject: [PATCH] Use proper chat widget instead of sidebar

---
 .../frontend/components/Agent.tsx             | 102 ++++++++++--------
 .../frontend/components/StateDisplay.tsx      |  78 +++++++++-----
 2 files changed, 106 insertions(+), 74 deletions(-)

diff --git a/examples/ag-ui-research/frontend/components/Agent.tsx b/examples/ag-ui-research/frontend/components/Agent.tsx
index a7902872..2b77934a 100644
--- a/examples/ag-ui-research/frontend/components/Agent.tsx
+++ b/examples/ag-ui-research/frontend/components/Agent.tsx
@@ -5,7 +5,7 @@ import {
 	useCoAgent,
 	useCoAgentStateRender,
 } from "@copilotkit/react-core";
-import { CopilotSidebar } from "@copilotkit/react-ui";
+import { CopilotChat } from "@copilotkit/react-ui";
 import "@copilotkit/react-ui/styles.css";
 import StateDisplay from "./StateDisplay";
 
@@ -113,57 +113,69 @@ function AgentContent() {
 	});
 
 	return (
-		<div style={{ display: "flex", height: "100vh" }}>
-			<div
-				style={{
-					flex: 1,
-					padding: "2rem",
-					overflow: "auto",
-				}}
-			>
+		<>
+			<style>{`
+				.chat-container {
+					width: 50%;
+					height: 100vh;
+					border-right: 1px solid #e2e8f0;
+					display: flex;
+					flex-direction: column;
+				}
+				.chat-container > * {
+					flex: 1;
+					min-height: 0;
+				}
+			`}</style>
+			<div style={{ display: "flex", height: "100vh" }}>
+				{/* Chat on the left */}
+				<div className="chat-container">
+					<CopilotChat
+						labels={{
+							title: "Research Assistant",
+							initial:
+								"Hello! I can help you conduct deep research on complex questions using the haiku.rag knowledge base. Ask me anything!",
+						}}
+					/>
+				</div>
+
+				{/* State display on the right */}
 				<div
 					style={{
-						maxWidth: "800px",
-						margin: "0 auto",
+						width: "50%",
+						height: "100vh",
+						overflow: "auto",
+						background: "#f7fafc",
 					}}
 				>
-					<header style={{ marginBottom: "2rem" }}>
-						<h1
-							style={{
-								fontSize: "2.5rem",
-								fontWeight: "bold",
-								marginBottom: "0.5rem",
-								color: "#1a202c",
-							}}
-						>
-							Haiku.rag Research Assistant
-						</h1>
-						<p
-							style={{
-								fontSize: "1.125rem",
-								color: "#4a5568",
-								lineHeight: "1.6",
-							}}
-						>
-							Interactive research powered by <strong>Haiku.rag</strong>,{" "}
-							<strong>Pydantic AI</strong>, and <strong>AG-UI</strong>
-						</p>
-					</header>
+					<div style={{ padding: "2rem" }}>
+						<header style={{ marginBottom: "2rem" }}>
+							<h1
+								style={{
+									fontSize: "2rem",
+									fontWeight: "bold",
+									marginBottom: "0.5rem",
+									color: "#1a202c",
+								}}
+							>
+								Research State
+							</h1>
+							<p
+								style={{
+									fontSize: "0.875rem",
+									color: "#4a5568",
+									lineHeight: "1.6",
+								}}
+							>
+								Live updates from the research agent
+							</p>
+						</header>
 
-					<StateDisplay state={state} />
+						<StateDisplay state={state} />
+					</div>
 				</div>
 			</div>
-
-			<CopilotSidebar
-				defaultOpen={true}
-				clickOutsideToClose={false}
-				labels={{
-					title: "Research Assistant",
-					initial:
-						"Hello! I can help you conduct deep research on complex questions using the haiku.rag knowledge base. Ask me anything!",
-				}}
-			/>
-		</div>
+		</>
 	);
 }
 
diff --git a/examples/ag-ui-research/frontend/components/StateDisplay.tsx b/examples/ag-ui-research/frontend/components/StateDisplay.tsx
index 686ec3e8..eb822463 100644
--- a/examples/ag-ui-research/frontend/components/StateDisplay.tsx
+++ b/examples/ag-ui-research/frontend/components/StateDisplay.tsx
@@ -72,26 +72,20 @@ export default function StateDisplay({ state }: StateDisplayProps) {
 	return (
 		<div
 			style={{
-				background: "white",
-				borderRadius: "8px",
-				padding: "1.5rem",
-				boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
-				marginTop: "2rem",
+				display: "flex",
+				flexDirection: "column",
+				gap: "1rem",
 			}}
 		>
-			<h2
+			{/* Phase Progress */}
+			<div
 				style={{
-					fontSize: "1.5rem",
-					fontWeight: "600",
-					marginBottom: "1rem",
-					color: "#2d3748",
+					background: "white",
+					borderRadius: "8px",
+					padding: "1.5rem",
+					boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
 				}}
 			>
-				Research State
-			</h2>
-
-			{/* Phase Progress */}
-			<div style={{ marginBottom: "2rem" }}>
 				<div
 					style={{
 						fontSize: "0.875rem",
@@ -144,11 +138,10 @@ export default function StateDisplay({ state }: StateDisplayProps) {
 			{state.question && (
 				<div
 					style={{
-						padding: "1rem",
-						background: "#f7fafc",
-						borderRadius: "4px",
-						border: "1px solid #e2e8f0",
-						marginBottom: "1rem",
+						background: "white",
+						borderRadius: "8px",
+						padding: "1.5rem",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
 					}}
 				>
 					<div
@@ -176,11 +169,10 @@ export default function StateDisplay({ state }: StateDisplayProps) {
 			{state.confidence > 0 && (
 				<div
 					style={{
-						padding: "1rem",
-						background: "#f7fafc",
-						borderRadius: "4px",
-						border: "1px solid #e2e8f0",
-						marginBottom: "1rem",
+						background: "white",
+						borderRadius: "8px",
+						padding: "1.5rem",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
 					}}
 				>
 					<div
@@ -236,7 +228,14 @@ export default function StateDisplay({ state }: StateDisplayProps) {
 
 			{/* Research Plan */}
 			{state.plan.length > 0 && (
-				<div style={{ marginBottom: "1rem" }}>
+				<div
+					style={{
+						background: "white",
+						borderRadius: "8px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						overflow: "hidden",
+					}}
+				>
 					<button
 						type="button"
 						onClick={() => toggleSection("plan")}
@@ -317,7 +316,14 @@ export default function StateDisplay({ state }: StateDisplayProps) {
 
 			{/* Current Search Results */}
 			{state.current_search && (
-				<div style={{ marginBottom: "1rem" }}>
+				<div
+					style={{
+						background: "white",
+						borderRadius: "8px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						overflow: "hidden",
+					}}
+				>
 					<button
 						type="button"
 						onClick={() => toggleSection("search")}
@@ -440,7 +446,14 @@ export default function StateDisplay({ state }: StateDisplayProps) {
 
 			{/* Insights */}
 			{state.insights.length > 0 && (
-				<div style={{ marginBottom: "1rem" }}>
+				<div
+					style={{
+						background: "white",
+						borderRadius: "8px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						overflow: "hidden",
+					}}
+				>
 					<button
 						type="button"
 						onClick={() => toggleSection("insights")}
@@ -528,7 +541,14 @@ export default function StateDisplay({ state }: StateDisplayProps) {
 
 			{/* Final Report */}
 			{state.final_report && (
-				<div>
+				<div
+					style={{
+						background: "white",
+						borderRadius: "8px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						overflow: "hidden",
+					}}
+				>
 					<button
 						type="button"
 						onClick={() => toggleSection("report")}