Update Header to be Mobile Responsive

backend/poetry.lock

@@ -109,20 +109,6 @@ files = [
 [package.dependencies]
 frozenlist = ">=1.1.0"
 
-[[package]]
-name = "aiostream"
-version = "0.5.2"
-description = "Generator-based operators for asynchronous iteration"
-optional = false
-python-versions = ">=3.8"
-files = [
-    {file = "aiostream-0.5.2-py3-none-any.whl", hash = "sha256:054660370be9d37f6fe3ece3851009240416bd082e469fd90cc8673d3818cf71"},
-    {file = "aiostream-0.5.2.tar.gz", hash = "sha256:b71b519a2d66c38f0872403ab86417955b77352f08d9ad02ad46fc3926b389f4"},
-]
-
-[package.dependencies]
-typing-extensions = "*"
-
 [[package]]
 name = "annotated-types"
 version = "0.6.0"
@@ -799,20 +785,19 @@ test = ["httpx (>=0.24.1)", "pytest (>=7.4.0)"]
 
 [[package]]
 name = "llama-index"
-version = "0.9.4"
+version = "0.9.22"
 description = "Interface between LLMs and your data"
 optional = false
-python-versions = ">=3.8.1,<3.12"
+python-versions = ">=3.8.1,<4.0"
 files = [
-    {file = "llama_index-0.9.4-py3-none-any.whl", hash = "sha256:c3250dd15f23e24b61db046c762b6f86420164a7d02f28dd693eea828e3f9786"},
-    {file = "llama_index-0.9.4.tar.gz", hash = "sha256:79823e99d6a874019670ad057da1428ac620a4ce45b58b234aa483f40c537d10"},
+    {file = "llama_index-0.9.22-py3-none-any.whl", hash = "sha256:8731b2137decfae9f56a2837f3791d8e4ce434a9ec9d6d74d6dafb2d736f05f7"},
+    {file = "llama_index-0.9.22.tar.gz", hash = "sha256:7eecb62106398f9c5b1c04e79fee82a1004c26387055335c23a8f33833c8afff"},
 ]
 
 [package.dependencies]
 aiohttp = ">=3.8.6,<4.0.0"
-aiostream = ">=0.5.2,<0.6.0"
 beautifulsoup4 = ">=4.12.2,<5.0.0"
-dataclasses-json = ">=0.5.7,<0.6.0"
+dataclasses-json = "*"
 deprecated = ">=1.2.9.3"
 fsspec = ">=2023.5.0"
 httpx = "*"
@@ -820,19 +805,20 @@ nest-asyncio = ">=1.5.8,<2.0.0"
 nltk = ">=3.8.1,<4.0.0"
 numpy = "*"
 openai = ">=1.1.0"
-pandas = {version = "*", extras = ["jinja2"]}
+pandas = "*"
+requests = ">=2.31.0"
 SQLAlchemy = {version = ">=1.4.49", extras = ["asyncio"]}
 tenacity = ">=8.2.0,<9.0.0"
 tiktoken = ">=0.3.3"
 typing-extensions = ">=4.5.0"
 typing-inspect = ">=0.8.0"
-urllib3 = "<2"
 
 [package.extras]
+gradientai = ["gradientai (>=1.4.0)"]
 langchain = ["langchain (>=0.0.303)"]
 local-models = ["optimum[onnxruntime] (>=1.13.2,<2.0.0)", "sentencepiece (>=0.1.99,<0.2.0)", "transformers[torch] (>=4.34.0,<5.0.0)"]
 postgres = ["asyncpg (>=0.28.0,<0.29.0)", "pgvector (>=0.1.0,<0.2.0)", "psycopg-binary (>=3.1.12,<4.0.0)"]
-query-tools = ["guidance (>=0.0.64,<0.0.65)", "jsonpath-ng (>=1.6.0,<2.0.0)", "lm-format-enforcer (>=0.4.3,<0.5.0)", "rank-bm25 (>=0.2.2,<0.3.0)", "scikit-learn (<1.3.0)", "spacy (>=3.7.1,<4.0.0)"]
+query-tools = ["guidance (>=0.0.64,<0.0.65)", "jsonpath-ng (>=1.6.0,<2.0.0)", "lm-format-enforcer (>=0.4.3,<0.5.0)", "rank-bm25 (>=0.2.2,<0.3.0)", "scikit-learn", "spacy (>=3.7.1,<4.0.0)"]
 
 [[package]]
 name = "markupsafe"
@@ -2794,4 +2780,4 @@ multidict = ">=4.0"
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.11,<3.12"
-content-hash = "70e9e6888a129526bdc06eca1afbb2be0a2f48687efa8a841445e650c316e922"
+content-hash = "5d6afd898b5a1c9f177f523fecff666723292db0858f92516d0346a43f01890d"

backend/pyproject.toml

@@ -10,13 +10,13 @@ packages = [{include = "backend"}]
 python = "^3.11,<3.12"
 fastapi = "^0.104.1"
 uvicorn = { extras = ["standard"], version = "^0.23.2" }
-llama-index = "^0.9.4"
+llama-index = "^0.9.22"
 pypdf = "^3.17.0"
 python-dotenv = "^1.0.0"
 llama-cpp-python = "^0.2.18"
 transformers = "^4.35.2"
-# torch = "^2.1.1" # For CPU version both Windows and Linux
-torch = { url = "https://download.pytorch.org/whl/cu121/torch-2.1.1%2Bcu121-cp311-cp311-win_amd64.whl"} # For Windows with Cuda 12.1
+torch = "^2.1.1" # For CPU version both Windows and Linux
+# torch = { url = "https://download.pytorch.org/whl/cu121/torch-2.1.1%2Bcu121-cp311-cp311-win_amd64.whl"} # For Windows with Cuda 12.1
 # torch = { url = "https://download.pytorch.org/whl/cu121/torch-2.1.1%2Bcu121-cp311-cp311-linux_x86_64.whl"} # For Linux with Cuda 12.1
 docx2txt = "^0.8"
 

frontend/app/components/header.tsx

@@ -2,28 +2,127 @@
 
 import Link from 'next/link';
 import Image from 'next/image';
-import { Home, InfoIcon, MessageCircle, Search } from 'lucide-react';
+import { Home, InfoIcon, MessageCircle, Search, FileQuestion, Menu } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
+import { useMedia } from 'react-use';
 import logo from '../../public/smart-retrieval-logo.webp'
 
 interface NavLinkProps {
   href: string;
   children: React.ReactNode;
+  onClick?: () => void; // Include onClick as an optional prop
 }
 
-const NavLink: React.FC<NavLinkProps> = ({ href, children }) => {
+interface MobileMenuProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose }) => {
+  const isLargeScreen = useMedia('(min-width: 1024px)');
+  const menuRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const handleOutsideClick = (event: MouseEvent | TouchEvent) => {
+      if (
+        !isLargeScreen &&
+        isOpen &&
+        !menuRef.current?.contains(event.target as Node) &&
+        !((event.target as HTMLElement).closest('.toggle-button')) // Exclude the toggle button
+      ) {
+        onClose(); // Close the menu
+      }
+    };
+
+    if (!isLargeScreen && isOpen) {
+      // Add event listeners for both mouse and touch events
+      document.addEventListener('mousedown', handleOutsideClick);
+    }
+
+    return () => {
+      // Remove the event listener when the component unmounts
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, [isLargeScreen, isOpen, onClose]);
+
+  useEffect(() => {
+    if (isLargeScreen && isOpen) {
+      onClose();
+    }
+  }, [isLargeScreen, isOpen, onClose]);
+  return (
+    <div ref={menuRef} className={`w-full h-full p-2 bg-opacity-80 ${isOpen ? 'flex' : 'hidden'}`}>
+      <div className="flex items-center justify-center mt-2" style={{ width: '9%', height: '9%' }}>
+        <Image
+          className='rounded-full max-w-full'
+          src={logo}
+          alt="Logo"
+          style={{
+            width: 'auto',
+            height: 'auto',
+          }}
+          priority
+          sizes="100vw, 50vw, 33vw"
+        />
+      </div>
+      <div className="flex items-center justify-center h-full">
+        {/* Mobile menu content */}
+        <div className="w-64 p-4 rounded-r-md">
+          <NavLink href="/" onClick={onClose}>
+            <div className="flex items-center mb-4">
+              <Home className="mr-2 h-5 w-5" />
+              Home
+            </div>
+          </NavLink>
+          <NavLink href="/about" onClick={onClose}>
+            <div className="flex items-center mb-4">
+              <InfoIcon className="mr-2 h-5 w-5" />
+              About
+            </div>
+          </NavLink>
+          <NavLink href="/chat" onClick={onClose}>
+            <div className="flex items-center mb-4">
+              <MessageCircle className="mr-2 h-5 w-5" />
+              Chat
+            </div>
+          </NavLink>
+          <NavLink href="/query" onClick={onClose}>
+            <div className="flex items-center mb-4">
+              <FileQuestion className="mr-2 h-5 w-5" />
+              Query
+            </div>
+          </NavLink>
+          <NavLink href="/search" onClick={onClose}>
+            <div className="flex items-center">
+              <Search className="mr-2 h-5 w-5" />
+              Search
+            </div>
+          </NavLink>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const NavLink: React.FC<NavLinkProps> = ({ href, children, onClick }) => {
   // Use the useRouter hook to get information about the current route
   const pathname = usePathname();
 
   // Determine if the current tab is active
   const isActive = pathname === href;
 
+  const handleClick = () => {
+    if (onClick) {
+      onClick(); // Call the onClick handler if provided
+    }
+  };
+
   return (
     <Link href={href} passHref>
       {/* Add a class to highlight the active tab */}
-      <div className={`flex items-center font-bold ${isActive ? 'text-blue-500' : ''}`}>
+      <div className={`flex items-center font-bold ${isActive ? 'text-blue-500' : ''}`} onClick={handleClick}>
         {children}
       </div>
     </Link>
@@ -31,6 +130,7 @@ const NavLink: React.FC<NavLinkProps> = ({ href, children }) => {
 };
 
 export default function Header() {
+  const isLargeScreen = useMedia('(min-width: 1024px)');
   const [mounted, setMounted] = useState(false);
   const { theme, setTheme } = useTheme();
 
@@ -38,6 +138,19 @@ export default function Header() {
     setMounted(true);
   }, []);
 
+  const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const toggleMobileMenu = () => {
+    // Handle the toggle click here
+    if (isMobileMenuOpen) {
+      // If the menu is open, close it
+      setMobileMenuOpen(false);
+    } else {
+      // If the menu is closed, open it
+      setMobileMenuOpen(true);
+    }
+  };
+
   if (!mounted) return null;
 
   return (
@@ -45,24 +158,40 @@ export default function Header() {
       {/* Navigation Bar */}
       <nav className="fixed left-0 top-0 w-full bg-gradient-to-b from-zinc-200 pb-2 pt-2 backdrop-blur-2xl dark:border-neutral-700 dark:bg-zinc-700/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-100 lg:p-4 lg:dark:bg-zinc-800/30 shadow-xl">
         <div className="flex items-center flex-wrap lg:flex-nowrap px-4">
-          <div className="flex items-center" style={{ width: '6%', height: 'auto' }}>
-            <Image
-              className='rounded-full max-w-full'
-              src={logo}
-              alt="Logo"
-              style={{
-                width: 'auto',
-                height: 'auto',
-              }}
-              priority
-              sizes="100vw, 50vw, 33vw"
-            />
-          </div>
+          {isLargeScreen && (
+            <div className="flex items-center" style={{ width: '6%', height: 'auto' }}>
+              <Image
+                className='rounded-full max-w-full'
+                src={logo}
+                alt="Logo"
+                style={{
+                  width: 'auto',
+                  height: 'auto',
+                }}
+                priority
+                sizes="100vw, 50vw, 33vw"
+              />
+            </div>
+          )}
           <div className="flex items-center pr-2 pl-2 gap-2">
             <span className="hidden lg:inline lg:text-lg font-nunito font-bold">Smart Retrieval</span>
             <span className="hidden lg:inline lg:text-lg font-nunito">|</span>
           </div>
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-4 lg:hidden">
+            {/* Toggle button for mobile menu */}
+            <button
+              className="flex items-center text-xl transition duration-300 ease-in-out transform hover:scale-125 toggle-button"
+              title="Toggle mobile menu"
+              onClick={toggleMobileMenu}
+            >
+              <span role="img" aria-label="menu icon">
+                <Menu />
+              </span>
+            </button>
+          </div>
+          {/* Mobile menu component */}
+          <MobileMenu isOpen={isMobileMenuOpen} onClose={() => setMobileMenuOpen(false)} />
+          <div className={`hidden items-center gap-4 lg:flex`}>
             <NavLink href="/">
               <div className="flex items-center transition duration-300 ease-in-out transform hover:scale-125">
                 <Home className="mr-1 h-4 w-4" />
@@ -81,6 +210,12 @@ export default function Header() {
                 Chat
               </div>
             </NavLink>
+            <NavLink href="/query">
+              <div className="flex items-center transition duration-300 ease-in-out transform hover:scale-125">
+                <FileQuestion className="mr-1 h-4 w-4" />
+                Query
+              </div>
+            </NavLink>
             <NavLink href="/search">
               <div className="flex items-center transition duration-300 ease-in-out transform hover:scale-125">
                 <Search className="mr-1 h-4 w-4" />

frontend/package-lock.json

@@ -14,7 +14,7 @@
         "axios": "^1.6.2",
         "class-variance-authority": "^0.7",
         "llamaindex": "0.0.35",
-        "lucide-react": "^0.291",
+        "lucide-react": "^0.291.0",
         "next": "^13",
         "next-auth": "^4.24.5",
         "next-themes": "^0.2.1",
@@ -23,6 +23,7 @@
         "react-dom": "^18",
         "react-markdown": "^8.0.7",
         "react-syntax-highlighter": "^15.5.0",
+        "react-use": "^17.4.2",
         "remark": "^14.0.3",
         "remark-code-import": "^1.2.0",
         "remark-gfm": "^3.0.1",
@@ -2785,6 +2786,11 @@
         "@types/unist": "^2"
       }
     },
+    "node_modules/@types/js-cookie": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
+    },
     "node_modules/@types/katex": {
       "version": "0.16.6",
       "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.6.tgz",
@@ -3036,6 +3042,11 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@xobotyi/scrollbar-width": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
+      "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ=="
+    },
     "node_modules/abort-controller": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
@@ -3604,6 +3615,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -3617,6 +3636,14 @@
         "node": "*"
       }
     },
+    "node_modules/css-in-js-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
+      "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.3"
+      }
+    },
     "node_modules/css-tree": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
@@ -3750,6 +3777,14 @@
       "integrity": "sha512-qMa+E6yf1fNQbg3G66pHLXeJUP5CCCzNat1VPczOZOqgI2w4u+8y9sQnswMdGs5m4C1rOePq37EVBr/nsPQY7w==",
       "dev": true
     },
+    "node_modules/error-stack-parser": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
+      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
     "node_modules/es6-promise": {
       "version": "4.2.8",
       "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
@@ -3805,6 +3840,11 @@
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
     },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -3831,6 +3871,21 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fast-loops": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz",
+      "integrity": "sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g=="
+    },
+    "node_modules/fast-shallow-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
+      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
+    },
+    "node_modules/fastest-stable-stringify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
+      "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q=="
+    },
     "node_modules/fastq": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
@@ -4181,6 +4236,11 @@
         "ms": "^2.0.0"
       }
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -4224,6 +4284,15 @@
       "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
       "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
     },
+    "node_modules/inline-style-prefixer": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-7.0.0.tgz",
+      "integrity": "sha512-I7GEdScunP1dQ6IM2mQWh6v0mOYdYmH3Bp31UecKdrcUgcURTcctSe1IECdUznSHKSmsHtjrT3CwCPI1pyxfUQ==",
+      "dependencies": {
+        "css-in-js-utils": "^3.1.0",
+        "fast-loops": "^1.1.3"
+      }
+    },
     "node_modules/intl-messageformat": {
       "version": "10.5.8",
       "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.5.8.tgz",
@@ -4383,6 +4452,11 @@
         "url": "https://github.com/sponsors/panva"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "node_modules/js-tiktoken": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/js-tiktoken/-/js-tiktoken-1.0.8.tgz",
@@ -5599,6 +5673,50 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/nano-css": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.6.1.tgz",
+      "integrity": "sha512-T2Mhc//CepkTa3X4pUhKgbEheJHYAxD0VptuqFhDbGMUWVV2m+lkNiW/Ieuj35wrfC8Zm0l7HvssQh7zcEttSw==",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "css-tree": "^1.1.2",
+        "csstype": "^3.1.2",
+        "fastest-stable-stringify": "^2.0.2",
+        "inline-style-prefixer": "^7.0.0",
+        "rtl-css-js": "^1.16.1",
+        "stacktrace-js": "^2.0.2",
+        "stylis": "^4.3.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/nano-css/node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/nano-css/node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+    },
+    "node_modules/nano-css/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -6459,6 +6577,40 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-universal-interface": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
+      "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==",
+      "peerDependencies": {
+        "react": "*",
+        "tslib": "*"
+      }
+    },
+    "node_modules/react-use": {
+      "version": "17.4.2",
+      "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.4.2.tgz",
+      "integrity": "sha512-1jPtmWLD8OJJNYCdYLJEH/HM+bPDfJuyGwCYeJFgPmWY8ttwpgZnW5QnzgM55CYUByUiTjHxsGOnEpLl6yQaoQ==",
+      "dependencies": {
+        "@types/js-cookie": "^2.2.6",
+        "@xobotyi/scrollbar-width": "^1.9.5",
+        "copy-to-clipboard": "^3.3.1",
+        "fast-deep-equal": "^3.1.3",
+        "fast-shallow-equal": "^1.0.0",
+        "js-cookie": "^2.2.1",
+        "nano-css": "^5.6.1",
+        "react-universal-interface": "^0.6.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.1.0",
+        "set-harmonic-interval": "^1.0.1",
+        "throttle-debounce": "^3.0.1",
+        "ts-easing": "^0.2.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -6631,6 +6783,11 @@
         "yarn": ">=1.7.0"
       }
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -6661,6 +6818,14 @@
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz",
       "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA=="
     },
