Jaymr/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️ refactor(web): consolidate design-system primitives and responsive data views

Browse Source
This commit is contained in:
t0ng7u
2026-07-11 05:13:16 +08:00
parent 262ab93123
commit 0918bdb49a
451 changed files with 7295 additions and 7693 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/components/ai-elements/actions.tsx
Vendored
+3 -3
View File
@@ -20,7 +20,7 @@ For commercial licensing, please contact support@quantumnous.com
import type { ComponentProps } from 'react'
import { Button } from '@/components/ui/button'
import { Button } from '@/components/design-system/button'
import {
Tooltip,
TooltipContent,
@@ -48,13 +48,13 @@ export const Action = ({
label,
className,
variant = 'ghost',
size = 'sm',
size = 'icon',
...props
}: ActionProps) => {
const button = (
<Button
className={cn(
'text-muted-foreground hover:text-foreground relative size-9 p-1.5',
'text-muted-foreground hover:text-foreground relative',
className
)}
size={size}
web/default/src/components/ai-elements/artifact.tsx
Vendored
+5 -11
View File
@@ -22,7 +22,7 @@ import { type LucideIcon, XIcon } from 'lucide-react'
import type { ComponentProps, HTMLAttributes } from 'react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import { Button } from '@/components/design-system/button'
import {
Tooltip,
TooltipContent,
@@ -63,17 +63,14 @@ export type ArtifactCloseProps = ComponentProps<typeof Button>
export const ArtifactClose = ({
className,
children,
size = 'sm',
size = 'icon',
variant = 'ghost',
...props
}: ArtifactCloseProps) => {
const { t } = useTranslation()
return (
<Button
className={cn(
'text-muted-foreground hover:text-foreground size-8 p-0',
className
)}
className={cn('text-muted-foreground hover:text-foreground', className)}
size={size}
type='button'
variant={variant}
@@ -124,16 +121,13 @@ export const ArtifactAction = ({
icon: Icon,
children,
className,
size = 'sm',
size = 'icon',
variant = 'ghost',
...props
}: ArtifactActionProps) => {
const button = (
<Button
className={cn(
'text-muted-foreground hover:text-foreground size-8 p-0',
className
)}
className={cn('text-muted-foreground hover:text-foreground', className)}
size={size}
type='button'
variant={variant}
web/default/src/components/ai-elements/branch.tsx
Vendored
+5 -5
View File
@@ -32,7 +32,7 @@ import {
} from 'react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import { Button } from '@/components/design-system/button'
import { cn } from '@/lib/utils'
type BranchContextType = {
@@ -178,14 +178,14 @@ export const BranchPrevious = ({
<Button
aria-label={t('Previous branch')}
className={cn(
'text-muted-foreground size-7 shrink-0 transition-colors',
'text-muted-foreground shrink-0 transition-colors',
'hover:bg-accent hover:text-foreground',
'disabled:pointer-events-none disabled:opacity-50',
className
)}
disabled={totalBranches <= 1}
onClick={goToPrevious}
size='icon'
size='icon-sm'
type='button'
variant='ghost'
{...props}
@@ -209,14 +209,14 @@ export const BranchNext = ({
<Button
aria-label={t('Next branch')}
className={cn(
'text-muted-foreground size-7 shrink-0 transition-colors',
'text-muted-foreground shrink-0 transition-colors',
'hover:bg-accent hover:text-foreground',
'disabled:pointer-events-none disabled:opacity-50',
className
)}
disabled={totalBranches <= 1}
onClick={goToNext}
size='icon'
size='icon-sm'
type='button'
variant='ghost'
{...props}
web/default/src/components/ai-elements/code-block.tsx
Vendored
+5 -7
View File
@@ -46,7 +46,7 @@ import {
import { useTranslation } from 'react-i18next'
import type { BundledLanguage } from 'shiki'
import { Button } from '@/components/ui/button'
import { Button } from '@/components/design-system/button'
import {
Tooltip,
TooltipContent,
@@ -507,9 +507,8 @@ export const CodeBlock = ({
render={
<Button
aria-label={isCodeCollapsed ? t('Expand') : t('Collapse')}
className='size-8'
onClick={() => setIsCollapsed((value) => !value)}
size='icon-sm'
size='icon'
type='button'
variant='ghost'
>
@@ -532,9 +531,8 @@ export const CodeBlock = ({
render={
<Button
aria-label={t('Download')}
className='size-8'
onClick={downloadCode}
size='icon-sm'
size='icon'
type='button'
variant='ghost'
>
@@ -641,9 +639,9 @@ export const CodeBlockCopyButton = ({
const button = (
<Button
aria-label={isCopied ? t('Copied!') : t('Copy code')}
className={cn('size-8 shrink-0', className)}
className={cn('shrink-0', className)}
onClick={copyToClipboard}
size='icon-sm'
size='icon'
type='button'
variant='ghost'
{...props}
web/default/src/components/ai-elements/confirmation.tsx
Vendored
+2 -2
View File
@@ -26,8 +26,8 @@ import {
useContext,
} from 'react'
import { Button } from '@/components/design-system/button'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'
// Workaround for missing types in 'ai' package
@@ -169,5 +169,5 @@ export const ConfirmationActions = ({
export type ConfirmationActionProps = ComponentProps<typeof Button>
export const ConfirmationAction = (props: ConfirmationActionProps) => (
<Button className='h-8 px-3 text-sm' type='button' {...props} />
<Button type='button' {...props} />
)
web/default/src/components/ai-elements/context.tsx
Vendored
+1 -1
View File
@@ -23,7 +23,7 @@ import { type ComponentProps, createContext, useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { getUsage } from 'tokenlens'
import { Button } from '@/components/ui/button'
import { Button } from '@/components/design-system/button'
import {
HoverCard,
HoverCardContent,
web/default/src/components/ai-elements/conversation.tsx
Vendored
+1 -1
View File
@@ -23,7 +23,7 @@ import { type ComponentProps, useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom'
import { Button } from '@/components/ui/button'
import { Button } from '@/components/design-system/button'
import { cn } from '@/lib/utils'
export type ConversationProps = ComponentProps<typeof StickToBottom>
web/default/src/components/ai-elements/inline-citation.tsx
Vendored
+1 -1
View File
@@ -29,8 +29,8 @@ import {
} from 'react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/design-system/button'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
Carousel,
type CarouselApi,
web/default/src/components/ai-elements/open-in-chat.tsx
Vendored
+1 -1
View File
@@ -24,7 +24,7 @@ import {
import { type ComponentProps, createContext, useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import { Button } from '@/components/design-system/button'
import {
DropdownMenu,
DropdownMenuContent,
web/default/src/components/ai-elements/plan.tsx
Vendored
+2 -2
View File
@@ -22,7 +22,7 @@ import { ChevronsUpDownIcon } from 'lucide-react'
import { type ComponentProps, createContext, useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import { Button } from '@/components/design-system/button'
import {
Card,
CardAction,
@@ -156,7 +156,7 @@ export const PlanTrigger = ({ className, ...props }: PlanTriggerProps) => {
<CollapsibleTrigger
render={
<Button
className={cn('size-8', className)}
className={cn(className)}
data-slot='plan-trigger'
size='icon'
variant='ghost'
web/default/src/components/ai-elements/prompt-input.tsx
Vendored
+16 -15
View File
@@ -55,7 +55,7 @@ import {
} from 'react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import { Button } from '@/components/design-system/button'
import {
Command,
CommandEmpty,
@@ -64,7 +64,20 @@ import {
CommandItem,
CommandList,
CommandSeparator,
} from '@/components/ui/command'
} from '@/components/design-system/command'
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupTextarea,
} from '@/components/design-system/input-group'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/design-system/select'
import {
DropdownMenu,
DropdownMenuContent,
@@ -76,19 +89,6 @@ import {
HoverCardContent,
HoverCardTrigger,
} from '@/components/ui/hover-card'
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupTextarea,
} from '@/components/ui/input-group'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import { cn } from '@/lib/utils'
// ============================================================================
@@ -326,6 +326,7 @@ export function PromptInputAttachment({
</div>
<Button
aria-label={t('Remove attachment')}
size='icon-xs'
className='absolute inset-0 size-5 cursor-pointer rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 [&>svg]:size-2.5'
onClick={(e) => {
e.stopPropagation()
web/default/src/components/ai-elements/queue.tsx
Vendored
+2 -2
View File
@@ -21,7 +21,7 @@ For commercial licensing, please contact support@quantumnous.com
import { ChevronDownIcon, PaperclipIcon } from 'lucide-react'
import type { ComponentProps } from 'react'
import { Button } from '@/components/ui/button'
import { Button } from '@/components/design-system/button'
import {
Collapsible,
CollapsibleContent,
@@ -236,7 +236,7 @@ export const QueueSectionTrigger = ({
<Button
variant='ghost'
className={cn(
'group bg-muted/40 text-muted-foreground hover:bg-muted h-auto w-full justify-between px-3 py-2 text-left',
'group bg-muted/40 text-muted-foreground hover:bg-muted h-auto sm:h-auto w-full justify-between px-3 py-2 text-left',
className
)}
type='button'
web/default/src/components/ai-elements/suggestion.tsx
Vendored
+1 -1
View File
@@ -20,7 +20,7 @@ For commercial licensing, please contact support@quantumnous.com
import type { ComponentProps } from 'react'
import { Button } from '@/components/ui/button'
import { Button } from '@/components/design-system/button'
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
import { cn } from '@/lib/utils'
web/default/src/components/ai-elements/web-preview.tsx
Vendored
+5 -5
View File
@@ -29,13 +29,13 @@ import {
} from 'react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import { Button } from '@/components/design-system/button'
import { Input } from '@/components/design-system/input'
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/components/ui/collapsible'
import { Input } from '@/components/ui/input'
import {
Tooltip,
TooltipContent,
@@ -135,10 +135,10 @@ export const WebPreviewNavigationButton = ({
<TooltipTrigger
render={
<Button
className='hover:text-foreground h-8 w-8 p-0'
className='hover:text-foreground'
disabled={disabled}
onClick={onClick}
size='sm'
size='icon'
variant='ghost'
{...props}
/>
@@ -185,7 +185,7 @@ export const WebPreviewUrl = ({
return (
<Input
className='h-8 flex-1 text-sm'
className='flex-1 text-sm'
onChange={onChange ?? handleChange}
onKeyDown={handleKeyDown}
placeholder={t('Enter URL...')}