From e133c29b2c1f67e6cd0ce90b217d774be12dbd21 Mon Sep 17 00:00:00 2001
From: Alex <a@tushynski.me>
Date: Sat, 9 Nov 2024 18:46:31 +0000
Subject: [PATCH 01/11] feat: widget bounciness

---
 .../src/components/DocsGPTWidget.tsx          | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx
index 699803598..6588ccc5c 100644
--- a/extensions/react-widget/src/components/DocsGPTWidget.tsx
+++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx
@@ -99,7 +99,7 @@ const WidgetContainer = styled.div<{ modal?: boolean, isOpen?: boolean }>`
         transform: scale(1.02); 
       }
       100% {
-        transform: scale(0);
+        transform: scale(0.45);
       }
     }
 `;
@@ -127,7 +127,7 @@ const StyledContainer = styled.div`
     overflow: auto;
     }
 `;
-const FloatingButton = styled.div<{ bgcolor: string, hidden: boolean }>`
+const FloatingButton = styled.div<{ bgcolor: string, hidden: boolean, isAnimatingButton: boolean }>`
     position: fixed;
     display: ${props => props.hidden ? "none" : "flex"};
     z-index: 500;
@@ -144,9 +144,22 @@ const FloatingButton = styled.div<{ bgcolor: string, hidden: boolean }>`
     background: ${props => props.bgcolor};
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     cursor: pointer;
+    animation: ${props => props.isAnimatingButton ? 'scaleAnimation 200ms forwards' : 'none'};
     &:hover {
-        transform: scale(1.1);
-        transition: transform 0.2s ease-in-out;
+      transform: scale(1.1);
+      transition: transform 0.2s ease-in-out;
+    }
+    &:not(:hover) {
+      transition: transform 0.2s ease-in-out;
+    }
+
+    @keyframes scaleAnimation {
+      from {
+      transform: scale(1.2);
+      }
+      to {
+      transform: scale(1);
+      }
     }
 `;
 const CancelButton = styled.button`
@@ -433,6 +446,8 @@ export const DocsGPTWidget = ({
   const [conversationId, setConversationId] = React.useState<string | null>(null)
   const [open, setOpen] = React.useState<boolean>(deafultOpen)
   const [eventInterrupt, setEventInterrupt] = React.useState<boolean>(false); //click or scroll by user while autoScrolling
+  const [isAnimatingButton, setIsAnimatingButton] = React.useState(false);
+  const [isFloatingButtonVisible, setIsFloatingButtonVisible] = React.useState(true);
   const isBubbleHovered = useRef<boolean>(false)
   const widgetRef = useRef<HTMLDivElement>(null)
   const endMessageRef = React.useRef<HTMLDivElement | null>(null);
@@ -549,14 +564,17 @@ export const DocsGPTWidget = ({
   const handleClose = () => {
     setOpen(false);
     size !== "large" ? setTimeout(() => {
-      if (widgetRef.current)
-        widgetRef.current.style.display = "none"
+      if (widgetRef.current) widgetRef.current.style.display = "none";
+      setIsFloatingButtonVisible(true);
+      setIsAnimatingButton(true);
+      setTimeout(() => setIsAnimatingButton(false), 200);
     }, 250)
       :
       widgetRef.current && (widgetRef.current.style.display = "none")
   };
   const handleOpen = () => {
     setOpen(true);
+    setIsFloatingButtonVisible(false);
     if (widgetRef.current)
       widgetRef.current.style.display = 'block'
   }
@@ -570,7 +588,7 @@ export const DocsGPTWidget = ({
       {open && size === 'large' &&
         <Overlay onClick={handleClose} />
       }
-      <FloatingButton bgcolor={buttonBg} onClick={handleOpen} hidden={open}>
+      <FloatingButton bgcolor={buttonBg} onClick={handleOpen} hidden={!isFloatingButtonVisible} isAnimatingButton={isAnimatingButton}>
         <img width={24} src={buttonIcon} />
         <span>{buttonText}</span>
       </FloatingButton>

From eddafcfdfba3526117a0f8bfc3eea1f827ba2be2 Mon Sep 17 00:00:00 2001
From: Alex <a@tushynski.me>
Date: Sun, 10 Nov 2024 14:27:07 +0000
Subject: [PATCH 02/11] fix: morphing feel

---
 .../src/components/DocsGPTWidget.tsx          | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx
index 6588ccc5c..e3cf72245 100644
--- a/extensions/react-widget/src/components/DocsGPTWidget.tsx
+++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx
@@ -99,16 +99,23 @@ const WidgetContainer = styled.div<{ modal?: boolean, isOpen?: boolean }>`
         transform: scale(1.02); 
       }
       100% {
-        transform: scale(0.45);
+        transform: scale(0.6);
       }
     }
 `;
-const StyledContainer = styled.div`
+const StyledContainer = styled.div<{ isOpen: boolean }>`
     all: initial;
     max-height: ${(props) => props.theme.dimensions.maxHeight};
     max-width: ${(props) => props.theme.dimensions.maxWidth};
-    height: ${(props) => props.theme.dimensions.height} ;
-    width: ${(props) => props.theme.dimensions.width} ;
+    height: ${(props) => props.theme.dimensions.height};
+    width: ${(props) => props.theme.dimensions.width};
+    ${({ isOpen }) =>
+      !isOpen &&
+      `
+        width: 200px;
+        height: 100px;
+        border-radius: 50%;        
+      `}
     display: flex;
     position: relative;
     flex-direction: column;
@@ -119,7 +126,7 @@ const StyledContainer = styled.div`
     background-color: ${props => props.theme.primary.bg};
     font-family: sans-serif;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.1);
