diff --git a/docs/css-customization.md b/docs/css-customization.md index ace743c7..11e354d1 100644 --- a/docs/css-customization.md +++ b/docs/css-customization.md @@ -34,6 +34,7 @@ There are several classes that you need to take in consideration if you want to - _webchat-input-button-add-attachments_ - _webchat-input-drag-and-drop-file-text_ - _webchat-input-button-send_ +- _webchat-input-get-started-button_ - _webchat-toggle-button_ - _webchat-unread-message-preview_ - _webchat-unread-message-badge_ @@ -387,6 +388,17 @@ The avatars can be repositioned to appear at the top edge of a message rather th } ``` +- _webchat-input-get-started-button_ + The button to initiate the first interaction in the Webchat. You can customize its appearance, size, and background. + +```CSS +[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input-get-started-button { + + border-radius: 10px; + background-color: rgb(0, 123, 255); +} +``` + - _webchat-input-button-add-attachments_ The button to open the file attachment section, you can not change the icon but you can customize the position, size and background. diff --git a/src/plugins/get-started-button-input/GetStartedInput.tsx b/src/plugins/get-started-button-input/GetStartedInput.tsx index a8b3185f..822fc5e7 100644 --- a/src/plugins/get-started-button-input/GetStartedInput.tsx +++ b/src/plugins/get-started-button-input/GetStartedInput.tsx @@ -7,11 +7,6 @@ import styled from "@emotion/styled"; const GetStartedButton = styled(Button)(({ theme }) => ({ marginBottom: theme.unitSize * 2, flexGrow: 1, - "&:focus": { - outline: "none", - boxShadow: `0 0 3px 1px ${theme.primaryWeakColor}`, - backgroundColor: theme.primaryStrongColor, - }, })); const GetStartedInput = ({ onSendMessage, config }: InputComponentProps) => ( @@ -26,6 +21,7 @@ const GetStartedInput = ({ onSendMessage, config }: InputComponentProps) => ( } color="primary" id="webchatGetStartedButton" + className="webchat-input-get-started-button" > {config.settings.startBehavior.getStartedButtonText} diff --git a/src/plugins/get-started-button-input/index.ts b/src/plugins/get-started-button-input/index.ts index 41bf3513..9c9d927c 100644 --- a/src/plugins/get-started-button-input/index.ts +++ b/src/plugins/get-started-button-input/index.ts @@ -1,6 +1,7 @@ import GetStartedInput from "./GetStartedInput"; import { InputRule, InputPlugin } from "../../common/interfaces/input-plugin"; import { registerInputPlugin } from "../helper"; +import getMessagesListWithoutControlCommands from "../../webchat-ui/utils/filter-out-control-commands"; const rule: InputRule = ({ config: { @@ -16,7 +17,9 @@ const rule: InputRule = ({ }, messages, }) => - (messages.length === 0 || (messages.length === 1 && messages[0].source === "engagement")) && + (messages.length === 0 || + (messages.length === 1 && messages[0].source === "engagement") || + getMessagesListWithoutControlCommands(messages)?.length === 0) && startBehavior === "button" && !!getStartedPayload && (!!getStartedButtonText || diff --git a/src/webchat/store/autoinject/autoinject-middleware.ts b/src/webchat/store/autoinject/autoinject-middleware.ts index 6b0f9bc7..45ec7f2a 100644 --- a/src/webchat/store/autoinject/autoinject-middleware.ts +++ b/src/webchat/store/autoinject/autoinject-middleware.ts @@ -58,8 +58,13 @@ export const createAutoInjectMiddleware = } // Don't trigger the auto inject message when the history is not empty - // except if explicitly set via enableAutoInjectWithHistory + // except if explicitly set via enableInjectionWithoutEmptyHistory if (!config.settings.widgetSettings.enableInjectionWithoutEmptyHistory) { + // If there are stored messages waiting to be sent, don't send the auto-inject message + if (state.ui.storedMessage) { + break; + } + // Exclude engagement messages from state.messages const messagesExcludingEngagementMessages = state.messages?.filter( message => message.source !== "engagement", diff --git a/src/webchat/store/connection/connection-middleware.ts b/src/webchat/store/connection/connection-middleware.ts index 99b85e60..05bb8cf4 100644 --- a/src/webchat/store/connection/connection-middleware.ts +++ b/src/webchat/store/connection/connection-middleware.ts @@ -56,7 +56,6 @@ export const createConnectionMiddleware = // set options store.dispatch(setConnecting(false)); store.dispatch(setReconnectionLimit(false)); - store.dispatch(setOptions(client.socketOptions)); if (storedMessage) { store.dispatch( @@ -67,6 +66,7 @@ export const createConnectionMiddleware = ); store.dispatch(setStoredMessage(null)); } + store.dispatch(setOptions(client.socketOptions)); }) .catch(() => { store.dispatch(setConnecting(false));