From c51f12f88bd97577dff246057743beab019dcd1f Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 15 May 2024 16:31:41 +0530
Subject: [PATCH] (conversation)- taller input field

---
 frontend/src/Hero.tsx                      | 82 ++++++++++++----------
 frontend/src/conversation/Conversation.tsx | 14 ++--
 2 files changed, 52 insertions(+), 44 deletions(-)

diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index 9e489889..b12ec441 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -1,52 +1,60 @@
 import { useDarkTheme, useMediaQuery } from './hooks';
 import DocsGPT3 from './assets/cute_docsgpt3.svg';
-import SourceDropdown from './components/SourceDropdown';
 import { useSelector } from 'react-redux';
-import { selectSourceDocs,selectSelectedDocs,selectConversations,selectModalStateDeleteConv } from './preferences/preferenceSlice';
+import { selectConversations } from './preferences/preferenceSlice';
+import Arrow2 from './assets/dropdown-arrow.svg';
 export default function Hero({ className = '' }: { className?: string }) {
   // const isMobile = window.innerWidth <= 768;
   const { isMobile } = useMediaQuery();
   const [isDarkTheme] = useDarkTheme();
-  const docs = useSelector(selectSourceDocs);
-  const selectedDocs = useSelector(selectSelectedDocs);
   const conversations = useSelector(selectConversations);
-  const modalStateDeleteConv = useSelector(selectModalStateDeleteConv);
   return (
     <div
-      className={`mt-14 mb-4 flex flex-col justify-end text-black-1000 dark:text-bright-gray lg:mt-6`}
+      className={`mt-14 mb-4 flex w-11/12 sm:w-7/12 flex-col justify-end text-black-1000 dark:text-bright-gray lg:mt-6`}
     >
-      <div className='h-full flex flex-col items-center justify-center'>
-        <div>
-          <span className='font-semibold text-4xl p-0'>DocsGPT</span>
-          <img className='inline p-0 w-14 ml-2 mb-4' src={DocsGPT3} alt='docsgpt'/>
+      <div className="flex h-full w-full flex-col items-center justify-center">
+        <div className="flex items-center">
+          <span className="p-0 text-4xl font-semibold">DocsGPT</span>
+          <img className="mb-1 inline w-14 p-0" src={DocsGPT3} alt="docsgpt" />
         </div>
-       {/*  <SourceDropdown
-                options={docs}
-                selectedDocs={selectedDocs}
-                setSelectedDocs={setSelectedDocs}
-                isDocsListOpen={isDocsListOpen}
-                setIsDocsListOpen={setIsDocsListOpen}
-                handleDeleteClick={handleDeleteClick}
-              /> */}
-      </div>
-      <div className='grid grid-cols-1 lg:grid-cols-2 items-center gap-3 sm:gap-6 text-xs md:text-sm'>
-        <div className='border-2 w-full sm:w-112 px-6 py-4 rounded-full border-silver'>
-          <p className='mb-1 font-semibold text-black dark:text-silver'>Chat with your documentation</p>
-          <span className='text-gray-400'>Upload documents and get your answers</span>
-        </div>
-        <div className='border-2 w-full sm:w-112 px-6 py-4 rounded-full border-silver'>
-          <p className='mb-1 font-semibold text-black dark:text-silver'>Chat with your documentation</p>
-          <span className='text-gray-400'>Upload documents and get your answers</span>
-        </div>
-        <div className='border-2 w-full sm:w-112 px-6 py-4 rounded-full border-silver'>
-          <p className='mb-1 font-semibold text-black dark:text-silver'>Chat with your documentation</p>
-          <span className='text-gray-400'>Upload documents and get your answers</span>
-        </div>
-        <div className='border-2 w-full sm:w-112 px-6 py-4 rounded-full border-silver'>
-          <p className='mb-1 font-semibold text-black dark:text-silver'>Chat with your documentation</p>
-          <span className='text-gray-400'>Upload documents and get your answers</span>
+
+        <div className="mb-4 flex flex-col items-center justify-center dark:text-white">
+          
         </div>
       </div>
-    </div>
-  );
+      <div className="grid w-full grid-cols-1 items-center gap-4 self-center text-xs sm:gap-6 md:text-sm  lg:grid-cols-2">
+        <div className="w-full rounded-full border-2 border-silver px-6 py-4">
+          <p className="mb-1 font-semibold text-black dark:text-silver">
+            Chat with your documentation
+          </p>
+          <span className="text-gray-400">
+            Upload documents and get your answers
+          </span>
+        </div>
+        <div className="w-full rounded-full border-2 border-silver px-6 py-4">
+          <p className="mb-1 font-semibold text-black dark:text-silver">
+            Chat with your documentation
+          </p>
+          <span className="text-gray-400">
+            Upload documents and get your answers
+          </span>
+        </div>
+        <div className="w-full rounded-full border-2 border-silver px-6 py-4">
+          <p className="mb-1 font-semibold text-black dark:text-silver">
+            Chat with your documentation
+          </p>
+          <span className="text-gray-400">
+            Upload documents and get your answers
+          </span>
+        </div>
+        <div className="w-full rounded-full border-2 border-silver px-6 py-4">
+          <p className="mb-1 font-semibold text-black dark:text-silver">
+            Chat with your documentation
+          </p>
+          <span className="text-gray-400">
+            Upload documents and get your answers
+          </span>
+        </div>
+      </div>
+    </div>  );
 }
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index f09ec08a..6839d717 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -56,7 +56,7 @@ export default function Conversation() {
         setHasScrolledToLast(entry.isIntersecting);
       });
     };
