chore: add @ as alias for frontend root (#414)

* chore: add @ as alias for frontend root

* fix: remove bad tag

frontend/jsconfig.json

@@ -2,6 +2,11 @@
   "compilerOptions": {
     "module": "commonjs",
     "target": "esnext",
-    "jsx": "react"
+    "jsx": "react",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+    }
   }
 }

frontend/src/App.jsx

@@ -1,42 +1,40 @@
 import React, { lazy, Suspense } from "react";
 import { Routes, Route } from "react-router-dom";
-import { ContextWrapper } from "./AuthContext";
+import { ContextWrapper } from "@/AuthContext";
 import PrivateRoute, {
   AdminRoute,
   ManagerRoute,
-} from "./components/PrivateRoute";
+} from "@/components/PrivateRoute";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
-import Login from "./pages/Login";
+import Login from "@/pages/Login";
 
-const Main = lazy(() => import("./pages/Main"));
-const InvitePage = lazy(() => import("./pages/Invite"));
-const WorkspaceChat = lazy(() => import("./pages/WorkspaceChat"));
-const AdminUsers = lazy(() => import("./pages/Admin/Users"));
-const AdminInvites = lazy(() => import("./pages/Admin/Invitations"));
-const AdminWorkspaces = lazy(() => import("./pages/Admin/Workspaces"));
-const AdminSystem = lazy(() => import("./pages/Admin/System"));
-const GeneralChats = lazy(() => import("./pages/GeneralSettings/Chats"));
+const Main = lazy(() => import("@/pages/Main"));
+const InvitePage = lazy(() => import("@/pages/Invite"));
+const WorkspaceChat = lazy(() => import("@/pages/WorkspaceChat"));
+const AdminUsers = lazy(() => import("@/pages/Admin/Users"));
+const AdminInvites = lazy(() => import("@/pages/Admin/Invitations"));
+const AdminWorkspaces = lazy(() => import("@/pages/Admin/Workspaces"));
+const AdminSystem = lazy(() => import("@/pages/Admin/System"));
+const GeneralChats = lazy(() => import("@/pages/GeneralSettings/Chats"));
 const GeneralAppearance = lazy(() =>
-  import("./pages/GeneralSettings/Appearance")
+  import("@/pages/GeneralSettings/Appearance")
 );
-const GeneralApiKeys = lazy(() => import("./pages/GeneralSettings/ApiKeys"));
-
+const GeneralApiKeys = lazy(() => import("@/pages/GeneralSettings/ApiKeys"));
 const GeneralLLMPreference = lazy(() =>
-  import("./pages/GeneralSettings/LLMPreference")
+  import("@/pages/GeneralSettings/LLMPreference")
 );
 const GeneralEmbeddingPreference = lazy(() =>
-  import("./pages/GeneralSettings/EmbeddingPreference")
+  import("@/pages/GeneralSettings/EmbeddingPreference")
 );
 const GeneralVectorDatabase = lazy(() =>
-  import("./pages/GeneralSettings/VectorDatabase")
+  import("@/pages/GeneralSettings/VectorDatabase")
 );
 const GeneralExportImport = lazy(() =>
-  import("./pages/GeneralSettings/ExportImport")
+  import("@/pages/GeneralSettings/ExportImport")
 );
