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, useCoAgent,
useCoAgentStateRender, useCoAgentStateRender,
} from "@copilotkit/react-core"; } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui"; import { CopilotChat } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css"; import "@copilotkit/react-ui/styles.css";
import StateDisplay from "./StateDisplay"; import StateDisplay from "./StateDisplay";
@ -113,57 +113,69 @@ function AgentContent() {
}); });
return ( return (
<div style={{ display: "flex", height: "100vh" }}> <>
<div <style>{`
style={{ .chat-container {
flex: 1, width: 50%;
padding: "2rem", height: 100vh;
overflow: "auto", 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 <div
style={{ style={{
maxWidth: "800px", width: "50%",
margin: "0 auto", height: "100vh",
overflow: "auto",
background: "#f7fafc",
}} }}
> >
<header style={{ marginBottom: "2rem" }}> <div style={{ padding: "2rem" }}>
<h1 <header style={{ marginBottom: "2rem" }}>
style={{ <h1
fontSize: "2.5rem", style={{
fontWeight: "bold", fontSize: "2rem",
marginBottom: "0.5rem", fontWeight: "bold",
color: "#1a202c", marginBottom: "0.5rem",
}} color: "#1a202c",
> }}
Haiku.rag Research Assistant >
</h1> Research State
<p </h1>
style={{ <p
fontSize: "1.125rem", style={{
color: "#4a5568", fontSize: "0.875rem",
lineHeight: "1.6", color: "#4a5568",
}} lineHeight: "1.6",
> }}
Interactive research powered by <strong>Haiku.rag</strong>,{" "} >
<strong>Pydantic AI</strong>, and <strong>AG-UI</strong> Live updates from the research agent
</p> </p>
</header> </header>
<StateDisplay state={state} /> <StateDisplay state={state} />
</div>
</div> </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 ( return (
<div <div
style={{ style={{
background: "white", display: "flex",
borderRadius: "8px", flexDirection: "column",
padding: "1.5rem", gap: "1rem",
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
marginTop: "2rem",
}} }}
> >
<h2 {/* Phase Progress */}
<div
style={{ style={{
fontSize: "1.5rem", background: "white",
fontWeight: "600", borderRadius: "8px",
marginBottom: "1rem", padding: "1.5rem",
color: "#2d3748", boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
}} }}
> >
Research State
</h2>
{/* Phase Progress */}
<div style={{ marginBottom: "2rem" }}>
<div <div
style={{ style={{
fontSize: "0.875rem", fontSize: "0.875rem",
@ -144,11 +138,10 @@ export default function StateDisplay({ state }: StateDisplayProps) {
{state.question && ( {state.question && (
<div <div
style={{ style={{
padding: "1rem", background: "white",
background: "#f7fafc", borderRadius: "8px",
borderRadius: "4px", padding: "1.5rem",
border: "1px solid #e2e8f0", boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
marginBottom: "1rem",
}} }}
> >
<div <div
@ -176,11 +169,10 @@ export default function StateDisplay({ state }: StateDisplayProps) {
{state.confidence > 0 && ( {state.confidence > 0 && (
<div <div
style={{ style={{
padding: "1rem", background: "white",
background: "#f7fafc", borderRadius: "8px",
borderRadius: "4px", padding: "1.5rem",
border: "1px solid #e2e8f0", boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
marginBottom: "1rem",
}} }}
> >
<div <div
@ -236,7 +228,14 @@ export default function StateDisplay({ state }: StateDisplayProps) {
{/* Research Plan */} {/* Research Plan */}
{state.plan.length > 0 && ( {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 <button
type="button" type="button"
onClick={() => toggleSection("plan")} onClick={() => toggleSection("plan")}
@ -317,7 +316,14 @@ export default function StateDisplay({ state }: StateDisplayProps) {
{/* Current Search Results */} {/* Current Search Results */}
{state.current_search && ( {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 <button
type="button" type="button"
onClick={() => toggleSection("search")} onClick={() => toggleSection("search")}
@ -440,7 +446,14 @@ export default function StateDisplay({ state }: StateDisplayProps) {
{/* Insights */} {/* Insights */}
{state.insights.length > 0 && ( {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 <button
type="button" type="button"
onClick={() => toggleSection("insights")} onClick={() => toggleSection("insights")}
@ -528,7 +541,14 @@ export default function StateDisplay({ state }: StateDisplayProps) {
{/* Final Report */} {/* Final Report */}
{state.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 <button
type="button" type="button"
onClick={() => toggleSection("report")} onClick={() => toggleSection("report")}