From 5b5204e364ccbe3cc177a5b303dc5249bad41cb8 Mon Sep 17 00:00:00 2001
From: Vukasin <vukasinkubet@gmail.com>
Date: Thu, 3 Jul 2025 23:40:55 +0200
Subject: [PATCH] feat: new chat input on landing

---
 .../components/home/sections/hero-section.tsx | 160 ++++++++++--------
 .../thread/chat-input/chat-dropdown.tsx       |  97 +++++++++++
 2 files changed, 185 insertions(+), 72 deletions(-)
 create mode 100644 frontend/src/components/thread/chat-input/chat-dropdown.tsx

diff --git a/frontend/src/components/home/sections/hero-section.tsx b/frontend/src/components/home/sections/hero-section.tsx
index 32d280a1..07a5e90d 100644
--- a/frontend/src/components/home/sections/hero-section.tsx
+++ b/frontend/src/components/home/sections/hero-section.tsx
@@ -17,7 +17,6 @@ import { useThreadQuery } from '@/hooks/react-query/threads/use-threads';
 import { generateThreadName } from '@/lib/actions/threads';
 import GoogleSignIn from '@/components/GoogleSignIn';
 import { Input } from '@/components/ui/input';
-import { SubmitButton } from '@/components/ui/submit-button';
 import {
   Dialog,
   DialogContent,
@@ -32,6 +31,13 @@ import { useAccounts } from '@/hooks/use-accounts';
 import { isLocalMode, config } from '@/lib/config';
 import { toast } from 'sonner';
 import { useModal } from '@/hooks/use-modal-store';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Send, ArrowUp, Paperclip } from 'lucide-react';
