From 529ffdb7e3ab1fffef0d450cbdc10b48f06814d6 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Sat, 3 Aug 2024 11:22:33 +0530
Subject: [PATCH] Make Title, Chat Footer Icons larger to ease click, tap on
 Mobile

---
 src/interface/web/app/agents/page.tsx                    | 2 +-
 src/interface/web/app/chat/chat.module.css               | 2 ++
 src/interface/web/app/chat/page.tsx                      | 2 +-
 .../web/app/components/chatInputArea/chatInputArea.tsx   | 9 +++++----
 src/interface/web/app/components/logo/khogLogo.tsx       | 2 +-
 src/interface/web/app/components/navMenu/navMenu.tsx     | 8 ++++----
 .../app/components/sidePanel/chatHistorySidePanel.tsx    | 2 +-
 src/interface/web/app/page.module.css                    | 4 ++--
 src/interface/web/app/page.tsx                           | 2 +-
 src/interface/web/app/search/page.tsx                    | 4 ++--
 src/interface/web/app/share/chat/sharedChat.module.css   | 2 ++
 11 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/interface/web/app/agents/page.tsx b/src/interface/web/app/agents/page.tsx
index 8a9f955a..2d686f5f 100644
--- a/src/interface/web/app/agents/page.tsx
+++ b/src/interface/web/app/agents/page.tsx
@@ -281,7 +281,7 @@ export default function Agents() {
                     />
                 </div>
                 <div className={`mx-auto ${isMobileWidth ? "w-11/12" : "w-1/2"} pt-4`}>
-                    <div className={`pt-4 md:pt-8 flex justify-between align-middle w-full`}>
+                    <div className={`pt-6 md:pt-8 flex justify-between align-middle w-full`}>
                         <h1 className="text-3xl">Agents</h1>
                         <div className="ml-auto float-right border p-2 pt-3 rounded-xl font-bold hover:bg-stone-100 dark:hover:bg-neutral-900">
                             <TooltipProvider>
diff --git a/src/interface/web/app/chat/chat.module.css b/src/interface/web/app/chat/chat.module.css
index 311fc036..72b5c675 100644
--- a/src/interface/web/app/chat/chat.module.css
+++ b/src/interface/web/app/chat/chat.module.css
@@ -105,6 +105,7 @@ div.agentIndicator {
 
     div.chatBox {
         padding: 0;
+        height: min-content;
     }
 }
 
@@ -119,6 +120,7 @@ div.agentIndicator {
 
     div.chatBox {
         padding: 0;
+        height: min-content;
     }
 
     div.chatLayout {
diff --git a/src/interface/web/app/chat/page.tsx b/src/interface/web/app/chat/page.tsx
index 702dc894..54487f45 100644
--- a/src/interface/web/app/chat/page.tsx
+++ b/src/interface/web/app/chat/page.tsx
@@ -256,7 +256,7 @@ export default function Chat() {
                     {
                         !isMobileWidth &&
                         <div className={`text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mr-8`}>
-                            {title && <h2 className={`text-lg text-ellipsis whitespace-nowrap overflow-x-hidden pt-4`}>{title}</h2>}
+                            {title && <h2 className={`text-lg text-ellipsis whitespace-nowrap overflow-x-hidden pt-6`}>{title}</h2>}
                         </div>
                     }
                     <Suspense fallback={<Loading />}>
diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index 0f8f498b..089bc27f 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -372,7 +372,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={`${props.isMobileWidth ? 'w-6 h-6' : 'w-8 h-8'}`} />
+                    <Paperclip className='w-8 h-8' />
                 </Button>
                 <div className="grid w-full gap-1.5 relative">
                     <Textarea
@@ -380,6 +380,7 @@ export default function ChatInputArea(props: ChatInputProps) {
                         className={`border-none w-full h-16 min-h-16 max-h-[128px] md:py-4 rounded-lg resize-none dark:bg-neutral-700 ${props.isMobileWidth ? 'text-md' : 'text-lg'}`}
                         placeholder="Type / to see a list of commands"
                         id="message"
+                        autoFocus={true}
                         value={message}
                         onKeyDown={(e) => {
                             if (e.key === 'Enter' && !e.shiftKey) {
@@ -403,7 +404,7 @@ export default function ChatInputArea(props: ChatInputProps) {
                                         }}
                                         disabled={props.sendDisabled}
                                     >
-                                        <Stop weight='fill' className={`${props.isMobileWidth ? 'w-6 h-6' : 'w-8 h-8'}`} />
+                                        <Stop weight='fill' className='w-8 h-8' />
                                     </Button>
                                 </TooltipTrigger>
                                 <TooltipContent>
@@ -428,7 +429,7 @@ export default function ChatInputArea(props: ChatInputProps) {
                                                 }}
                                                 disabled={props.sendDisabled}
                                             >
-                                                <Microphone weight='fill' className={`${props.isMobileWidth ? 'w-6 h-6' : 'w-8 h-8'}`} />
+                                                <Microphone weight='fill' className='w-8 h-8' />
                                             </Button>
                                         </TooltipTrigger>
                                         <TooltipContent>
@@ -442,7 +443,7 @@ export default function ChatInputArea(props: ChatInputProps) {
                     className={`${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-0 h-auto text-3xl transition transform hover:-translate-y-1`}
                     onClick={onSendMessage}
                     disabled={props.sendDisabled}>
-                    <ArrowCircleUp className={`${props.isMobileWidth ? 'w-6 h-6' : 'w-8 h-8'}`} />
+                    <ArrowCircleUp className='w-8 h-8' />
                 </Button>
             </div >
         </>
diff --git a/src/interface/web/app/components/logo/khogLogo.tsx b/src/interface/web/app/components/logo/khogLogo.tsx
index fcdeb60c..88b0309d 100644
--- a/src/interface/web/app/components/logo/khogLogo.tsx
+++ b/src/interface/web/app/components/logo/khogLogo.tsx
@@ -1,6 +1,6 @@
 export function KhojLogoType() {
     return (
-        <svg width="64" height="auto" viewBox="0 0 442 198" className="fill-zinc-950 dark:fill-zinc-300" xmlns="http://www.w3.org/2000/svg">
+        <svg width="70" height="auto" viewBox="0 0 442 198" className="fill-zinc-950 dark:fill-zinc-300" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_45_75)">
                 <path d="M57.9394 93.0404L67.5396 49.1063C68.7987 49.5268 71.7365 51.9442 74.7267 51.9442C78.5039 51.9442 79.2383 47.4246 86.1631 45.7955C91.6715 44.4817 96.3404 45.4276 99.0684 47.6349C99.0684 47.6349 99.6979 53.6259 101.167 55.4127C102.531 57.0418 104.629 56.4637 104.629 56.4637C107.672 70.8106 114.072 100.661 115.279 105.233C116.8 110.961 110.924 114.114 108.669 119.369C106.413 124.625 94.242 126.884 87.0549 127.62C79.8679 128.356 59.723 119.632 57.9394 117.215C56.1557 114.797 55.3688 109.857 55.1065 105.18C54.8442 101.449 56.8902 95.5104 57.9394 93.0404Z" fill="#FAE80B" />
                 <path d="M57.9394 92.9879L62.2936 74.8046C63.5526 75.2251 66.9626 73.4383 71.4742 69.0764C74.1497 66.4488 79.8678 58.8812 86.0582 55.3601C90.5698 52.785 94.924 54.204 97.5995 56.4112C97.5995 56.4112 100.013 57.6199 102.846 57.6199C104.944 57.6199 104.629 56.4112 104.629 56.4112C107.672 70.7581 114.072 100.608 115.279 105.18C116.8 110.908 110.924 114.062 108.669 119.317C106.413 124.572 94.242 126.832 87.0549 127.568C79.8679 128.303 59.723 119.58 57.9394 117.162C56.1557 114.745 55.3688 109.805 55.1065 105.128C54.8442 101.449 56.8902 95.5104 57.9394 92.9879Z" fill="#FFCC09" />
diff --git a/src/interface/web/app/components/navMenu/navMenu.tsx b/src/interface/web/app/components/navMenu/navMenu.tsx
index c119596a..9f259a2f 100644
--- a/src/interface/web/app/components/navMenu/navMenu.tsx
+++ b/src/interface/web/app/components/navMenu/navMenu.tsx
@@ -81,14 +81,14 @@ export default function NavMenu() {
                         <DropdownMenuTrigger>
                             {
                                 userData ?
-                                    <Avatar className={`h-8 w-8 border-2 ${userData.is_active ? "border-yellow-500" : "border-stone-700 dark:border-stone-300"}`}>
+                                    <Avatar className={`h-10 w-10 border-2 ${userData.is_active ? "border-yellow-500" : "border-stone-700 dark:border-stone-300"}`}>
                                         <AvatarImage src={userData?.photo} alt="user profile" />
                                         <AvatarFallback className="bg-transparent hover:bg-muted">
                                             {userData?.username[0].toUpperCase()}
                                         </AvatarFallback>
                                     </Avatar>
                                     :
-                                    <UserCircle className="h-6 w-6" />
+                                    <UserCircle className="h-10 w-10" />
                             }
                         </DropdownMenuTrigger>
                         <DropdownMenuContent className='gap-2'>
@@ -172,14 +172,14 @@ export default function NavMenu() {
                             <MenubarTrigger>
                                 {
                                     userData ?
-                                        <Avatar className={`h-8 w-8 border-2 ${userData.is_active ? "border-yellow-500" : "border-stone-700 dark:border-stone-300"}`}>
+                                        <Avatar className={`h-10 w-10 border-2 ${userData.is_active ? "border-yellow-500" : "border-stone-700 dark:border-stone-300"}`}>
                                             <AvatarImage src={userData?.photo} alt="user profile" />
                                             <AvatarFallback className="bg-transparent hover:bg-muted">
                                                 {userData?.username[0].toUpperCase()}
                                             </AvatarFallback>
                                         </Avatar>
                                         :
-                                        <UserCircle className="w-8 h-8" />
+                                        <UserCircle className="w-10 h-10" />
                                 }
                             </MenubarTrigger>
                             <MenubarContent align="end" className="rounded-xl gap-2">
diff --git a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
index 2cade4c4..03974b87 100644
--- a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
+++ b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
@@ -670,7 +670,7 @@ export default function SidePanel(props: SidePanelProps) {
                             setEnabled(open);
                         }
                         }>
-                            <DrawerTrigger><Sidebar className="h-6 w-6 mx-2" weight="thin" /></DrawerTrigger>
+                            <DrawerTrigger><Sidebar className="h-8 w-8 mx-2" weight="thin" /></DrawerTrigger>
                             <DrawerContent>
                                 <DrawerHeader>
                                     <DrawerTitle>Sessions and Files</DrawerTitle>
diff --git a/src/interface/web/app/page.module.css b/src/interface/web/app/page.module.css
index 0f02c77a..8de68d0c 100644
--- a/src/interface/web/app/page.module.css
+++ b/src/interface/web/app/page.module.css
@@ -66,7 +66,6 @@ div.chatLayout {
 
 div.chatBox {
     display: grid;
-    height: 100%;
 }
 
 div.titleBar {
@@ -101,6 +100,7 @@ div.sidePanel {
 
     div.chatBox {
         padding: 0;
+        height: min-content;
     }
 }
 
@@ -120,6 +120,7 @@ div.sidePanel {
 
     div.chatBox {
         padding: 0;
+        height: min-content;
     }
 
     div.chatLayout {
@@ -130,5 +131,4 @@ div.sidePanel {
     div.homeGreetings {
         grid-template-rows: auto;
     }
-
 }
diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx
index c81e8576..097020a3 100644
--- a/src/interface/web/app/page.tsx
+++ b/src/interface/web/app/page.tsx
@@ -160,7 +160,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
     }
 
     return (
-        <div className={`${styles.homeGreetings}`}>
+        <div className={`${styles.homeGreetings} w-full md:w-auto`}>
             {
                 showLoginPrompt && (
                     <LoginPrompt
diff --git a/src/interface/web/app/search/page.tsx b/src/interface/web/app/search/page.tsx
index 33b613d8..296b5434 100644
--- a/src/interface/web/app/search/page.tsx
+++ b/src/interface/web/app/search/page.tsx
@@ -213,8 +213,8 @@ export default function Search() {
                 />
             </div>
             <div className={`${styles.searchLayout}`}>
-                <div className="md:w-3/4 sm:w-full mr-auto ml-auto pt-4 md:pt-8">
-                    <div className='p-4 md:w-3/4 sm:w-full mr-auto ml-auto'>
+                <div className="md:w-3/4 sm:w-full mx-auto pt-6 md:pt-8">
+                    <div className='p-4 md:w-3/4 sm:w-full mx-auto'>
                         <div className='flex justify-between items-center border-2 border-muted p-2 gap-4 rounded-lg'>
                             <MagnifyingGlass className='inline m-2 h-4 w-4' />
                             <Input
diff --git a/src/interface/web/app/share/chat/sharedChat.module.css b/src/interface/web/app/share/chat/sharedChat.module.css
index af37473a..6adf821c 100644
--- a/src/interface/web/app/share/chat/sharedChat.module.css
+++ b/src/interface/web/app/share/chat/sharedChat.module.css
@@ -102,6 +102,7 @@ div.agentIndicator {
 
     div.chatBox {
         padding: 0;
+        height: min-content;
     }
 }
 
@@ -116,6 +117,7 @@ div.agentIndicator {
 
     div.chatBox {
         padding: 0;
+        height: min-content;
     }
 
     div.chatLayout {