Merge branch 'main' of https://github.com/utin-francis-peter/DocsGPT into feat/issue#1017

frontend/package-lock.json

@@ -11,6 +11,7 @@
         "@reduxjs/toolkit": "^1.9.2",
         "@vercel/analytics": "^0.1.10",
         "i18next": "^23.11.5",
+        "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-copy-to-clipboard": "^5.1.0",
         "react-dom": "^18.2.0",
@@ -1488,7 +1489,7 @@
       "version": "18.0.10",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz",
       "integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -6606,6 +6607,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",

frontend/package.json

@@ -22,6 +22,7 @@
     "@reduxjs/toolkit": "^1.9.2",
     "@vercel/analytics": "^0.1.10",
     "i18next": "^23.11.5",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",

frontend/src/Hero.tsx

@@ -19,7 +19,7 @@ export default function Hero({
   }>;
   return (
     <div
-      className={`mt-14 mb-4 flex w-full flex-col justify-end text-black-1000 dark:text-bright-gray sm:w-full lg:mt-6`}
+      className={`mt-16 mb-4 flex w-full flex-col justify-end text-black-1000 dark:text-bright-gray sm:w-full lg:mt-6`}
     >
       <div className="flex h-full w-full flex-col items-center justify-center">
         <div className="flex items-center">

frontend/src/conversation/Conversation.tsx

@@ -187,11 +187,11 @@ export default function Conversation() {
   // console.log('inputRef: ', inputRef);
 
   return (
-    <div className="flex h-screen flex-col gap-1">
+    <div className="flex h-screen flex-col gap-7 pb-2">
       <div
         onWheel={handleUserInterruption}
         onTouchMove={handleUserInterruption}
-        className="flex h-[90%] w-full justify-center overflow-y-auto p-4 md:h-[83vh]"
+        className="flex h-[90%] w-full flex-1 justify-center overflow-y-auto p-4 md:h-[83vh]"
       >
         {queries.length > 0 && !hasScrolledToLast && (
           <button
@@ -230,8 +230,8 @@ export default function Conversation() {
         {queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
       </div>
 
-      <div className="bottom-safe fixed flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-6/12">
-        <div className="flex h-full w-full items-center rounded-full border border-silver bg-white dark:bg-raisin-black">
+      <div className="flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-6/12">
+        <div className="flex h-full w-full items-center rounded-[40px] border border-silver bg-white py-1 dark:bg-raisin-black">
           <TextArea
             value={prompt}
             isAutoFocused
@@ -244,7 +244,7 @@ export default function Conversation() {
                 handleQuestionSubmission();
               }
             }}
-          ></TextArea>{' '}
+          ></TextArea>
           {status === 'loading' ? (
             <img
               src={isDarkTheme ? SpinnerDark : Spinner}

frontend/src/conversation/ConversationBubble.tsx

@@ -42,7 +42,7 @@ const ConversationBubble = forwardRef<
     bubble = (
       <div ref={ref} className={`flex flex-row-reverse self-end ${className}`}>
         <Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
-        <div className="ml-10 mr-2 flex items-center rounded-3xl bg-purple-30 p-3.5 text-white">
+        <div className="ml-10 mr-2 flex items-center rounded-[28px] bg-purple-30 py-[14px] px-[19px] text-white">
           <ReactMarkdown className="whitespace-pre-wrap break-normal leading-normal">
             {message}
           </ReactMarkdown>
@@ -68,7 +68,7 @@ const ConversationBubble = forwardRef<
           />
 
           <div
-            className={`ml-2 mr-5 flex max-w-[90vw] rounded-3xl bg-gray-1000 p-3.5 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
+            className={`ml-2 mr-5 flex max-w-[90vw] rounded-[28px] bg-gray-1000 py-[14px] px-7 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
               type === 'ERROR'
                 ? 'relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000  dark:border-red-2000 dark:text-white'
                 : 'flex-col rounded-3xl'

frontend/src/index.css

@@ -408,7 +408,3 @@ template {
 ::-webkit-scrollbar {
   width: 0;
 }
-
-.bottom-safe {
-  bottom: env(safe-area-inset-bottom, 0);
-}

frontend/src/upload/Upload.tsx

@@ -56,7 +56,7 @@ function Upload({
     }
   }, []);
 
-  function ProgressBar({ progress }: { progress: number }) {
+  function ProgressBar({ progressPercent }: { progressPercent: number }) {
     return (
       <div className="my-5 w-[50%]">
         <div
@@ -66,9 +66,9 @@ function Upload({
             className={`h-full border-none p-1 w-${
               progress || 0
             }%  flex items-center justify-center bg-purple-30 outline-none transition-all`}
-            style={{ width: `${progress || 0}%` }}
+            style={{ width: `${progressPercent || 0}%` }}
           >
-            {progress >= 5 && `${progress}%`}
+            {progressPercent >= 5 && `${progressPercent}%`}
           </div>
         </div>
       </div>
@@ -94,7 +94,7 @@ function Upload({
         {/* <p className="mt-10 text-2xl">{progress?.percentage || 0}%</p> */}
 
         {/* progress bar */}
-        <ProgressBar progress={progress?.percentage as number} />
+        <ProgressBar progressPercent={progress?.percentage as number} />
 
         <button
           onClick={() => {