-const GeneralSecurity = lazy(() => import("./pages/GeneralSettings/Security"));
-
-const OnboardingFlow = lazy(() => import("./pages/OnboardingFlow"));
+const GeneralSecurity = lazy(() => import("@/pages/GeneralSettings/Security"));
+const OnboardingFlow = lazy(() => import("@/pages/OnboardingFlow"));
 
 export default function App() {
   return (

frontend/src/AuthContext.jsx

@@ -1,5 +1,5 @@
 import React, { useState, createContext } from "react";
-import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "./utils/constants";
+import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "@/utils/constants";
 
 export const AuthContext = createContext(null);
 export function ContextWrapper(props) {

frontend/src/components/ChatBubble/index.jsx

@@ -1,10 +1,7 @@
 import React from "react";
 import Jazzicon from "../UserIcon";
-import { userFromStorage } from "../../utils/request";
-import {
-  AI_BACKGROUND_COLOR,
-  USER_BACKGROUND_COLOR,
-} from "../../utils/constants";
+import { userFromStorage } from "@/utils/request";
+import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants";
 
 export default function ChatBubble({ message, type, popMsg }) {
   const isUser = type === "user";

frontend/src/components/DefaultChat/index.jsx

@@ -5,21 +5,17 @@ import {
   EnvelopeSimple,
   Plus,
 } from "@phosphor-icons/react";
-
 import NewWorkspaceModal, {
   useNewWorkspaceModal,
 } from "../Modals/NewWorkspace";
-import paths from "../../utils/paths";
+import paths from "@/utils/paths";
 import { isMobile } from "react-device-detect";
 import { SidebarMobileHeader } from "../Sidebar";
 import ChatBubble from "../ChatBubble";
-import System from "../../models/system";
+import System from "@/models/system";
 import Jazzicon from "../UserIcon";
-import { userFromStorage } from "../../utils/request";
-import {
-  AI_BACKGROUND_COLOR,
-  USER_BACKGROUND_COLOR,
-} from "../../utils/constants";
+import { userFromStorage } from "@/utils/request";
+import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants";
 
 export default function DefaultChatContainer() {
   const [mockMsgs, setMockMessages] = useState([]);

frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import System from "../../../models/system";
+import System from "@/models/system";
 
 export default function LocalAiOptions({ settings }) {
   const [basePathValue, setBasePathValue] = useState(

frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx

@@ -1,5 +1,5 @@
 import { Info } from "@phosphor-icons/react";
-import paths from "../../../utils/paths";
+import paths from "@/utils/paths";
 
 export default function AnthropicAiOptions({ settings, showAlert = false }) {
   return (

frontend/src/components/LLMSelection/LMStudioOptions/index.jsx

@@ -1,5 +1,5 @@
 import { Info } from "@phosphor-icons/react";
-import paths from "../../../utils/paths";
+import paths from "@/utils/paths";
 
 export default function LMStudioOptions({ settings, showAlert = false }) {
   return (

frontend/src/components/LLMSelection/LocalAiOptions/index.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Info } from "@phosphor-icons/react";
-import paths from "../../../utils/paths";
-import System from "../../../models/system";
+import paths from "@/utils/paths";
+import System from "@/models/system";
 
 export default function LocalAiOptions({ settings, showAlert = false }) {
   const [basePathValue, setBasePathValue] = useState(settings?.LocalAiBasePath);

frontend/src/components/LLMSelection/OpenAiOptions/index.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import System from "../../../models/system";
+import System from "@/models/system";
 
 export default function OpenAiOptions({ settings }) {
   const [inputValue, setInputValue] = useState(settings?.OpenAiKey);

frontend/src/components/Modals/NewWorkspace.jsx

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from "react";
 import { X } from "@phosphor-icons/react";
-import Workspace from "../../models/workspace";
-import paths from "../../utils/paths";
+import Workspace from "@/models/workspace";
+import paths from "@/utils/paths";
 
 const noop = () => false;
 export default function NewWorkspaceModal({ hideModal = noop }) {

frontend/src/components/PrivateRoute/index.jsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
 import { Navigate } from "react-router-dom";
 import { FullScreenLoader } from "../Preloader";
-import validateSessionTokenForUser from "../../utils/session";
-import paths from "../../utils/paths";
-import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "../../utils/constants";
-import { userFromStorage } from "../../utils/request";
-import System from "../../models/system";
+import validateSessionTokenForUser from "@/utils/session";
+import paths from "@/utils/paths";
+import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "@/utils/constants";
+import { userFromStorage } from "@/utils/request";
+import System from "@/models/system";
 import UserMenu from "../UserMenu";
 
 // Used only for Multi-user mode only as we permission specific pages based on auth role.

frontend/src/components/SettingsSidebar/index.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 // import IndexCount from "../Sidebar/IndexCount";
 // import LLMStatus from "../Sidebar/LLMStatus";
-import paths from "../../utils/paths";
-import useLogo from "../../hooks/useLogo";
+import paths from "@/utils/paths";
+import useLogo from "@/hooks/useLogo";
 import {
   DiscordLogo,
   EnvelopeSimple,
@@ -23,8 +23,8 @@ import {
   List,
   FileCode,
 } from "@phosphor-icons/react";
-import useUser from "../../hooks/useUser";
-import { USER_BACKGROUND_COLOR } from "../../utils/constants";
+import useUser from "@/hooks/useUser";
+import { USER_BACKGROUND_COLOR } from "@/utils/constants";
 
 export default function SettingsSidebar() {
   const { logo } = useLogo();

frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx

@@ -1,15 +1,15 @@
 import React, { useState, useEffect, useCallback } from "react";
 import * as Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
-import Workspace from "../../../models/workspace";
+import Workspace from "@/models/workspace";
 import ManageWorkspace, {
   useManageWorkspaceModal,
 } from "../../Modals/MangeWorkspace";
-import paths from "../../../utils/paths";
+import paths from "@/utils/paths";
 import { useParams } from "react-router-dom";
 import { GearSix, SquaresFour } from "@phosphor-icons/react";
 import truncate from "truncate";
-import useUser from "../../../hooks/useUser";
+import useUser from "@/hooks/useUser";
 
 export default function ActiveWorkspaces() {
   const { slug } = useParams();

frontend/src/components/Sidebar/IndexCount.jsx

@@ -1,7 +1,7 @@
 import pluralize from "pluralize";
 import React, { useEffect, useState } from "react";
-import System from "../../models/system";
-import { numberWithCommas } from "../../utils/numbers";
+import System from "@/models/system";
+import { numberWithCommas } from "@/utils/numbers";
 
 export default function IndexCount() {
   const [indexes, setIndexes] = useState(null);

frontend/src/components/Sidebar/LLMStatus.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { WarningCircle, Circle } from "@phosphor-icons/react";
-import System from "../../models/system";
+import System from "@/models/system";
 
 export default function LLMStatus() {
   const [status, setStatus] = useState(null);

frontend/src/components/Sidebar/index.jsx

@@ -12,10 +12,10 @@ import NewWorkspaceModal, {
   useNewWorkspaceModal,
 } from "../Modals/NewWorkspace";
 import ActiveWorkspaces from "./ActiveWorkspaces";
-import paths from "../../utils/paths";
-import { USER_BACKGROUND_COLOR } from "../../utils/constants";
-import useLogo from "../../hooks/useLogo";
-import useUser from "../../hooks/useUser";
+import paths from "@/utils/paths";
+import { USER_BACKGROUND_COLOR } from "@/utils/constants";
+import useLogo from "@/hooks/useLogo";
+import useUser from "@/hooks/useUser";
 
 export default function Sidebar() {
   const { user } = useUser();

frontend/src/components/UserMenu/index.jsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useRef } from "react";
 import { isMobile } from "react-device-detect";
-import paths from "../../utils/paths";
-import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "../../utils/constants";
+import paths from "@/utils/paths";
+import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "@/utils/constants";
 import { Person, SignOut } from "@phosphor-icons/react";
-import { userFromStorage } from "../../utils/request";
+import { userFromStorage } from "@/utils/request";
 
 export default function UserMenu({ children }) {
   if (isMobile) return <>{children}</>;

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx

@@ -1,13 +1,10 @@
 import { memo, forwardRef } from "react";
 import { Warning } from "@phosphor-icons/react";
 import Jazzicon from "../../../../UserIcon";
-import renderMarkdown from "../../../../../utils/chat/markdown";
-import { userFromStorage } from "../../../../../utils/request";
+import renderMarkdown from "@/utils/chat/markdown";
+import { userFromStorage } from "@/utils/request";
 import Citations from "../Citation";
-import {
-  AI_BACKGROUND_COLOR,
-  USER_BACKGROUND_COLOR,
-} from "../../../../../utils/constants";
+import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants";
 import { v4 } from "uuid";
 
 const HistoricalMessage = forwardRef(

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx

@@ -1,7 +1,7 @@
 import { forwardRef, memo } from "react";
 import { Warning } from "@phosphor-icons/react";
 import Jazzicon from "../../../../UserIcon";
-import renderMarkdown from "../../../../../utils/chat/markdown";
+import renderMarkdown from "@/utils/chat/markdown";
 import Citations from "../Citation";
 
 const PromptReply = forwardRef(

frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx

@@ -10,7 +10,7 @@ import { isMobile } from "react-device-detect";
 import ManageWorkspace, {
   useManageWorkspaceModal,
 } from "../../../Modals/MangeWorkspace";
-import useUser from "../../../../hooks/useUser";
+import useUser from "@/hooks/useUser";
 
 export default function PromptInput({
   workspace,

frontend/src/components/WorkspaceChat/ChatContainer/index.jsx

@@ -1,8 +1,8 @@
 import { useState, useEffect } from "react";
 import ChatHistory from "./ChatHistory";
 import PromptInput from "./PromptInput";
-import Workspace from "../../../models/workspace";
-import handleChat from "../../../utils/chat";
+import Workspace from "@/models/workspace";
+import handleChat from "@/utils/chat";
 import { isMobile } from "react-device-detect";
 import { SidebarMobileHeader } from "../../Sidebar";
 

frontend/src/components/WorkspaceChat/index.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
-import Workspace from "../../models/workspace";
+import Workspace from "@/models/workspace";
 import LoadingChat from "./LoadingChat";
 import ChatContainer from "./ChatContainer";
-import paths from "../../utils/paths";
+import paths from "@/utils/paths";
 
 export default function WorkspaceChat({ loading, workspace }) {
   const [history, setHistory] = useState([]);

frontend/src/hooks/useLogo.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import System from "../models/system";
-import AnythingLLM from "../media/logo/anything-llm.png";
+import System from "@/models/system";
+import AnythingLLM from "@/media/logo/anything-llm.png";
 
 export default function useLogo() {
   const [logo, setLogo] = useState("");

frontend/src/hooks/useUser.js

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { AuthContext } from "../AuthContext";
+import { AuthContext } from "@/AuthContext";
 
 // interface IStore {
 //   store: {

frontend/src/main.jsx

@@ -1,8 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter as Router } from "react-router-dom";
-import App from "./App.jsx";
-import "./index.css";
+import App from "@/App.jsx";
+import "@/index.css";
 const isDev = process.env.NODE_ENV !== "production";
 const REACTWRAP = isDev ? React.Fragment : React.StrictMode;
 

frontend/src/models/admin.js

@@ -1,5 +1,5 @@
-import { API_BASE } from "../utils/constants";
-import { baseHeaders } from "../utils/request";
+import { API_BASE } from "@/utils/constants";
+import { baseHeaders } from "@/utils/request";
 
 const Admin = {
   // User Management

frontend/src/models/invite.js

@@ -1,4 +1,4 @@
-import { API_BASE } from "../utils/constants";
+import { API_BASE } from "@/utils/constants";
 
 const Invite = {
   checkInvite: async (inviteCode) => {

frontend/src/models/system.js

@@ -1,5 +1,5 @@
-import { API_BASE, AUTH_TIMESTAMP } from "../utils/constants";
-import { baseHeaders } from "../utils/request";
+import { API_BASE, AUTH_TIMESTAMP } from "@/utils/constants";
+import { baseHeaders } from "@/utils/request";
 
 const System = {
   ping: async function () {

frontend/src/models/workspace.js

@@ -1,5 +1,5 @@
-import { API_BASE } from "../utils/constants";
-import { baseHeaders } from "../utils/request";
+import { API_BASE } from "@/utils/constants";
+import { baseHeaders } from "@/utils/request";
 import { fetchEventSource } from "@microsoft/fetch-event-source";
 import { v4 } from "uuid";
 

frontend/src/pages/Admin/Invitations/InviteRow/index.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { titleCase } from "text-case";
-import Admin from "../../../../models/admin";
+import Admin from "@/models/admin";
 import { Trash } from "@phosphor-icons/react";
 
 export default function InviteRow({ invite }) {

frontend/src/pages/Admin/Invitations/NewInviteModal/index.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { X } from "@phosphor-icons/react";
-import Admin from "../../../../models/admin";
+import Admin from "@/models/admin";
 
 const DIALOG_ID = `new-invite-modal`;
 

frontend/src/pages/Admin/Invitations/index.jsx

@@ -1,13 +1,11 @@
 import { useEffect, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
 import * as Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import { EnvelopeSimple } from "@phosphor-icons/react";
-import usePrefersDarkMode from "../../../hooks/usePrefersDarkMode";
-import Admin from "../../../models/admin";
+import usePrefersDarkMode from "@/hooks/usePrefersDarkMode";
+import Admin from "@/models/admin";
 import InviteRow from "./InviteRow";
 import NewInviteModal, { NewInviteModalId } from "./NewInviteModal";
 

frontend/src/pages/Admin/System/index.jsx

@@ -1,10 +1,8 @@
 import { useEffect, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
-import Admin from "../../../models/admin";
-import showToast from "../../../utils/toast";
+import Admin from "@/models/admin";
+import showToast from "@/utils/toast";
 
 export default function AdminSystem() {
   const [saving, setSaving] = useState(false);

frontend/src/pages/Admin/Users/NewUserModal/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { X } from "@phosphor-icons/react";
-import Admin from "../../../../models/admin";
-import { userFromStorage } from "../../../../utils/request";
+import Admin from "@/models/admin";
+import { userFromStorage } from "@/utils/request";
 import { RoleHintDisplay } from "..";
 
 const DIALOG_ID = `new-user-modal`;

frontend/src/pages/Admin/Users/UserRow/EditUserModal/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { X } from "@phosphor-icons/react";
-import Admin from "../../../../../models/admin";
+import Admin from "@/models/admin";
 import { RoleHintDisplay } from "../..";
 
 export const EditUserModalId = (user) => `edit-user-${user.id}-modal`;

frontend/src/pages/Admin/Users/UserRow/index.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from "react";
 import { titleCase } from "text-case";
-import Admin from "../../../../models/admin";
+import Admin from "@/models/admin";
 import EditUserModal, { EditUserModalId } from "./EditUserModal";
 import { DotsThreeOutline } from "@phosphor-icons/react";
 

frontend/src/pages/Admin/Users/index.jsx

@@ -1,14 +1,12 @@
 import { useEffect, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
 import * as Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import { UserPlus } from "@phosphor-icons/react";
-import Admin from "../../../models/admin";
+import Admin from "@/models/admin";
 import UserRow from "./UserRow";
-import useUser from "../../../hooks/useUser";
+import useUser from "@/hooks/useUser";
 import NewUserModal, { NewUserModalId } from "./NewUserModal";
 
 export default function AdminUsers() {

frontend/src/pages/Admin/Workspaces/NewWorkspaceModal/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { X } from "@phosphor-icons/react";
-import Admin from "../../../../models/admin";
+import Admin from "@/models/admin";
 const DIALOG_ID = `new-workspace-modal`;
 
 function hideModal() {

frontend/src/pages/Admin/Workspaces/WorkspaceRow/EditWorkspaceUsersModal/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { X } from "@phosphor-icons/react";
-import Admin from "../../../../../models/admin";
+import Admin from "@/models/admin";
 import { titleCase } from "text-case";
 
 export const EditWorkspaceUsersModalId = (workspace) =>

frontend/src/pages/Admin/Workspaces/WorkspaceRow/index.jsx

@@ -1,6 +1,6 @@
 import { useRef } from "react";
-import Admin from "../../../../models/admin";
-import paths from "../../../../utils/paths";
+import Admin from "@/models/admin";
+import paths from "@/utils/paths";
 import EditWorkspaceUsersModal, {
   EditWorkspaceUsersModalId,
 } from "./EditWorkspaceUsersModal";

frontend/src/pages/Admin/Workspaces/index.jsx

@@ -1,13 +1,11 @@
 import { useEffect, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
 import * as Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import { BookOpen } from "@phosphor-icons/react";
-import usePrefersDarkMode from "../../../hooks/usePrefersDarkMode";
-import Admin from "../../../models/admin";
+import usePrefersDarkMode from "@/hooks/usePrefersDarkMode";
+import Admin from "@/models/admin";
 import WorkspaceRow from "./WorkspaceRow";
 import NewWorkspaceModal, { NewWorkspaceModalId } from "./NewWorkspaceModal";
 

frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx

@@ -1,9 +1,9 @@
 import { useEffect, useRef, useState } from "react";
-import Admin from "../../../../models/admin";
-import showToast from "../../../../utils/toast";
+import Admin from "@/models/admin";
+import showToast from "@/utils/toast";
 import { Trash } from "@phosphor-icons/react";
-import { userFromStorage } from "../../../../utils/request";
-import System from "../../../../models/system";
+import { userFromStorage } from "@/utils/request";
+import System from "@/models/system";
 
 export default function ApiKeyRow({ apiKey }) {
   const rowRef = useRef(null);

frontend/src/pages/GeneralSettings/ApiKeys/NewApiKeyModal/index.jsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { X } from "@phosphor-icons/react";
-import Admin from "../../../../models/admin";
-import paths from "../../../../utils/paths";
-import { userFromStorage } from "../../../../utils/request";
-import System from "../../../../models/system";
+import Admin from "@/models/admin";
+import paths from "@/utils/paths";
+import { userFromStorage } from "@/utils/request";
+import System from "@/models/system";
 
 const DIALOG_ID = `new-api-key-modal`;
 

frontend/src/pages/GeneralSettings/ApiKeys/index.jsx

@@ -1,17 +1,15 @@
 import { useEffect, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
 import * as Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import { PlusCircle } from "@phosphor-icons/react";
-import Admin from "../../../models/admin";
+import Admin from "@/models/admin";
 import ApiKeyRow from "./ApiKeyRow";
 import NewApiKeyModal, { NewApiKeyModalId } from "./NewApiKeyModal";
-import paths from "../../../utils/paths";
-import { userFromStorage } from "../../../utils/request";
-import System from "../../../models/system";
+import paths from "@/utils/paths";
+import { userFromStorage } from "@/utils/request";
+import System from "@/models/system";
 
 export default function AdminApiKeys() {
   return (

frontend/src/pages/GeneralSettings/Appearance/index.jsx

@@ -1,14 +1,12 @@
 import React, { useState, useEffect } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
-import Admin from "../../../models/admin";
-import AnythingLLM from "../../../media/logo/anything-llm.png";
-import useLogo from "../../../hooks/useLogo";
-import System from "../../../models/system";
-import EditingChatBubble from "../../../components/EditingChatBubble";
-import showToast from "../../../utils/toast";
+import Admin from "@/models/admin";
+import AnythingLLM from "@/media/logo/anything-llm.png";
+import useLogo from "@/hooks/useLogo";
+import System from "@/models/system";
+import EditingChatBubble from "@/components/EditingChatBubble";
+import showToast from "@/utils/toast";
 import { Plus } from "@phosphor-icons/react";
 
 export default function Appearance() {

frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx

@@ -1,7 +1,7 @@
 import { useRef } from "react";
 import truncate from "truncate";
 import { X, Trash } from "@phosphor-icons/react";
-import System from "../../../../models/system";
+import System from "@/models/system";
 
 export default function ChatRow({ chat }) {
   const rowRef = useRef(null);

frontend/src/pages/GeneralSettings/Chats/index.jsx

@@ -1,14 +1,12 @@
 import { useEffect, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
 import * as Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
-import useQuery from "../../../hooks/useQuery";
+import useQuery from "@/hooks/useQuery";
 import ChatRow from "./ChatRow";
-import showToast from "../../../utils/toast";
-import System from "../../../models/system";
+import showToast from "@/utils/toast";
+import System from "@/models/system";
 
 const PAGE_SIZE = 20;
 export default function WorkspaceChats() {

frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx

@@ -1,21 +1,19 @@
 import React, { useEffect, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
-import System from "../../../models/system";
-import showToast from "../../../utils/toast";
-import AnythingLLMIcon from "../../../media/logo/anything-llm-icon.png";
-import OpenAiLogo from "../../../media/llmprovider/openai.png";
-import AzureOpenAiLogo from "../../../media/llmprovider/azure.png";
-import LocalAiLogo from "../../../media/llmprovider/localai.png";
-import PreLoader from "../../../components/Preloader";
-import LLMProviderOption from "../../../components/LLMSelection/LLMProviderOption";
-import ChangeWarningModal from "../../../components/ChangeWarning";
-import OpenAiOptions from "../../../components/EmbeddingSelection/OpenAiOptions";
-import AzureAiOptions from "../../../components/EmbeddingSelection/AzureAiOptions";
-import LocalAiOptions from "../../../components/EmbeddingSelection/LocalAiOptions";
-import NativeEmbeddingOptions from "../../../components/EmbeddingSelection/NativeEmbeddingOptions";
+import System from "@/models/system";
+import showToast from "@/utils/toast";
+import AnythingLLMIcon from "@/media/logo/anything-llm-icon.png";
+import OpenAiLogo from "@/media/llmprovider/openai.png";
+import AzureOpenAiLogo from "@/media/llmprovider/azure.png";
+import LocalAiLogo from "@/media/llmprovider/localai.png";
+import PreLoader from "@/components/Preloader";
+import LLMProviderOption from "@/components/LLMSelection/LLMProviderOption";
+import ChangeWarningModal from "@/components/ChangeWarning";
+import OpenAiOptions from "@/components/EmbeddingSelection/OpenAiOptions";
+import AzureAiOptions from "@/components/EmbeddingSelection/AzureAiOptions";
+import LocalAiOptions from "@/components/EmbeddingSelection/LocalAiOptions";
+import NativeEmbeddingOptions from "@/components/EmbeddingSelection/NativeEmbeddingOptions";
 
 export default function GeneralEmbeddingPreference() {
   const [saving, setSaving] = useState(false);

frontend/src/pages/GeneralSettings/ExportImport/index.jsx

@@ -1,14 +1,11 @@
-import { useEffect, useRef, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import { useRef, useState } from "react";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
-import Admin from "../../../models/admin";
-import showToast from "../../../utils/toast";
+import showToast from "@/utils/toast";
 import { CloudArrowUp, DownloadSimple } from "@phosphor-icons/react";
-import System from "../../../models/system";
-import { API_BASE } from "../../../utils/constants";
-import paths from "../../../utils/paths";
+import System from "@/models/system";
+import { API_BASE } from "@/utils/constants";
+import paths from "@/utils/paths";
 
 export default function GeneralExportImport() {
   const hostname = window?.location?.hostname;

frontend/src/pages/GeneralSettings/LLMPreference/index.jsx

@@ -1,22 +1,20 @@
 import React, { useEffect, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
-import System from "../../../models/system";
-import showToast from "../../../utils/toast";
-import OpenAiLogo from "../../../media/llmprovider/openai.png";
-import AzureOpenAiLogo from "../../../media/llmprovider/azure.png";
-import AnthropicLogo from "../../../media/llmprovider/anthropic.png";
-import LMStudioLogo from "../../../media/llmprovider/lmstudio.png";
-import LocalAiLogo from "../../../media/llmprovider/localai.png";
-import PreLoader from "../../../components/Preloader";
-import LLMProviderOption from "../../../components/LLMSelection/LLMProviderOption";
-import OpenAiOptions from "../../../components/LLMSelection/OpenAiOptions";
-import AzureAiOptions from "../../../components/LLMSelection/AzureAiOptions";
-import AnthropicAiOptions from "../../../components/LLMSelection/AnthropicAiOptions";
-import LMStudioOptions from "../../../components/LLMSelection/LMStudioOptions";
-import LocalAiOptions from "../../../components/LLMSelection/LocalAiOptions";
+import System from "@/models/system";
+import showToast from "@/utils/toast";
+import OpenAiLogo from "@/media/llmprovider/openai.png";
+import AzureOpenAiLogo from "@/media/llmprovider/azure.png";
+import AnthropicLogo from "@/media/llmprovider/anthropic.png";
+import LMStudioLogo from "@/media/llmprovider/lmstudio.png";
+import LocalAiLogo from "@/media/llmprovider/localai.png";
+import PreLoader from "@/components/Preloader";
+import LLMProviderOption from "@/components/LLMSelection/LLMProviderOption";
+import OpenAiOptions from "@/components/LLMSelection/OpenAiOptions";
+import AzureAiOptions from "@/components/LLMSelection/AzureAiOptions";
+import AnthropicAiOptions from "@/components/LLMSelection/AnthropicAiOptions";
+import LMStudioOptions from "@/components/LLMSelection/LMStudioOptions";
+import LocalAiOptions from "@/components/LLMSelection/LocalAiOptions";
 
 export default function GeneralLLMPreference() {
   const [saving, setSaving] = useState(false);

frontend/src/pages/GeneralSettings/Security/index.jsx

@@ -1,17 +1,11 @@
 import { useEffect, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
-import showToast from "../../../utils/toast";
-import System from "../../../models/system";
-import paths from "../../../utils/paths";
-import {
-  AUTH_TIMESTAMP,
-  AUTH_TOKEN,
-  AUTH_USER,
-} from "../../../utils/constants";
-import PreLoader from "../../../components/Preloader";
+import showToast from "@/utils/toast";
+import System from "@/models/system";
+import paths from "@/utils/paths";
+import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "@/utils/constants";
+import PreLoader from "@/components/Preloader";
 
 export default function GeneralSecurity() {
   return (

frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx

@@ -1,18 +1,16 @@
 import React, { useState, useEffect } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
-import System from "../../../models/system";
-import showToast from "../../../utils/toast";
-import ChromaLogo from "../../../media/vectordbs/chroma.png";
-import PineconeLogo from "../../../media/vectordbs/pinecone.png";
-import LanceDbLogo from "../../../media/vectordbs/lancedb.png";
-import WeaviateLogo from "../../../media/vectordbs/weaviate.png";
-import QDrantLogo from "../../../media/vectordbs/qdrant.png";
-import PreLoader from "../../../components/Preloader";
-import VectorDBOption from "../../../components/VectorDBOption";
-import ChangeWarningModal from "../../../components/ChangeWarning";
+import System from "@/models/system";
+import showToast from "@/utils/toast";
+import ChromaLogo from "@/media/vectordbs/chroma.png";
+import PineconeLogo from "@/media/vectordbs/pinecone.png";
+import LanceDbLogo from "@/media/vectordbs/lancedb.png";
+import WeaviateLogo from "@/media/vectordbs/weaviate.png";
+import QDrantLogo from "@/media/vectordbs/qdrant.png";
+import PreLoader from "@/components/Preloader";
+import VectorDBOption from "@/components/VectorDBOption";
+import ChangeWarningModal from "@/components/ChangeWarning";
 
 export default function GeneralVectorDatabase() {
   const [saving, setSaving] = useState(false);

frontend/src/pages/Invite/NewUserModal/index.jsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
-import Invite from "../../../models/invite";
-import paths from "../../../utils/paths";
+import Invite from "@/models/invite";
+import paths from "@/utils/paths";
 import { useParams } from "react-router-dom";
-import { AUTH_TOKEN, AUTH_USER } from "../../../utils/constants";
-import System from "../../../models/system";
+import { AUTH_TOKEN, AUTH_USER } from "@/utils/constants";
+import System from "@/models/system";
 
 export default function NewUserModal() {
   const { code } = useParams();

frontend/src/pages/Invite/index.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import { FullScreenLoader } from "../../components/Preloader";
-import Invite from "../../models/invite";
+import { FullScreenLoader } from "@/components/Preloader";
+import Invite from "@/models/invite";
 import NewUserModal from "./NewUserModal";
 
 export default function InvitePage() {

frontend/src/pages/Login/index.jsx

@@ -1,8 +1,6 @@
 import React from "react";
-import PasswordModal, {
-  usePasswordModal,
-} from "../../components/Modals/Password";
-import { FullScreenLoader } from "../../components/Preloader";
+import PasswordModal, { usePasswordModal } from "@/components/Modals/Password";
+import { FullScreenLoader } from "@/components/Preloader";
 
 export default function Login() {
   const { loading, mode } = usePasswordModal();

frontend/src/pages/Main/index.jsx

@@ -1,12 +1,10 @@
 import React from "react";
-import DefaultChatContainer from "../../components/DefaultChat";
-import Sidebar from "../../components/Sidebar";
-import PasswordModal, {
-  usePasswordModal,
-} from "../../components/Modals/Password";
+import DefaultChatContainer from "@/components/DefaultChat";
+import Sidebar from "@/components/Sidebar";
+import PasswordModal, { usePasswordModal } from "@/components/Modals/Password";
 import { isMobile } from "react-device-detect";
-import { FullScreenLoader } from "../../components/Preloader";
-import UserMenu from "../../components/UserMenu";
+import { FullScreenLoader } from "@/components/Preloader";
+import UserMenu from "@/components/UserMenu";
 
 export default function Main() {
   const { loading, requiresAuth, mode } = usePasswordModal();

frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/AppearanceSetup/index.jsx

@@ -1,9 +1,9 @@
 import React, { memo, useEffect, useState } from "react";
-import System from "../../../../../models/system";
-import AnythingLLM from "../../../../../media/logo/anything-llm.png";
-import useLogo from "../../../../../hooks/useLogo";
+import System from "@/models/system";
+import AnythingLLM from "@/media/logo/anything-llm.png";
+import useLogo from "@/hooks/useLogo";
 import { Plus } from "@phosphor-icons/react";
-import showToast from "../../../../../utils/toast";
+import showToast from "@/utils/toast";
 
 function AppearanceSetup({ prevStep, nextStep }) {
   const { logo: _initLogo } = useLogo();

frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/CreateFirstWorkspace/index.jsx

@@ -1,7 +1,7 @@
 import React, { memo } from "react";
 import { useNavigate } from "react-router-dom";
-import paths from "../../../../../utils/paths";
-import Workspace from "../../../../../models/workspace";
+import paths from "@/utils/paths";
+import Workspace from "@/models/workspace";
 
 function CreateFirstWorkspace() {
   const navigate = useNavigate();

frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/DataHandling/index.jsx

@@ -1,17 +1,17 @@
 import React, { memo, useEffect, useState } from "react";
-import System from "../../../../../models/system";
-import AnythingLLMIcon from "../../../../../media/logo/anything-llm-icon.png";
-import OpenAiLogo from "../../../../../media/llmprovider/openai.png";
-import AzureOpenAiLogo from "../../../../../media/llmprovider/azure.png";
-import AnthropicLogo from "../../../../../media/llmprovider/anthropic.png";
-import LMStudioLogo from "../../../../../media/llmprovider/lmstudio.png";
-import LocalAiLogo from "../../../../../media/llmprovider/localai.png";
-import ChromaLogo from "../../../../../media/vectordbs/chroma.png";
-import PineconeLogo from "../../../../../media/vectordbs/pinecone.png";
-import LanceDbLogo from "../../../../../media/vectordbs/lancedb.png";
-import WeaviateLogo from "../../../../../media/vectordbs/weaviate.png";
-import QDrantLogo from "../../../../../media/vectordbs/qdrant.png";
-import PreLoader from "../../../../../components/Preloader";
+import System from "@/models/system";
+import AnythingLLMIcon from "@/media/logo/anything-llm-icon.png";
+import OpenAiLogo from "@/media/llmprovider/openai.png";
+import AzureOpenAiLogo from "@/media/llmprovider/azure.png";
+import AnthropicLogo from "@/media/llmprovider/anthropic.png";
+import LMStudioLogo from "@/media/llmprovider/lmstudio.png";
+import LocalAiLogo from "@/media/llmprovider/localai.png";
+import ChromaLogo from "@/media/vectordbs/chroma.png";
+import PineconeLogo from "@/media/vectordbs/pinecone.png";
+import LanceDbLogo from "@/media/vectordbs/lancedb.png";
+import WeaviateLogo from "@/media/vectordbs/weaviate.png";
+import QDrantLogo from "@/media/vectordbs/qdrant.png";
+import PreLoader from "@/components/Preloader";
 
 const LLM_SELECTION_PRIVACY = {
   openai: {

frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/EmbeddingSelection/index.jsx

@@ -1,15 +1,15 @@
 import React, { memo, useEffect, useState } from "react";
-import AnythingLLMIcon from "../../../../../media/logo/anything-llm-icon.png";
-import OpenAiLogo from "../../../../../media/llmprovider/openai.png";
-import AzureOpenAiLogo from "../../../../../media/llmprovider/azure.png";
-import LocalAiLogo from "../../../../../media/llmprovider/localai.png";
-import System from "../../../../../models/system";
-import PreLoader from "../../../../../components/Preloader";
-import LLMProviderOption from "../../../../../components/LLMSelection/LLMProviderOption";
-import OpenAiOptions from "../../../../../components/EmbeddingSelection/OpenAiOptions";
-import AzureAiOptions from "../../../../../components/EmbeddingSelection/AzureAiOptions";
-import LocalAiOptions from "../../../../../components/EmbeddingSelection/LocalAiOptions";
-import NativeEmbeddingOptions from "../../../../../components/EmbeddingSelection/NativeEmbeddingOptions";
+import AnythingLLMIcon from "@/media/logo/anything-llm-icon.png";
+import OpenAiLogo from "@/media/llmprovider/openai.png";
+import AzureOpenAiLogo from "@/media/llmprovider/azure.png";
+import LocalAiLogo from "@/media/llmprovider/localai.png";
+import System from "@/models/system";
+import PreLoader from "@/components/Preloader";
+import LLMProviderOption from "@/components/LLMSelection/LLMProviderOption";
+import OpenAiOptions from "@/components/EmbeddingSelection/OpenAiOptions";
+import AzureAiOptions from "@/components/EmbeddingSelection/AzureAiOptions";
+import LocalAiOptions from "@/components/EmbeddingSelection/LocalAiOptions";
+import NativeEmbeddingOptions from "@/components/EmbeddingSelection/NativeEmbeddingOptions";
 
 function EmbeddingSelection({ nextStep, prevStep, currentStep }) {
   const [embeddingChoice, setEmbeddingChoice] = useState("native");

frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/LLMSelection/index.jsx

@@ -1,17 +1,17 @@
 import React, { memo, useEffect, useState } from "react";
-import OpenAiLogo from "../../../../../media/llmprovider/openai.png";
-import AzureOpenAiLogo from "../../../../../media/llmprovider/azure.png";
-import AnthropicLogo from "../../../../../media/llmprovider/anthropic.png";
-import LMStudioLogo from "../../../../../media/llmprovider/lmstudio.png";
-import LocalAiLogo from "../../../../../media/llmprovider/localai.png";
-import System from "../../../../../models/system";
-import PreLoader from "../../../../../components/Preloader";
-import LLMProviderOption from "../../../../../components/LLMSelection/LLMProviderOption";
-import OpenAiOptions from "../../../../../components/LLMSelection/OpenAiOptions";
-import AzureAiOptions from "../../../../../components/LLMSelection/AzureAiOptions";
-import AnthropicAiOptions from "../../../../../components/LLMSelection/AnthropicAiOptions";
-import LMStudioOptions from "../../../../../components/LLMSelection/LMStudioOptions";
-import LocalAiOptions from "../../../../../components/LLMSelection/LocalAiOptions";
+import OpenAiLogo from "@/media/llmprovider/openai.png";
+import AzureOpenAiLogo from "@/media/llmprovider/azure.png";
+import AnthropicLogo from "@/media/llmprovider/anthropic.png";
+import LMStudioLogo from "@/media/llmprovider/lmstudio.png";
+import LocalAiLogo from "@/media/llmprovider/localai.png";
+import System from "@/models/system";
+import PreLoader from "@/components/Preloader";
+import LLMProviderOption from "@/components/LLMSelection/LLMProviderOption";
+import OpenAiOptions from "@/components/LLMSelection/OpenAiOptions";
+import AzureAiOptions from "@/components/LLMSelection/AzureAiOptions";
+import AnthropicAiOptions from "@/components/LLMSelection/AnthropicAiOptions";
+import LMStudioOptions from "@/components/LLMSelection/LMStudioOptions";
+import LocalAiOptions from "@/components/LLMSelection/LocalAiOptions";
 
 function LLMSelection({ nextStep, prevStep, currentStep }) {
   const [llmChoice, setLLMChoice] = useState("openai");

frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/MultiUserSetup/index.jsx

@@ -1,10 +1,6 @@
 import React, { useState, memo } from "react";
-import System from "../../../../../models/system";
-import {
-  AUTH_TIMESTAMP,
-  AUTH_TOKEN,
-  AUTH_USER,
-} from "../../../../../utils/constants";
+import System from "@/models/system";
+import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "@/utils/constants";
 import debounce from "lodash.debounce";
 
 // Multi-user mode step

frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/PasswordProtection/index.jsx

@@ -1,10 +1,6 @@
 import React, { memo, useState } from "react";
-import System from "../../../../../models/system";
-import {
-  AUTH_TIMESTAMP,
-  AUTH_TOKEN,
-  AUTH_USER,
-} from "../../../../../utils/constants";
+import System from "@/models/system";
+import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "@/utils/constants";
 import debounce from "lodash.debounce";
 
 function PasswordProtection({ nextStep, prevStep }) {

frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/VectorDatabaseConnection/index.jsx

@@ -1,13 +1,13 @@
 import React, { memo, useEffect, useState } from "react";
 
-import VectorDBOption from "../../../../../components/VectorDBOption";
-import ChromaLogo from "../../../../../media/vectordbs/chroma.png";
-import PineconeLogo from "../../../../../media/vectordbs/pinecone.png";
-import LanceDbLogo from "../../../../../media/vectordbs/lancedb.png";
-import WeaviateLogo from "../../../../../media/vectordbs/weaviate.png";
-import QDrantLogo from "../../../../../media/vectordbs/qdrant.png";
-import System from "../../../../../models/system";
-import PreLoader from "../../../../../components/Preloader";
+import VectorDBOption from "@/components/VectorDBOption";
+import ChromaLogo from "@/media/vectordbs/chroma.png";
+import PineconeLogo from "@/media/vectordbs/pinecone.png";
+import LanceDbLogo from "@/media/vectordbs/lancedb.png";
+import WeaviateLogo from "@/media/vectordbs/weaviate.png";
+import QDrantLogo from "@/media/vectordbs/qdrant.png";
+import System from "@/models/system";
+import PreLoader from "@/components/Preloader";
 
 function VectorDatabaseConnection({ nextStep, prevStep, currentStep }) {
   const [vectorDB, setVectorDB] = useState("lancedb");

frontend/src/pages/OnboardingFlow/index.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import OnboardingModal, { OnboardingModalId } from "./OnboardingModal";
-import useLogo from "../../hooks/useLogo";
+import useLogo from "@/hooks/useLogo";
 import { isMobile } from "react-device-detect";
 
 export default function OnboardingFlow() {

frontend/src/pages/WorkspaceChat/index.jsx

@@ -1,13 +1,11 @@
 import React, { useEffect, useState } from "react";
-import { default as WorkspaceChatContainer } from "../../components/WorkspaceChat";
-import Sidebar from "../../components/Sidebar";
+import { default as WorkspaceChatContainer } from "@/components/WorkspaceChat";
+import Sidebar from "@/components/Sidebar";
 import { useParams } from "react-router-dom";
-import Workspace from "../../models/workspace";
-import PasswordModal, {
-  usePasswordModal,
-} from "../../components/Modals/Password";
+import Workspace from "@/models/workspace";
+import PasswordModal, { usePasswordModal } from "@/components/Modals/Password";
 import { isMobile } from "react-device-detect";
-import { FullScreenLoader } from "../../components/Preloader";
+import { FullScreenLoader } from "@/components/Preloader";
 
 export default function WorkspaceChat() {
   const { loading, requiresAuth, mode } = usePasswordModal();

frontend/src/utils/toast.js

@@ -1,5 +1,5 @@
 import { toast } from "react-toastify";
-import usePrefersDarkMode from "../hooks/usePrefersDarkMode";
+import usePrefersDarkMode from "@/hooks/usePrefersDarkMode";
 
 // Additional Configs (opts)
 // You can also pass valid ReactToast params to override the defaults.

frontend/vite.config.js

@@ -1,4 +1,5 @@
 import { defineConfig } from 'vite'
+import { fileURLToPath, URL } from "url";
 import postcss from './postcss.config.js'
 import react from '@vitejs/plugin-react'
 import dns from 'dns'
@@ -30,6 +31,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: [
+      { find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
       {
         process: "process/browser",
         stream: "stream-browserify",