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

(feat:consitency)modals, dropdowns

Browse Source
This commit is contained in:
ManishMadan2882
2025-02-19 04:01:14 +05:30
parent 0d9fc26119
commit 8589303753
7 changed files with 123 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -119,7 +119,7 @@ function Dropdown({
{options.map((option: any, index) => (
<div
key={index}
className="hover:eerie-black flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-purple-taupe"
className="hover:eerie-black flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-[#545561]"
>
<span
onClick={() => {

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

@@ -83,7 +83,7 @@ function SourceDropdown({
return (
<div
key={index}
className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:text-bright-gray dark:hover:bg-purple-taupe"
className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:text-bright-gray dark:hover:bg-[#545561]"
onClick={() => {
dispatch(setSelectedDocs(option));
setIsDocsListOpen(false);

22
frontend/src/modals/SaveAPIKeyModal.tsx
View File

@@ -1,8 +1,8 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import Exit from '../assets/exit.svg';
import { SaveAPIKeyModalProps } from '../models/misc';
import WrapperModal from './WrapperModal';
export default function SaveAPIKeyModal({
apiKey,
@@ -15,23 +15,19 @@ export default function SaveAPIKeyModal({
navigator.clipboard.writeText(apiKey);
setIsCopied(true);
};
return (
<div className="fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
<div className="relative w-11/12 rounded-3xl bg-white px-6 py-8 dark:bg-outer-space dark:text-bright-gray sm:w-[512px]">
<button className="absolute top-3 right-4 m-2 w-3" onClick={close}>
<img className="filter dark:invert" src={Exit} />
</button>
<h1 className="my-0 text-xl font-medium">
{' '}
<WrapperModal close={close}>
<h1 className="my-0 text-xl font-medium text-jet dark:text-bright-gray">
{t('modals.saveKey.note')}
</h1>
<h3 className="text-sm font-normal text-outer-space">
<h3 className="text-sm font-normal text-outer-space dark:text-silver">
{t('modals.saveKey.disclaimer')}
</h3>
<div className="flex justify-between py-2">
<div>
<h2 className="text-base font-semibold">API Key</h2>
<span className="text-sm font-normal leading-7 ">{apiKey}</span>
<h2 className="text-base font-semibold text-jet dark:text-bright-gray">API Key</h2>
<span className="text-sm font-normal leading-7 text-jet dark:text-bright-gray">{apiKey}</span>
</div>
<button
className="my-1 h-10 w-20 rounded-full border border-solid border-purple-30 p-2 text-sm text-purple-30 hover:bg-purple-30 hover:text-white"
@@ -46,7 +42,7 @@ export default function SaveAPIKeyModal({
>
{t('modals.saveKey.confirm')}
</button>
</div>
</div>
</WrapperModal>
);
}

58
frontend/src/preferences/PromptsModal.tsx
View File

@@ -1,8 +1,8 @@
import { ActiveState } from '../models/misc';
import Exit from '../assets/exit.svg';
import Input from '../components/Input';
import React from 'react';
import { useTranslation } from 'react-i18next';
import WrapperModal from '../modals/WrapperModal';
function AddPrompt({
setModalState,
@@ -24,19 +24,7 @@ function AddPrompt({
const { t } = useTranslation();
return (
<div className="relative">
<button
className="absolute top-3 right-4 m-2 w-3"
onClick={() => {
setModalState('INACTIVE');
setNewPromptName('');
setNewPromptContent('');
}}
aria-label="Close add prompt modal"
>
<img className="filter dark:invert" src={Exit} alt="Close modal" />
</button>
<div className="p-8">
<div>
<p className="mb-1 text-xl text-jet dark:text-bright-gray">
{t('modals.prompts.addPrompt')}
</p>
@@ -50,17 +38,13 @@ function AddPrompt({
<Input
placeholder={t('modals.prompts.promptName')}
type="text"
label={t('modals.prompts.promptName')}
className="h-10 rounded-lg"
value={newPromptName}
onChange={(e) => setNewPromptName(e.target.value)}
/>
<div className="relative bottom-12 left-3 mt-[-3.00px]">
<span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">
{t('modals.prompts.promptName')}
</span>
</div>
<div className="relative top-[7px] left-3">
<span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">
<span className="bg-white px-1 text-xs text-silver dark:bg-[#26272E] dark:text-silver">
{t('modals.prompts.promptText')}
</span>
</div>
@@ -88,7 +72,6 @@ function AddPrompt({
</button>
</div>
</div>
</div>
);
}
@@ -114,16 +97,7 @@ function EditPrompt({
const { t } = useTranslation();
return (
<div className="relative">
<button
className="absolute top-3 right-4 m-2 w-3"
onClick={() => {
setModalState('INACTIVE');
}}
aria-label="Close edit prompt modal"
>
<img className="filter dark:invert" src={Exit} alt="Close modal" />
</button>
<div>
<div className="p-8">
<p className="mb-1 text-xl text-jet dark:text-bright-gray">
{t('modals.prompts.editPrompt')}
@@ -271,15 +245,19 @@ export default function PromptsModal({
} else {
view = <></>;
}
return (
<article
className={`${
modalState === 'ACTIVE' ? 'visible' : 'hidden'
} fixed top-0 left-0 z-30 h-screen w-screen bg-gray-alpha`}
return modalState === 'ACTIVE' ? (
<WrapperModal
close={() => {
setModalState('INACTIVE');
if (type === 'ADD') {
setNewPromptName('');
setNewPromptContent('');
}
}}
className="sm:w-[512px] mt-24"
>
<article className="mx-auto mt-24 flex w-[90vw] max-w-lg flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-outer-space">
{view}
</article>
</article>
);
</WrapperModal>
) : null;
}

8
frontend/src/settings/Analytics.tsx
View File

@@ -92,8 +92,10 @@ export default function Analytics() {
const [loadingMessages, setLoadingMessages] = useLoaderState(true);
const [loadingTokens, setLoadingTokens] = useLoaderState(true);
const [loadingFeedback, setLoadingFeedback] = useLoaderState(true);
const [loadingChatbots, setLoadingChatbots] = useLoaderState(true);
const fetchChatbots = async () => {
setLoadingChatbots(true);
try {
const response = await userService.getAPIKeys();
if (!response.ok) {
@@ -103,6 +105,8 @@ export default function Analytics() {
setChatbots(chatbots);
} catch (error) {
console.error(error);
} finally {
setLoadingChatbots(false);
}
};
@@ -188,6 +192,9 @@ export default function Analytics() {
return (
<div className="mt-12">
<div className="flex flex-col items-start">
{loadingChatbots ? (
<SkeletonLoader component="dropdown" />
) : (
<div className="flex flex-col gap-3">
<p className="font-bold text-jet dark:text-bright-gray">
{t('settings.analytics.filterByChatbot')}
@@ -219,6 +226,7 @@ export default function Analytics() {
borderColor="gray-700"
/>
</div>
)}
{/* Messages Analytics */}
<div className="mt-8 w-full flex flex-col [@media(min-width:1080px)]:flex-row gap-3">

2
frontend/src/settings/Prompts.tsx
View File

@@ -168,7 +168,7 @@ export default function Prompts({
/>
</div>
<button
className="mt-[24px] rounded-3xl border border-solid border-purple-700 px-5 py-3 text-purple-700 transition-colors hover:bg-purple-700 hover:text-white dark:border-purple-400 dark:text-purple-400 dark:hover:bg-purple-400 dark:hover:text-white"
className="mt-[24px] rounded-3xl border border-solid border-purple-30 px-5 py-3 text-purple-30 transition-colors hover:text-white hover:bg-[#6F3FD1] dark:border-purple-30 dark:text-purple-30 dark:hover:bg-purple-30 dark:hover:text-white"
onClick={() => {
setModalType('ADD');
setModalState('ACTIVE');

30
frontend/src/upload/Upload.tsx
View File

@@ -101,7 +101,7 @@ function Upload({
borderVariant="thin"
label={field.label}
required={isRequired}
colorVariant="gray"
colorVariant="silver"
/>
);
case 'number':
@@ -123,7 +123,7 @@ function Upload({
borderVariant="thin"
label={field.label}
required={isRequired}
colorVariant="gray"
colorVariant="silver"
/>
);
case 'enum':
@@ -572,13 +572,13 @@ function Upload({
</p>
{!activeTab && (
<div>
<p className="text-gray-6000 dark:text-bright-gray text-sm text-center font-medium">
<p className="dark 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="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"
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-transparent text-[#777777] dark:bg-transparent dark:text-[#c3c3c3] hover:border-purple-30 border-[#D7D7D7] h-40 w-40 md:w-52 md:h-52"
>
<img
src={FileUpload}
@@ -588,7 +588,7 @@ function Upload({
</button>
<button
onClick={() => setActiveTab('remote')}
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"
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-transparent text-[#777777] dark:bg-transparent dark:text-[#c3c3c3] hover:border-purple-30 border-[#D7D7D7] h-40 w-40 md:w-52 md:h-52"
>
<img
src={WebsiteCollect}
@@ -598,23 +598,21 @@ function Upload({
</button>
</div>
</div>
)}
)}
{activeTab === 'file' && (
<>
<Input
type="text"
colorVariant="gray"
colorVariant="silver"
value={docName}
onChange={(e) => setDocName(e.target.value)}
borderVariant="thin"
></Input>
<div className="relative bottom-12 left-2 mt-[-20px]">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.uploadDoc.name')}
</span>
</div>
<div {...getRootProps()}>
placeholder={t('modals.uploadDoc.name')}
label={t('modals.uploadDoc.name')}
required={true}
/>
<div className='my-2' {...getRootProps()}>
<span className="rounded-3xl bg-transparent px-4 py-2 font-medium text-purple-30 hover:cursor-pointer dark:text-silver border border-[#7F7F82]">
<input type="button" {...getInputProps()} />
{t('modals.uploadDoc.choose')}
@@ -649,7 +647,7 @@ function Upload({
{activeTab === 'remote' && (
<>
<Dropdown
border="border-2"
border="border"
options={urlOptions}
selectedValue={
urlOptions.find((opt) => opt.value === ingestor.type) || null
@@ -664,7 +662,7 @@ function Upload({
<Input
type="text"
colorVariant="gray"
colorVariant="silver"
value={remoteName}
onChange={(e) => setRemoteName(e.target.value)}
borderVariant="thin"