+import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import ChatDropdown from '@/components/thread/chat-input/chat-dropdown';
 
 // Custom dialog overlay with blur effect
 const BlurredDialogOverlay = () => (
@@ -63,7 +69,6 @@ export function HeroSection() {
 
   // Auth dialog state
   const [authDialogOpen, setAuthDialogOpen] = useState(false);
-  const [authError, setAuthError] = useState<string | null>(null);
 
   useEffect(() => {
     setMounted(true);
@@ -124,7 +129,7 @@ export function HeroSection() {
     try {
       const formData = new FormData();
       formData.append('prompt', inputValue.trim());
-      formData.append('model_name', 'openrouter/deepseek/deepseek-chat'); 
+      formData.append('model_name', 'openrouter/deepseek/deepseek-chat');
       formData.append('enable_thinking', 'false');
       formData.append('reasoning_effort', 'low');
       formData.append('stream', 'true');
@@ -174,37 +179,15 @@ export function HeroSection() {
   };
 
   // Handle Enter key press
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
       e.preventDefault(); // Prevent default form submission
       e.stopPropagation(); // Stop event propagation
       handleSubmit();
     }
   };
 
-  // Handle auth form submission
-  const handleSignIn = async (prevState: any, formData: FormData) => {
-    setAuthError(null);
-    try {
-      // Implement sign in logic here
-      const email = formData.get('email') as string;
-      const password = formData.get('password') as string;
 
-      // Add the returnUrl to the form data for proper redirection
-      formData.append('returnUrl', '/dashboard');
-
-      // Call your authentication function here
-
-      // Return any error state
-      return { message: 'Invalid credentials' };
-    } catch (error) {
-      console.error('Sign in error:', error);
-      setAuthError(
-        error instanceof Error ? error.message : 'An error occurred',
-      );
-      return { message: 'An error occurred during sign in' };
-    }
-  };
 
   return (
     <section id="hero" className="w-full relative overflow-hidden">
@@ -260,7 +243,7 @@ export function HeroSection() {
             {hero.badge}
           </p> */}
 
-          <Link
+          {/* <Link
             href={hero.githubUrl}
             target="_blank"
             rel="noopener noreferrer"
@@ -288,8 +271,8 @@ export function HeroSection() {
                 />
               </svg>
             </span>
-          </Link>
-          <div className="flex flex-col items-center justify-center gap-5">
+          </Link> */}
+          <div className="flex flex-col items-center justify-center gap-5 pt-16">
             <h1 className="text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-medium tracking-tighter text-balance text-center">
               <span className="text-secondary">Suna</span>
               <span className="text-primary">, your AI Employee.</span>
@@ -298,37 +281,76 @@ export function HeroSection() {
               {hero.description}
             </p>
           </div>
-          <div className="flex items-center w-full max-w-xl gap-2 flex-wrap justify-center">
+          <div className="flex items-center w-full max-w-4xl gap-2 flex-wrap justify-center">
             <form className="w-full relative" onSubmit={handleSubmit}>
-              {/* ChatGPT-like input with glow effect */}
+              {/* Input that looks exactly like ChatInput */}
               <div className="relative z-10">
-                <div className="flex items-center rounded-full border border-border bg-background/80 backdrop-blur px-4 shadow-lg transition-all duration-200 hover:border-secondary/50 focus-within:border-secondary/50 focus-within:shadow-[0_0_15px_rgba(var(--secondary),0.3)]">
-                  <input
-                    type="text"
-                    value={inputValue}
-                    onChange={(e) => setInputValue(e.target.value)}
-                    onKeyDown={handleKeyDown}
-                    placeholder={hero.inputPlaceholder}
-                    className="flex-1 h-12 md:h-14 rounded-full px-2 bg-transparent focus:outline-none text-sm md:text-base py-2"
-                    disabled={isSubmitting}
-                  />
-                  <button
-                    type="submit"
-                    className={`rounded-full p-2 md:p-3 transition-all duration-200 ${
-                      inputValue.trim()
-                        ? 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
-                        : 'bg-muted text-muted-foreground'
-                    }`}
-                    disabled={!inputValue.trim() || isSubmitting}
-                    aria-label="Submit"
-                  >
-                    {isSubmitting ? (
-                      <div className="h-4 md:h-5 w-4 md:w-5 border-2 border-secondary-foreground border-t-transparent rounded-full animate-spin" />
-                    ) : (
-                      <ArrowRight className="size-4 md:size-5" />
-                    )}
-                  </button>
-                </div>
+                <Card className="shadow-none w-full max-w-8xl mx-auto bg-transparent border-none rounded-3xl overflow-hidden">
+                  <div className="w-full text-sm flex flex-col justify-between items-start rounded-2xl">
+                    <CardContent className="w-full p-1.5 pb-2 bg-sidebar rounded-3xl border">
+                      <div className="relative flex flex-col w-full h-full gap-2 justify-between">
+                        <div className="flex flex-col gap-1 px-2">
+                          <Textarea
+                            value={inputValue}
+                            onChange={(e) => setInputValue(e.target.value)}
+                            onKeyDown={handleKeyDown}
+                            placeholder="Describe what you need help with..."
+                            className={cn(
+                              'w-full bg-transparent dark:bg-transparent border-none shadow-none focus-visible:ring-0 px-2 pb-6 pt-4 !text-[15px] min-h-[36px] max-h-[200px] overflow-y-auto resize-none'
+                            )}
+                            disabled={isSubmitting}
+                            rows={1}
+                          />
+                        </div>
+
+                        <div className="flex items-center justify-between mt-0 mb-1 px-2">
+                          <div className="flex items-center gap-3">
+                            {/* Attach files button */}
+                            <TooltipProvider>
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <Button
+                                    type="button"
+                                    variant="outline"
+                                    size="sm"
+                                    className="h-8 px-3 py-2 bg-transparent border border-border rounded-xl text-muted-foreground hover:text-foreground hover:bg-accent/50 flex items-center gap-2"
+                                    disabled={isSubmitting}
+                                  >
+                                    <Paperclip className="h-4 w-4" />
+                                    <span className="text-sm">Attach</span>
+                                  </Button>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  <p>Please login to attach files</p>
+                                </TooltipContent>
+                              </Tooltip>
+                            </TooltipProvider>
+                          </div>
+
+
+                          <div className='flex items-center gap-2'>
+                            <ChatDropdown />
+                            <Button
+                              type="submit"
+                              size="sm"
+                              className={cn(
+                                'w-8 h-8 flex-shrink-0 self-end rounded-xl',
+                                (!inputValue.trim() || isSubmitting) ? 'opacity-50' : '',
+                              )}
+                              disabled={!inputValue.trim() || isSubmitting}
+                            >
+                              {isSubmitting ? (
+                                <div className="h-5 w-5 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent" />
+                              ) : (
+                                <ArrowUp className="h-5 w-5" />
+                              )}
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </div>
+                </Card>
               </div>
               {/* Subtle glow effect */}
               <div className="absolute -bottom-4 inset-x-0 h-6 bg-secondary/20 blur-xl rounded-full -z-10 opacity-70"></div>
@@ -336,7 +358,7 @@ export function HeroSection() {
           </div>
         </div>
       </div>
-      <div className="mb-10 max-w-4xl mx-auto">
+      <div className="mb-10 sm:mt-40 max-w-4xl mx-auto">
         <HeroVideoSection />
       </div>
 
@@ -361,13 +383,7 @@ export function HeroSection() {
             </DialogDescription>
           </DialogHeader>
 
-          {/* Auth error message */}
-          {authError && (
-            <div className="mb-4 p-3 rounded-lg flex items-center gap-3 bg-secondary/10 border border-secondary/20 text-secondary">
-              <AlertCircle className="h-5 w-5 flex-shrink-0 text-secondary" />
-              <span className="text-sm font-medium">{authError}</span>
-            </div>
-          )}
+
 
           {/* Google Sign In */}
           <div className="w-full">
@@ -411,13 +427,13 @@ export function HeroSection() {
             </div>
 
             <div className="space-y-4 pt-4">
-              <SubmitButton
-                formAction={handleSignIn}
-                className="w-full h-12 rounded-full bg-primary text-primary-foreground hover:bg-primary/90 transition-all shadow-md"
-                pendingText="Signing in..."
+              <Link
+                href={`/auth?returnUrl=${encodeURIComponent('/dashboard')}`}
+                className="flex h-12 items-center justify-center w-full text-center rounded-full bg-primary text-primary-foreground hover:bg-primary/90 transition-all shadow-md"
+                onClick={() => setAuthDialogOpen(false)}
               >
                 Sign in
-              </SubmitButton>
+              </Link>
 
               <Link
                 href={`/auth?mode=signup&returnUrl=${encodeURIComponent('/dashboard')}`}
diff --git a/frontend/src/components/thread/chat-input/chat-dropdown.tsx b/frontend/src/components/thread/chat-input/chat-dropdown.tsx
new file mode 100644
index 00000000..f8c05043
--- /dev/null
+++ b/frontend/src/components/thread/chat-input/chat-dropdown.tsx
@@ -0,0 +1,97 @@
+import React, { useState } from 'react'
+import { ChevronDown, User, LogIn, Lock, Bot, Zap, Code, FileText } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+const ChatDropdown = () => {
+    const [isOpen, setIsOpen] = useState(false)
+
+    return (
+        <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+            <DropdownMenuTrigger asChild>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    className="px-3 py-2 text-sm font-medium hover:bg-accent"
+                    style={{
+                        borderRadius: '12px'
+                    }}
+                >
+                    <div className="flex items-center gap-2">
+                        <User size={16} />
+                        <span>Suna</span>
+                        <ChevronDown size={14} className="opacity-50" />
+                    </div>
+                </Button>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent
+                align="end"
+                className="w-64 p-0 border"
+                sideOffset={4}
+                style={{
+                    borderRadius: '16px'
+                }}
+            >
+                <DropdownMenuItem
+                    className="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-accent border-b m-0"
+                    style={{
+                        borderRadius: '0'
+                    }}
+                >
+                    <User size={18} />
+                    <div className="flex flex-col">
+                        <span className="font-semibold text-sm">Suna</span>
+                        <span className="text-xs text-muted-foreground">Default</span>
+                    </div>
+                </DropdownMenuItem>
+
+                <div className="relative">
+                    {/* Dummy agents behind the overlay */}
+                    <DropdownMenuItem className="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-accent border-b m-0">
+                        <Bot size={18} />
+                        <div className="flex flex-col">
+                            <span className="font-semibold text-sm">Code Assistant</span>
+                            <span className="text-xs text-muted-foreground">Help with coding</span>
+                        </div>
+                    </DropdownMenuItem>
+
+                    <DropdownMenuItem className="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-accent border-b m-0">
+                        <Zap size={18} />
+                        <div className="flex flex-col">
+                            <span className="font-semibold text-sm">Quick Writer</span>
+                            <span className="text-xs text-muted-foreground">Fast content creation</span>
+                        </div>
+                    </DropdownMenuItem>
+
+                    <DropdownMenuItem className="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-accent m-0">
+                        <FileText size={18} />
+                        <div className="flex flex-col">
+                            <span className="font-semibold text-sm">Document Helper</span>
+                            <span className="text-xs text-muted-foreground">Analyze documents</span>
+                        </div>
+                    </DropdownMenuItem>
+
+                    {/* Overlay like the upgrade component */}
+                    <div className="absolute inset-0 bg-gradient-to-t from-background via-background/95 to-transparent flex items-end justify-center">
+                        <div className="w-full p-3">
+                            <div className="rounded-xl bg-gradient-to-br from-slate-50/80 to-slate-100/70 dark:from-slate-900/40 dark:to-slate-800/30 shadow-sm border border-slate-200/50 dark:border-slate-700/50 p-3">
+                                <div className="flex items-center justify-center">
+                                    <Lock className="h-4 w-4 text-slate-500 mr-2 flex-shrink-0" />
+                                    <p className="text-sm font-medium">Login to explore all agents</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}
+
+export default ChatDropdown
\ No newline at end of file