+
+
Chats
{conversations?.map((conversation) => (
{doc.location === 'local' && (
{
event.stopPropagation();
@@ -332,7 +332,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
}
>
- Settings
+ Settings
diff --git a/frontend/src/Setting.tsx b/frontend/src/Setting.tsx
index f68df6532..5f652a848 100644
--- a/frontend/src/Setting.tsx
+++ b/frontend/src/Setting.tsx
@@ -1,70 +1,112 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
import Arrow2 from './assets/dropdown-arrow.svg';
import ArrowLeft from './assets/arrow-left.svg';
import ArrowRight from './assets/arrow-right.svg';
+import Trash from './assets/trash.svg';
+import {
+ selectPrompt,
+ setPrompt,
+ selectSourceDocs,
+} from './preferences/preferenceSlice';
+import { Doc } from './preferences/preferenceApi';
type PromptProps = {
- prompts: string[];
- selectedPrompt: string;
- onSelectPrompt: (prompt: string) => void;
+ prompts: { name: string; id: string; type: string }[];
+ selectedPrompt: { name: string; id: string };
+ onSelectPrompt: (name: string, id: string) => void;
onAddPrompt: (name: string) => void;
newPromptName: string;
onNewPromptNameChange: (name: string) => void;
isAddPromptModalOpen: boolean;
onToggleAddPromptModal: () => void;
- onDeletePrompt: (name: string) => void;
+ onDeletePrompt: (name: string, id: string) => void;
};
const Setting: React.FC = () => {
- const tabs = ['General', 'Prompts', 'Documents', 'Widgets'];
+ const tabs = ['General', 'Prompts', 'Documents'];
+ //const tabs = ['General', 'Prompts', 'Documents', 'Widgets'];
+
const [activeTab, setActiveTab] = useState('General');
- const [prompts, setPrompts] = useState
(['Prompt 1', 'Prompt 2']);
- const [selectedPrompt, setSelectedPrompt] = useState('');
+ const [prompts, setPrompts] = useState<
+ { name: string; id: string; type: string }[]
+ >([]);
+ const selectedPrompt = useSelector(selectPrompt);
const [newPromptName, setNewPromptName] = useState('');
const [isAddPromptModalOpen, setAddPromptModalOpen] = useState(false);
- const [documents, setDocuments] = useState([]);
+ const documents = useSelector(selectSourceDocs);
const [isAddDocumentModalOpen, setAddDocumentModalOpen] = useState(false);
const [newDocument, setNewDocument] = useState({
name: '',
vectorDate: '',
vectorLocation: '',
});
- const onDeletePrompt = (name: string) => {
- setPrompts(prompts.filter((prompt) => prompt !== name));
- setSelectedPrompt(''); // Clear the selected prompt
- };
+ const dispatch = useDispatch();
+
+ const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
const [widgetScreenshot, setWidgetScreenshot] = useState(null);
const updateWidgetScreenshot = (screenshot: File | null) => {
setWidgetScreenshot(screenshot);
};
- // Function to add a new document
- const addDocument = () => {
- if (
- newDocument.name &&
- newDocument.vectorDate &&
- newDocument.vectorLocation
- ) {
- setDocuments([...documents, newDocument]);
- setNewDocument({
- name: '',
- vectorDate: '',
- vectorLocation: '',
- });
- toggleAddDocumentModal();
- }
- };
-
// Function to toggle the Add Document modal
const toggleAddDocumentModal = () => {
setAddDocumentModalOpen(!isAddDocumentModalOpen);
};
+ 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();
+ }, []);
+
+ const onDeletePrompt = (name: string, id: string) => {
+ setPrompts(prompts.filter((prompt) => prompt.id !== id));
+
+ fetch(`${apiHost}/api/delete_prompt`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ // send id in body only
+ body: JSON.stringify({ id: id }),
+ })
+ .then((response) => {
+ if (!response.ok) {
+ throw new Error('Failed to delete prompt');
+ }
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+ };
- const handleDeleteDocument = (index: number) => {
- const updatedDocuments = [...documents];
- updatedDocuments.splice(index, 1);
- setDocuments(updatedDocuments);
+ const handleDeleteClick = (index: number, doc: Doc) => {
+ const docPath = 'indexes/' + 'local' + '/' + doc.name;
+
+ fetch(`${apiHost}/api/delete_old?path=${docPath}`, {
+ method: 'GET',
+ })
+ .then(() => {
+ // remove the image element from the DOM
+ const imageElement = document.querySelector(
+ `#img-${index}`,
+ ) as HTMLElement;
+ const parentElement = imageElement.parentNode as HTMLElement;
+ parentElement.parentNode?.removeChild(parentElement);
+ })
+ .catch((error) => console.error(error));
};
return (
@@ -105,15 +147,6 @@ const Setting: React.FC = () => {