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

changed filter behavior and design

Browse source
This commit is contained in:
Lucas Oliveira 2025-10-02 17:09:18 -03:00
parent e341e591d8
commit d1e83cc85a
2 changed files with 22 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/components/ui/button.tsx
View file

@ -11,7 +11,7 @@ const buttonVariants = cva(
destructive: destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90", "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: outline:
"border border-input hover:bg-muted hover:text-accent-foreground disabled:bg-muted disabled:!border-none", "border border-border hover:bg-muted hover:text-accent-foreground disabled:bg-muted disabled:!border-none",
primary: primary:
"border bg-background text-secondary-foreground hover:bg-muted hover:shadow-sm", "border bg-background text-secondary-foreground hover:bg-muted hover:shadow-sm",
warning: "bg-warning text-warning-foreground hover:bg-warning/90", warning: "bg-warning text-warning-foreground hover:bg-warning/90",

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

@ -6,6 +6,7 @@ import {
Check, Check,
ChevronDown, ChevronDown,
ChevronRight, ChevronRight,
Funnel,
GitBranch, GitBranch,
Loader2, Loader2,
Plus, Plus,
@ -2018,36 +2019,24 @@ function ChatPage() {
}; };
const onAtClick = () => { const onAtClick = () => {
if (inputRef.current) { if (!isFilterDropdownOpen) {
// Insert @ at current cursor position
const textarea = inputRef.current;
const start = textarea.selectionStart || 0;
const end = textarea.selectionEnd || 0;
const currentValue = textarea.value;
// Insert @ at cursor position
const newValue =
currentValue.substring(0, start) + "@" + currentValue.substring(end);
setInput(newValue);
// Set cursor position after the @
const newCursorPos = start + 1;
setTimeout(() => {
textarea.setSelectionRange(newCursorPos, newCursorPos);
textarea.focus();
}, 0);
// Open popover and set anchor position
loadAvailableFilters(); loadAvailableFilters();
setIsFilterDropdownOpen(true); setIsFilterDropdownOpen(true);
setFilterSearchTerm(""); setFilterSearchTerm("");
setSelectedFilterIndex(0); setSelectedFilterIndex(0);
// Get cursor position for popover anchoring // Get button position for popover anchoring
setTimeout(() => { const button = document.querySelector('[data-filter-button]') as HTMLElement;
const cursorPos = getCursorPosition(textarea); if (button) {
setAnchorPosition(cursorPos); const rect = button.getBoundingClientRect();
}, 0); setAnchorPosition({
x: rect.left + rect.width / 2,
y: rect.top + rect.height / 2 - 12
});
}
} else {
setIsFilterDropdownOpen(false);
setAnchorPosition(null);
} }
}; };
@ -2289,15 +2278,16 @@ function ChatPage() {
/> />
<Button <Button
type="button" type="button"
variant="ghost" variant="outline"
size="sm" size="iconSm"
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"
onMouseDown={(e) => { onMouseDown={(e) => {
e.preventDefault(); e.preventDefault();
}} }}
onClick={onAtClick} onClick={onAtClick}
data-filter-button
> >
<AtSign className="h-4 w-4" /> <Funnel className="h-4 w-4" />
</Button> </Button>
<Popover <Popover
open={isFilterDropdownOpen} open={isFilterDropdownOpen}
@ -2410,8 +2400,8 @@ function ChatPage() {
</Popover> </Popover>
<Button <Button
type="button" type="button"
variant="ghost" variant="outline"
size="sm" size="iconSm"
onClick={handleFilePickerClick} onClick={handleFilePickerClick}
disabled={isUploading} disabled={isUploading}
className="absolute bottom-3 left-12 h-8 w-8 p-0 rounded-full hover:bg-muted/50" className="absolute bottom-3 left-12 h-8 w-8 p-0 rounded-full hover:bg-muted/50"