Merge branch 'main' into table-redsign

frontend/src/App.tsx

@@ -19,7 +19,7 @@ function MainLayout() {
     <div className="dark:bg-raisin-black relative h-screen overflow-auto">
       <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
       <div
-        className={`h-[calc(100dvh-64px)] sm:h-screen ${
+        className={`h-[calc(100dvh-64px)] md:h-screen ${
           !isMobile
             ? `ml-0 ${!navOpen ? 'md:mx-auto lg:mx-auto' : 'md:ml-72'}`
             : 'ml-0 md:ml-16'
@@ -32,9 +32,9 @@ function MainLayout() {
 }
 
 export default function App() {
-  const [,,componentMounted] = useDarkTheme();
-  if(!componentMounted) {
-    return <div />
+  const [, , componentMounted] = useDarkTheme();
+  if (!componentMounted) {
+    return <div />;
   }
   return (
     <div className="h-full relative overflow-auto">

frontend/src/Navigation.tsx

@@ -2,15 +2,15 @@ import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { NavLink, useNavigate } from 'react-router-dom';
-
 import conversationService from './api/services/conversationService';
 import userService from './api/services/userService';
 import Add from './assets/add.svg';
+import openNewChat from './assets/openNewChat.svg';
+import Hamburger from './assets/hamburger.svg';
 import DocsGPT3 from './assets/cute_docsgpt3.svg';
 import Discord from './assets/discord.svg';
 import Expand from './assets/expand.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 Twitter from './assets/TwitterX.svg';
@@ -40,7 +40,11 @@ import {
   setSelectedDocs,
   setSourceDocs,
 } from './preferences/preferenceSlice';
+import { selectQueries } from './conversation/conversationSlice';
 import Upload from './upload/Upload';
+import ShareButton from './components/ShareButton';
+import Help from './components/Help';
+
 
 interface NavigationProps {
   navOpen: boolean;
@@ -63,6 +67,7 @@ NavImage.propTypes = {
 }; */
 export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const dispatch = useDispatch();
+  const queries = useSelector(selectQueries);
   const docs = useSelector(selectSourceDocs);
   const selectedDocs = useSelector(selectSelectedDocs);
   const conversations = useSelector(selectConversations);
@@ -73,7 +78,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const [isDarkTheme] = useDarkTheme();
   const [isDocsListOpen, setIsDocsListOpen] = useState(false);
   const { t } = useTranslation();
-
   const isApiKeySet = useSelector(selectApiKeyStatus);
   const [apiKeyModalState, setApiKeyModalState] =
     useState<ActiveState>('INACTIVE');
@@ -93,6 +97,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
     if (!conversations) {
       fetchConversations();
     }
+    if (queries.length === 0) {
+      resetConversation();
+    }
   }, [conversations, dispatch]);
 
   async function fetchConversations() {
@@ -164,7 +171,11 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
       }),
     );
   };
-
+  const newChat = () => {
+    if (queries && queries?.length > 0) {
+      resetConversation();
+    }
+  };
   async function updateConversationName(updatedConversation: {
     name: string;
     id: string;
@@ -200,26 +211,45 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   return (
     <>
       {!navOpen && (
-        <button
-          className="duration-25 absolute  top-3 left-3 z-20 hidden transition-all md:block"
-          onClick={() => {
-            setNavOpen(!navOpen);
-          }}
-        >
-          <img
-            src={Expand}
-            alt="menu toggle"
-            className={`${
-              !navOpen ? 'rotate-180' : 'rotate-0'
-            } m-auto transition-all duration-200`}
-          />
-        </button>
+        <div className="duration-25 absolute  top-3 left-3 z-20 hidden transition-all md:block">
+          <div className="flex gap-3 items-center">
+            <button
+              onClick={() => {
+                setNavOpen(!navOpen);
+              }}
+            >
+              <img
+                src={Expand}
+                alt="menu toggle"
+                className={`${
+                  !navOpen ? 'rotate-180' : 'rotate-0'
+                } m-auto transition-all duration-200`}
+              />
+            </button>
+            {queries?.length > 0 && (
+              <button
+                onClick={() => {
+                  newChat();
+                }}
+              >
+                <img
+                  src={openNewChat}
+                  alt="open new chat icon"
+                  className="cursor-pointer"
+                />
+              </button>
+            )}
+            <div className="text-[#949494] font-medium text-[20px]">
+              DocsGPT
+            </div>
+          </div>
+        </div>
       )}
       <div
         ref={navRef}
         className={`${
           !navOpen && '-ml-96 md:-ml-[18rem]'
-        } duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-[1px] border-b-0 bg-white transition-all dark:border-r-purple-taupe dark:bg-chinese-black dark:text-white`}
+        } duration-20 fixed top-0 z-40 flex h-full w-72 flex-col border-r-[1px] border-b-0 bg-white transition-all dark:border-r-purple-taupe dark:bg-chinese-black dark:text-white`}
       >
         <div
           className={'visible mt-2 flex h-[6vh] w-full justify-between md:h-12'}
@@ -275,7 +305,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             {t('newChat')}
           </p>
         </NavLink>
-        <div className="mb-auto h-[78vh] overflow-y-auto overflow-x-hidden dark:text-white">
+        <div
+          id="conversationsMainDiv"
+          className="mb-auto h-[78vh] overflow-y-auto overflow-x-hidden dark:text-white"
+        >
           {conversations && conversations.length > 0 ? (
             <div>
               <div className=" my-auto mx-4 mt-2 flex h-6 items-center justify-between gap-4 rounded-3xl">
@@ -304,7 +337,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             <></>
           )}
         </div>
-
         <div className="flex h-auto flex-col justify-end text-eerie-black dark:text-white">
           <div className="flex flex-col-reverse border-b-[1px] dark:border-b-purple-taupe">
             <div className="relative my-4 mx-4 flex gap-2">
@@ -359,83 +391,69 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               </p>
             </NavLink>
           </div>
-          <div className="flex justify-between gap-2 border-b-[1.5px] py-2 dark:border-b-purple-taupe">
-            <NavLink
-              onClick={() => {
-                if (isMobile) {
-                  setNavOpen(!navOpen);
-                }
-                resetConversation();
-              }}
-              to="/about"
-              className={({ isActive }) =>
-                `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
-                  isActive ? 'bg-gray-3000 dark:bg-[#28292E]' : ''
-                }`
-              }
-            >
-              <img
-                src={Info}
-                alt="icon"
-                className="ml-2 w-5 filter dark:invert"
-              />
-              <p className="my-auto pr-1 text-sm">{t('about')}</p>
-            </NavLink>
-            <div className="flex items-center justify-evenly gap-1 px-1">
-              <NavLink
-                target="_blank"
-                to={'https://discord.gg/WHJdfbQDR4'}
-                className={
-                  'rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]'
-                }
-              >
-                <img
-                  src={Discord}
-                  alt="discord"
-                  className="m-2 w-6 self-center filter dark:invert"
-                />
-              </NavLink>
-              <NavLink
-                target="_blank"
-                to={'https://twitter.com/docsgptai'}
-                className={
-                  'rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]'
-                }
-              >
-                <img
-                  src={Twitter}
-                  alt="x"
-                  className="m-2 w-5 self-center filter dark:invert"
-                />
-              </NavLink>
-              <NavLink
-                target="_blank"
-                to={'https://github.com/arc53/docsgpt'}
-                className={
-                  'rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]'
-                }
-              >
-                <img
-                  src={Github}
-                  alt="github"
-                  className="m-2 w-6 self-center filter dark:invert"
-                />
-              </NavLink>
+          <div className="flex flex-col justify-end text-eerie-black dark:text-white">
+            <div className="flex justify-between items-center px-1 py-1">
+              <Help />
+
+              <div className="flex items-center gap-1">
+                <NavLink
+                  target="_blank"
+                  to={'https://discord.gg/WHJdfbQDR4'}
+                  className={
+                    'rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]'
+                  }
+                >
+                  <img
+                    src={Discord}
+                    alt="discord"
+                    className="m-2 w-6 self-center filter dark:invert"
+                  />
+                </NavLink>
+                <NavLink
+                  target="_blank"
+                  to={'https://twitter.com/docsgptai'}
+                  className={
+                    'rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]'
+                  }
+                >
+                  <img
+                    src={Twitter}
+                    alt="x"
+                    className="m-2 w-5 self-center filter dark:invert"
+                  />
+                </NavLink>
+                <NavLink
+                  target="_blank"
+                  to={'https://github.com/arc53/docsgpt'}
+                  className={
+                    'rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]'
+                  }
+                >
+                  <img
+                    src={Github}
+                    alt="github"
+                    className="m-2 w-6 self-center filter dark:invert"
+                  />
+                </NavLink>
+              </div>
             </div>
           </div>
         </div>
       </div>
       <div className="sticky z-10 h-16 w-full border-b-2 bg-gray-50 dark:border-b-purple-taupe dark:bg-chinese-black md:hidden">
-        <button
-          className="mt-5 ml-6 h-6 w-6 md:hidden"
-          onClick={() => setNavOpen(true)}
-        >
-          <img
-            src={Hamburger}
-            alt="menu toggle"
-            className="w-7 filter dark:invert"
-          />
-        </button>
+        <div className="flex gap-6 items-center h-full ml-6 ">
+          <button
+            className=" h-6 w-6 md:hidden"
+            onClick={() => setNavOpen(true)}
+          >
+            <img
+              src={Hamburger}
+              alt="menu toggle"
+              className="w-7 filter dark:invert"
+            />
+          </button>
+          <div className="text-[#949494] font-medium text-[20px]">DocsGPT</div>
+        </div>
       </div>
       <APIKeyModal
         modalState={apiKeyModalState}

frontend/src/assets/documentation-dark.svg

@@ -1,3 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
-    <g transform="translate(-19.2,-19.2) scale(1.15,1.15)"><g fill="#949494" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M13.172,2h-7.172c-1.1,0 -2,0.9 -2,2v16c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2v-11.172c0,-0.53 -0.211,-1.039 -0.586,-1.414l-4.828,-4.828c-0.375,-0.375 -0.884,-0.586 -1.414,-0.586zM15,18h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM15,14h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM13,9v-5.5l5.5,5.5z"></path></g></g></g>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.25 8.64258V16.25C16.25 16.7473 16.0525 17.2242 15.7008 17.5758C15.3492 17.9275 14.8723 18.125 14.375 18.125H5.625C5.12772 18.125 4.65081 17.9275 4.29917 17.5758C3.94754 17.2242 3.75 16.7473 3.75 16.25V3.75C3.75 3.25272 3.94754 2.77581 4.29917 2.42417C4.65081 2.07254 5.12772 1.875 5.625 1.875H9.48242C9.81383 1.87505 10.1316 2.0067 10.366 2.24102L15.884 7.75898C16.1183 7.99335 16.2499 8.31117 16.25 8.64258Z" stroke="#ECECF1" stroke-width="1.11111" stroke-linejoin="round"/>
+<path d="M10 2.1875V6.875C10 7.20652 10.1317 7.52446 10.3661 7.75888C10.6005 7.9933 10.9185 8.125 11.25 8.125H15.9375M6.875 11.25H13.125M6.875 14.375H13.125" stroke="#ECECF1" stroke-width="1.11111" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

frontend/src/assets/documentation.svg

@@ -1,3 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
-    <g transform="translate(-19.2,-19.2) scale(1.15,1.15)"><g fill="black" fill-opacity="0.54" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M13.172,2h-7.172c-1.1,0 -2,0.9 -2,2v16c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2v-11.172c0,-0.53 -0.211,-1.039 -0.586,-1.414l-4.828,-4.828c-0.375,-0.375 -0.884,-0.586 -1.414,-0.586zM15,18h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM15,14h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM13,9v-5.5l5.5,5.5z"></path></g></g></g>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.25 8.64258V16.25C16.25 16.7473 16.0525 17.2242 15.7008 17.5758C15.3492 17.9275 14.8723 18.125 14.375 18.125H5.625C5.12772 18.125 4.65081 17.9275 4.29917 17.5758C3.94754 17.2242 3.75 16.7473 3.75 16.25V3.75C3.75 3.25272 3.94754 2.77581 4.29917 2.42417C4.65081 2.07254 5.12772 1.875 5.625 1.875H9.48242C9.81383 1.87505 10.1316 2.0067 10.366 2.24102L15.884 7.75898C16.1183 7.99335 16.2499 8.31117 16.25 8.64258Z" stroke="#6E6E6E" stroke-width="1.11111" stroke-linejoin="round"/>
+<path d="M10 2.1875V6.875C10 7.20652 10.1317 7.52446 10.3661 7.75888C10.6005 7.9933 10.9185 8.125 11.25 8.125H15.9375M6.875 11.25H13.125M6.875 14.375H13.125" stroke="#6E6E6E" stroke-width="1.11111" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

frontend/src/assets/envelope-dark.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.04867 15.49H15.1775C16.5339 15.49 17.3172 14.7067 17.3172 13.1548V4.83755C17.3172 3.29309 16.5265 2.50977 14.9515 2.50977H2.82302C1.47463 2.50977 0.683594 3.28569 0.683594 4.83755V13.1545C0.683594 14.7138 1.48138 15.49 3.04867 15.49ZM8.10441 9.3803L2.41609 3.76816C2.58163 3.70034 2.77738 3.66273 3.01106 3.66273H14.9971C15.2305 3.66273 15.434 3.70034 15.6072 3.78327L9.92692 9.38062C9.60291 9.7043 9.31652 9.84766 9.01534 9.84766C8.71384 9.84766 8.42841 9.70398 8.10441 9.3803ZM1.83559 13.1548V4.76234L6.16717 9.01162L1.84331 13.2824C1.83592 13.2448 1.83559 13.1998 1.83559 13.1548ZM16.1646 4.84494V13.2599L11.8629 9.0113L16.1649 4.78516L16.1646 4.84494ZM3.01106 14.3377C2.79249 14.3377 2.61184 14.3075 2.4537 14.2397L6.95852 9.78723L7.44838 10.2694C7.97552 10.7891 8.48017 11.0077 9.01534 11.0077C9.54249 11.0077 10.0548 10.7891 10.5823 10.2694L11.0718 9.78723L15.5696 14.2319C15.4111 14.3075 15.2154 14.3374 14.9968 14.3374L3.01106 14.3377Z" fill="#ECECF1"/>
+</svg>

frontend/src/assets/envelope.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.04867 15.49H15.1775C16.5339 15.49 17.3172 14.7067 17.3172 13.1548V4.83755C17.3172 3.29309 16.5265 2.50977 14.9515 2.50977H2.82302C1.47463 2.50977 0.683594 3.28569 0.683594 4.83755V13.1545C0.683594 14.7138 1.48138 15.49 3.04867 15.49ZM8.10441 9.3803L2.41609 3.76816C2.58163 3.70034 2.77738 3.66273 3.01106 3.66273H14.9971C15.2305 3.66273 15.434 3.70034 15.6072 3.78327L9.92692 9.38062C9.60291 9.7043 9.31652 9.84766 9.01534 9.84766C8.71384 9.84766 8.42841 9.70398 8.10441 9.3803ZM1.83559 13.1548V4.76234L6.16717 9.01162L1.84331 13.2824C1.83592 13.2448 1.83559 13.1998 1.83559 13.1548ZM16.1646 4.84494V13.2599L11.8629 9.0113L16.1649 4.78516L16.1646 4.84494ZM3.01106 14.3377C2.79249 14.3377 2.61184 14.3075 2.4537 14.2397L6.95852 9.78723L7.44838 10.2694C7.97552 10.7891 8.48017 11.0077 9.01534 11.0077C9.54249 11.0077 10.0548 10.7891 10.5823 10.2694L11.0718 9.78723L15.5696 14.2319C15.4111 14.3075 15.2154 14.3374 14.9968 14.3374L3.01106 14.3377Z" fill="#6F6F6F"/>
+</svg>

frontend/src/assets/openNewChat.svg

@@ -0,0 +1,4 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.66663" y="1" width="18" height="18" rx="9" stroke="#747474" stroke-width="2"/>
+<path d="M9.89252 14.1268C9.89252 14.3321 9.97405 14.5289 10.1192 14.674C10.2643 14.8191 10.4611 14.9006 10.6663 14.9006C10.8716 14.9006 11.0684 14.8191 11.2135 14.674C11.3586 14.5289 11.4401 14.3321 11.4401 14.1268L11.4401 10.7737L14.7933 10.7737C14.9985 10.7737 15.1953 10.6922 15.3404 10.547C15.4856 10.4019 15.5671 10.2051 15.5671 9.99989C15.5671 9.79466 15.4856 9.59784 15.3404 9.45272C15.1953 9.30761 14.9985 9.22608 14.7933 9.22608L11.4401 9.22608L11.4401 5.87293C11.4401 5.6677 11.3586 5.47088 11.2135 5.32576C11.0684 5.18065 10.8716 5.09912 10.6663 5.09912C10.4611 5.09912 10.2643 5.18065 10.1192 5.32576C9.97405 5.47088 9.89252 5.6677 9.89252 5.87293L9.89252 9.22608L6.53937 9.22608C6.33414 9.22608 6.13732 9.30761 5.99221 9.45272C5.84709 9.59784 5.76556 9.79466 5.76556 9.99989C5.76556 10.2051 5.84709 10.4019 5.99221 10.547C6.13732 10.6922 6.33414 10.7737 6.53937 10.7737L9.89252 10.7737L9.89252 14.1268Z" fill="#747474"/>
+</svg>

frontend/src/components/Help.tsx

@@ -0,0 +1,80 @@
+import { useState, useRef, useEffect } from 'react';
+import Info from '../assets/info.svg';
+import PageIcon from '../assets/documentation.svg';
+import EmailIcon from '../assets/envelope.svg';
+import { useTranslation } from 'react-i18next';
+const Help = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const { t } = useTranslation();
+
+  const toggleDropdown = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node) &&
+      buttonRef.current &&
+      !buttonRef.current.contains(event.target as Node)
+    ) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="relative inline-block text-sm" ref={dropdownRef}>
+      <button
+        ref={buttonRef}
+        onClick={toggleDropdown}
+        className="my-auto mx-4 w-full flex items-center h-9 gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E]"
+      >
+        <img src={Info} alt="info" className="ml-2 w-5 filter dark:invert" />
+        {t('help')}
+      </button>
+      {isOpen && (
+        <div
+          className={`absolute translate-x-4 -translate-y-28 z-10 w-48 shadow-lg bg-white dark:bg-[#444654] rounded-xl`}
+        >
+          <a
+            href="https://docs.docsgpt.cloud/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-start gap-4 px-4 py-2 text-black dark:text-white hover:bg-bright-gray dark:hover:bg-[#545561] rounded-t-xl"
+          >
+            <img
+              src={PageIcon}
+              alt="Documentation"
+              className="filter dark:invert"
+              width={20}
+            />
+            {t('documentation')}
+          </a>
+          <a
+            href="mailto:support@docsgpt.cloud"
+            className="flex items-start gap-4 px-4 py-2 text-black dark:text-white hover:bg-bright-gray dark:hover:bg-[#545561] rounded-b-xl"
+          >
+            <img
+              src={EmailIcon}
+              alt="Email Us"
+              className="filter dark:invert p-0.5"
+              width={20}
+            />
+            {t('emailUs')}
+          </a>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Help;

frontend/src/components/SettingsBar.tsx

@@ -71,9 +71,9 @@ const SettingsBar = ({ setActiveTab, activeTab }: SettingsBarProps) => {
           <button
             key={index}
             onClick={() => setActiveTab(tab)}
-            className={`snap-start h-9 rounded-3xl px-4 font-bold ${
+            className={`snap-start h-9 rounded-3xl px-4 font-bold hover:text-neutral-600 dark:hover:text-white/60 ${
               activeTab === tab
-                ? 'bg-purple-3000 text-purple-30 dark:bg-dark-charcoal'
+                ? 'bg-neutral-100 text-neutral-600  dark:bg-dark-charcoal dark:text-white/60'
                 : 'text-gray-6000'
             }`}
           >

frontend/src/components/ShareButton.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import ShareIcon from '../assets/share.svg';
+import { ShareConversationModal } from '../modals/ShareConversationModal';
+
+type ShareButtonProps = {
+  conversationId: string;
+};
+
+export default function ShareButton({ conversationId }: ShareButtonProps) {
+  const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
+  return (
+    <>
+      <button
+        title="Share"
+        onClick={() => {
+          setShareModalState(true);
+        }}
+        className="absolute top-4 right-20 z-20 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
+      >
+        <img
+          className="m-2 h-5 w-5 filter dark:invert"
+          alt="share"
+          src={ShareIcon}
+        />
+      </button>
+      {isShareModalOpen && (
+        <ShareConversationModal
+          close={() => {
+            setShareModalState(false);
+          }}
+          conversationId={conversationId}
+        />
+      )}
+    </>
+  );
+}

frontend/src/components/SkeletonLoader.tsx

@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from 'react';
+
+interface SkeletonLoaderProps {
+  count?: number;
+  component?: 'default' | 'analysis' | 'chatbot' | 'logs';
+}
+
+const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
+  count = 1,
+  component = 'default',
+}) => {
+  const [skeletonCount, setSkeletonCount] = useState(count);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const windowWidth = window.innerWidth;
+
+      if (windowWidth > 1024) {
+        setSkeletonCount(1);
+      } else if (windowWidth > 768) {
+        setSkeletonCount(count);
+      } else {
+        setSkeletonCount(Math.min(count, 2));
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [count]);
+
+  return (
+    <div className="flex flex-col space-y-4">
+      {component === 'default' ? (
+        [...Array(skeletonCount)].map((_, idx) => (
+          <div
+            key={idx}
+            className={`p-6 ${skeletonCount === 1 ? 'w-full' : 'w-60'} dark:bg-raisin-black rounded-3xl animate-pulse`}
+          >
+            <div className="space-y-4">
+              <div>
+                <div className="h-4 bg-gray-600 rounded mb-2 w-3/4"></div>
+                <div className="h-4 bg-gray-600 rounded mb-2 w-5/6"></div>
+                <div className="h-4 bg-gray-600 rounded mb-2 w-1/2"></div>
+                <div className="h-4 bg-gray-600 rounded mb-2 w-3/4"></div>
+                <div className="h-4 bg-gray-600 rounded mb-2 w-full"></div>
+              </div>
+              <div className="border-t border-gray-600 my-4"></div>
+              <div>
+                <div className="h-4 bg-gray-600 rounded mb-2 w-2/3"></div>
+                <div className="h-4 bg-gray-600 rounded mb-2 w-1/4"></div>
+                <div className="h-4 bg-gray-600 rounded mb-2 w-full"></div>
+              </div>
+              <div className="border-t border-gray-600 my-4"></div>
+              <div>
+                <div className="h-4 bg-gray-600 rounded mb-2 w-5/6"></div>
+                <div className="h-4 bg-gray-600 rounded mb-2 w-1/3"></div>
+                <div className="h-4 bg-gray-600 rounded mb-2 w-2/3"></div>
+                <div className="h-4 bg-gray-600 rounded mb-2 w-full"></div>
+              </div>
+              <div className="border-t border-gray-600 my-4"></div>
+              <div className="h-4 bg-gray-600 rounded w-3/4 mb-2"></div>
+              <div className="h-4 bg-gray-600 rounded w-5/6 mb-2"></div>
+            </div>
+          </div>
+        ))
+      ) : component === 'analysis' ? (
+        [...Array(skeletonCount)].map((_, idx) => (
+          <div
+            key={idx}
+            className="p-6 w-full dark:bg-raisin-black rounded-3xl animate-pulse"
+          >
+            <div className="space-y-6">
+              <div className="space-y-2">
+                <div className="h-4 bg-gray-600 rounded w-1/3 mb-4"></div>
+                <div className="grid grid-cols-6 gap-2 items-end">
+                  <div className="h-32 bg-gray-600 rounded"></div>
+                  <div className="h-24 bg-gray-600 rounded"></div>
+                  <div className="h-40 bg-gray-600 rounded"></div>
+                  <div className="h-28 bg-gray-600 rounded"></div>
+                  <div className="h-36 bg-gray-600 rounded"></div>
+                  <div className="h-20 bg-gray-600 rounded"></div>
+                </div>
+              </div>
+              <div className="space-y-2">
+                <div className="h-4 bg-gray-600 rounded w-1/4 mb-4"></div>
+                <div className="h-32 bg-gray-600 rounded"></div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="h-4 bg-gray-600 rounded w-full"></div>
+                <div className="h-4 bg-gray-600 rounded w-full"></div>
+              </div>
+            </div>
+          </div>
+        ))
+      ) : component === 'chatbot' ? (
+        <div className="space-y-2 p-6 w-full dark:bg-raisin-black rounded-3xl animate-pulse">
+          <div className="grid grid-cols-4 gap-2 p-2">
+            <div className="h-4 bg-gray-600 rounded w-full"></div>
+            <div className="h-4 bg-gray-600 rounded w-full"></div>
+            <div className="h-4 bg-gray-600 rounded w-full"></div>
+            <div className="h-4 bg-gray-600 rounded w-full"></div>
+          </div>
+          <div className="border-t border-gray-600 my-2"></div>
+
+          {[...Array(skeletonCount * 6)].map((_, idx) => (
+            <div key={idx} className="grid grid-cols-4 gap-2 p-2 space-x-2">
+              <div className="h-4 bg-gray-500 rounded w-full"></div>
+              <div className="h-4 bg-gray-500 rounded w-full"></div>
+              <div className="h-4 bg-gray-500 rounded w-full"></div>
+              <div className="h-4 bg-gray-500 rounded w-full"></div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        [...Array(skeletonCount)].map((_, idx) => (
+          <div
+            key={idx}
+            className="p-6 w-full dark:bg-raisin-black rounded-3xl animate-pulse"
+          >
+            <div className="space-y-4">
+              <div className="h-4 bg-gray-600 rounded w-1/2"></div>
+              <div className="h-4 bg-gray-600 rounded w-5/6"></div>
+              <div className="h-4 bg-gray-600 rounded w-3/4"></div>
+              <div className="h-4 bg-gray-600 rounded w-2/3"></div>
+              <div className="h-4 bg-gray-600 rounded w-1/4"></div>
+            </div>
+          </div>
+        ))
+      )}
+    </div>
+  );
+};
+
+export default SkeletonLoader;

frontend/src/components/SourceDropdown.tsx

@@ -121,9 +121,12 @@ function SourceDropdown({
             className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:text-bright-gray dark:hover:bg-purple-taupe"
             onClick={handleEmptyDocumentSelect}
           >
-            <span className="ml-4 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3" onClick = {() => {
-              handlePostDocumentSelect(null);
-            }}>
+            <span
+              className="ml-4 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3"
+              onClick={() => {
+                handlePostDocumentSelect(null);
+              }}
+            >
               {t('none')}
             </span>
           </div>

frontend/src/conversation/Conversation.tsx

@@ -1,22 +1,24 @@
 import { Fragment, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-
+import newChatIcon from '../assets/openNewChat.svg';
 import ArrowDown from '../assets/arrow-down.svg';
 import Send from '../assets/send.svg';
 import SendDark from '../assets/send_dark.svg';
-import ShareIcon from '../assets/share.svg';
 import SpinnerDark from '../assets/spinner-dark.svg';
 import Spinner from '../assets/spinner.svg';
 import RetryIcon from '../components/RetryIcon';
+import { useNavigate } from 'react-router-dom';
 import Hero from '../Hero';
 import { useDarkTheme, useMediaQuery } from '../hooks';
 import { ShareConversationModal } from '../modals/ShareConversationModal';
+import { setConversation, updateConversationId } from './conversationSlice';
 import { selectConversationId } from '../preferences/preferenceSlice';
 import { AppDispatch } from '../store';
 import ConversationBubble from './ConversationBubble';
 import { handleSendFeedback } from './conversationHandlers';
 import { FEEDBACK, Query } from './conversationModels';
+import ShareIcon from '../assets/share.svg';
 import {
   addQuery,
   fetchAnswer,
@@ -27,6 +29,7 @@ import {
 
 export default function Conversation() {
   const queries = useSelector(selectQueries);
+  const navigate = useNavigate();
   const status = useSelector(selectStatus);
   const conversationId = useSelector(selectConversationId);
   const dispatch = useDispatch<AppDispatch>();
@@ -46,6 +49,9 @@ export default function Conversation() {
   };
   useEffect(() => {
     !eventInterrupt && scrollIntoView();
+    if (queries.length == 0) {
+      resetConversation();
+    }
   }, [queries.length, queries[queries.length - 1]]);
 
   useEffect(() => {
@@ -120,6 +126,17 @@ export default function Conversation() {
       handleInput();
     }
   };
+  const resetConversation = () => {
+    dispatch(setConversation([]));
+    dispatch(
+      updateConversationId({
+        query: { conversationId: null },
+      }),
+    );
+  };
+  const newChat = () => {
+    if (queries && queries.length > 0) resetConversation();
+  };
 
   const prepResponseView = (query: Query, index: number) => {
     let responseView;
@@ -197,23 +214,41 @@ export default function Conversation() {
     };
   }, []);
   return (
-    <div className="flex flex-col gap-1 h-full justify-end">
-      {conversationId && (
-        <>
+    <div className="flex flex-col gap-1 h-full justify-end ">
+      {conversationId && queries.length > 0 && (
+        <div className="absolute top-4 right-20 z-20 ">
           {' '}
-          <button
-            title="Share"
-            onClick={() => {
-              setShareModalState(true);
-            }}
-            className="absolute top-4 right-20 z-20 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
-          >
-            <img
-              className="m-2 h-5 w-5 filter dark:invert"
-              alt="share"
-              src={ShareIcon}
-            />
-          </button>
+          <div className="flex items-center gap-4 ">
+            {isMobile && queries.length > 0 && (
+              <button
+                title="Open New Chat"
+                onClick={() => {
+                  newChat();
+                }}
+                className="hover:bg-bright-gray dark:hover:bg-[#28292E]"
+              >
+                <img
+                  className=" h-5 w-5 filter dark:invert "
+                  alt="NewChat"
+                  src={newChatIcon}
+                />
+              </button>
+            )}
+
+            <button
+              title="Share"
+              onClick={() => {
+                setShareModalState(true);
+              }}
+              className=" hover:bg-bright-gray dark:hover:bg-[#28292E]"
+            >
+              <img
+                className=" h-5 w-5 filter dark:invert"
+                alt="share"
+                src={ShareIcon}
+              />
+            </button>
+          </div>
           {isShareModalOpen && (
             <ShareConversationModal
               close={() => {
@@ -222,7 +257,7 @@ export default function Conversation() {
               conversationId={conversationId}
             />
           )}
-        </>
+        </div>
       )}
       <div
         ref={conversationRef}

frontend/src/conversation/ConversationTile.tsx

@@ -1,4 +1,10 @@
-import { SyntheticEvent, useEffect, useRef, useState } from 'react';
+import {
+  SyntheticEvent,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+} from 'react';
 import { useSelector } from 'react-redux';
 import Edit from '../assets/edit.svg';
 import Exit from '../assets/exit.svg';
@@ -75,6 +81,36 @@ export default function ConversationTile({
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
+
+  const preventScroll = useCallback((event: WheelEvent | TouchEvent) => {
+    event.preventDefault();
+  }, []);
+
+  useEffect(() => {
+    const conversationsMainDiv = document.getElementById(
+      'conversationsMainDiv',
+    );
+
+    if (conversationsMainDiv) {
+      if (isOpen) {
+        conversationsMainDiv.addEventListener('wheel', preventScroll, {
+          passive: false,
+        });
+        conversationsMainDiv.addEventListener('touchmove', preventScroll, {
+          passive: false,
+        });
+      } else {
+        conversationsMainDiv.removeEventListener('wheel', preventScroll);
+        conversationsMainDiv.removeEventListener('touchmove', preventScroll);
+      }
+
+      return () => {
+        conversationsMainDiv.removeEventListener('wheel', preventScroll);
+        conversationsMainDiv.removeEventListener('touchmove', preventScroll);
+      };
+    }
+  }, [isOpen]);
+
   function onClear() {
     setConversationsName(conversation.name);
     setIsEdit(false);
@@ -147,7 +183,7 @@ export default function ConversationTile({
               <button
                 onClick={(event: SyntheticEvent) => {
                   event.stopPropagation();
-                  setOpen(true);
+                  setOpen(!isOpen);
                 }}
                 className="mr-2 flex w-4 justify-center"
               >

frontend/src/conversation/conversationHandlers.ts

@@ -38,9 +38,11 @@ export function handleFetchAnswer(
     prompt_id: promptId,
     chunks: chunks,
     token_limit: token_limit,
+    isNoneDoc: selectedDocs === null,
   };
-  if (selectedDocs && 'id' in selectedDocs)
+  if (selectedDocs && 'id' in selectedDocs) {
     payload.active_docs = selectedDocs.id as string;
+  }
   payload.retriever = selectedDocs?.retriever as string;
   return conversationService
     .answer(payload, signal)
@@ -84,26 +86,16 @@ export function handleFetchAnswerSteaming(
     prompt_id: promptId,
     chunks: chunks,
     token_limit: token_limit,
+    isNoneDoc: selectedDocs === null,
   };
-  if (selectedDocs && 'id' in selectedDocs)
+  if (selectedDocs && 'id' in selectedDocs) {
     payload.active_docs = selectedDocs.id as string;
+  }
   payload.retriever = selectedDocs?.retriever as string;
 
   return new Promise<Answer>((resolve, reject) => {
     conversationService
-      .answerStream(
-        {
-          question: question,
-          active_docs: selectedDocs?.id as string,
-          history: JSON.stringify(history),
-          conversation_id: conversationId,
-          prompt_id: promptId,
-          chunks: chunks,
-          token_limit: token_limit,
-          isNoneDoc: selectedDocs === null,
-        },
-        signal,
-      )
+      .answerStream(payload, signal)
       .then((response) => {
         if (!response.body) throw Error('No response body');
 
@@ -169,20 +161,13 @@ export function handleSearch(
     conversation_id: conversation_id,
     chunks: chunks,
     token_limit: token_limit,
+    isNoneDoc: selectedDocs === null,
   };
   if (selectedDocs && 'id' in selectedDocs)
     payload.active_docs = selectedDocs.id as string;
   payload.retriever = selectedDocs?.retriever as string;
   return conversationService
-    .search({
-      question: question,
-      active_docs: selectedDocs?.id as string,
-      conversation_id,
-      history,
-      chunks: chunks,
-      token_limit: token_limit,
-      isNoneDoc: selectedDocs === null,
-    })
+    .search(payload)
     .then((response) => response.json())
     .then((data) => {
       return data;

frontend/src/conversation/conversationModels.ts

@@ -40,4 +40,5 @@ export interface RetrievalPayload {
   prompt_id?: string | null;
   chunks: string;
   token_limit: number;
+  isNoneDoc: boolean;
 }

frontend/src/locale/en.json

@@ -10,6 +10,9 @@
   "sourceDocs": "Source",
   "none": "None",
   "cancel": "Cancel",
+  "help": "Help",
+  "emailUs": "Email us",
+  "documentation": "documentation",
   "demo": [
     {
       "header": "Learn about DocsGPT",

frontend/src/locale/es.json

@@ -10,6 +10,9 @@
   "sourceDocs": "Fuente",
   "none": "Nada",
   "cancel": "Cancelar",
+  "help": "Asistencia",
+  "emailUs": "Envíanos un correo",
+  "documentation": "documentación",
   "demo": [
     {
       "header": "Aprende sobre DocsGPT",

frontend/src/locale/i18n.ts

@@ -25,7 +25,7 @@ i18n
       zh: {
         translation: zh,
       },
-      "zh-TW": {
+      'zh-TW': {
         translation: zhTW,
       },
     },

frontend/src/locale/jp.json

@@ -10,6 +10,9 @@
   "sourceDocs": "ソース",
   "none": "なし",
   "cancel": "キャンセル",
+  "help": "ヘルプ",
+  "emailUs": "メールを送る",
+  "documentation": "ドキュメント",
   "demo": [
     {
       "header": "DocsGPTについて学ぶ",

frontend/src/locale/zh-TW.json

@@ -10,6 +10,9 @@
   "sourceDocs": "原始文件",
   "none": "無",
   "cancel": "取消",
+  "help": "聯繫支援",
+  "emailUs": "寄送電子郵件給我們",
+  "documentation": "文件",
   "demo": [
     {
       "header": "了解 DocsGPT",

frontend/src/locale/zh.json

@@ -10,6 +10,9 @@
   "sourceDocs": "源",
   "none": "无",
   "cancel": "取消",
+  "help": "联系支持",
+  "emailUs": "给我们发邮件",
+  "documentation": "文档",
   "demo": [
     {
       "header": "了解 DocsGPT",

frontend/src/settings/APIKeys.tsx

@@ -6,18 +6,22 @@ import Trash from '../assets/trash.svg';
 import CreateAPIKeyModal from '../modals/CreateAPIKeyModal';
 import SaveAPIKeyModal from '../modals/SaveAPIKeyModal';
 import { APIKeyData } from './types';
+import SkeletonLoader from '../components/SkeletonLoader';
 import Input from '../components/Input';
 
 export default function APIKeys() {
   const { t } = useTranslation();
-  const [isCreateModalOpen, setCreateModal] = useState(false);
-  const [isSaveKeyModalOpen, setSaveKeyModal] = useState(false);
-  const [newKey, setNewKey] = useState('');
-  const [apiKeys, setApiKeys] = useState<APIKeyData[]>([]);
+  const [isCreateModalOpen, setCreateModal] = React.useState(false);
+  const [isSaveKeyModalOpen, setSaveKeyModal] = React.useState(false);
+  const [newKey, setNewKey] = React.useState('');
+  const [apiKeys, setApiKeys] = React.useState<APIKeyData[]>([]);
+  const [loading, setLoading] = useState(true);
   const [searchTerm, setSearchTerm] = useState(''); // Added state for search term
   const [filteredKeys, setFilteredKeys] = useState<APIKeyData[]>([]); // State for filtered API keys
 
+
   const handleFetchKeys = async () => {
+    setLoading(true);
     try {
       const response = await userService.getAPIKeys();
       if (!response.ok) {
@@ -28,6 +32,8 @@ export default function APIKeys() {
       setFilteredKeys(apiKeys); // Initialize the filtered keys as the fetched ones
     } catch (error) {
       console.log(error);
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -41,7 +47,8 @@ export default function APIKeys() {
         return response.json();
       })
       .then((data) => {
-        if (data.status === 'ok') {
+
+        data.success === true &&
           setApiKeys((previous) => previous.filter((elem) => elem.id !== id));
           setFilteredKeys((previous) =>
             previous.filter((elem) => elem.id !== id),
@@ -133,6 +140,9 @@ export default function APIKeys() {
         )}
         <div className="mt-[27px] w-full">
           <div className="w-full overflow-x-auto">
+         {loading ? (
+              <SkeletonLoader count={1} component={'chatbot'} />
+            ) : (
             <table className="table-default">
               <thead>
                 <tr>
@@ -166,9 +176,34 @@ export default function APIKeys() {
                       />
                     </td>
                   </tr>
-                ))}
-              </tbody>
-            </table>
+                </thead>
+                <tbody>
+                  {!apiKeys?.length && (
+                    <tr>
+                      <td colSpan={4} className="!p-4">
+                        {t('settings.apiKeys.noData')}
+                      </td>
+                    </tr>
+                  )}
+                  {apiKeys?.map((element, index) => (
+                    <tr key={index}>
+                      <td>{element.name}</td>
+                      <td>{element.source}</td>
+                      <td>{element.key}</td>
+                      <td>
+                        <img
+                          src={Trash}
+                          alt="Delete"
+                          className="h-4 w-4 cursor-pointer hover:opacity-50"
+                          id={`img-${index}`}
+                          onClick={() => handleDeleteKey(element.id)}
+                        />
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
           </div>
         </div>
       </div>

frontend/src/settings/Analytics.tsx

@@ -1,3 +1,4 @@
+import React, { useState, useEffect } from 'react';
 import {
   BarElement,
   CategoryScale,
@@ -7,7 +8,6 @@ import {
   Title,
   Tooltip,
 } from 'chart.js';
-import React from 'react';
 import { Bar } from 'react-chartjs-2';
 
 import userService from '../api/services/userService';
@@ -17,6 +17,8 @@ import { formatDate } from '../utils/dateTimeUtils';
 import { APIKeyData } from './types';
 
 import type { ChartData } from 'chart.js';
+import SkeletonLoader from '../components/SkeletonLoader';
+
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -35,37 +37,37 @@ const filterOptions = [
 ];
 
 export default function Analytics() {
-  const [messagesData, setMessagesData] = React.useState<Record<
+  const [messagesData, setMessagesData] = useState<Record<
     string,
     number
   > | null>(null);
-  const [tokenUsageData, setTokenUsageData] = React.useState<Record<
+  const [tokenUsageData, setTokenUsageData] = useState<Record<
     string,
     number
   > | null>(null);
-  const [feedbackData, setFeedbackData] = React.useState<Record<
+  const [feedbackData, setFeedbackData] = useState<Record<
     string,
-    {
-      positive: number;
-      negative: number;
-    }
+    { positive: number; negative: number }
   > | null>(null);
-  const [chatbots, setChatbots] = React.useState<APIKeyData[]>([]);
-  const [selectedChatbot, setSelectedChatbot] =
-    React.useState<APIKeyData | null>();
-  const [messagesFilter, setMessagesFilter] = React.useState<{
+  const [chatbots, setChatbots] = useState<APIKeyData[]>([]);
+  const [selectedChatbot, setSelectedChatbot] = useState<APIKeyData | null>();
+  const [messagesFilter, setMessagesFilter] = useState<{
     label: string;
     value: string;
   }>({ label: '30 Days', value: 'last_30_days' });
-  const [tokenUsageFilter, setTokenUsageFilter] = React.useState<{
+  const [tokenUsageFilter, setTokenUsageFilter] = useState<{
     label: string;
     value: string;
   }>({ label: '30 Days', value: 'last_30_days' });
-  const [feedbackFilter, setFeedbackFilter] = React.useState<{
+  const [feedbackFilter, setFeedbackFilter] = useState<{
     label: string;
     value: string;
   }>({ label: '30 Days', value: 'last_30_days' });
 
+  const [loadingMessages, setLoadingMessages] = useState(true);
+  const [loadingTokens, setLoadingTokens] = useState(true);
+  const [loadingFeedback, setLoadingFeedback] = useState(true);
+
   const fetchChatbots = async () => {
     try {
       const response = await userService.getAPIKeys();
@@ -80,6 +82,7 @@ export default function Analytics() {
   };
 
   const fetchMessagesData = async (chatbot_id?: string, filter?: string) => {
+    setLoadingMessages(true);
     try {
       const response = await userService.getMessageAnalytics({
         api_key_id: chatbot_id,
@@ -92,10 +95,13 @@ export default function Analytics() {
       setMessagesData(data.messages);
     } catch (error) {
       console.error(error);
+    } finally {
+      setLoadingMessages(false);
     }
   };
 
   const fetchTokenData = async (chatbot_id?: string, filter?: string) => {
+    setLoadingTokens(true);
     try {
       const response = await userService.getTokenAnalytics({
         api_key_id: chatbot_id,
@@ -108,10 +114,13 @@ export default function Analytics() {
       setTokenUsageData(data.token_usage);
     } catch (error) {
       console.error(error);
+    } finally {
+      setLoadingTokens(false);
     }
   };
 
   const fetchFeedbackData = async (chatbot_id?: string, filter?: string) => {
+    setLoadingFeedback(true);
     try {
       const response = await userService.getFeedbackAnalytics({
         api_key_id: chatbot_id,
@@ -124,30 +133,33 @@ export default function Analytics() {
       setFeedbackData(data.feedback);
     } catch (error) {
       console.error(error);
+    } finally {
+      setLoadingFeedback(false);
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     fetchChatbots();
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const id = selectedChatbot?.id;
     const filter = messagesFilter;
     fetchMessagesData(id, filter?.value);
   }, [selectedChatbot, messagesFilter]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const id = selectedChatbot?.id;
     const filter = tokenUsageFilter;
     fetchTokenData(id, filter?.value);
   }, [selectedChatbot, tokenUsageFilter]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const id = selectedChatbot?.id;
     const filter = feedbackFilter;
     fetchFeedbackData(id, filter?.value);
   }, [selectedChatbot, feedbackFilter]);
+
   return (
     <div className="mt-12">
       <div className="flex flex-col items-start">
@@ -181,8 +193,10 @@ export default function Analytics() {
             border="border"
           />
         </div>
+
+        {/* Messages Analytics */}
         <div className="mt-8 w-full flex flex-col [@media(min-width:1080px)]:flex-row gap-3">
-          <div className="h-[345px] [@media(min-width:1080px)]:w-1/2 w-full px-6 py-5 border rounded-2xl border-silver dark:border-silver/40">
+          <div className="h-[345px] [@media(min-width:1080px)]:w-1/2 w-full px-6 py-5 border rounded-2xl border-silver dark:border-silver/40 overflow-hidden">
             <div className="flex flex-row items-center justify-start gap-3">
               <p className="font-bold text-jet dark:text-bright-gray">
                 Messages
@@ -208,26 +222,32 @@ export default function Analytics() {
                 id="legend-container-1"
                 className="flex flex-row items-center justify-end"
               ></div>
-              <AnalyticsChart
-                data={{
-                  labels: Object.keys(messagesData || {}).map((item) =>
-                    formatDate(item),
-                  ),
-                  datasets: [
-                    {
-                      label: 'Messages',
-                      data: Object.values(messagesData || {}),
-                      backgroundColor: '#7D54D1',
-                    },
-                  ],
-                }}
-                legendID="legend-container-1"
-                maxTicksLimitInX={8}
-                isStacked={false}
-              />
+              {loadingMessages ? (
+                <SkeletonLoader count={1} component={'analysis'} />
+              ) : (
+                <AnalyticsChart
+                  data={{
+                    labels: Object.keys(messagesData || {}).map((item) =>
+                      formatDate(item),
+                    ),
+                    datasets: [
+                      {
+                        label: 'Messages',
+                        data: Object.values(messagesData || {}),
+                        backgroundColor: '#7D54D1',
+                      },
+                    ],
+                  }}
+                  legendID="legend-container-1"
+                  maxTicksLimitInX={8}
+                  isStacked={false}
+                />
+              )}
             </div>
           </div>
-          <div className="h-[345px] [@media(min-width:1080px)]:w-1/2 w-full px-6 py-5 border rounded-2xl border-silver dark:border-silver/40">
+
+          {/* Token Usage Analytics */}
+          <div className="h-[345px] [@media(min-width:1080px)]:w-1/2 w-full px-6 py-5 border rounded-2xl border-silver dark:border-silver/40 overflow-hidden">
             <div className="flex flex-row items-center justify-start gap-3">
               <p className="font-bold text-jet dark:text-bright-gray">
                 Token Usage
@@ -253,31 +273,37 @@ export default function Analytics() {
                 id="legend-container-2"
                 className="flex flex-row items-center justify-end"
               ></div>
-              <AnalyticsChart
-                data={{
-                  labels: Object.keys(tokenUsageData || {}).map((item) =>
-                    formatDate(item),
-                  ),
-                  datasets: [
-                    {
-                      label: 'Tokens',
-                      data: Object.values(tokenUsageData || {}),
-                      backgroundColor: '#7D54D1',
-                    },
-                  ],
-                }}
-                legendID="legend-container-2"
-                maxTicksLimitInX={8}
-                isStacked={false}
-              />
+              {loadingTokens ? (
+                <SkeletonLoader count={1} component={'analysis'} />
+              ) : (
+                <AnalyticsChart
+                  data={{
+                    labels: Object.keys(tokenUsageData || {}).map((item) =>
+                      formatDate(item),
+                    ),
+                    datasets: [
+                      {
+                        label: 'Tokens',
+                        data: Object.values(tokenUsageData || {}),
+                        backgroundColor: '#7D54D1',
+                      },
+                    ],
+                  }}
+                  legendID="legend-container-2"
+                  maxTicksLimitInX={8}
+                  isStacked={false}
+                />
+              )}
             </div>
           </div>
         </div>
-        <div className="mt-8 w-full">
-          <div className="h-[345px] w-full px-6 py-5 border rounded-2xl border-silver dark:border-silver/40">
+
+        {/* Feedback Analytics */}
+        <div className="mt-8 w-full flex flex-col gap-3">
+          <div className="h-[345px] w-full px-6 py-5 border rounded-2xl border-silver dark:border-silver/40 overflow-hidden">
             <div className="flex flex-row items-center justify-start gap-3">
               <p className="font-bold text-jet dark:text-bright-gray">
-                User Feedback
+                Feedback
               </p>
               <Dropdown
                 size="w-[125px]"
@@ -300,32 +326,36 @@ export default function Analytics() {
                 id="legend-container-3"
                 className="flex flex-row items-center justify-end"
               ></div>
-              <AnalyticsChart
-                data={{
-                  labels: Object.keys(feedbackData || {}).map((item) =>
-                    formatDate(item),
-                  ),
-                  datasets: [
-                    {
-                      label: 'Positive',
-                      data: Object.values(feedbackData || {}).map(
-                        (item) => item.positive,
-                      ),
-                      backgroundColor: '#8BD154',
-                    },
-                    {
-                      label: 'Negative',
-                      data: Object.values(feedbackData || {}).map(
-                        (item) => item.negative,
-                      ),
-                      backgroundColor: '#D15454',
-                    },
-                  ],
-                }}
-                legendID="legend-container-3"
-                maxTicksLimitInX={10}
-                isStacked={true}
-              />
+              {loadingFeedback ? (
+                <SkeletonLoader count={1} component={'analysis'} />
+              ) : (
+                <AnalyticsChart
+                  data={{
+                    labels: Object.keys(feedbackData || {}).map((item) =>
+                      formatDate(item),
+                    ),
+                    datasets: [
+                      {
+                        label: 'Positive Feedback',
+                        data: Object.values(feedbackData || {}).map(
+                          (item) => item.positive,
+                        ),
+                        backgroundColor: '#7D54D1',
+                      },
+                      {
+                        label: 'Negative Feedback',
+                        data: Object.values(feedbackData || {}).map(
+                          (item) => item.negative,
+                        ),
+                        backgroundColor: '#FF6384',
+                      },
+                    ],
+                  }}
+                  legendID="legend-container-3"
+                  maxTicksLimitInX={8}
+                  isStacked={false}
+                />
+              )}
             </div>
           </div>
         </div>

frontend/src/settings/Documents.tsx

@@ -9,6 +9,7 @@ import Trash from '../assets/trash.svg';
 import caretSort from '../assets/caret-sort.svg';
 import DropdownMenu from '../components/DropdownMenu';
 import { Doc, DocumentsProps, ActiveState } from '../models/misc'; // Ensure ActiveState type is imported
+import SkeletonLoader from '../components/SkeletonLoader';
 import { getDocs } from '../preferences/preferenceApi';
 import { setSourceDocs } from '../preferences/preferenceSlice';
 import Input from '../components/Input';
@@ -43,6 +44,7 @@ const Documents: React.FC<DocumentsProps> = ({
   // State for modal: active/inactive
   const [modalState, setModalState] = useState<ActiveState>('INACTIVE'); // Initialize with inactive state
   const [isOnboarding, setIsOnboarding] = useState(false); // State for onboarding flag
+  const [loading, setLoading] = useState(false);
 
   const syncOptions = [
     { label: 'Never', value: 'never' },
@@ -52,6 +54,7 @@ const Documents: React.FC<DocumentsProps> = ({
   ];
 
   const handleManageSync = (doc: Doc, sync_frequency: string) => {
+    setLoading(true);
     userService
       .manageSync({ source_id: doc.id, sync_frequency })
       .then(() => {
@@ -60,7 +63,10 @@ const Documents: React.FC<DocumentsProps> = ({
       .then((data) => {
         dispatch(setSourceDocs(data));
       })
-      .catch((error) => console.error(error));
+      .catch((error) => console.error(error))
+      .finally(() => {
+        setLoading(false);
+      });
   };
 
   // Filter documents based on the search term
@@ -72,7 +78,7 @@ const Documents: React.FC<DocumentsProps> = ({
     <div className="mt-8">
       <div className="flex flex-col relative">
         <div className="z-10 w-full overflow-x-auto">
-          <div className="my-3 flex justify-between items-center ">
+          <div className="my-3 flex justify-between items-center">
             <div className="p-1">
               <Input
                 maxLength={256}
@@ -94,83 +100,87 @@ const Documents: React.FC<DocumentsProps> = ({
               Add New
             </button>
           </div>
-          <table className="table-default">
-            <thead>
-              <tr>
-                <th>{t('settings.documents.name')}</th>
-                <th>
-                  <div className="flex justify-center items-center">
-                    {t('settings.documents.date')}{' '}
-                    <img src={caretSort} alt="" />{' '}
-                  </div>
-                </th>
-                <th>
-                  <div className="flex justify-center items-center">
-                    {t('settings.documents.tokenUsage')}{' '}
-                    <img src={caretSort} alt="" />
-                  </div>
-                </th>
-                <th>
-                  <div className="flex justify-center items-center">
-                    {t('settings.documents.type')}{' '}
-                    <img src={caretSort} alt="" />
-                  </div>
-                </th>
-                <th></th>
-              </tr>
-            </thead>
-            <tbody>
-              {!filteredDocuments?.length && (
+          {loading ? (
+            <SkeletonLoader count={1} />
+          ) : (
+            <table className="table-default">
+              <thead>
                 <tr>
-                  <td colSpan={5} className="!p-4">
-                    {t('settings.documents.noData')}
-                  </td>
+                  <th>{t('settings.documents.name')}</th>
+                  <th>
+                    <div className="flex justify-center items-center">
+                      {t('settings.documents.date')}
+                      <img src={caretSort} alt="" />
+                    </div>
+                  </th>
+                  <th>
+                    <div className="flex justify-center items-center">
+                      {t('settings.documents.tokenUsage')}
+                      <img src={caretSort} alt="" />
+                    </div>
+                  </th>
+                  <th>
+                    <div className="flex justify-center items-center">
+                      {t('settings.documents.type')}
+                      <img src={caretSort} alt="" />
+                    </div>
+                  </th>
+                  <th></th>
                 </tr>
-              )}
-              {filteredDocuments &&
-                filteredDocuments.map((document, index) => (
-                  <tr key={index}>
-                    <td>{document.name}</td>
-                    <td>{document.date}</td>
-                    <td>
-                      {document.tokens ? formatTokens(+document.tokens) : ''}
-                    </td>
-                    <td>
-                      {document.type === 'remote' ? 'Pre-loaded' : 'Private'}
-                    </td>
-                    <td>
-                      <div className="flex flex-row items-center">
-                        {document.type !== 'remote' && (
-                          <img
-                            src={Trash}
-                            alt="Delete"
-                            className="h-4 w-4 cursor-pointer opacity-60 hover:opacity-100"
-                            id={`img-${index}`}
-                            onClick={(event) => {
-                              event.stopPropagation();
-                              handleDeleteDocument(index, document);
-                            }}
-                          />
-                        )}
-                        {document.syncFrequency && (
-                          <div className="ml-2">
-                            <DropdownMenu
-                              name="Sync"
-                              options={syncOptions}
-                              onSelect={(value: string) => {
-                                handleManageSync(document, value);
-                              }}
-                              defaultValue={document.syncFrequency}
-                              icon={SyncIcon}
-                            />
-                          </div>
-                        )}
-                      </div>
+              </thead>
+              <tbody>
+                {!filteredDocuments?.length && (
+                  <tr>
+                    <td colSpan={5} className="!p-4">
+                      {t('settings.documents.noData')}
                     </td>
                   </tr>
-                ))}
-            </tbody>
-          </table>
+                )}
+                {filteredDocuments &&
+                  filteredDocuments.map((document, index) => (
+                    <tr key={index}>
+                      <td>{document.name}</td>
+                      <td>{document.date}</td>
+                      <td>
+                        {document.tokens ? formatTokens(+document.tokens) : ''}
+                      </td>
+                      <td>
+                        {document.type === 'remote' ? 'Pre-loaded' : 'Private'}
+                      </td>
+                      <td>
+                        <div className="flex flex-row items-center">
+                          {document.type !== 'remote' && (
+                            <img
+                              src={Trash}
+                              alt="Delete"
+                              className="h-4 w-4 cursor-pointer opacity-60 hover:opacity-100"
+                              id={`img-${index}`}
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                handleDeleteDocument(index, document);
+                              }}
+                            />
+                          )}
+                          {document.syncFrequency && (
+                            <div className="ml-2">
+                              <DropdownMenu
+                                name="Sync"
+                                options={syncOptions}
+                                onSelect={(value: string) => {
+                                  handleManageSync(document, value);
+                                }}
+                                defaultValue={document.syncFrequency}
+                                icon={SyncIcon}
+                              />
+                            </div>
+                          )}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+              </tbody>
+            </table>
+          )}
         </div>
         {/* Conditionally render the Upload modal based on modalState */}
         {modalState === 'ACTIVE' && (

frontend/src/settings/Logs.tsx

@@ -1,20 +1,23 @@
-import React from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 
 import userService from '../api/services/userService';
 import ChevronRight from '../assets/chevron-right.svg';
 import Dropdown from '../components/Dropdown';
+import SkeletonLoader from '../components/SkeletonLoader';
 import { APIKeyData, LogData } from './types';
 import CoppyButton from '../components/CopyButton';
 
 export default function Logs() {
-  const [chatbots, setChatbots] = React.useState<APIKeyData[]>([]);
-  const [selectedChatbot, setSelectedChatbot] =
-    React.useState<APIKeyData | null>();
-  const [logs, setLogs] = React.useState<LogData[]>([]);
-  const [page, setPage] = React.useState(1);
-  const [hasMore, setHasMore] = React.useState(true);
+  const [chatbots, setChatbots] = useState<APIKeyData[]>([]);
+  const [selectedChatbot, setSelectedChatbot] = useState<APIKeyData | null>();
+  const [logs, setLogs] = useState<LogData[]>([]);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [loadingChatbots, setLoadingChatbots] = useState(true);
+  const [loadingLogs, setLoadingLogs] = useState(true);
 
   const fetchChatbots = async () => {
+    setLoadingChatbots(true);
     try {
       const response = await userService.getAPIKeys();
       if (!response.ok) {
@@ -24,10 +27,13 @@ export default function Logs() {
       setChatbots(chatbots);
     } catch (error) {
       console.error(error);
+    } finally {
+      setLoadingChatbots(false);
     }
   };
 
   const fetchLogs = async () => {
+    setLoadingLogs(true);
     try {
       const response = await userService.getLogs({
         page: page,
@@ -38,20 +44,23 @@ export default function Logs() {
         throw new Error('Failed to fetch logs');
       }
       const olderLogs = await response.json();
-      setLogs([...logs, ...olderLogs.logs]);
+      setLogs((prevLogs) => [...prevLogs, ...olderLogs.logs]);
       setHasMore(olderLogs.has_more);
     } catch (error) {
       console.error(error);
+    } finally {
+      setLoadingLogs(false);
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     fetchChatbots();
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (hasMore) fetchLogs();
   }, [page, selectedChatbot]);
+
   return (
     <div className="mt-12">
       <div className="flex flex-col items-start">
@@ -59,38 +68,47 @@ export default function Logs() {
           <p className="font-bold text-jet dark:text-bright-gray">
             Filter by chatbot
           </p>
-          <Dropdown
-            size="w-[55vw] sm:w-[360px]"
-            options={[
-              ...chatbots.map((chatbot) => ({
-                label: chatbot.name,
-                value: chatbot.id,
-              })),
-              { label: 'None', value: '' },
-            ]}
-            placeholder="Select chatbot"
-            onSelect={(chatbot: { label: string; value: string }) => {
-              setSelectedChatbot(
-                chatbots.find((item) => item.id === chatbot.value),
-              );
-              setLogs([]);
-              setPage(1);
-              setHasMore(true);
-            }}
-            selectedValue={
-              (selectedChatbot && {
-                label: selectedChatbot.name,
-                value: selectedChatbot.id,
-              }) ||
-              null
-            }
-            rounded="3xl"
-            border="border"
-          />
+          {loadingChatbots ? (
+            <SkeletonLoader />
+          ) : (
+            <Dropdown
+              size="w-[55vw] sm:w-[360px]"
+              options={[
+                ...chatbots.map((chatbot) => ({
+                  label: chatbot.name,
+                  value: chatbot.id,
+                })),
+                { label: 'None', value: '' },
+              ]}
+              placeholder="Select chatbot"
+              onSelect={(chatbot: { label: string; value: string }) => {
+                setSelectedChatbot(
+                  chatbots.find((item) => item.id === chatbot.value),
+                );
+                setLogs([]);
+                setPage(1);
+                setHasMore(true);
+              }}
+              selectedValue={
+                (selectedChatbot && {
+                  label: selectedChatbot.name,
+                  value: selectedChatbot.id,
+                }) ||
+                null
+              }
+              rounded="3xl"
+              border="border"
+            />
+          )}
         </div>
       </div>
+
       <div className="mt-8">
-        <LogsTable logs={logs} setPage={setPage} />
+        {loadingLogs ? (
+          <SkeletonLoader component={'logs'} />
+        ) : (
+          <LogsTable logs={logs} setPage={setPage} />
+        )}
       </div>
     </div>
   );
@@ -102,15 +120,16 @@ type LogsTableProps = {
 };
 
 function LogsTable({ logs, setPage }: LogsTableProps) {
-  const observerRef = React.useRef<any>();
-  const firstObserver = React.useCallback((node: HTMLDivElement) => {
+  const observerRef = useRef<any>();
+  const firstObserver = useCallback((node: HTMLDivElement) => {
     if (observerRef.current) {
-      observerRef.current = new IntersectionObserver((enteries) => {
-        if (enteries[0].isIntersecting) setPage((prev) => prev + 1);
+      observerRef.current = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting) setPage((prev) => prev + 1);
       });
     }
     if (node && observerRef.current) observerRef.current.observe(node);
   }, []);
+
   return (
     <div className="logs-table border rounded-2xl h-[55vh] w-full overflow-hidden border-silver dark:border-silver/40">
       <div className="h-8 bg-black/10 dark:bg-chinese-black flex flex-col items-start justify-center">