Merge pull request #691 from SoumyadiptoPal/settings

Feature: Add "Settings" Button to sidebar

frontend/src/App.tsx

@@ -6,6 +6,7 @@ import PageNotFound from './PageNotFound';
 import { inject } from '@vercel/analytics';
 import { useMediaQuery } from './hooks';
 import { useState } from 'react';
+import Setting from './Setting';
 
 inject();
 
@@ -27,6 +28,7 @@ export default function App() {
           <Route path="/" element={<Conversation />} />
           <Route path="/about" element={<About />} />
           <Route path="*" element={<PageNotFound />} />
+          <Route path="/settings" element={<Setting />} />
         </Routes>
       </div>
     </div>

frontend/src/Navigation.tsx

@@ -10,6 +10,10 @@ import Exit from './assets/exit.svg';
 import Github from './assets/github.svg';
 import Hamburger from './assets/hamburger.svg';
 import Info from './assets/info.svg';
+import SettingGear from './assets/settingGear.svg';
+import Documentation from './assets/documentation.svg';
+import Discord from './assets/discord.svg';
+import Github from './assets/github.svg';
 import Key from './assets/key.svg';
 import Add from './assets/add.svg';
 import UploadIcon from './assets/upload.svg';
@@ -335,6 +339,17 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         </div>
 
         <div className="flex flex-col gap-2 border-b-2 py-2">
+          <NavLink
+            to="/settings"
+            className={({ isActive }) =>
+              `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${
+                isActive ? 'bg-gray-3000' : ''
+              }`
+            }
+          >
+            <img src={SettingGear} alt="info" className="ml-2 w-5 opacity-60" />
+            <p className="my-auto text-eerie-black">Settings</p>
+          </NavLink>
           <NavLink
             to="/about"
             className={({ isActive }) =>

frontend/src/Setting.tsx

@@ -0,0 +1,176 @@
+import React, { useState, useRef } 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
+      }
+    }
+  };
+
+  const scrollRight = () => {
+    if (scrollableRef.current) {
+      scrollableRef.current.scrollLeft += scrollStep; // Adjust the scroll amount as needed
+    }
+  };
+  return (
+    <div className="pt-20 pl-2 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>
+        <div className="mt-4 flex flex-row overflow-hidden" ref={scrollableRef}>
+          {list.map((item, index) => (
+            <div
+              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
+                  ? 'bg-purple-3000 text-purple-30'
+                  : 'text-gray-6000'
+              }`}
+              onClick={() => setActive(item)}
+            >
+              {item}
+            </div>
+          ))}
+        </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>
+      </div>
+      {returnActiveTabs()}
+    </div>
+  );
+};
+
+const General = () => {
+  const [theme, setTheme] = useState('Light');
+  const [isThemeListOpen, setIsThemeListOpen] = useState(false);
+  const themes = ['Light', 'Dark'];
+  const [language, setLanguage] = useState('English');
+  const languages = ['English', 'French'];
+  const [isLanguageListOpen, setIsLanguageListOpen] = useState(false);
+  return (
+    <>
+      <div className="mt-10 w-80">
+        <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>
+      </div>
+      <div className="mt-12 w-80">
+        <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>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+const Prompts = () => {
+  return <div>This is prompts</div>;
+};
+const Documents = () => {
+  return <div>This is Documents</div>;
+};
+const Widgets = () => {
+  return <div>This is widgets</div>;
+};
+export default Setting;

frontend/tailwind.config.cjs

@@ -26,6 +26,7 @@ module.exports = {
         'blue-2000': '#002B49',
         'blue-3000': '#4B02E2',
         'purple-30': '#7D54D1',
+        'purple-3000': 'rgb(230,222,247)',
         'blue-4000': 'rgba(0, 125, 255, 0.36)',
         'blue-5000': 'rgba(0, 125, 255)',
         'green-2000': '#0FFF50',