Improve structure of chat footer on mobile to put agents above input

src/interface/web/app/page.tsx

@@ -242,16 +242,9 @@ function ChatBodyData(props: ChatBodyDataProps) {
             </div>
             {
                 props.isMobileWidth &&
-                <div className={`${styles.inputBox} shadow-md dark:bg-neutral-700 bg-background dark: align-middle items-center justify-center py-3 px-1`}>
+                <>
-                    <ChatInputArea
+                    <div className={`${styles.inputBox} w-full shadow-md dark:bg-neutral-700 bg-background align-middle items-center justify-center pb-3 px-1`}>
-                        isLoggedIn={props.isLoggedIn}
+                        <div className="flex gap-2 items-center justify-left pt-2 pb-4 px-10">
-                        sendMessage={(message) => setMessage(message)}
-                        sendDisabled={processingMessage}
-                        chatOptionsData={props.chatOptionsData}
-                        conversationId={null}
-                        isMobileWidth={props.isMobileWidth}
-                        setUploadedFiles={props.setUploadedFiles} />
-                    <div className="flex gap-2 items-center justify-left pt-4">
                             {agentIcons.map((icon, index) => (
                                 <Card
                                     key={`${index}-${agents[index].slug}`}
@@ -269,7 +262,16 @@ function ChatBodyData(props: ChatBodyDataProps) {
                                 <CardTitle className={`text-center ${props.isMobileWidth ? 'text-xs' : 'text-md'} font-normal flex justify-center items-center px-1.5 py-2`}>See All →</CardTitle>
                             </Card>
                         </div>
+                        <ChatInputArea
+                            isLoggedIn={props.isLoggedIn}
+                            sendMessage={(message) => setMessage(message)}
+                            sendDisabled={processingMessage}
+                            chatOptionsData={props.chatOptionsData}
+                            conversationId={null}
+                            isMobileWidth={props.isMobileWidth}
+                            setUploadedFiles={props.setUploadedFiles} />
                     </div>
+                </>
             }
         </div>
     );