mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-23 19:05:16 +02:00
refactor: replace button elements with Button component for improved consistency and styling across UI components
This commit is contained in:
Anish Sarkar
parent
198c38b335
commit
f98bde1e04
7 changed files with 125 additions and 84 deletions
|
|
@ -17,6 +17,7 @@ import {
|
|||
FOLDER_MENTION_DOCUMENT_TYPE,
|
||||
type MentionedDocumentInfo,
|
||||
} from "@/atoms/chat/mentioned-documents.atom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
|
||||
import type { Document, SearchDocumentTitlesResponse } from "@/contracts/types/document.types";
|
||||
|
|
@ -484,7 +485,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
const isHighlighted = !isAlreadySelected && selectableIndex === highlightedIndex;
|
||||
|
||||
return (
|
||||
<button
|
||||
<Button
|
||||
key={docKey}
|
||||
ref={(el) => {
|
||||
if (el && selectableIndex >= 0) {
|
||||
|
|
@ -492,6 +493,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
}
|
||||
}}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => !isAlreadySelected && handleSelectMention(mention)}
|
||||
onMouseEnter={() => {
|
||||
if (!isAlreadySelected && selectableIndex >= 0) {
|
||||
|
|
@ -500,7 +502,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
}}
|
||||
disabled={isAlreadySelected}
|
||||
className={cn(
|
||||
"w-full flex items-center gap-2 px-3 py-2 text-left transition-colors rounded-md",
|
||||
"h-auto w-full justify-start gap-2 px-3 py-2 text-left transition-colors",
|
||||
isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
|
||||
isHighlighted && "bg-accent text-accent-foreground"
|
||||
)}
|
||||
|
|
@ -511,7 +513,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
<span className="flex-1 text-sm truncate" title={doc.title}>
|
||||
{doc.title}
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
|
|
@ -541,7 +543,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
const isHighlighted = !isAlreadySelected && selectableIndex === highlightedIndex;
|
||||
|
||||
return (
|
||||
<button
|
||||
<Button
|
||||
key={docKey}
|
||||
ref={(el) => {
|
||||
if (el && selectableIndex >= 0) {
|
||||
|
|
@ -549,6 +551,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
}
|
||||
}}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => !isAlreadySelected && handleSelectMention(mention)}
|
||||
onMouseEnter={() => {
|
||||
if (!isAlreadySelected && selectableIndex >= 0) {
|
||||
|
|
@ -557,7 +560,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
}}
|
||||
disabled={isAlreadySelected}
|
||||
className={cn(
|
||||
"w-full flex items-center gap-2 px-3 py-2 text-left transition-colors rounded-md",
|
||||
"h-auto w-full justify-start gap-2 px-3 py-2 text-left transition-colors",
|
||||
isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
|
||||
isHighlighted && "bg-accent text-accent-foreground"
|
||||
)}
|
||||
|
|
@ -568,7 +571,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
<span className="flex-1 text-sm truncate" title={doc.title}>
|
||||
{doc.title}
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
|
|
@ -595,7 +598,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
const isHighlighted = !isAlreadySelected && selectableIndex === highlightedIndex;
|
||||
|
||||
return (
|
||||
<button
|
||||
<Button
|
||||
key={folderKey}
|
||||
ref={(el) => {
|
||||
if (el && selectableIndex >= 0) {
|
||||
|
|
@ -603,6 +606,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
}
|
||||
}}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => !isAlreadySelected && handleSelectMention(folder)}
|
||||
onMouseEnter={() => {
|
||||
if (!isAlreadySelected && selectableIndex >= 0) {
|
||||
|
|
@ -611,7 +615,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
}}
|
||||
disabled={isAlreadySelected}
|
||||
className={cn(
|
||||
"w-full flex items-center gap-2 px-3 py-2 text-left transition-colors rounded-md",
|
||||
"h-auto w-full justify-start gap-2 px-3 py-2 text-left transition-colors",
|
||||
isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
|
||||
isHighlighted && "bg-accent text-accent-foreground"
|
||||
)}
|
||||
|
|
@ -622,7 +626,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
<span className="flex-1 text-sm truncate" title={folder.title}>
|
||||
{folder.title}
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -853,14 +853,15 @@ export function ModelSelector({
|
|||
: "opacity-100 translate-y-0 pointer-events-auto"
|
||||
)}
|
||||
>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
aria-label="Scroll providers up"
|
||||
onClick={() => scrollProviderSidebar("backward")}
|
||||
className="flex h-4 w-4 items-center justify-center rounded-sm text-muted-foreground/90 hover:text-accent-foreground hover:bg-accent transition-colors"
|
||||
className="h-4 w-4 rounded-sm p-0 text-muted-foreground/90 hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<ChevronUp className="size-3" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{isMobile && (
|
||||
|
|
@ -913,12 +914,13 @@ export function ModelSelector({
|
|||
))}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => setSelectedProvider(provider)}
|
||||
tabIndex={-1}
|
||||
className={cn(
|
||||
"relative flex items-center justify-center rounded-md transition-all duration-150",
|
||||
"relative h-auto rounded-md transition-all duration-150",
|
||||
isMobile ? "p-2 shrink-0" : "p-1.5 w-full",
|
||||
isActive
|
||||
? "bg-primary/10 text-primary"
|
||||
|
|
@ -934,7 +936,7 @@ export function ModelSelector({
|
|||
className: "size-4",
|
||||
})
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side={isMobile ? "bottom" : "right"}>
|
||||
{isAll ? "All Models" : formatProviderName(provider)}
|
||||
|
|
@ -954,14 +956,15 @@ export function ModelSelector({
|
|||
: "opacity-100 translate-y-0 pointer-events-auto"
|
||||
)}
|
||||
>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
aria-label="Scroll providers down"
|
||||
onClick={() => scrollProviderSidebar("forward")}
|
||||
className="flex h-4 w-4 items-center justify-center rounded-sm text-muted-foreground/90 hover:text-accent-foreground hover:bg-accent transition-colors"
|
||||
className="h-4 w-4 rounded-sm p-0 text-muted-foreground/90 hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<ChevronDown className="size-3" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{isMobile && (
|
||||
|
|
@ -1175,13 +1178,14 @@ export function ModelSelector({
|
|||
},
|
||||
] as const
|
||||
).map(({ value, icon: Icon, label }) => (
|
||||
<button
|
||||
<Button
|
||||
key={value}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
// onClick={() => setActiveTab(value)}
|
||||
onClick={() => handleTabChange(value)}
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-1.5 text-sm font-medium transition-all duration-200 border-b-[1.5px]",
|
||||
"h-auto rounded-none px-0 py-0 gap-1.5 text-sm font-medium transition-all duration-200 border-b-[1.5px] hover:bg-transparent",
|
||||
activeTab === value
|
||||
? "border-foreground dark:border-white text-foreground"
|
||||
: "border-transparent text-muted-foreground hover:text-accent-foreground"
|
||||
|
|
@ -1189,7 +1193,7 @@ export function ModelSelector({
|
|||
>
|
||||
<Icon className="size-3.5" />
|
||||
{label}
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue