From d938882450d820ffb653e3d4eb66a1dfaca9c800 Mon Sep 17 00:00:00 2001 From: Chris Nicholas Date: Wed, 13 Aug 2025 14:16:07 +0100 Subject: [PATCH] Mention AI styles in docs (#2595) --- .../api-reference/liveblocks-react-ui.mdx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/docs/pages/api-reference/liveblocks-react-ui.mdx b/docs/pages/api-reference/liveblocks-react-ui.mdx index 0be802a4427..774a3970062 100644 --- a/docs/pages/api-reference/liveblocks-react-ui.mdx +++ b/docs/pages/api-reference/liveblocks-react-ui.mdx @@ -380,6 +380,30 @@ function Chat() { } ``` +##### Customize CSS variables and classes [#AiChat-variables-and-classes] + +You can customize the default styles of the chat by modifying CSS variables and +classes prefixed with `lb`. Here are some examples. + +```css +/* Lowers spacing and shrinks font size */ +.lb-ai-chat { + --lb-spacing: 0.6em; + font-size: 14px; +} + +/* Removes composer shadow and adds border */ +.lb-ai-chat-composer { + box-shadow: 0; + border: 1px solid #f0f0f0; +} + +/* Removes padding below the composer */ +.lb-ai-chat-footer { + padding-bottom: 0; +} +``` + ##### Customize how Markdown is rendered [#AiChat-markdown] You can customize how Markdown is rendered in messages by passing components to