From 6c558fb591557713f3f4ee9ed4b14e20ec0e8e06 Mon Sep 17 00:00:00 2001 From: yassinedorbozgithub Date: Mon, 7 Oct 2024 18:26:08 +0100 Subject: [PATCH 1/4] fix(frontend): Websocket connections issue --- frontend/src/layout/Header.tsx | 41 +++++++++++++++++++++++++++- frontend/src/pages/visual-editor.tsx | 37 ------------------------- 2 files changed, 40 insertions(+), 38 deletions(-) diff --git a/frontend/src/layout/Header.tsx b/frontend/src/layout/Header.tsx index 6f773062..bf58c835 100644 --- a/frontend/src/layout/Header.tsx +++ b/frontend/src/layout/Header.tsx @@ -6,6 +6,7 @@ * 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, @@ -17,6 +18,8 @@ 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"; @@ -25,7 +28,8 @@ import { getAvatarSrc } from "@/components/inbox/helpers/mapMessages"; import { useAuth } from "@/hooks/useAuth"; import { useConfig } from "@/hooks/useConfig"; import { useTranslate } from "@/hooks/useTranslate"; -import { EntityType } from "@/services/types"; +import i18n from "@/i18n/config"; +import { EntityType, RouterType } from "@/services/types"; import { getRandom } from "@/utils/safeRandom"; import { borderLine, theme } from "./themes/theme"; @@ -72,8 +76,23 @@ export type HeaderProps = { isSideBarOpen: boolean; onToggleSidebar: () => void; }; + +const CustomWidgetHeader = () => { + const { t } = useTranslate(); + + return ( + + + + {t("title.live_chat_tester")} + + + ); +}; + export const Header: FC = ({ isSideBarOpen, onToggleSidebar }) => { const { apiUrl, ssoEnabled } = useConfig(); + const pathname = usePathname(); const { t } = useTranslate(); const anchorRef = useRef(null); const [isMenuPopoverOpen, setIsMenuPopoverOpen] = useState(false); @@ -88,6 +107,8 @@ export const Header: FC = ({ isSideBarOpen, onToggleSidebar }) => { setRandomSeed(getRandom().toString()); }, [user]); + const isVisualEditor = pathname === `/${RouterType.VISUAL_EDITOR}`; + return ( @@ -193,6 +214,24 @@ export const Header: FC = ({ isSideBarOpen, onToggleSidebar }) => { ) : null} ) : null} + + + ( + + )} + /> + ); diff --git a/frontend/src/pages/visual-editor.tsx b/frontend/src/pages/visual-editor.tsx index 107959b9..45fd4194 100644 --- a/frontend/src/pages/visual-editor.tsx +++ b/frontend/src/pages/visual-editor.tsx @@ -6,52 +6,15 @@ * 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 { Avatar, Box, Typography } from "@mui/material"; -import UiChatWidget from "hexabot-widget/src/UiChatWidget"; import { ReactElement } from "react"; -import { getAvatarSrc } from "@/components/inbox/helpers/mapMessages"; import { VisualEditor } from "@/components/visual-editor"; -import { useConfig } from "@/hooks/useConfig"; -import { useTranslate } from "@/hooks/useTranslate"; -import i18n from "@/i18n/config"; import { Layout } from "@/layout"; -import { EntityType } from "@/services/types"; -const CustomWidgetHeader = () => { - const { t } = useTranslate(); - - return ( - - - - {t("title.live_chat_tester")} - - - ); -}; const VisualEditorPage = () => { - const { apiUrl } = useConfig(); - return ( <> - ( - - )} - /> ); }; From ee8d95b7d4e7923473241f77c606ceac97eda96d Mon Sep 17 00:00:00 2001 From: yassinedorbozgithub Date: Tue, 8 Oct 2024 06:29:18 +0100 Subject: [PATCH 2/4] refactor(frontend): move widget to app-components --- .../src/app-components/widget/ChatWidget.tsx | 46 +++++++++++++++++++ .../widget/ChatWidgetHeader.tsx | 25 ++++++++++ frontend/src/layout/Header.tsx | 40 +--------------- frontend/src/layout/index.tsx | 5 ++ 4 files changed, 77 insertions(+), 39 deletions(-) create mode 100644 frontend/src/app-components/widget/ChatWidget.tsx create mode 100644 frontend/src/app-components/widget/ChatWidgetHeader.tsx diff --git a/frontend/src/app-components/widget/ChatWidget.tsx b/frontend/src/app-components/widget/ChatWidget.tsx new file mode 100644 index 00000000..1628611a --- /dev/null +++ b/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 ( + + ( + + )} + /> + + ); +}; diff --git a/frontend/src/app-components/widget/ChatWidgetHeader.tsx b/frontend/src/app-components/widget/ChatWidgetHeader.tsx new file mode 100644 index 00000000..347a93cd --- /dev/null +++ b/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 ( + + + + {t("title.live_chat_tester")} + + + ); +}; diff --git a/frontend/src/layout/Header.tsx b/frontend/src/layout/Header.tsx index bf58c835..fe4dfff6 100644 --- a/frontend/src/layout/Header.tsx +++ b/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 ( - - - - {t("title.live_chat_tester")} - - - ); -}; - export const Header: FC = ({ 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 = ({ isSideBarOpen, onToggleSidebar }) => { setRandomSeed(getRandom().toString()); }, [user]); - const isVisualEditor = pathname === `/${RouterType.VISUAL_EDITOR}`; - return ( @@ -214,24 +194,6 @@ export const Header: FC = ({ isSideBarOpen, onToggleSidebar }) => { ) : null} ) : null} - - - ( - - )} - /> - ); diff --git a/frontend/src/layout/index.tsx b/frontend/src/layout/index.tsx index d3737016..d18589f9 100644 --- a/frontend/src/layout/index.tsx +++ b/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 = ({ sxContent, ...rest }) => { + const pathname = usePathname(); const [isSideBarOpen, setIsSideBarOpen] = useState(false); return ( @@ -42,6 +46,7 @@ export const Layout: React.FC = ({ {children} + ); }; From 402bdb872c1ba9d046bcdb18d700dab7992195ca Mon Sep 17 00:00:00 2001 From: yassinedorbozgithub Date: Tue, 8 Oct 2024 06:30:48 +0100 Subject: [PATCH 3/4] fix(frontend): remove extra line --- frontend/src/layout/Header.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/layout/Header.tsx b/frontend/src/layout/Header.tsx index fe4dfff6..6f773062 100644 --- a/frontend/src/layout/Header.tsx +++ b/frontend/src/layout/Header.tsx @@ -72,7 +72,6 @@ export type HeaderProps = { isSideBarOpen: boolean; onToggleSidebar: () => void; }; - export const Header: FC = ({ isSideBarOpen, onToggleSidebar }) => { const { apiUrl, ssoEnabled } = useConfig(); const { t } = useTranslate(); From 72d24498ac7165001f8d8e4eca846ef47f1fff7e Mon Sep 17 00:00:00 2001 From: yassinedorbozgithub Date: Tue, 8 Oct 2024 06:33:41 +0100 Subject: [PATCH 4/4] fix(frontend): make the widget stateful --- frontend/src/app-components/widget/ChatWidget.tsx | 4 +++- frontend/src/layout/index.tsx | 4 +--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/app-components/widget/ChatWidget.tsx b/frontend/src/app-components/widget/ChatWidget.tsx index 1628611a..f5c541dd 100644 --- a/frontend/src/app-components/widget/ChatWidget.tsx +++ b/frontend/src/app-components/widget/ChatWidget.tsx @@ -8,6 +8,7 @@ import { Avatar, Box } from "@mui/material"; import UiChatWidget from "hexabot-widget/src/UiChatWidget"; +import { usePathname } from "next/navigation"; import { getAvatarSrc } from "@/components/inbox/helpers/mapMessages"; import { useConfig } from "@/hooks/useConfig"; @@ -16,7 +17,8 @@ import { EntityType, RouterType } from "@/services/types"; import { ChatWidgetHeader } from "./ChatWidgetHeader"; -export const ChatWidget = ({ pathname }: { pathname: string }) => { +export const ChatWidget = () => { + const pathname = usePathname(); const { apiUrl } = useConfig(); const isVisualEditor = pathname === `/${RouterType.VISUAL_EDITOR}`; diff --git a/frontend/src/layout/index.tsx b/frontend/src/layout/index.tsx index d18589f9..2619bc34 100644 --- a/frontend/src/layout/index.tsx +++ b/frontend/src/layout/index.tsx @@ -7,7 +7,6 @@ */ import { BoxProps, Grid } from "@mui/material"; -import { usePathname } from "next/navigation"; import { useState } from "react"; import { ChatWidget } from "@/app-components/widget/ChatWidget"; @@ -29,7 +28,6 @@ export const Layout: React.FC = ({ sxContent, ...rest }) => { - const pathname = usePathname(); const [isSideBarOpen, setIsSideBarOpen] = useState(false); return ( @@ -46,7 +44,7 @@ export const Layout: React.FC = ({ {children} - + ); };