search

OvidijusParsiunas / deep-chat

Fully customizable AI chatbot component for your website
https://deepchat.dev
MIT License
1.43k stars 221 forks source link

How to customize the CSS of the container? (width / height) #39

Closed juienpro closed 10 months ago

juienpro commented 10 months ago

Hi,

Thank you for this great and promising project!

I wanted to know if there is a mean to customize the inner CSS especially to change the width and the height of the chat area.

If I change the parent width and height through the :style property, I obtain this render.

image

Many thanks

OvidijusParsiunas commented 10 months ago

Hi @juienpro. Yes, there is, and you just stumbled on an in issue that I had recently found myself.

The usual way is to use the style property. However, what I have discovered is that in many frameworks and vanillajs style cannot have an object passed into it (using {} syntax) and instead it must be used like an attribute and have syntax like this: style="background-color: yellow". This can be difficult to do in some frameworks and I am going to be adding an alternative chatStyle property that will allow devs to style containers using a json property object e.g. :chatStyle={{backgroundColor: 'yellow'}}. I am currently working on another feature, hence I can't work on it right away, but will try to get to it as soon as I can, hopefully end of this week.

In the meanwhile, if style does not work for you - I advise you to inline your styling using the attribute syntax: style="background-color: #f7f7f7; border-radius: 8px"

OvidijusParsiunas commented 10 months ago

I will update this thread on the progress of the chatStyle property implementation.

If you are experiencing issues with the style="background-color: #f7f7f7; border-radius: 8px" syntax at the moment, please let me know and I can see if I can help with anything immediately.

OvidijusParsiunas commented 10 months ago

I have added the initial code for the chatStyle property. If all goes well I will release it end of Saturday or Sunday. I will keep you updated on the progress.

OvidijusParsiunas commented 10 months ago

Hi, the chatStyle property is now present in Deep Chat version 1.4.3.

I will be closing this issue now, however if you experience any problems you can always comment below and for anything else you can always create a new issue. Thanks again!