Skip to main content

Styles

Properties related to messages.

style | chatStyle​

Styling for the chat's container element.
It can either be defined via the style attribute or a chatStyle property that accepts an object. Both of these have the SAME outcome and are to be chosen by developer preference or framework compatibility.

Example​

<deep-chat style="background-color: #f7f7f7; border-radius: 8px"></deep-chat>

<deep-chat chatStyle='{"backgroundColor": "#f7f7f7", "borderRadius": "8px"}'></deep-chat>

attachmentContainerStyle​

Object containing CSS styling properties for the element containing files attachments ready to be sent with the message.

Example​

<deep-chat attachmentContainerStyle='{"backgroundColor": "#b2e1ff57"}'></deep-chat>

dropupStyles​

Configuration for the dropup button and its menu element styles.

Example​

<deep-chat
  dropupStyles='{
    "button": {
      "styles": {
        "container": {
          "default": {"backgroundColor": "#eff8ff"},
          "hover": {"backgroundColor": "#e4f3ff"},
          "click": {"backgroundColor": "#d7edff"}
        }
      }
    },
    "menu": {
      "container": {
        "boxShadow": "#e2e2e2 0px 1px 3px 2px"
      },
      "item": {
        "hover": {
          "backgroundColor": "#e1f2ff"
        },
        "click": {
          "backgroundColor": "#cfeaff"
        }
      },
      "iconContainer": {
        "width": "1.8em"
      },
      "text": {
        "fontSize": "1.05em"
      }
    }
  }'
></deep-chat>

inputAreaStyle​

Styling for the chat view's bottom area dedicated for text input and file buttons.

Example​

<deep-chat inputAreaStyle='{"backgroundColor": "#ebf5ff"}'></deep-chat>

textInput​

Custom details for the chat's text input.
styles object defines the styling for the text element and its box container. The focus property is used to set the container style when it is focused.
placeholder object's text property is the initial text that is displayed on the input before the user makes any actions and style can be used to customize it.
characterLimit is the maximum number of charactes that can be inserted into the text input.
disabled is used to prevent the user from inserting text. This also comes with its own custom styling.

Generic example​

<deep-chat
  textInput='{
    "styles": {
      "text": {"color": "black"},
      "container": {"maxHeight": "50px", "backgroundColor": "#f5f9ff"},
      "focus": {"border": "2px solid #a2a2ff"}
    },
    "placeholder": {"text": "Insert text here...", "style": {"color": "#4459a4"}},
    "characterLimit": 10
  }'
></deep-chat>

Disabled example​

<deep-chat
  textInput='{
    "disabled": true,
    "placeholder": {
      "text": "Text not allowed..."
  }}'
></deep-chat>

submitButtonStyles​

Custom styling for the submit button.
submit state is displayed when the user's input is valid and can be sent.
loading is used when waiting for a message response from the target server.
stop is used when a message response is being streamed.
disabled is used when the user's input cannot be sent (see validateInput) or the websocket connection is not live. You can also set this state manually by calling the disableSubmitButton method.
alwaysEnabled prevents the disabled button state from being used.
position sets the button position within the input area.

info

The loading, stop and disabled styles will automatically inherit your submit style default state values.

info

When displayLoadingBubble is set to false and the loading property's content string for text or svg is not set, the submit button will have a loading animation.

SVG Example​

<deep-chat
  submitButtonStyles='{
    "submit": {
      "container": {
        "default": {"backgroundColor": "#e3f0ff"},
        "hover": {"backgroundColor": "#c6e1ff"},
        "click": {"backgroundColor": "#acd3ff"}
      },
      "svg": {
        "styles": {
          "default": {
            "filter":
              "brightness(0) saturate(100%) invert(58%) sepia(53%) saturate(6828%) hue-rotate(214deg) brightness(100%) contrast(100%)"
          }
        }
      }
    },
    "alwaysEnabled": true,
    "position": "outside-right"
  }'
></deep-chat>

Text Example​

It is important to note that the submit state's default properties are automatically copied into the other states, however hover and submit need to be defined.

<deep-chat
  submitButtonStyles='{
    "submit": {
      "container": {
        "default": {"backgroundColor": "#e3f0ff", "width": "60px"},
        "hover": {"backgroundColor": "#c6e1ff"},
        "click": {"backgroundColor": "#acd3ff"}
      },
      "text": {
        "content": "Submit",
        "styles": {"default": {"color": "#6c6c6c"}, "hover": {"color": "#2c2c2c"}}
      }
    },
    "loading": {"text": {"content": "Loading"}},
    "stop": {
      "container": {
        "hover": {"backgroundColor": "#c6e1ff"},
        "click": {"backgroundColor": "#acd3ff"}
      },
      "text": {"content": "Stop"}
    },
    "alwaysEnabled": true
  }'
></deep-chat>

Disabled example​

<deep-chat
  submitButtonStyles='{
    "disabled": {
      "container": {"default": {"cursor": "auto"}},
      "svg": {
        "content": "<?xml version=\"1.0\" encoding=\"utf-8\"?> <svg viewBox=\"0 0 25 25\" xmlns=\"http://www.w3.org/2000/svg\"> <path fill-rule=\"evenodd\" d=\"M5.781 4.414a7 7 0 019.62 10.039l-9.62-10.04zm-1.408 1.42a7 7 0 009.549 9.964L4.373 5.836zM10 1a9 9 0 100 18 9 9 0 000-18z\"/> </svg>",
        "styles": {"default": {"paddingTop": "2.4px", "paddingLeft": "2px"}}
      }
    }
  }'
></deep-chat>

auxiliaryStyle​

  • Type: string

This string is primarily used to configure Webkit CSS which cannot be added through component's style properties. A great example of this is the ::-webkit-scrollbar pseudo element which affects the style of the component's scrollbar.

Example​

<deep-chat
  auxiliaryStyle="
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #54a7ff;
      border-radius: 5px;
    }"
></deep-chat>
danger

Webkit CSS is not standardised across all browsers, make sure to check the browser support for the property you are using.

Types​

Types shared by styles properties:

CustomStyle​

Object containing properties defined in the CSSStyleDeclaration specification as optionals. A TypeScript example can be found in this link.

StatefulStyles​

Object defining styling properties for different mouse states on the element.

Button​

Styling for a button inside the chat view.
container is used to style the base element of the button for its various mouse states.
svg is used to style an svg icon (the default inner element) inside the button.
text is used to create and style a text icon inside the button.

Example​

<deep-chat
  images='{
    "button": {
      "styles": {
        "container": {
          "default": {"backgroundColor": "#e6f0ff"},
          "hover": {"backgroundColor": "#dbe9ff"},
          "click": {"backgroundColor": "#c4dbff"}
        }
      },
      "position": "outside-left"
    }
  }'
></deep-chat>

ButtonStyles​

Styling for a button inside the chat view.
container is used to style the base element of the button for its various mouse states.
svg is used to style an svg icon (the default inner element) inside the button.
text is used to create and style a text icon inside the button.

Example​

<deep-chat
  submitButtonStyles='{
    "submit": {
      "container": {
        "default": {"backgroundColor": "#ddedff", "width": "50px"},
        "hover": {"backgroundColor": "#c6e1ff"},
        "click": {"backgroundColor": "#acd3ff"}
      },
      "text": {
        "content": "Send",
        "styles": {"default": {"color": "#6c6c6c"}, "hover": {"color": "#2c2c2c"}}
      }
    }
  }'
  images='{
    "button": {
      "styles": {
        "container": {
          "default": {"backgroundColor": "unset", "width": "1.4em", "bottom": "0.75em"}
        },
        "svg": {
          "content": "<?xml version=\"1.0\" ?> <svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"> <g id=\"layer1\"> <path d=\"M 10,2 C 4.5399633,2 0,5.5155856 0,10 a 0.50005,0.50005 0 0 0 0,0.002 c 0.00211683,0.498935 0.0623158,0.997281 0.1796875,1.486328 a 0.50005,0.50005 0 0 0 0.65625,0.353516 c 0.166982,-0.06005 0.3346003,-0.11455 0.5058594,-0.162109 3.2465843,-0.86948 6.3865589,0.651858 7.0898437,3.277343 0.1999132,0.753403 0.1847938,1.55275 -0.046875,2.341797 A 0.50005,0.50005 0 0 0 8.8144531,17.9375 C 9.2066201,17.97715 9.6008792,17.99763 9.9960938,18 A 0.50005,0.50005 0 0 0 10,18 C 15.460037,18 20,14.484414 20,10 20,5.5155856 15.460037,2 10,2 Z m 0,1 c 5.033373,0 9,3.2001431 9,7 0,3.798831 -3.964655,6.998273 -8.996094,7 C 9.7877816,16.9987 9.5727572,16.978264 9.3574219,16.964844 9.490202,16.205055 9.5915438,15.434329 9.3964844,14.699219 8.5282549,11.457966 4.7749194,9.7293469 1.0878906,10.714844 1.0549598,10.475808 1.0010202,10.238508 1,9.9980469 1.0013454,6.1990381 4.9674803,3 10,3 Z M 9.5,4 C 8.677494,4 8,4.677495 8,5.5 8,6.322505 8.677494,7 9.5,7 10.322505,7 11,6.322505 11,5.5 11,4.677495 10.322505,4 9.5,4 Z m -4,1 C 4.677495,5 4,5.677495 4,6.5 4,7.322505 4.677495,8 5.5,8 6.322505,8 7,7.322505 7,6.5 7,5.677495 6.322505,5 5.5,5 Z m 4,0 C 9.782065,5 10,5.217935 10,5.5 10,5.782065 9.782065,6 9.5,6 9.217935,6 9,5.782065 9,5.5 9,5.217935 9.217935,5 9.5,5 Z m 4,0 C 12.677494,5 12,5.677495 12,6.5 12,7.322505 12.677494,8 13.5,8 14.322505,8 15,7.322505 15,6.5 15,5.677495 14.322505,5 13.5,5 Z m -8,1 C 5.782065,6 6,6.217935 6,6.5 6,6.782065 5.782065,7 5.5,7 5.217935,7 5,6.782065 5,6.5 5,6.217935 5.217935,6 5.5,6 Z m 8,0 C 13.782065,6 14,6.217935 14,6.5 14,6.782065 13.782065,7 13.5,7 13.217935,7 13,6.782065 13,6.5 13,6.217935 13.217935,6 13.5,6 Z m 3,2 C 15.677494,8 15,8.677495 15,9.5 15,10.322505 15.677494,11 16.5,11 17.322505,11 18,10.322505 18,9.5 18,8.677495 17.322505,8 16.5,8 Z m 0,1 C 16.782065,9 17,9.217935 17,9.5 17,9.782065 16.782065,10 16.5,10 16.217935,10 16,9.782065 16,9.5 16,9.217935 16.217935,9 16.5,9 Z m -3,3 C 12.677494,12 12,12.677495 12,13.5 12,14.322505 12.677494,15 13.5,15 14.322505,15 15,14.322505 15,13.5 15,12.677495 14.322505,12 13.5,12 Z m 0,1 C 13.782065,13 14,13.217935 14,13.5 14,13.782065 13.782065,14 13.5,14 13.217935,14 13,13.782065 13,13.5 13,13.217935 13.217935,13 13.5,13 Z\" style=\"fill:#222222; fill-opacity:1; stroke:none; stroke-width:0px;\"/> </g> </svg>",
          "styles": {
            "default": {
              "filter":
                "brightness(0) saturate(100%) invert(45%) sepia(20%) saturate(0%) hue-rotate(255deg) brightness(99%) contrast(101%)"
            },
            "hover": {
              "filter":
                "brightness(0) saturate(100%) invert(61%) sepia(41%) saturate(5169%) hue-rotate(187deg) brightness(99%) contrast(105%)"
            },
            "click": {
              "filter":
                "brightness(0) saturate(100%) invert(58%) sepia(68%) saturate(541%) hue-rotate(179deg) brightness(104%) contrast(100%)"
            }
          }
        }
      }
    }
  }'
