Pull Request #123 close bug.
pespinozadi opened this issue · 5 comments
Hi. I used the close button to close all customChat container, and set icon to initial. The problem is, that PR #123 remove this function.
I propose modify customChatWidget/src/constants/index.js#L68 file, to add a variable to handle this situation like:
export const END_ACTIONS = {
NOTHING: "NOTHING",
BACK_TO_FORM: "BACK",
CLOSE_CHAT: "CLOSE",
};
export const chatWidgetDefaults = {
NAME: "Customer",
USER_NAME: "Customer",
CUSTOMER_NAME: "Customer",
ENABLE_ATTACHMENTS: false,
PRIMARY_COLOR: "#3F5773",
DESCRIPTION: "Welcome to Amazon chat",
REFER_INDICATOR: "refer",
ON_DISCONNECT: END_ACTIONS.BACK_TO_FORM,
ON_ENDED: END_ACTIONS.BACK_TO_FORM
};
Inside customChatWidget/src/providers/AppConfigProvider.js#L15-L43 file, modify to this:
const initiationIcon = config.initiationIcon ? config.initiationIcon : chatInitiationIcon.ICON;
const region = config.region ? config.region : '';
const name = config.name ? config.name : chatWidgetDefaults.NAME;
const username = config.username? config.username : chatWidgetDefaults.USERNAME;
const apiGateway = config.apiGateway ? config.apiGateway : '';
const contactFlowId = config.contactFlowId ? config.contactFlowId : '';
const instanceId = config.instanceId ? config.instanceId : '';
const contactAttr = config.contactAttr ? config.contactAttr : {};
const enableAttachments = config.attachments ? config.attachments : chatWidgetDefaults.ENABLE_ATTACHMENTS;
const preChatForm = config.preChatForm ? config.preChatForm : {};
const primaryColor = config.primaryColor ? config.primaryColor : chatWidgetDefaults.PRIMARY_COLOR;
const description = config.description ? config.description : chatWidgetDefaults.DESCRIPTION;
const actions = {
onDisconnect: config.actions.onDisconnect ? config.actions.onDisconnect : chatWidgetDefaults.ON_DISCONNECT,
onEnded: config.actions.onEnded ? config.actions.onEnded : chatWidgetDefaults.ON_ENDED,
}
const providerValue = {
initiationIcon,
region,
name,
username,
apiGateway,
contactFlowId,
instanceId,
contactAttr,
enableAttachments,
preChatForm,
primaryColor,
description,
actions
};
In customChatWidget/src/components/ChatIcon/index.js file, we can modify now this:
Inside Line 7 modify to:
import { device, closeChatSVGPath, chatSVGPath, loggerNames, END_ACTIONS } from '../../constants';
Inside Line 19 modify to:
const { primaryColor, actions } = useAppConfig();
Inside Line 20 modify to:
const { chatWithoutForm, forceUnmountChatWidget, setForceUnmountChatWidget, setWidgetIsOpen, widgetIsOpen, currentState } = props;
Inside Line 55 add:
//This useEffect will run only after currentState is changed to widget.
useEffect(() => {
if (currentState === chatWithFormStates.CHAT_WIDGET) {
if(actions.onDisconnect === END_ACTIONS.CLOSE_CHAT) {
window.connect.ChatEvents &&
window.connect.ChatEvents.onAgentEndChat(() => {
log("Chat Ended hence toggling back to initial icon(chat)");
toggleToChatIcon();
if (chatWithoutForm) setForceUnmountChatWidget(true);
});
} else if(actions.onEnded === END_ACTIONS.CLOSE_CHAT) {
window.connect.ChatEvents &&
window.connect.ChatEvents.onChatEnded(() => {
log("Chat Disconnected hence toggling back to initial icon(chat)");
toggleToChatIcon();
if (chatWithoutForm) setForceUnmountChatWidget(true);
});
}
onAgentEndChat(callback)
}
}, [currentState]);
And possibly add the equivalent in ChatButton component.
To work obviusly modify view ChatWithForm Line 23-36 to:
{
initiationIcon.toLowerCase() === chatInitiationIcon.BUTTON ?
<ChatButton
widgetIsOpen={widgetIsOpen}
setWidgetIsOpen={setWidgetIsOpen}
currentState={currentState}
/>
: <ChatIcon
widgetIsOpen={widgetIsOpen}
setWidgetIsOpen={setWidgetIsOpen}
currentState={currentState}
/>
}
Apply the last modification to ChatWithoutForm Line 25-41 too:
{
initiationIcon.toLowerCase() === chatInitiationIcon.BUTTON ?
<ChatButton
widgetIsOpen={widgetIsOpen}
setWidgetIsOpen={setWidgetIsOpen}
currentState={currentState}
forceUnmountChatWidget={forceUnmountChatWidget}
chatWithoutForm={true}
setForceUnmountChatWidget={setForceUnmountChatWidget}
/>
: <ChatIcon
widgetIsOpen={widgetIsOpen}
setWidgetIsOpen={setWidgetIsOpen}
currentState={currentState}
forceUnmountChatWidget={forceUnmountChatWidget}
chatWithoutForm={true}
setForceUnmountChatWidget={setForceUnmountChatWidget}
/>
}
Now, modify ChatWidget:
In Line 7 modify to:
import { device, chatWithFormStates, chatWidgetDefaults, chatParties, loggerNames, END_ACTIONS } from '../../constants';
In Line 23 modify to:
const { primaryColor, description, region, apiGateway, contactFlowId, instanceId, enableAttachments, actions } = useAppConfig();
In Line 49-54 modify to:
chatSession.onChatDisconnected(function (data) {
info("Chat has been disconnected");
trace(data);
if(actions.onDisconnect === END_ACTIONS.NOTHING) return;
if (Object.keys(dataFromInputForm).length !== 0) setCurrentState(chatWithFormStates.FORM);
setWidgetIsOpen((prev) => !prev);
});
chatSession.onChatClose(function (data) {
info("Chat has been closed");
trace(data);
if(actions.onDisconnect === END_ACTIONS.NOTHING) return;
if (Object.keys(dataFromInputForm).length !== 0)
setCurrentState(chatWithFormStates.FORM);
setWidgetIsOpen((prev) => !prev);
});
Now, when is called, like in index.html, we can add attributes after Line 45 like:
actions: {
onDisconnect: "BACK",
onEnded: "BACK",
},
Is like an idea, I don't have time to test it. I implemented this logic, but with static action like do nothing on disconnect (to allow client to take screenshots o view the conversation), and close on ended (clicked button).
I think that this need's more logic. Possibly, need's Amazon Connect Chat Interface to be modified, because ChatEvents.js is not currently working to detect on ended (all closes), and on disconnected (agent or chatbot disconnect). The split is not fully logic, possibly can add an event when the widget call to close (customChatWidget actually does from onChatDisconnected event). This is an example because I use the way that on agent or chatbot forces disconnect, the chat doesn't close or change to the form, to let client view messages and take screenshots. To do this, I have forked customChatWidget from this repository and amazon-connect-chat-interface.
Hi @pespinozadi,
We are not able to add/maintain every feature, but I have raised small PR to address the close/end events: #145.
Please let us know if this resolves your issue, or there are further questions.
After this commit to amazon-connect-chat-interface, you can use window.ChatEvents on master branch: amazon-connect/amazon-connect-chat-interface@9cc7179
I have pushed a branch if you want to continue testing this code provided: master...spenlep/chatform-update.
Looks great, the small PR addressed.
I tested the branch, and looks great, but have some problems:
Inside customChatWidget/src/containers/ChatWidget/index.js#L49-66, it needs to be:
chatSession.onChatDisconnected(function (data) {
info("Chat has been disconnected");
trace(data);
if (actions.onDisconnect === END_ACTIONS.NOTHING) return;
if (Object.keys(dataFromInputForm).length !== 0)
setCurrentState(chatWithFormStates.FORM);
// Only set widget is open if action on disconnect its close chat.
if (actions.onDisconnect === END_ACTIONS.CLOSE_CHAT)
setWidgetIsOpen((prev) => !prev);
});
chatSession.onChatClose(function (data) {
info("Chat has been closed");
trace(data);
if (actions.onEnded === END_ACTIONS.NOTHING) return;
if (Object.keys(dataFromInputForm).length !== 0)
setCurrentState(chatWithFormStates.FORM);
// Only set widget is open if action on ended its close chat.
if (actions.onEnded === END_ACTIONS.CLOSE_CHAT)
setWidgetIsOpen((prev) => !prev);
});
Inside customChatWidget/src/components/ChatIcon/index.js#L57-L85, it needs to be:
useEffect(() => {
if (currentState === chatWithFormStates.CHAT_WIDGET) {
if (actions.onDisconnect === END_ACTIONS.CLOSE_CHAT) {
window.connect.ChatEvents &&
window.connect.ChatEvents.onAgentEndChat(() => {
log("Chat Disconnected hence toggling back to initial icon(chat)");
if (chatWithoutForm) {
setForceUnmountChatWidget(true);
return;
}
toggleToChatIcon();
});
}
if (actions.onEnded === END_ACTIONS.CLOSE_CHAT) {
window.connect.ChatEvents &&
window.connect.ChatEvents.onChatEnded(() => {
log("Chat Ended hence toggling back to initial icon(chat)");
if (chatWithoutForm) {
setForceUnmountChatWidget(true);
return;
}
toggleToChatIcon();
});
}
}
}, [currentState]);
Now, it works great.
If you put in index.html, inside AmazonCustomChatWidget init object this:
description: 'Welcome to Amazon Connect Chat',
actions: {
onDisconnect: "NOTHING",
onEnded: "CLOSE",
}
Now works as I tell you, to do nothing when disconnects (chatbot menu disconnect in flow or disconnect by agent talking chat), and to close when ended. It worked with "BACK" too.
And in customChatWidget/src/providers/AppConfigProvider.js#L29-L32, it can be:
const actions = {
onDisconnect: config.actions?.onDisconnect ?? chatWidgetDefaults.ON_DISCONNECT,
onEnded: config.actions?.onEnded ?? chatWidgetDefaults.ON_ENDED,
};
Ternary operator (CONDITION ? IF_TRUE : IF_FALSE) is used in conditions a little more complex, not to only detect null or undefined of single variable. To detect this, you can use Null coalescing operator (VARIABLE ?? VALUE_IF_NULL_OR_UNDEFINED)
Awesome, we can resolve issue once PR is merged then if that fixed icon state.
We will not be adding this feature to master branch as mentioned, but feel free to fork the code 👍
Thanks,
Spencer