Skip to main content

Styles

Properties related to message styling.

messageStyles​

Object defining the styling for various message types.
default is applied to all message types.
image is applied to messages that contain an image.
audio is applied to messages that contain an audio player.
file is applied to messages that contain a file attachment.
html is applied to messages that contain custom elements - more info.
intro is applied to the introMessage.
error is applied to error messages.
loading is applied to messages with loading elements.

remarkable​

  • Type: {
         xhtmlOut?: boolean,
         html?: boolean,
         breaks?: boolean,
         linkify?: boolean,
         langPrefix?: "language-${string}",
         linkTarget?: string,
         typographer?: boolean,
         quotes?: string,
         highlight?: (str: string, lang: string) => void
    }

  • Default: { breaks: true, linkTarget: "_blank" }

Deep Chat uses the remarkable library to render markdown for its text messages. Use this object to change its configuration.
xhtmlOut uses '/' to close single tags via <br />.
html enables HTML tags in source.
breaks converts '\n' in paragraphs into <br>.
linkify auto converts URL-like text to links.
langPrefix is a CSS language prefix for fenced blocks.
linkTarget sets the target to open links in. "\_blank" is used to open links in a new tab.
typographer enables some language-neutral replacement + quotes beautification.
quotes is double + single quotes replacement pairs.
highlight is a function that should return escaped HTML or '' if the source string is not changed. This is mostly used with highlight.js. See here on how you can set up this configuration.

tip

Use this playground to find the configuration that suits you.

<deep-chat remarkable='{"html": true, "typographer": true}'></deep-chat>

Types​

Shared property types for the messageStyles object:

MessageRoleStyles​

Object defining the styling for various message roles.
shared is applied to all message roles.
user is applied to messages from the user.
ai is applied to messages returned from the target service.
custom roles (e.g. "bob") use ai styling, but they can have additional styling. 

<deep-chat
  messageStyles='{
    "default": {
      "shared": {"bubble": {"color": "white"}},
      "ai": {"bubble": {"backgroundColor": "#3cbe3c"}},
      "user": {"bubble": {"backgroundColor": "#6767ff"}},
      "bob": {"bubble": {"backgroundColor": "#ffa500"}}
    }
  }'
></deep-chat>

MessageElementsStyles​

Object defining the styling for various elements that encompass a message.
outerContainer contains all elements related to the message.
innerContainer is an element inside the outerContainer that is mostly used to set message side padding.
bubble is the element that displays the actual message contents.
media is applied to image, audio and file type messages which contain an extra child element inside the bubble to display the file contents. 

<deep-chat
  messageStyles='{
    "default": {
      "shared": {
        "outerContainer": {"backgroundColor": "orange"},
        "innerContainer": {"backgroundColor": "yellow"},
        "bubble": {"color": "black"}
      },
      "ai": {"bubble": {"backgroundColor": "lightgreen"}},
      "user": {"bubble": {"backgroundColor": "lightblue"}}
    }
  }'
></deep-chat>

LoadingMessageStyles​

Object defining the styling for various message loading elements.
message is the default loading element that is displayed when waiting for a response to a message request.
history is composed of two types of loading elements that are displayed when loading history via loadHistory: full is displayed when the initial chat history is being loaded on component render and small is displayed when user scrolls to the top of the chat to load more history. 

<deep-chat
  messageStyles='{
    "loading": {
      "message": {
        "styles": {
          "bubble": {"backgroundColor": "#6decff", "color": "white"}
        }},
      "history": {
        "small": {
          "styles": {
            "outerContainer": {"marginBottom": "60px"},
            "bubble": {"color": "#6decff", "border": "11px solid", "height": "80px", "width": "80px"}
    }}}}}'
></deep-chat>

LoadingStyles​

Object defining the styling for elements that contain a loading animation.
styles is applied to the various elements of a loading message.
html can be used to define your own loading animation via custom markdown. 

<deep-chat
  messageStyles='{
    "loading": {
      "history": {
        "full": {
          "styles": {"outerContainer": {"marginTop": "28px"}},
          "html": "<div class=\"lds-ripple\"><div></div><div></div></div>"
        },
        "small": {
          "styles": {"outerContainer": {"marginTop": "-10px", "marginBottom": "50px"}}
  }}}}'
></deep-chat>

More Examples​

Files​

<deep-chat
  messageStyles='{
    "image": {
      "shared": {
        "media": {"borderRadius": "0px"}
      }
    },
    "audio": {
      "shared": {
        "media": {"borderRadius": "30px", "border": "1px solid #8c8c8c", "backgroundColor": "red"}
      }
    },
    "file": {
      "shared": {
        "bubble": {"backgroundColor": "grey"}
      }
    }
  }'
></deep-chat>
info

The "audio" media player is controlled by the browser and and its styling may not be overwritable by the media property.

tip

In the Safari browser, the "audio" media player can be expanded by setting the width property in media to 200px or higher.

Grouped messages​

Message elements have the following classes depending on their position in respect to their role: deep-chat-top-message, deep-chat-middle-message and deep-chat-bottom-message. You can use these classes to add custom grouping styling via the auxiliaryStyle property.

<deep-chat
  auxiliaryStyle="
    .deep-chat-top-message .message-bubble {
        border-top-left-radius: 5px !important;
        border-top-right-radius: 5px !important;
    }
    .deep-chat-middle-message .message-bubble {
        margin-top: 0px;
    }
    .deep-chat-bottom-message .message-bubble {
        margin-top: 0px;
        border-bottom-left-radius: 5px !important;
        border-bottom-right-radius: 5px !important;
    }
    .deep-chat-top-message.deep-chat-bottom-message .message-bubble {
        margin-top: 10px;
    }"
></deep-chat>
tip

If you are using avatars, add the following css to the auxiliaryStyle:

.deep-chat-top-message.deep-chat-bottom-message .avatar-container {
  margin-top: 10px;
}
.avatar-container {
  margin-top: 0px;
}

Intro message​

<deep-chat
  messageStyles='{
    "intro": {"bubble": {"backgroundColor": "#475cc7", "color": "white", "fontSize": "16px"}}
  }'
></deep-chat>

Loading bubble​

<deep-chat
  messageStyles='{
    "loading": {
      "bubble": {"backgroundColor": "#3793ff", "fontSize": "20px", "color": "white"}
    }
  }'
></deep-chat>

Error messages​

<deep-chat
  messageStyles='{
    "error": {
      "bubble": {"backgroundColor": "#f98e00", "color": "white", "fontSize": "15px"}
    }
  }'
></deep-chat>