From 345ab8ea9e9c2c718bdc6db3c97f09566852c5e4 Mon Sep 17 00:00:00 2001
From: sccalabr <4111230+sccalabr@users.noreply.github.com>
Date: Sat, 5 Oct 2024 11:27:37 -0700
Subject: [PATCH 1/6] Addressing comments and using dropdown instead of button

---
 frontend/src/Navigation.tsx | 37 ++++++++++++++++++-------------------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 052a9643..77999753 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -12,6 +12,7 @@ import Expand from './assets/expand.svg';
 import Github from './assets/github.svg';
 import Hamburger from './assets/hamburger.svg';
 import Info from './assets/info.svg';
+import InfoDark from './assets/info-dark.svg';
 import SettingGear from './assets/settingGear.svg';
 import Twitter from './assets/TwitterX.svg';
 import UploadIcon from './assets/upload.svg';
@@ -41,6 +42,7 @@ import {
   setSourceDocs,
 } from './preferences/preferenceSlice';
 import Upload from './upload/Upload';
+import Dropdown from './components/Dropdown';
 
 interface NavigationProps {
   navOpen: boolean;
@@ -360,27 +362,24 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             </NavLink>
           </div>
           <div className="flex justify-between gap-2 border-b-[1.5px] py-2 dark:border-b-purple-taupe">
-            <NavLink
-              onClick={() => {
-                if (isMobile) {
-                  setNavOpen(!navOpen);
-                }
-                resetConversation();
-              }}
-              to="/about"
-              className={({ isActive }) =>
-                `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
-                  isActive ? 'bg-gray-3000 dark:bg-[#28292E]' : ''
-                }`
-              }
-            >
+          <div className="flex my-4 mx-4 flex gap-2">
               <img
-                src={Info}
-                alt="icon"
                 className="ml-2 w-5 filter dark:invert"
-              />
-              <p className="my-auto pr-1 text-sm">{t('about')}</p>
-            </NavLink>
+                src={InfoDark}
+              ></img>
+              <Dropdown
+                placeholder={"Help"}
+                contentSize='50'
+                options={[ { label: "Docs", value: "documentation" }, { label: "Email Us", value: "email" }, ]}
+                onSelect={(selectedOption) => {
+                  if (selectedOption.value === "documentation") {
+                    window.open(" https://docs.docsgpt.cloud/", "_blank");
+                  } else if (selectedOption.value === "email"){
+                    window.location.href = `mailto:contact@arc53.com`;
+                  }
+                }}
+                />
+            </div>
             <div className="flex items-center justify-evenly gap-1 px-1">
               <NavLink
                 target="_blank"

From fc24eb08cb6e3b65773d6c5b1dc1a5ac5ecce44e Mon Sep 17 00:00:00 2001
From: sccalabr <4111230+sccalabr@users.noreply.github.com>
Date: Sat, 5 Oct 2024 11:38:23 -0700
Subject: [PATCH 2/6] Changing dropdown to support not going off screen.

---
 frontend/src/Navigation.tsx          |   3 +-
 frontend/src/components/Dropdown.tsx | 105 ++++++++++-----------------
 2 files changed, 42 insertions(+), 66 deletions(-)

diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 77999753..92347ab6 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -369,9 +369,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               ></img>
               <Dropdown
                 placeholder={"Help"}
+                selectedValue={null}
                 contentSize='50'
                 options={[ { label: "Docs", value: "documentation" }, { label: "Email Us", value: "email" }, ]}
-                onSelect={(selectedOption) => {
+                onSelect={(selectedOption: { label: string; value: string }) => {
                   if (selectedOption.value === "documentation") {
                     window.open(" https://docs.docsgpt.cloud/", "_blank");
                   } else if (selectedOption.value === "email"){
diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
index 07f33650..b272fd8b 100644
--- a/frontend/src/components/Dropdown.tsx
+++ b/frontend/src/components/Dropdown.tsx
@@ -47,14 +47,13 @@ function Dropdown({
 }) {
   const dropdownRef = React.useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = React.useState(false);
+  const [dropdownPosition, setDropdownPosition] = React.useState({ top: 0});
+  
   const borderRadius = rounded === 'xl' ? 'rounded-xl' : 'rounded-3xl';
   const borderTopRadius = rounded === 'xl' ? 'rounded-t-xl' : 'rounded-t-3xl';
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (
-      dropdownRef.current &&
-      !dropdownRef.current.contains(event.target as Node)
-    ) {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -65,56 +64,50 @@ function Dropdown({
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
+
+  const handleToggleDropdown = () => {
+    setIsOpen(prev => !prev);
+    if (!isOpen) {
+      adjustDropdownPosition();
+    }
+  };
+
+  const adjustDropdownPosition = () => {
+    if (dropdownRef.current) {
+      const rect = dropdownRef.current.getBoundingClientRect();
+      const dropdownMenuHeight = Math.min(200, options.length * 40); // Adjust height based on options
+      const viewportHeight = window.innerHeight;
+
+      // Check if dropdown overflows the bottom of the viewport
+      const newPosition = {
+        top: rect.bottom + dropdownMenuHeight > viewportHeight ? -dropdownMenuHeight : 0,
+        left: 0,
+      };
+
+      setDropdownPosition(newPosition);
+    }
+  };
+
   return (
     <div
-      className={[
-        typeof selectedValue === 'string'
-          ? 'relative mt-2'
-          : 'relative align-middle',
-        size,
-      ].join(' ')}
+      className={[typeof selectedValue === 'string' ? 'relative mt-2' : 'relative align-middle', size].join(' ')}
       ref={dropdownRef}
     >
       <button
-        onClick={() => setIsOpen(!isOpen)}
-        className={`flex w-full cursor-pointer items-center justify-between ${border} border-${borderColor} bg-white px-5 py-3 dark:border-${borderColor}/40 dark:bg-transparent ${
-          isOpen ? `${borderTopRadius}` : `${borderRadius}`
-        }`}
+        onClick={handleToggleDropdown}
+        className={`flex w-full cursor-pointer items-center justify-between ${border} border-${borderColor} bg-white px-5 py-3 dark:border-${borderColor}/40 dark:bg-transparent ${isOpen ? borderTopRadius : borderRadius}`}
       >
-        {typeof selectedValue === 'string' ? (
-          <span className="truncate dark:text-bright-gray">
-            {selectedValue}
-          </span>
-        ) : (
-          <span
-            className={`truncate dark:text-bright-gray ${
-              !selectedValue && 'text-silver dark:text-gray-400'
-            } ${contentSize}`}
-          >
-            {selectedValue && 'label' in selectedValue
-              ? selectedValue.label
-              : selectedValue && 'description' in selectedValue
-                ? `${
-                    selectedValue.value < 1e9
-                      ? selectedValue.value + ` (${selectedValue.description})`
-                      : selectedValue.description
-                  }`
-                : placeholder
-                  ? placeholder
-                  : 'From URL'}
-          </span>
-        )}
-        <img
-          src={Arrow2}
-          alt="arrow"
-          className={`transform ${
-            isOpen ? 'rotate-180' : 'rotate-0'
-          } h-3 w-3 transition-transform`}
-        />
+        <span className={`truncate dark:text-bright-gray ${contentSize}`}>
+          {selectedValue && 'label' in selectedValue ? selectedValue.label : placeholder}
+        </span>
+        <img src={Arrow2} alt="arrow" className={`transform ${isOpen ? 'rotate-180' : 'rotate-0'} h-3 w-3 transition-transform`} />
       </button>
       {isOpen && (
         <div
           className={`absolute left-0 right-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl ${border} border-${borderColor} bg-white shadow-lg dark:border-${borderColor}/40 dark:bg-dark-charcoal`}
+          style={{
+            transform: `translateY(${dropdownPosition.top}px)`, // Adjust Y position
+          }}
         >
           {options.map((option: any, index) => (
             <div
@@ -128,17 +121,7 @@ function Dropdown({
                 }}
                 className={`ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3 dark:text-light-gray ${contentSize}`}
               >
-                {typeof option === 'string'
-                  ? option
-                  : option.name
-                    ? option.name
-                    : option.label
-                      ? option.label
-                      : `${
-                          option.value < 1e9
-                            ? option.value + ` (${option.description})`
-                            : option.description
-                        }`}
+                {typeof option === 'string' ? option : option.name || option.label || option.description}
               </span>
               {showEdit && onEdit && (
                 <img
@@ -146,11 +129,7 @@ function Dropdown({
                   alt="Edit"
                   className="mr-4 h-4 w-4 cursor-pointer hover:opacity-50"
                   onClick={() => {
-                    onEdit({
-                      id: option.id,
-                      name: option.name,
-                      type: option.type,
-                    });
+                    onEdit(option);
                     setIsOpen(false);
                   }}
                 />
@@ -163,11 +142,7 @@ function Dropdown({
                   <img
                     src={Trash}
                     alt="Delete"
-                    className={`mr-2 h-4 w-4 cursor-pointer hover:opacity-50 ${
-                      option.type === 'public'
-                        ? 'cursor-not-allowed opacity-50'
-                        : ''
-                    }`}
+                    className={`mr-2 h-4 w-4 cursor-pointer hover:opacity-50 ${option.type === 'public' ? 'cursor-not-allowed opacity-50' : ''}`}
                   />
                 </button>
               )}

From e1a8184c2ea78909fad40c9542eb20f76c8065c8 Mon Sep 17 00:00:00 2001
From: sccalabr <4111230+sccalabr@users.noreply.github.com>
Date: Sat, 5 Oct 2024 15:24:59 -0700
Subject: [PATCH 3/6] Fixing build issues

---
 frontend/src/Navigation.tsx          | 30 +++++++++++----------
 frontend/src/components/Dropdown.tsx | 39 +++++++++++++++++++++-------
 2 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 92347ab6..621ae96b 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -11,7 +11,6 @@ import Discord from './assets/discord.svg';
 import Expand from './assets/expand.svg';
 import Github from './assets/github.svg';
 import Hamburger from './assets/hamburger.svg';
-import Info from './assets/info.svg';
 import InfoDark from './assets/info-dark.svg';
 import SettingGear from './assets/settingGear.svg';
 import Twitter from './assets/TwitterX.svg';
@@ -362,24 +361,27 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             </NavLink>
           </div>
           <div className="flex justify-between gap-2 border-b-[1.5px] py-2 dark:border-b-purple-taupe">
-          <div className="flex my-4 mx-4 flex gap-2">
-              <img
-                className="ml-2 w-5 filter dark:invert"
-                src={InfoDark}
-              ></img>
+            <div className="flex my-4 mx-4 flex gap-2">
+              <img className="ml-2 w-5 filter dark:invert" src={InfoDark}></img>
               <Dropdown
-                placeholder={"Help"}
+                placeholder={'Help'}
                 selectedValue={null}
-                contentSize='50'
-                options={[ { label: "Docs", value: "documentation" }, { label: "Email Us", value: "email" }, ]}
-                onSelect={(selectedOption: { label: string; value: string }) => {
-                  if (selectedOption.value === "documentation") {
-                    window.open(" https://docs.docsgpt.cloud/", "_blank");
-                  } else if (selectedOption.value === "email"){
+                contentSize="50"
+                options={[
+                  { label: 'Docs', value: 'documentation' },
+                  { label: 'Email Us', value: 'email' },
+                ]}
+                onSelect={(selectedOption: {
+                  label: string;
+                  value: string;
+                }) => {
+                  if (selectedOption.value === 'documentation') {
+                    window.open(' https://docs.docsgpt.cloud/', '_blank');
+                  } else if (selectedOption.value === 'email') {
                     window.location.href = `mailto:contact@arc53.com`;
                   }
                 }}
-                />
+              />
             </div>
             <div className="flex items-center justify-evenly gap-1 px-1">
               <NavLink
diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
index b272fd8b..97c074a7 100644
--- a/frontend/src/components/Dropdown.tsx
+++ b/frontend/src/components/Dropdown.tsx
@@ -47,13 +47,16 @@ function Dropdown({
 }) {
   const dropdownRef = React.useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = React.useState(false);
-  const [dropdownPosition, setDropdownPosition] = React.useState({ top: 0});
-  
+  const [dropdownPosition, setDropdownPosition] = React.useState({ top: 0 });
+
   const borderRadius = rounded === 'xl' ? 'rounded-xl' : 'rounded-3xl';
   const borderTopRadius = rounded === 'xl' ? 'rounded-t-xl' : 'rounded-t-3xl';
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node)
+    ) {
       setIsOpen(false);
     }
   };
@@ -66,7 +69,7 @@ function Dropdown({
   }, []);
 
   const handleToggleDropdown = () => {
-    setIsOpen(prev => !prev);
+    setIsOpen((prev) => !prev);
     if (!isOpen) {
       adjustDropdownPosition();
     }
@@ -80,7 +83,10 @@ function Dropdown({
 
       // Check if dropdown overflows the bottom of the viewport
       const newPosition = {
-        top: rect.bottom + dropdownMenuHeight > viewportHeight ? -dropdownMenuHeight : 0,
+        top:
+          rect.bottom + dropdownMenuHeight > viewportHeight
+            ? -dropdownMenuHeight
+            : 0,
         left: 0,
       };
 
@@ -90,7 +96,12 @@ function Dropdown({
 
   return (
     <div
-      className={[typeof selectedValue === 'string' ? 'relative mt-2' : 'relative align-middle', size].join(' ')}
+      className={[
+        typeof selectedValue === 'string'
+          ? 'relative mt-2'
+          : 'relative align-middle',
+        size,
+      ].join(' ')}
       ref={dropdownRef}
     >
       <button
@@ -98,9 +109,17 @@ function Dropdown({
         className={`flex w-full cursor-pointer items-center justify-between ${border} border-${borderColor} bg-white px-5 py-3 dark:border-${borderColor}/40 dark:bg-transparent ${isOpen ? borderTopRadius : borderRadius}`}
       >
         <span className={`truncate dark:text-bright-gray ${contentSize}`}>
-          {selectedValue && 'label' in selectedValue ? selectedValue.label : placeholder}
+          {typeof selectedValue === 'object' &&
+          selectedValue &&
+          'label' in selectedValue
+            ? selectedValue.label
+            : placeholder}
         </span>
-        <img src={Arrow2} alt="arrow" className={`transform ${isOpen ? 'rotate-180' : 'rotate-0'} h-3 w-3 transition-transform`} />
+        <img
+          src={Arrow2}
+          alt="arrow"
+          className={`transform ${isOpen ? 'rotate-180' : 'rotate-0'} h-3 w-3 transition-transform`}
+        />
       </button>
       {isOpen && (
         <div
@@ -121,7 +140,9 @@ function Dropdown({
                 }}
                 className={`ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3 dark:text-light-gray ${contentSize}`}
               >
-                {typeof option === 'string' ? option : option.name || option.label || option.description}
+                {typeof option === 'string'
+                  ? option
+                  : option.name || option.label || option.description}
               </span>
               {showEdit && onEdit && (
                 <img

From ea49095b0a33e242194ef770077c24cf39696219 Mon Sep 17 00:00:00 2001
From: sccalabr <4111230+sccalabr@users.noreply.github.com>
Date: Sat, 5 Oct 2024 18:16:09 -0700
Subject: [PATCH 4/6] Addressing comments

---
 frontend/src/App.tsx                       |  6 +-
 frontend/src/Navigation.tsx                | 33 ++------
 frontend/src/assets/documentation-dark.svg |  5 +-
 frontend/src/assets/documentation.svg      |  5 +-
 frontend/src/assets/envelope-dark.svg      |  3 +
 frontend/src/assets/envelope.svg           |  3 +
 frontend/src/components/Dropdown.tsx       | 94 +++++++++++----------
 frontend/src/components/Help.tsx           | 97 ++++++++++++++++++++++
 frontend/src/components/SourceDropdown.tsx |  9 +-
 frontend/src/locale/i18n.ts                |  2 +-
 10 files changed, 174 insertions(+), 83 deletions(-)
 create mode 100644 frontend/src/assets/envelope-dark.svg
 create mode 100644 frontend/src/assets/envelope.svg
 create mode 100644 frontend/src/components/Help.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1455f495..176ae518 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -32,9 +32,9 @@ function MainLayout() {
 }
 
 export default function App() {
-  const [,,componentMounted] = useDarkTheme();
-  if(!componentMounted) {
-    return <div />
+  const [, , componentMounted] = useDarkTheme();
+  if (!componentMounted) {
+    return <div />;
   }
   return (
     <div className="h-full relative overflow-auto">
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 621ae96b..09245d9d 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -11,7 +11,6 @@ import Discord from './assets/discord.svg';
 import Expand from './assets/expand.svg';
 import Github from './assets/github.svg';
 import Hamburger from './assets/hamburger.svg';
-import InfoDark from './assets/info-dark.svg';
 import SettingGear from './assets/settingGear.svg';
 import Twitter from './assets/TwitterX.svg';
 import UploadIcon from './assets/upload.svg';
@@ -41,7 +40,7 @@ import {
   setSourceDocs,
 } from './preferences/preferenceSlice';
 import Upload from './upload/Upload';
-import Dropdown from './components/Dropdown';
+import Help from './components/Help';
 
 interface NavigationProps {
   navOpen: boolean;
@@ -305,7 +304,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             <></>
           )}
         </div>
-
         <div className="flex h-auto flex-col justify-end text-eerie-black dark:text-white">
           <div className="flex flex-col-reverse border-b-[1px] dark:border-b-purple-taupe">
             <div className="relative my-4 mx-4 flex gap-2">
@@ -360,30 +358,11 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               </p>
             </NavLink>
           </div>
-          <div className="flex justify-between gap-2 border-b-[1.5px] py-2 dark:border-b-purple-taupe">
-            <div className="flex my-4 mx-4 flex gap-2">
-              <img className="ml-2 w-5 filter dark:invert" src={InfoDark}></img>
-              <Dropdown
-                placeholder={'Help'}
-                selectedValue={null}
-                contentSize="50"
-                options={[
-                  { label: 'Docs', value: 'documentation' },
-                  { label: 'Email Us', value: 'email' },
-                ]}
-                onSelect={(selectedOption: {
-                  label: string;
-                  value: string;
-                }) => {
-                  if (selectedOption.value === 'documentation') {
-                    window.open(' https://docs.docsgpt.cloud/', '_blank');
-                  } else if (selectedOption.value === 'email') {
-                    window.location.href = `mailto:contact@arc53.com`;
-                  }
-                }}
-              />
-            </div>
-            <div className="flex items-center justify-evenly gap-1 px-1">
+          <div>
+            <div className="flex items-center justify-evenly gap-1 px-1 py-1">
+              <div className="rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]">
+                <Help />
+              </div>
               <NavLink
                 target="_blank"
                 to={'https://discord.gg/WHJdfbQDR4'}
diff --git a/frontend/src/assets/documentation-dark.svg b/frontend/src/assets/documentation-dark.svg
index 78440206..5cbde1b1 100644
--- a/frontend/src/assets/documentation-dark.svg
+++ b/frontend/src/assets/documentation-dark.svg
@@ -1,3 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
-    <g transform="translate(-19.2,-19.2) scale(1.15,1.15)"><g fill="#949494" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M13.172,2h-7.172c-1.1,0 -2,0.9 -2,2v16c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2v-11.172c0,-0.53 -0.211,-1.039 -0.586,-1.414l-4.828,-4.828c-0.375,-0.375 -0.884,-0.586 -1.414,-0.586zM15,18h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM15,14h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM13,9v-5.5l5.5,5.5z"></path></g></g></g>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.25 8.64258V16.25C16.25 16.7473 16.0525 17.2242 15.7008 17.5758C15.3492 17.9275 14.8723 18.125 14.375 18.125H5.625C5.12772 18.125 4.65081 17.9275 4.29917 17.5758C3.94754 17.2242 3.75 16.7473 3.75 16.25V3.75C3.75 3.25272 3.94754 2.77581 4.29917 2.42417C4.65081 2.07254 5.12772 1.875 5.625 1.875H9.48242C9.81383 1.87505 10.1316 2.0067 10.366 2.24102L15.884 7.75898C16.1183 7.99335 16.2499 8.31117 16.25 8.64258Z" stroke="#ECECF1" stroke-width="1.11111" stroke-linejoin="round"/>
+<path d="M10 2.1875V6.875C10 7.20652 10.1317 7.52446 10.3661 7.75888C10.6005 7.9933 10.9185 8.125 11.25 8.125H15.9375M6.875 11.25H13.125M6.875 14.375H13.125" stroke="#ECECF1" stroke-width="1.11111" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/frontend/src/assets/documentation.svg b/frontend/src/assets/documentation.svg
index f9f7c596..955d392f 100644
--- a/frontend/src/assets/documentation.svg
+++ b/frontend/src/assets/documentation.svg
@@ -1,3 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
-    <g transform="translate(-19.2,-19.2) scale(1.15,1.15)"><g fill="black" fill-opacity="0.54" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M13.172,2h-7.172c-1.1,0 -2,0.9 -2,2v16c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2v-11.172c0,-0.53 -0.211,-1.039 -0.586,-1.414l-4.828,-4.828c-0.375,-0.375 -0.884,-0.586 -1.414,-0.586zM15,18h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM15,14h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM13,9v-5.5l5.5,5.5z"></path></g></g></g>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.25 8.64258V16.25C16.25 16.7473 16.0525 17.2242 15.7008 17.5758C15.3492 17.9275 14.8723 18.125 14.375 18.125H5.625C5.12772 18.125 4.65081 17.9275 4.29917 17.5758C3.94754 17.2242 3.75 16.7473 3.75 16.25V3.75C3.75 3.25272 3.94754 2.77581 4.29917 2.42417C4.65081 2.07254 5.12772 1.875 5.625 1.875H9.48242C9.81383 1.87505 10.1316 2.0067 10.366 2.24102L15.884 7.75898C16.1183 7.99335 16.2499 8.31117 16.25 8.64258Z" stroke="#6E6E6E" stroke-width="1.11111" stroke-linejoin="round"/>
+<path d="M10 2.1875V6.875C10 7.20652 10.1317 7.52446 10.3661 7.75888C10.6005 7.9933 10.9185 8.125 11.25 8.125H15.9375M6.875 11.25H13.125M6.875 14.375H13.125" stroke="#6E6E6E" stroke-width="1.11111" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/frontend/src/assets/envelope-dark.svg b/frontend/src/assets/envelope-dark.svg
new file mode 100644
index 00000000..a61bec4f
--- /dev/null
+++ b/frontend/src/assets/envelope-dark.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.04867 15.49H15.1775C16.5339 15.49 17.3172 14.7067 17.3172 13.1548V4.83755C17.3172 3.29309 16.5265 2.50977 14.9515 2.50977H2.82302C1.47463 2.50977 0.683594 3.28569 0.683594 4.83755V13.1545C0.683594 14.7138 1.48138 15.49 3.04867 15.49ZM8.10441 9.3803L2.41609 3.76816C2.58163 3.70034 2.77738 3.66273 3.01106 3.66273H14.9971C15.2305 3.66273 15.434 3.70034 15.6072 3.78327L9.92692 9.38062C9.60291 9.7043 9.31652 9.84766 9.01534 9.84766C8.71384 9.84766 8.42841 9.70398 8.10441 9.3803ZM1.83559 13.1548V4.76234L6.16717 9.01162L1.84331 13.2824C1.83592 13.2448 1.83559 13.1998 1.83559 13.1548ZM16.1646 4.84494V13.2599L11.8629 9.0113L16.1649 4.78516L16.1646 4.84494ZM3.01106 14.3377C2.79249 14.3377 2.61184 14.3075 2.4537 14.2397L6.95852 9.78723L7.44838 10.2694C7.97552 10.7891 8.48017 11.0077 9.01534 11.0077C9.54249 11.0077 10.0548 10.7891 10.5823 10.2694L11.0718 9.78723L15.5696 14.2319C15.4111 14.3075 15.2154 14.3374 14.9968 14.3374L3.01106 14.3377Z" fill="#ECECF1"/>
+</svg>
diff --git a/frontend/src/assets/envelope.svg b/frontend/src/assets/envelope.svg
new file mode 100644
index 00000000..a4c25032
--- /dev/null
+++ b/frontend/src/assets/envelope.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.04867 15.49H15.1775C16.5339 15.49 17.3172 14.7067 17.3172 13.1548V4.83755C17.3172 3.29309 16.5265 2.50977 14.9515 2.50977H2.82302C1.47463 2.50977 0.683594 3.28569 0.683594 4.83755V13.1545C0.683594 14.7138 1.48138 15.49 3.04867 15.49ZM8.10441 9.3803L2.41609 3.76816C2.58163 3.70034 2.77738 3.66273 3.01106 3.66273H14.9971C15.2305 3.66273 15.434 3.70034 15.6072 3.78327L9.92692 9.38062C9.60291 9.7043 9.31652 9.84766 9.01534 9.84766C8.71384 9.84766 8.42841 9.70398 8.10441 9.3803ZM1.83559 13.1548V4.76234L6.16717 9.01162L1.84331 13.2824C1.83592 13.2448 1.83559 13.1998 1.83559 13.1548ZM16.1646 4.84494V13.2599L11.8629 9.0113L16.1649 4.78516L16.1646 4.84494ZM3.01106 14.3377C2.79249 14.3377 2.61184 14.3075 2.4537 14.2397L6.95852 9.78723L7.44838 10.2694C7.97552 10.7891 8.48017 11.0077 9.01534 11.0077C9.54249 11.0077 10.0548 10.7891 10.5823 10.2694L11.0718 9.78723L15.5696 14.2319C15.4111 14.3075 15.2154 14.3374 14.9968 14.3374L3.01106 14.3377Z" fill="#6F6F6F"/>
+</svg>
diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
index 97c074a7..07f33650 100644
--- a/frontend/src/components/Dropdown.tsx
+++ b/frontend/src/components/Dropdown.tsx
@@ -47,8 +47,6 @@ function Dropdown({
 }) {
   const dropdownRef = React.useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = React.useState(false);
-  const [dropdownPosition, setDropdownPosition] = React.useState({ top: 0 });
-
   const borderRadius = rounded === 'xl' ? 'rounded-xl' : 'rounded-3xl';
   const borderTopRadius = rounded === 'xl' ? 'rounded-t-xl' : 'rounded-t-3xl';
 
@@ -67,33 +65,6 @@ function Dropdown({
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
-
-  const handleToggleDropdown = () => {
-    setIsOpen((prev) => !prev);
-    if (!isOpen) {
-      adjustDropdownPosition();
-    }
-  };
-
-  const adjustDropdownPosition = () => {
-    if (dropdownRef.current) {
-      const rect = dropdownRef.current.getBoundingClientRect();
-      const dropdownMenuHeight = Math.min(200, options.length * 40); // Adjust height based on options
-      const viewportHeight = window.innerHeight;
-
-      // Check if dropdown overflows the bottom of the viewport
-      const newPosition = {
-        top:
-          rect.bottom + dropdownMenuHeight > viewportHeight
-            ? -dropdownMenuHeight
-            : 0,
-        left: 0,
-      };
-
-      setDropdownPosition(newPosition);
-    }
-  };
-
   return (
     <div
       className={[
@@ -105,28 +76,45 @@ function Dropdown({
       ref={dropdownRef}
     >
       <button
-        onClick={handleToggleDropdown}
-        className={`flex w-full cursor-pointer items-center justify-between ${border} border-${borderColor} bg-white px-5 py-3 dark:border-${borderColor}/40 dark:bg-transparent ${isOpen ? borderTopRadius : borderRadius}`}
+        onClick={() => setIsOpen(!isOpen)}
+        className={`flex w-full cursor-pointer items-center justify-between ${border} border-${borderColor} bg-white px-5 py-3 dark:border-${borderColor}/40 dark:bg-transparent ${
+          isOpen ? `${borderTopRadius}` : `${borderRadius}`
+        }`}
       >
-        <span className={`truncate dark:text-bright-gray ${contentSize}`}>
-          {typeof selectedValue === 'object' &&
-          selectedValue &&
-          'label' in selectedValue
-            ? selectedValue.label
-            : placeholder}
-        </span>
+        {typeof selectedValue === 'string' ? (
+          <span className="truncate dark:text-bright-gray">
+            {selectedValue}
+          </span>
+        ) : (
+          <span
+            className={`truncate dark:text-bright-gray ${
+              !selectedValue && 'text-silver dark:text-gray-400'
+            } ${contentSize}`}
+          >
+            {selectedValue && 'label' in selectedValue
+              ? selectedValue.label
+              : selectedValue && 'description' in selectedValue
+                ? `${
+                    selectedValue.value < 1e9
+                      ? selectedValue.value + ` (${selectedValue.description})`
+                      : selectedValue.description
+                  }`
+                : placeholder
+                  ? placeholder
+                  : 'From URL'}
+          </span>
+        )}
         <img
           src={Arrow2}
           alt="arrow"
-          className={`transform ${isOpen ? 'rotate-180' : 'rotate-0'} h-3 w-3 transition-transform`}
+          className={`transform ${
+            isOpen ? 'rotate-180' : 'rotate-0'
+          } h-3 w-3 transition-transform`}
         />
       </button>
       {isOpen && (
         <div
           className={`absolute left-0 right-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl ${border} border-${borderColor} bg-white shadow-lg dark:border-${borderColor}/40 dark:bg-dark-charcoal`}
-          style={{
-            transform: `translateY(${dropdownPosition.top}px)`, // Adjust Y position
-          }}
         >
           {options.map((option: any, index) => (
             <div
@@ -142,7 +130,15 @@ function Dropdown({
               >
                 {typeof option === 'string'
                   ? option
-                  : option.name || option.label || option.description}
+                  : option.name
+                    ? option.name
+                    : option.label
+                      ? option.label
+                      : `${
+                          option.value < 1e9
+                            ? option.value + ` (${option.description})`
+                            : option.description
+                        }`}
               </span>
               {showEdit && onEdit && (
                 <img
@@ -150,7 +146,11 @@ function Dropdown({
                   alt="Edit"
                   className="mr-4 h-4 w-4 cursor-pointer hover:opacity-50"
                   onClick={() => {
-                    onEdit(option);
+                    onEdit({
+                      id: option.id,
+                      name: option.name,
+                      type: option.type,
+                    });
                     setIsOpen(false);
                   }}
                 />
@@ -163,7 +163,11 @@ function Dropdown({
                   <img
                     src={Trash}
                     alt="Delete"
-                    className={`mr-2 h-4 w-4 cursor-pointer hover:opacity-50 ${option.type === 'public' ? 'cursor-not-allowed opacity-50' : ''}`}
+                    className={`mr-2 h-4 w-4 cursor-pointer hover:opacity-50 ${
+                      option.type === 'public'
+                        ? 'cursor-not-allowed opacity-50'
+                        : ''
+                    }`}
                   />
                 </button>
               )}
diff --git a/frontend/src/components/Help.tsx b/frontend/src/components/Help.tsx
new file mode 100644
index 00000000..b61f9c52
--- /dev/null
+++ b/frontend/src/components/Help.tsx
@@ -0,0 +1,97 @@
+import React, { useState, useRef, useEffect } from 'react';
+import InfoDark from '../assets/info-dark.svg';
+import PageIcon from '../assets/documentation.svg'; // Ensure this path is correct
+import EmailIcon from '../assets/envelope.svg'; // Replace with your actual email icon path
+
+const Help = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  const toggleDropdown = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node) &&
+      buttonRef.current &&
+      !buttonRef.current.contains(event.target as Node)
+    ) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const dropdownPosition = () => {
+    if (!buttonRef.current) return { top: '100%', left: '0' };
+
+    const rect = buttonRef.current.getBoundingClientRect();
+    const dropdownHeight = 80; // Adjust based on the content height
+    const spaceBelow = window.innerHeight - rect.bottom;
+
+    const dropdownWidth = 192; // Adjust to fit your design
+    const spaceRight = window.innerWidth - rect.right;
+
+    let leftPosition = 0; // Default to align with the button
+
+    if (spaceRight < dropdownWidth) {
+      leftPosition = dropdownWidth - rect.width;
+    }
+
+    if (spaceBelow >= dropdownHeight) {
+      return { top: '100%', left: `${leftPosition}px` }; // Open downward
+    } else {
+      return { top: `${-dropdownHeight}px`, left: `${leftPosition}px` }; // Open upward
+    }
+  };
+
+  return (
+    <div className="relative inline-block" ref={dropdownRef}>
+      <button
+        ref={buttonRef}
+        onClick={toggleDropdown}
+        className="flex items-center rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E] px-3 py-1"
+      >
+        <img
+          src={InfoDark}
+          alt="icon"
+          className="mr-2 w-5 filter dark:invert"
+        />
+        Help
+      </button>
+      {isOpen && (
+        <div
+          className={`absolute mt-2 w-48 shadow-lg bg-white dark:bg-gray-800`}
+          style={{ ...dropdownPosition(), borderRadius: '0.5rem' }}
+        >
+          <a
+            href="https://docs.docsgpt.cloud/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center px-4 py-2 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
+          >
+            <img src={PageIcon} alt="Documentation" className="mr-2 w-4 h-4" />
+            Documentation
+          </a>
+          <a
+            href="mailto:contact@arc53.com"
+            className="flex items-center px-4 py-2 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
+          >
+            <img src={EmailIcon} alt="Email Us" className="mr-2 w-4 h-4" />
+            Email Us
+          </a>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Help;
diff --git a/frontend/src/components/SourceDropdown.tsx b/frontend/src/components/SourceDropdown.tsx
index 6a348161..f92173a0 100644
--- a/frontend/src/components/SourceDropdown.tsx
+++ b/frontend/src/components/SourceDropdown.tsx
@@ -121,9 +121,12 @@ function SourceDropdown({
             className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:text-bright-gray dark:hover:bg-purple-taupe"
             onClick={handleEmptyDocumentSelect}
           >
-            <span className="ml-4 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3" onClick = {() => {
-              handlePostDocumentSelect(null);
-            }}>
+            <span
+              className="ml-4 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3"
+              onClick={() => {
+                handlePostDocumentSelect(null);
+              }}
+            >
               {t('none')}
             </span>
           </div>
diff --git a/frontend/src/locale/i18n.ts b/frontend/src/locale/i18n.ts
index 674a3467..72f9ec28 100644
--- a/frontend/src/locale/i18n.ts
+++ b/frontend/src/locale/i18n.ts
@@ -25,7 +25,7 @@ i18n
       zh: {
         translation: zh,
       },
-      "zh-TW": {
+      'zh-TW': {
         translation: zhTW,
       },
     },

From 5f62c0d57ae09e5cbec4552b12c5565a8688b2c3 Mon Sep 17 00:00:00 2001
From: sccalabr <4111230+sccalabr@users.noreply.github.com>
Date: Sun, 13 Oct 2024 09:33:45 -0700
Subject: [PATCH 5/6] fixing look

---
 frontend/signal-desktop-keyring.gpg | Bin 0 -> 2223 bytes
 frontend/src/Navigation.tsx         |  90 +++++++++++++++-------------
 frontend/src/components/Help.tsx    |   2 +-
 3 files changed, 48 insertions(+), 44 deletions(-)
 create mode 100644 frontend/signal-desktop-keyring.gpg

diff --git a/frontend/signal-desktop-keyring.gpg b/frontend/signal-desktop-keyring.gpg
new file mode 100644
index 0000000000000000000000000000000000000000..b5e68a0406c738a31fff4c4de4352399168f47e8
GIT binary patch
literal 2223
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

literal 0
HcmV?d00001

diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 09245d9d..6e3b6818 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -358,50 +358,54 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               </p>
             </NavLink>
           </div>
-          <div>
-            <div className="flex items-center justify-evenly gap-1 px-1 py-1">
-              <div className="rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]">
-                <Help />
+          <div className="flex flex-col justify-end text-eerie-black dark:text-white">
+            <div className="flex justify-between items-center px-1 py-1">
+              <div className="flex items-center gap-1">
+                <div className="rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]">
+                  <Help />
+                </div>
+              </div>
+              <div className="flex items-center gap-1">
+                <NavLink
+                  target="_blank"
+                  to={'https://discord.gg/WHJdfbQDR4'}
+                  className={
+                    'rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]'
+                  }
+                >
+                  <img
+                    src={Discord}
+                    alt="discord"
+                    className="m-2 w-6 self-center filter dark:invert"
+                  />
+                </NavLink>
+                <NavLink
+                  target="_blank"
+                  to={'https://twitter.com/docsgptai'}
+                  className={
+                    'rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]'
+                  }
+                >
+                  <img
+                    src={Twitter}
+                    alt="x"
+                    className="m-2 w-5 self-center filter dark:invert"
+                  />
+                </NavLink>
+                <NavLink
+                  target="_blank"
+                  to={'https://github.com/arc53/docsgpt'}
+                  className={
+                    'rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]'
+                  }
+                >
+                  <img
+                    src={Github}
+                    alt="github"
+                    className="m-2 w-6 self-center filter dark:invert"
+                  />
+                </NavLink>
               </div>
-              <NavLink
-                target="_blank"
-                to={'https://discord.gg/WHJdfbQDR4'}
-                className={
-                  'rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]'
-                }
-              >
-                <img
-                  src={Discord}
-                  alt="discord"
-                  className="m-2 w-6 self-center filter dark:invert"
-                />
-              </NavLink>
-              <NavLink
-                target="_blank"
-                to={'https://twitter.com/docsgptai'}
-                className={
-                  'rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]'
-                }
-              >
-                <img
-                  src={Twitter}
-                  alt="x"
-                  className="m-2 w-5 self-center filter dark:invert"
-                />
-              </NavLink>
-              <NavLink
-                target="_blank"
-                to={'https://github.com/arc53/docsgpt'}
-                className={
-                  'rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]'
-                }
-              >
-                <img
-                  src={Github}
-                  alt="github"
-                  className="m-2 w-6 self-center filter dark:invert"
-                />
-              </NavLink>
             </div>
           </div>
         </div>
diff --git a/frontend/src/components/Help.tsx b/frontend/src/components/Help.tsx
index b61f9c52..38e4468f 100644
--- a/frontend/src/components/Help.tsx
+++ b/frontend/src/components/Help.tsx
@@ -63,7 +63,7 @@ const Help = () => {
         <img
           src={InfoDark}
           alt="icon"
-          className="mr-2 w-5 filter dark:invert"
+          className="m-2 w-6 self-center text-sm filter dark:invert"
         />
         Help
       </button>

From 56e3a1c3b2b03d7fe6867befb9605b47f173df7f Mon Sep 17 00:00:00 2001
From: Digvijay Shelar <82649533+shelar1423@users.noreply.github.com>
Date: Mon, 14 Oct 2024 17:08:47 +0530
Subject: [PATCH 6/6] DocsGPT DEMO UPDATED

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f1942dc1..ee9a1af6 100644
--- a/README.md
+++ b/README.md
@@ -35,7 +35,8 @@ We're eager to provide personalized assistance when deploying your DocsGPT to a
 
 [Send Email :email:](mailto:contact@arc53.com?subject=DocsGPT%20support%2Fsolutions)
 
-![video-example-of-docs-gpt](https://d3dg1063dc54p9.cloudfront.net/videos/demov3.gif)
+
+<img src="https://github.com/user-attachments/assets/9a1f21de-7a15-4e42-9424-70d22ba5a913" alt="video-example-of-docs-gpt" width="1000" height="500">
 
 ## Roadmap