✨ Prompt

frontend/src/Setting.tsx

@@ -1,176 +1,317 @@
-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 <General />;
-    else if (active === 'Prompts') return <Prompts />;
-    else if (active === 'Documents') return <Documents />;
-    else if (active === 'Widgets') return <Widgets />;
-    else return <></>;
-  };
-  const scrollableRef = useRef<HTMLDivElement | null>(null);
-  const scrollStep = 100;
-  const scrollLeft = () => {
-    if (scrollableRef.current) {
-      if (scrollableRef.current.scrollLeft > 0) {
-        scrollableRef.current.scrollLeft -= scrollStep; // Adjust the scroll amount as needed
-      }
-    }
-  };
+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 scrollRight = () => {
-    if (scrollableRef.current) {
-      scrollableRef.current.scrollLeft += scrollStep; // Adjust the scroll amount as needed
-    }
+const Setting: React.FC = () => {
+  const tabs = ['General', 'Prompts', 'Documents', 'Widgets'];
+  const [activeTab, setActiveTab] = useState('General');
+  const [prompts, setPrompts] = useState<string[]>(['Prompt 1', 'Prompt 2']);
+  const [selectedPrompt, setSelectedPrompt] = useState('');
+  const [newPromptName, setNewPromptName] = useState('');
+  const [isAddPromptModalOpen, setAddPromptModalOpen] = useState(false);
+  const onDeletePrompt = (name: string) => {
+    setPrompts(prompts.filter((prompt) => prompt !== name));
+    setSelectedPrompt(''); // Clear the selected prompt
   };
+
   return (
-    <div className="pt-20 pl-2 md:p-12">
+    <div className="p-4 pt-20 md:p-12">
       <p className="text-2xl font-bold text-eerie-black">Settings</p>
-      <div className="flex flex-row items-center">
-        <div className="md:hidden " onClick={scrollLeft}>
-          <div className=" h-8 w-8 rounded-full border-2 border-purple-30 hover:bg-gray-100">
-            <img
-              src={ArrowLeft}
-              className="h-6 w-6 p-1"
-              style={{ marginTop: '2px' }}
-            />
-          </div>
+      <div className="mt-6 flex flex-row items-center space-x-4 overflow-x-auto md:space-x-8 ">
+        <div className="md:hidden">
+          <button
+            onClick={() => scrollTabs(-1)}
+            className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-purple-30 transition-all hover:bg-gray-100"
+          >
+            <img src={ArrowLeft} alt="left-arrow" className="h-6 w-6" />
+          </button>
         </div>
-        <div className="mt-4 flex flex-row overflow-hidden" ref={scrollableRef}>
-          {list.map((item, index) => (
-            <div
+        <div className="flex flex-nowrap space-x-4 overflow-x-auto md:space-x-8">
+          {tabs.map((tab, index) => (
+            <button
               key={index}
-              className={`my-auto mr-6 mb-5 flex h-9 cursor-pointer items-center gap-4 rounded-3xl px-4 font-bold hover:text-purple-30 ${
-                active === item
+              onClick={() => setActiveTab(tab)}
+              className={`h-9 rounded-3xl px-4 font-bold ${
+                activeTab === tab
                   ? 'bg-purple-3000 text-purple-30'
                   : 'text-gray-6000'
               }`}
-              onClick={() => setActive(item)}
             >
-              {item}
-            </div>
+              {tab}
+            </button>
           ))}
         </div>
-        <div className="md:hidden " onClick={scrollRight}>
-          <div className=" h-8 w-8 rounded-full border-2 border-purple-30 hover:bg-gray-100">
-            <img
-              src={ArrowRight}
-              className="h-6 w-6 p-1"
-              style={{ marginTop: '2px', marginLeft: '3px' }}
-            />
-          </div>
+        <div className="md:hidden">
+          <button
+            onClick={() => scrollTabs(1)}
+            className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-purple-30 hover:bg-gray-100"
+          >
+            <img src={ArrowRight} alt="right-arrow" className="h-6 w-6" />
+          </button>
         </div>
       </div>
-      {returnActiveTabs()}
+      {renderActiveTab()}
     </div>
   );
+
+  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 <General />;
+      case 'Prompts':
+        return (
+          <Prompts
+            prompts={prompts}
+            selectedPrompt={selectedPrompt}
+            onSelectPrompt={setSelectedPrompt}
+            onAddPrompt={addPrompt}
+            newPromptName={''}
+            onNewPromptNameChange={function (name: string): void {
+              throw new Error('Function not implemented.');
+            }}
+            isAddPromptModalOpen={false}
+            onToggleAddPromptModal={function (): void {
+              throw new Error('Function not implemented.');
+            }}
+            onDeletePrompt={onDeletePrompt}
+          />
+        );
+      case 'Documents':
+        return <Documents />;
+      case 'Widgets':
+        return <Widgets />;
+      default:
+        return null;
+    }
+  }
+
+  function addPrompt(name: string) {
+    if (name) {
+      setPrompts([...prompts, name]);
+      setNewPromptName('');
+      toggleAddPromptModal();
+    }
+  }
+
+  function toggleAddPromptModal() {
+    setAddPromptModalOpen(!isAddPromptModalOpen);
+  }
 };
 
-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);
+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 (
-    <>
-      <div className="mt-10 w-80">
+    <div className="mt-[59px]">
+      <div className="mb-4">
         <p className="font-bold text-jet">Select Theme</p>
-        <div className="relative my-4 flex gap-2 px-2">
-          <div
-            className="-ml-2 flex h-12 w-full cursor-pointer justify-between rounded-3xl border-2 bg-white"
-            onClick={() => setIsThemeListOpen(!isThemeListOpen)}
-          >
-            {theme && (
-              <p className="my-3 mx-6 overflow-hidden text-ellipsis">{theme}</p>
-            )}
-            <img
-              src={Arrow2}
-              alt="arrow"
-              className={`${
-                !isThemeListOpen ? 'rotate-0' : 'rotate-180'
-              } ml-auto mr-6 w-3 transition-all`}
-            />
-          </div>
-          {isThemeListOpen && (
-            <div
-              className="absolute top-12 left-0 right-6 ml-2 mr-4 max-h-52 overflow-y-scroll bg-white shadow-lg"
-              style={{ zIndex: 100 }}
-            >
-              {themes.map((item, index) => (
-                <div
-                  key={index}
-                  onClick={() => {
-                    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"
-                >
-                  <p className="ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
-                    {item}
-                  </p>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
+        <Dropdown
+          options={themes}
+          selectedValue={selectedTheme}
+          onSelect={setSelectedTheme}
+        />
       </div>
-      <div className="mt-12 w-80">
+      <div>
         <p className="font-bold text-jet">Select Language</p>
-        <div className="relative my-4 flex gap-2 px-2">
-          <div
-            className="-ml-2 flex h-12 w-full cursor-pointer justify-between rounded-3xl border-2 bg-white"
-            onClick={() => setIsLanguageListOpen(!isLanguageListOpen)}
-          >
-            {language && (
-              <p className="my-3 mx-6 overflow-hidden text-ellipsis whitespace-nowrap">
-                {language}
-              </p>
-            )}
-            <img
-              src={Arrow2}
-              alt="arrow"
-              className={`${
-                !isLanguageListOpen ? 'rotate-0' : 'rotate-180'
-              } ml-auto mr-6 w-3 transition-all`}
-            />
-          </div>
-          {isLanguageListOpen && (
-            <div className="absolute top-12 left-0 right-6 ml-2 mr-4 max-h-52 overflow-y-scroll bg-white shadow-lg">
-              {languages.map((item, index) => (
-                <div
-                  key={index}
-                  onClick={() => {
-                    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"
-                >
-                  <p className="ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
-                    {item}
-                  </p>
-                </div>
-              ))}
+        <Dropdown
+          options={languages}
+          selectedValue={selectedLanguage}
+          onSelect={setSelectedLanguage}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Setting;
+
+const Prompts: React.FC<PromptProps> = ({
+  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 (
+    <div className="mt-[59px]">
+      <div className="mb-4">
+        <p className="font-bold text-jet">Select Prompt</p>
+        <Dropdown
+          options={prompts}
+          selectedValue={selectedPrompt}
+          onSelect={onSelectPrompt}
+        />
+      </div>
+      <div>
+        <button
+          onClick={openAddPromptModal}
+          className="rounded-lg bg-purple-500 px-4 py-2 font-bold text-white hover:bg-purple-600"
+        >
+          Add New Prompt
+        </button>
+      </div>
+      {isAddPromptModalOpen && (
+        <AddPromptModal
+          newPromptName={newPromptName}
+          onNewPromptNameChange={setNewPromptName}
+          onAddPrompt={() => {
+            onAddPrompt(newPromptName);
+            closeAddPromptModal();
+          }}
+          onClose={closeAddPromptModal}
+        />
+      )}
+      <div className="mt-4">
+        <button
+          onClick={handleDeletePrompt}
+          className="rounded-lg bg-red-600 px-4 py-2 font-bold text-white hover:text-zinc-800"
+        >
+          Delete Prompt
+        </button>
+      </div>
+    </div>
+  );
+};
+
+function Dropdown({
+  options,
+  selectedValue,
+  onSelect,
+}: {
+  options: string[];
+  selectedValue: string;
+  onSelect: (value: string) => void;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="relative mt-2 h-[43.33px] w-[342px]">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex w-full cursor-pointer items-center rounded-3xl border-2 bg-white p-3"
+      >
+        <span className="flex-1 overflow-hidden text-ellipsis">
+          {selectedValue}
+        </span>
+        <img
+          src={Arrow2}
+          alt="arrow"
+          className={`transform ${
+            isOpen ? 'rotate-180' : 'rotate-0'
+          } h-4 w-4 transition-transform`}
+        />
+      </button>
+      {isOpen && (
+        <div className="absolute left-0 right-0 top-12 z-50 mt-2 bg-white p-2 shadow-lg">
+          {options.map((option, index) => (
+            <div
+              key={index}
+              onClick={() => {
+                onSelect(option);
+                setIsOpen(false);
+              }}
+              className="flex cursor-pointer items-center justify-between border-b-2 py-3 hover:bg-gray-100"
+            >
+              <span className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap">
+                {option}
+              </span>
             </div>
-          )}
+          ))}
         </div>
-      </div>
-    </>
+      )}
+    </div>
   );
+}
+
+type AddPromptModalProps = {
+  newPromptName: string;
+  onNewPromptNameChange: (name: string) => void;
+  onAddPrompt: () => void;
+  onClose: () => void;
 };
-const Prompts = () => {
-  return <div>This is prompts WIP</div>;
+
+const AddPromptModal: React.FC<AddPromptModalProps> = ({
+  newPromptName,
+  onNewPromptNameChange,
+  onAddPrompt,
+  onClose,
+}) => {
+  return (
+    <div className="fixed top-0 left-0 flex h-screen w-screen items-center justify-center bg-gray-900 bg-opacity-50">
+      <div className="rounded-lg bg-white p-4">
+        <p className="mb-2 text-2xl font-bold text-jet">Add New Prompt</p>
+        <input
+          type="text"
+          placeholder="Enter Prompt Name"
+          value={newPromptName}
+          onChange={(e) => onNewPromptNameChange(e.target.value)}
+          className="mb-4 w-full rounded-lg border-2 p-2"
+        />
+        <button
+          onClick={onAddPrompt}
+          className="rounded-lg bg-purple-500 px-4 py-2 font-bold text-white hover:bg-purple-600"
+        >
+          Save
+        </button>
+        <button
+          onClick={onClose}
+          className="mt-4 rounded-lg px-4 py-2 font-bold text-red-500"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
 };
-const Documents = () => {
-  return <div>This is Documents WIP</div>;
+
+const Documents: React.FC = () => {
+  return (
+    <div className="mt-8">
+      <p>This is the Documents section.</p>
+    </div>
+  );
 };
-const Widgets = () => {
-  return <div>This is widgets WIP</div>;
+
+const Widgets: React.FC = () => {
+  return <div>This is widgets</div>;
 };
-export default Setting;