feat: implement new chat design

frontend/src/components/home/sections/hero-section.tsx

@@ -329,21 +329,28 @@ export function HeroSection() {
 
                           <div className='flex items-center gap-2'>
                             <ChatDropdown />
-                            <Button
+                            <Tooltip>
-                              type="submit"
+                              <TooltipTrigger asChild>
-                              size="sm"
+                                <Button
-                              className={cn(
+                                  type="submit"
-                                'w-8 h-8 flex-shrink-0 self-end rounded-xl',
+                                  size="sm"
-                                (!inputValue.trim() || isSubmitting) ? 'opacity-50' : '',
+                                  className={cn(
-                              )}
+                                    'w-8 h-8 flex-shrink-0 self-end rounded-xl',
-                              disabled={!inputValue.trim() || isSubmitting}
+                                    (!inputValue.trim() || isSubmitting) ? 'opacity-50' : '',
-                            >
+                                  )}
-                              {isSubmitting ? (
+                                  disabled={!inputValue.trim() || isSubmitting}
-                                <Square className="h-5 w-5" />
+                                >
-                              ) : (
+                                  {isSubmitting ? (
-                                <ArrowUp className="h-5 w-5" />
+                                    <Square className="h-5 w-5" />
-                              )}
+                                  ) : (
-                            </Button>
+                                    <ArrowUp className="h-5 w-5" />
+                                  )}
+                                </Button>
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                <p>Send message</p>
+                              </TooltipContent>
+                            </Tooltip>
                           </div>
                         </div>
                       </div>

frontend/src/components/thread/attachment-group.tsx

@@ -83,7 +83,7 @@ export function AttachmentGroup({
                 initial={{ opacity: 0, height: 0 }}
                 animate={{ opacity: 1, height: 'auto' }}
                 exit={{ opacity: 0, height: 0 }}
-                className={layout === 'inline' ? "mb-3 py-1 px-0.5" : "mt-4"}
+                className={layout === 'inline' ? "" : "mt-4"}
             />
         );
     }
@@ -277,9 +277,9 @@ export function AttachmentGroup({
         } else {
             // For inline layout with pre-computed data
             return (
-                <div className={cn("flex flex-wrap gap-3", className)} style={{ maxHeight }}>
+                <div className={cn("flex flex-wrap gap-3", className)}>
                     {visibleFilesWithMeta.map((item, index) => (
-                        <div key={index} className={cn("relative group", item.wrapperClassName)}>
+                        <div key={index} className={cn("relative group h-[54px]", item.wrapperClassName)}>
                             <FileAttachment
                                 filepath={item.path}
                                 onClick={handleFileClick}
@@ -346,16 +346,18 @@ export function AttachmentGroup({
             <AnimatePresence>
                 <motion.div
                     initial={{ opacity: 0, height: 0 }}
-                    animate={{ opacity: 1, height: 'auto' }}
+                    animate={{
+                        opacity: 1, height: 'auto'
+                    }}
                     exit={{ opacity: 0, height: 0 }}
-                    className={layout === 'inline' ? "mb-3 py-1 px-0.5" : "mt-4"}
+                    className={layout === 'inline' ? "pt-1.5 px-1.5 pb-0" : "mt-4"}
                 >
                     {renderContent()}
                 </motion.div>
-            </AnimatePresence>
+            </AnimatePresence >
 
             {/* Modal dialog to show all files - conditionally rendered based on isModalOpen state */}
-            <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+            < Dialog open={isModalOpen} onOpenChange={setIsModalOpen} >
                 <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
                     <DialogHeader className="mb-1">
                         <DialogTitle>
@@ -481,7 +483,7 @@ export function AttachmentGroup({
                         })()}
                     </div>
                 </DialogContent>
-            </Dialog>
+            </Dialog >
         </>
     );
 } 

frontend/src/components/thread/chat-input/chat-input.tsx

@@ -238,12 +238,12 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
         <FloatingToolPreview
           toolCalls={toolCalls}
           currentIndex={toolCallIndex}
-          onExpand={onExpandToolPreview || (() => {})}
+          onExpand={onExpandToolPreview || (() => { })}
           agentName={agentName}
           isVisible={showToolPreview}
         />
         <Card
-          className="-mb-2 bg-red-400 shadow-none w-full max-w-4xl mx-auto bg-transparent border-none rounded-xl overflow-hidden"
+          className="-mb-2 bg-red-400 shadow-none w-full max-w-4xl mx-auto bg-transparent border-none rounded-3xl overflow-hidden"
           onDragOver={handleDragOver}
           onDragLeave={handleDragLeave}
           onDrop={(e) => {
@@ -265,7 +265,7 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
           }}
         >
           <div className="w-full text-sm flex flex-col justify-between items-start rounded-lg">
-            <CardContent className={`w-full p-1.5 pb-2 ${bgColor} rounded-2xl border`}>
+            <CardContent className={`w-full p-1.5 pb-2 ${bgColor} rounded-3xl border`}>
               <AttachmentGroup
                 files={uploadedFiles || []}
                 sandboxId={sandboxId}

frontend/src/components/thread/chat-input/file-upload-handler.tsx

@@ -249,9 +249,9 @@ export const FileUploadHandler = forwardRef<
               <Button
                 type="button"
                 onClick={handleFileUpload}
-                variant="ghost"
+                variant="outline"
-                size="default"
+                size="sm"
-                className="h-7 rounded-md text-muted-foreground"
+                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={
                   loading || (disabled && !isAgentRunning) || isUploading
                 }
@@ -261,6 +261,7 @@ export const FileUploadHandler = forwardRef<
                 ) : (
                   <Paperclip className="h-4 w-4" />
                 )}
+                <span className="text-sm">Attach</span>
               </Button>
             </TooltipTrigger>
             <TooltipContent side="top">

frontend/src/components/thread/chat-input/message-input.tsx

@@ -123,9 +123,9 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
     };
 
     return (
-      <div className="relative flex flex-col w-full h-auto gap-4 justify-between">
+      <div className="relative flex flex-col w-full h-full gap-2 justify-between">
 
-        <div className="flex flex-col gap-2 items-center px-2">
+        <div className="flex flex-col gap-1 px-2">
           <Textarea
             ref={ref}
             value={value}
@@ -133,16 +133,16 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
             onKeyDown={handleKeyDown}
             placeholder={placeholder}
             className={cn(
-              'w-full bg-transparent dark:bg-transparent border-none shadow-none focus-visible:ring-0 px-2 py-1 text-base min-h-[40px] max-h-[200px] overflow-y-auto resize-none',
+              'w-full bg-transparent dark:bg-transparent border-none shadow-none focus-visible:ring-0 px-0.5 pb-6 pt-4 !text-[15px] min-h-[36px] max-h-[200px] overflow-y-auto resize-none',
               isDraggingOver ? 'opacity-40' : '',
             )}
             disabled={loading || (disabled && !isAgentRunning)}
-            rows={2}
+            rows={1}
           />
         </div>
 
 
-        <div className="flex items-center justify-between mt-1 ml-3 mb-1 pr-2">
+        <div className="flex items-center justify-between mt-0 mb-1 px-2">
           <div className="flex items-center gap-3">
             {!hideAttachments && (
               <FileUploadHandler
@@ -160,7 +160,7 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
             )}
 
           </div>
-          
+
           {subscriptionStatus === 'no_subscription' && !isLocalMode() &&
             <TooltipProvider>
               <Tooltip>
@@ -173,7 +173,7 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
               </Tooltip>
             </TooltipProvider>
           }
-          
+
           <div className='flex items-center gap-2'>
             {/* Show model selector inline if custom agents are disabled, otherwise show settings dropdown */}
             {!customAgentsEnabled || flagsLoading ? (
@@ -200,7 +200,7 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
                 disabled={loading || (disabled && !isAgentRunning)}
               />
             )}
-            
+
             {/* Billing Modal */}
             <BillingModal
               open={billingModalOpen}
@@ -212,14 +212,13 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
               onTranscription={onTranscription}
               disabled={loading || (disabled && !isAgentRunning)}
             />
-            
+
             <Button
               type="submit"
               onClick={isAgentRunning && onStopAgent ? onStopAgent : onSubmit}
               size="sm"
               className={cn(
-                'w-7 h-7 flex-shrink-0 self-end',
+                'w-8 h-8 flex-shrink-0 self-end rounded-xl',
-                isAgentRunning ? 'bg-red-500 hover:bg-red-600' : '',
                 (!value.trim() && uploadedFiles.length === 0 && !isAgentRunning) ||
                   loading ||
                   (disabled && !isAgentRunning)
@@ -233,11 +232,11 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
               }
             >
               {loading ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
+                <Loader2 className="h-5 w-5 animate-spin" />
               ) : isAgentRunning ? (
-                <Square className="h-4 w-4" />
+                <div className="min-h-[14px] min-w-[14px] w-[14px] h-[14px] rounded-sm bg-current" />
               ) : (
-                <ArrowUp className="h-4 w-4" />
+                <ArrowUp className="h-5 w-5" />
               )}
             </Button>
           </div>