Archives
/
DocsGPT
mirror of https://github.com/arc53/DocsGPT
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #946 from siiddhantt/refactor/ui-elements

Browse Source 
refactor: several small ui refactor for generalisation
pull/952/head
Alex 4 weeks ago committed by GitHub
parent 16b2a54981 96034a9712
commit a69ac372fa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 193 additions and 114 deletions
Show Stats Download Patch File Download Diff File

BIN
frontend/public/fonts/Inter-Variable.ttf
View File

Binary file not shown.

24
frontend/src/Navigation.tsx
Unescape Escape View File

@ -20,7 +20,7 @@ import Add from './assets/add.svg';
import UploadIcon from './assets/upload.svg';
import { ActiveState } from './models/misc';
import APIKeyModal from './preferences/APIKeyModal';
import DeleteConvModal from './preferences/DeleteConvModal';
import DeleteConvModal from './modals/DeleteConvModal';
import {
selectApiKeyStatus,
@ -275,10 +275,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
</p>
</NavLink>
<div className="mb-auto h-[56vh] overflow-y-auto overflow-x-hidden dark:text-white">
{conversations && (
{conversations && conversations.length > 0 ? (
<div>
<div className=" my-auto mx-4 mt-2 flex h-6 items-center justify-between gap-4 rounded-3xl">
<p className="my-auto ml-6 text-sm font-semibold">Chats</p>
<p className="mt-1 ml-4 text-sm font-semibold">Chats</p>
</div>
<div className="conversations-container">
{conversations?.map((conversation) => (
@ -294,12 +294,14 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
))}
</div>
</div>
) : (
<></>
)}
</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 flex gap-2 px-2">
<div className="relative my-4 mx-4 flex gap-2">
<SourceDropdown
options={docs}
selectedDocs={selectedDocs}
@ -314,13 +316,13 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
onClick={() => setUploadModalState('ACTIVE')}
></img>
</div>
<p className="ml-6 mt-3 text-sm font-semibold">Source Docs</p>
<p className="ml-5 mt-3 text-sm font-semibold">Source Docs</p>
</div>
<div className="flex flex-col gap-2 border-b-[1px] py-2 dark:border-b-purple-taupe">
<NavLink
to="/settings"
className={({ isActive }) =>
`my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe ${
`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-transparent' : ''
}`
}
@ -335,8 +337,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
<NavLink
to="/about"
className={({ isActive }) =>
`my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe ${
isActive ? 'bg-gray-3000 dark:bg-purple-taupe' : ''
`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]' : ''
}`
}
>
@ -348,7 +350,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
href="https://docs.docsgpt.cloud/"
target="_blank"
rel="noreferrer"
className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E]"
>
<NavImage Light={Documentation} Dark={DocumentationDark} />
<p className="my-auto text-sm ">Documentation</p>
@ -357,7 +359,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
href="https://discord.gg/WHJdfbQDR4"
target="_blank"
rel="noreferrer"
className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E]"
>
<NavImage Light={Discord} Dark={DiscordDark} />
{/* <img src={isDarkTheme ? DiscordDark : Discord} alt="discord-link" className="ml-2 w-5" /> */}
@ -368,7 +370,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
href="https://github.com/arc53/DocsGPT"
target="_blank"
rel="noreferrer"
className="mx-4 mt-auto flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
className="mx-4 mt-auto flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E]"
>
<NavImage Light={Github} Dark={GithubDark} />
<p className="my-auto text-sm">Visit our Github</p>

14
frontend/src/components/Dropdown.tsx
Unescape Escape View File

@ -9,6 +9,8 @@ function Dropdown({
onSelect,
size = 'w-32',
rounded = 'xl',
border = 'border-2',
borderColor = 'silver',
showEdit,
onEdit,
showDelete,
@ -26,6 +28,8 @@ function Dropdown({
| ((value: { label: string; value: string }) => void);
size?: string;
rounded?: 'xl' | '3xl';
border?: 'border' | 'border-2';
borderColor?: string;
showEdit?: boolean;
onEdit?: (value: { name: string; id: string; type: string }) => void;
showDelete?: boolean;
@ -33,6 +37,8 @@ function Dropdown({
placeholder?: string;
}) {
const [isOpen, setIsOpen] = React.useState(false);
const borderRadius = rounded === 'xl' ? 'rounded-xl' : 'rounded-3xl';
const borderTopRadius = rounded === 'xl' ? 'rounded-t-xl' : 'rounded-t-3xl';
return (
<div
className={[
@ -44,8 +50,8 @@ function Dropdown({
>
<button
onClick={() => setIsOpen(!isOpen)}
className={`flex w-full cursor-pointer items-center justify-between border-2 border-silver bg-white px-5 py-3 dark:border-chinese-silver dark:bg-transparent ${
isOpen ? `rounded-t-${rounded}` : `rounded-${rounded}`
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' ? (
@ -74,7 +80,9 @@ function Dropdown({
/>
</button>
{isOpen && (
<div className="absolute left-0 right-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl border-2 border-silver bg-white shadow-lg dark:border-chinese-silver dark:bg-dark-charcoal">
<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`}
>
{options.map((option: any, index) => (
<div
key={index}

16
frontend/src/components/SourceDropdown.tsx
Unescape Escape View File

@ -34,14 +34,16 @@ function SourceDropdown({
<div className="relative w-5/6 rounded-3xl">
<button
onClick={() => setIsDocsListOpen(!isDocsListOpen)}
className={`flex w-full cursor-pointer items-center border-2 bg-white p-3 dark:border-chinese-silver dark:bg-transparent ${
isDocsListOpen ? 'rounded-t-3xl' : 'rounded-3xl'
className={`flex w-full cursor-pointer items-center border border-silver bg-white p-[14px] dark:bg-transparent ${
isDocsListOpen
? 'rounded-t-3xl dark:border-silver/40'
: 'rounded-3xl dark:border-purple-taupe'
}`}
>
<span className="ml-1 mr-2 flex-1 overflow-hidden text-ellipsis text-left dark:text-bright-gray">
<div className="flex flex-row gap-2">
<p className="max-w-3/4 truncate whitespace-nowrap">
{selectedDocs?.name || ''}
{selectedDocs?.name || 'None'}
</p>
<p className="flex flex-col items-center justify-center">
{selectedDocs?.version}
@ -57,7 +59,7 @@ function SourceDropdown({
/>
</button>
{isDocsListOpen && (
<div className="absolute left-0 right-0 z-50 -mt-1 max-h-40 overflow-y-auto rounded-b-xl border-2 bg-white shadow-lg dark:border-chinese-silver dark:bg-dark-charcoal">
<div className="absolute left-0 right-0 z-50 -mt-1 max-h-40 overflow-y-auto rounded-b-xl border border-silver bg-white shadow-lg dark:border-silver/40 dark:bg-dark-charcoal">
{options ? (
options.map((option: any, index: number) => {
if (option.model === embeddingsName) {
@ -95,16 +97,14 @@ function SourceDropdown({
}
})
) : (
<div className="h-10 w-full cursor-pointer border-b-[1px] hover:bg-gray-100 dark:border-b-purple-taupe dark:hover:bg-purple-taupe">
<p className="ml-5 py-3">No default documentation.</p>
</div>
<></>
)}
<div
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">
Empty
None
</span>
</div>
</div>

13
frontend/src/conversation/ConversationTile.tsx
Unescape Escape View File

@ -32,15 +32,6 @@ export default function ConversationTile({
const [isDarkTheme] = useDarkTheme();
const [isEdit, setIsEdit] = useState(false);
const [conversationName, setConversationsName] = useState('');
// useOutsideAlerter(
// tileRef,
// () =>
// handleSaveConversation({
// id: conversationId || conversation.id,
// name: conversationName,
// }),
// [conversationName],
// );
useEffect(() => {
setConversationsName(conversation.name);
@ -69,9 +60,9 @@ export default function ConversationTile({
onClick={() => {
selectConversation(conversation.id);
}}
className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe ${
className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
conversationId === conversation.id
? 'bg-gray-100 dark:bg-purple-taupe'
? 'bg-gray-100 dark:bg-[#28292E]'
: ''
}`}
>

10
frontend/src/index.css
Unescape Escape View File

@ -398,3 +398,13 @@ template {
padding: 16px;
}
}
@font-face {
font-family: 'Inter';
font-weight: 100 200 300 400 500 600 700 800 900;
src: url('/fonts/Inter-Variable.ttf');
}
::-webkit-scrollbar {
width: 0;
}

68
frontend/src/modals/ConfirmationModal.tsx
Unescape Escape View File

@ -0,0 +1,68 @@
import Exit from '../assets/exit.svg';
import { ActiveState } from '../models/misc';
function ConfirmationModal({
message,
modalState,
setModalState,
submitLabel,
handleSubmit,
cancelLabel,
handleCancel,
}: {
message: string;
modalState: ActiveState;
setModalState: (state: ActiveState) => void;
submitLabel: string;
handleSubmit: () => void;
cancelLabel?: string;
handleCancel?: () => void;
}) {
return (
<article
className={`${
modalState === 'ACTIVE' ? 'visible' : 'hidden'
} fixed top-0 left-0 z-30 h-screen w-screen bg-gray-alpha`}
>
<article className="mx-auto mt-[35vh] flex w-[90vw] max-w-lg flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-outer-space">
<div className="relative">
<button
className="absolute top-3 right-4 m-2 w-3"
onClick={() => {
setModalState('INACTIVE');
handleCancel && handleCancel();
}}
>
<img className="filter dark:invert" src={Exit} />
</button>
<div className="p-8">
<p className="font-base mb-1 w-[90%] text-lg text-jet dark:text-bright-gray">
{message}
</p>
<div>
<div className="mt-6 flex flex-row-reverse gap-1">
<button
onClick={handleSubmit}
className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
>
{submitLabel}
</button>
<button
onClick={() => {
setModalState('INACTIVE');
handleCancel && handleCancel();
}}
className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
>
{cancelLabel ? cancelLabel : 'Cancel'}
</button>
</div>
</div>
</div>
</div>
</article>
</article>
);
}
export default ConfirmationModal;

33
frontend/src/preferences/DeleteConvModal.tsx → frontend/src/modals/DeleteConvModal.tsx
Unescape Escape View File

@ -1,8 +1,9 @@
import { useRef } from 'react';
import { ActiveState } from '../models/misc';
import { useMediaQuery, useOutsideAlerter } from './../hooks';
import Modal from '../Modal';
import React from 'react';
import { useDispatch } from 'react-redux';
import { ActiveState } from '../models/misc';
import { useMediaQuery, useOutsideAlerter } from '../hooks';
import ConfirmationModal from './ConfirmationModal';
import { Action } from '@reduxjs/toolkit';
export default function DeleteConvModal({
@ -14,8 +15,8 @@ export default function DeleteConvModal({
setModalState: (val: ActiveState) => Action;
handleDeleteAllConv: () => void;
}) {
const modalRef = React.useRef(null);
const dispatch = useDispatch();
const modalRef = useRef(null);
const { isMobile } = useMediaQuery();
useOutsideAlerter(
@ -38,25 +39,13 @@ export default function DeleteConvModal({
}
return (
<Modal
handleCancel={handleCancel}
isError={false}
<ConfirmationModal
message="Are you sure you want to delete all the conversations?"
modalState={modalState}
isCancellable={true}
setModalState={setModalState}
submitLabel={'Delete'}
handleSubmit={handleSubmit}
textDelete={true}
render={() => {
return (
<article
ref={modalRef}
className="mx-auto mt-24 flex w-[90vw] max-w-lg flex-col gap-4 rounded-t-lg bg-white dark:bg-outer-space dark:text-silver p-6 shadow-lg"
>
<p className="text-xl text-jet dark:text-silver">
Are you sure you want to delete all the conversations?
</p>
</article>
);
}}
handleCancel={handleCancel}
/>
);
}

0
frontend/src/Modal/index.tsx → frontend/src/modals/index.tsx
Unescape Escape View File

2
frontend/src/preferences/APIKeyModal.tsx
Unescape Escape View File

@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
import { ActiveState } from '../models/misc';
import { selectApiKey, setApiKey } from './preferenceSlice';
import { useMediaQuery, useOutsideAlerter } from './../hooks';
import Modal from '../Modal';
import Modal from '../modals';
export default function APIKeyModal({
modalState,

8
frontend/src/preferences/PromptsModal.tsx
Unescape Escape View File

@ -37,7 +37,7 @@ function AddPrompt({
<input
placeholder="Prompt Name"
type="text"
className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
value={newPromptName}
onChange={(e) => setNewPromptName(e.target.value)}
></input>
@ -52,7 +52,7 @@ function AddPrompt({
</span>
</div>
<textarea
className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:bg-transparent dark:text-silver"
className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
value={newPromptContent}
onChange={(e) => setNewPromptContent(e.target.value)}
></textarea>
@ -108,7 +108,7 @@ function EditPrompt({
<input
placeholder="Prompt Name"
type="text"
className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
value={editPromptName}
onChange={(e) => setEditPromptName(e.target.value)}
></input>
@ -123,7 +123,7 @@ function EditPrompt({
</span>
</div>
<textarea
className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:bg-transparent dark:text-silver"
className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
value={editPromptContent}
onChange={(e) => setEditPromptContent(e.target.value)}
></textarea>

2
frontend/src/preferences/SelectDocsModal.tsx
Unescape Escape View File

@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { ActiveState } from '../models/misc';
import Modal from '../Modal';
import Modal from '../modals';
import {
setSelectedDocs,
setSourceDocs,

8
frontend/src/settings/APIKeys.tsx
Unescape Escape View File

@ -95,7 +95,7 @@ const APIKeys: React.FC = () => {
<div className="flex justify-end">
<button
onClick={() => setCreateModal(true)}
className="rounded-full bg-purple-30 px-4 py-3 text-sm text-white hover:opacity-90"
className="rounded-full bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]"
>
Create new
</button>
@ -234,7 +234,7 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
</span>
<input
type="text"
className="h-10 w-full rounded-md border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
className="h-[42px] w-full rounded-md border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
value={APIKeyName}
onChange={(e) => setAPIKeyName(e.target.value)}
/>
@ -285,7 +285,7 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
chunks: chunk,
})
}
className="float-right mt-4 rounded-full bg-purple-30 px-4 py-3 text-white disabled:opacity-50"
className="float-right mt-4 rounded-full bg-purple-30 px-5 py-2 text-sm text-white hover:bg-[#6F3FD1] disabled:opacity-50"
>
Create
</button>
@ -316,7 +316,7 @@ const SaveAPIKeyModal: React.FC<SaveAPIKeyModalProps> = ({ apiKey, close }) => {
<span className="text-sm font-normal leading-7 ">{apiKey}</span>
</div>
<button
className="my-1 h-10 w-20 rounded-full border border-purple-30 p-2 text-sm text-purple-30 hover:bg-purple-30 hover:text-white dark:border-purple-500 dark:text-purple-500"
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"
onClick={handleCopyKey}
>
{isCopied ? 'Copied' : 'Copy'}

19
frontend/src/settings/General.tsx
Unescape Escape View File

@ -47,7 +47,7 @@ const General: React.FC = () => {
return (
<div className="mt-[59px]">
<div className="mb-4">
<div className="mb-5">
<p className="font-bold text-jet dark:text-bright-gray">Select Theme</p>
<Dropdown
options={themes}
@ -58,9 +58,10 @@ const General: React.FC = () => {
}}
size="w-56"
rounded="3xl"
border="border"
/>
</div>
<div className="mb-4">
<div className="mb-5">
<p className="font-bold text-jet dark:text-bright-gray">
Select Language
</p>
@ -70,9 +71,10 @@ const General: React.FC = () => {
onSelect={setSelectedLanguage}
size="w-56"
rounded="3xl"
border="border"
/>
</div>
<div className="mb-4">
<div className="mb-5">
<p className="font-bold text-jet dark:text-bright-gray">
Chunks processed per query
</p>
@ -82,9 +84,10 @@ const General: React.FC = () => {
onSelect={(value: string) => dispatch(setChunks(value))}
size="w-56"
rounded="3xl"
border="border"
/>
</div>
<div>
<div className="mb-5">
<Prompts
prompts={prompts}
selectedPrompt={selectedPrompt}
@ -95,17 +98,15 @@ const General: React.FC = () => {
apiHost={apiHost}
/>
</div>
<div className="w-55 w-56">
<div className="w-56">
<p className="font-bold text-jet dark:text-bright-gray">
Delete all conversations
</p>
<button
className="mt-2 flex w-full cursor-pointer items-center justify-between rounded-3xl border-2 border-solid border-purple-30 px-5 py-3 text-purple-30 hover:bg-purple-30 hover:text-white"
className="mt-2 flex w-full cursor-pointer items-center justify-between rounded-3xl border border-solid border-red-500 px-5 py-3 text-red-500 hover:bg-red-500 hover:text-white"
onClick={() => dispatch(setModalStateDeleteConv('ACTIVE'))}
>
<span className="overflow-hidden text-ellipsis ">
Delete
</span>
<span className="overflow-hidden text-ellipsis ">Delete all</span>
</button>
</div>
</div>

5
frontend/src/settings/Prompts.tsx
Unescape Escape View File

@ -156,7 +156,7 @@ const Prompts: React.FC<PromptProps> = ({
return (
<>
<div>
<div className="mb-4 flex flex-row items-center gap-8">
<div className="flex flex-row items-center gap-8">
<div>
<p className="font-semibold dark:text-bright-gray">Active Prompt</p>
<Dropdown
@ -165,6 +165,7 @@ const Prompts: React.FC<PromptProps> = ({
onSelect={handleSelectPrompt}
size="w-56"
rounded="3xl"
border="border"
showEdit
showDelete
onEdit={({
@ -186,7 +187,7 @@ const Prompts: React.FC<PromptProps> = ({
/>
</div>
<button
className="mt-[24px] rounded-3xl border-2 border-solid border-purple-30 px-5 py-3 text-purple-30 hover:bg-purple-30 hover:text-white"
className="mt-[24px] rounded-3xl border border-solid border-purple-30 px-5 py-3 text-purple-30 hover:bg-purple-30 hover:text-white"
onClick={() => {
setModalType('ADD');
setModalState('ACTIVE');

85
frontend/src/upload/Upload.tsx
Unescape Escape View File

@ -266,11 +266,11 @@ export default function Upload({
<>
<input
type="text"
className="h-10 w-full rounded-full border-2 border-gray-5000 px-3 outline-none dark:bg-transparent dark:text-silver"
className="h-[42px] w-full rounded-full border-2 border-gray-5000 px-3 outline-none dark:bg-transparent dark:text-silver"
value={docName}
onChange={(e) => setDocName(e.target.value)}
></input>
<div className="relative bottom-12 left-2 mt-[-18.39px]">
<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">
Name
</span>
@ -315,24 +315,24 @@ export default function Upload({
<input
placeholder="Enter name"
type="text"
className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
value={urlName}
onChange={(e) => setUrlName(e.target.value)}
></input>
<div className="relative bottom-12 left-2 mt-[-18.39px]">
<span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
<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">
Name
</span>
</div>
<input
placeholder="URL Link"
type="text"
className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
value={url}
onChange={(e) => setUrl(e.target.value)}
></input>
<div className="relative bottom-12 left-2 mt-[-18.39px]">
<span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
<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">
Link
</span>
</div>
@ -342,65 +342,65 @@ export default function Upload({
<input
placeholder="Enter client ID"
type="text"
className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
name="client_id"
value={redditData.client_id}
onChange={handleChange}
></input>
<div className="relative bottom-12 left-2 mt-[-18.39px]">
<span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
<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">
Client ID
</span>
</div>
<input
placeholder="Enter client secret"
type="text"
className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
name="client_secret"
value={redditData.client_secret}
onChange={handleChange}
></input>
<div className="relative bottom-12 left-2 mt-[-18.39px]">
<span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
<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">
Client secret
</span>
</div>
<input
placeholder="Enter user agent"
type="text"
className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
name="user_agent"
value={redditData.user_agent}
onChange={handleChange}
></input>
<div className="relative bottom-12 left-2 mt-[-18.39px]">
<span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
<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">
User agent
</span>
</div>
<input
placeholder="Enter search queries"
type="text"
className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
name="search_queries"
value={redditData.search_queries}
onChange={handleChange}
></input>
<div className="relative bottom-12 left-2 mt-[-18.39px]">
<span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
<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">
Search queries
</span>
</div>
<input
placeholder="Enter number of posts"
type="number"
className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
name="number_posts"
value={redditData.number_posts}
onChange={handleChange}
></input>
<div className="relative bottom-12 left-2 mt-[-18.39px]">
<span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
<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">
Number of posts
</span>
</div>
@ -409,27 +409,36 @@ export default function Upload({
</>
)}
<div className="flex flex-row-reverse">
<button
onClick={activeTab === 'file' ? uploadFile : uploadRemote}
className={`ml-6 cursor-pointer rounded-3xl bg-purple-30 text-white ${
files.length > 0 && docName.trim().length > 0
? ''
: 'bg-opacity-75 text-opacity-80'
} py-2 px-6`}
disabled={
(files.length === 0 || docName.trim().length === 0) &&
activeTab === 'file'
}
>
Train
</button>
{activeTab === 'file' ? (
<button
onClick={uploadFile}
className={`ml-2 cursor-pointer rounded-3xl bg-purple-30 text-sm text-white ${
files.length > 0 && docName.trim().length > 0
? 'hover:bg-[#6F3FD1]'
: 'bg-opacity-75 text-opacity-80'
} py-2 px-6`}
disabled={
(files.length === 0 || docName.trim().length === 0) &&
activeTab === 'file'
}
>
Train
</button>
) : (
<button
onClick={uploadRemote}
className={`ml-2 cursor-pointer rounded-3xl bg-purple-30 py-2 px-6 text-sm text-white hover:bg-[#6F3FD1]`}
>
Train
</button>
)}
<button
onClick={() => {
setDocName('');
setfiles([]);
setModalState('INACTIVE');
}}
className="cursor-pointer font-medium dark:text-light-gray"
className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
>
Cancel
</button>

Write Preview
Loading…
Cancel
Save