apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-23 19:05:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(ui): enhance Drawer component structure and styling; add Manage Connectors option to dropdown menu

Browse source
This commit is contained in:
Anish Sarkar 2026-05-03 22:52:43 +05:30
parent 761f5b1c11
commit 056b2e270b
2 changed files with 40 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

66
surfsense_web/components/assistant-ui/thread.tsx
View file

@ -69,7 +69,13 @@ import {
import { PromptPicker, type PromptPickerRef } from "@/components/new-chat/prompt-picker"; import { PromptPicker, type PromptPickerRef } from "@/components/new-chat/prompt-picker";
import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar"; import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer"; import {
Drawer,
DrawerContent,
DrawerHandle,
DrawerHeader,
DrawerTitle,
} from "@/components/ui/drawer";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
@ -900,15 +906,28 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
<Upload className="size-4" /> <Upload className="size-4" />
Upload Files Upload Files
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem onSelect={() => setConnectorDialogOpen(true)}>
<Unplug className="size-4" />
Manage Connectors
</DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
<Drawer open={toolsPopoverOpen} onOpenChange={setToolsPopoverOpen}> <Drawer
<DrawerContent className="max-h-[60dvh]"> open={toolsPopoverOpen}
onOpenChange={setToolsPopoverOpen}
shouldScaleBackground={false}
>
<DrawerContent className="h-[85vh] max-h-[85vh] z-80" overlayClassName="z-80">
<DrawerHandle /> <DrawerHandle />
<div className="px-4 py-2"> <DrawerHeader className="px-4 pb-3 pt-2">
<DrawerTitle className="text-sm font-medium">Manage Tools</DrawerTitle> <DrawerTitle className="flex items-center justify-center gap-2 text-base font-semibold">
</div> Manage Tools
<div className="overflow-y-auto pb-6" onScroll={handleToolsScroll}> </DrawerTitle>
</DrawerHeader>
<div
className="min-h-0 flex-1 overflow-y-auto scrollbar-thin pb-6"
onScroll={handleToolsScroll}
>
{groupedTools {groupedTools
.filter((g) => !g.connectorIcon) .filter((g) => !g.connectorIcon)
.map((group) => ( .map((group) => (
@ -1003,15 +1022,6 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
</div> </div>
</DrawerContent> </DrawerContent>
</Drawer> </Drawer>
<Button
variant="ghost"
size="icon"
className="size-[34px] rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30"
aria-label="Manage connectors"
onClick={() => setConnectorDialogOpen(true)}
>
<Unplug className="size-4" />
</Button>
</> </>
) : ( ) : (
<Popover open={toolsPopoverOpen} onOpenChange={setToolsPopoverOpen}> <Popover open={toolsPopoverOpen} onOpenChange={setToolsPopoverOpen}>
@ -1212,17 +1222,19 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
</div> </div>
)} )}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<TooltipIconButton {isDesktop && (
tooltip="Capture screen" <TooltipIconButton
type="button" tooltip="Capture screen"
variant="ghost" type="button"
size="icon" variant="ghost"
className="size-8 rounded-full" size="icon"
aria-label="Capture screen" className="size-8 rounded-full"
onClick={() => void handleScreenCapture()} aria-label="Capture screen"
> onClick={() => void handleScreenCapture()}
<Camera className="size-4" /> >
</TooltipIconButton> <Camera className="size-4" />
</TooltipIconButton>
)}
<AuiIf condition={({ thread }) => !thread.isRunning}> <AuiIf condition={({ thread }) => !thread.isRunning}>
<ComposerPrimitive.Send asChild disabled={isSendDisabled}> <ComposerPrimitive.Send asChild disabled={isSendDisabled}>
<TooltipIconButton <TooltipIconButton

5
surfsense_web/components/chat-comments/comment-sheet/comment-sheet.tsx
View file

@ -1,6 +1,5 @@
"use client"; "use client";
import { MessageCircleReply } from "lucide-react";
import { import {
Drawer, Drawer,
DrawerContent, DrawerContent,
@ -29,8 +28,7 @@ export function CommentSheet({
<DrawerContent className="h-[85vh] max-h-[85vh] z-80" overlayClassName="z-80"> <DrawerContent className="h-[85vh] max-h-[85vh] z-80" overlayClassName="z-80">
<DrawerHandle /> <DrawerHandle />
<DrawerHeader className="px-4 pb-3 pt-2"> <DrawerHeader className="px-4 pb-3 pt-2">
<DrawerTitle className="flex items-center gap-2 text-base font-semibold"> <DrawerTitle className="flex items-center justify-center gap-2 text-base font-semibold">
<MessageCircleReply className="size-5" />
Comments Comments
{commentCount > 0 && ( {commentCount > 0 && (
<span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"> <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
@ -56,7 +54,6 @@ export function CommentSheet({
> >
<SheetHeader className="flex-shrink-0 px-4 py-4"> <SheetHeader className="flex-shrink-0 px-4 py-4">
<SheetTitle className="flex items-center gap-2 text-base font-semibold"> <SheetTitle className="flex items-center gap-2 text-base font-semibold">
<MessageCircleReply className="size-5" />
Comments Comments
{commentCount > 0 && ( {commentCount > 0 && (
<span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"> <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">