- 
+
     const observer = new IntersectionObserver(observerCallback, {
       root: null,
       threshold: [1, 0.8],
@@ -134,7 +134,7 @@ export default function Conversation() {
       <div
         onWheel={handleUserInterruption}
         onTouchMove={handleUserInterruption}
-        className="flex w-full justify-center p-4 h-[87vh] overflow-y-auto"
+        className="flex w-full justify-center p-4 h-[86vh] overflow-y-auto"
       >
         {queries.length > 0 && !hasScrolledToLast && (
           <button
@@ -171,8 +171,8 @@ export default function Conversation() {
         {queries.length === 0 && <Hero className="mt-24 md:mt-52"></Hero>}
 
       </div>
-      <div className="bottom-0 flex flex-col items-end self-center bg-white pt-1 dark:bg-raisin-black md:fixed w-11/12 md:w-[60%]">
-        <div className="flex h-full w-full">
+      <div className="bottom-0 flex flex-col items-end self-center bg-white pt-1 dark:bg-raisin-black md:fixed w-11/12 sm:w-6/12">
+        <div className="flex h-full w-full items-center rounded-full border border-silver">
           <div
             id="inputbox"
             ref={inputRef}
@@ -180,7 +180,7 @@ export default function Conversation() {
             placeholder="Type your message here..."
             contentEditable
             onPaste={handlePaste}
-            className={`border-000000 max-h-24 min-h-[2.6rem] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-3xl border bg-white py-2 pl-4 pr-9 text-base leading-7 opacity-100 focus:outline-none dark:bg-raisin-black dark:text-bright-gray`}
+            className={`max-h-24 min-h-[3.8rem] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-white py-2 pl-4 pr-9 text-base leading-10 opacity-100 focus:outline-none dark:bg-raisin-black dark:text-bright-gray`}
             onKeyDown={(e) => {
               if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
@@ -197,9 +197,9 @@ export default function Conversation() {
               className="relative right-[38px] bottom-[7px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent"
             ></img>
           ) : (
-            <div className="relative right-[43px] bottom-[7px] -mr-[35px] h-[35px] w-[35px] cursor-pointer self-end rounded-full hover:bg-gray-3000">
+            <div className="mx-1 cursor-pointer rounded-full p-4 text-center hover:bg-gray-3000">
               <img
-                className="ml-[9px] mt-[9px] text-white"
+                className="w-6 text-white "
                 onClick={() => {
                   if (inputRef.current?.textContent) {
                     handleQuestion(inputRef.current.textContent);