Skip to content

Commit

Permalink
Merge branch 'arc53:main' into chore/upgrade-python-deps-for-duckduckgo
Browse files Browse the repository at this point in the history
  • Loading branch information
Mayurakshi-mondal authored Oct 15, 2024
2 parents 74a11da + d7c09e3 commit b2e45e8
Show file tree
Hide file tree
Showing 7 changed files with 44 additions and 49 deletions.
7 changes: 2 additions & 5 deletions frontend/src/Navigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -360,11 +360,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
</div>
<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>
<Help />

<div className="flex items-center gap-1">
<NavLink
target="_blank"
Expand Down
71 changes: 27 additions & 44 deletions frontend/src/components/Help.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
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

import { useState, useRef, useEffect } from 'react';
import Info from '../assets/info.svg';
import PageIcon from '../assets/documentation.svg';
import EmailIcon from '../assets/envelope.svg';
import { useTranslation } from 'react-i18next';
const Help = () => {
const [isOpen, setIsOpen] = useState(false);
const dropdownRef = useRef<HTMLDivElement | null>(null);
const buttonRef = useRef<HTMLButtonElement | null>(null);
const { t } = useTranslation();

const toggleDropdown = () => {
setIsOpen((prev) => !prev);
Expand All @@ -30,63 +31,45 @@ const Help = () => {
};
}, []);

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}>
<div className="relative inline-block text-sm" 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"
className="my-auto mx-4 w-full flex items-center h-9 gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E]"
>
<img
src={InfoDark}
alt="icon"
className="m-2 w-6 self-center text-sm filter dark:invert"
/>
Help
<img src={Info} alt="info" className="ml-1 w-5 filter dark:invert" />
{t('help')}
</button>
{isOpen && (
<div
className={`absolute mt-2 w-48 shadow-lg bg-white dark:bg-gray-800`}
style={{ ...dropdownPosition(), borderRadius: '0.5rem' }}
className={`absolute translate-x-4 -translate-y-28 z-10 w-48 shadow-lg bg-white dark:bg-[#444654] rounded-xl`}
>
<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"
className="flex items-start gap-4 px-4 py-2 text-black dark:text-white hover:bg-bright-gray dark:hover:bg-[#545561] rounded-t-xl"
>
<img src={PageIcon} alt="Documentation" className="mr-2 w-4 h-4" />
Documentation
<img
src={PageIcon}
alt="Documentation"
className="filter dark:invert"
width={20}
/>
{t('documentation')}
</a>
<a
href="mailto:[email protected]"
className="flex items-center px-4 py-2 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
className="flex items-start gap-4 px-4 py-2 text-black dark:text-white hover:bg-bright-gray dark:hover:bg-[#545561] rounded-b-xl"
>
<img src={EmailIcon} alt="Email Us" className="mr-2 w-4 h-4" />
Email Us
<img
src={EmailIcon}
alt="Email Us"
className="filter dark:invert p-0.5"
width={20}
/>
{t('emailUs')}
</a>
</div>
)}
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/locale/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
"sourceDocs": "Source",
"none": "None",
"cancel": "Cancel",
"help":"Help",
"emailUs":"Email us",
"documentation":"documentation",
"demo": [
{
"header": "Learn about DocsGPT",
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/locale/es.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
"sourceDocs": "Fuente",
"none": "Nada",
"cancel": "Cancelar",
"help":"Asistencia",
"emailUs": "Envíanos un correo",
"documentation": "documentación",
"demo": [
{
"header": "Aprende sobre DocsGPT",
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/locale/jp.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
"sourceDocs": "ソース",
"none": "なし",
"cancel": "キャンセル",
"help":"ヘルプ",
"emailUs": "メールを送る",
"documentation": "ドキュメント",
"demo": [
{
"header": "DocsGPTについて学ぶ",
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/locale/zh-TW.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
"sourceDocs": "原始文件",
"none": "",
"cancel": "取消",
"help":"聯繫支援",
"emailUs": "寄送電子郵件給我們",
"documentation": "文件",
"demo": [
{
"header": "了解 DocsGPT",
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/locale/zh.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
"sourceDocs": "",
"none": "",
"cancel": "取消",
"help":"联系支持",
"emailUs": "给我们发邮件",
"documentation": "文档",
"demo": [
{
"header": "了解 DocsGPT",
Expand Down

0 comments on commit b2e45e8

Please sign in to comment.