gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

changed div to popover

Browse source
This commit is contained in:
Lucas Oliveira 2025-10-02 14:25:10 -03:00
parent a7bd2c2bc2
commit 3fae4c0fa3
1 changed files with 2294 additions and 2301 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

191
frontend/src/app/chat/page.tsx
View file

@ -15,10 +15,16 @@ import {
Zap, Zap,
} from "lucide-react"; } from "lucide-react";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { filterAccentClasses } from "@/components/knowledge-filter-panel";
import { MarkdownRenderer } from "@/components/markdown-renderer"; import { MarkdownRenderer } from "@/components/markdown-renderer";
import { ProtectedRoute } from "@/components/protected-route"; import { ProtectedRoute } from "@/components/protected-route";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { useAuth } from "@/contexts/auth-context"; import { useAuth } from "@/contexts/auth-context";
import { type EndpointType, useChat } from "@/contexts/chat-context"; import { type EndpointType, useChat } from "@/contexts/chat-context";
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context"; import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
@ -26,7 +32,6 @@ import { useTask } from "@/contexts/task-context";
import { useLoadingStore } from "@/stores/loadingStore"; import { useLoadingStore } from "@/stores/loadingStore";
import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery"; import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery";
import Nudges from "./nudges"; import Nudges from "./nudges";
import { filterAccentClasses } from "@/components/knowledge-filter-panel";
interface Message { interface Message {
role: "user" | "assistant"; role: "user" | "assistant";
@ -134,7 +139,6 @@ function ChatPage() {
const messagesEndRef = useRef<HTMLDivElement>(null); const messagesEndRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLTextAreaElement>(null); const inputRef = useRef<HTMLTextAreaElement>(null);
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
const dropdownRef = useRef<HTMLDivElement>(null);
const streamAbortRef = useRef<AbortController | null>(null); const streamAbortRef = useRef<AbortController | null>(null);
const streamIdRef = useRef(0); const streamIdRef = useRef(0);
const lastLoadedConversationRef = useRef<string | null>(null); const lastLoadedConversationRef = useRef<string | null>(null);
@ -193,7 +197,7 @@ function ChatPage() {
"Upload failed with status:", "Upload failed with status:",
response.status, response.status,
"Response:", "Response:",
errorText errorText,
); );
throw new Error("Failed to process document"); throw new Error("Failed to process document");
} }
@ -314,13 +318,6 @@ function ChatPage() {
} }
}; };
const handleFilterDropdownToggle = () => {
if (!isFilterDropdownOpen) {
loadAvailableFilters();
}
setIsFilterDropdownOpen(!isFilterDropdownOpen);
};
const handleFilterSelect = (filter: KnowledgeFilterData | null) => { const handleFilterSelect = (filter: KnowledgeFilterData | null) => {
setSelectedFilter(filter); setSelectedFilter(filter);
setIsFilterDropdownOpen(false); setIsFilterDropdownOpen(false);
@ -410,7 +407,7 @@ function ChatPage() {
console.log( console.log(
"Loading conversation with", "Loading conversation with",
conversationData.messages.length, conversationData.messages.length,
"messages" "messages",
); );
// Convert backend message format to frontend Message interface // Convert backend message format to frontend Message interface
const convertedMessages: Message[] = conversationData.messages.map( const convertedMessages: Message[] = conversationData.messages.map(
@ -538,7 +535,7 @@ function ChatPage() {
) === "string" ) === "string"
? toolCall.function?.arguments || toolCall.arguments ? toolCall.function?.arguments || toolCall.arguments
: JSON.stringify( : JSON.stringify(
toolCall.function?.arguments || toolCall.arguments toolCall.function?.arguments || toolCall.arguments,
), ),
result: toolCall.result, result: toolCall.result,
status: "completed", status: "completed",
@ -557,7 +554,7 @@ function ChatPage() {
} }
return message; return message;
} },
); );
setMessages(convertedMessages); setMessages(convertedMessages);
@ -646,7 +643,7 @@ function ChatPage() {
console.log( console.log(
"Chat page received file upload error event:", "Chat page received file upload error event:",
filename, filename,
error error,
); );
// Replace the last message with error message // Replace the last message with error message
@ -660,64 +657,45 @@ function ChatPage() {
window.addEventListener( window.addEventListener(
"fileUploadStart", "fileUploadStart",
handleFileUploadStart as EventListener handleFileUploadStart as EventListener,
); );
window.addEventListener( window.addEventListener(
"fileUploaded", "fileUploaded",
handleFileUploaded as EventListener handleFileUploaded as EventListener,
); );
window.addEventListener( window.addEventListener(
"fileUploadComplete", "fileUploadComplete",
handleFileUploadComplete as EventListener handleFileUploadComplete as EventListener,
); );
window.addEventListener( window.addEventListener(
"fileUploadError", "fileUploadError",
handleFileUploadError as EventListener handleFileUploadError as EventListener,
); );
return () => { return () => {
window.removeEventListener( window.removeEventListener(
"fileUploadStart", "fileUploadStart",
handleFileUploadStart as EventListener handleFileUploadStart as EventListener,
); );
window.removeEventListener( window.removeEventListener(
"fileUploaded", "fileUploaded",
handleFileUploaded as EventListener handleFileUploaded as EventListener,
); );
window.removeEventListener( window.removeEventListener(
"fileUploadComplete", "fileUploadComplete",
handleFileUploadComplete as EventListener handleFileUploadComplete as EventListener,
); );
window.removeEventListener( window.removeEventListener(
"fileUploadError", "fileUploadError",
handleFileUploadError as EventListener handleFileUploadError as EventListener,
); );
}; };
}, [endpoint, setPreviousResponseIds]); }, [endpoint, setPreviousResponseIds]);
// Handle click outside to close dropdown // Handle click outside to close dropdown
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
isFilterDropdownOpen &&
dropdownRef.current &&
!dropdownRef.current.contains(event.target as Node) &&
!inputRef.current?.contains(event.target as Node)
) {
setIsFilterDropdownOpen(false);
setFilterSearchTerm("");
setSelectedFilterIndex(0);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [isFilterDropdownOpen]);
const { data: nudges = [], cancel: cancelNudges } = useGetNudgesQuery( const { data: nudges = [], cancel: cancelNudges } = useGetNudgesQuery(
previousResponseIds[endpoint] previousResponseIds[endpoint],
); );
const handleSSEStream = async (userMessage: Message) => { const handleSSEStream = async (userMessage: Message) => {
@ -822,7 +800,7 @@ function ChatPage() {
console.log( console.log(
"Received chunk:", "Received chunk:",
chunk.type || chunk.object, chunk.type || chunk.object,
chunk chunk,
); );
// Extract response ID if present // Extract response ID if present
@ -838,14 +816,14 @@ function ChatPage() {
if (chunk.delta.function_call) { if (chunk.delta.function_call) {
console.log( console.log(
"Function call in delta:", "Function call in delta:",
chunk.delta.function_call chunk.delta.function_call,
); );
// Check if this is a new function call // Check if this is a new function call
if (chunk.delta.function_call.name) { if (chunk.delta.function_call.name) {
console.log( console.log(
"New function call:", "New function call:",
chunk.delta.function_call.name chunk.delta.function_call.name,
); );
const functionCall: FunctionCall = { const functionCall: FunctionCall = {
name: chunk.delta.function_call.name, name: chunk.delta.function_call.name,
@ -861,7 +839,7 @@ function ChatPage() {
else if (chunk.delta.function_call.arguments) { else if (chunk.delta.function_call.arguments) {
console.log( console.log(
"Function call arguments delta:", "Function call arguments delta:",
chunk.delta.function_call.arguments chunk.delta.function_call.arguments,
); );
const lastFunctionCall = const lastFunctionCall =
currentFunctionCalls[currentFunctionCalls.length - 1]; currentFunctionCalls[currentFunctionCalls.length - 1];
@ -873,14 +851,14 @@ function ChatPage() {
chunk.delta.function_call.arguments; chunk.delta.function_call.arguments;
console.log( console.log(
"Accumulated arguments:", "Accumulated arguments:",
lastFunctionCall.argumentsString lastFunctionCall.argumentsString,
); );
// Try to parse arguments if they look complete // Try to parse arguments if they look complete
if (lastFunctionCall.argumentsString.includes("}")) { if (lastFunctionCall.argumentsString.includes("}")) {
try { try {
const parsed = JSON.parse( const parsed = JSON.parse(
lastFunctionCall.argumentsString lastFunctionCall.argumentsString,
); );
lastFunctionCall.arguments = parsed; lastFunctionCall.arguments = parsed;
lastFunctionCall.status = "completed"; lastFunctionCall.status = "completed";
@ -888,7 +866,7 @@ function ChatPage() {
} catch (e) { } catch (e) {
console.log( console.log(
"Arguments not yet complete or invalid JSON:", "Arguments not yet complete or invalid JSON:",
e e,
); );
} }
} }
@ -921,7 +899,7 @@ function ChatPage() {
else if (toolCall.function.arguments) { else if (toolCall.function.arguments) {
console.log( console.log(
"Tool call arguments delta:", "Tool call arguments delta:",
toolCall.function.arguments toolCall.function.arguments,
); );
const lastFunctionCall = const lastFunctionCall =
currentFunctionCalls[ currentFunctionCalls[
@ -935,7 +913,7 @@ function ChatPage() {
toolCall.function.arguments; toolCall.function.arguments;
console.log( console.log(
"Accumulated tool arguments:", "Accumulated tool arguments:",
lastFunctionCall.argumentsString lastFunctionCall.argumentsString,
); );
// Try to parse arguments if they look complete // Try to parse arguments if they look complete
@ -944,7 +922,7 @@ function ChatPage() {
) { ) {
try { try {
const parsed = JSON.parse( const parsed = JSON.parse(
lastFunctionCall.argumentsString lastFunctionCall.argumentsString,
); );
lastFunctionCall.arguments = parsed; lastFunctionCall.arguments = parsed;
lastFunctionCall.status = "completed"; lastFunctionCall.status = "completed";
@ -952,7 +930,7 @@ function ChatPage() {
} catch (e) { } catch (e) {
console.log( console.log(
"Tool arguments not yet complete or invalid JSON:", "Tool arguments not yet complete or invalid JSON:",
e e,
); );
} }
} }
@ -984,7 +962,7 @@ function ChatPage() {
console.log( console.log(
"Error parsing function call on finish:", "Error parsing function call on finish:",
fc, fc,
e e,
); );
} }
} }
@ -1000,12 +978,12 @@ function ChatPage() {
console.log( console.log(
"🟢 CREATING function call (added):", "🟢 CREATING function call (added):",
chunk.item.id, chunk.item.id,
chunk.item.tool_name || chunk.item.name chunk.item.tool_name || chunk.item.name,
); );
// Try to find an existing pending call to update (created by earlier deltas) // Try to find an existing pending call to update (created by earlier deltas)
let existing = currentFunctionCalls.find( let existing = currentFunctionCalls.find(
(fc) => fc.id === chunk.item.id (fc) => fc.id === chunk.item.id,
); );
if (!existing) { if (!existing) {
existing = [...currentFunctionCalls] existing = [...currentFunctionCalls]
@ -1014,7 +992,7 @@ function ChatPage() {
(fc) => (fc) =>
fc.status === "pending" && fc.status === "pending" &&
!fc.id && !fc.id &&
fc.name === (chunk.item.tool_name || chunk.item.name) fc.name === (chunk.item.tool_name || chunk.item.name),
); );
} }
@ -1027,7 +1005,7 @@ function ChatPage() {
chunk.item.inputs || existing.arguments; chunk.item.inputs || existing.arguments;
console.log( console.log(
"🟢 UPDATED existing pending function call with id:", "🟢 UPDATED existing pending function call with id:",
existing.id existing.id,
); );
} else { } else {
const functionCall: FunctionCall = { const functionCall: FunctionCall = {
@ -1045,7 +1023,7 @@ function ChatPage() {
currentFunctionCalls.map((fc) => ({ currentFunctionCalls.map((fc) => ({
id: fc.id, id: fc.id,
name: fc.name, name: fc.name,
})) })),
); );
} }
} }
@ -1056,7 +1034,7 @@ function ChatPage() {
) { ) {
console.log( console.log(
"Function args delta (Realtime API):", "Function args delta (Realtime API):",
chunk.delta chunk.delta,
); );
const lastFunctionCall = const lastFunctionCall =
currentFunctionCalls[currentFunctionCalls.length - 1]; currentFunctionCalls[currentFunctionCalls.length - 1];
@ -1067,7 +1045,7 @@ function ChatPage() {
lastFunctionCall.argumentsString += chunk.delta || ""; lastFunctionCall.argumentsString += chunk.delta || "";
console.log( console.log(
"Accumulated arguments (Realtime API):", "Accumulated arguments (Realtime API):",
lastFunctionCall.argumentsString lastFunctionCall.argumentsString,
); );
} }
} }
@ -1078,26 +1056,26 @@ function ChatPage() {
) { ) {
console.log( console.log(
"Function args done (Realtime API):", "Function args done (Realtime API):",
chunk.arguments chunk.arguments,
); );
const lastFunctionCall = const lastFunctionCall =
currentFunctionCalls[currentFunctionCalls.length - 1]; currentFunctionCalls[currentFunctionCalls.length - 1];
if (lastFunctionCall) { if (lastFunctionCall) {
try { try {
lastFunctionCall.arguments = JSON.parse( lastFunctionCall.arguments = JSON.parse(
chunk.arguments || "{}" chunk.arguments || "{}",
); );
lastFunctionCall.status = "completed"; lastFunctionCall.status = "completed";
console.log( console.log(
"Parsed function arguments (Realtime API):", "Parsed function arguments (Realtime API):",
lastFunctionCall.arguments lastFunctionCall.arguments,
); );
} catch (e) { } catch (e) {
lastFunctionCall.arguments = { raw: chunk.arguments }; lastFunctionCall.arguments = { raw: chunk.arguments };
lastFunctionCall.status = "error"; lastFunctionCall.status = "error";
console.log( console.log(
"Error parsing function arguments (Realtime API):", "Error parsing function arguments (Realtime API):",
e e,
); );
} }
} }
@ -1111,14 +1089,14 @@ function ChatPage() {
console.log( console.log(
"🔵 UPDATING function call (done):", "🔵 UPDATING function call (done):",
chunk.item.id, chunk.item.id,
chunk.item.tool_name || chunk.item.name chunk.item.tool_name || chunk.item.name,
); );
console.log( console.log(
"🔵 Looking for existing function calls:", "🔵 Looking for existing function calls:",
currentFunctionCalls.map((fc) => ({ currentFunctionCalls.map((fc) => ({
id: fc.id, id: fc.id,
name: fc.name, name: fc.name,
})) })),
); );
// Find existing function call by ID or name // Find existing function call by ID or name
@ -1126,14 +1104,14 @@ function ChatPage() {
(fc) => (fc) =>
fc.id === chunk.item.id || fc.id === chunk.item.id ||
fc.name === chunk.item.tool_name || fc.name === chunk.item.tool_name ||
fc.name === chunk.item.name fc.name === chunk.item.name,
); );
if (functionCall) { if (functionCall) {
console.log( console.log(
"🔵 FOUND existing function call, updating:", "🔵 FOUND existing function call, updating:",
functionCall.id, functionCall.id,
functionCall.name functionCall.name,
); );
// Update existing function call with completion data // Update existing function call with completion data
functionCall.status = functionCall.status =
@ -1156,7 +1134,7 @@ function ChatPage() {
"🔴 WARNING: Could not find existing function call to update:", "🔴 WARNING: Could not find existing function call to update:",
chunk.item.id, chunk.item.id,
chunk.item.tool_name, chunk.item.tool_name,
chunk.item.name chunk.item.name,
); );
} }
} }
@ -1177,7 +1155,7 @@ function ChatPage() {
fc.name === chunk.item.name || fc.name === chunk.item.name ||
fc.name === chunk.item.type || fc.name === chunk.item.type ||
fc.name.includes(chunk.item.type.replace("_call", "")) || fc.name.includes(chunk.item.type.replace("_call", "")) ||
chunk.item.type.includes(fc.name) chunk.item.type.includes(fc.name),
); );
if (functionCall) { if (functionCall) {
@ -1221,12 +1199,12 @@ function ChatPage() {
"🟡 CREATING tool call (added):", "🟡 CREATING tool call (added):",
chunk.item.id, chunk.item.id,
chunk.item.tool_name || chunk.item.name, chunk.item.tool_name || chunk.item.name,
chunk.item.type chunk.item.type,
); );
// Dedupe by id or pending with same name // Dedupe by id or pending with same name
let existing = currentFunctionCalls.find( let existing = currentFunctionCalls.find(
(fc) => fc.id === chunk.item.id (fc) => fc.id === chunk.item.id,
); );
if (!existing) { if (!existing) {
existing = [...currentFunctionCalls] existing = [...currentFunctionCalls]
@ -1238,7 +1216,7 @@ function ChatPage() {
fc.name === fc.name ===
(chunk.item.tool_name || (chunk.item.tool_name ||
chunk.item.name || chunk.item.name ||
chunk.item.type) chunk.item.type),
); );
} }
@ -1254,7 +1232,7 @@ function ChatPage() {
chunk.item.inputs || existing.arguments; chunk.item.inputs || existing.arguments;
console.log( console.log(
"🟡 UPDATED existing pending tool call with id:", "🟡 UPDATED existing pending tool call with id:",
existing.id existing.id,
); );
} else { } else {
const functionCall = { const functionCall = {
@ -1275,7 +1253,7 @@ function ChatPage() {
id: fc.id, id: fc.id,
name: fc.name, name: fc.name,
type: fc.type, type: fc.type,
})) })),
); );
} }
} }
@ -1553,7 +1531,7 @@ function ChatPage() {
const handleForkConversation = ( const handleForkConversation = (
messageIndex: number, messageIndex: number,
event?: React.MouseEvent event?: React.MouseEvent,
) => { ) => {
// Prevent any default behavior and stop event propagation // Prevent any default behavior and stop event propagation
if (event) { if (event) {
@ -1618,7 +1596,7 @@ function ChatPage() {
const renderFunctionCalls = ( const renderFunctionCalls = (
functionCalls: FunctionCall[], functionCalls: FunctionCall[],
messageIndex?: number messageIndex?: number,
) => { ) => {
if (!functionCalls || functionCalls.length === 0) return null; if (!functionCalls || functionCalls.length === 0) return null;
@ -1803,8 +1781,7 @@ function ChatPage() {
)); ));
})()} })()}
<div className="text-xs text-muted-foreground"> <div className="text-xs text-muted-foreground">
Found{" "} Found {(() => {
{(() => {
let resultsToCount = fc.result; let resultsToCount = fc.result;
if ( if (
fc.result.length > 0 && fc.result.length > 0 &&
@ -1815,8 +1792,7 @@ function ChatPage() {
resultsToCount = fc.result[0].results; resultsToCount = fc.result[0].results;
} }
return resultsToCount.length; return resultsToCount.length;
})()}{" "} })()} result
result
{(() => { {(() => {
let resultsToCount = fc.result; let resultsToCount = fc.result;
if ( if (
@ -1942,7 +1918,11 @@ function ChatPage() {
{message.role === "user" && ( {message.role === "user" && (
<div className="flex gap-3"> <div className="flex gap-3">
<Avatar className="w-8 h-8 flex-shrink-0 select-none"> <Avatar className="w-8 h-8 flex-shrink-0 select-none">
<AvatarImage draggable={false} src={user?.picture} alt={user?.name} /> <AvatarImage
draggable={false}
src={user?.picture}
alt={user?.name}
/>
<AvatarFallback className="text-sm bg-primary/20 text-primary"> <AvatarFallback className="text-sm bg-primary/20 text-primary">
{user?.name ? ( {user?.name ? (
user.name.charAt(0).toUpperCase() user.name.charAt(0).toUpperCase()
@ -1967,7 +1947,7 @@ function ChatPage() {
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
{renderFunctionCalls( {renderFunctionCalls(
message.functionCalls || [], message.functionCalls || [],
index index,
)} )}
<MarkdownRenderer chatMessage={message.content} /> <MarkdownRenderer chatMessage={message.content} />
</div> </div>
@ -1996,7 +1976,7 @@ function ChatPage() {
<div className="flex-1"> <div className="flex-1">
{renderFunctionCalls( {renderFunctionCalls(
streamingMessage.functionCalls, streamingMessage.functionCalls,
messages.length messages.length,
)} )}
<MarkdownRenderer <MarkdownRenderer
chatMessage={streamingMessage.content} chatMessage={streamingMessage.content}
@ -2125,7 +2105,7 @@ function ChatPage() {
const filteredFilters = availableFilters.filter((filter) => const filteredFilters = availableFilters.filter((filter) =>
filter.name filter.name
.toLowerCase() .toLowerCase()
.includes(filterSearchTerm.toLowerCase()) .includes(filterSearchTerm.toLowerCase()),
); );
if (e.key === "Escape") { if (e.key === "Escape") {
@ -2143,7 +2123,7 @@ function ChatPage() {
if (e.key === "ArrowDown") { if (e.key === "ArrowDown") {
e.preventDefault(); e.preventDefault();
setSelectedFilterIndex((prev) => setSelectedFilterIndex((prev) =>
prev < filteredFilters.length - 1 ? prev + 1 : 0 prev < filteredFilters.length - 1 ? prev + 1 : 0,
); );
return; return;
} }
@ -2151,7 +2131,7 @@ function ChatPage() {
if (e.key === "ArrowUp") { if (e.key === "ArrowUp") {
e.preventDefault(); e.preventDefault();
setSelectedFilterIndex((prev) => setSelectedFilterIndex((prev) =>
prev > 0 ? prev - 1 : filteredFilters.length - 1 prev > 0 ? prev - 1 : filteredFilters.length - 1,
); );
return; return;
} }
@ -2169,7 +2149,7 @@ function ChatPage() {
) { ) {
e.preventDefault(); e.preventDefault();
handleFilterSelect( handleFilterSelect(
filteredFilters[selectedFilterIndex] filteredFilters[selectedFilterIndex],
); );
return; return;
} }
@ -2188,7 +2168,7 @@ function ChatPage() {
) { ) {
e.preventDefault(); e.preventDefault();
handleFilterSelect( handleFilterSelect(
filteredFilters[selectedFilterIndex] filteredFilters[selectedFilterIndex],
); );
return; return;
} }
@ -2225,19 +2205,30 @@ function ChatPage() {
className="hidden" className="hidden"
accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt" accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
/> />
<Popover
open={isFilterDropdownOpen}
onOpenChange={(open) => {
setIsFilterDropdownOpen(open);
if (open) {
loadAvailableFilters();
}
}}
>
<PopoverTrigger asChild>
<Button <Button
type="button" type="button"
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={handleFilterDropdownToggle}
className="absolute bottom-3 left-3 h-8 w-8 p-0 rounded-full hover:bg-muted/50" className="absolute bottom-3 left-3 h-8 w-8 p-0 rounded-full hover:bg-muted/50"
> >
<AtSign className="h-4 w-4" /> <AtSign className="h-4 w-4" />
</Button> </Button>
{isFilterDropdownOpen && ( </PopoverTrigger>
<div <PopoverContent
ref={dropdownRef} className="w-64 p-2"
className="absolute bottom-14 left-0 w-64 bg-popover border border-border rounded-md shadow-md z-50 p-2" side="top"
align="start"
sideOffset={8}
> >
<div className="space-y-1"> <div className="space-y-1">
{filterSearchTerm && ( {filterSearchTerm && (
@ -2253,6 +2244,7 @@ function ChatPage() {
<> <>
{!filterSearchTerm && ( {!filterSearchTerm && (
<button <button
type="button"
onClick={() => handleFilterSelect(null)} onClick={() => handleFilterSelect(null)}
className={`w-full text-left px-2 py-2 text-sm rounded hover:bg-muted/50 flex items-center justify-between ${ className={`w-full text-left px-2 py-2 text-sm rounded hover:bg-muted/50 flex items-center justify-between ${
selectedFilterIndex === -1 ? "bg-muted/50" : "" selectedFilterIndex === -1 ? "bg-muted/50" : ""
@ -2268,11 +2260,12 @@ function ChatPage() {
.filter((filter) => .filter((filter) =>
filter.name filter.name
.toLowerCase() .toLowerCase()
.includes(filterSearchTerm.toLowerCase()) .includes(filterSearchTerm.toLowerCase()),
) )
.map((filter, index) => ( .map((filter, index) => (
<button <button
key={filter.id} key={filter.id}
type="button"
onClick={() => handleFilterSelect(filter)} onClick={() => handleFilterSelect(filter)}
className={`w-full overflow-hidden text-left px-2 py-2 gap-2 text-sm rounded hover:bg-muted/50 flex items-center justify-between ${ className={`w-full overflow-hidden text-left px-2 py-2 gap-2 text-sm rounded hover:bg-muted/50 flex items-center justify-between ${
index === selectedFilterIndex ? "bg-muted/50" : "" index === selectedFilterIndex ? "bg-muted/50" : ""
@ -2296,7 +2289,7 @@ function ChatPage() {
{availableFilters.filter((filter) => {availableFilters.filter((filter) =>
filter.name filter.name
.toLowerCase() .toLowerCase()
.includes(filterSearchTerm.toLowerCase()) .includes(filterSearchTerm.toLowerCase()),
).length === 0 && ).length === 0 &&
filterSearchTerm && ( filterSearchTerm && (
<div className="px-2 py-3 text-sm text-muted-foreground"> <div className="px-2 py-3 text-sm text-muted-foreground">
@ -2306,8 +2299,8 @@ function ChatPage() {
</> </>
)} )}
</div> </div>
</div> </PopoverContent>
)} </Popover>
<Button <Button
type="button" type="button"
variant="ghost" variant="ghost"