></deep-chat>
tip

You can use the CSSFilterConverter tool to generate filter values for the icon color.

ButtonInnerStyles​

Styling for an element inside a button container.
styles is used to set the style of the element for its various mouse states.
content is a string that is used to generate the inner element. When it is inside a text property - the string generates the element text. When inside an svg property - the string needs to be a full inlined svg element HTML which will be used to generate the icon.

info

If the content string is used for an svg:

  • It needs to contain a xmlns="http://www.w3.org/2000/svg" attribute.
  • If it is inside a HTML attribute (the parentmost object is inside quotes " - see the editable example) or when not using backticks (`) - make sure to escape the quotes by changing " to \" (An easy way to do this is to stringify it using JSON.stringify()). Also when inside a HTML attribute, replace the first < character with &lt.

ButtonPosition​

  • Type: "inside-left" | "inside-right" | "outside-left" | "outside-right" | "dropup-menu"

Position for a button either inside the text input container, outside it (either left or right) or inside the dropup menu.

Example​

<deep-chat
  gifs='{"button": {"position": "dropup-menu"}}'
  audio='{"button": {"position": "dropup-menu"}}'
  camera='{"button": {"position": "dropup-menu"}}'
  mixedFiles='{"button": {"position": "inside-left"}}'
  microphone='{"button": {"position": "outside-right"}}'
></deep-chat>

MicrophoneStyles​

Custom styling for the microphone button.
default is used for the default button state.
active is used when the microphone is active.
unsupported is used when recording is not supported on the user's browser.
position is the button position within the input area.

<deep-chat
  microphone='{
    "button": {
      "default": {
        "container": {
          "hover": {"backgroundColor": "#7fbded69"},
          "click": {"backgroundColor": "#4babf669"}
        },
        "svg": {
          "styles": {
            "default": {
              "filter":
                "brightness(0) saturate(100%) invert(49%) sepia(53%) saturate(6895%) hue-rotate(200deg) brightness(101%) contrast(101%)"
            },
            "hover": {
              "filter":
                "brightness(0) saturate(100%) invert(27%) sepia(59%) saturate(5655%) hue-rotate(203deg) brightness(101%) contrast(84%)"
            }
          }
        }
      },
      "active": {
        "container": {
          "hover": {"backgroundColor": "#ffd07c70"},
          "click": {"backgroundColor": "#ecb85c70"}
        },
        "svg": {
          "styles": {
            "default": {
              "filter":
                "brightness(0) saturate(100%) invert(49%) sepia(99%) saturate(477%) hue-rotate(343deg) brightness(100%) contrast(101%)"
            }
          }
        }
      }
    }
  }'
></deep-chat>
tip

You can use the CSSFilterConverter tool to generate filter values for the icon color.