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,
         langPrefix?: "language-${string}",
         linkTarget?: string,
         typographer?: boolean,
         quotes?: string,
         highlight?: (str: string, lang: string) => void,
         math?: true | {delimiter?: string; options?: KatexOptions},
         applyHTML?: boolean
    }

  • 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>.
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.
math uses the KaTex library to render math expressions.
applyHTML applies html capabilities to remarkable responses such as Deep Chat classes.

tip

Use this demo to experiment and find the configuration that suits you.
See external modules for remarkable plugins such as linkify and KaTex, more info1, info2.

<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>

KatexOptions​

  • Type: {
         leqno?: boolean,
         fleqn?: boolean,
         throwOnError?: boolean,
         errorColor?: string,
         macros?: Record<string, string>,
         minRuleThickness?: number,
         colorIsTextColor?: boolean,
         maxSize?: number,
         maxExpand?: number,
         globalGroup?: boolean
    }

Object defining the options for the KaTex math renderer.
leqno is used to display math has \tags rendered on the left instead of the right.
fleqn displays math renders flush left with a 2em left margin.
throwOnError throws a ParseError when it encounters an unsupported command .
errorColor is a color string for errors defined in the format "#xxx" or "#xxxxxx".
macros is a collection of custom macros. E.g. macros: {"\\R": "\\mathbb{R}"}
minRuleThickness is the minimum thickness of horizontal rules.
colorIsTextColor is used to enable color functions prior to Katex version 0.8.0.
maxSize caps all user specified sizes.
maxExpand limits the number of macro expansions.
globalGroup is used to run KaTex code in the global group.

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>