mirror of
https://github.com/HKUDS/nanobot.git
synced 2026-09-01 00:31:51 +03:00
609 lines
20 KiB
TypeScript
609 lines
20 KiB
TypeScript
import {
|
|
useEffect,
|
|
useLayoutEffect,
|
|
useRef,
|
|
useState,
|
|
type KeyboardEvent,
|
|
type PointerEvent,
|
|
} from "react";
|
|
import { Check, CircleHelp, Sparkles } from "lucide-react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import {
|
|
floatingItemClassName,
|
|
floatingItemFocusClassName,
|
|
} from "@/components/ui/floating-surface";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { useLogoFallback } from "@/hooks/useLogoFallback";
|
|
import { inferProviderFromModelName, providerBrand } from "@/lib/provider-brand";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const pickerWidthClassName = "w-[min(18rem,calc(100vw-2rem))]";
|
|
const LONG_PRESS_MS = 400;
|
|
const PRESS_SLOP_PX = 8;
|
|
const PILL_GAP_PX = 4;
|
|
const PILL_OFFSETS = [-2, -1, 0, 1, 2] as const;
|
|
const HANDOFF_THRESHOLD = 0.56;
|
|
const DOCK_MAX_SCALE = 1.08;
|
|
const DOCK_RADIUS = 1.5;
|
|
const SETTLE_MS = 200;
|
|
|
|
interface PresetGesture {
|
|
active: boolean;
|
|
baseIndex: number;
|
|
latestY: number;
|
|
pointerId: number;
|
|
startY: number;
|
|
step: number;
|
|
target: HTMLElement;
|
|
timer: ReturnType<typeof setTimeout> | null;
|
|
}
|
|
|
|
interface PresetMotion {
|
|
index: number;
|
|
remainder: number;
|
|
settling: boolean;
|
|
}
|
|
|
|
function wrapIndex(index: number, length: number): number {
|
|
return ((index % length) + length) % length;
|
|
}
|
|
|
|
function dockScale(distanceFromFocus: number): number {
|
|
const distance = Math.abs(distanceFromFocus);
|
|
if (distance >= DOCK_RADIUS) return 1;
|
|
const influence = (1 + Math.cos(Math.PI * distance / DOCK_RADIUS)) / 2;
|
|
return 1 + (DOCK_MAX_SCALE - 1) * influence;
|
|
}
|
|
|
|
function stepWithHysteresis(raw: number, current: number): number {
|
|
let next = current;
|
|
while (raw > next + HANDOFF_THRESHOLD) next += 1;
|
|
while (raw < next - HANDOFF_THRESHOLD) next -= 1;
|
|
return next;
|
|
}
|
|
|
|
function preventTouchScroll(event: TouchEvent) {
|
|
if (event.cancelable) event.preventDefault();
|
|
}
|
|
|
|
function compactModelName(model?: string | null): string | null {
|
|
const value = model?.trim();
|
|
if (!value) return null;
|
|
return value.split("/").at(-1) || value;
|
|
}
|
|
|
|
export interface ModelPresetOption {
|
|
name: string;
|
|
model?: string | null;
|
|
provider?: string | null;
|
|
}
|
|
|
|
interface ModelPresetBadgeProps {
|
|
label: string;
|
|
modelDetail?: string | null;
|
|
modelPreset?: string | null;
|
|
modelPresets?: ModelPresetOption[];
|
|
onPresetChange?: (name: string) => void;
|
|
onRequestComposerFocus?: () => void;
|
|
provider?: string | null;
|
|
providerLabel?: string | null;
|
|
needsSetup?: boolean;
|
|
fallbackModelName?: string | null;
|
|
isHero: boolean;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export function ModelPresetBadge({
|
|
label,
|
|
modelDetail,
|
|
modelPreset,
|
|
modelPresets = [],
|
|
onPresetChange,
|
|
onRequestComposerFocus,
|
|
provider,
|
|
providerLabel,
|
|
needsSetup = false,
|
|
fallbackModelName,
|
|
isHero,
|
|
onClick,
|
|
}: ModelPresetBadgeProps) {
|
|
const { t } = useTranslation();
|
|
const [open, setOpen] = useState(false);
|
|
const [motion, setMotion] = useState<PresetMotion | null>(null);
|
|
const [motionWidth, setMotionWidth] = useState<number | null>(null);
|
|
const gestureRef = useRef<PresetGesture | null>(null);
|
|
const suppressClickRef = useRef(false);
|
|
const activeName = modelPreset?.trim() || "";
|
|
const listedIndex = modelPresets.findIndex((preset) => preset.name === activeName);
|
|
const activePreset: ModelPresetOption = {
|
|
...(listedIndex >= 0 ? modelPresets[listedIndex] : undefined),
|
|
name: activeName,
|
|
model: modelDetail ?? modelPresets[listedIndex]?.model,
|
|
provider: provider || modelPresets[listedIndex]?.provider,
|
|
};
|
|
const fallbackPreset = fallbackModelName
|
|
? modelPresets.find((preset) => preset.model?.trim() === fallbackModelName.trim())
|
|
: undefined;
|
|
const fallbackDisplayLabel = fallbackPreset?.name
|
|
|| fallbackModelName?.trim().split(/[/:]/).pop()
|
|
|| null;
|
|
const displayLabel = fallbackDisplayLabel || label;
|
|
const displayModelDetail = fallbackPreset
|
|
? fallbackPreset.model
|
|
: fallbackModelName
|
|
? null
|
|
: modelDetail;
|
|
const displayProvider = fallbackPreset?.provider
|
|
|| (fallbackModelName ? inferProviderFromModelName(fallbackModelName) : provider);
|
|
const presets = !activeName
|
|
? modelPresets
|
|
: listedIndex < 0
|
|
? [activePreset, ...modelPresets]
|
|
: modelPresets.map((preset, index) => index === listedIndex ? activePreset : preset);
|
|
const opensSetup = Boolean(onClick);
|
|
const canSwitch = !opensSetup && Boolean(onPresetChange) && activeName !== "" && presets.length > 1;
|
|
const currentIndex = Math.max(0, presets.findIndex((preset) => preset.name === activeName));
|
|
const pillHeight = isHero ? 32 : 36;
|
|
const pillStride = pillHeight + PILL_GAP_PX;
|
|
const switchModelLabel = t("thread.composer.switchModel", {
|
|
defaultValue: "Switch model for this chat",
|
|
});
|
|
|
|
const selectPreset = (name: string) => {
|
|
setOpen(false);
|
|
if (name !== activeName) onPresetChange?.(name);
|
|
requestAnimationFrame(() => onRequestComposerFocus?.());
|
|
};
|
|
|
|
const clearGesture = () => {
|
|
const gesture = gestureRef.current;
|
|
if (gesture?.timer) clearTimeout(gesture.timer);
|
|
if (gesture?.active) gesture.target.removeEventListener("touchmove", preventTouchScroll);
|
|
gestureRef.current = null;
|
|
};
|
|
|
|
const clearMotion = () => {
|
|
setMotion(null);
|
|
setMotionWidth(null);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!canSwitch) {
|
|
clearGesture();
|
|
clearMotion();
|
|
}
|
|
return clearGesture;
|
|
}, [canSwitch]);
|
|
|
|
useEffect(() => {
|
|
if (!motion?.settling) return;
|
|
const timer = setTimeout(clearMotion, SETTLE_MS + 80);
|
|
return () => clearTimeout(timer);
|
|
}, [motion?.settling]);
|
|
|
|
const updateMotion = (gesture: PresetGesture, clientY: number) => {
|
|
const raw = -(clientY - gesture.startY) / pillStride;
|
|
gesture.step = stepWithHysteresis(raw, gesture.step);
|
|
setMotion({
|
|
index: gesture.baseIndex + gesture.step,
|
|
remainder: raw - gesture.step,
|
|
settling: false,
|
|
});
|
|
};
|
|
|
|
const handlePointerDown = (event: PointerEvent<HTMLButtonElement>) => {
|
|
if (!canSwitch || gestureRef.current || motion) return;
|
|
if (event.pointerType === "mouse" && event.button !== 0) return;
|
|
const gesture: PresetGesture = {
|
|
active: false,
|
|
baseIndex: currentIndex,
|
|
latestY: event.clientY,
|
|
pointerId: event.pointerId,
|
|
startY: event.clientY,
|
|
step: 0,
|
|
target: event.currentTarget,
|
|
timer: null,
|
|
};
|
|
gesture.timer = setTimeout(() => {
|
|
if (gestureRef.current !== gesture) return;
|
|
gesture.active = true;
|
|
setMotionWidth(Math.round(gesture.target.getBoundingClientRect().width) || null);
|
|
updateMotion(gesture, gesture.latestY);
|
|
gesture.target.addEventListener("touchmove", preventTouchScroll, { passive: false });
|
|
try {
|
|
gesture.target.setPointerCapture(gesture.pointerId);
|
|
} catch {
|
|
// The pointer may already have ended.
|
|
}
|
|
}, LONG_PRESS_MS);
|
|
gestureRef.current = gesture;
|
|
};
|
|
|
|
const handlePointerMove = (event: PointerEvent<HTMLButtonElement>) => {
|
|
const gesture = gestureRef.current;
|
|
if (!gesture || gesture.pointerId !== event.pointerId) return;
|
|
gesture.latestY = event.clientY;
|
|
if (!gesture.active) {
|
|
if (Math.abs(event.clientY - gesture.startY) > PRESS_SLOP_PX) clearGesture();
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
updateMotion(gesture, event.clientY);
|
|
};
|
|
|
|
const finishGesture = (event: PointerEvent<HTMLButtonElement>, commit: boolean) => {
|
|
const gesture = gestureRef.current;
|
|
if (!gesture || gesture.pointerId !== event.pointerId) return;
|
|
clearGesture();
|
|
if (event.currentTarget.hasPointerCapture?.(gesture.pointerId)) {
|
|
event.currentTarget.releasePointerCapture?.(gesture.pointerId);
|
|
}
|
|
if (!commit || !gesture.active) {
|
|
clearMotion();
|
|
return;
|
|
}
|
|
suppressClickRef.current = true;
|
|
const selected = presets[wrapIndex(gesture.baseIndex + gesture.step, presets.length)];
|
|
setMotion((current) => current && { ...current, remainder: 0, settling: true });
|
|
if (selected && selected.name !== activeName) selectPreset(selected.name);
|
|
};
|
|
|
|
const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
|
|
const targetByKey: Record<string, number> = {
|
|
ArrowUp: currentIndex - 1,
|
|
ArrowDown: currentIndex + 1,
|
|
Home: 0,
|
|
End: presets.length - 1,
|
|
};
|
|
const target = targetByKey[event.key];
|
|
if (target === undefined) return;
|
|
event.preventDefault();
|
|
const next = presets[wrapIndex(target, presets.length)];
|
|
if (next?.name !== activeName) selectPreset(next.name);
|
|
};
|
|
|
|
const pill = (
|
|
<PresetPill
|
|
label={displayLabel}
|
|
modelDetail={displayModelDetail}
|
|
provider={displayProvider}
|
|
providerLabel={fallbackModelName ? null : providerLabel}
|
|
needsSetup={needsSetup}
|
|
fallbackModelName={fallbackModelName}
|
|
fallbackFromLabel={fallbackModelName ? label : null}
|
|
isHero={isHero}
|
|
/>
|
|
);
|
|
|
|
if (!canSwitch) {
|
|
const Container = opensSetup ? "button" : "span";
|
|
return (
|
|
<Container
|
|
aria-label={fallbackModelName ? `${displayLabel} (fallback from ${label})` : label}
|
|
type={opensSetup ? "button" : undefined}
|
|
onClick={opensSetup ? onClick : undefined}
|
|
className={cn(
|
|
"thread-composer-model-badge group inline-flex w-fit min-w-0 max-w-[min(18rem,44vw)] appearance-none border-0 bg-transparent p-0 shadow-none",
|
|
opensSetup && "cursor-pointer focus-visible:outline-none",
|
|
isHero ? "h-8" : "h-9",
|
|
)}
|
|
>
|
|
{pill}
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Popover
|
|
open={open}
|
|
onOpenChange={(nextOpen) => {
|
|
setOpen(nextOpen);
|
|
if (!nextOpen) requestAnimationFrame(() => onRequestComposerFocus?.());
|
|
}}
|
|
>
|
|
<PopoverTrigger asChild>
|
|
<button
|
|
type="button"
|
|
data-switching={motion ? "true" : undefined}
|
|
aria-label={label}
|
|
aria-expanded={open}
|
|
onPointerDown={handlePointerDown}
|
|
onPointerMove={handlePointerMove}
|
|
onPointerLeave={(event) => {
|
|
const gesture = gestureRef.current;
|
|
if (gesture && gesture.pointerId === event.pointerId && !gesture.active) clearGesture();
|
|
}}
|
|
onPointerUp={(event) => finishGesture(event, true)}
|
|
onPointerCancel={(event) => finishGesture(event, false)}
|
|
onLostPointerCapture={(event) => finishGesture(event, false)}
|
|
onContextMenu={(event) => {
|
|
if (gestureRef.current?.active) event.preventDefault();
|
|
}}
|
|
onDragStart={(event) => event.preventDefault()}
|
|
onKeyDown={handleKeyDown}
|
|
onClickCapture={(event) => {
|
|
if (!suppressClickRef.current) return;
|
|
suppressClickRef.current = false;
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}}
|
|
style={{
|
|
touchAction: "manipulation",
|
|
width: motionWidth ? `${motionWidth}px` : undefined,
|
|
}}
|
|
className={cn(
|
|
"thread-composer-model-badge group relative inline-flex w-fit min-w-0 max-w-[min(18rem,44vw)] cursor-pointer appearance-none border-0 bg-transparent p-0 shadow-none focus-visible:outline-none",
|
|
motion && "z-10 cursor-grabbing",
|
|
!motion && "cursor-grab",
|
|
isHero ? "h-8" : "h-9",
|
|
)}
|
|
>
|
|
{motion ? (
|
|
<>
|
|
<span data-testid="composer-model-pill-layout" className="invisible inline-flex h-full shrink-0" aria-hidden>
|
|
{pill}
|
|
</span>
|
|
<span
|
|
data-testid="composer-model-pill-viewport"
|
|
className={cn(
|
|
"composer-model-pill-viewport pointer-events-none absolute -left-2 right-0 overflow-hidden bg-transparent",
|
|
isHero ? "-bottom-2.5 -top-2.5" : "-bottom-3 -top-3",
|
|
)}
|
|
aria-hidden
|
|
>
|
|
<span
|
|
data-testid="composer-model-pill-track"
|
|
data-settling={motion.settling ? "true" : undefined}
|
|
className="composer-model-pill-track ml-auto flex w-[calc(100%-0.5rem)] flex-col items-end gap-1 will-change-transform"
|
|
onTransitionEnd={(event) => {
|
|
if (motion.settling && event.currentTarget === event.target) clearMotion();
|
|
}}
|
|
style={{
|
|
paddingTop: isHero ? "10px" : "12px",
|
|
transform: `translate3d(0, ${-pillStride * (2 + motion.remainder)}px, 0)`,
|
|
}}
|
|
>
|
|
{PILL_OFFSETS.map((offset) => {
|
|
const preset = presets[wrapIndex(motion.index + offset, presets.length)];
|
|
return (
|
|
<PresetPill
|
|
key={motion.index + offset}
|
|
label={preset.name}
|
|
modelDetail={preset.model}
|
|
provider={preset.provider}
|
|
isHero={isHero}
|
|
offset={offset}
|
|
scale={motion.settling ? 1 : dockScale(offset - motion.remainder)}
|
|
/>
|
|
);
|
|
})}
|
|
</span>
|
|
</span>
|
|
</>
|
|
) : pill}
|
|
</button>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
align="end"
|
|
side="top"
|
|
sideOffset={10}
|
|
role="dialog"
|
|
aria-label={switchModelLabel}
|
|
onOpenAutoFocus={(event) => {
|
|
event.preventDefault();
|
|
const content = event.currentTarget;
|
|
if (!(content instanceof HTMLElement)) return;
|
|
const selected = content.querySelector<HTMLElement>(
|
|
'[role="option"][aria-selected="true"]',
|
|
);
|
|
selected?.focus();
|
|
}}
|
|
className={cn(
|
|
pickerWidthClassName,
|
|
"origin-[var(--radix-popover-content-transform-origin)] p-1.5 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-[state=closed]:slide-out-to-bottom-1 data-[state=open]:slide-in-from-bottom-1 duration-200 ease-out motion-reduce:animate-none",
|
|
)}
|
|
>
|
|
<div
|
|
role="listbox"
|
|
aria-label={switchModelLabel}
|
|
className="max-h-[min(16rem,var(--radix-popover-content-available-height))] overflow-y-auto py-1 scrollbar-thin scrollbar-track-transparent"
|
|
>
|
|
{presets.map((preset) => (
|
|
<PresetOption
|
|
key={preset.name}
|
|
preset={preset}
|
|
selected={preset.name === activeName}
|
|
onSelect={selectPreset}
|
|
/>
|
|
))}
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
}
|
|
|
|
function PresetOption({
|
|
preset,
|
|
selected,
|
|
onSelect,
|
|
}: {
|
|
preset: ModelPresetOption;
|
|
selected: boolean;
|
|
onSelect: (name: string) => void;
|
|
}) {
|
|
const detail = compactModelName(preset.model);
|
|
return (
|
|
<button
|
|
type="button"
|
|
role="option"
|
|
aria-label={preset.name}
|
|
aria-selected={selected}
|
|
onClick={() => onSelect(preset.name)}
|
|
className={cn(
|
|
floatingItemClassName,
|
|
floatingItemFocusClassName,
|
|
"flex min-h-9 w-full cursor-pointer gap-2.5 px-2.5 py-1.5 text-left hover:bg-muted/55",
|
|
selected && "bg-muted/55 text-foreground",
|
|
)}
|
|
>
|
|
<PresetProviderIcon
|
|
label={preset.name}
|
|
modelDetail={detail}
|
|
provider={preset.provider}
|
|
isHero={false}
|
|
/>
|
|
<span className="flex min-w-0 flex-1 items-baseline gap-1.5 overflow-hidden whitespace-nowrap">
|
|
<span className="shrink-0 text-[13px] font-medium text-foreground">{preset.name}</span>
|
|
{detail && detail !== preset.name ? (
|
|
<span className="truncate text-[12px] text-muted-foreground">{detail}</span>
|
|
) : null}
|
|
</span>
|
|
{selected ? <Check className="h-4 w-4 shrink-0 text-foreground/80" aria-hidden /> : null}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
function PresetPill({
|
|
label,
|
|
modelDetail,
|
|
provider,
|
|
providerLabel,
|
|
needsSetup = false,
|
|
fallbackModelName,
|
|
fallbackFromLabel,
|
|
isHero,
|
|
offset,
|
|
scale,
|
|
}: {
|
|
label: string;
|
|
modelDetail?: string | null;
|
|
provider?: string | null;
|
|
providerLabel?: string | null;
|
|
needsSetup?: boolean;
|
|
fallbackModelName?: string | null;
|
|
fallbackFromLabel?: string | null;
|
|
isHero: boolean;
|
|
offset?: number;
|
|
scale?: number;
|
|
}) {
|
|
const labelRef = useRef<HTMLSpanElement | null>(null);
|
|
const [labelOverflows, setLabelOverflows] = useState(false);
|
|
const inferredProvider = needsSetup
|
|
? null
|
|
: provider || inferProviderFromModelName(modelDetail || label);
|
|
const title = [...new Set([label, modelDetail, providerLabel].filter(Boolean))].join(" · ");
|
|
const fallbackTitle = fallbackModelName
|
|
? `${fallbackFromLabel || label} · using ${fallbackModelName}`
|
|
: title;
|
|
|
|
useLayoutEffect(() => {
|
|
const node = labelRef.current;
|
|
if (!node) return;
|
|
const update = () => setLabelOverflows(node.scrollWidth > node.clientWidth + 1);
|
|
update();
|
|
const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
|
|
observer?.observe(node);
|
|
return () => observer?.disconnect();
|
|
}, [label]);
|
|
|
|
return (
|
|
<span
|
|
data-fallback={fallbackModelName ? "true" : undefined}
|
|
data-preset-offset={offset}
|
|
title={fallbackTitle || undefined}
|
|
className={cn(
|
|
"composer-model-badge composer-model-pill inline-flex h-full max-w-full min-w-0 shrink-0 items-center rounded-full border border-border/55 bg-card font-medium text-foreground/70",
|
|
"w-fit",
|
|
"transition-[color,background-color,border-color,transform] duration-150 ease-out group-focus-visible:ring-2 group-focus-visible:ring-ring/45",
|
|
needsSetup && "border-amber-500/35 bg-amber-50/70 text-amber-900 dark:bg-amber-500/10 dark:text-amber-200",
|
|
isHero ? "gap-1.5 px-2.5 text-[12px]" : "gap-2 px-3 text-[12.5px]",
|
|
offset !== undefined && "composer-model-pill-dock",
|
|
)}
|
|
style={scale === undefined ? undefined : {
|
|
height: `${isHero ? 32 : 36}px`,
|
|
transform: `scale(${scale.toFixed(4)})`,
|
|
zIndex: Math.round(scale * 100),
|
|
}}
|
|
>
|
|
<PresetProviderIcon
|
|
label={label}
|
|
modelDetail={modelDetail}
|
|
provider={inferredProvider}
|
|
needsSetup={needsSetup}
|
|
testId={needsSetup ? "composer-model-setup-icon" : `composer-model-logo${inferredProvider ? `-${inferredProvider}` : ""}`}
|
|
isHero={isHero}
|
|
/>
|
|
<span
|
|
ref={labelRef}
|
|
className={cn(
|
|
"thread-composer-model-label min-w-0 overflow-hidden whitespace-nowrap text-center",
|
|
labelOverflows && "thread-composer-model-label-fade",
|
|
)}
|
|
>
|
|
{label}
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function PresetProviderIcon({
|
|
label,
|
|
modelDetail,
|
|
provider,
|
|
needsSetup = false,
|
|
testId,
|
|
isHero,
|
|
}: {
|
|
label: string;
|
|
modelDetail?: string | null;
|
|
provider?: string | null;
|
|
needsSetup?: boolean;
|
|
testId?: string;
|
|
isHero: boolean;
|
|
}) {
|
|
const inferredProvider = needsSetup
|
|
? null
|
|
: provider || inferProviderFromModelName(modelDetail || label);
|
|
const brand = providerBrand(inferredProvider);
|
|
const { logoUrl, onLogoError, onLogoLoad } = useLogoFallback(brand?.logoUrls);
|
|
return (
|
|
<span
|
|
data-testid={testId}
|
|
className={cn(
|
|
"grid shrink-0 place-items-center",
|
|
needsSetup && "text-amber-800 dark:text-amber-200",
|
|
isHero ? "h-4 w-4" : "h-[18px] w-[18px]",
|
|
)}
|
|
aria-hidden
|
|
>
|
|
{needsSetup ? (
|
|
<CircleHelp className={cn(isHero ? "h-3 w-3" : "h-3.5 w-3.5")} strokeWidth={1.8} />
|
|
) : logoUrl ? (
|
|
<img
|
|
src={logoUrl}
|
|
alt=""
|
|
draggable={false}
|
|
decoding="async"
|
|
loading="lazy"
|
|
className={cn("object-contain", isHero ? "h-3.5 w-3.5" : "h-[18px] w-[18px]")}
|
|
onLoad={onLogoLoad}
|
|
onError={onLogoError}
|
|
/>
|
|
) : brand ? (
|
|
<span
|
|
className={cn(
|
|
"grid h-full w-full place-items-center rounded-full text-white",
|
|
isHero ? "text-[7.5px]" : "text-[8px]",
|
|
)}
|
|
style={{ backgroundColor: brand.color }}
|
|
>
|
|
{brand.initials.slice(0, 2)}
|
|
</span>
|
|
) : (
|
|
<Sparkles className="h-3 w-3 text-muted-foreground/65" />
|
|
)}
|
|
</span>
|
|
);
|
|
}
|