From 45898680a3a33cbb7d3ddbac536fe65dbc1508b9 Mon Sep 17 00:00:00 2001 From: abdou6666 Date: Tue, 3 Dec 2024 15:18:21 +0100 Subject: [PATCH 1/7] fix: eslint & prettier configuration --- widget/.eslintrc.json | 28 ++++++++++++---------------- widget/.prettierrc | 4 ++++ widget/package.json | 1 + 3 files changed, 17 insertions(+), 16 deletions(-) create mode 100644 widget/.prettierrc diff --git a/widget/.eslintrc.json b/widget/.eslintrc.json index 7586d22a..8ff7e7ed 100644 --- a/widget/.eslintrc.json +++ b/widget/.eslintrc.json @@ -1,16 +1,14 @@ { - "plugins": [ - "@typescript-eslint/eslint-plugin", - "import", - "react", - "license-header" - ], + "root": true, + "plugins": ["@typescript-eslint", "import", "license-header"], "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", + "plugin:react/recommended", "plugin:react-hooks/recommended" ], "rules": { + "react/react-in-jsx-scope": "off", "@typescript-eslint/no-unused-vars": [ "error", { @@ -24,19 +22,17 @@ "error", { "groups": [ - "builtin", // Built-in imports (come from NodeJS native) go first - "external", // <- External imports - "unknown", // <- unknown - "index", // <- index imports - "internal", // <- Absolute imports - "parent", // <- Relative imports, the sibling and parent types they can be mingled together + "builtin", + "external", + "unknown", + "index", + "internal", + "parent", "sibling" ], "newlines-between": "always", "alphabetize": { - /* sort in ascending order. Options: ["ignore", "asc", "desc"] */ "order": "asc", - /* ignore case. Options: [true, false] */ "caseInsensitive": true } } @@ -50,8 +46,8 @@ "error", { "blankLine": "never", "prev": ["const"], "next": "const" } ], - "react/jsx-curly-brace-presence": "warn", - "react/self-closing-comp": "error", + "react/jsx-curly-brace-presence": ["warn"], + "react/self-closing-comp": ["error"], "license-header/header": [ "error", [ diff --git a/widget/.prettierrc b/widget/.prettierrc new file mode 100644 index 00000000..f3bcd4c9 --- /dev/null +++ b/widget/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": false, + "trailingComma": "all" +} diff --git a/widget/package.json b/widget/package.json index 0e84932c..8fac6ff7 100644 --- a/widget/package.json +++ b/widget/package.json @@ -34,6 +34,7 @@ "@typescript-eslint/parser": "^7.15.0", "@vitejs/plugin-react": "^4.3.1", "eslint": "^8.57.0", + "eslint-plugin-react": "^7.37.2", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", "sass": "^1.77.8", From 7cbd1f69be29a167151647b3fc08be12ca530d34 Mon Sep 17 00:00:00 2001 From: abdou6666 Date: Tue, 3 Dec 2024 15:20:13 +0100 Subject: [PATCH 2/7] fix: eslint issue --- widget/src/components/ChatHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/widget/src/components/ChatHeader.tsx b/widget/src/components/ChatHeader.tsx index 70752c24..c6163984 100644 --- a/widget/src/components/ChatHeader.tsx +++ b/widget/src/components/ChatHeader.tsx @@ -36,7 +36,7 @@ const ChatHeader: FC = ({ children }) => { href="https://hexabot.ai" target="_blank" title="Powered By Hexabot.ai" - className="sc-header--img" + className="sc-header--img" rel="noreferrer" > From fe0c2f14fc06d214e8749b15ba50c5567254c0c7 Mon Sep 17 00:00:00 2001 From: abdou6666 Date: Tue, 3 Dec 2024 15:24:31 +0100 Subject: [PATCH 3/7] fix: run prettier on all files --- widget/README.md | 26 +- widget/public/index.html | 29 +- widget/src/ChatWidget.css | 1 - widget/src/ChatWidget.tsx | 24 +- widget/src/UiChatWidget.tsx | 24 +- widget/src/components/ChatHeader.scss | 6 +- widget/src/components/ChatHeader.tsx | 17 +- widget/src/components/ChatWindow.scss | 3 +- widget/src/components/ChatWindow.tsx | 34 +- widget/src/components/ConnectionLost.scss | 2 +- widget/src/components/ConnectionLost.tsx | 16 +- widget/src/components/EmojiPicker.scss | 7 +- widget/src/components/EmojiPicker.tsx | 14 +- widget/src/components/Launcher.tsx | 20 +- widget/src/components/MenuItem.tsx | 20 +- widget/src/components/Message.scss | 4 +- widget/src/components/Message.tsx | 52 +- widget/src/components/MessageStatus.tsx | 14 +- widget/src/components/Messages.tsx | 4 +- widget/src/components/Suggestions.tsx | 14 +- widget/src/components/UserInput.scss | 18 +- widget/src/components/UserInput.tsx | 52 +- widget/src/components/UserSubscription.tsx | 46 +- widget/src/components/Webview.tsx | 16 +- .../src/components/buttons/EmojiButton.scss | 49 +- widget/src/components/buttons/EmojiButton.tsx | 8 +- widget/src/components/buttons/FileButton.scss | 4 +- widget/src/components/buttons/FileButton.tsx | 10 +- .../components/buttons/LocationButton.scss | 2 +- .../src/components/buttons/LocationButton.tsx | 18 +- widget/src/components/buttons/MenuButton.tsx | 28 +- widget/src/components/buttons/SendButton.tsx | 6 +- widget/src/components/icons/BackIcon.tsx | 18 +- widget/src/components/icons/ChatIcon.tsx | 8 +- widget/src/components/icons/CheckIcon.tsx | 14 +- widget/src/components/icons/CloseIcon.tsx | 4 +- .../src/components/icons/ConnectionIcon.tsx | 12 +- widget/src/components/icons/EmojiIcon.tsx | 10 +- widget/src/components/icons/FileIcon.tsx | 4 +- widget/src/components/icons/FileInputIcon.tsx | 12 +- widget/src/components/icons/LoadingIcon.tsx | 4 +- widget/src/components/icons/LocationIcon.tsx | 12 +- widget/src/components/icons/MenuIcon.tsx | 14 +- widget/src/components/icons/OpenIcon.tsx | 8 +- widget/src/components/icons/SendIcon.tsx | 4 +- .../components/messages/ButtonMessage.scss | 4 +- .../src/components/messages/ButtonMessage.tsx | 24 +- .../components/messages/CarouselMessage.scss | 4 +- .../components/messages/CarouselMessage.tsx | 2 +- .../src/components/messages/FileMessage.scss | 4 +- .../src/components/messages/FileMessage.tsx | 46 +- .../messages/GeolocationMessage.scss | 4 +- .../messages/GeolocationMessage.tsx | 16 +- .../src/components/messages/ListMessage.scss | 8 +- .../src/components/messages/ListMessage.tsx | 34 +- .../src/components/messages/TextMessage.tsx | 22 +- .../components/messages/TypingMessage.scss | 2 +- .../src/components/messages/TypingMessage.tsx | 6 +- widget/src/constants/colors.ts | 182 +-- widget/src/constants/defaultConfig.ts | 6 +- widget/src/constants/emojiData.ts | 1266 ++++++++--------- widget/src/hooks/useGetQuery.tsx | 2 +- widget/src/hooks/useSocketGetQuery.tsx | 4 +- widget/src/hooks/useTranslation.tsx | 8 +- widget/src/index.css | 1 - widget/src/main.tsx | 16 +- widget/src/providers/ChatProvider.tsx | 64 +- widget/src/providers/ColorProvider.tsx | 12 +- widget/src/providers/ConfigProvider.tsx | 6 +- widget/src/providers/CookieProvider.tsx | 8 +- widget/src/providers/SettingsProvider.tsx | 34 +- widget/src/providers/SocketProvider.tsx | 12 +- widget/src/providers/TranslationProvider.tsx | 10 +- widget/src/providers/WidgetProvider.tsx | 12 +- widget/src/translations/index.ts | 4 +- widget/src/types/chat-io-messages.types.ts | 14 +- widget/src/types/colors.types.ts | 10 +- widget/src/types/io-message.types.ts | 2 +- widget/src/types/menu.type.ts | 6 +- widget/src/types/message.types.ts | 56 +- widget/src/types/state.types.ts | 8 +- widget/src/utils/SocketIoClient.ts | 24 +- widget/src/utils/attachment.ts | 8 +- widget/src/utils/sessionStorage.ts | 4 +- widget/src/utils/text.ts | 4 +- 85 files changed, 1343 insertions(+), 1328 deletions(-) diff --git a/widget/README.md b/widget/README.md index a25250ae..ed102975 100644 --- a/widget/README.md +++ b/widget/README.md @@ -1,15 +1,18 @@ # Hexabot Live Chat Widget + The [Hexabot](https://hexabot.ai/) Live Chat Widget is a React-based embeddable widget that allows users to integrate real-time chat functionality into their websites. It connects to the Hexabot API and facilitates seamless interaction between end-users and chatbots across multiple channels. [Hexabot](https://hexabot.ai/) is an open-source chatbot / agent solution that allows users to create and manage AI-powered, multi-channel, and multilingual chatbots with ease. If you would like to learn more, please visit the [official github repo](https://github.com/Hexastack/Hexabot/). ## Key Features + - **Real-Time Chat:** Engage in real-time conversations with users directly through your website. - **Customizable:** Easily customize the widget's appearance and behavior to fit your brand and website. - **Multi-Channel Support:** Integrates with multiple messaging platforms through the Hexabot API. - **Embeddable:** Simple to embed and integrate into any web page with just a few lines of code. ## Directory Structure + The Hexabot Live Chat Widget is organized into the following directory structure, under `src` we have: - **src/assets:** Static assets like icons, fonts, and images used in the widget. @@ -23,30 +26,33 @@ The Hexabot Live Chat Widget is organized into the following directory structure - **src/types:** Defines the typescript interfaces, types, and enums used. - **src/utils:** Utility functions and helpers used throughout the widget, such as formatting, validations, or data transformations. - - **/public:** Contains static files that are publicly accessible. This includes the main HTML template where the widget is embedded for local development. ## Run the Live Chat Widget ### Dev Mode + To run the widget in development mode, execute the following command at the project root level: + ```bash npm run dev:widget ``` The live chat widget will be accessible at http://localhost:5173. - ### Build for Production + To build the widget for production, execute the following command at the widget folder level: + ```bash npm run build ``` + This will generate a production-ready build in the dist folder. ## Embed Chat Widget -Once the widget is built, you can easily embed it into any webpage. Here's an example of how to add it to your website: +Once the widget is built, you can easily embed it into any webpage. Here's an example of how to add it to your website: ```js @@ -68,9 +74,11 @@ Once the widget is built, you can easily embed it into any webpage. Here's an ex ); ``` + Replace the values in apiUrl and token with your configuration details. -To prevent the website css from conflicting with the chat widget css, we can leverage the shadow dom: +To prevent the website css from conflicting with the chat widget css, we can leverage the shadow dom: + ```js @@ -84,7 +92,7 @@ To prevent the website css from conflicting with the chat widget css, we can lev document .getElementById('hb-chat-widget') .attachShadow({ mode: 'open' }) - .append( + .append( shadowContainer, createElement("link", { rel: "stylesheet", @@ -104,7 +112,7 @@ To prevent the website css from conflicting with the chat widget css, we can lev ``` -If you would like to use the official widget and benefit from updates automatically, you can consider using the cdn url: +If you would like to use the official widget and benefit from updates automatically, you can consider using the cdn url: `https://cdn.jsdelivr.net/npm/hexabot-chat-widget@2.0.4/dist/` or lastest from major version: @@ -113,20 +121,24 @@ or lastest from major version: JsDelivr uses the package published in the NPM registry : https://www.npmjs.com/package/hexabot-chat-widget ## Examples + As a proof of concept we developed a Wordpress plugin to embed the chat widget in a Wordpress website : [https://github.com/hexastack/hexabot-wordpress-live-chat-widget](https://github.com/hexastack/hexabot-wordpress-live-chat-widget) ## Customization + You can customize the look and feel of the chat widget by modifying the widget’s scss styles or behavior. The widget allows you to: - Change colors and fonts to match your website's branding. - Configure user settings like language and chatbot response preferences. -## Contributing +## Contributing + We welcome contributions from the community! Whether you want to report a bug, suggest new features, or submit a pull request, your input is valuable to us. Feel free to join us on [Discord](https://discord.gg/rNb9t2MFkG) ## License + This software is 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. diff --git a/widget/public/index.html b/widget/public/index.html index b4e3f015..de6d3768 100644 --- a/widget/public/index.html +++ b/widget/public/index.html @@ -1,4 +1,4 @@ - + @@ -19,23 +19,24 @@