Full UI customisation

[didacus]

Hi Fredrik,

Thank you for the awesome package. This is more a suggestion or perhaps a feature request 😂 rather than an issue. Any plans to make the UI fully customisable through customStyles a feature? As a UX&D, coding is not my forte; however, your package allows me to translate my ideas into something tangible. It would be great to have this feature in the future!

Thank you again for the package. D

[FredrikOseberg]

Hey! Do you know CSS? You can just grab the elements classnames from the inspector and customize the UI that way. Each element should have a corresponding css class you can use :)

[didacus]

Yes, I know a bit of coding but I am no expert. Oh, I see. I can overwrite the current styles. I was trying to create extra styles directly on node_modules but those were not being applied to the current App.js

Thank you for the heads up! I will try that now. 👍

[didacus]

Good morning @FredrikOseberg,

I followed your advice and I managed to change the styles and sizes in the UI; however, When I build it, the style comes back. Why is this happening?

Comparison

Thank you in advance.

[FredrikOseberg]

Good morning @FredrikOseberg,

I followed your advice and I managed to change the styles and sizes in the UI; however, When I build it, the style comes back. Why is this happening?

Comparison

Thank you in advance.

I suspect it's due to the way webpack injects the styles. I'm going to release a new version in the future where I extract a stylesheet, for now a dirty hack would be to mark your styles with !important.

[didacus]

@FredrikOseberg, that would be super cool. Like I mentioned before, I am not a Front-end, but the skill is something I want to develop. If you need any help with this, I would be willing to help under guidance. 👍

[FredrikOseberg]

@FredrikOseberg, that would be super cool. Like I mentioned before, I am not a Front-end, but the skill is something I want to develop. If you need any help with this, I would be willing to help under guidance. 👍

Thanks! I wouldn't mind some help if you have the time. I think it would be as easy as implementing this plugin into the webpack.config.js file and making sure it produces an css file output: https://webpack.js.org/plugins/mini-css-extract-plugin/

Is this something you are able to handle?

Fredrik

[didacus]

@FredrikOseberg I will try. Two things can happen, fail or success. 😂 I will give it a go and let you know. Any problem I will come back with a question. 👍

[jkearney126]

@FredrikOseberg Any update on this new build config? Having trouble overriding styles in production builds. Happy to try updating webpack as well if not in-progress.

[FredrikOseberg]

@FredrikOseberg Any update on this new build config? Having trouble overriding styles in production builds. Happy to try updating webpack as well if not in-progress.

Yeah. I've been working on replacing the style-loader and actually extract a CSS sheet. I've finished the feature, but I wanted to include more changes before releasing version 2.0.0.

I've built an alpha version for you that you can use. If you install this version:

// package.json
react-chatbot-kit: "2.0.0-alpha.0"

This should allow you to test this new functionality. Now you need to add the following in the component where you are using the chatbot:

import Chatbot from 'react-chatbot-kit'
import 'react-chatbot-kit/build/main.css'

That should allow you to properly override the styles by ordering the imports. Bear in mind this is freshly released, and not properly tested. If try it out, I'd be grateful if you report back any bugs.

[jkearney126]

Awesome. I'll give this a try and open issues for anything I find. Much appreciated!

[jkearney126]

@FredrikOseberg This looks good to me. So far I can't find any issues and solved my build problems. I'd say issue resolved.