chore: input box alignment (#1189)

components/domain-checker.tsx

@@ -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>
+  );
+}

components/elements/context.tsx

@@ -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',
+            'inline-flex gap-1 items-center text-sm rounded-md select-none',
-            'bg-background text-foreground',
+            '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>
   );
-};
+};

components/model-selector.tsx

@@ -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>
   );
-}
+}

components/multimodal-input.tsx

@@ -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="flex flex-col flex-1 gap-1 min-w-0">
-              <div className="font-medium truncate text-xs">
+              <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);