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

Merge pull request #1027 from utin-francis-peter/feat/issue#1017

Browse Source 
Feat Implementation for issue#1017
This commit is contained in:
Alex
2024-07-16 14:35:18 +01:00
committed by GitHub
parent bacd2a6893 90b24dd915
commit d86a06fab0
7 changed files with 101 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/components/Input.tsx Normal file
View File

@@ -0,0 +1,43 @@
import { InputProps } from './types';
const Input = ({
id,
name,
type,
value,
isAutoFocused = false,
placeholder,
maxLength,
className,
colorVariant = 'silver',
children,
onChange,
onPaste,
onKeyDown,
}: InputProps) => {
const colorStyles = {
silver: 'border-silver dark:border-silver/40',
jet: 'border-jet',
gray: 'border-gray-5000 dark:text-silver',
};
return (
<input
className={`h-[42px] w-full rounded-full border-2 px-3 outline-none dark:bg-transparent dark:text-white ${className} ${colorStyles[colorVariant]}`}
type={type}
id={id}
name={name}
autoFocus={isAutoFocused}
placeholder={placeholder}
maxLength={maxLength}
value={value}
onChange={onChange}
onPaste={onPaste}
onKeyDown={onKeyDown}
>
{children}
</input>
);
};
export default Input;

21
frontend/src/components/types/index.ts Normal file
View File

@@ -0,0 +1,21 @@
export type InputProps = {
type: 'text' | 'number';
value: string | string[] | number;
colorVariant?: 'silver' | 'jet' | 'gray';
isAutoFocused?: boolean;
id?: string;
maxLength?: number;
name?: string;
placeholder?: string;
className?: string;
children?: React.ReactElement;
onChange: (
e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
) => void;
onPaste?: (
e: React.ClipboardEvent<HTMLTextAreaElement | HTMLInputElement>,
) => void;
onKeyDown?: (
e: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>,
) => void;
};

4
frontend/src/index.css
View File

@@ -421,10 +421,6 @@ template {
width: 0;
}
/* .bottom-safe {
bottom: env(safe-area-inset-bottom, 0);
} */
.inputbox-style[contenteditable] {
padding-left: 36px;
padding-right: 36px;

8
frontend/src/preferences/APIKeyModal.tsx
View File

@@ -4,6 +4,7 @@ import { ActiveState } from '../models/misc';
import { selectApiKey, setApiKey } from './preferenceSlice';
import { useMediaQuery, useOutsideAlerter } from './../hooks';
import Modal from '../modals';
import Input from '../components/Input';
export default function APIKeyModal({
modalState,
@@ -66,14 +67,15 @@ export default function APIKeyModal({
key for llm. Currently, we support only OpenAI but soon many more.
You can find it here.
</p>
<input
<Input
type="text"
className="h-10 w-full border-b-2 border-jet focus:outline-none"
colorVariant="jet"
className="h-10 border-b-2 focus:outline-none"
value={key}
maxLength={100}
placeholder="API Key"
onChange={(e) => setKey(e.target.value)}
/>
></Input>
</article>
);
}}

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

@@ -1,5 +1,6 @@
import { ActiveState } from '../models/misc';
import Exit from '../assets/exit.svg';
import Input from '../components/Input';
function AddPrompt({
setModalState,
@@ -34,13 +35,13 @@ function AddPrompt({
Add your custom prompt and save it to DocsGPT
</p>
<div>
<input
<Input
placeholder="Prompt Name"
type="text"
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"
className="h-10 rounded-lg"
value={newPromptName}
onChange={(e) => setNewPromptName(e.target.value)}
></input>
></Input>
<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">
Prompt Name
@@ -105,13 +106,13 @@ function EditPrompt({
Edit your custom prompt and save it to DocsGPT
</p>
<div>
<input
<Input
placeholder="Prompt Name"
type="text"
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"
className="h-10 rounded-lg"
value={editPromptName}
onChange={(e) => setEditPromptName(e.target.value)}
></input>
></Input>
<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">
Prompt Name

7
frontend/src/settings/APIKeys.tsx
View File

@@ -10,6 +10,7 @@ import { selectSourceDocs } from '../preferences/preferenceSlice';
import Exit from '../assets/exit.svg';
import Trash from '../assets/trash.svg';
import { useTranslation } from 'react-i18next';
import Input from '../components/Input';
const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
const embeddingsName =
import.meta.env.VITE_EMBEDDINGS_NAME ||
@@ -237,12 +238,12 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
<span className="absolute left-2 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.createAPIKey.apiKeyName')}
</span>
<input
<Input
type="text"
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"
className="rounded-md"
value={APIKeyName}
onChange={(e) => setAPIKeyName(e.target.value)}
/>
></Input>
</div>
<div className="my-4">
<Dropdown

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

@@ -7,6 +7,7 @@ import { getDocs } from '../preferences/preferenceApi';
import { setSelectedDocs, setSourceDocs } from '../preferences/preferenceSlice';
import Dropdown from '../components/Dropdown';
import { useTranslation } from 'react-i18next';
import Input from '../components/Input';
function Upload({
modalState,
@@ -272,7 +273,9 @@ function Upload({
},
});
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const handleChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => {
const { name, value } = e.target;
if (name === 'search_queries' && value.length > 0) {
setRedditData({
@@ -323,12 +326,12 @@ function Upload({
{activeTab === 'file' && (
<>
<input
<Input
type="text"
className="h-[42px] w-full rounded-full border-2 border-gray-5000 px-3 outline-none dark:bg-transparent dark:text-silver"
colorVariant="gray"
value={docName}
onChange={(e) => setDocName(e.target.value)}
></input>
></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')}
@@ -373,25 +376,23 @@ function Upload({
/>
{urlType.label !== 'Reddit' ? (
<>
<input
<Input
placeholder={`Enter ${t('modals.uploadDoc.name')}`}
type="text"
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>
></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>
<input
<Input
placeholder={t('modals.uploadDoc.urlLink')}
type="text"
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>
></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.link')}
@@ -400,66 +401,61 @@ function Upload({
</>
) : (
<>
<input
<Input
placeholder="Enter client ID"
type="text"
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>
></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.reddit.id')}
</span>
</div>
<input
<Input
placeholder="Enter client secret"
type="text"
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>
></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.reddit.secret')}
</span>
</div>
<input
<Input
placeholder="Enter user agent"
type="text"
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>
></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.reddit.agent')}
</span>
</div>
<input
<Input
placeholder="Enter search queries"
type="text"
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>
></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.reddit.searchQueries')}
</span>
</div>
<input
<Input
placeholder="Enter number of posts"
type="number"
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>
></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.reddit.numberOfPosts')}