Styles

Properties related to message styling.

messageStyles

• Type: {
       default?: MessageRoleStyles,
       image?: MessageRoleStyles,
       audio?: MessageRoleStyles,
       file?: MessageRoleStyles,
       html?: MessageRoleStyles,
       intro?: MessageElementsStyles,
       loading?: MessageElementsStyles,
       error?: MessageElementsStyles
  }

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.
loading is applied to the loading bubble.
error is applied to error messages.

Types

Shared property types for the messageStyles object:

MessageRoleStyles

• Type: {
       shared?: MessageElementsStyles,
       user?: MessageElementsStyles,
       ai?: MessageElementsStyles,
       [custom]?: MessageElementsStyles
  }

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.

Sample code

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

Full code

<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  messageStyles='{
    "default": {
      "shared": {"bubble": {"color": "white"}},
      "ai": {"bubble": {"backgroundColor": "#3cbe3c"}},
      "user": {"bubble": {"backgroundColor": "#6767ff"}},
      "bob": {"bubble": {"backgroundColor": "#ffa500"}}
    }
  }'
  initialMessages='[
    {"text": "What is the meaning of life?", "role": "user"},
    {
      "text": "This ultimately depends on the person, but it could be the pursuit of happiness or fulfillment.",
      "role": "ai"
    },
    {
      "text": "We dont laugh because we feel good, we feel good because we laugh.",
      "role": "bob"
    }
  ]'
  style="border-radius: 8px"
  demo="true"
></deep-chat>

MessageElementsStyles

• Type: {
       outerContainer?: CustomStyle,
       innerContainer?: CustomStyle,
       bubble?: CustomStyle,
       media?: CustomStyle
  }

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.

Sample code

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

Full code

<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  messageStyles='{
    "default": {
      "shared": {
        "outerContainer": {"backgroundColor": "orange"},
        "innerContainer": {"backgroundColor": "yellow"},
        "bubble": {"color": "black"}
      },
      "ai": {"bubble": {"backgroundColor": "lightgreen"}},
      "user": {"bubble": {"backgroundColor": "lightblue"}}
    }
  }'
  initialMessages='[
    {"text": "What is the meaning of life?", "role": "user"},
    {
      "text": "This ultimately depends on the person, but it could be the pursuit of happiness or fulfillment.",
      "role": "ai"
    }
  ]'
  style="border-radius: 8px"
  demo="true"
></deep-chat>

More Examples

Files

Sample code

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

Full code

<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  messageStyles='{
    "image": {
      "shared": {
        "media": {"borderRadius": "0px"}
      }
    },
    "audio": {
      "shared": {
        "media": {"borderRadius": "30px", "border": "1px solid #8c8c8c", "backgroundColor": "red"}
      }
    },
    "file": {
      "shared": {
        "bubble": {"backgroundColor": "grey"}
      }
    }
  }'
  initialMessages='[
    {"files": [{"src": "path-to-file.jpeg", "type": "image"}], "role": "user"},
    {"files": [{"src": "path-to-file.wav", "type": "audio"}], "role": "ai"},
    {"files": [{"src": "path-to-file.txt", "name": "text-file.txt", "type": "file"}], "role": "user"}
  ]'
  style="border-radius: 8px"
  demo="true"
></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.

Intro message

Sample code

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

Full code

<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  messageStyles='{
    "intro": {
      "bubble": {"backgroundColor": "#475cc7", "color": "white", "fontSize": "16px"}
    }
  }'
  introMessage='{"text": "Hi I am an AiAssistant, ask me anything!"}'
  style="border-radius: 8px"
  demo="true"
></deep-chat>

Loading bubble

Sample code

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

Full code

<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  messageStyles='{
    "loading": {
      "bubble": {"backgroundColor": "#3793ff", "fontSize": "20px", "color": "white"}
    }
  }'
  style="border-radius: 8px"
  demo='{"displayLoadingBubble": true}'
></deep-chat>

Error messages

Sample code

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

Full code

<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  messageStyles='{
    "error": {
      "bubble": {"backgroundColor": "#f98e00", "color": "white", "fontSize": "15px"}
    }
  }'
  style="border-radius: 8px"
  demo='{"displayErrors": {"service": true}}'
></deep-chat>