Migrate hash navigation to use query params (#3670)

* migrate hash navigation to use query params for home page

* move from url param to query param

* uncheck file

* update paths to handle search options
update action name that is used in query param
update action handlers

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>

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

@@ -3,6 +3,7 @@ import { Tooltip } from "react-tooltip";
 import { At } from "@phosphor-icons/react";
 import { useIsAgentSessionActive } from "@/utils/chat/agent";
 import { useTranslation } from "react-i18next";
+import { useSearchParams } from "react-router-dom";
 
 export default function AvailableAgentsButton({ showing, setShowAgents }) {
   const { t } = useTranslation();
@@ -49,14 +50,16 @@ export function AvailableAgents({
 }) {
   const formRef = useRef(null);
   const agentSessionActive = useIsAgentSessionActive();
+  const [searchParams] = useSearchParams();
 
   /*
    * @checklist-item
-   * If the URL has the #agent hash, open the agent menu for the user
+   * If the URL has the agent param, open the agent menu for the user
    * automatically when the component mounts.
    */
   useEffect(() => {
-    if (window.location.hash === "#agent" && !showing) handleAgentClick();
+    if (searchParams.get("action") === "set-agent-chat" && !showing)
+      handleAgentClick();
   }, [promptRef.current]);
 
   useEffect(() => {

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

@@ -6,6 +6,7 @@ import { useModal } from "@/hooks/useModal";
 import System from "@/models/system";
 import { DotsThree, Plus } from "@phosphor-icons/react";
 import showToast from "@/utils/toast";
+import { useSearchParams } from "react-router-dom";
 
 export const CMD_REGEX = new RegExp(/[^a-zA-Z0-9_-]/g);
 export default function SlashPresets({ setShowing, sendCommand, promptRef }) {
@@ -22,6 +23,7 @@ export default function SlashPresets({ setShowing, sendCommand, promptRef }) {
   } = useModal();
   const [presets, setPresets] = useState([]);
   const [selectedPreset, setSelectedPreset] = useState(null);
+  const [searchParams] = useSearchParams();
 
   useEffect(() => {
     fetchPresets();
@@ -29,11 +31,14 @@ export default function SlashPresets({ setShowing, sendCommand, promptRef }) {
 
   /*
    * @checklist-item
-   * If the URL has the #slash-commands hash, open the add modal for the user
+   * If the URL has the slash-commands param, open the add modal for the user
    * automatically when the component mounts.
    */
   useEffect(() => {
-    if (window.location.hash === "#slash-commands" && !isAddModalOpen)
+    if (
+      searchParams.get("action") === "open-new-slash-command-modal" &&
+      !isAddModalOpen
+    )
       openAddModal();
   }, []);
 

frontend/src/pages/Main/Home/Checklist/constants.js

@@ -119,8 +119,11 @@ export const CHECKLIST_ITEMS = [
         showNewWsModal();
         return false;
       }
-      navigate(paths.workspace.settings.chatSettings(workspaces[0].slug));
-      window.location.hash = "#system-prompts";
+      navigate(
+        paths.workspace.settings.chatSettings(workspaces[0].slug, {
+          search: { action: "focus-system-prompt" },
+        })
+      );
       return true;
     },
     icon: ChatCenteredText,
@@ -145,8 +148,11 @@ export const CHECKLIST_ITEMS = [
         showNewWsModal();
         return false;
       }
-      navigate(paths.workspace.chat(workspaces[0].slug));
-      window.location.hash = "#slash-commands";
+      navigate(
+        paths.workspace.chat(workspaces[0].slug, {
+          search: { action: "open-new-slash-command-modal" },
+        })
+      );
       return true;
     },
     icon: SlashCommandIcon,

frontend/src/pages/Main/Home/ExploreFeatures/index.jsx

@@ -9,8 +9,11 @@ export default function ExploreFeatures() {
     const workspaces = await Workspace.all();
     if (workspaces.length > 0) {
       const firstWorkspace = workspaces[0];
-      navigate(paths.workspace.chat(firstWorkspace.slug));
-      window.location.hash = "#agent";
+      navigate(
+        paths.workspace.chat(firstWorkspace.slug, {
+          search: { action: "set-agent-chat" },
+        })
+      );
     }
   };
 
@@ -19,8 +22,11 @@ export default function ExploreFeatures() {
     const workspaces = await Workspace.all();
     if (workspaces.length > 0) {
       const firstWorkspace = workspaces[0];
-      navigate(paths.workspace.chat(firstWorkspace.slug));
-      window.location.hash = "#slash-commands";
+      navigate(
+        paths.workspace.chat(firstWorkspace.slug, {
+          search: { action: "open-new-slash-command-modal" },
+        })
+      );
     }
   };
 
@@ -32,8 +38,11 @@ export default function ExploreFeatures() {
     const workspaces = await Workspace.all();
     if (workspaces.length > 0) {
       const firstWorkspace = workspaces[0];
-      navigate(paths.workspace.settings.chatSettings(firstWorkspace.slug));
-      window.location.hash = "#system-prompts";
+      navigate(
+        paths.workspace.settings.chatSettings(firstWorkspace.slug, {
+          search: { action: "focus-system-prompt" },
+        })
+      );
     }
   };
 

frontend/src/pages/WorkspaceSettings/ChatSettings/ChatPromptSettings/index.jsx

@@ -3,7 +3,7 @@ import { chatPrompt } from "@/utils/chat";
 import { useTranslation } from "react-i18next";
 import SystemPromptVariable from "@/models/systemPromptVariable";
 import Highlighter from "react-highlight-words";
-import { Link } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 import paths from "@/utils/paths";
 
 export default function ChatPromptSettings({ workspace, setHasChanges }) {
@@ -12,6 +12,7 @@ export default function ChatPromptSettings({ workspace, setHasChanges }) {
   const [prompt, setPrompt] = useState(chatPrompt(workspace));
   const [isEditing, setIsEditing] = useState(false);
   const promptRef = useRef(null);
+  const [searchParams] = useSearchParams();
 
   useEffect(() => {
     async function setupVariableHighlighting() {
@@ -22,10 +23,9 @@ export default function ChatPromptSettings({ workspace, setHasChanges }) {
   }, []);
 
   useEffect(() => {
-    if (window.location.hash === "#system-prompts") {
+    if (searchParams.get("action") === "focus-system-prompt")
       setIsEditing(true);
-    }
-  }, []);
+  }, [searchParams]);
 
   useEffect(() => {
     if (isEditing && promptRef.current) {

frontend/src/utils/paths.js

@@ -1,5 +1,16 @@
 import { API_BASE } from "./constants";
 
+function applyOptions(path, options = {}) {
+  let updatedPath = path;
+  if (!options || Object.keys(options).length === 0) return updatedPath;
+
+  if (options.search) {
+    const searchParams = new URLSearchParams(options.search);
+    updatedPath += `?${searchParams.toString()}`;
+  }
+  return updatedPath;
+}
+
 export default {
   home: () => {
     return "/";
@@ -49,15 +60,18 @@ export default {
     return "https://my.mintplexlabs.com/aio-checkout?product=anythingllm";
   },
   workspace: {
-    chat: (slug) => {
-      return `/workspace/${slug}`;
+    chat: (slug, options = {}) => {
+      return applyOptions(`/workspace/${slug}`, options);
     },
     settings: {
       generalAppearance: (slug) => {
         return `/workspace/${slug}/settings/general-appearance`;
       },
-      chatSettings: (slug) => {
-        return `/workspace/${slug}/settings/chat-settings`;
+      chatSettings: function (slug, options = {}) {
+        return applyOptions(
+          `/workspace/${slug}/settings/chat-settings`,
+          options
+        );
       },
       vectorDatabase: (slug) => {
         return `/workspace/${slug}/settings/vector-database`;