-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
"Recomposing the Whole UI" - how to change just some of the components #3490
Comments
The sample is located in the link you provided, 06.recomposing-ui/d.plain-ui#customizing-web-chat-with-a-plain-html-ui. To access the sample, clone the repo and then navigate to this folder to run. Regarding Question 1, functionality already exists that allows you to handle many use cases without having to make custom changes "under the hood" of Web Chat, including customizing the timestamp. The full list of samples can be found here. For changes to the timestamp, refer to sample 05.custom-components/a.timestamp-grouping for a demonstration and instruction. As you can see in the image below, in a dev instance of Web Chat, I added the message reaction buttons (from a different sample) to Web Chat. However, I moved the reaction buttons (normally placed beside the message) to exist in front of the timestamp. I also appended the watermark so I can easily identify which message is which when debugging activities. As for moving the suggested actions buttons, unfortunately, that is presently not possible as suggested actions are tied to the send box and not to the transcript window. There is interest in decoupling suggested actions from the send box and if that interests you, then you should express your support for the idea in the issue here. That being said, suggested actions are meant to be temporal by providing users possible routes or actions they could take. If you are wanting to provide customers options in an activity, then it is recommended you use a choice prompt (or similar). Regarding Question 2, the typical process would be to fork the repo (with the fork representing the customized code you have implemented). As updates are made to Web Chat, you would pull those changes into a separate test branch to merge incoming updates into your code. After testing is complete and code has been successfully merged into yours, then you would merge the test branch into the main branch of your forked repo. |
Thanks for the detailed Answer. We managed to position the reaction - buttons like in your example. It's hacky because we used negative margins to solve the problem. Additionaly Carousel - Attachments needs special treatment because the height is rendered different from the other messages. But it worked - Thanks for the hint.
I saw this example. But I disagree with the statement that we can "just replace a handful of components as needed". For me this means that I can use the UI and replace the logic only for one single react-element. But if i want to do this I need to fork the complete repository! Thats not quite what the sentence promises.
Using business layers and some UI components: opting into our UI but replacing just a handful of components as needed (Its necessary to fork the repository and pull our updates into your custom - chatbot). This would be a more detailed statement. |
Honestly, it is going to depend entirely on what you want to customize on the business logic layer as to whether or not forking the repo will be necessary. You will only know the answer to that after closer inspection of the code. It is possible to affect some business logic via middleware and custom direct line implementations. But, it will just depend on your needs. As for updating the text per your suggestion, you are welcome to open a PR against the repo with your recommendation. |
Well, I have the informations I need. Thanks for the feedback!
to replace some of the UI - components I have to fork the repository. So in this context it is 100% save that we have to maintain our version of the webchat. The sentence states:
|
In this documentation there is the following sentence:
I see no example specifically for this purpose.
The examples that were given here only explain how to create a complete new chatbot or insert it into a minimizable window.
Question 1:
What do I do when I want to implement one of the following examples but use all the functionality that the bot has right now and will have after updates in the future (Without the need of implementing new features of the webchat in my overwritten components):
Right now I feel like I have to copy the react - components of the webchat into my src - folder and overwrite them in my project. The problem with this is that some of the imported js - files are not even exposed to the index - file that is referenced in your package.json.
Examples:
This means that I am not allowed to use the specific files and I will have the fun task to check all webchat - updates if there have been made changes to the files that I will have in my own project - repository when i overwrite it.
Question 2:
Is it true, that I have to copy all the components of the webchat into my Repository when I want to make the changes that I have referenced in Question1?
The text was updated successfully, but these errors were encountered: