-
- );
-
- function scrollTabs(direction: number) {
- const container = document.querySelector('.flex-nowrap');
- if (container) {
- container.scrollLeft += direction * 100; // Adjust the scroll amount as needed
- }
- }
-
- function renderActiveTab() {
- switch (activeTab) {
- case 'General':
- return - Settings -
-
-
- {renderActiveTab()}
-
- {/* {activeTab === 'Widgets' && (
-
-
-
-
- {tabs.map((tab, index) => (
-
- ))}
-
-
-
-
-
-
- );
-};
-
-export default Setting;
-type PromptProps = {
- prompts: { name: string; id: string; type: string }[];
- selectedPrompt: { name: string; id: string; type: string };
- onSelectPrompt: (name: string, id: string, type: string) => void;
- setPrompts: (prompts: { name: string; id: string; type: string }[]) => void;
-};
-
-const Prompts: React.FC
- {
- setSelectedTheme(option);
- option !== selectedTheme && toggleTheme();
- }}
- />
-
- Select Theme
-
-
- - Select Language -
-
- dispatch(setChunks(value))}
- />
-
- - Chunks processed per query -
-
-
+
+ );
+}
+
+function EditPrompt({
+ setModalState,
+ handleEditPrompt,
+ editPromptName,
+ setEditPromptName,
+ editPromptContent,
+ setEditPromptContent,
+ currentPromptEdit,
+}: {
+ setModalState: (state: ActiveState) => void;
+ handleEditPrompt?: (id: string, type: string) => void;
+ editPromptName: string;
+ setEditPromptName: (name: string) => void;
+ editPromptContent: string;
+ setEditPromptContent: (content: string) => void;
+ currentPromptEdit: { name: string; id: string; type: string };
+}) {
+ return (
+
-
-
- Active Prompt
-
-
-
- Prompt name
{' '} -- start by editing name -
- setNewPromptName(e.target.value)} - /> -
-
+ Prompt content
- +
+
+
+
+
+
+ );
+}
+
+export default function PromptsModal({
+ modalState,
+ setModalState,
+ type,
+ newPromptName,
+ setNewPromptName,
+ newPromptContent,
+ setNewPromptContent,
+ editPromptName,
+ setEditPromptName,
+ editPromptContent,
+ setEditPromptContent,
+ currentPromptEdit,
+ handleAddPrompt,
+ handleEditPrompt,
+}: {
+ modalState: ActiveState;
+ setModalState: (state: ActiveState) => void;
+ type: 'ADD' | 'EDIT';
+ newPromptName: string;
+ setNewPromptName: (name: string) => void;
+ newPromptContent: string;
+ setNewPromptContent: (content: string) => void;
+ editPromptName: string;
+ setEditPromptName: (name: string) => void;
+ editPromptContent: string;
+ setEditPromptContent: (content: string) => void;
+ currentPromptEdit: { name: string; id: string; type: string };
+ handleAddPrompt?: () => void;
+ handleEditPrompt?: (id: string, type: string) => void;
+}) {
+ let view;
+
+ if (type === 'ADD') {
+ view = (
+
+
+ + Edit Prompt +
++ Edit your custom prompt and save it to DocsGPT +
+
+ setEditPromptName(e.target.value)}
+ >
+
+
+
+ Prompt Name
+
+
+
+
+ Prompt Text
+
+
+
+
+
+
+
+
+ );
+};
+
+const CreateAPIKeyModal: React.FC
+ setCreateModal(false)}
+ createAPIKey={createAPIKey}
+ />
+ )}
+ {isSaveKeyModalOpen && (
+ setSaveKeyModal(false)}
+ />
+ )}
+
+
+
+
+ {isCreateModalOpen && (
+
+
+
+
+
+
+
+ | Name | ++ Source document + | +API Key | ++ |
|---|---|---|---|
| {element.name} | +{element.source} | +{element.key} | +
+ |
+
+
+ );
+};
+
+const SaveAPIKeyModal: React.FC
+
+
+
+
+ Create New API Key
+
+
+
+
+ API Key Name
+
+ setAPIKeyName(e.target.value)}
+ />
+
+
+
+ setSourcePath(selection)
+ }
+ options={extractDocPaths()}
+ size="w-full"
+ rounded="xl"
+ />
+
+
+
+ setPrompt(value)
+ }
+ size="w-full"
+ />
+
+
+ setChunk(value)}
+ size="w-full"
+ />
+
+
+ + Chunks processed per query +
+
+
+ );
+};
+
+export default APIKeys;
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
new file mode 100644
index 00000000..bccefd38
--- /dev/null
+++ b/frontend/src/settings/Documents.tsx
@@ -0,0 +1,60 @@
+import { DocumentsProps } from '../models/misc';
+import Trash from '../assets/trash.svg';
+
+const Documents: React.FC
+
+
+ Please save your Key
++ This is the only time your key will be shown. +
+
+
+
+
+
+
+ API Key
+ {apiKey} +
+
+ );
+};
+
+export default Documents;
diff --git a/frontend/src/settings/General.tsx b/frontend/src/settings/General.tsx
new file mode 100644
index 00000000..215628e5
--- /dev/null
+++ b/frontend/src/settings/General.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import Prompts from './Prompts';
+import { useDarkTheme } from '../hooks';
+import Dropdown from '../components/Dropdown';
+import {
+ selectPrompt,
+ setPrompt,
+ setChunks,
+ selectChunks,
+} from '../preferences/preferenceSlice';
+
+const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
+
+const General: React.FC = () => {
+ const themes = ['Light', 'Dark'];
+ const languages = ['English'];
+ const chunks = ['0', '2', '4', '6', '8', '10'];
+ const [prompts, setPrompts] = React.useState<
+ { name: string; id: string; type: string }[]
+ >([]);
+ const selectedChunks = useSelector(selectChunks);
+ const [isDarkTheme, toggleTheme] = useDarkTheme();
+ const [selectedTheme, setSelectedTheme] = React.useState(
+ isDarkTheme ? 'Dark' : 'Light',
+ );
+ const dispatch = useDispatch();
+ const [selectedLanguage, setSelectedLanguage] = React.useState(languages[0]);
+ const selectedPrompt = useSelector(selectPrompt);
+
+ React.useEffect(() => {
+ const fetchPrompts = async () => {
+ try {
+ const response = await fetch(`${apiHost}/api/get_prompts`);
+ if (!response.ok) {
+ throw new Error('Failed to fetch prompts');
+ }
+ const promptsData = await response.json();
+ setPrompts(promptsData);
+ } catch (error) {
+ console.error(error);
+ }
+ };
+ fetchPrompts();
+ }, []);
+ return (
+
+
+
+
+
+
+
+ | Document Name | +Vector Date | +Type | ++ |
|---|---|---|---|
| + {document.name} + | ++ {document.date} + | ++ {document.location === 'remote' + ? 'Pre-loaded' + : 'Private'} + | +
+ {document.location !== 'remote' && (
+ |
+
+
+ );
+};
+
+export default General;
diff --git a/frontend/src/settings/Prompts.tsx b/frontend/src/settings/Prompts.tsx
new file mode 100644
index 00000000..6956df60
--- /dev/null
+++ b/frontend/src/settings/Prompts.tsx
@@ -0,0 +1,219 @@
+import React from 'react';
+import { PromptProps, ActiveState } from '../models/misc';
+import Dropdown from '../components/Dropdown';
+import PromptsModal from '../preferences/PromptsModal';
+
+const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
+
+const Prompts: React.FC
+ {
+ setSelectedTheme(option);
+ option !== selectedTheme && toggleTheme();
+ }}
+ size="w-56"
+ rounded="3xl"
+ />
+
+ Select Theme
+
+
+ + Select Language +
+
+ dispatch(setChunks(value))}
+ size="w-56"
+ rounded="3xl"
+ />
+
+ + Chunks processed per query +
+
+
+ dispatch(setPrompt({ name: name, id: id, type: type }))
+ }
+ setPrompts={setPrompts}
+ apiHost={apiHost}
+ />
+
+
+
+
+
+
+ {
+ setModalType('EDIT');
+ setEditPromptName(name);
+ fetchPromptContent(id);
+ setCurrentPromptEdit({ id: id, name: name, type: type });
+ setModalState('ACTIVE');
+ }}
+ onDelete={handleDeletePrompt}
+ />
+
+
+ Active Prompt
+
+
+
+ Widget Source
+
+
+ Widget Method
+
+
+ Widget Type
+
+
Widget Code Snippet
+