OpenAI Icon Light

'use client'; import { ArrowRight, Bot, Check, ChevronDown, Paperclip } from 'lucide-react'; import { AnimatePresence, motion } from 'motion/react'; import { useState } from 'react'; import { Button } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { Textarea } from '@/components/ui/textarea'; import { useAutoResizeTextarea } from '@/hooks/use-auto-resize-textarea'; import { cn } from '@/lib/utils'; const OPENAI_SVG = (

); export default function AI_Prompt() { const [value, setValue] = useState(''); const { textareaRef, adjustHeight } = useAutoResizeTextarea({ minHeight: 72, maxHeight: 300, }); const [selectedModel, setSelectedModel] = useState('Claude 4.5 Sonnet'); const AI_MODELS = [ 'Gemini 3', 'GPT-5-mini', 'Claude 4.5 Sonnet', 'GPT-5-1 Mini', 'GPT-5-1', ]; const MODEL_ICONS: Record = { 'GPT-5-mini': OPENAI_SVG, 'GPT-5-1 Mini': OPENAI_SVG, 'GPT-5-1': OPENAI_SVG, 'Gemini 3': ( ), 'Claude 4.5 Sonnet': (

), }; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); if (!value.trim()) return; // Submit here if needed setValue(''); adjustHeight(true); } }; const hasText = value.trim().length > 0; return (

{/* Top accent line + glows */}

{/* Header */}

AI Workspace Anthropic is free this weekend · ship something fun

{/* Input area */}

{/* Textarea */}

{
                setValue(e.target.value);
                adjustHeight();
              }}
              onKeyDown={handleKeyDown}
              placeholder="Ask anything, or paste code for a quick review..."
              className={cn(
                'w-full resize-none border-none bg-transparent px-3.5 py-3 text-sm',
                'placeholder:text-zinc-500 dark:placeholder:text-zinc-400',
                'focus-visible:ring-0 focus-visible:ring-offset-0',
                'min-h-[72px]',
              )}
            />
          </div>

{/* Footer bar */}
          <div className="relative flex h-12 items-center bg-black/5 px-2 dark:bg-white/5">
            <div className="flex w-full items-center justify-between gap-2">
              {/* Left controls */}
              <div className="flex items-center gap-2">
                {/* Model selector */}
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button
                      variant="ghost"
                      className={cn(
                        'flex h-8 items-center gap-1 rounded-full border border-black/5 px-2.5 text-[11px] font-medium',
                        'bg-white/60 hover:bg-white/90 dark:bg-zinc-900/60 dark:hover:bg-zinc-900/90',
                        'text-zinc-800 dark:text-zinc-50',
                      )}
                    >
                      <AnimatePresence mode="wait">
                        <motion.div
                          key={selectedModel}
                          initial={{ opacity: 0, y: 4 }}
                          animate={{ opacity: 1, y: 0 }}
                          exit={{ opacity: 0, y: -4 }}
                          transition={{ duration: 0.15 }}
                          className="flex items-center gap-1.5"
                        >
                          <div className="flex h-4 w-4 items-center justify-center">
                            {MODEL_ICONS[selectedModel] ?? (
                              <Bot className="h-3.5 w-3.5 opacity-70" />
                            )}
                          </div>
                          <span className="max-w-[110px] truncate">
                            {selectedModel}
                          </span>
                          <ChevronDown className="h-3.5 w-3.5 opacity-50" />
                        </motion.div>
                      </AnimatePresence>
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent
                    className={cn(
                      'min-w-[12rem] rounded-xl border border-black/10 dark:border-white/10',
                      'bg-gradient-to-b from-white via-white to-zinc-100 dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-900',
                      'shadow-lg',
                    )}
                  >
                    {AI_MODELS.map((model) => (
                      <DropdownMenuItem
                        key={model}
                        onSelect={() => setSelectedModel(model)}
                        className="flex items-center justify-between gap-2 text-[13px]"
                      >
                        <div className="flex items-center gap-2">
                          {MODEL_ICONS[model] ?? (
                            <Bot className="h-4 w-4 opacity-60" />
                          )}
                          <span>{model}</span>
                        </div>
                        {selectedModel === model && (
                          <Check className="h-4 w-4 text-blue-500" />
                        )}
                      </DropdownMenuItem>
                    ))}
                  </DropdownMenuContent>
                </DropdownMenu>

{/* Divider */}
                <div className="h-4 w-px bg-black/10 dark:bg-white/10" />

{/* Attach */}
                <label
                  aria-label="Attach file"
                  className={cn(
                    'flex h-8 w-8 items-center justify-center rounded-full',
                    'bg-black/5 text-black/40 dark:bg-white/5 dark:text-white/40',
                    'hover:bg-black/10 hover:text-black dark:hover:bg-white/10 dark:hover:text-white',
                    'cursor-pointer transition-colors',
                  )}
                >
                  <input type="file" className="hidden" />
                  <Paperclip className="h-4 w-4" />
                </label>
              </div>

{/* Send button */}
              <motion.button
                type="button"
                aria-label="Send message"
                disabled={!hasText}
                className={cn(
                  'flex h-8 w-8 items-center justify-center rounded-full',
                  'bg-black/5 dark:bg-white/5',
                  'hover:bg-black/10 dark:hover:bg-white/10',
                  'focus-visible:ring-1 focus-visible:ring-blue-500 focus-visible:ring-offset-0 focus-visible:outline-none',
                  !hasText && 'cursor-default opacity-40',
                )}
                animate={
                  hasText
                    ? { scale: [1, 1.05, 1], y: [0, -0.5, 0] }
                    : { scale: 1, y: 0 }
                }
                transition={
                  hasText
                    ? { duration: 1.2, repeat: Infinity, ease: 'easeInOut' }
                    : { duration: 0.2 }
                }
                onClick={() => {
                  if (!hasText) return;
                  setValue('');
                  adjustHeight(true);
                }}
              >
                <ArrowRight className="h-4 w-4 text-zinc-900 dark:text-zinc-50" />
              </motion.button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
</article></body></html>

AI Prompt

Installation

Usage