diff --git a/frontend/src/Setting.tsx b/frontend/src/Setting.tsx index 05555cb9..f68df653 100644 --- a/frontend/src/Setting.tsx +++ b/frontend/src/Setting.tsx @@ -1,176 +1,622 @@ -import React, { useState, useRef } from 'react'; +import React, { useState } from 'react'; import Arrow2 from './assets/dropdown-arrow.svg'; import ArrowLeft from './assets/arrow-left.svg'; import ArrowRight from './assets/arrow-right.svg'; -const Setting = () => { - const list = ['General', 'Prompts', 'Documents', 'Widgets']; - const [active, setActive] = useState('General'); - const returnActiveTabs = (): JSX.Element => { - if (active === 'General') return ; - else if (active === 'Prompts') return ; - else if (active === 'Documents') return ; - else if (active === 'Widgets') return ; - else return <>; +type PromptProps = { + prompts: string[]; + selectedPrompt: string; + onSelectPrompt: (prompt: string) => void; + onAddPrompt: (name: string) => void; + newPromptName: string; + onNewPromptNameChange: (name: string) => void; + isAddPromptModalOpen: boolean; + onToggleAddPromptModal: () => void; + onDeletePrompt: (name: string) => void; +}; + +const Setting: React.FC = () => { + const tabs = ['General', 'Prompts', 'Documents', 'Widgets']; + const [activeTab, setActiveTab] = useState('General'); + const [prompts, setPrompts] = useState(['Prompt 1', 'Prompt 2']); + const [selectedPrompt, setSelectedPrompt] = useState(''); + const [newPromptName, setNewPromptName] = useState(''); + const [isAddPromptModalOpen, setAddPromptModalOpen] = useState(false); + const [documents, setDocuments] = useState([]); + 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 scrollableRef = useRef(null); - const scrollStep = 100; - const scrollLeft = () => { - if (scrollableRef.current) { - if (scrollableRef.current.scrollLeft > 0) { - scrollableRef.current.scrollLeft -= scrollStep; // Adjust the scroll amount as needed - } + 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(); } }; - const scrollRight = () => { - if (scrollableRef.current) { - scrollableRef.current.scrollLeft += scrollStep; // Adjust the scroll amount as needed - } + // Function to toggle the Add Document modal + const toggleAddDocumentModal = () => { + setAddDocumentModalOpen(!isAddDocumentModalOpen); }; + + const handleDeleteDocument = (index: number) => { + const updatedDocuments = [...documents]; + updatedDocuments.splice(index, 1); + setDocuments(updatedDocuments); + }; + return ( -
+

Settings

-
-
-
- -
+
+
+
-
- {list.map((item, index) => ( -
+ {tabs.map((tab, index) => ( +
+ {tab} + ))}
-
-
- -
+
+
- {returnActiveTabs()} + {renderActiveTab()} + + {isAddDocumentModalOpen && ( + + )} + + {/* {activeTab === 'Widgets' && ( + + )} */} +
+ ); + + 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 ; + case 'Prompts': + return ( + + ); + case 'Documents': + return ( + + ); + case 'Widgets': + return ( + + ); + default: + return null; + } + } + + function addPrompt(name: string) { + if (name) { + setPrompts([...prompts, name]); + setNewPromptName(''); + toggleAddPromptModal(); + } + } + + function toggleAddPromptModal() { + setAddPromptModalOpen(!isAddPromptModalOpen); + } +}; + +const General: React.FC = () => { + const themes = ['Light', 'Dark']; + const languages = ['English', 'French', 'Hindi']; + const [selectedTheme, setSelectedTheme] = useState(themes[0]); + const [selectedLanguage, setSelectedLanguage] = useState(languages[0]); + + return ( +
+
+

Select Theme

+ +
+
+

Select Language

+ +
); }; -const General = () => { - const [theme, setTheme] = useState('Light'); - const [isThemeListOpen, setIsThemeListOpen] = useState(false); - const themes = ['Light', 'Dark (WIP)']; - const [language, setLanguage] = useState('English'); - const languages = ['English']; - const [isLanguageListOpen, setIsLanguageListOpen] = useState(false); +export default Setting; + +const Prompts: React.FC = ({ + prompts, + selectedPrompt, + onSelectPrompt, + onAddPrompt, + onDeletePrompt, +}) => { + const [isAddPromptModalOpen, setAddPromptModalOpen] = useState(false); + const [newPromptName, setNewPromptName] = useState(''); + + const openAddPromptModal = () => { + setAddPromptModalOpen(true); + }; + + const closeAddPromptModal = () => { + setAddPromptModalOpen(false); + }; + + const handleDeletePrompt = () => { + if (selectedPrompt) { + onDeletePrompt(selectedPrompt); // Remove the selected prompt + } + }; + return ( - <> -
-

Select Theme

-
-
setIsThemeListOpen(!isThemeListOpen)} - > - {theme && ( -

{theme}

- )} - arrow -
- {isThemeListOpen && ( -
- {themes.map((item, index) => ( -
{ - setTheme(item); - setIsThemeListOpen(false); - }} - className="flex h-10 w-full cursor-pointer items-center justify-between border-x-2 border-b-2 hover:bg-gray-100" - > -

- {item} -

-
- ))} -
- )} -
+
+
+

Select Prompt

+
-
-

Select Language

-
-
setIsLanguageListOpen(!isLanguageListOpen)} - > - {language && ( -

- {language} -

- )} - arrow -
- {isLanguageListOpen && ( -
- {languages.map((item, index) => ( -
{ - setLanguage(item); - setIsLanguageListOpen(false); - }} - className="flex h-10 w-full cursor-pointer items-center justify-between border-x-2 border-b-2 hover:bg-gray-100" - > -

- {item} -

-
- ))} -
- )} -
+
+
- + {isAddPromptModalOpen && ( + { + onAddPrompt(newPromptName); + closeAddPromptModal(); + }} + onClose={closeAddPromptModal} + /> + )} +
+ +
+
); }; -const Prompts = () => { - return
This is prompts WIP
; + +function Dropdown({ + options, + selectedValue, + onSelect, +}: { + options: string[]; + selectedValue: string; + onSelect: (value: string) => void; +}) { + const [isOpen, setIsOpen] = useState(false); + + return ( +
+ + {isOpen && ( +
+ {options.map((option, index) => ( +
{ + onSelect(option); + setIsOpen(false); + }} + className="flex cursor-pointer items-center justify-between border-b-2 py-3 hover:bg-gray-100" + > + + {option} + +
+ ))} +
+ )} +
+ ); +} + +type AddPromptModalProps = { + newPromptName: string; + onNewPromptNameChange: (name: string) => void; + onAddPrompt: () => void; + onClose: () => void; }; -const Documents = () => { - return
This is Documents WIP
; + +const AddPromptModal: React.FC = ({ + newPromptName, + onNewPromptNameChange, + onAddPrompt, + onClose, +}) => { + return ( +
+
+

Add New Prompt

+ onNewPromptNameChange(e.target.value)} + className="mb-4 w-full rounded-lg border-2 p-2" + /> + + +
+
+ ); }; -const Widgets = () => { - return
This is widgets WIP
; + +type DocumentsProps = { + documents: Document[]; + isAddDocumentModalOpen: boolean; + newDocument: Document; + handleDeleteDocument: (index: number) => void; + toggleAddDocumentModal: () => void; +}; + +const Documents: React.FC = ({ + documents, + isAddDocumentModalOpen, + newDocument, + handleDeleteDocument, + toggleAddDocumentModal, +}) => { + return ( +
+
+ {/*

Documents

*/} + +
+ + + + + + + + + + + {documents.map((document, index) => ( + + + + + + + ))} + +
Document NameVector DateVector LocationActions
{document.name}{document.vectorDate} + {document.vectorLocation} + + +
+
+ +
+ + {/* {isAddDocumentModalOpen && ( + + )} */} +
+ ); +}; + +type Document = { + name: string; + vectorDate: string; + vectorLocation: string; +}; + +// Modal for adding a new document +type AddDocumentModalProps = { + newDocument: Document; + onNewDocumentChange: (document: Document) => void; + onAddDocument: () => void; + onClose: () => void; +}; + +const AddDocumentModal: React.FC = ({ + newDocument, + onNewDocumentChange, + onAddDocument, + onClose, +}) => { + return ( +
+
+

Add New Document

+ + onNewDocumentChange({ ...newDocument, name: e.target.value }) + } + className="mb-4 w-full rounded-lg border-2 p-2" + /> + + onNewDocumentChange({ ...newDocument, vectorDate: e.target.value }) + } + className="mb-4 w-full rounded-lg border-2 p-2" + /> + + onNewDocumentChange({ + ...newDocument, + vectorLocation: e.target.value, + }) + } + className="mb-4 w-full rounded-lg border-2 p-2" + /> + + +
+
+ ); +}; + +const Widgets: React.FC<{ + widgetScreenshot: File | null; + onWidgetScreenshotChange: (screenshot: File | null) => void; +}> = ({ widgetScreenshot, onWidgetScreenshotChange }) => { + const widgetSources = ['Source 1', 'Source 2', 'Source 3']; + const widgetMethods = ['Method 1', 'Method 2', 'Method 3']; + const widgetTypes = ['Type 1', 'Type 2', 'Type 3']; + + const [selectedWidgetSource, setSelectedWidgetSource] = useState( + widgetSources[0], + ); + const [selectedWidgetMethod, setSelectedWidgetMethod] = useState( + widgetMethods[0], + ); + const [selectedWidgetType, setSelectedWidgetType] = useState(widgetTypes[0]); + + // const [widgetScreenshot, setWidgetScreenshot] = useState(null); + const [widgetCode, setWidgetCode] = useState(''); // Your widget code state + + const handleScreenshotChange = ( + event: React.ChangeEvent, + ) => { + const files = event.target.files; + + if (files && files.length > 0) { + const selectedScreenshot = files[0]; + onWidgetScreenshotChange(selectedScreenshot); // Update the screenshot in the parent component + } + }; + + const handleCopyToClipboard = () => { + // Create a new textarea element to select the text + const textArea = document.createElement('textarea'); + textArea.value = widgetCode; + document.body.appendChild(textArea); + + // Select and copy the text + textArea.select(); + document.execCommand('copy'); + + // Clean up the textarea element + document.body.removeChild(textArea); + }; + + return ( +
+
+

Widget Source

+ +
+
+

Widget Method

+ +
+
+

Widget Type

+ +
+
+

Widget Code Snippet

+