Make the input area only rounded on the top corners when in mobile view

- Create better styling for the input area buttons, resizing in mobile and creating more even height with a more minimal send button

src/interface/web/app/chat/chat.module.css

@@ -16,7 +16,6 @@ div.main {
 
 div.inputBox {
     border: 1px solid var(--border-color);
-    border-radius: 16px;
     margin-bottom: 20px;
     gap: 12px;
     padding-left: 20px;

src/interface/web/app/chat/page.tsx

@@ -86,7 +86,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
                     incomingMessages={props.streamedMessages}
                 />
             </div>
-            <div className={`${styles.inputBox} shadow-md bg-background align-middle items-center justify-center px-3 dark:bg-neutral-700 dark:border-0 dark:shadow-sm`}>
+            <div className={`${styles.inputBox} shadow-md bg-background align-middle items-center justify-center px-3 dark:bg-neutral-700 dark:border-0 dark:shadow-sm rounded-t-2xl rounded-b-none md:rounded-xl`}>
                 <ChatInputArea
                     agentColor={agentMetadata?.color}
                     isLoggedIn={props.isLoggedIn}

src/interface/web/app/common/colorUtils.ts

@@ -33,7 +33,7 @@ export function convertToBGGradientClass(color: string) {
 
 export function convertToBGClass(color: string) {
     if (tailwindColors.includes(color)) {
-        return `bg-${color}-500 dark:bg-${color}-900`;
+        return `bg-${color}-500 dark:bg-${color}-900 hover:bg-${color}-400 dark:hover:bg-${color}-800`;
     }
     return `bg-background`;
 }

src/interface/web/app/components/chatInputArea/chatInputArea.tsx

@@ -9,6 +9,7 @@ import 'katex/dist/katex.min.css';
 import {
     ArrowCircleUp,
     ArrowRight,
+    ArrowUp,
     Browser,
     ChatsTeardrop,
     GlobeSimple,
@@ -372,7 +373,7 @@ export default function ChatInputArea(props: ChatInputProps) {
                     className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
                     disabled={props.sendDisabled}
                     onClick={handleFileButtonClick}>
-                    <Paperclip className='w-8 h-8' />
+                    <Paperclip className='w-6 h-6 md:w-8 md:h-8' />
                 </Button>
                 <div className="grid w-full gap-1.5 relative">
                     <Textarea
@@ -404,7 +405,7 @@ export default function ChatInputArea(props: ChatInputProps) {
                                         }}
                                         disabled={props.sendDisabled}
                                     >
-                                        <Stop weight='fill' className='w-8 h-8' />
+                                        <Stop weight='fill' className='w-6 h-6 md:w-8 md:h-8' />
                                     </Button>
                                 </TooltipTrigger>
                                 <TooltipContent>
@@ -429,7 +430,7 @@ export default function ChatInputArea(props: ChatInputProps) {
                                                 }}
                                                 disabled={props.sendDisabled}
                                             >
-                                                <Microphone weight='fill' className='w-8 h-8' />
+                                                <Microphone weight='fill' className='w-6 h-6 md:w-8 md:h-8' />
                                             </Button>
                                         </TooltipTrigger>
                                         <TooltipContent>
@@ -440,10 +441,10 @@ export default function ChatInputArea(props: ChatInputProps) {
                         )
                 }
                 <Button
-                    className={`${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-0 mr-1 h-auto text-3xl transition transform hover:-translate-y-1`}
+                    className={`${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-1 h-auto text-3xl transition transform hover:-translate-y-1`}
                     onClick={onSendMessage}
                     disabled={props.sendDisabled}>
-                    <ArrowCircleUp className='w-8 h-8' />
+                    <ArrowUp className='w-4 h-4 md:w-6 md:h-6' weight='bold' />
                 </Button>
             </div >
         </>

src/interface/web/app/page.module.css

@@ -13,7 +13,6 @@ div.suggestions {
 
 div.inputBox {
     border: 1px solid var(--border-color);
-    border-radius: 16px;
     margin-bottom: 20px;
     align-content: center;
 }

src/interface/web/app/page.tsx

@@ -6,7 +6,7 @@ import 'katex/dist/katex.min.css';
 import React, { useEffect, useState } from 'react';
 import useSWR from 'swr';
 import Image from 'next/image';
-import { ClockCounterClockwise } from '@phosphor-icons/react';
+import { ArrowCounterClockwise, ClockCounterClockwise } from '@phosphor-icons/react';
 
 import { Card, CardTitle } from '@/components/ui/card';
 import SuggestionCard from '@/app/components/suggestions/suggestionCard';
@@ -187,7 +187,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
             <div className={`ml-auto mr-auto ${props.isMobileWidth ? 'w-full' : 'w-fit'}`}>
                 {
                     !props.isMobileWidth &&
-                    <div className={`w-full ${styles.inputBox} shadow-lg bg-background align-middle items-center justify-center px-3 py-1 dark:bg-neutral-700 border-stone-100 dark:border-none dark:shadow-none`}>
+                    <div className={`w-full ${styles.inputBox} shadow-lg bg-background align-middle items-center justify-center px-3 py-1 dark:bg-neutral-700 border-stone-100 dark:border-none dark:shadow-none rounded-2xl`}>
                         <ChatInputArea
                             isLoggedIn={props.isLoggedIn}
                             sendMessage={(message) => setMessage(message)}
@@ -225,14 +225,14 @@ function ChatBodyData(props: ChatBodyDataProps) {
                     <button
                         onClick={shuffleSuggestionsCards}
                         className="m-2 p-1.5 rounded-lg dark:hover:bg-[var(--background-color)] hover:bg-stone-100 border border-stone-100 text-sm text-stone-500 dark:text-stone-300 dark:border-neutral-700">
-                        More Ideas <ClockCounterClockwise className='h-4 w-4 inline' />
+                        More Ideas <ArrowCounterClockwise className='h-4 w-4 inline' />
                     </button>
                 </div>
             </div>
             {
                 props.isMobileWidth &&
                 <>
-                    <div className={`${styles.inputBox} pt-1 shadow-[0_-20px_25px_-5px_rgba(0,0,0,0.1)] shadow-[0_-8px_10px_-6px_rgba(0,0,0,0.1)] dark:bg-neutral-700 bg-background align-middle items-center justify-center pb-3 mx-1`}>
+                    <div className={`${styles.inputBox} pt-1 shadow-[0_-20px_25px_-5px_rgba(0,0,0,0.1)] dark:bg-neutral-700 bg-background align-middle items-center justify-center pb-3 mx-1 rounded-t-2xl rounded-b-none`}>
                         <div className="flex gap-2 items-center justify-left pt-1 pb-2 px-10">
                             {agentIcons.map((icon, index) => (
                                 <Card