refactor(frontend): move widget to app-components

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

@@ -0,0 +1,46 @@
+/*
+ * 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 { Avatar, Box } from "@mui/material";
+import UiChatWidget from "hexabot-widget/src/UiChatWidget";
+
+import { getAvatarSrc } from "@/components/inbox/helpers/mapMessages";
+import { useConfig } from "@/hooks/useConfig";
+import i18n from "@/i18n/config";
+import { EntityType, RouterType } from "@/services/types";
+
+import { ChatWidgetHeader } from "./ChatWidgetHeader";
+
+export const ChatWidget = ({ pathname }: { pathname: string }) => {
+  const { apiUrl } = useConfig();
+  const isVisualEditor = pathname === `/${RouterType.VISUAL_EDITOR}`;
+
+  return (
+    <Box
+      sx={{
+        display: isVisualEditor ? "block" : "none",
+      }}
+    >
+      <UiChatWidget
+        config={{
+          apiUrl,
+          channel: "live-chat-tester",
+          token: "test",
+          language: i18n.language,
+        }}
+        CustomHeader={ChatWidgetHeader}
+        CustomAvatar={() => (
+          <Avatar
+            sx={{ width: "32px", height: "32px", fontSize: ".75rem" }}
+            src={getAvatarSrc(apiUrl, EntityType.USER, "bot")}
+          />
+        )}
+      />
+    </Box>
+  );
+};

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

@@ -0,0 +1,25 @@
+/*
+ * 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 ChatIcon from "@mui/icons-material/Chat";
+import { Box, Typography } from "@mui/material";
+
+import { useTranslate } from "@/hooks/useTranslate";
+
+export const ChatWidgetHeader = () => {
+  const { t } = useTranslate();
+
+  return (
+    <Box display="flex" alignItems="center" ml={2}>
+      <ChatIcon />
+      <Typography component="h2" fontSize="1.5rem" ml={2}>
+        {t("title.live_chat_tester")}
+      </Typography>
+    </Box>
+  );
+};

frontend/src/layout/Header.tsx

@@ -6,7 +6,6 @@
  * 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 ChatIcon from "@mui/icons-material/Chat";
 import MenuIcon from "@mui/icons-material/Menu";
 import {
   Avatar,
@@ -18,8 +17,6 @@ import {
   styled,
 } from "@mui/material";
 import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
-import UiChatWidget from "hexabot-widget/src/UiChatWidget";
-import { usePathname } from "next/navigation";
 import { FC, useEffect, useRef, useState } from "react";
 
 import { HexabotLogo } from "@/app-components/logos/HexabotLogo";
@@ -28,8 +25,7 @@ import { getAvatarSrc } from "@/components/inbox/helpers/mapMessages";
 import { useAuth } from "@/hooks/useAuth";
 import { useConfig } from "@/hooks/useConfig";
 import { useTranslate } from "@/hooks/useTranslate";
-import i18n from "@/i18n/config";
-import { EntityType, RouterType } from "@/services/types";
+import { EntityType } from "@/services/types";
 import { getRandom } from "@/utils/safeRandom";
 
 import { borderLine, theme } from "./themes/theme";
@@ -77,22 +73,8 @@ export type HeaderProps = {
   onToggleSidebar: () => void;
 };
 
-const CustomWidgetHeader = () => {
-  const { t } = useTranslate();
-
-  return (
-    <Box display="flex" alignItems="center" ml={2}>
-      <ChatIcon />
-      <Typography component="h2" fontSize="1.5rem" ml={2}>
-        {t("title.live_chat_tester")}
-      </Typography>
-    </Box>
-  );
-};
-
 export const Header: FC<HeaderProps> = ({ isSideBarOpen, onToggleSidebar }) => {
   const { apiUrl, ssoEnabled } = useConfig();
-  const pathname = usePathname();
   const { t } = useTranslate();
   const anchorRef = useRef(null);
   const [isMenuPopoverOpen, setIsMenuPopoverOpen] = useState(false);
@@ -107,8 +89,6 @@ export const Header: FC<HeaderProps> = ({ isSideBarOpen, onToggleSidebar }) => {
     setRandomSeed(getRandom().toString());
   }, [user]);
 
-  const isVisualEditor = pathname === `/${RouterType.VISUAL_EDITOR}`;
-
   return (
     <StyledAppBar open={isSideBarOpen}>
       <Grid container>
@@ -214,24 +194,6 @@ export const Header: FC<HeaderProps> = ({ isSideBarOpen, onToggleSidebar }) => {
             ) : null}
           </Grid>
         ) : null}
-
-        <Grid sx={{ display: isVisualEditor ? "block" : "none" }}>
-          <UiChatWidget
-            config={{
-              apiUrl,
-              channel: "live-chat-tester",
-              token: "test",
-              language: i18n.language,
-            }}
-            CustomHeader={CustomWidgetHeader as any}
-            CustomAvatar={() => (
-              <Avatar
-                sx={{ width: "32px", height: "32px", fontSize: ".75rem" }}
-                src={getAvatarSrc(apiUrl, EntityType.USER, "bot")}
-              />
-            )}
-          />
-        </Grid>
       </Grid>
     </StyledAppBar>
   );

frontend/src/layout/index.tsx

@@ -7,8 +7,11 @@
  */
 
 import { BoxProps, Grid } from "@mui/material";
+import { usePathname } from "next/navigation";
 import { useState } from "react";
 
+import { ChatWidget } from "@/app-components/widget/ChatWidget";
+
 import { Content } from "./content";
 import { Header } from "./Header";
 import { VerticalMenu } from "./VerticalMenu";
@@ -26,6 +29,7 @@ export const Layout: React.FC<LayoutProps> = ({
   sxContent,
   ...rest
 }) => {
+  const pathname = usePathname();
   const [isSideBarOpen, setIsSideBarOpen] = useState(false);
 
   return (
@@ -42,6 +46,7 @@ export const Layout: React.FC<LayoutProps> = ({
       <Content sx={sxContent} {...rest}>
         {children}
       </Content>
+      <ChatWidget pathname={pathname} />
     </Grid>
   );
 };