apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-01 03:46:25 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: add auto-scroll functionality for new user queries

Browse source 
- Introduced NewQueryScrollHandler component to automatically scroll to the latest user message when a new query is submitted, enhancing user experience.
- Updated ChatHeader component to remove unnecessary border for a cleaner design.
- Adjusted ModelSelector styles for improved visual consistency and accessibility.
This commit is contained in:
Anish Sarkar 2025-12-24 02:09:24 +05:30
parent ea411ee1c8
commit ed63e5a1d6
3 changed files with 60 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
surfsense_web/components/new-chat/chat-header.tsx
View file

@ -48,7 +48,7 @@ export function ChatHeader({ searchSpaceId }: ChatHeaderProps) {
return (
<>
{/* Header Bar */}
<div className="flex items-center justify-between px-4 py-2 border-b border-border/30 bg-background/80 backdrop-blur-sm">
<div className="flex items-center justify-between px-4 py-2 bg-background/80 backdrop-blur-sm">
<ModelSelector onEdit={handleEditConfig} onAddNew={handleAddNew} />
</div>

16
surfsense_web/components/new-chat/model-selector.tsx
View file

@ -175,9 +175,10 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
role="combobox"
aria-expanded={open}
className={cn(
"h-9 gap-2 px-3 rounded-xl border border-border/50 bg-background/50 backdrop-blur-sm",
"hover:bg-muted/80 hover:border-border transition-all duration-200",
"h-9 gap-2 px-3 rounded-xl border border-border/30 bg-background/50 backdrop-blur-sm",
"hover:bg-muted/80 hover:border-border/30 transition-all duration-200",
"text-sm font-medium text-foreground",
"focus-visible:ring-0 focus-visible:ring-offset-0",
className
)}
>
@ -206,11 +207,11 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
</PopoverTrigger>
<PopoverContent
className="w-[360px] p-0 rounded-xl shadow-lg border-border/50"
className="w-[360px] p-0 rounded-xl shadow-lg border-border/30"
align="start"
sideOffset={8}
>
<Command shouldFilter={false} className="rounded-xl relative">
<Command shouldFilter={false} className="rounded-xl relative [&_[data-slot=command-input-wrapper]]:border-0 [&_[data-slot=command-input-wrapper]]:px-0 [&_[data-slot=command-input-wrapper]]:gap-2">
{/* Switching overlay */}
{isSwitching && (
<div className="absolute inset-0 z-10 flex items-center justify-center bg-background/80 backdrop-blur-sm rounded-xl">
@ -221,8 +222,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
</div>
)}
<div className="flex items-center gap-2 border-b px-3 py-2 bg-muted/30">
<Bot className="size-4 text-muted-foreground" />
<div className="flex items-center gap-2 border-b border-border/30 px-3 py-2">
<CommandInput
placeholder="Search models..."
value={searchQuery}
@ -300,7 +300,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
)}
{filteredGlobalConfigs.length > 0 && filteredUserConfigs.length > 0 && (
<CommandSeparator className="my-1" />
<CommandSeparator className="my-1 bg-border/30" />
)}
{/* User Configs Section */}
@ -362,7 +362,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
)}
{/* Add New Config Button */}
<div className="p-2 border-t border-border/50 bg-muted/20">
<div className="p-2 bg-muted/20">
<Button
variant="ghost"
size="sm"