-    transition: visibility 0.3s, opacity 0.3s;
+    transition: all 0.3s ease-in-out;
     padding: 26px 26px 0px 26px ;
     @media only screen and (max-width: 768px) {
     max-height: 100vh ;
@@ -593,7 +600,7 @@ export const DocsGPTWidget = ({
         <span>{buttonText}</span>
       </FloatingButton>
       <WidgetContainer ref={widgetRef} className={`${size != "large" && (open ? "open" : "close")}`} modal={size == 'large'}>
-        {<StyledContainer>
+        {<StyledContainer isOpen={open}>
           <div>
             <CancelButton onClick={handleClose}>
               <Cross2Icon width={24} height={24} color={theme === 'light' ? 'black' : 'white'} />

From ba1c0ab6fb93658b2575388b1b76fe90bcba19c1 Mon Sep 17 00:00:00 2001
From: Alex <a@tushynski.me>
Date: Sun, 10 Nov 2024 16:36:14 +0000
Subject: [PATCH 03/11] fix: large closing

---
 extensions/react-widget/src/components/DocsGPTWidget.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx
index e3cf72245..c74d658f6 100644
--- a/extensions/react-widget/src/components/DocsGPTWidget.tsx
+++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx
@@ -577,7 +577,7 @@ export const DocsGPTWidget = ({
       setTimeout(() => setIsAnimatingButton(false), 200);
     }, 250)
       :
-      widgetRef.current && (widgetRef.current.style.display = "none")
+      widgetRef.current && (widgetRef.current.style.display = "none") && setIsFloatingButtonVisible(true);
   };
   const handleOpen = () => {
     setOpen(true);

From d4b409e166ac42f5bc3f144e88686aa04fca6346 Mon Sep 17 00:00:00 2001
From: Alex <a@tushynski.me>
Date: Sun, 10 Nov 2024 18:46:26 +0000
Subject: [PATCH 04/11] fix: align buttons

---
 frontend/src/conversation/Conversation.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index a8326da71..1754e6800 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -218,7 +218,7 @@ export default function Conversation() {
       {conversationId && queries.length > 0 && (
         <div className="absolute top-4 right-20 z-20 ">
           {' '}
-          <div className="flex items-center gap-4 ">
+          <div className="flex mt-2 items-center gap-4 ">
             {isMobile && queries.length > 0 && (
               <button
                 title="Open New Chat"

From 84a15ef54d5741c8b2a91d4e7f55aed8d3fe3390 Mon Sep 17 00:00:00 2001
From: Alex <a@tushynski.me>
Date: Sun, 10 Nov 2024 19:38:48 +0000
Subject: [PATCH 05/11] fix: z-index sidebar bug

---
 frontend/src/conversation/Conversation.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 1754e6800..bd9b84960 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -216,7 +216,7 @@ export default function Conversation() {
   return (
     <div className="flex flex-col gap-1 h-full justify-end ">
       {conversationId && queries.length > 0 && (
-        <div className="absolute top-4 right-20 z-20 ">
+        <div className="absolute top-4 right-20 z-10 ">
           {' '}
           <div className="flex mt-2 items-center gap-4 ">
             {isMobile && queries.length > 0 && (

From dfc3cdd5d471edcf1312eccfe8fdfea0fb7864ce Mon Sep 17 00:00:00 2001
From: Alex <a@tushynski.me>
Date: Sun, 10 Nov 2024 21:53:10 +0000
Subject: [PATCH 06/11] fix: open cooler morph

---
 .../src/components/DocsGPTWidget.tsx          | 50 ++++++++++++-------
 1 file changed, 33 insertions(+), 17 deletions(-)

diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx
index c74d658f6..9a4845275 100644
--- a/extensions/react-widget/src/components/DocsGPTWidget.tsx
+++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx
@@ -81,7 +81,7 @@ const WidgetContainer = styled.div<{ modal?: boolean, isOpen?: boolean }>`
     text-align: left;
     @keyframes createBox {
       0% {
-        transform: scale(0.5);
+        transform: scale(0.6);
       }
       90% {
         transform: scale(1.02);
@@ -107,31 +107,47 @@ const StyledContainer = styled.div<{ isOpen: boolean }>`
     all: initial;
     max-height: ${(props) => props.theme.dimensions.maxHeight};
     max-width: ${(props) => props.theme.dimensions.maxWidth};
-    height: ${(props) => props.theme.dimensions.height};
-    width: ${(props) => props.theme.dimensions.width};
-    ${({ isOpen }) =>
-      !isOpen &&
-      `
-        width: 200px;
-        height: 100px;
-        border-radius: 50%;        
-      `}
-    display: flex;
     position: relative;
     flex-direction: column;
     justify-content: space-between;
     bottom: 0;
     left: 0;
-    border-radius: 12px;
     background-color: ${props => props.theme.primary.bg};
     font-family: sans-serif;
+    display: flex;
+    border-radius: 12px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease-in-out;
-    padding: 26px 26px 0px 26px ;
+    padding: 26px 26px 0px 26px;
+    animation: ${({ isOpen }) =>
+      isOpen
+      ? 'openContainer 150ms ease-in forwards'
+      : 'closeContainer 250ms ease-in forwards'};
+    @keyframes openContainer {
+      0% {
+        width: 200px;
+        height: 100px;
+      }
+      100% {
+        width: ${(props) => props.theme.dimensions.width};
+        height: ${(props) => props.theme.dimensions.height};
+        border-radius: 12px;
+      }
+    }
+    @keyframes closeContainer {
+      0% {
+        width: ${(props) => props.theme.dimensions.width};
+        height: ${(props) => props.theme.dimensions.height};
+        border-radius: 12px;
+      }
+      100% {
+        width: 200px;
+        height: 100px;
+      }
+    }
     @media only screen and (max-width: 768px) {
-    max-height: 100vh ;
-    max-width: 80vw;
-    overflow: auto;
+      max-height: 100vh;
+      max-width: 80vw;
+      overflow: auto;
     }
 `;
 const FloatingButton = styled.div<{ bgcolor: string, hidden: boolean, isAnimatingButton: boolean }>`

From e475a4cc7c1f49d3e662cc144e1f1260a1d6700e Mon Sep 17 00:00:00 2001
From: Alex <a@tushynski.me>
Date: Sun, 10 Nov 2024 22:11:20 +0000
Subject: [PATCH 07/11] fix: large size animation

---
 .../src/components/DocsGPTWidget.tsx          | 36 ++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx
index 9a4845275..c9afebf60 100644
--- a/extensions/react-widget/src/components/DocsGPTWidget.tsx
+++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx
@@ -112,16 +112,20 @@ const StyledContainer = styled.div<{ isOpen: boolean }>`
     justify-content: space-between;
     bottom: 0;
     left: 0;
-    background-color: ${props => props.theme.primary.bg};
+    background-color: ${(props) => props.theme.primary.bg};
     font-family: sans-serif;
     display: flex;
     border-radius: 12px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.1);
     padding: 26px 26px 0px 26px;
-    animation: ${({ isOpen }) =>
-      isOpen
-      ? 'openContainer 150ms ease-in forwards'
-      : 'closeContainer 250ms ease-in forwards'};
+    animation: ${({ isOpen, theme }) =>
+      theme.dimensions.size === 'large'
+        ? isOpen
+          ? 'fadeIn 150ms ease-in forwards'
+          : 'fadeOut 150ms ease-in forwards'
+        : isOpen
+        ? 'openContainer 150ms ease-in forwards'
+        : 'closeContainer 250ms ease-in forwards'};
     @keyframes openContainer {
       0% {
         width: 200px;
@@ -144,6 +148,28 @@ const StyledContainer = styled.div<{ isOpen: boolean }>`
         height: 100px;
       }
     }
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        width: ${(props) => props.theme.dimensions.width};
+        height: ${(props) => props.theme.dimensions.height};
+        transform: scale(0.9);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+        width: ${(props) => props.theme.dimensions.width};
+        height: ${(props) => props.theme.dimensions.height};
+      }
+    }
+    @keyframes fadeOut {
+      from {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+      }
+    }
     @media only screen and (max-width: 768px) {
       max-height: 100vh;
       max-width: 80vw;

From c6dc1675d89f74ddec6f230b24c6883b54965ea5 Mon Sep 17 00:00:00 2001
From: Alex <a@tushynski.me>
Date: Sun, 10 Nov 2024 22:13:48 +0000
Subject: [PATCH 08/11] fix: smoother animation on large modal close

---
 extensions/react-widget/src/components/DocsGPTWidget.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx
index c9afebf60..d01e1635f 100644
--- a/extensions/react-widget/src/components/DocsGPTWidget.tsx
+++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx
@@ -165,9 +165,14 @@ const StyledContainer = styled.div<{ isOpen: boolean }>`
     @keyframes fadeOut {
       from {
         opacity: 1;
+        width: ${(props) => props.theme.dimensions.width};
+        height: ${(props) => props.theme.dimensions.height};
       }
       to {
         opacity: 0;
+        transform: scale(0.9);
+        width: ${(props) => props.theme.dimensions.width};
+        height: ${(props) => props.theme.dimensions.height};
       }
     }
     @media only screen and (max-width: 768px) {
@@ -612,14 +617,12 @@ export const DocsGPTWidget = ({
   };
   const handleClose = () => {
     setOpen(false);
-    size !== "large" ? setTimeout(() => {
+    setTimeout(() => {
       if (widgetRef.current) widgetRef.current.style.display = "none";
       setIsFloatingButtonVisible(true);
       setIsAnimatingButton(true);
       setTimeout(() => setIsAnimatingButton(false), 200);
     }, 250)
-      :
-      widgetRef.current && (widgetRef.current.style.display = "none") && setIsFloatingButtonVisible(true);
   };
   const handleOpen = () => {
     setOpen(true);

From 0a11a3afeed6a298a99ddbff68c60bdcb0b9c7cf Mon Sep 17 00:00:00 2001
From: Alex <a@tushynski.me>
Date: Sun, 10 Nov 2024 23:23:19 +0000
Subject: [PATCH 09/11] fix: attribution link

---
 extensions/react-widget/src/components/DocsGPTWidget.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx
index d01e1635f..1baa4c626 100644
--- a/extensions/react-widget/src/components/DocsGPTWidget.tsx
+++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx
@@ -739,7 +739,7 @@ export const DocsGPTWidget = ({
             </PromptContainer>
             <Tagline>
               Powered by&nbsp;
-              <Hyperlink target='_blank' href='https://github.com/arc53/DocsGPT'>DocsGPT</Hyperlink>
+              <Hyperlink target='_blank' href='https://www.docsgpt.cloud/'>DocsGPT</Hyperlink>
             </Tagline>
           </div>
         </StyledContainer>}

From 00390200ec6f1b41a7dad598e93a1cc9f224bbe5 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Mon, 11 Nov 2024 16:08:43 +0530
Subject: [PATCH 10/11] (updata:widget) v0.4.7

---
 docs/package-lock.json                    | 8 ++++----
 docs/package.json                         | 2 +-
 extensions/react-widget/package-lock.json | 4 ++--
 extensions/react-widget/package.json      | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/package-lock.json b/docs/package-lock.json
index 888c7725d..104181380 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -7,7 +7,7 @@
       "license": "MIT",
       "dependencies": {
         "@vercel/analytics": "^1.1.1",
-        "docsgpt": "^0.4.5",
+        "docsgpt": "^0.4.7",
         "next": "^14.2.12",
         "nextra": "^2.13.2",
         "nextra-theme-docs": "^2.13.2",
@@ -3576,9 +3576,9 @@
       }
     },
     "node_modules/docsgpt": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/docsgpt/-/docsgpt-0.4.5.tgz",
-      "integrity": "sha512-vf09E7jGn7pBqfvFIbpDPdvIv8dbbjhrMKva9x5hjiW5eroC8q9s1KwAzwkWidFRe0lM/A1mZUvluIAR8v4TuQ==",
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/docsgpt/-/docsgpt-0.4.7.tgz",
+      "integrity": "sha512-4YZzLZo6ybudFrJVUQflDFeWzFiTATRWB9myrGSpLigyuMMzax1ZAY2xFallZLuEG9VVm0mOgkx3ssWHLrXWkQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/plugin-transform-flow-strip-types": "^7.23.3",
diff --git a/docs/package.json b/docs/package.json
index 4eeb4df02..cc3e786db 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -7,7 +7,7 @@
   "license": "MIT",
   "dependencies": {
     "@vercel/analytics": "^1.1.1",
-    "docsgpt": "^0.4.6",
+    "docsgpt": "^0.4.7",
     "next": "^14.2.12",
     "nextra": "^2.13.2",
     "nextra-theme-docs": "^2.13.2",
diff --git a/extensions/react-widget/package-lock.json b/extensions/react-widget/package-lock.json
index 5b6f3fb24..de4c228d6 100644
--- a/extensions/react-widget/package-lock.json
+++ b/extensions/react-widget/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "docsgpt",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "docsgpt",
-      "version": "0.4.6",
+      "version": "0.4.7",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/plugin-transform-flow-strip-types": "^7.23.3",
diff --git a/extensions/react-widget/package.json b/extensions/react-widget/package.json
index a8e437daf..a1097403a 100644
--- a/extensions/react-widget/package.json
+++ b/extensions/react-widget/package.json
@@ -1,6 +1,6 @@
 {
   "name": "docsgpt",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "private": false,
   "description": "DocsGPT 🦖 is an innovative open-source tool designed to simplify the retrieval of information from project documentation using advanced GPT models 🤖.",
   "source": "./src/index.html",

From 70f44fcaca954cf9a1f6a1ae974ced96552e1c36 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Mon, 11 Nov 2024 18:16:52 +0530
Subject: [PATCH 11/11] (fix:upload) UI enhance

---
 frontend/src/assets/file_upload.svg     |  2 +-
 frontend/src/assets/website_collect.svg |  8 ++++----
 frontend/src/locale/en.json             |  4 ++--
 frontend/src/locale/es.json             |  2 +-
 frontend/src/locale/jp.json             |  2 +-
 frontend/src/locale/zh.json             |  2 +-
 frontend/src/upload/Upload.tsx          | 12 ++++++------
 7 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/src/assets/file_upload.svg b/frontend/src/assets/file_upload.svg
index f48d8d81f..159b580d1 100644
--- a/frontend/src/assets/file_upload.svg
+++ b/frontend/src/assets/file_upload.svg
@@ -1,3 +1,3 @@
 <svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 26.0003H18C19.1 26.0003 20 25.1003 20 24.0003V14.0003H23.18C24.96 14.0003 25.86 11.8403 24.6 10.5803L15.42 1.40032C15.235 1.21491 15.0152 1.06782 14.7732 0.967453C14.5313 0.86709 14.2719 0.81543 14.01 0.81543C13.7481 0.81543 13.4887 0.86709 13.2468 0.967453C13.0048 1.06782 12.785 1.21491 12.6 1.40032L3.42 10.5803C2.16 11.8403 3.04 14.0003 4.82 14.0003H8V24.0003C8 25.1003 8.9 26.0003 10 26.0003ZM2 30.0003H26C27.1 30.0003 28 30.9003 28 32.0003C28 33.1003 27.1 34.0003 26 34.0003H2C0.9 34.0003 0 33.1003 0 32.0003C0 30.9003 0.9 30.0003 2 30.0003Z" fill="#828282"/>
+<path d="M10 26.0003H18C19.1 26.0003 20 25.1003 20 24.0003V14.0003H23.18C24.96 14.0003 25.86 11.8403 24.6 10.5803L15.42 1.40032C15.235 1.21491 15.0152 1.06782 14.7732 0.967453C14.5313 0.86709 14.2719 0.81543 14.01 0.81543C13.7481 0.81543 13.4887 0.86709 13.2468 0.967453C13.0048 1.06782 12.785 1.21491 12.6 1.40032L3.42 10.5803C2.16 11.8403 3.04 14.0003 4.82 14.0003H8V24.0003C8 25.1003 8.9 26.0003 10 26.0003ZM2 30.0003H26C27.1 30.0003 28 30.9003 28 32.0003C28 33.1003 27.1 34.0003 26 34.0003H2C0.9 34.0003 0 33.1003 0 32.0003C0 30.9003 0.9 30.0003 2 30.0003Z" fill="#949494"/>
 </svg>
\ No newline at end of file
diff --git a/frontend/src/assets/website_collect.svg b/frontend/src/assets/website_collect.svg
index b7aa60cfb..22d3e1de8 100644
--- a/frontend/src/assets/website_collect.svg
+++ b/frontend/src/assets/website_collect.svg
@@ -1,6 +1,6 @@
 <svg width="58" height="49" viewBox="0 0 58 49" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M33.0002 45.3337H6.3335C5.27263 45.3337 4.25521 44.9122 3.50507 44.1621C2.75492 43.4119 2.3335 42.3945 2.3335 41.3337V6.66699C2.3335 5.60613 2.75492 4.58871 3.50507 3.83856C4.25521 3.08842 5.27263 2.66699 6.3335 2.66699H51.6668C52.7277 2.66699 53.7451 3.08842 54.4953 3.83856C55.2454 4.58871 55.6668 5.60613 55.6668 6.66699V24.0003M42.3335 40.0003L49.0002 46.667M49.0002 46.667L55.6668 40.0003M49.0002 46.667V30.667" stroke="#626262" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M2.3335 6.66699C2.3335 5.60613 2.75492 4.58871 3.50507 3.83856C4.25521 3.08842 5.27263 2.66699 6.3335 2.66699H51.6668C52.7277 2.66699 53.7451 3.08842 54.4953 3.83856C55.2454 4.58871 55.6668 5.60613 55.6668 6.66699V18.667H2.3335V6.66699Z" stroke="#626262" stroke-width="4"/>
-<path d="M7.66667 10.6673C7.66667 9.19456 8.86057 8.00065 10.3333 8.00065C11.8061 8.00065 13 9.19456 13 10.6673C13 12.1401 11.8061 13.334 10.3333 13.334C8.86057 13.334 7.66667 12.1401 7.66667 10.6673Z" fill="#626262"/>
-<path d="M15.6667 10.6673C15.6667 9.19456 16.8606 8.00065 18.3333 8.00065C19.8061 8.00065 21 9.19456 21 10.6673C21 12.1401 19.8061 13.334 18.3333 13.334C16.8606 13.334 15.6667 12.1401 15.6667 10.6673Z" fill="#626262"/>
+<path d="M33.0002 45.3337H6.3335C5.27263 45.3337 4.25521 44.9122 3.50507 44.1621C2.75492 43.4119 2.3335 42.3945 2.3335 41.3337V6.66699C2.3335 5.60613 2.75492 4.58871 3.50507 3.83856C4.25521 3.08842 5.27263 2.66699 6.3335 2.66699H51.6668C52.7277 2.66699 53.7451 3.08842 54.4953 3.83856C55.2454 4.58871 55.6668 5.60613 55.6668 6.66699V24.0003M42.3335 40.0003L49.0002 46.667M49.0002 46.667L55.6668 40.0003M49.0002 46.667V30.667" stroke="#949494" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.3335 6.66699C2.3335 5.60613 2.75492 4.58871 3.50507 3.83856C4.25521 3.08842 5.27263 2.66699 6.3335 2.66699H51.6668C52.7277 2.66699 53.7451 3.08842 54.4953 3.83856C55.2454 4.58871 55.6668 5.60613 55.6668 6.66699V18.667H2.3335V6.66699Z" stroke="#949494" stroke-width="4"/>
+<path d="M7.66667 10.6673C7.66667 9.19456 8.86057 8.00065 10.3333 8.00065C11.8061 8.00065 13 9.19456 13 10.6673C13 12.1401 11.8061 13.334 10.3333 13.334C8.86057 13.334 7.66667 12.1401 7.66667 10.6673Z" fill="#949494"/>
+<path d="M15.6667 10.6673C15.6667 9.19456 16.8606 8.00065 18.3333 8.00065C19.8061 8.00065 21 9.19456 21 10.6673C21 12.1401 19.8061 13.334 18.3333 13.334C16.8606 13.334 15.6667 12.1401 15.6667 10.6673Z" fill="#949494"/>
 </svg>
\ No newline at end of file
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index b1268df76..134604633 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -77,12 +77,12 @@
   },
   "modals": {
     "uploadDoc": {
-      "label": "Upload New Documentation",
+      "label": "Upload new document",
       "select": "Choose how to upload your document to DocsGPT",
       "file": "Upload from device",
       "back": "Back",
       "wait": "Please wait ...",
-      "remote": "Collect from a website",
+      "remote": "Collect from website",
       "start": "Start Chatting",
       "name": "Name",
       "choose": "Choose Files",
diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json
index 296dbb16d..d29c3a7b7 100644
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -77,7 +77,7 @@
   },
   "modals": {
     "uploadDoc": {
-      "label": "Subir Nueva Documentación",
+      "label": "Subir nuevo documento",
       "select": "Elija cómo cargar su documento en DocsGPT",
       "file": "Subir desde el dispositivo",
       "back": "Atrás",
diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json
index a69ae31f3..08da4e0c3 100644
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -77,7 +77,7 @@
   },
   "modals": {
     "uploadDoc": {
-      "label": "新規書類のアップロード",
+      "label": "新しい文書をアップロードする",
       "select": "ドキュメントを DocsGPT にアップロードする方法を選択します",
       "file": "デバイスからアップロード",
       "back": "戻る",
diff --git a/frontend/src/locale/zh.json b/frontend/src/locale/zh.json
index 51f8bfe90..5f8755e50 100644
--- a/frontend/src/locale/zh.json
+++ b/frontend/src/locale/zh.json
@@ -77,7 +77,7 @@
   },
   "modals": {
     "uploadDoc": {
-      "label": "上传新文档资料",
+      "label": "上传新文档",
       "select": "选择如何将文档上传到 DocsGPT",
       "file": "从设备上传",
       "back": "后退",
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 81ce9f2b0..01ecc4800 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -351,32 +351,32 @@ function Upload({
   } else {
     view = (
       <div className="flex flex-col gap-4 w-full">
-        <p className="text-xl text-jet dark:text-bright-gray text-center font-semibold">
+        <p className="text-2xl text-jet dark:text-bright-gray text-center font-semibold">
           {t('modals.uploadDoc.label')}
         </p>
         {!activeTab && (
           <div>
-            <p className="text-gray-6000 dark:text-light-gray text-sm text-center">
+            <p className="text-gray-6000 dark:text-bright-gray text-sm text-center font-medium">
               {t('modals.uploadDoc.select')}
             </p>
             <div className="w-full gap-4 h-full p-4 flex flex-col md:flex-row md:gap-4 justify-center items-center">
               <button
                 onClick={() => setActiveTab('file')}
-                className="rounded-3xl text-md font-medium border flex flex-col items-center justify-center hover:shadow-lg dark:hover:shadow-lg p-8 dark:active:shadow-lg gap-4 bg-white dark:bg-outer-space dark:text-light-gray hover:bg-gray-100 dark:hover:bg-[#767183]/50 hover:text-purple-30 dark:hover:text-gray-30 border-purple-30 dark:border-gray-700 h-40 w-40 md:w-52 md:h-52"
+                className="opacity-85 hover:opacity-100 rounded-3xl text-sm font-medium border flex flex-col items-center justify-center hover:shadow-purple-30/30 hover:shadow-lg p-8 gap-4 bg-white text-[#777777] dark:bg-outer-space dark:text-[#c3c3c3] hover:border-purple-30 border-[#D7D7D7] h-40 w-40 md:w-52 md:h-52"
               >
                 <img
                   src={FileUpload}
-                  className="w-8 h-8 mr-2 dark:filter dark:invert"
+                  className="w-12 h-12 mr-2 dark:filter dark:invert dark:brightness-50"
                 />
                 {t('modals.uploadDoc.file')}
               </button>
               <button
                 onClick={() => setActiveTab('remote')}
-                className="rounded-3xl text-md font-medium border flex flex-col items-center justify-center hover:shadow-lg dark:hover:shadow-lg p-8 dark:active:shadow-lg gap-4 bg-white dark:bg-outer-space dark:text-light-gray hover:bg-gray-100 dark:hover:bg-[#767183]/50 hover:text-purple-30 dark:hover:text-gray-30 border-purple-30 dark:border-gray-700 h-40 w-40 md:w-52 md:h-52"
+                className="opacity-85 hover:opacity-100 rounded-3xl text-sm font-medium border flex flex-col items-center justify-center hover:shadow-purple-30/30 hover:shadow-lg p-8 gap-4 bg-white text-[#777777] dark:bg-outer-space dark:text-[#c3c3c3] hover:border-purple-30 border-[#D7D7D7] h-40 w-40 md:w-52 md:h-52"
               >
                 <img
                   src={WebsiteCollect}
-                  className="w-8 h-8 mr-2 dark:filter dark:invert"
+                  className="w-14 h-14 mr-2 dark:filter dark:invert dark:brightness-50"
                 />
                 {t('modals.uploadDoc.remote')}
               </button>