Merge pull request #761 from Hexastack/760-issue---inbox-subscriber-sync-with-url-query

fix(frontend): synchronize selected inbox subscriber with url query

frontend/src/components/inbox/components/ConversationsList.tsx

@@ -13,11 +13,13 @@ import {
 } from "@chatscope/chat-ui-kit-react";
 import InboxIcon from "@mui/icons-material/MoveToInbox";
 import { Chip, debounce, Grid } from "@mui/material";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 
 import { useConfig } from "@/hooks/useConfig";
 import { useTranslate } from "@/hooks/useTranslate";
 import { Title } from "@/layout/content/Title";
-import { EntityType } from "@/services/types";
+import { EntityType, RouterType } from "@/services/types";
 
 import { getAvatarSrc } from "../helpers/mapMessages";
 import { useChat } from "../hooks/ChatContext";
@@ -29,6 +31,8 @@ export const SubscribersList = (props: {
   searchPayload: any;
   assignedTo: AssignedTo;
 }) => {
+  const { query, push } = useRouter();
+  const subscriber = query.subscriber?.toString() || null;
   const { apiUrl } = useConfig();
   const { t, i18n } = useTranslate();
   const chat = useChat();
@@ -38,6 +42,12 @@ export const SubscribersList = (props: {
     !isFetching && hasNextPage && fetchNextPage();
   }, 400);
 
+  useEffect(() => {
+    if (chat) {
+      chat.setSubscriberId(subscriber);
+    }
+  }, [chat, subscriber]);
+
   return (
     <>
       <Grid padding={2}>
@@ -52,7 +62,10 @@ export const SubscribersList = (props: {
         >
           {subscribers.map((subscriber) => (
             <Conversation
-              onClick={() => chat.setSubscriberId(subscriber.id)}
+              onClick={() => {
+                chat.setSubscriberId(subscriber.id);
+                push(`/${RouterType.INBOX}/subscribers/${subscriber.id}`);
+              }}
               className="changeColor"
               key={subscriber.id}
               active={chat.subscriber?.id === subscriber.id}

frontend/src/pages/inbox/index.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright © 2025 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 { ReactElement } from "react";
+
+import { Inbox } from "@/components/inbox";
+import { Layout } from "@/layout";
+
+const InboxPage = () => {
+  return <Inbox />;
+};
+
+InboxPage.getLayout = function getLayout(page: ReactElement) {
+  return <Layout hasNoPadding>{page}</Layout>;
+};
+
+export default InboxPage;

frontend/src/pages/inbox/subscribers/[subscriber]/index.tsx

@@ -0,0 +1,12 @@
+/*
+ * Copyright © 2025 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 InboxPage from "../..";
+
+export default InboxPage;

frontend/src/pages/inbox/subscribers/index.tsx

@@ -0,0 +1,12 @@
+/*
+ * Copyright © 2025 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 InboxPage from "../..";
+
+export default InboxPage;