LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-30 00:53:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Addressing comments

Browse Source
This commit is contained in:
sccalabr
2024-10-05 18:16:09 -07:00
parent e1a8184c2e
commit ea49095b0a
10 changed files with 174 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/App.tsx
View File

@@ -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">

33
frontend/src/Navigation.tsx
View File

@@ -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'}

5
frontend/src/assets/documentation-dark.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 933 B

After

Width:  |  Height:  |  Size: 839 B

5
frontend/src/assets/documentation.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 951 B

After

Width:  |  Height:  |  Size: 839 B

3
frontend/src/assets/envelope-dark.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
frontend/src/assets/envelope.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

94
frontend/src/components/Dropdown.tsx
View File

@@ -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>
)}

97
frontend/src/components/Help.tsx Normal file
View File

@@ -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;

9
frontend/src/components/SourceDropdown.tsx
View File

@@ -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>

2
frontend/src/locale/i18n.ts
View File

@@ -25,7 +25,7 @@ i18n
zh: {
translation: zh,
},
"zh-TW": {
'zh-TW': {
translation: zhTW,
},
},