Chat Styling Guide

In the following article, you will learn the CSS commands to style and customize the chat window to your liking.

Please note: every CSS command starts with .ai-chat-wrapper .ai-chat {

Below you will find an example of how to implement the first CSS command for "Change chat window size".

.ai-chat-wrapper .ai-chat{
width: 100%
height: 600px
}

Layout & Sizing

Change chat window size

.ai-chat-wrapper .ai-chat {

width: 100%;

height: 600px;

}

Make chat window full screen size

.ai-chat-wrapper .ai-chat {

width: 100dvw;

height: 100dvh;

box-sizing: border-box;

}

Add margin outside the chat window

.ai-chat-wrapper .ai-chat {

margin-top: 20px;

margin-bottom: 20px;

margin-left: 20px;

margin-right: 20px;

}

Remove border around chat window

.ai-chat-wrapper .ai-chat {

border: none;

}

Change border radius of chat window

.ai-chat-wrapper .ai-chat {

border-radius: 10px;

}

Change border radius of chat header

.ai-chat-wrapper .ai-chat {

border-top-left-radius: 10px;

border-top-right-radius: 10px;

}

Visual Design & Colors

Change background color of chat window

.ai-chat-wrapper .ai-chat {

background-color: #f0f0f0;

}

Change background color of all messages

.ai-chat-wrapper .ai-chat {

background-color: #f0f0f0;

}

Change background color of user messages

.ai-chat-wrapper .ai-chat .chat-message[data-role="user"] {

background-color: #f0f0f0;

}

Change background color of assistant messages

.ai-chat-wrapper .ai-chat .chat-message[data-role="assistant"] {

background-color: #f0f0f0;

}

Change background color of chat header

..ai-chat-wrapper .ai-chat .chat-header {

background-color: #f0f0f0;

}

Change background color of send button

.ai-chat-wrapper .ai-chat .chat-input .send-button svg > g > rect:first-child {

fill: #f0f0f0;

}

Change icon color of send button

.ai-chat-wrapper .ai-chat .ai-chat .chat-input .send-button svg > g > g > path:first-child {

fill: #333;

}

Typography & Text

Beachte, dass die Schriftart als Datei auf einem öffentlich zugänglichem Ordner liegen muss, oder du FoxBase, der digtizer.app, Zugriff dazu erteilen musst. Füge die URL am Anfang der CSS Maske ein und definiere deine Font Families für deine Schriftarten. Bspw. Bold, Italic, Condensed etc.

@font-face {
    font-family: 'space-grotesk-bold';
    src: url(https://cdn.foxbase.de/fonts/Space_Grotesk/SpaceGrotesk-Bold.ttf) format("ttf")
}

Change font family of all text

.ai-chat-wrapper .ai-chat {

font-family: "Comic Sans MS", cursive, sans-serif;

}

Change size and style of chat header title

.ai-chat-wrapper .ai-chat .chat-header > :first-child {

font-size: 24px;

font-weight: bold;

color: #333;

}

Change color of chat header action dots

.ai-chat-wrapper .ai-chat .chat-header .header-actions svg > g > path:first-child {

fill: #333;

}

Change font size and color of all messages

.ai-chat-wrapper .ai-chat .chat-message {

font-size: 16px;

color: #333;

}

Change font size and color of user messages

.ai-chat-wrapper .ai-chat .chat-message[data-role="user"] {

font-size: 16px;

color: #333;

}

Change font size and color of assistant messages

.ai-chat-wrapper .ai-chat .chat-message[data-role="assistant"] {

font-size: 16px;

color: #333;

}

Change font size and color of text input placeholder

.ai-chat-wrapper .ai-chat .chat-input .input-sizer .input-field::placeholder {

font-size: 16px;

color: #999;

}

Change font size and color of text input text

.ai-chat-wrapper .ai-chat .chat-input .input-sizer .input-field {

font-size: 16px;

color: #333;

}

Change font size and color of “clear chat” action

.ai-chat-wrapper .ai-chat .chat-header .header-actions .actions .action {

   font-size: 16px;

   color: red;

}