LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 16:43:16 +00:00
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
This commit is contained in:
Alex
2024-05-13 11:47:20 +01:00
committed by GitHub
parent 16b2a54981 96034a9712
commit a69ac372fa
16 changed files with 193 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.

24
frontend/src/Navigation.tsx
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
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
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
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
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 Normal file
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
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
View File

2
frontend/src/preferences/APIKeyModal.tsx
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
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
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
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
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
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
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>