Filter documents in app
This commit is contained in:
Yiorgis Gozadinos
parent
af786596b1
commit
0419c9a0ae
4 changed files with 469 additions and 10 deletions
|
|
@ -83,6 +83,7 @@ async def stream_chat(request: Request) -> Response:
|
|||
# Restore session state from incoming AG-UI state (look under namespaced key)
|
||||
initial_qa_history: list[QAResponse] = []
|
||||
session_id: str | None = None
|
||||
document_filter: list[str] = []
|
||||
state = getattr(run_input, "state", None)
|
||||
if state:
|
||||
chat_state = state.get(AGUI_STATE_KEY, state)
|
||||
|
|
@ -91,6 +92,7 @@ async def stream_chat(request: Request) -> Response:
|
|||
QAResponse(**qa) for qa in chat_state.get("qa_history", [])
|
||||
]
|
||||
session_id = chat_state.get("session_id")
|
||||
document_filter = chat_state.get("document_filter", [])
|
||||
|
||||
# Determine session_id: prefer state, fall back to thread_id, generate UUID if neither
|
||||
thread_id = getattr(run_input, "thread_id", None)
|
||||
|
|
@ -103,6 +105,7 @@ async def stream_chat(request: Request) -> Response:
|
|||
session_state=ChatSessionState(
|
||||
session_id=session_id,
|
||||
qa_history=initial_qa_history,
|
||||
document_filter=document_filter,
|
||||
),
|
||||
state_key=AGUI_STATE_KEY,
|
||||
)
|
||||
|
|
|
|||
16
app/frontend/app/api/documents/route.ts
Normal file
16
app/frontend/app/api/documents/route.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { NextResponse } from "next/server";
|
||||
|
||||
export async function GET() {
|
||||
const backendUrl = process.env.BACKEND_URL || "http://backend:8000";
|
||||
|
||||
try {
|
||||
const response = await fetch(`${backendUrl}/api/documents`);
|
||||
const data = await response.json();
|
||||
return NextResponse.json(data);
|
||||
} catch {
|
||||
return NextResponse.json(
|
||||
{ documents: [], error: "Backend unavailable" },
|
||||
{ status: 503 },
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@ import "@copilotkit/react-ui/styles.css";
|
|||
import CitationBlock from "./CitationBlock";
|
||||
import ContextPanel from "./ContextPanel";
|
||||
import DbInfo from "./DbInfo";
|
||||
import DocumentFilter from "./DocumentFilter";
|
||||
|
||||
// Must match AGUI_STATE_KEY from haiku.rag.agents.chat
|
||||
const AGUI_STATE_KEY = "haiku.rag.chat";
|
||||
|
|
@ -44,6 +45,7 @@ interface ChatSessionState {
|
|||
citations: Citation[];
|
||||
qa_history: QAResponse[];
|
||||
session_context: SessionContext | null;
|
||||
document_filter: string[];
|
||||
}
|
||||
|
||||
// AG-UI state is namespaced under AGUI_STATE_KEY
|
||||
|
|
@ -369,23 +371,59 @@ function ToolCallIndicator({
|
|||
);
|
||||
}
|
||||
|
||||
function FilterIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function ChatContentInner() {
|
||||
const [contextOpen, setContextOpen] = useState(false);
|
||||
const [filterOpen, setFilterOpen] = useState(false);
|
||||
|
||||
const { state: agentState } = useCoAgent<AgentState>({
|
||||
name: "chat_agent",
|
||||
initialState: {
|
||||
[AGUI_STATE_KEY]: {
|
||||
session_id: "",
|
||||
citations: [],
|
||||
qa_history: [],
|
||||
session_context: null,
|
||||
const { state: agentState, setState: setAgentState } = useCoAgent<AgentState>(
|
||||
{
|
||||
name: "chat_agent",
|
||||
initialState: {
|
||||
[AGUI_STATE_KEY]: {
|
||||
session_id: "",
|
||||
citations: [],
|
||||
qa_history: [],
|
||||
session_context: null,
|
||||
document_filter: [],
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
);
|
||||
|
||||
// Extract session context from agent state
|
||||
// Extract session context and document filter from agent state
|
||||
const sessionContext = agentState?.[AGUI_STATE_KEY]?.session_context ?? null;
|
||||
const documentFilter = agentState?.[AGUI_STATE_KEY]?.document_filter ?? [];
|
||||
|
||||
const handleFilterApply = (selected: string[]) => {
|
||||
setAgentState({
|
||||
...agentState,
|
||||
[AGUI_STATE_KEY]: {
|
||||
...agentState?.[AGUI_STATE_KEY],
|
||||
session_id: agentState?.[AGUI_STATE_KEY]?.session_id ?? "",
|
||||
citations: agentState?.[AGUI_STATE_KEY]?.citations ?? [],
|
||||
qa_history: agentState?.[AGUI_STATE_KEY]?.qa_history ?? [],
|
||||
session_context: agentState?.[AGUI_STATE_KEY]?.session_context ?? null,
|
||||
document_filter: selected,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
useCoAgentStateRender<AgentState>({
|
||||
name: "chat_agent",
|
||||
|
|
@ -513,6 +551,21 @@ function ChatContentInner() {
|
|||
<div className="chat-wrapper">
|
||||
<div className="chat-container">
|
||||
<div className="chat-header">
|
||||
<button
|
||||
type="button"
|
||||
className={`header-btn ${documentFilter.length > 0 ? "has-content" : ""}`}
|
||||
onClick={() => setFilterOpen(true)}
|
||||
title={
|
||||
documentFilter.length > 0
|
||||
? `Filtering: ${documentFilter.length} document(s)`
|
||||
: "Filter documents"
|
||||
}
|
||||
>
|
||||
<FilterIcon />
|
||||
{documentFilter.length > 0
|
||||
? `Filter (${documentFilter.length})`
|
||||
: "Filter"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`header-btn ${sessionContext?.summary ? "has-content" : ""}`}
|
||||
|
|
@ -544,6 +597,12 @@ function ChatContentInner() {
|
|||
onClose={() => setContextOpen(false)}
|
||||
sessionContext={sessionContext}
|
||||
/>
|
||||
<DocumentFilter
|
||||
isOpen={filterOpen}
|
||||
onClose={() => setFilterOpen(false)}
|
||||
selected={documentFilter}
|
||||
onApply={handleFilterApply}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
381
app/frontend/components/DocumentFilter.tsx
Normal file
381
app/frontend/components/DocumentFilter.tsx
Normal file
|
|
@ -0,0 +1,381 @@
|
|||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useId, useState } from "react";
|
||||
|
||||
interface Document {
|
||||
id: string;
|
||||
title: string | null;
|
||||
uri: string | null;
|
||||
}
|
||||
|
||||
interface DocumentFilterProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
selected: string[];
|
||||
onApply: (selected: string[]) => void;
|
||||
}
|
||||
|
||||
function FilterIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DocumentFilter({
|
||||
isOpen,
|
||||
onClose,
|
||||
selected,
|
||||
onApply,
|
||||
}: DocumentFilterProps) {
|
||||
const titleId = useId();
|
||||
const [documents, setDocuments] = useState<Document[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [localSelected, setLocalSelected] = useState<Set<string>>(
|
||||
new Set(selected),
|
||||
);
|
||||
|
||||
// Reset local state when modal opens
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setLocalSelected(new Set(selected));
|
||||
setSearchTerm("");
|
||||
}
|
||||
}, [isOpen, selected]);
|
||||
|
||||
// Fetch documents when modal opens
|
||||
useEffect(() => {
|
||||
if (isOpen && documents.length === 0) {
|
||||
setLoading(true);
|
||||
fetch("/api/documents")
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
setDocuments(data.documents || []);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
}, [isOpen, documents.length]);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
onClose();
|
||||
}
|
||||
},
|
||||
[onClose],
|
||||
);
|
||||
|
||||
const toggleDocument = (displayName: string) => {
|
||||
setLocalSelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(displayName)) {
|
||||
next.delete(displayName);
|
||||
} else {
|
||||
next.add(displayName);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleApply = () => {
|
||||
onApply(Array.from(localSelected));
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleClearAll = () => {
|
||||
setLocalSelected(new Set());
|
||||
};
|
||||
|
||||
const getDisplayName = (doc: Document) => doc.title || doc.uri || doc.id;
|
||||
|
||||
const filteredDocuments = documents.filter((doc) => {
|
||||
if (!searchTerm) return true;
|
||||
const displayName = getDisplayName(doc).toLowerCase();
|
||||
return displayName.includes(searchTerm.toLowerCase());
|
||||
});
|
||||
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<style>{`
|
||||
.filter-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
.filter-modal {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.filter-modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.filter-modal-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
color: #d97706;
|
||||
}
|
||||
.filter-modal-title {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
.filter-modal-description {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.filter-search {
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.875rem;
|
||||
font-size: 0.875rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 0.75rem;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.filter-search:focus {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
.filter-list {
|
||||
flex: 1;
|
||||
min-height: 200px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
.filter-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.625rem 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
.filter-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.filter-item:hover {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
.filter-item input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
accent-color: #3b82f6;
|
||||
}
|
||||
.filter-item-label {
|
||||
flex: 1;
|
||||
font-size: 0.875rem;
|
||||
color: #334155;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.filter-loading, .filter-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100px;
|
||||
color: #94a3b8;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.filter-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
.filter-count {
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
}
|
||||
.filter-count strong {
|
||||
color: #3b82f6;
|
||||
}
|
||||
.filter-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.filter-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.filter-btn-secondary {
|
||||
background: white;
|
||||
color: #475569;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
.filter-btn-secondary:hover {
|
||||
background: #f8fafc;
|
||||
border-color: #cbd5e1;
|
||||
}
|
||||
.filter-btn-primary {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: 1px solid #3b82f6;
|
||||
}
|
||||
.filter-btn-primary:hover {
|
||||
background: #2563eb;
|
||||
border-color: #2563eb;
|
||||
}
|
||||
.filter-btn-clear {
|
||||
background: transparent;
|
||||
color: #ef4444;
|
||||
border: none;
|
||||
padding: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.filter-btn-clear:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
`}</style>
|
||||
<div
|
||||
className="filter-modal-overlay"
|
||||
onClick={onClose}
|
||||
onKeyDown={handleKeyDown}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby={titleId}
|
||||
>
|
||||
{/* biome-ignore lint/a11y/noStaticElementInteractions: modal content wrapper */}
|
||||
<div
|
||||
className="filter-modal"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onKeyDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="filter-modal-header">
|
||||
<div className="filter-modal-icon">
|
||||
<FilterIcon />
|
||||
</div>
|
||||
<h2 id={titleId} className="filter-modal-title">
|
||||
Filter Documents
|
||||
</h2>
|
||||
</div>
|
||||
<p className="filter-modal-description">
|
||||
Select documents to restrict searches. When active, only selected
|
||||
documents will be searched.
|
||||
</p>
|
||||
<input
|
||||
type="text"
|
||||
className="filter-search"
|
||||
placeholder="Search documents..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
<div className="filter-list">
|
||||
{loading ? (
|
||||
<div className="filter-loading">Loading documents...</div>
|
||||
) : filteredDocuments.length === 0 ? (
|
||||
<div className="filter-empty">
|
||||
{searchTerm ? "No matching documents" : "No documents found"}
|
||||
</div>
|
||||
) : (
|
||||
filteredDocuments.map((doc) => {
|
||||
const displayName = getDisplayName(doc);
|
||||
return (
|
||||
<label key={doc.id} className="filter-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={localSelected.has(displayName)}
|
||||
onChange={() => toggleDocument(displayName)}
|
||||
/>
|
||||
<span className="filter-item-label">{displayName}</span>
|
||||
</label>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
<div className="filter-footer">
|
||||
<div className="filter-count">
|
||||
{localSelected.size > 0 ? (
|
||||
<>
|
||||
<strong>{localSelected.size}</strong> document
|
||||
{localSelected.size === 1 ? "" : "s"} selected
|
||||
<button
|
||||
type="button"
|
||||
className="filter-btn filter-btn-clear"
|
||||
onClick={handleClearAll}
|
||||
>
|
||||
Clear all
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
"No filter (all documents)"
|
||||
)}
|
||||
</div>
|
||||
<div className="filter-buttons">
|
||||
<button
|
||||
type="button"
|
||||
className="filter-btn filter-btn-secondary"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="filter-btn filter-btn-primary"
|
||||
onClick={handleApply}
|
||||
>
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue