Feat/Updated browser title with project name (#656)

updated browser title with project name

Signed-off-by: jagadeeswaran-zipstack <jagadeeswaran@zipstack.com>
Co-authored-by: Deepak K <89829542+Deepak-Kesavan@users.noreply.github.com>
Co-authored-by: Rahul Johny <116638720+johnyrahul@users.noreply.github.com>
Co-authored-by: vishnuszipstack <117254672+vishnuszipstack@users.noreply.github.com>

Author: 4 people

frontend/package-lock.json

@@ -40,6 +40,7 @@
     "react-dom": "^18.2.0",
     "react-google-recaptcha": "^3.1.0",
     "react-gtm-module": "^2.0.11",
+    "react-helmet-async": "^2.0.5",
     "react-js-cron": "^5.0.1",
     "react-product-fruits": "^2.2.6",
     "react-router-dom": "^6.11.2",

frontend/package.json

@@ -1,11 +1,13 @@
 import { Button, ConfigProvider, notification, theme } from "antd";
 import { BrowserRouter } from "react-router-dom";
+import { HelmetProvider } from "react-helmet-async";
 
 import { THEME } from "./helpers/GetStaticData.js";
 import { Router } from "./routes/Router.jsx";
 import { useAlertStore } from "./store/alert-store.js";
 import { useSessionStore } from "./store/session-store.js";
 import PostHogPageviewTracker from "./PostHogPageviewTracker.js";
+import { PageTitle } from "./components/widgets/page-title/PageTitle.jsx";
 import { useEffect } from "react";
 import CustomMarkdown from "./components/helpers/custom-markdown/CustomMarkdown.jsx";
 
@@ -72,12 +74,15 @@ function App() {
         },
       }}
     >
-      <BrowserRouter>
-        <PostHogPageviewTracker />
-        {GoogleTagManagerHelper && <GoogleTagManagerHelper />}
-        {contextHolder}
-        <Router />
-      </BrowserRouter>
+      <HelmetProvider>
+        <BrowserRouter>
+          <PostHogPageviewTracker />
+          <PageTitle title={"Unstract"} />
+          {GoogleTagManagerHelper && <GoogleTagManagerHelper />}
+          {contextHolder}
+          <Router />
+        </BrowserRouter>
+      </HelmetProvider>
     </ConfigProvider>
   );
 }

frontend/src/App.jsx

@@ -18,6 +18,7 @@ import { useWorkflowStore } from "../../../store/workflow-store";
 import { LogsLabel } from "../logs-label/LogsLabel";
 import { SidePanel } from "../side-panel/SidePanel";
 import { DisplayLogs } from "../display-logs/DisplayLogs";
+import { PageTitle } from "../../widgets/page-title/PageTitle";
 
 function Agency() {
   const [isCollapsed, setIsCollapsed] = useState(false);
@@ -31,7 +32,7 @@ function Agency() {
   const { message, setDefault } = useSocketMessagesStore();
   const { emptyLogs } = useSocketLogsStore();
   const workflowStore = useWorkflowStore();
-  const { details, loadingType } = workflowStore;
+  const { details, loadingType, projectName } = workflowStore;
   const prompt = details?.prompt_text;
   const [activeToolId, setActiveToolId] = useState("");
   const [prevLoadingType, setPrevLoadingType] = useState("");
@@ -184,6 +185,7 @@ function Agency() {
 
   return (
     <div className="agency-layout">
+      <PageTitle title={projectName} />
       <Layout className="agency-sider-layout">
         <Layout className="agency-sider-layout">
           <IslandLayout>

frontend/src/components/agency/agency/Agency.jsx

@@ -15,6 +15,8 @@ import { SettingsModal } from "../settings-modal/SettingsModal";
 import { ToolsMain } from "../tools-main/ToolsMain";
 import "./ToolIde.css";
 import usePostHogEvents from "../../../hooks/usePostHogEvents.js";
+import { PageTitle } from "../../widgets/page-title/PageTitle.jsx";
+
 let OnboardMessagesModal;
 let PromptShareModal;
 let PromptShareLink;
@@ -232,6 +234,7 @@ function ToolIde() {
 
   return (
     <div className="tool-ide-layout">
+      <PageTitle title={details?.tool_name} />
       {isPublicSource && HeaderPublic && <HeaderPublic />}
       <div>
         <Header

frontend/src/components/custom-tools/tool-ide/ToolIde.jsx

@@ -0,0 +1,16 @@
+import { Helmet } from "react-helmet-async";
+import PropTypes from "prop-types";
+
+function PageTitle({ title }) {
+  return (
+    <Helmet>
+      <title>{title ? `${title} - Unstract` : "Unstract"}</title>
+    </Helmet>
+  );
+}
+
+PageTitle.propTypes = {
+  title: PropTypes.string,
+};
+
+export { PageTitle };