Ling0925
/
suna
mirror of https://github.com/kortix-ai/suna.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

wip: standardize desing

This commit is contained in:
Vukasin 2025-07-05 23:06:22 +02:00 committed by marko-kraemer
parent f779c9f704
commit 8c158f910f
12 changed files with 122 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/(dashboard)/dashboard/_components/suggestions/examples.tsx
View File

@ -196,9 +196,9 @@ export const Examples = ({
onClick={() => onSelectPrompt && onSelectPrompt(prompt.query)}
>
<CardHeader className="p-2 grid-rows-1">
<div className="flex items-start justify-center gap-1.5">
<div className="flex-shrink-0 mt-0.5">
{React.cloneElement(prompt.icon as React.ReactElement, { size: 14 })}
<div className="flex items-center justify-center gap-1.5">
<div className="flex-shrink-0">
{React.cloneElement(prompt.icon as React.ReactElement, { size: 14, })}
</div>
<CardTitle className="font-normal group-hover:text-foreground transition-all text-muted-foreground text-xs leading-relaxed line-clamp-3">
{prompt.title}

2
frontend/src/components/sidebar/nav-user-with-teams.tsx
View File

@ -182,7 +182,7 @@ export function NavUserWithTeams({
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
className="w-(--radix-dropdown-menu-trigger-width) min-w-56"
side={isMobile ? 'bottom' : 'top'}
align="start"
sideOffset={4}

3
frontend/src/components/thread/chat-input/chat-dropdown.tsx
View File

@ -34,9 +34,6 @@ const ChatDropdown = () => {
align="end"
className="w-64 p-0 border"
sideOffset={4}
style={{
borderRadius: '16px'
}}
>
<DropdownMenuItem
className="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-accent border-b m-0"

2
frontend/src/components/thread/chat-input/chat-input.tsx
View File

@ -243,7 +243,7 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
isVisible={showToolPreview}
/>
<Card
className="-mb-2 bg-red-400 shadow-none w-full max-w-4xl mx-auto bg-transparent border-none rounded-3xl overflow-hidden"
className="-mb-2 shadow-none w-full max-w-4xl mx-auto bg-transparent border-none rounded-3xl overflow-hidden"
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={(e) => {

55
frontend/src/components/thread/chat-input/chat-settings-dropdown.tsx
View File

@ -179,15 +179,18 @@ export const ChatSettingsDropdown: React.FC<ChatSettingsDropdownProps> = ({
<Button
variant="ghost"
size="sm"
className="px-2 text-xs font-medium"
className="px-3 py-2 text-sm font-medium hover:bg-accent"
disabled={disabled}
style={{
borderRadius: '12px'
}}
>
<div className="flex items-center gap-1.5">
<div className="flex items-center gap-2">
{agentDisplay.icon}
<span className="hidden sm:inline-block truncate max-w-[80px]">
{agentDisplay.name}
</span>
<ChevronDown className="h-3 w-3 opacity-50" />
<ChevronDown size={14} className="opacity-50" />
</div>
</Button>
</DropdownMenuTrigger>
@ -198,10 +201,17 @@ export const ChatSettingsDropdown: React.FC<ChatSettingsDropdownProps> = ({
</Tooltip>
</TooltipProvider>
<DropdownMenuContent align="end" className="w-80 p-0" sideOffset={4}>
<div className="p-3 border-b">
<DropdownMenuContent
align="end"
className="w-80 p-0 border"
sideOffset={4}
style={{
borderRadius: '16px'
}}
>
<div className="p-4 border-b">
<div className="relative">
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
<input
ref={searchInputRef}
type="text"
@ -209,17 +219,18 @@ export const ChatSettingsDropdown: React.FC<ChatSettingsDropdownProps> = ({
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
onKeyDown={handleSearchInputKeyDown}
className="w-full pl-8 pr-3 py-2 text-sm bg-transparent border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
className="w-full pl-10 pr-3 py-2 text-sm bg-transparent border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
/>
</div>
</div>
<div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent">
{agentsLoading ? (
<div className="p-3 text-sm text-muted-foreground text-center">
<div className="px-4 py-3 text-sm text-muted-foreground text-center">
Loading agents...
</div>
) : filteredAgents.length === 0 ? (
<div className="p-3 text-sm text-muted-foreground text-center">
<div className="px-4 py-3 text-sm text-muted-foreground text-center">
No agents found
</div>
) : (
@ -231,22 +242,24 @@ export const ChatSettingsDropdown: React.FC<ChatSettingsDropdownProps> = ({
<TooltipProvider key={agent.id || 'default'}>
<Tooltip>
<TooltipTrigger asChild>
<div className="w-full">
<DropdownMenuItem
className={cn(
"text-sm mx-2 my-0.5 flex items-center justify-between cursor-pointer",
"flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-accent border-b m-0",
isHighlighted && "bg-accent",
index === filteredAgents.length - 1 && "border-b-0"
)}
style={{
borderRadius: '0'
}}
onClick={() => handleAgentSelect(agent.id)}
onMouseEnter={() => setHighlightedIndex(index)}
>
<div className="flex items-center gap-2">
<div className="flex-shrink-0">
{agent.icon}
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="font-medium text-sm truncate">
<span className="font-semibold text-sm truncate">
{agent.name}
</span>
{agent.type === 'custom' && (
@ -255,13 +268,14 @@ export const ChatSettingsDropdown: React.FC<ChatSettingsDropdownProps> = ({
</Badge>
)}
</div>
</div>
<span className="text-xs text-muted-foreground truncate">
{agent.description}
</span>
</div>
{isSelected && (
<Check className="h-4 w-4 text-blue-500 flex-shrink-0" />
)}
</DropdownMenuItem>
</div>
</TooltipTrigger>
<TooltipContent side="left" className="text-xs max-w-xs">
<p className="truncate">{truncateString(agent.description, 35)}</p>
@ -272,13 +286,14 @@ export const ChatSettingsDropdown: React.FC<ChatSettingsDropdownProps> = ({
})
)}
</div>
<div className="border-t p-3">
<div className="flex items-center justify-between">
<div className="border-t p-4">
<div className="flex items-center justify-between gap-2">
<Button
variant="outline"
size="sm"
onClick={handleExploreAll}
className="text-xs"
className="text-xs flex items-center gap-2"
>
<Search className="h-3 w-3" />
Explore All
@ -288,11 +303,11 @@ export const ChatSettingsDropdown: React.FC<ChatSettingsDropdownProps> = ({
variant="outline"
size="sm"
onClick={handleMoreOptions}
className="text-xs"
className="text-xs flex items-center gap-1"
>
<Settings className="h-3 w-3" />
More Options
<ChevronRight className="h-3 w-3 ml-1" />
<ChevronRight className="h-3 w-3" />
</Button>
</div>
</div>

4
frontend/src/components/thread/chat-input/floating-tool-preview.tsx
View File

@ -106,7 +106,7 @@ export const FloatingToolPreview: React.FC<FloatingToolPreviewProps> = ({
layoutId={CONTENT_LAYOUT_ID}
whileHover={{ scale: 1.01 }}
whileTap={{ scale: 0.99 }}
className="bg-sidebar border border-border rounded-2xl p-2 w-full cursor-pointer group"
className="bg-sidebar border border-border rounded-3xl p-2 w-full cursor-pointer group"
onClick={handleClick}
style={{ opacity: isExpanding ? 0 : 1 }}
>
@ -115,7 +115,7 @@ export const FloatingToolPreview: React.FC<FloatingToolPreviewProps> = ({
<motion.div
layoutId="tool-icon"
className={cn(
"w-10 h-10 rounded-xl flex items-center justify-center",
"w-10 h-10 rounded-2xl flex items-center justify-center",
isStreaming
? "bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800"
: isSuccess

8
frontend/src/components/thread/content/ThreadContent.tsx
View File

@ -169,7 +169,7 @@ export function renderMarkdownContent(
<div key={`tool-${match.index}-${index}`} className="my-1">
<button
onClick={() => handleToolClick(messageId, toolName)}
className="inline-flex items-center gap-1.5 py-1 px-1 text-xs text-muted-foreground bg-muted hover:bg-muted/80 rounded-md transition-colors cursor-pointer border border-neutral-200 dark:border-neutral-700/50"
className="inline-flex items-center gap-1.5 py-1 px-1 text-xs text-muted-foreground bg-muted hover:bg-muted/80 rounded-lg transition-colors cursor-pointer border border-neutral-200 dark:border-neutral-700/50"
>
<div className='border-2 bg-gradient-to-br from-neutral-200 to-neutral-300 dark:from-neutral-700 dark:to-neutral-800 flex items-center justify-center p-0.5 rounded-sm border-neutral-400/20 dark:border-neutral-600'>
<IconComponent className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
@ -251,7 +251,7 @@ export function renderMarkdownContent(
<div key={toolCallKey} className="my-1">
<button
onClick={() => handleToolClick(messageId, toolName)}
className="inline-flex items-center gap-1.5 py-1 px-1 text-xs text-muted-foreground bg-muted hover:bg-muted/80 rounded-md transition-colors cursor-pointer border border-neutral-200 dark:border-neutral-700/50"
className="inline-flex items-center gap-1.5 py-1 px-1 text-xs text-muted-foreground bg-muted hover:bg-muted/80 rounded-lg transition-colors cursor-pointer border border-neutral-200 dark:border-neutral-700/50"
>
<div className='border-2 bg-gradient-to-br from-neutral-200 to-neutral-300 dark:from-neutral-700 dark:to-neutral-800 flex items-center justify-center p-0.5 rounded-sm border-neutral-400/20 dark:border-neutral-600'>
<IconComponent className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
@ -567,7 +567,7 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
if (debugMode) {
return (
<div key={group.key} className="flex justify-end">
<div className="flex max-w-[85%] rounded-xl bg-primary/10 px-4 py-3 break-words overflow-hidden">
<div className="flex max-w-[85%] rounded-2xl bg-primary/10 px-4 py-3 break-words overflow-hidden">
<pre className="text-xs font-mono whitespace-pre-wrap overflow-x-auto min-w-0 flex-1">
{message.content}
</pre>
@ -590,7 +590,7 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
return (
<div key={group.key} className="flex justify-end">
<div className="flex max-w-[85%] rounded-xl bg-primary/10 px-4 py-3 break-words overflow-hidden">
<div className="flex max-w-[85%] rounded-2xl bg-primary/10 px-4 py-3 break-words overflow-hidden">
<div className="space-y-3 min-w-0 flex-1">
{cleanContent && (
<Markdown className="text-sm prose prose-sm dark:prose-invert chat-markdown max-w-none [&>:first-child]:mt-0 prose-headings:mt-3 break-words overflow-wrap-anywhere">{cleanContent}</Markdown>

2
frontend/src/components/thread/file-attachment.tsx
View File

@ -294,7 +294,7 @@ export function FileAttachment({
<button
onClick={handleClick}
className={cn(
"group relative min-h-[54px] rounded-xl cursor-pointer",
"group relative min-h-[54px] rounded-2xl cursor-pointer",
"border border-black/10 dark:border-white/10",
"bg-black/5 dark:bg-black/20",
"p-0 overflow-hidden", // No padding, content touches borders

2
frontend/src/components/ui/alert-dialog.tsx
View File

@ -54,7 +54,7 @@ function AlertDialogContent({
<AlertDialogPrimitive.Content
data-slot="alert-dialog-content"
className={cn(
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border p-6 shadow-lg duration-200 sm:max-w-lg',
className,
)}
{...props}

2
frontend/src/components/ui/button.tsx
View File

@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {

2
frontend/src/components/ui/dialog.tsx
View File

@ -57,7 +57,7 @@ function DialogContent({
<DialogPrimitive.Content
data-slot="dialog-content"
className={cn(
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200',
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border p-6 shadow-lg duration-200',
className,
)}
{...props}

2
frontend/src/components/ui/dropdown-menu.tsx
View File

@ -42,7 +42,7 @@ function DropdownMenuContent({
data-slot="dropdown-menu-content"
sideOffset={sideOffset}
className={cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border p-1 shadow-md',
className,
)}
{...props}