Merge pull request #89 from TaylorS15/taylor-working

frontend/.eslintrc.cjs

@@ -19,6 +19,12 @@ module.exports = {
   plugins: ['react'],
   rules: {
     'react/react-in-jsx-scope': 'off',
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
   },
   settings: {
     'import/parsers': {
@@ -34,10 +40,4 @@ module.exports = {
       },
     },
   },
-  'prettier/prettier': [
-    'error',
-    {
-      endOfLine: 'auto',
-    },
-  ],
-}
+};

frontend/package.json

@@ -19,8 +19,10 @@
     ]
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
     "react-router-dom": "^6.8.1"
   },
   "devDependencies": {

frontend/src/About.tsx

@@ -0,0 +1,54 @@
+//TODO - Add hyperlinks to text
+//TODO - Styling
+
+export default function About() {
+  return (
+    //Parent div for all content shown through App.tsx routing needs to have this styling. Might change when state management is updated.
+    <div className="grid min-h-screen">
+      <article className=" mx-auto my-auto flex w-full max-w-6xl flex-col place-items-center gap-6 rounded-lg bg-gray-100 p-6 text-jet lg:p-10 xl:p-16">
+        <p className="text-3xl font-semibold">About DocsGPT 🦖</p>
+        <p className="mt-4 text-xl font-bold">
+          Find the information in your documentation through AI-powered
+          open-source chatbot. Powered by GPT-3, Faiss and LangChain.
+        </p>
+
+        <div>
+          <p className="text-lg">
+            If you want to add your own documentation, please follow the
+            instruction below:
+          </p>
+          <p className="mt-4 text-lg">
+            1. Navigate to{' '}
+            <span className="bg-gray-200 italic"> /application</span> folder
+          </p>
+          <p className="mt-4 text-lg">
+            2. Install dependencies from{' '}
+            <span className="bg-gray-200 italic">
+              pip install -r requirements.txt
+            </span>
+          </p>
+          <p className="mt-4 text-lg">
+            3. Prepare a <span className="bg-gray-200 italic">.env</span> file.
+            Copy <span className="bg-gray-200 italic">.env_sample</span> and
+            create <span className="bg-gray-200 italic">.env</span> with your
+            OpenAI API token
+          </p>
+          <p className="mt-4 text-lg">
+            4. Run the app with{' '}
+            <span className="bg-gray-200 italic">python app.py</span>
+          </p>
+        </div>
+
+        <p className="text-lg">
+          Currently It uses python pandas documentation, so it will respond to
+          information relevant to pandas. If you want to train it on different
+          documentation - please follow this guide.
+        </p>
+
+        <p className="mt-4 text-lg">
+          If you want to launch it on your own server - follow this guide.
+        </p>
+      </article>
+    </div>
+  );
+}

frontend/src/App.css

@@ -1,4 +0,0 @@
-html,
-body {
-  min-height: 100vh;
-}

frontend/src/App.tsx

@@ -1,55 +1,42 @@
-import { useEffect, useState } from 'react';
 import { Routes, Route } from 'react-router-dom';
-import Navigation from './components/Navigation/Navigation';
-import DocsGPT from './components/DocsGPT';
-import APIKeyModal from './components/APIKeyModal';
-import './App.css';
+import Navigation from './Navigation';
+import Conversation from './conversation/Conversation';
+import APIKeyModal from './preferences/APIKeyModal';
+import About from './About';
+import { useState } from 'react';
+import { ActiveState } from './models/misc';
+import { selectApiKeyStatus } from './preferences/preferenceSlice';
+import { useSelector } from 'react-redux';
 
 export default function App() {
-  //Currently using primitive state management. Will most likely be replaced with Redux.
-  const [isMobile, setIsMobile] = useState(true);
-  const [isMenuOpen, setIsMenuOpen] = useState(true);
-  const [isApiModalOpen, setIsApiModalOpen] = useState(true);
-  const [apiKey, setApiKey] = useState('');
-
-  const handleResize = () => {
-    if (window.innerWidth > 768 && isMobile) {
-      setIsMobile(false);
-    } else {
-      setIsMobile(true);
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener('resize', handleResize);
-    handleResize();
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
+  const isApiKeySet = useSelector(selectApiKeyStatus);
+  const [navState, setNavState] = useState<ActiveState>('ACTIVE');
+  const [apiKeyModalState, setApiKeyModalState] = useState<ActiveState>(
+    isApiKeySet ? 'INACTIVE' : 'ACTIVE',
+  );
 
   return (
-    <div
-      className={`${
-        isMobile ? 'flex-col' : 'flex-row'
-      } relative flex transition-all`}
-    >
+    <div className="min-h-full min-w-full transition-all">
       <APIKeyModal
-        apiKey={apiKey}
-        setApiKey={setApiKey}
-        isApiModalOpen={isApiModalOpen}
-        setIsApiModalOpen={setIsApiModalOpen}
+        modalState={apiKeyModalState}
+        setModalState={setApiKeyModalState}
+        isCancellable={isApiKeySet}
       />
       <Navigation
-        isMobile={isMobile}
-        isMenuOpen={isMenuOpen}
-        setIsMenuOpen={setIsMenuOpen}
-        setIsApiModalOpen={setIsApiModalOpen}
+        navState={navState}
+        setNavState={(val: ActiveState) => setNavState(val)}
+        setApiKeyModalState={setApiKeyModalState}
       />
-      <Routes>
-        <Route path="/" element={<DocsGPT isMenuOpen={isMenuOpen} />} />
-      </Routes>
+      <div
+        className={`${
+          navState === 'ACTIVE' ? 'ml-0 md:ml-72 lg:ml-96' : ' ml-0 md:ml-16'
+        }`}
+      >
+        <Routes>
+          <Route path="/" element={<Conversation />} />
+          <Route path="/about" element={<About />} />
+        </Routes>
+      </div>
     </div>
   );
 }

frontend/src/Navigation.tsx

@@ -0,0 +1,97 @@
+import { NavLink } from 'react-router-dom';
+import Arrow1 from './assets/arrow.svg';
+import Hamburger from './assets/hamburger.svg';
+import Key from './assets/key.svg';
+import Info from './assets/info.svg';
+import Link from './assets/link.svg';
+import { ActiveState } from './models/misc';
+
+//TODO - Need to replace Chat button to open secondary nav with scrollable past chats option and new chat at top
+//TODO - Need to add Discord and Github links
+
+export default function Navigation({
+  navState,
+  setNavState,
+  setApiKeyModalState,
+}: {
+  navState: ActiveState;
+  setNavState: (val: ActiveState) => void;
+  setApiKeyModalState: (val: ActiveState) => void;
+}) {
+  const openNav = (
+    <div className="fixed h-full w-72 flex-col border-r-2 border-gray-100 bg-gray-50 transition-all md:visible md:flex lg:w-96">
+      <div className={'h-16 w-full border-b-2 border-gray-100'}>
+        <button
+          className="float-right mr-5 mt-5 h-5 w-5"
+          onClick={() => setNavState('INACTIVE')}
+        >
+          <img
+            src={Arrow1}
+            alt="menu toggle"
+            className={'m-auto w-3 rotate-0 transition-all'}
+          />
+        </button>
+      </div>
+      <div className="flex-grow border-b-2 border-gray-100"></div>
+
+      <div className="flex h-16 flex-col border-b-2 border-gray-100">
+        <div
+          className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
+          onClick={() => {
+            setApiKeyModalState('ACTIVE');
+          }}
+        >
+          <img src={Key} alt="key" className="ml-2 w-6" />
+          <p className="my-auto text-eerie-black">Reset Key</p>
+        </div>
+      </div>
+
+      <div className="flex h-48 flex-col border-b-2 border-gray-100">
+        <NavLink
+          to="/about"
+          className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
+        >
+          <img src={Info} alt="info" className="ml-2 w-5" />
+          <p className="my-auto text-eerie-black">About</p>
+        </NavLink>
+
+        <div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
+          <img src={Link} alt="link" className="ml-2 w-5" />
+          <p className="my-auto text-eerie-black">Discord</p>
+        </div>
+
+        <div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
+          <img src={Link} alt="link" className="ml-2 w-5" />
+          <p className="my-auto text-eerie-black">Github</p>
+        </div>
+      </div>
+    </div>
+  );
+
+  const closedNav = (
+    <>
+      <div className="fixed hidden h-full w-16 flex-col border-r-2 border-gray-100 bg-gray-50 transition-all md:flex">
+        <div className={'h-16 w-16 border-b-2 border-gray-100'}>
+          <button
+            className="float-right mr-5 mt-5 h-5 w-5"
+            onClick={() => setNavState('ACTIVE')}
+          >
+            <img
+              src={Arrow1}
+              alt="menu toggle"
+              className={'m-auto w-3 rotate-180 transition-all'}
+            />
+          </button>
+        </div>
+      </div>
+      <button
+        className="fixed mt-5 ml-6 h-6 w-6 md:hidden"
+        onClick={() => setNavState('ACTIVE')}
+      >
+        <img src={Hamburger} alt="menu toggle" className="w-7" />
+      </button>
+    </>
+  );
+
+  return navState === 'ACTIVE' ? openNav : closedNav;
+}

frontend/src/assets/exit.svg

@@ -0,0 +1,10 @@
+<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_202_7)">
+<path d="M750 50L50 750M750 750L50 50" stroke="black" stroke-opacity="0.54" stroke-width="100" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_202_7">
+<rect width="800" height="800" fill="white"/>
+</clipPath>
+</defs>
+</svg>

frontend/src/assets/hamburger.svg

@@ -0,0 +1,3 @@
+<svg width="600" height="450" viewBox="0 0 600 450" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25 25H575M25 225H575M25 425H575" stroke="black" stroke-opacity="0.54" stroke-width="50" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/src/components/APIKeyModal.tsx

@@ -1,60 +0,0 @@
-import { useState } from 'react';
-
-export default function APIKeyModal({
-  isApiModalOpen,
-  setIsApiModalOpen,
-  apiKey,
-  setApiKey,
-}: {
-  isApiModalOpen: boolean;
-  setIsApiModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  apiKey: string;
-  setApiKey: React.Dispatch<React.SetStateAction<string>>;
-}) {
-  const [formError, setFormError] = useState(false);
-
-  const handleResetKey = () => {
-    if (!apiKey) {
-      setFormError(true);
-    } else {
-      setFormError(false);
-      setIsApiModalOpen(false);
-    }
-  };
-
-  return (
-    <div
-      className={`${
-        isApiModalOpen ? 'visible' : 'hidden'
-      } absolute z-30  h-screen w-screen  bg-gray-alpha`}
-    >
-      <div className="mx-auto mt-24 flex w-128 flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
-        <p className="text-xl text-jet">OpenAI API Key</p>
-        <p className="text-lg leading-5 text-gray-500">
-          Before you can start using DocsGPT we need you to provide an API key
-          for llm. Currently, we support only OpenAI but soon many more. You can
-          find it here.
-        </p>
-        <input
-          type="text"
-          className="h-10 w-full border-b-2 border-jet focus:outline-none"
-          value={apiKey}
-          maxLength={100}
-          placeholder="API Key"
-          onChange={(e) => setApiKey(e.target.value)}
-        />
-        <div className="flex justify-between">
-          {formError && (
-            <p className="text-sm text-red-500">Please enter a valid API key</p>
-          )}
-          <button
-            onClick={handleResetKey}
-            className="ml-auto h-10 w-20 rounded-lg bg-violet-800 text-white transition-all hover:bg-violet-700"
-          >
-            Save
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

frontend/src/components/DocsGPT.tsx

@@ -1,7 +0,0 @@
-export default function DocsGPT({ isMenuOpen }: { isMenuOpen: boolean }) {
-  return (
-    <div className={`${isMenuOpen ? 'md:ml-72 lg:ml-96' : 'ml-16'}`}>
-      Docs GPT Chat Placeholder
-    </div>
-  );
-}

frontend/src/components/Navigation/Navigation.tsx

@@ -1,103 +0,0 @@
-import React, { useState } from 'react';
-import Arrow1 from './imgs/arrow.svg';
-import Key from './imgs/key.svg';
-import Info from './imgs/info.svg';
-import Link from './imgs/link.svg';
-
-function MobileNavigation() {
-  return <div>Mobile Navigation</div>;
-}
-
-function DesktopNavigation({
-  isMenuOpen,
-  setIsMenuOpen,
-  setIsApiModalOpen,
-}: {
-  isMenuOpen: boolean;
-  setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  setIsApiModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}) {
-  return (
-    <div
-      className={`${
-        isMenuOpen ? 'w-72 lg:w-96' : 'w-16'
-      } fixed flex h-screen flex-col border-r-2 border-gray-100 bg-gray-50 transition-all`}
-    >
-      <div
-        className={`${
-          isMenuOpen ? 'w-full' : 'w-16'
-        } ml-auto h-16 border-b-2 border-gray-100`}
-      >
-        <button
-          className="float-right mr-5 mt-5 h-5 w-5"
-          onClick={() => setIsMenuOpen(!isMenuOpen)}
-        >
-          <img
-            src={Arrow1}
-            alt="menu toggle"
-            className={`${
-              isMenuOpen ? 'rotate-0' : 'rotate-180'
-            } m-auto w-3 transition-all`}
-          />
-        </button>
-      </div>
-
-      {isMenuOpen && (
-        <>
-          <div className="flex-grow border-b-2 border-gray-100"></div>
-
-          <div className="flex h-16 flex-col border-b-2 border-gray-100">
-            <div
-              className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
-              onClick={() => setIsApiModalOpen(true)}
-            >
-              <img src={Key} alt="key" className="ml-2 w-6" />
-              <p className="my-auto text-eerie-black">Reset Key</p>
-            </div>
-          </div>
-
-          <div className="flex h-48 flex-col border-b-2 border-gray-100">
-            <div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
-              <img src={Info} alt="info" className="ml-2 w-5" />
-              <p className="my-auto text-eerie-black">About</p>
-            </div>
-
-            <div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
-              <img src={Link} alt="link" className="ml-2 w-5" />
-              <p className="my-auto text-eerie-black">Discord</p>
-            </div>
-
-            <div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
-              <img src={Link} alt="link" className="ml-2 w-5" />
-              <p className="my-auto text-eerie-black">Github</p>
-            </div>
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
-
-export default function Navigation({
-  isMobile,
-  isMenuOpen,
-  setIsMenuOpen,
-  setIsApiModalOpen,
-}: {
-  isMobile: boolean;
-  isMenuOpen: boolean;
-  setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  setIsApiModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}) {
-  if (isMobile) {
-    return <MobileNavigation />;
-  } else {
-    return (
-      <DesktopNavigation
-        isMenuOpen={isMenuOpen}
-        setIsMenuOpen={setIsMenuOpen}
-        setIsApiModalOpen={setIsApiModalOpen}
-      />
-    );
-  }
-}

frontend/src/components/Navigation/PastChat.tsx

@@ -1 +0,0 @@
-export default function PastChat() {}

frontend/src/conversation/Conversation.tsx

@@ -0,0 +1,7 @@
+export default function Conversation() {
+  return (
+    <div className="h-full w-full p-6 text-center transition-all">
+      Docs GPT Chat Placeholder
+    </div>
+  );
+}

frontend/src/index.css

@@ -15,6 +15,8 @@
 html {
   line-height: 1.15; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
+  min-height: 100vh;
+  overflow-x: hidden;
 }
 
 /* Sections
@@ -26,6 +28,9 @@ html {
 
 body {
   margin: 0;
+  min-height: 100vh;
+  overflow-x: hidden;
+  font-family: 'Inter', sans-serif;
 }
 
 /**

frontend/src/main.tsx

@@ -2,12 +2,16 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import store from './store';
 import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <BrowserRouter>
-      <App />
+      <Provider store={store}>
+        <App />
+      </Provider>
     </BrowserRouter>
   </React.StrictMode>,
 );

frontend/src/models/misc.ts

@@ -0,0 +1 @@
+export type ActiveState = 'ACTIVE' | 'INACTIVE';

frontend/src/preferences/APIKeyModal.tsx

@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { ActiveState } from '../models/misc';
+import { setApiKey } from './preferenceSlice';
+
+export default function APIKeyModal({
+  modalState,
+  setModalState,
+  isCancellable = true,
+}: {
+  modalState: ActiveState;
+  setModalState: (val: ActiveState) => void;
+  isCancellable?: boolean;
+}) {
+  const dispatch = useDispatch();
+  const [key, setKey] = useState('');
+  const [isError, setIsError] = useState(false);
+
+  function handleSubmit() {
+    if (key.length <= 1) {
+      setIsError(true);
+    } else {
+      dispatch(setApiKey(key));
+      setModalState('INACTIVE');
+      setKey('');
+      setIsError(false);
+    }
+  }
+
+  function handleCancel() {
+    setKey('');
+    setIsError(false);
+    setModalState('INACTIVE');
+  }
+
+  return (
+    <div
+      className={`${
+        modalState === 'ACTIVE' ? 'visible' : 'hidden'
+      } absolute z-30  h-screen w-screen  bg-gray-alpha`}
+    >
+      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
+        <p className="text-xl text-jet">OpenAI API Key</p>
+        <p className="text-lg leading-5 text-gray-500">
+          Before you can start using DocsGPT we need you to provide an API key
+          for llm. Currently, we support only OpenAI but soon many more. You can
+          find it here.
+        </p>
+        <input
+          type="text"
+          className="h-10 w-full border-b-2 border-jet focus:outline-none"
+          value={key}
+          maxLength={100}
+          placeholder="API Key"
+          onChange={(e) => setKey(e.target.value)}
+        />
+        <div className="flex flex-row-reverse">
+          <div>
+            <button
+              onClick={() => handleSubmit()}
+              className="ml-auto h-10 w-20 rounded-lg bg-violet-800 text-white transition-all hover:bg-violet-700"
+            >
+              Save
+            </button>
+            {isCancellable && (
+              <button
+                onClick={() => handleCancel()}
+                className="ml-5 h-10 w-20 rounded-lg border border-violet-700 bg-white text-violet-800 transition-all hover:bg-violet-700 hover:text-white"
+              >
+                Cancel
+              </button>
+            )}
+          </div>
+          {isError && (
+            <p className="mr-auto text-sm text-red-500">
+              Please enter a valid API key
+            </p>
+          )}
+        </div>
+      </article>
+    </div>
+  );
+}

frontend/src/preferences/preferenceSlice.ts

@@ -0,0 +1,29 @@
+import { createSlice } from '@reduxjs/toolkit';
+import store from '../store';
+
+interface Preference {
+  apiKey: string;
+}
+
+const initialState: Preference = {
+  apiKey: '',
+};
+
+export const prefSlice = createSlice({
+  name: 'preference',
+  initialState,
+  reducers: {
+    setApiKey: (state, action) => {
+      state.apiKey = action.payload;
+    },
+  },
+});
+
+export const { setApiKey } = prefSlice.actions;
+export default prefSlice.reducer;
+
+type RootState = ReturnType<typeof store.getState>;
+
+export const selectApiKey = (state: RootState) => state.preference.apiKey;
+export const selectApiKeyStatus = (state: RootState) =>
+  !!state.preference.apiKey;

frontend/src/store.ts

@@ -0,0 +1,12 @@
+// import { configureStore, createSlice } from '@reduxjs/toolkit';
+
+import { configureStore } from '@reduxjs/toolkit';
+import { prefSlice } from './preferences/preferenceSlice';
+
+const store = configureStore({
+  reducer: {
+    preference: prefSlice.reducer,
+  },
+});
+
+export default store;