+    "node_modules/rtl-css-js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
+      "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -6707,6 +6872,17 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/scroll-into-view-if-needed": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.0.10.tgz",
@@ -6724,6 +6900,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/set-harmonic-interval": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
+      "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==",
+      "engines": {
+        "node": ">=6.9"
+      }
+    },
     "node_modules/setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
@@ -6759,6 +6943,14 @@
         "swr-store": "^0.10"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+      "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -6800,6 +6992,38 @@
         "svelte": "^4.0.0"
       }
     },
+    "node_modules/stack-generator": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz",
+      "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==",
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
+    "node_modules/stackframe": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
+    },
+    "node_modules/stacktrace-gps": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz",
+      "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==",
+      "dependencies": {
+        "source-map": "0.5.6",
+        "stackframe": "^1.3.4"
+      }
+    },
+    "node_modules/stacktrace-js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
+      "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
+      "dependencies": {
+        "error-stack-parser": "^2.0.6",
+        "stack-generator": "^2.0.5",
+        "stacktrace-gps": "^3.0.4"
+      }
+    },
     "node_modules/streamsearch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -6905,6 +7129,11 @@
         }
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
+      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+    },
     "node_modules/sucrase": {
       "version": "3.34.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
@@ -7109,6 +7338,14 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
@@ -7208,6 +7445,11 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+    },
     "node_modules/tr46": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz",
@@ -7237,6 +7479,11 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/ts-easing": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
+      "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",

frontend/package.json

@@ -14,7 +14,7 @@
     "axios": "^1.6.2",
     "class-variance-authority": "^0.7",
     "llamaindex": "0.0.35",
-    "lucide-react": "^0.291",
+    "lucide-react": "^0.291.0",
     "next": "^13",
     "next-auth": "^4.24.5",
     "next-themes": "^0.2.1",
@@ -23,6 +23,7 @@
     "react-dom": "^18",
     "react-markdown": "^8.0.7",
     "react-syntax-highlighter": "^15.5.0",
+    "react-use": "^17.4.2",
     "remark": "^14.0.3",
     "remark-code-import": "^1.2.0",
     "remark-gfm": "^3.0.1",