feat: tabs bidirectional sync with the url query

frontend/src/app-components/widget/ChatWidget.tsx

@@ -27,7 +27,7 @@ export const ChatWidget = () => {
   const pathname = usePathname();
   const { apiUrl } = useConfig();
   const { isAuthenticated } = useAuth();
-  const isVisualEditor = pathname === `/${RouterType.VISUAL_EDITOR}`;
+  const isVisualEditor = pathname.startsWith(`/${RouterType.VISUAL_EDITOR}`);
   const allowedDomainsSetting = useSetting(SETTING_TYPE, "allowed_domains");
   const themeColorSetting = useSetting(SETTING_TYPE, "theme_color");
   const [key, setKey] = useState(generateId());

frontend/src/components/settings/index.tsx

@@ -16,6 +16,7 @@ import {
   Tab,
   Tabs,
 } from "@mui/material";
+import { useRouter } from "next/router";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
@@ -25,7 +26,7 @@ import { useUpdate } from "@/hooks/crud/useUpdate";
 import { useToast } from "@/hooks/useToast";
 import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
-import { EntityType } from "@/services/types";
+import { EntityType, RouterType } from "@/services/types";
 import { ISetting } from "@/types/setting.types";
 import { SXStyleOptions } from "@/utils/SXStyleOptions";
 
@@ -66,10 +67,16 @@ function groupBy(array: ISetting[]) {
   }, {} as Record<string, ISetting[]>);
 }
 
+const DEFAULT_SETTINGS_GROUP = "chatbot_settings" as const;
+
 export const Settings = () => {
   const { t } = useTranslate();
+  const router = useRouter();
+  const group = router.query.group?.toString();
   const { toast } = useToast();
-  const [selectedTab, setSelectedTab] = useState("chatbot_settings");
+  const [selectedTab, setSelectedTab] = useState(
+    group || DEFAULT_SETTINGS_GROUP,
+  );
   const { control, watch } = useForm();
   const { data: settings } = useFind(
     { entity: EntityType.SETTING },
@@ -94,6 +101,7 @@ export const Settings = () => {
   };
   const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
     setSelectedTab(newValue);
+    router.push(`/${RouterType.SETTINGS}/groups/${newValue}`);
   };
   const isDisabled = (setting: ISetting) => {
     return (
@@ -135,6 +143,12 @@ export const Settings = () => {
     };
   }, [watch, debouncedUpdate]);
 
+  useEffect(() => {
+    setSelectedTab(group || DEFAULT_SETTINGS_GROUP);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [group]);
+
   return (
     <Grid container gap={3} flexDirection="column">
       <PageHeader icon={faCogs} title={t("title.settings")} />

frontend/src/components/visual-editor/v2/Diagrams.tsx

@@ -29,6 +29,7 @@ import {
   DiagramModel,
   DiagramModelGenerics,
 } from "@projectstorm/react-diagrams";
+import { useRouter } from "next/router";
 import {
   SyntheticEvent,
   useCallback,
@@ -52,7 +53,7 @@ import useDebouncedUpdate from "@/hooks/useDebouncedUpdate";
 import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
 import { useSearch } from "@/hooks/useSearch";
 import { useTranslate } from "@/hooks/useTranslate";
-import { EntityType, Format, QueryType } from "@/services/types";
+import { EntityType, Format, QueryType, RouterType } from "@/services/types";
 import { IBlock } from "@/types/block.types";
 import { ICategory } from "@/types/category.types";
 import { BlockPorts } from "@/types/visual-editor.types";
@@ -65,6 +66,8 @@ import { AdvancedLinkModel } from "./AdvancedLink/AdvancedLinkModel";
 
 const Diagrams = () => {
   const { t } = useTranslate();
+  const router = useRouter();
+  const flowId = router.query.id?.toString();
   const [model, setModel] = useState<
     DiagramModel<DiagramModelGenerics> | undefined
   >();
@@ -95,7 +98,9 @@ const Diagrams = () => {
     },
     {
       onSuccess([{ id, zoom, offset }]) {
-        if (id) {
+        if (flowId) {
+          setSelectedCategoryId?.(flowId);
+        } else if (id) {
           setSelectedCategoryId?.(id);
           if (engine?.getModel()) {
             setViewerOffset(offset || [0, 0]);
@@ -161,6 +166,8 @@ const Diagrams = () => {
       if (id) {
         setSelectedCategoryId?.(id);
         setSelectedBlockId(undefined); // Reset selected block when switching categories, resetting edit & remove buttons
+
+        router.push(`/${RouterType.VISUAL_EDITOR}/flows/${id}`);
       }
     }
   };
@@ -181,6 +188,12 @@ const Diagrams = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    setSelectedCategoryId(flowId || "");
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [flowId]);
+
   useEffect(() => {
     const { canvas, model, engine } = buildDiagram({
       zoom: currentCategory?.zoom || 100,

frontend/src/pages/settings/groups/[group]/index.tsx

@@ -0,0 +1,11 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import SettingsPage from "../..";
+
+export default SettingsPage;

frontend/src/pages/settings/groups/index.tsx

@@ -0,0 +1,11 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import SettingsPage from "..";
+
+export default SettingsPage;

frontend/src/pages/visual-editor/flows/[id]/index.tsx

@@ -0,0 +1,11 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import VisualEditorPage from "../..";
+
+export default VisualEditorPage;

frontend/src/pages/visual-editor/flows/index.tsx

@@ -0,0 +1,11 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import VisualEditorPage from "..";
+
+export default VisualEditorPage;

frontend/src/services/types.ts

@@ -65,6 +65,7 @@ export enum RouterType {
   RESET = "reset",
   VISUAL_EDITOR = "visual-editor",
   INBOX = "inbox",
+  SETTINGS = "settings",
 }
 
 export const FULL_WIDTH_PATHNAMES: TRouterValues[] = [

frontend/src/utils/laylout.ts

@@ -6,11 +6,11 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-import { FULL_WIDTH_PATHNAMES, TRouterValues } from "@/services/types";
+import { FULL_WIDTH_PATHNAMES } from "@/services/types";
 
 type TLayout = "default" | "full_width";
 
 export const getLayout = (pathname: string): TLayout =>
-  FULL_WIDTH_PATHNAMES.includes(pathname as TRouterValues)
+  FULL_WIDTH_PATHNAMES.some((path) => pathname.startsWith(path))
     ? "full_width"
     : "default";