chore: input box alignment (#1189)
This commit is contained in:
josh
GitHub
parent
c7fc95ee1b
commit
e42c392427
4 changed files with 211 additions and 27 deletions
182
components/domain-checker.tsx
Normal file
182
components/domain-checker.tsx
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { CheckCircle2, XCircle, AlertCircle, Loader2, Globe, ExternalLink } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
interface DomainResult {
|
||||
domain: string;
|
||||
available: boolean;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface DomainCheckerProps {
|
||||
results?: DomainResult[];
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
export function DomainChecker({ results = [], loading = false }: DomainCheckerProps) {
|
||||
const [animatedResults, setAnimatedResults] = useState<DomainResult[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (results.length > 0) {
|
||||
setAnimatedResults([]);
|
||||
const timer = setTimeout(() => {
|
||||
results.forEach((result, index) => {
|
||||
setTimeout(() => {
|
||||
setAnimatedResults(prev => [...prev, result]);
|
||||
}, index * 100);
|
||||
});
|
||||
}, 100);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [results]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
<p className="text-sm text-muted-foreground">Checking domain availability...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (results.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const availableCount = results.filter(r => r.available).length;
|
||||
const takenCount = results.filter(r => !r.available && !r.error).length;
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-2xl mx-auto p-6 space-y-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Globe className="h-5 w-5 text-primary" />
|
||||
<h3 className="text-lg font-semibold">Domain Availability Check</h3>
|
||||
</div>
|
||||
|
||||
{availableCount > 0 || takenCount > 0 ? (
|
||||
<div className="flex gap-4 mb-4">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<div className="h-3 w-3 rounded-full bg-green-500" />
|
||||
<span className="text-muted-foreground">
|
||||
{availableCount} available
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<div className="h-3 w-3 rounded-full bg-red-500" />
|
||||
<span className="text-muted-foreground">
|
||||
{takenCount} taken
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="space-y-2">
|
||||
<AnimatePresence mode="popLayout">
|
||||
{animatedResults.map((result, index) => (
|
||||
<motion.div
|
||||
key={result.domain}
|
||||
initial={{ opacity: 0, y: 20, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: -20, scale: 0.95 }}
|
||||
transition={{
|
||||
duration: 0.3,
|
||||
ease: [0.4, 0, 0.2, 1]
|
||||
}}
|
||||
>
|
||||
<DomainCard result={result} />
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DomainCard({ result }: { result: DomainResult }) {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
if (result.error) {
|
||||
return (
|
||||
<div className="relative overflow-hidden rounded-lg border border-destructive/20 bg-destructive/5 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<AlertCircle className="h-5 w-5 text-destructive" />
|
||||
<div>
|
||||
<p className="font-mono text-sm font-medium">{result.domain}</p>
|
||||
<p className="text-xs text-destructive mt-1">{result.error}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const isAvailable = result.available;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative overflow-hidden rounded-lg border transition-all duration-200",
|
||||
isAvailable
|
||||
? "border-green-500/20 bg-gradient-to-r from-green-500/5 to-green-500/10 hover:border-green-500/40"
|
||||
: "border-red-500/20 bg-gradient-to-r from-red-500/5 to-red-500/10 hover:border-red-500/40"
|
||||
)}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
<div className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{isAvailable ? (
|
||||
<CheckCircle2 className="h-5 w-5 text-green-500" />
|
||||
) : (
|
||||
<XCircle className="h-5 w-5 text-red-500" />
|
||||
)}
|
||||
<div>
|
||||
<p className="font-mono text-sm font-medium">{result.domain}</p>
|
||||
<p className={cn(
|
||||
"text-xs mt-1",
|
||||
isAvailable ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"
|
||||
)}>
|
||||
{isAvailable ? "Available for registration" : "Already registered"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isAvailable && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: isHovered ? 1 : 0, x: isHovered ? 0 : -10 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="gap-2"
|
||||
onClick={() => window.open(`https://vercel.com/domains?q=${result.domain}`, '_blank')}
|
||||
>
|
||||
Register
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</Button>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isAvailable && (
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-gradient-to-r from-green-500/0 via-green-500/10 to-green-500/0"
|
||||
initial={{ x: '-100%' }}
|
||||
animate={{ x: isHovered ? '100%' : '-100%' }}
|
||||
transition={{ duration: 0.8, ease: "easeInOut" }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -156,7 +156,7 @@ function InfoRow({
|
|||
costText?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<div className="flex justify-between items-center text-xs">
|
||||
<span className="text-muted-foreground">{label}</span>
|
||||
<TokensWithCost tokens={tokens} costText={costText} />
|
||||
</div>
|
||||
|
|
@ -275,20 +275,20 @@ export const Context = ({
|
|||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
className={cn(
|
||||
'inline-flex select-none items-center gap-1 rounded-md px-1.5 py-1 text-sm',
|
||||
'bg-background text-foreground',
|
||||
'inline-flex gap-1 items-center text-sm rounded-md select-none',
|
||||
'cursor-pointer bg-background text-foreground',
|
||||
className,
|
||||
)}
|
||||
type="button"
|
||||
{...props}
|
||||
>
|
||||
<span className="font-medium text-muted-foreground hidden">
|
||||
<span className="hidden font-medium text-muted-foreground">
|
||||
{displayPct}
|
||||
</span>
|
||||
<ContextIcon percent={usedPercent} />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" side="top" className="w-fit p-3">
|
||||
<DropdownMenuContent align="end" side="top" className="p-3 w-fit">
|
||||
<div className="min-w-[240px] space-y-2">
|
||||
<div className="flex justify-between items-start text-sm">
|
||||
<span>{displayPct}</span>
|
||||
|
|
@ -332,7 +332,7 @@ export const Context = ({
|
|||
{costText && (
|
||||
<>
|
||||
<Separator className="mt-1" />
|
||||
<div className="flex items-center justify-between pt-1 text-xs">
|
||||
<div className="flex justify-between items-center pt-1 text-xs">
|
||||
<span className="text-muted-foreground">Total cost</span>
|
||||
<span>{costText}</span>
|
||||
</div>
|
||||
|
|
@ -343,4 +343,4 @@ export const Context = ({
|
|||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
|
@ -86,11 +86,11 @@ export function ModelSelector({
|
|||
>
|
||||
<button
|
||||
type="button"
|
||||
className="group/item flex w-full flex-row items-center justify-between gap-2 sm:gap-4"
|
||||
className="flex flex-row gap-2 justify-between items-center w-full group/item sm:gap-4"
|
||||
>
|
||||
<div className="flex flex-col items-start gap-1">
|
||||
<div className="flex flex-col gap-1 items-start">
|
||||
<div className="text-sm sm:text-base">{chatModel.name}</div>
|
||||
<div className="line-clamp-2 text-muted-foreground text-xs">
|
||||
<div className="text-xs line-clamp-2 text-muted-foreground">
|
||||
{chatModel.description}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -105,4 +105,4 @@ export function ModelSelector({
|
|||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -253,7 +253,7 @@ function PureMultimodalInput({
|
|||
}, [status, scrollToBottom]);
|
||||
|
||||
return (
|
||||
<div className='relative flex w-full flex-col gap-4'>
|
||||
<div className='flex relative flex-col gap-4 w-full'>
|
||||
<AnimatePresence>
|
||||
{!isAtBottom && (
|
||||
<motion.div
|
||||
|
|
@ -261,7 +261,7 @@ function PureMultimodalInput({
|
|||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 10 }}
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
|
||||
className='-top-12 -translate-x-1/2 absolute left-1/2 z-50'
|
||||
className='absolute -top-12 left-1/2 z-50 -translate-x-1/2'
|
||||
>
|
||||
<Button
|
||||
data-testid="scroll-to-bottom-button"
|
||||
|
|
@ -299,7 +299,7 @@ function PureMultimodalInput({
|
|||
/>
|
||||
|
||||
<PromptInput
|
||||
className='rounded-xl border border-border bg-background shadow-xs transition-all duration-200 focus-within:border-border hover:border-muted-foreground/50'
|
||||
className='p-3 rounded-xl border transition-all duration-200 border-border bg-background shadow-xs focus-within:border-border hover:border-muted-foreground/50'
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
if (status !== 'ready') {
|
||||
|
|
@ -312,7 +312,7 @@ function PureMultimodalInput({
|
|||
{(attachments.length > 0 || uploadQueue.length > 0) && (
|
||||
<div
|
||||
data-testid="attachments-preview"
|
||||
className='flex flex-row items-end gap-2 overflow-x-scroll px-3 py-2'
|
||||
className='flex overflow-x-scroll flex-row gap-2 items-end'
|
||||
>
|
||||
{attachments.map((attachment) => (
|
||||
<PreviewAttachment
|
||||
|
|
@ -342,7 +342,7 @@ function PureMultimodalInput({
|
|||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className='flex flex-row items-start gap-1 sm:gap-2'>
|
||||
<div className='flex flex-row gap-1 items-start sm:gap-2'>
|
||||
<PromptInputTextarea
|
||||
data-testid="multimodal-input"
|
||||
ref={textareaRef}
|
||||
|
|
@ -352,13 +352,13 @@ function PureMultimodalInput({
|
|||
minHeight={44}
|
||||
maxHeight={200}
|
||||
disableAutoResize={true}
|
||||
className='grow resize-none border-0! border-none! bg-transparent px-2 pt-1 pb-3 ml-1 text-sm outline-none ring-0 [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden'
|
||||
className='grow resize-none border-0! p-2 border-none! bg-transparent text-sm outline-none ring-0 [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden'
|
||||
rows={1}
|
||||
autoFocus
|
||||
/>{' '}
|
||||
<Context {...contextProps} className="mr-0.5 mt-1" />
|
||||
<Context {...contextProps} />
|
||||
</div>
|
||||
<PromptInputToolbar className='!border-top-0 border-t-0! px-2 py-2 shadow-none dark:border-0 dark:border-transparent!'>
|
||||
<PromptInputToolbar className='!border-top-0 border-t-0! p-0 shadow-none dark:border-0 dark:border-transparent!'>
|
||||
<PromptInputTools className="gap-0 sm:gap-0.5">
|
||||
<AttachmentsButton
|
||||
fileInputRef={fileInputRef}
|
||||
|
|
@ -374,7 +374,7 @@ function PureMultimodalInput({
|
|||
<PromptInputSubmit
|
||||
status={status}
|
||||
disabled={!input.trim() || uploadQueue.length > 0}
|
||||
className="size-7 rounded-full bg-primary p-1 text-primary-foreground transition-colors duration-200 hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground -mt-2"
|
||||
className="rounded-full transition-colors duration-200 size-8 bg-primary text-primary-foreground hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground"
|
||||
>
|
||||
<ArrowUpIcon size={14} />
|
||||
</PromptInputSubmit>
|
||||
|
|
@ -413,7 +413,7 @@ function PureAttachmentsButton({
|
|||
return (
|
||||
<Button
|
||||
data-testid="attachments-button"
|
||||
className='h-8 rounded-lg p-1 transition-colors hover:bg-accent'
|
||||
className='p-1 h-8 rounded-lg transition-colors aspect-square hover:bg-accent'
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
fileInputRef.current?.click();
|
||||
|
|
@ -454,17 +454,18 @@ function PureModelSelectorCompact({
|
|||
>
|
||||
<SelectPrimitive.Trigger
|
||||
type="button"
|
||||
className='flex items-center gap-2 px-2 h-8 rounded-lg border-0 bg-background text-foreground hover:bg-accent transition-colors focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 shadow-none'
|
||||
className='flex gap-2 items-center px-2 h-8 rounded-lg border-0 shadow-none transition-colors bg-background text-foreground hover:bg-accent focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0'
|
||||
>
|
||||
<CpuIcon size={16} />
|
||||
<span className="text-xs font-medium sm:block hidden">{selectedModel?.name}</span>
|
||||
<span className="hidden text-xs font-medium sm:block">{selectedModel?.name}</span>
|
||||
<ChevronDownIcon size={16} />
|
||||
</SelectPrimitive.Trigger>
|
||||
<PromptInputModelSelectContent className="min-w-[260px] p-0">
|
||||
<div className="flex flex-col gap-px">
|
||||
{chatModels.map((model) => (
|
||||
<SelectItem key={model.id} value={model.name} className="px-3 py-2 text-xs">
|
||||
<div className="flex flex-col min-w-0 flex-1">
|
||||
<div className="font-medium truncate text-xs">
|
||||
<div className="flex flex-col flex-1 gap-1 min-w-0">
|
||||
<div className="text-xs font-medium truncate">
|
||||
{model.name}
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground truncate leading-tight">
|
||||
|
|
@ -473,6 +474,7 @@ function PureModelSelectorCompact({
|
|||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</div>
|
||||
</PromptInputModelSelectContent>
|
||||
</PromptInputModelSelect>
|
||||
);
|
||||
|
|
@ -490,7 +492,7 @@ function PureStopButton({
|
|||
return (
|
||||
<Button
|
||||
data-testid="stop-button"
|
||||
className="size-7 rounded-full bg-foreground p-1 text-background transition-colors duration-200 hover:bg-foreground/90 disabled:bg-muted disabled:text-muted-foreground"
|
||||
className="p-1 rounded-full transition-colors duration-200 size-7 bg-foreground text-background hover:bg-foreground/90 disabled:bg-muted disabled:text-muted-foreground"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
stop();
|
||||
|
|
@ -502,4 +504,4 @@ function PureStopButton({
|
|||
);
|
||||
}
|
||||
|
||||
const StopButton = memo(PureStopButton);
|
||||
const StopButton = memo(PureStopButton);
|
||||
Loading…
Add table
Add a link
Reference in a new issue