vrr/SurfSense
2
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-22 03:02:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

refactor: replace button elements with Button component for improved consistency and styling across additional UI components

Browse source
This commit is contained in:
Anish Sarkar 2026-05-14 14:40:08 +05:30
parent 3d42712b3f
commit ee72a49ab1
17 changed files with 274 additions and 263 deletions
Download patch file Download diff file Expand all files Collapse all files

24
surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx
View file

@ -14,6 +14,7 @@ import {
import type { FC } from "react";
import { useCallback, useState } from "react";
import { DriveFolderTree, type SelectedFolder } from "@/components/connectors/drive-folder-tree";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import {
Select,
@ -196,14 +197,16 @@ export const ComposioDriveConfig: FC<ConnectorConfigProps> = ({ connector, onCon
>
<FolderClosed className="size-3.5 shrink-0 text-muted-foreground" />
<span className="flex-1 truncate">{folder.name}</span>
<button
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => handleRemoveFolder(folder.id)}
className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors"
className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
aria-label={`Remove ${folder.name}`}
>
<X className="size-3.5" />
</button>
</Button>
</div>
))}
{selectedFiles.map((file) => (
@ -214,14 +217,16 @@ export const ComposioDriveConfig: FC<ConnectorConfigProps> = ({ connector, onCon
>
{getFileIconFromName(file.name)}
<span className="flex-1 truncate">{file.name}</span>
<button
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => handleRemoveFile(file.id)}
className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors"
className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
aria-label={`Remove ${file.name}`}
>
<X className="size-3.5" />
</button>
</Button>
</div>
))}
</div>
@ -237,10 +242,11 @@ export const ComposioDriveConfig: FC<ConnectorConfigProps> = ({ connector, onCon
{isEditMode ? (
<div className="space-y-2">
<button
<Button
type="button"
variant="ghost"
onClick={() => setIsFolderTreeOpen((prev) => !prev)}
className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-accent-foreground transition-colors w-fit"
className="h-auto w-fit gap-2 px-0 py-0 text-xs font-normal text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
>
Change Selection
{isFolderTreeOpen ? (
@ -248,7 +254,7 @@ export const ComposioDriveConfig: FC<ConnectorConfigProps> = ({ connector, onCon
) : (
<ChevronRight className="size-4" />
)}
</button>
</Button>
{isFolderTreeOpen && (
<DriveFolderTree
fetchItems={fetchItems}

24
surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/dropbox-config.tsx
View file

@ -14,6 +14,7 @@ import {
import type { FC } from "react";
import { useCallback, useEffect, useState } from "react";
import { DriveFolderTree, type SelectedFolder } from "@/components/connectors/drive-folder-tree";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import {
Select,
@ -177,14 +178,16 @@ export const DropboxConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCha
>
<FolderClosed className="size-3.5 shrink-0 text-muted-foreground" />
<span className="flex-1 truncate">{folder.name}</span>
<button
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => handleRemoveFolder(folder.id)}
className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors"
className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
aria-label={`Remove ${folder.name}`}
>
<X className="size-3.5" />
</button>
</Button>
</div>
))}
{selectedFiles.map((file) => (
@ -195,14 +198,16 @@ export const DropboxConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCha
>
{getFileIconFromName(file.name)}
<span className="flex-1 truncate">{file.name}</span>
<button
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => handleRemoveFile(file.id)}
className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors"
className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
aria-label={`Remove ${file.name}`}
>
<X className="size-3.5" />
</button>
</Button>
</div>
))}
</div>
@ -217,10 +222,11 @@ export const DropboxConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCha
{isEditMode ? (
<div className="space-y-2">
<button
<Button
type="button"
variant="ghost"
onClick={() => setIsFolderTreeOpen(!isFolderTreeOpen)}
className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-accent-foreground transition-colors w-fit"
className="h-auto w-fit gap-2 px-0 py-0 text-xs font-normal text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
>
Change Selection
{isFolderTreeOpen ? (
@ -228,7 +234,7 @@ export const DropboxConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCha
) : (
<ChevronRight className="size-4" />
)}
</button>
</Button>
{isFolderTreeOpen && (
<DriveFolderTree
fetchItems={fetchItems}

27
surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx
View file

@ -92,11 +92,7 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
const [selectedFiles, setSelectedFiles] = useState<SelectedItem[]>(existingFiles);
const [indexingOptions, setIndexingOptions] = useState<IndexingOptions>(existingIndexingOptions);
const updateConfig = (
folders: SelectedItem[],
files: SelectedItem[],
options: IndexingOptions
) => {
const updateConfig = useCallback((folders: SelectedItem[], files: SelectedItem[], options: IndexingOptions) => {
if (onConfigChange) {
onConfigChange({
...connector.config,
@ -105,7 +101,7 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
indexing_options: options,
});
}
};
}, [connector.config, onConfigChange]);
const handlePicked = useCallback(
(result: PickerResult) => {
@ -115,8 +111,7 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
setSelectedFiles(files);
updateConfig(folders, files, indexingOptions);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[indexingOptions, connector.config]
[indexingOptions, updateConfig]
);
const {
@ -188,14 +183,16 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
>
<FolderClosed className="size-3.5 shrink-0 text-muted-foreground" />
<span className="flex-1 truncate">{folder.name}</span>
<button
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => handleRemoveFolder(folder.id)}
className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors"
className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
aria-label={`Remove ${folder.name}`}
>
<X className="size-3.5" />
</button>
</Button>
</div>
))}
{selectedFiles.map((file) => (
@ -206,14 +203,16 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
>
{getFileIconFromName(file.name)}
<span className="flex-1 truncate">{file.name}</span>
<button
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => handleRemoveFile(file.id)}
className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors"
className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
aria-label={`Remove ${file.name}`}
>
<X className="size-3.5" />
</button>
</Button>
</div>
))}
</div>

24
surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/onedrive-config.tsx
View file

@ -14,6 +14,7 @@ import {
import type { FC } from "react";
import { useCallback, useEffect, useState } from "react";
import { DriveFolderTree, type SelectedFolder } from "@/components/connectors/drive-folder-tree";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import {
Select,
@ -178,14 +179,16 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
>
<FolderClosed className="size-3.5 shrink-0 text-muted-foreground" />
<span className="flex-1 truncate">{folder.name}</span>
<button
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => handleRemoveFolder(folder.id)}
className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors"
className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
aria-label={`Remove ${folder.name}`}
>
<X className="size-3.5" />
</button>
</Button>
</div>
))}
{selectedFiles.map((file) => (
@ -196,14 +199,16 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
>
{getFileIconFromName(file.name)}
<span className="flex-1 truncate">{file.name}</span>
<button
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => handleRemoveFile(file.id)}
className="shrink-0 p-0.5 hover:bg-accent hover:text-accent-foreground rounded transition-colors"
className="size-5 shrink-0 rounded p-0 hover:bg-accent hover:text-accent-foreground"
aria-label={`Remove ${file.name}`}
>
<X className="size-3.5" />
</button>
</Button>
</div>
))}
</div>
@ -218,10 +223,11 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
{isEditMode ? (
<div className="space-y-2">
<button
<Button
type="button"
variant="ghost"
onClick={() => setIsFolderTreeOpen((prev) => !prev)}
className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-accent-foreground transition-colors w-fit"
className="h-auto w-fit gap-2 px-0 py-0 text-xs font-normal text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
>
Change Selection
{isFolderTreeOpen ? (
@ -229,7 +235,7 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
) : (
<ChevronRight className="size-4" />
)}
</button>
</Button>
{isFolderTreeOpen && (
<DriveFolderTree
fetchItems={fetchItems}

14
surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx
View file

@ -110,14 +110,15 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
{/* Header */}
<div className="px-6 sm:px-12 pt-8 sm:pt-10 pb-1 sm:pb-4 bg-popover">
{/* Back button */}
<button
<Button
type="button"
variant="ghost"
onClick={onBack}
className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-accent-foreground mb-6 w-fit"
className="mb-6 h-auto w-fit gap-2 px-0 py-0 text-xs font-normal text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
>
<ArrowLeft className="size-4" />
Back to connectors
</button>
</Button>
{/* Connector header */}
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-6">
@ -135,12 +136,13 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
</div>
</div>
{/* Add Account Button with dashed border */}
<button
<Button
type="button"
variant="ghost"
onClick={onAddAccount}
disabled={isConnecting || !isEnabled}
className={cn(
"flex items-center justify-center gap-1.5 h-8 px-3 rounded-md border-2 border-dashed text-xs sm:text-sm transition-all duration-200 shrink-0 w-full sm:w-auto",
"h-8 w-full shrink-0 gap-1.5 rounded-md border-2 border-dashed px-3 text-xs transition-all duration-200 sm:w-auto sm:text-sm",
!isEnabled
? "border-border/30 opacity-50 cursor-not-allowed"
: "border-slate-400/20 dark:border-white/20 hover:bg-accent hover:text-accent-foreground",
@ -155,7 +157,7 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
)}
</div>
<span className="text-xs sm:text-sm font-medium">{buttonText}</span>
</button>
</Button>
</div>
</div>

15
surfsense_web/components/assistant-ui/inline-citation.tsx
View file

@ -9,6 +9,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
import { openCitationPanelAtom } from "@/atoms/citation/citation-panel.atom";
import { useCitationMetadata } from "@/components/assistant-ui/citation-metadata-context";
import { Citation } from "@/components/tool-ui/citation";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Spinner } from "@/components/ui/spinner";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@ -76,15 +77,16 @@ const NumericChunkCitation: FC<{ chunkId: number }> = ({ chunkId }) => {
const openCitationPanel = useSetAtom(openCitationPanelAtom);
return (
<button
<Button
type="button"
variant="ghost"
onClick={() => openCitationPanel({ chunkId })}
className="ml-0.5 inline-flex h-5 min-w-5 cursor-pointer items-center justify-center rounded-md bg-muted/60 px-1.5 text-[11px] font-medium text-muted-foreground align-baseline shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
className="ml-0.5 h-5 min-w-5 cursor-pointer rounded-md bg-muted/60 px-1.5 text-[11px] font-medium text-muted-foreground align-baseline shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
title={`View source chunk #${chunkId}`}
aria-label={`View cited chunk ${chunkId}`}
>
{chunkId}
</button>
</Button>
);
};
@ -121,8 +123,9 @@ const SurfsenseDocCitation: FC<{ chunkId: number }> = ({ chunkId }) => {
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
<Button
type="button"
variant="ghost"
onClick={() => setOpen((prev) => !prev)}
onMouseEnter={() => {
cancelClose();
@ -134,13 +137,13 @@ const SurfsenseDocCitation: FC<{ chunkId: number }> = ({ chunkId }) => {
setOpen(true);
}}
onBlur={scheduleClose}
className="ml-0.5 inline-flex h-5 min-w-5 cursor-pointer items-center justify-center gap-0.5 rounded-md bg-primary/10 px-1.5 text-[11px] font-medium text-primary align-baseline shadow-sm transition-colors hover:bg-primary/15 focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
className="ml-0.5 h-5 min-w-5 cursor-pointer gap-0.5 rounded-md bg-primary/10 px-1.5 text-[11px] font-medium text-primary align-baseline shadow-sm transition-colors hover:bg-primary/15 focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
aria-label={`Show Surfsense documentation chunk ${chunkId}`}
title="Surfsense documentation"
>
<FileText className="size-3" />
doc
</button>
</Button>
</PopoverTrigger>
<PopoverContent
className="w-96 max-w-[calc(100vw-2rem)] p-0"

23
surfsense_web/components/connectors/drive-folder-tree.tsx
View file

@ -13,6 +13,7 @@ import {
Presentation,
} from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Spinner } from "@/components/ui/spinner";
@ -267,9 +268,11 @@ export function DriveFolderTree({
)}
>
{isFolder ? (
<button
<Button
type="button"
className="flex items-center justify-center w-3 h-3 sm:w-4 sm:h-4 shrink-0 bg-transparent border-0 p-0 cursor-pointer"
variant="ghost"
size="icon"
className="h-3 w-3 shrink-0 cursor-pointer bg-transparent p-0 hover:bg-transparent sm:h-4 sm:w-4"
onClick={(e) => {
e.stopPropagation();
toggleFolder(item);
@ -283,7 +286,7 @@ export function DriveFolderTree({
) : (
<ChevronRight className="h-3 w-3 sm:h-4 sm:w-4" />
)}
</button>
</Button>
) : (
<span className="w-3 h-3 sm:w-4 sm:h-4 shrink-0" />
)}
@ -314,13 +317,14 @@ export function DriveFolderTree({
</div>
{isFolder ? (
<button
<Button
type="button"
className="truncate flex-1 text-left text-xs sm:text-sm min-w-0 bg-transparent border-0 p-0 cursor-pointer"
variant="ghost"
className="h-auto min-w-0 flex-1 justify-start truncate bg-transparent p-0 text-left text-xs font-normal hover:bg-transparent hover:text-inherit sm:text-sm"
onClick={() => toggleFolder(item)}
>
{item.name}
</button>
</Button>
) : (
<span className="truncate flex-1 text-left text-xs sm:text-sm min-w-0">
{item.name}
@ -356,13 +360,14 @@ export function DriveFolderTree({
className="shrink-0 h-3.5 w-3.5 sm:h-4 sm:w-4 border-slate-400/20 dark:border-white/20"
/>
<HardDrive className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground shrink-0" />
<button
<Button
type="button"
className="font-semibold truncate text-xs sm:text-sm cursor-pointer bg-transparent border-0 p-0 text-left"
variant="ghost"
className="h-auto min-w-0 justify-start truncate bg-transparent p-0 text-left text-xs font-semibold hover:bg-transparent hover:text-inherit sm:text-sm"
onClick={() => toggleFolderSelection("root", rootLabel)}
>
{rootLabel}
</button>
</Button>
</div>
</div>

24
surfsense_web/components/documents/DocumentNode.tsx
View file

@ -138,10 +138,7 @@ export const DocumentNode = React.memo(function DocumentNode({
return (
<ContextMenu onOpenChange={onContextMenuOpenChange}>
<ContextMenuTrigger asChild>
{/* biome-ignore lint/a11y/useSemanticElements: contains nested interactive children (Checkbox) that render as <button>, making a semantic <button> wrapper invalid */}
<div
role="button"
tabIndex={0}
ref={attachRef}
className={cn(
"group flex h-8 w-full items-center gap-2.5 rounded-md px-1 text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer select-none text-left",
@ -149,13 +146,6 @@ export const DocumentNode = React.memo(function DocumentNode({
isDragging && "opacity-40"
)}
style={{ paddingLeft: `${depth * 16 + 4}px` }}
onClick={handleCheckChange}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleCheckChange();
}
}}
>
{(() => {
if (statusState === "pending") {
@ -212,9 +202,17 @@ export const DocumentNode = React.memo(function DocumentNode({
onOpenChange={handleTitleTooltipOpenChange}
>
<TooltipTrigger asChild>
<span ref={titleRef} className="flex-1 min-w-0 truncate">
{doc.title}
</span>
<Button
type="button"
variant="ghost"
aria-disabled={!isSelectable}
onClick={handleCheckChange}
className="h-full min-w-0 flex-1 justify-start bg-transparent px-0 py-0 text-left font-normal text-inherit hover:bg-transparent hover:text-inherit"
>
<span ref={titleRef} className="min-w-0 flex-1 truncate">
{doc.title}
</span>
</Button>
</TooltipTrigger>
<TooltipContent side="bottom" className="max-w-xs break-words">
{doc.title}

14
surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
View file

@ -348,8 +348,9 @@ export function AllPrivateChatsSidebarContent({
return (
<div key={thread.id} className="group/item relative w-full">
{isMobile ? (
<button
<Button
type="button"
variant="ghost"
onClick={() => {
if (wasLongPress()) return;
handleThreadClick(thread.id);
@ -362,7 +363,7 @@ export function AllPrivateChatsSidebarContent({
onTouchMove={longPressHandlers.onTouchMove}
disabled={isBusy}
className={cn(
"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-sm text-left",
"h-auto w-full justify-start gap-2 overflow-hidden px-2 py-1.5 text-left font-normal",
"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
isActive && "bg-accent text-accent-foreground",
@ -370,16 +371,17 @@ export function AllPrivateChatsSidebarContent({
)}
>
<span className="truncate">{thread.title || "New Chat"}</span>
</button>
</Button>
) : (
<Tooltip delayDuration={600}>
<TooltipTrigger asChild>
<button
<Button
type="button"
variant="ghost"
onClick={() => handleThreadClick(thread.id)}
disabled={isBusy}
className={cn(
"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-sm text-left",
"h-auto w-full justify-start gap-2 overflow-hidden px-2 py-1.5 text-left font-normal",
"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
isActive && "bg-accent text-accent-foreground",
@ -387,7 +389,7 @@ export function AllPrivateChatsSidebarContent({
)}
>
<span className="truncate">{thread.title || "New Chat"}</span>
</button>
</Button>
</TooltipTrigger>
<TooltipContent side="bottom" align="start">
<p>

23
surfsense_web/components/layout/ui/sidebar/LocalFilesystemBrowser.tsx
View file

@ -3,9 +3,11 @@
import { ChevronDown, ChevronRight, FileText, Folder, FolderOpen } from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { DEFAULT_EXCLUDE_PATTERNS } from "@/components/sources/FolderWatchDialog";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { Spinner } from "@/components/ui/spinner";
import { useElectronAPI } from "@/hooks/use-platform";
import { cn } from "@/lib/utils";
interface LocalFilesystemBrowserProps {
rootPaths: string[];
@ -409,10 +411,11 @@ export function LocalFilesystemBrowser({
const files = [...folder.files].sort((a, b) => a.relativePath.localeCompare(b.relativePath));
return (
<div key={folder.key} className="select-none">
<button
<Button
type="button"
variant="ghost"
onClick={() => toggleFolder(folder.key)}
className="flex h-8 w-full items-center gap-1.5 rounded-md px-2 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground"
className="h-8 w-full justify-start gap-1.5 px-2 text-left text-sm font-normal hover:bg-accent hover:text-accent-foreground"
style={{ paddingInlineStart: `${depth * 12 + 8}px` }}
draggable={false}
>
@ -423,7 +426,7 @@ export function LocalFilesystemBrowser({
)}
<FolderIcon className="size-3.5 shrink-0 text-muted-foreground" />
<span className="truncate">{folder.name}</span>
</button>
</Button>
{isExpanded && (
<>
{childFolders.map((childFolder) => renderFolder(childFolder, depth + 1, mount))}
@ -431,17 +434,21 @@ export function LocalFilesystemBrowser({
const extension = getNormalizedExtension(file.relativePath);
const isOpenable = openableExtensions.has(extension);
return (
<button
<Button
key={file.fullPath}
type="button"
variant="ghost"
onClick={
isOpenable
? () => onOpenFile(toMountedVirtualPath(mount, file.relativePath))
: undefined
}
className={`flex h-8 w-full items-center gap-1.5 rounded-md px-2 text-left text-sm transition-colors ${
isOpenable ? "hover:bg-accent hover:text-accent-foreground" : "cursor-not-allowed opacity-60"
}`}
className={cn(
"h-8 w-full justify-start gap-1.5 px-2 text-left text-sm font-normal",
isOpenable
? "hover:bg-accent hover:text-accent-foreground"
: "cursor-not-allowed opacity-60"
)}
style={{ paddingInlineStart: `${(depth + 1) * 12 + 22}px` }}
title={
isOpenable
@ -453,7 +460,7 @@ export function LocalFilesystemBrowser({
>
<FileText className="size-3.5 shrink-0 text-muted-foreground" />
<span className="truncate">{getFileName(file.relativePath)}</span>
</button>
</Button>
);
})}
</>

88
surfsense_web/components/markdown-viewer.tsx
View file

@ -13,10 +13,7 @@ const code = createCodePlugin({
});
const math = createMathPlugin({
// Disabled so currency like "$3,120.00 and ... $0.00" isn't parsed as
// inline LaTeX. convertLatexDelimiters() below normalises any genuine
// inline math (\(...\), $...$ starting with a LaTeX command, etc.) to
// $$...$$, so this flip doesn't lose any math rendering.
// Keep currency from being parsed as math; real math is normalized below.
singleDollarTextMath: false,
});
@ -24,76 +21,37 @@ interface MarkdownViewerProps {
content: string;
className?: string;
maxLength?: number;
/**
* When true, render `[citation:N]` / `[citation:URL]` tokens as the
* interactive citation badges/popovers used in chat. Default `false`
* so callers that don't need citations are unchanged.
*
* Note: we deliberately do NOT override `<a>` to inject citations into
* link text — that would produce `<button>` inside `<a>` (invalid
* HTML). A `[citation:N]` token literally placed inside markdown link
* text stays as raw text.
*/
/** Render citation tokens as interactive badges. */
enableCitations?: boolean;
}
const EMPTY_URL_MAP: CitationUrlMap = new Map();
/**
* If the entire content is wrapped in a single ```markdown or ```md
* code fence, strip the fence so the inner markdown renders properly.
*/
/** Strip a single outer markdown fence when the whole payload is fenced. */
function stripOuterMarkdownFence(content: string): string {
const trimmed = content.trim();
// Match 3+ backtick fences (LLMs escalate to 4+ when content has triple-backtick blocks)
const match = trimmed.match(/^(`{3,})(?:markdown|md)?\s*\n([\s\S]+?)\n\1\s*$/);
return match ? match[2] : content;
}
/**
* Convert all LaTeX delimiter styles to the double-dollar syntax
* that Streamdown's @streamdown/math plugin understands.
*
* Streamdown math conventions (different from remark-math!):
* $$...$$ on the SAME line → inline math
* $$\n...\n$$ on SEPARATE lines → block (display) math
*
* Conversions performed:
* \[...\] → $$\n ... \n$$ (block math)
* \(...\) → $$...$$ (inline math, same line)
* \begin{equation}...\end{equation} → $$\n ... \n$$ (block math)
* \begin{displaymath}...\end{displaymath} → $$\n ... \n$$ (block math)
* \begin{math}...\end{math} → $$...$$ (inline math, same line)
* `$$ … $$` → $$ … $$ (strip wrapping backtick code)
* `$ … $` → $ … $ (strip wrapping backtick code)
* $...$ → $$...$$ (normalise single-$ to double-$$)
*/
/** Normalize common LaTeX delimiters to Streamdown's double-dollar syntax. */
function convertLatexDelimiters(content: string): string {
// 1. Block math: \[...\] → $$\n...\n$$ (display math on separate lines)
content = content.replace(/\\\[([\s\S]*?)\\\]/g, (_, inner) => `\n$$\n${inner.trim()}\n$$\n`);
// 2. Inline math: \(...\) → $$...$$ (inline math on same line)
content = content.replace(/\\\(([\s\S]*?)\\\)/g, (_, inner) => `$$${inner.trim()}$$`);
// 3. Block: \begin{equation}...\end{equation} → $$\n...\n$$
content = content.replace(
/\\begin\{equation\}([\s\S]*?)\\end\{equation\}/g,
(_, inner) => `\n$$\n${inner.trim()}\n$$\n`
);
// 4. Block: \begin{displaymath}...\end{displaymath} → $$\n...\n$$
content = content.replace(
/\\begin\{displaymath\}([\s\S]*?)\\end\{displaymath\}/g,
(_, inner) => `\n$$\n${inner.trim()}\n$$\n`
);
// 5. Inline: \begin{math}...\end{math} → $$...$$
content = content.replace(
/\\begin\{math\}([\s\S]*?)\\end\{math\}/g,
(_, inner) => `$$${inner.trim()}$$`
);
// 6. Strip backtick wrapping around math: `$$...$$` → $$...$$ and `$...$` → $...$
content = content.replace(/`(\${1,2})((?:(?!\1).)+)\1`/g, "$1$2$1");
// 7. Normalise single-dollar $...$ to double-dollar $$...$$ so they render
// reliably in Streamdown (single-$ has strict no-space rules that often fail).
// We match $…$ where the content starts with a backslash (LaTeX command)
// to avoid converting currency like $50.
// Only convert command-style single-dollar math, leaving currency alone.
content = content.replace(
/(?<!\$)\$(?!\$)(\\[a-zA-Z][\s\S]*?)(?<!\$)\$(?!\$)/g,
(_, inner) => `$$${inner.trim()}$$`
@ -110,9 +68,7 @@ export function MarkdownViewer({
const isTruncated = maxLength != null && content.length > maxLength;
const displayContent = isTruncated ? content.slice(0, maxLength) : content;
// Preprocess for URL placeholders BEFORE LaTeX so GFM autolinks don't
// split `[citation:https://…]` apart. The preprocess is code-fence
// aware so citations inside fenced code stay literal.
// Rewrite citation URLs before markdown autolinking can split them.
const { processedContent, urlMap } = useMemo(() => {
const stripped = stripOuterMarkdownFence(displayContent);
if (!enableCitations) {
@ -128,11 +84,7 @@ export function MarkdownViewer({
};
}, [displayContent, enableCitations]);
// Phrasing/block renderers wrap their string children through the
// citation renderer when `enableCitations` is on. We deliberately do
// NOT override `<a>` (would produce <button> inside <a>) and we do
// NOT touch the inline/fenced `code` paths (citations stay literal
// inside code, matching markdown-text.tsx behavior).
// Do not wrap anchors or code; citation buttons inside them would be invalid.
const wrap = (children: React.ReactNode): React.ReactNode =>
enableCitations ? processChildrenWithCitations(children, urlMap) : children;
@ -198,27 +150,21 @@ export function MarkdownViewer({
),
hr: ({ ...props }) => <hr className="my-4 border-muted" {...props} />,
img: ({ src, alt, width: _w, height: _h, ...props }) => {
const isDataOrUnknownUrl =
typeof src === "string" && (src.startsWith("data:") || !src.startsWith("http"));
if (typeof src !== "string") return null;
return isDataOrUnknownUrl ? (
// eslint-disable-next-line @next/next/no-img-element
<img
className="max-w-full h-auto my-4 rounded"
alt={alt || "markdown image"}
src={src}
loading="lazy"
{...props}
/>
) : (
const width = typeof _w === "number" ? _w : Number(_w) || 800;
const height = typeof _h === "number" ? _h : Number(_h) || 600;
const shouldSkipOptimization = src.startsWith("data:");
return (
<Image
className="max-w-full h-auto my-4 rounded"
alt={alt || "markdown image"}
src={typeof src === "string" ? src : ""}
width={_w || 800}
height={_h || 600}
src={src}
width={width}
height={height}
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 60vw"
unoptimized={isDataOrUnknownUrl}
unoptimized={shouldSkipOptimization}
{...props}
/>
);

15
surfsense_web/components/new-chat/prompt-picker.tsx
View file

@ -15,6 +15,7 @@ import {
import { promptsAtom } from "@/atoms/prompts/prompts-query.atoms";
import { userSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";
@ -150,17 +151,18 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
Saved Prompts
</div>
{filtered.map((action, index) => (
<button
<Button
key={action.id}
ref={(el) => {
if (el) itemRefs.current.set(index, el);
else itemRefs.current.delete(index);
}}
type="button"
variant="ghost"
onClick={() => handleSelect(index)}
onMouseEnter={() => setHighlightedIndex(index)}
className={cn(
"w-full flex items-center gap-2 px-3 py-2 text-left text-sm transition-colors rounded-md cursor-pointer",
"h-auto w-full justify-start gap-2 rounded-md px-3 py-2 text-left text-sm font-normal transition-colors",
index === highlightedIndex && "bg-accent text-accent-foreground"
)}
>
@ -168,20 +170,21 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
<Zap className="size-4" />
</span>
<span className="flex-1 text-sm truncate">{action.name}</span>
</button>
</Button>
))}
<div className="mx-2 my-1 border-t border-popover-border" />
<button
<Button
ref={(el) => {
if (el) itemRefs.current.set(createPromptIndex, el);
else itemRefs.current.delete(createPromptIndex);
}}
type="button"
variant="ghost"
onClick={() => handleSelect(createPromptIndex)}
onMouseEnter={() => setHighlightedIndex(createPromptIndex)}
className={cn(
"w-full flex items-center gap-2 px-3 py-2 text-left text-sm transition-colors rounded-md cursor-pointer text-muted-foreground",
"h-auto w-full justify-start gap-2 rounded-md px-3 py-2 text-left text-sm font-normal text-muted-foreground transition-colors",
highlightedIndex === createPromptIndex
? "bg-accent text-accent-foreground"
: "hover:text-accent-foreground hover:bg-accent"
@ -191,7 +194,7 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
<Plus className="size-4" />
</span>
<span>Create prompt</span>
</button>
</Button>
</div>
)}
</div>

23
surfsense_web/components/settings/buy-pages-content.tsx
View file

@ -72,44 +72,49 @@ export function BuyPagesContent() {
<div className="space-y-3">
{/* Stepper */}
<div className="flex items-center justify-center gap-3">
<button
<Button
type="button"
variant="outline"
size="icon"
onClick={() => setQuantity((q) => Math.max(1, q - 1))}
disabled={quantity <= 1 || purchaseMutation.isPending}
className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted disabled:opacity-40"
className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
>
<Minus className="h-3.5 w-3.5" />
</button>
</Button>
<span className="min-w-28 text-center text-lg font-semibold tabular-nums">
{totalPages.toLocaleString()}
</span>
<button
<Button
type="button"
variant="outline"
size="icon"
onClick={() => setQuantity((q) => Math.min(100, q + 1))}
disabled={quantity >= 100 || purchaseMutation.isPending}
className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted disabled:opacity-40"
className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
>
<Plus className="h-3.5 w-3.5" />
</button>
</Button>
</div>
{/* Quick-pick presets */}
<div className="flex flex-wrap justify-center gap-1.5">
{PRESET_MULTIPLIERS.map((m) => (
<button
<Button
key={m}
type="button"
variant="ghost"
onClick={() => setQuantity(m)}
disabled={purchaseMutation.isPending}
className={cn(
"rounded-md border px-2.5 py-1 text-xs font-medium tabular-nums transition-colors disabled:opacity-60",
"h-auto rounded-md border px-2.5 py-1 text-xs font-medium tabular-nums transition-colors hover:text-foreground disabled:opacity-60",
quantity === m
? "border-emerald-500 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
: "border-border hover:border-emerald-500/40 hover:bg-muted/40"
)}
>
{(m * PAGE_PACK_SIZE).toLocaleString()}
</button>
</Button>
))}
</div>

23
surfsense_web/components/settings/buy-tokens-content.tsx
View file

@ -105,43 +105,48 @@ export function BuyTokensContent() {
<div className="space-y-3">
<div className="flex items-center justify-center gap-3">
<button
<Button
type="button"
variant="outline"
size="icon"
onClick={() => setQuantity((q) => Math.max(1, q - 1))}
disabled={quantity <= 1 || purchaseMutation.isPending}
className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted disabled:opacity-40"
className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
>
<Minus className="h-3.5 w-3.5" />
</button>
</Button>
<span className="min-w-32 text-center text-lg font-semibold tabular-nums">
${(totalCreditMicros / 1_000_000).toFixed(0)} of credit
</span>
<button
<Button
type="button"
variant="outline"
size="icon"
onClick={() => setQuantity((q) => Math.min(100, q + 1))}
disabled={quantity >= 100 || purchaseMutation.isPending}
className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted disabled:opacity-40"
className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
>
<Plus className="h-3.5 w-3.5" />
</button>
</Button>
</div>
<div className="flex flex-wrap justify-center gap-1.5">
{PRESET_MULTIPLIERS.map((m) => (
<button
<Button
key={m}
type="button"
variant="ghost"
onClick={() => setQuantity(m)}
disabled={purchaseMutation.isPending}
className={cn(
"rounded-md border px-2.5 py-1 text-xs font-medium tabular-nums transition-colors disabled:opacity-60",
"h-auto rounded-md border px-2.5 py-1 text-xs font-medium tabular-nums transition-colors hover:text-foreground disabled:opacity-60",
quantity === m
? "border-purple-500 bg-purple-500/10 text-purple-600 dark:text-purple-400"
: "border-border hover:border-purple-500/40 hover:bg-muted/40"
)}
>
${m}
</button>
</Button>
))}
</div>

147
surfsense_web/components/settings/roles-manager.tsx
View file

@ -462,47 +462,44 @@ function RolesContent({
return (
<div key={role.id} className="rounded-lg border border-border/60 overflow-hidden">
{/* biome-ignore lint/a11y/useSemanticElements: row contains nested interactive elements (DropdownMenu); using a <button> would produce invalid nested-button markup */}
<div
role="button"
tabIndex={0}
aria-expanded={isExpanded}
className="flex items-center gap-4 p-4 transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
onClick={() => setExpandedRoleId(isExpanded ? null : role.id)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
setExpandedRoleId(isExpanded ? null : role.id);
}
}}
className="group/role-header flex items-center gap-4 p-4 transition-colors hover:bg-accent hover:text-accent-foreground focus-within:bg-accent focus-within:text-accent-foreground"
>
<div className="flex-1 min-w-0 text-left">
<div className="flex items-center gap-2">
<span className="font-medium text-sm">{role.name}</span>
{role.is_system_role && (
<span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium">
System
</span>
)}
{role.is_default && (
<span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium">
Default
</span>
<Button
type="button"
variant="ghost"
aria-expanded={isExpanded}
className="h-auto min-w-0 flex-1 justify-start gap-4 p-0 text-left font-normal hover:bg-transparent hover:text-inherit focus-visible:ring-0"
onClick={() => setExpandedRoleId(isExpanded ? null : role.id)}
>
<div className="flex-1 min-w-0 text-left">
<div className="flex items-center gap-2">
<span className="font-medium text-sm">{role.name}</span>
{role.is_system_role && (
<span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium">
System
</span>
)}
{role.is_default && (
<span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium">
Default
</span>
)}
</div>
{role.description && (
<p className="text-xs text-muted-foreground mt-0.5 truncate">
{role.description}
</p>
)}
</div>
{role.description && (
<p className="text-xs text-muted-foreground mt-0.5 truncate">
{role.description}
</p>
)}
</div>
<div className="shrink-0">
<PermissionsBadge permissions={role.permissions} />
</div>
<div className="shrink-0">
<PermissionsBadge permissions={role.permissions} />
</div>
</Button>
{!role.is_system_role && (
<div className="shrink-0" role="none" onClick={(e) => e.stopPropagation()}>
<div className="shrink-0">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8">
@ -552,14 +549,22 @@ function RolesContent({
</div>
)}
<div className="shrink-0 p-1">
<Button
type="button"
variant="ghost"
size="icon"
aria-label={isExpanded ? `Collapse ${role.name}` : `Expand ${role.name}`}
aria-expanded={isExpanded}
className="size-6 shrink-0 p-1 hover:bg-transparent hover:text-inherit focus-visible:ring-0"
onClick={() => setExpandedRoleId(isExpanded ? null : role.id)}
>
<ChevronRight
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
isExpanded && "rotate-90"
)}
/>
</div>
</Button>
</div>
{isExpanded && (
@ -692,40 +697,44 @@ function PermissionsEditor({
return (
<div key={category} className="rounded-lg border border-border/60 overflow-hidden">
{/* biome-ignore lint/a11y/useSemanticElements: row contains a nested interactive Checkbox; using a <button> would produce invalid nested-button markup */}
<div
role="button"
tabIndex={0}
aria-expanded={isExpanded}
className="flex items-center justify-between px-3 py-2.5 hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
onClick={() => toggleCategoryExpanded(category)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
toggleCategoryExpanded(category);
}
}}
className="group/category-header flex items-center justify-between px-3 py-2.5 transition-colors hover:bg-accent hover:text-accent-foreground focus-within:bg-accent focus-within:text-accent-foreground"
>
<div className="flex-1 flex items-center gap-2.5">
<Button
type="button"
variant="ghost"
aria-expanded={isExpanded}
className="h-auto min-w-0 flex-1 justify-start gap-2.5 p-0 text-left font-normal hover:bg-transparent hover:text-inherit focus-visible:ring-0"
onClick={() => toggleCategoryExpanded(category)}
>
<IconComponent className="h-4 w-4 text-muted-foreground shrink-0" />
<span className="font-medium text-sm">{config.label}</span>
<span className="text-[11px] text-muted-foreground tabular-nums">
{stats.selected}/{stats.total}
</span>
</div>
</Button>
<div className="flex items-center gap-2">
<Checkbox
checked={stats.allSelected}
onClick={(e) => e.stopPropagation()}
onCheckedChange={() => onToggleCategory(category)}
aria-label={`Select all ${config.label} permissions`}
/>
<ChevronRight
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
isExpanded && "rotate-90"
)}
/>
<Button
type="button"
variant="ghost"
size="icon"
aria-label={isExpanded ? `Collapse ${config.label}` : `Expand ${config.label}`}
aria-expanded={isExpanded}
className="size-6 p-1 hover:bg-transparent hover:text-inherit focus-visible:ring-0"
onClick={() => toggleCategoryExpanded(category)}
>
<ChevronRight
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
isExpanded && "rotate-90"
)}
/>
</Button>
</div>
</div>
@ -745,16 +754,19 @@ function PermissionsEditor({
isSelected ? "bg-muted/60 hover:bg-accent hover:text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
)}
>
<button
<Button
type="button"
className="flex-1 min-w-0 text-left cursor-pointer focus:outline-none focus-visible:outline-none"
variant="ghost"
className="h-auto flex-1 min-w-0 justify-start p-0 text-left font-normal hover:bg-transparent hover:text-inherit focus-visible:ring-0"
onClick={() => onTogglePermission(perm.value)}
>
<span className="text-sm font-medium">{actionLabel}</span>
<p className="text-xs text-muted-foreground truncate">
{perm.description}
</p>
</button>
<span className="min-w-0">
<span className="block text-sm font-medium">{actionLabel}</span>
<span className="block text-xs text-muted-foreground truncate">
{perm.description}
</span>
</span>
</Button>
<Checkbox
checked={isSelected}
onCheckedChange={() => onTogglePermission(perm.value)}
@ -871,12 +883,13 @@ function CreateRoleDialog({
<Label className="text-sm font-medium">Start from a template</Label>
<div className="grid grid-cols-3 gap-2">
{Object.entries(ROLE_PRESETS).map(([key, preset]) => (
<button
<Button
key={key}
type="button"
variant="outline"
onClick={() => applyPreset(key as keyof typeof ROLE_PRESETS)}
className={cn(
"p-3 rounded-lg border transition-colors hover:bg-accent hover:text-accent-foreground",
"h-auto p-3 whitespace-normal transition-colors hover:bg-accent hover:text-accent-foreground",
"flex items-center justify-center text-center sm:block sm:text-left",
selectedPermissions.length > 0 &&
preset.permissions.every((p) => selectedPermissions.includes(p))
@ -888,7 +901,7 @@ function CreateRoleDialog({
<p className="hidden sm:block text-xs text-muted-foreground mt-0.5 line-clamp-2">
{preset.description}
</p>
</button>
</Button>
))}
</div>
</div>

15
surfsense_web/components/settings/settings-dialog.tsx
View file

@ -2,6 +2,7 @@
import type * as React from "react";
import { useCallback, useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";
@ -55,12 +56,13 @@ export function SettingsDialog({
<nav className="hidden md:flex w-[220px] shrink-0 flex-col border-r border-border p-3 pt-6">
<div className="flex flex-col gap-0.5">
{navItems.map((item) => (
<button
<Button
key={item.value}
type="button"
variant="ghost"
onClick={() => onItemChange(item.value)}
className={cn(
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors text-left focus:outline-none focus-visible:outline-none",
"h-auto justify-start gap-3 rounded-lg px-3 py-2.5 text-left text-sm font-medium transition-colors focus:outline-none focus-visible:outline-none",
activeItem === item.value
? "bg-accent text-accent-foreground"
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
@ -68,7 +70,7 @@ export function SettingsDialog({
>
{item.icon}
{item.label}
</button>
</Button>
))}
</div>
</nav>
@ -88,13 +90,14 @@ export function SettingsDialog({
>
<div className="flex gap-1 px-4 pb-2">
{navItems.map((item) => (
<button
<Button
key={item.value}
ref={activeItem === item.value ? activeRef : undefined}
type="button"
variant="ghost"
onClick={() => handleItemChange(item.value)}
className={cn(
"flex items-center gap-2 whitespace-nowrap rounded-full px-3 py-1.5 text-xs font-medium transition-colors shrink-0 focus:outline-none focus-visible:outline-none",
"h-auto shrink-0 gap-2 rounded-full px-3 py-1.5 text-xs font-medium transition-colors focus:outline-none focus-visible:outline-none",
activeItem === item.value
? "bg-accent text-accent-foreground"
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
@ -102,7 +105,7 @@ export function SettingsDialog({
>
{item.icon}
{item.label}
</button>
</Button>
))}
</div>
</div>

14
surfsense_web/components/shared/llm-config-form.tsx
View file

@ -407,9 +407,10 @@ export function LLMConfigForm({
<Separator />
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<button
<Button
type="button"
className="flex w-full items-center justify-between py-2 text-xs sm:text-sm font-medium text-muted-foreground hover:text-accent-foreground transition-colors"
variant="ghost"
className="h-auto w-full justify-between px-0 py-2 text-xs font-medium text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
>
<span>Advanced Parameters</span>
<ChevronDown
@ -418,7 +419,7 @@ export function LLMConfigForm({
advancedOpen && "rotate-180"
)}
/>
</button>
</Button>
</CollapsibleTrigger>
<CollapsibleContent className="space-y-4 pt-2">
<FormField
@ -445,9 +446,10 @@ export function LLMConfigForm({
<Separator />
<Collapsible open={systemInstructionsOpen} onOpenChange={setSystemInstructionsOpen}>
<CollapsibleTrigger asChild>
<button
<Button
type="button"
className="flex w-full items-center justify-between py-2 text-xs sm:text-sm font-medium text-muted-foreground hover:text-accent-foreground transition-colors"
variant="ghost"
className="h-auto w-full justify-between px-0 py-2 text-xs font-medium text-muted-foreground hover:bg-transparent hover:text-accent-foreground sm:text-sm"
>
<span>System Instructions</span>
<ChevronDown
@ -456,7 +458,7 @@ export function LLMConfigForm({
systemInstructionsOpen && "rotate-180"
)}
/>
</button>
</Button>
</CollapsibleTrigger>
<CollapsibleContent className="space-y-4 pt-2">
{/* System Instructions */}