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

refactor: adjust styles and layout in ComposerAction component

Browse source
This commit is contained in:
Anish Sarkar 2026-04-09 00:26:11 +05:30
parent 71e88156f4
commit a96daab45d
1 changed files with 16 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1058,12 +1058,12 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
side="bottom" side="bottom"
align="start" align="start"
sideOffset={12} sideOffset={12}
className="w-[calc(100vw-2rem)] max-w-56 sm:max-w-72 sm:w-72 p-0 select-none" className="w-[calc(100vw-2rem)] max-w-48 sm:max-w-56 sm:w-56 p-0 select-none"
onOpenAutoFocus={(e) => e.preventDefault()} onOpenAutoFocus={(e) => e.preventDefault()}
> >
<div className="sr-only">Manage Tools</div> <div className="sr-only">Manage Tools</div>
<div <div
className="max-h-48 sm:max-h-64 overflow-y-auto overscroll-none py-0.5 sm:py-1" className="max-h-44 sm:max-h-56 overflow-y-auto overscroll-none py-0.5"
onScroll={handleToolsScroll} onScroll={handleToolsScroll}
style={{ style={{
maskImage: `linear-gradient(to bottom, ${toolsScrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${toolsScrollPos === "bottom" ? "black" : "transparent"})`, maskImage: `linear-gradient(to bottom, ${toolsScrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${toolsScrollPos === "bottom" ? "black" : "transparent"})`,
@ -1074,22 +1074,22 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
.filter((g) => !g.connectorIcon) .filter((g) => !g.connectorIcon)
.map((group) => ( .map((group) => (
<div key={group.label}> <div key={group.label}>
<div className="px-2.5 sm:px-3 pt-2 pb-0.5 text-[10px] sm:text-xs text-muted-foreground/80 font-normal select-none"> <div className="px-2 sm:px-2.5 pt-1.5 pb-0.5 text-[9px] sm:text-[10px] text-muted-foreground/80 font-normal select-none">
{group.label} {group.label}
</div> </div>
{group.tools.map((tool) => { {group.tools.map((tool) => {
const isDisabled = disabledToolsSet.has(tool.name); const isDisabled = disabledToolsSet.has(tool.name);
const ToolIcon = getToolIcon(tool.name); const ToolIcon = getToolIcon(tool.name);
const row = ( const row = (
<div className="flex w-full items-center gap-2 sm:gap-3 px-2.5 sm:px-3 py-1 sm:py-1.5 hover:bg-muted-foreground/10 transition-colors"> <div className="flex w-full items-center gap-1.5 sm:gap-2 px-2 sm:px-2.5 py-0.5 sm:py-1 hover:bg-muted-foreground/10 transition-colors">
<ToolIcon className="size-3.5 sm:size-4 shrink-0 text-muted-foreground" /> <ToolIcon className="size-3 sm:size-3.5 shrink-0 text-muted-foreground" />
<span className="flex-1 min-w-0 text-xs sm:text-sm font-medium truncate"> <span className="flex-1 min-w-0 text-[11px] sm:text-xs font-medium truncate">
{formatToolName(tool.name)} {formatToolName(tool.name)}
</span> </span>
<Switch <Switch
checked={!isDisabled} checked={!isDisabled}
onCheckedChange={() => toggleTool(tool.name)} onCheckedChange={() => toggleTool(tool.name)}
className="shrink-0 scale-[0.6] sm:scale-75" className="shrink-0 scale-50 sm:scale-[0.6]"
/> />
</div> </div>
); );
@ -1106,7 +1106,7 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
))} ))}
{groupedTools.some((g) => g.connectorIcon) && ( {groupedTools.some((g) => g.connectorIcon) && (
<div> <div>
<div className="px-2.5 sm:px-3 pt-2 pb-0.5 text-[10px] sm:text-xs text-muted-foreground/80 font-normal select-none"> <div className="px-2 sm:px-2.5 pt-1.5 pb-0.5 text-[9px] sm:text-[10px] text-muted-foreground/80 font-normal select-none">
Connector Actions Connector Actions
</div> </div>
{groupedTools {groupedTools
@ -1118,26 +1118,26 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
const allDisabled = toolNames.every((n) => disabledToolsSet.has(n)); const allDisabled = toolNames.every((n) => disabledToolsSet.has(n));
const groupDef = TOOL_GROUPS.find((g) => g.label === group.label); const groupDef = TOOL_GROUPS.find((g) => g.label === group.label);
const row = ( const row = (
<div className="flex w-full items-center gap-2 sm:gap-3 px-2.5 sm:px-3 py-1 sm:py-1.5 hover:bg-muted-foreground/10 transition-colors"> <div className="flex w-full items-center gap-1.5 sm:gap-2 px-2 sm:px-2.5 py-0.5 sm:py-1 hover:bg-muted-foreground/10 transition-colors">
{iconInfo ? ( {iconInfo ? (
<Image <Image
src={iconInfo.src} src={iconInfo.src}
alt={iconInfo.alt} alt={iconInfo.alt}
width={16} width={14}
height={16} height={14}
className="size-3.5 sm:size-4 shrink-0 select-none pointer-events-none" className="size-3 sm:size-3.5 shrink-0 select-none pointer-events-none"
draggable={false} draggable={false}
/> />
) : ( ) : (
<Wrench className="size-3.5 sm:size-4 shrink-0 text-muted-foreground" /> <Wrench className="size-3 sm:size-3.5 shrink-0 text-muted-foreground" />
)} )}
<span className="flex-1 min-w-0 text-xs sm:text-sm font-medium truncate"> <span className="flex-1 min-w-0 text-[11px] sm:text-xs font-medium truncate">
{group.label} {group.label}
</span> </span>
<Switch <Switch
checked={!allDisabled} checked={!allDisabled}
onCheckedChange={() => toggleToolGroup(toolNames)} onCheckedChange={() => toggleToolGroup(toolNames)}
className="shrink-0 scale-[0.6] sm:scale-75" className="shrink-0 scale-50 sm:scale-[0.6]"
/> />
</div> </div>
); );
@ -1158,7 +1158,7 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
</div> </div>
)} )}
{!filteredTools?.length && ( {!filteredTools?.length && (
<div className="px-3 py-4 text-center text-xs text-muted-foreground"> <div className="px-2.5 py-3 text-center text-[11px] text-muted-foreground">
Loading tools... Loading tools...
</div> </div>
)} )}