danvics/haiku.rag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use proper chat widget instead of sidebar

Browse source
This commit is contained in:
Yiorgis Gozadinos 2025-10-17 14:16:38 +03:00
parent 2d86c0fd61
commit cc3d1c7e43
No known key found for this signature in database
2 changed files with 106 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
examples/ag-ui-research/frontend/components/Agent.tsx
View file

@ -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>
</>
);
}

78
examples/ag-ui-research/frontend/components/StateDisplay.tsx
View file

@ -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")}