Style overrides

Restyle individual agent components without rebuilding the theme. Pass a styleOverride object to setConfiguration to control layout, borders, color, and typography on specific components.

For global theming, see Dark Mode.

entryComponentStyle

Styles the entry component, including its header layout and the conversation starter borders. This is an object with nested properties for each area of the entry component.

Type: object

Default value:

{
  "header": {
    "horizontalAlignment": "start"
  },
  "conversationStarter": {
    "borderWidth": 1,
    "borderColor": "#000000"
  }
}

Properties

Property	Type	Default	Description
header.horizontalAlignment	"start" | "center" | "end"	"center"	Horizontal alignment of header content.
conversationStarter.borderWidth	number	1	Border width of each conversation starter.
conversationStarter.borderColor	string	""	Border color of each conversation starter.

speechBubbleStyle

Styles the user message speech bubble. Use it to control spacing, color, and typography inside the bubble.

Type: object
Default value: {}

Properties

Property	Type	Description
padding	string	Internal spacing inside the speech bubble.
borderRadius	string	Corner rounding of the speech bubble.
backgroundColor	string	Background color of the speech bubble.
color	string	Text color inside the speech bubble.
fontSize	string	Font size for bubble text.
lineHeight	string	Line height for text inside the bubble.

Example

foldspace.agent('API-KEY').setConfiguration({
  styleOverride: {
    entryComponentStyle: {
      header: {
        horizontalAlignment: "start"
      },
      conversationStarter: {
        borderColor: "#E6E9EE",
        borderWidth: 1
      }
    },
    speechBubbleStyle: {
      padding: "14px 16px",
      borderRadius: "12px",
      backgroundColor: "#FFFFFF",
      color: "#0B1220",
      fontSize: "14px",
      lineHeight: "1.4"
    }
  }
});