FEAT: Create system prompt lib and fix some styling issue

kingchan818 · Jul 28, 2024 · b88194c · b88194c
1 parent b104f0b
commit b88194c
Show file tree

Hide file tree

Showing 20 changed files with 685 additions and 141 deletions.
diff --git a/frontend/.env b/frontend/.env
@@ -2,4 +2,4 @@ EXTEND_ESLINT=true
 REACT_APP_BACKEND_PROTOCOL=http
 REACT_APP_BACKEND_HOST=localhost
 REACT_APP_BACKEND_PORT=8181
-REACT_APP_BACKEND_PATH=api
+REACT_APP_BACKEND_PATH=/
diff --git a/frontend/.eslintrc b/frontend/.eslintrc
@@ -1,85 +1,54 @@
 {
-    "extends": [
-        "airbnb",
-        "airbnb/hooks",
-        "plugin:react/recommended",
-        "plugin:jsx-a11y/recommended",
-        "plugin:import/errors",
-        "plugin:import/warnings",
-        "react-app",
-        "prettier"
-    ],
-    "plugins": [
-        "react",
-        "jsx-a11y",
-        "import"
-    ],
-    "parserOptions": {
-        "ecmaVersion": 2021,
-        "sourceType": "module",
-        "ecmaFeatures": {
-            "jsx": true
-        }
+  "extends": [
+    "airbnb",
+    "airbnb/hooks",
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "react-app",
+    "prettier",
+  ],
+  "plugins": ["react", "jsx-a11y", "import"],
+  "parserOptions": {
+    "ecmaVersion": 2021,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
     },
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-    "rules": {
-        // Add any additional rules or overrides here
-        "react/jsx-no-constructed-context-values": [
-            "off"
-        ],
-        "jsx-a11y/label-has-associated-control": [
-            "off"
-        ],
-        "import/no-extraneous-dependencies": [
-            "warn"
-        ],
-        "react/display-name": [
-            "off"
-        ],
-        "import/prefer-default-export": [
-            "off"
-        ],
-        "react/forbid-prop-types": [
-            "off"
-        ],
-        "no-shadow": [
-            "off"
-        ],
-        "react/jsx-props-no-spreading": [
-            "off"
-        ],
-        "react/prop-types": [
-            "off"
-        ],
-        "react/function-component-definition": [
-            "off"
-        ],
-        "import/extensions": [
-            "error",
-            "ignorePackages",
-            {
-                "js": "never",
-                "jsx": "never"
-            }
-        ]
+  },
+  "env": {
+    "browser": true,
+    "es2021": true,
+  },
+  "rules": {
+    // Add any additional rules or overrides here
+    "react/jsx-no-constructed-context-values": ["off"],
+    "jsx-a11y/label-has-associated-control": ["off"],
+    "import/no-extraneous-dependencies": ["warn"],
+    "react/display-name": ["off"],
+    "import/prefer-default-export": ["off"],
+    "react/forbid-prop-types": ["off"],
+    "no-shadow": ["off"],
+    "react/jsx-props-no-spreading": ["off"],
+    "react/prop-types": ["off"],
+    "react/function-component-definition": ["off"],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+      },
+    ],
+    "react/react-in-jsx-scope": ["off"],
+  },
+  "settings": {
+    "import/resolver": {
+      "alias": {
+        "map": [["@", "./src"]],
+        "extensions": [".js", ".jsx"],
+      },
     },
-    "settings": {
-        "import/resolver": {
-            "alias": {
-                "map": [
-                    [
-                        "@",
-                        "./src"
-                    ]
-                ],
-                "extensions": [
-                    ".js",
-                    ".jsx"
-                ]
-            }
-        }
-    }
-}
+  },
+}
diff --git a/frontend/package.json b/frontend/package.json
@@ -5,12 +5,14 @@
   "dependencies": {
     "@craco/craco": "^7.1.0",
     "@microsoft/fetch-event-source": "^2.0.1",
+    "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-context-menu": "^2.2.1",
-    "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.1",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
@@ -24,6 +26,7 @@
     "lodash": "^4.17.21",
     "lucide-react": "^0.363.0",
     "moment": "^2.30.1",
+    "next-themes": "^0.3.0",
     "parse-numeric-range": "^1.3.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
@@ -41,13 +44,14 @@
     "rehype-highlight": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "serve": "^14.2.3",
+    "sonner": "^1.5.0",
     "styled-components": "^6.1.12",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "craco start",
+    "dev": "craco start",
     "build": "craco build",
     "test": "craco test",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -6,6 +6,7 @@ import Home from './pages/Home';
 import Login from './pages/Login';
 import { setCurrentUser } from './redux/reducers/user.reducer';
 import { ThemeProvider } from './components/theme-provider';
+import { Toaster } from './components/ui/sonner';
 
 function App() {
   const { currentUser } = useSelector((state) => state.user);
@@ -23,6 +24,7 @@ function App() {
       <BrowserRouter basename="/">
         <Routes>{isNil(currentUser) ? <Route path="/" Component={Login} /> : <Route path="/" Component={Home} />}</Routes>
       </BrowserRouter>
+      <Toaster />
     </ThemeProvider>
   );
 }

diff --git a/frontend/src/components/CopyCode.jsx b/frontend/src/components/CopyCode.jsx
@@ -19,7 +19,7 @@ function CopyCode({ text }) {
 
   return (
     <button type="button" className="opacity-60 cursor-pointer flex" onClick={() => copyToClipboard(text)}>
-      {copied ? <span className="mr-2">Copied!</span> : <LuClipboardCopy />}
+      {copied ? <span className="mr-2 text-xs">Copied!</span> : <LuClipboardCopy className="z-0" />}
     </button>
   );
 }

diff --git a/frontend/src/components/Message.jsx b/frontend/src/components/Message.jsx
@@ -37,7 +37,7 @@ function Message({ role, text, messages, messageIdx }) {
       {messageIdx === messages.length - 1 && (
         <div className="mt-2 opacity-60 cursor-pointer flex">
           <CopyCode text={text} />
-          <IoReloadOutline className="ml-3" />
+          {/* <IoReloadOutline className="ml-3" /> TODO: Do it later */}
         </div>
       )}
     </div>

diff --git a/frontend/src/components/ModelConfiguratorDialog.jsx b/frontend/src/components/ModelConfiguratorDialog.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { GrConfigure } from 'react-icons/gr';
 import { useDispatch, useSelector } from 'react-redux';
 import { Label } from '@radix-ui/react-dropdown-menu';
@@ -25,18 +25,10 @@ function ModelConfiguratorDialog({ setToggleDropDownList }) {
   const dispatch = useDispatch();
   const maxSliderSteps = Array.from({ length: 10 }, (_, i) => i + 1);
 
-  useEffect(() => {
-    const existingPrompts = localStorage.getItem('systemPrompts');
-    if (existingPrompts) {
-      const prompts = JSON.parse(existingPrompts);
-      dispatch(setCurrentSystemPrompt(prompts[0]?.details || ''));
-    }
-  }, [dispatch]);
-
   return (
     <Dialog>
       <DialogTrigger className="w-2/3" asChild>
-        <Button className="mt-1 mb-3" asChild>
+        <Button className="mt-1 w-full" asChild>
           <div>
             <GrConfigure className="mr-3" />
             <div>Configure Current Model</div>
@@ -93,7 +85,7 @@ function ModelConfiguratorDialog({ setToggleDropDownList }) {
             placeholder="Try to write something....."
             rows={10}
             onChange={(e) => dispatch(setCurrentSystemPrompt(e.target?.value))}
-            value={currentSystemPrompt}
+            value={currentSystemPrompt.prompt || ''}
           />
           <p className="text-xs text-muted-foreground">
             System prompts are used to provide context to the AI model. You can edit the prompt to get different results.

diff --git a/frontend/src/components/ModelDropDown.jsx b/frontend/src/components/ModelDropDown.jsx
@@ -30,13 +30,13 @@ function ModelDropDown() {
       {toggleDropDownList && (
         <button
           type="button"
-          className="content flex flex-col items-center justify-center mt-2 min-w-[340px] max-w-xs overflow-hidden rounded-lg border border-gray-100 bg-token-surface-primary shadow-lg dark:border-gray-700 bg-white dark:bg-[#202123]"
+          className="content flex flex-col items-center justify-center mt-2 min-w-[340px] max-w-xs overflow-hidden rounded-lg border border-gray-100 bg-token-surface-primary shadow-lg dark:border-gray-700 bg-white dark:bg-[#202123] p-3"
         >
           {predefinedModels.map((model) => {
             const ReactIcon = createIcon(model.icon);
             return (
               <button
-                className="flex p-3 justify-between items-center"
+                className="flex py-2 px-1 justify-between items-center"
                 type="button"
                 key={model.id}
                 onClick={() => {
@@ -46,9 +46,9 @@ function ModelDropDown() {
                 <ReactIcon size={model.size} />
                 <div className="mx-3 text-start">
                   <div className="text-base">
-                    ChatGPT <span className="text-white/70">{model.name}</span>
+                    ChatGPT <span className="dark:text-white/70 text-black/50">{model.name}</span>
                   </div>
-                  <div className="text-sm text-gray-400">{model.description}</div>
+                  <div className="text-sm dark:text-gray-400 text-black/50">{model.description}</div>
                 </div>
                 <InputBox
                   isActive={currentModel.id === model.id}

diff --git a/frontend/src/components/Nav.jsx b/frontend/src/components/Nav.jsx
@@ -1,12 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { LuPanelLeftOpen, LuPanelRightOpen } from 'react-icons/lu';
-import { Moon, Sun } from 'lucide-react';
-
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
-import { Button } from '@/components/ui/button';
-import { useTheme } from './theme-provider';
 import ModelDropDown from './ModelDropDown';
+import SettingsMenu from './SettingsMenu';
 
 MenuIcon.propTypes = {
   sideBarToggled: PropTypes.bool.isRequired,
@@ -25,35 +21,11 @@ function MenuIcon({ sideBarToggled, setFn }) {
   );
 }
 
-export function ModeToggle() {
-  const { setTheme } = useTheme();
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
 export default function Nav(props) {
-  const { setTheme, theme } = useTheme();
-
   return (
-    <div className="flex dark:text-white justify-between items-center px-3 py-3 sticky top-0 bg-white dark:bg-black">
+    <div className="flex dark:text-white justify-between items-center px-3 py-3 sticky top-0 bg-white dark:bg-black z-10">
       <ModelDropDown />
-      <ModeToggle />
-      {/* </ModeToggle> */}
+      <SettingsMenu />
     </div>
   );
 }