implementing-ui-bundle-agentforce-conversation-client

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Managing Agentforce Conversation Client

管理Agentforce Conversation Client

HARD CONSTRAINT: NEVER create a custom agent, chatbot, or chat widget component. ALL such requests MUST be fulfilled by importing and rendering the existing

<AgentforceConversationClient />

from

@salesforce/ui-bundle-template-feature-react-agentforce-conversation-client

as documented below. If a requirement is unsupported by this component's props, state the limitation — do not improvise an alternative.

【严格约束】：切勿创建自定义Agent、聊天机器人或聊天组件。所有此类请求必须通过导入并渲染现有

<AgentforceConversationClient />

组件来完成，该组件来自

@salesforce/ui-bundle-template-feature-react-agentforce-conversation-client

，具体用法如下文所述。如果需求超出该组件属性的支持范围，请说明限制——不要自行变通替代方案。

Prerequisites

前提条件

Before the component will work, the following Salesforce settings must be configured by the user. ALWAYS call out the prequisites after successfully embedding the agent.

Cookie settings:

Setup → My Domain → Disable "Require first party use of Salesforce cookies"

Trusted domains (required only for local development):

Setup → Session Settings → Trusted Domains for Inline Frames → Add your domain
- Local development:
```
localhost:<PORT>
```
  (e.g.,
```
localhost:3000
```
  )

在组件正常工作前，用户必须配置以下Salesforce设置。成功嵌入Agent后，务必告知用户这些前提条件。

Cookie设置：

设置 → 我的域名 → 禁用“要求仅使用Salesforce第一方Cookie”

可信域名（仅本地开发需要）：

设置 → 会话设置 → 内联框架可信域名 → 添加你的域名
- 本地开发：
```
localhost:<PORT>
```
  （例如：
```
localhost:3000
```
  ）

Instructions

操作步骤

Step 1: Check if component already exists

步骤1：检查组件是否已存在

Search for existing usage across all app files (not implementation files):

bash

grep -r "AgentforceConversationClient" --include="*.tsx" --include="*.jsx" --exclude-dir=node_modules

Important: Look for React files that import and USE the component (for example, shared shells, route components, or feature pages). Do NOT open files named

AgentforceConversationClient.tsx

AgentforceConversationClient.jsx

- those are the component implementation.

If found: Read the file and check the current

agentId

value.

Agent ID validation rule (deterministic):

Valid only if it matches:
```
^0Xx[a-zA-Z0-9]{15}$
```
Meaning: starts with
```
0Xx
```
and total length is 18 characters

Decision:

If
```
agentId
```
matches
```
^0Xx[a-zA-Z0-9]{15}$
```
and user wants to update other props → Go to Step 4 (update props)
If
```
agentId
```
is missing, empty, or does NOT match
```
^0Xx[a-zA-Z0-9]{15}$
```
→ Continue to Step 2 (need real ID)
If not found → Continue to Step 2 (add new)

在所有应用文件（非实现文件）中搜索现有用法：

bash

grep -r "AgentforceConversationClient" --include="*.tsx" --include="*.jsx" --exclude-dir=node_modules

**重要提示：**查找导入并使用该组件的React文件（例如共享外壳、路由组件或功能页面）。不要打开名为

AgentforceConversationClient.tsx

或

AgentforceConversationClient.jsx

的文件——这些是组件实现文件。

**如果找到：**读取文件并检查当前

agentId

的值。

Agent ID验证规则（确定性）：

仅当匹配
```
^0Xx[a-zA-Z0-9]{15}$
```
时有效
含义：以
```
0Xx
```
开头，总长度为18个字符

决策：

如果
```
agentId
```
匹配
```
^0Xx[a-zA-Z0-9]{15}$
```
，且用户希望更新其他属性 → 进入步骤4（更新属性）
如果
```
agentId
```
缺失、为空或不匹配
```
^0Xx[a-zA-Z0-9]{15}$
```
→ 继续步骤2（需要真实ID）
如果未找到 → 继续步骤2（添加新组件）

Step 2: Get agent ID

步骤2：获取Agent ID

If component doesn't exist or has an invalid placeholder value, ask user for their Salesforce agent ID.

Treat these as placeholder/invalid values:

```
"0Xx..."
```
```
"Placeholder"
```
```
"YOUR_AGENT_ID"
```
```
"<USER_AGENT_ID_18_CHAR_0Xx...>"
```
Any value that does not match
```
^0Xx[a-zA-Z0-9]{15}$
```

Skip this step if:

Component exists with a real agent ID
User only wants to update styling or dimensions

如果组件不存在或使用的是无效占位符值，请向用户索要其Salesforce Agent ID。

以下视为占位符/无效值：

```
"0Xx..."
```
```
"Placeholder"
```
```
"YOUR_AGENT_ID"
```
```
"<USER_AGENT_ID_18_CHAR_0Xx...>"
```
任何不匹配
```
^0Xx[a-zA-Z0-9]{15}$
```
的值

在以下情况跳过此步骤：

组件已存在且使用真实Agent ID
用户仅希望更新样式或尺寸

Step 3: Canonical import strategy

步骤3：标准导入策略

Use this import path by default in app code:

tsx

import { AgentforceConversationClient } from "@salesforce/ui-bundle-template-feature-react-agentforce-conversation-client";

If the package is not installed, install it:

bash

npm install @salesforce/ui-bundle-template-feature-react-agentforce-conversation-client

Only use a local relative import (for example,

./components/AgentforceConversationClient

) when the user explicitly asks to use a patched/local component in that app.

Do not infer import path from file discovery alone. Prefer one consistent package import across the codebase.

在应用代码中默认使用以下导入路径：

tsx

import { AgentforceConversationClient } from "@salesforce/ui-bundle-template-feature-react-agentforce-conversation-client";

如果未安装该包，请执行安装：

bash

npm install @salesforce/ui-bundle-template-feature-react-agentforce-conversation-client

仅当用户明确要求在该应用中使用补丁/本地组件时，才使用本地相对导入（例如

./components/AgentforceConversationClient

）。

不要仅通过文件发现推断导入路径。优先在整个代码库中使用一致的包导入方式。

Step 4: Add or update component

步骤4：添加或更新组件

Determine which sub-step applies:

Component NOT found in Step 1 → go to 4a (New installation)
Component found in Step 1 → go to 4b (Update existing)

确定适用的子步骤：

步骤1中未找到组件 → 进入4a（全新安装）
步骤1中找到组件 → 进入4b（更新现有组件）

4a — New installation

4a — 全新安装

If the user already specified a target file, use that file. Otherwise, ask the user: "Which file should I add the AgentforceConversationClient to?" Do NOT proceed until a target file is confirmed.
Read the target file to understand its existing imports and TSX structure.
Add the import at the top of the file, alongside existing imports. Use the canonical package import from Step 3:

tsx

import { AgentforceConversationClient } from "@salesforce/ui-bundle-template-feature-react-agentforce-conversation-client";

Insert the
```
<AgentforceConversationClient />
```
TSX into the component's return block. Place it as a sibling of existing content — do NOT wrap or restructure existing TSX. Use the real
```
agentId
```
obtained in Step 2: Example:

tsx

<AgentforceConversationClient agentId="0Xx8X00000001AbCDE" />

Do NOT add any other code (wrappers, layout components, new functions) unless the user explicitly requests it.

如果用户已指定目标文件，则使用该文件。否则，请询问用户：“我应该将AgentforceConversationClient添加到哪个文件中？”确认目标文件后再继续。
读取目标文件，了解其现有导入和TSX结构。
在文件顶部现有导入旁添加该组件的导入语句，使用步骤3中的标准包导入路径：

tsx

import { AgentforceConversationClient } from "@salesforce/ui-bundle-template-feature-react-agentforce-conversation-client";

将
```
<AgentforceConversationClient />
```
TSX元素插入组件的return块中。将其作为现有内容的同级元素放置——不要包裹或重构现有TSX。使用步骤2中获取的真实
```
agentId
```
： 示例：

tsx

<AgentforceConversationClient agentId="0Xx8X00000001AbCDE" />

除非用户明确要求，否则不要添加任何其他代码（包装器、布局组件、新函数）。

4b — Update existing

4b — 更新现有组件

Read the file identified in Step 1.
Locate the existing
```
<AgentforceConversationClient ... />
```
TSX element.
Apply only the changes the user requested. Rules:
- Add new props that the user asked for.
- Change prop values the user asked to update.
- Preserve every prop and value the user did NOT mention — do not remove, reorder, or reformat them.
- Never delete the component and recreate it.
If the current
```
agentId
```
is a placeholder (failed validation in Step 1) and a real agent ID was obtained in Step 2, replace the placeholder value:

tsx

// Before
<AgentforceConversationClient agentId="Placeholder" />

// After
<AgentforceConversationClient agentId="0Xx8X00000001AbCDE" />

If the current
```
agentId
```
is already valid and the user did not ask to change it, leave it as-is.

读取步骤1中找到的文件。
找到现有的
```
<AgentforceConversationClient ... />
```
TSX元素。
仅应用用户要求的更改。规则：
- 添加用户要求的新属性。
- 修改用户要求更新的属性值。
- 保留用户未提及的所有属性及其值——不要删除、重新排序或重新格式化它们。
- 切勿删除组件后重新创建。
如果当前
```
agentId
```
是占位符（步骤1中验证失败），且已在步骤2中获取真实Agent ID，则替换占位符值：

tsx

// 之前
<AgentforceConversationClient agentId="Placeholder" />

// 之后
<AgentforceConversationClient agentId="0Xx8X00000001AbCDE" />

如果当前
```
agentId
```
已有效且用户未要求更改，则保持原样。

Step 5: Configure props

步骤5：配置属性

Available props (use directly on component):

```
agentId
```
(string, required) - Salesforce agent ID
```
inline
```
(boolean) -
```
true
```
for inline mode, omit for floating
```
width
```
(number | string) - e.g.,
```
420
```
or
```
"100%"
```
```
height
```
(number | string) - e.g.,
```
600
```
or
```
"80vh"
```
```
headerEnabled
```
(boolean) - Show/hide header
```
styleTokens
```
(object) - For all styling (colors, fonts, spacing)
```
salesforceOrigin
```
(string) - Auto-resolved
```
frontdoorUrl
```
(string) - Auto-resolved
```
agentLabel
```
(string) - header title for agent

Examples:

Floating mode (default):

tsx

<AgentforceConversationClient agentId="0Xx..." />

Inline mode with dimensions:

tsx

<AgentforceConversationClient agentId="0Xx..." inline width="420px" height="600px" />

Adding or updating agent label:

tsx

<AgentforceConversationClient agentId="0Xx..." agentLabel="<dummy-agent-label>" />

Styling rules (mandatory):

ALL visual customization (colors, fonts, spacing, borders, radii, shadows) MUST go through the
```
styleTokens
```
prop. There are no exceptions.
ONLY use token names listed in the tables below. Do NOT invent custom token names.
NEVER apply styling via CSS files,
```
style
```
attributes,
```
className
```
, or wrapper elements. These approaches will not work and will be ignored by the component.
If the user requests a visual change that does not map to a token below, inform them that the change is not supported by the current token set.

可用属性（直接在组件上使用）：

```
agentId
```
（字符串，必填）- Salesforce Agent ID
```
inline
```
（布尔值）-
```
true
```
表示内联模式，省略则为浮动模式
```
width
```
（数字 | 字符串）- 例如：
```
420
```
或
```
"100%"
```
```
height
```
（数字 | 字符串）- 例如：
```
600
```
或
```
"80vh"
```
```
headerEnabled
```
（布尔值）- 显示/隐藏头部
```
styleTokens
```
（对象）- 用于所有样式设置（颜色、字体、间距）
```
salesforceOrigin
```
（字符串）- 自动解析
```
frontdoorUrl
```
（字符串）- 自动解析
```
agentLabel
```
（字符串）- Agent的头部标题

示例：

浮动模式（默认）：

tsx

<AgentforceConversationClient agentId="0Xx..." />

带尺寸的内联模式：

tsx

<AgentforceConversationClient agentId="0Xx..." inline width="420px" height="600px" />

添加或更新Agent标签：

tsx

<AgentforceConversationClient agentId="0Xx..." agentLabel="<dummy-agent-label>" />

样式设置规则（强制）：

所有视觉自定义（颜色、字体、间距、边框、圆角、阴影）必须通过
```
styleTokens
```
属性完成。无例外。
仅使用下表中列出的令牌名称。不要自创自定义令牌名称。
切勿通过CSS文件、
```
style
```
属性、
```
className
```
或包装元素应用样式。这些方法无效，会被组件忽略。
如果用户请求的视觉更改无法映射到以下令牌，请告知用户当前令牌集不支持该更改。

Container

容器

Token name	UI area themed
`fabBackground`	FAB button background color
`containerBackground`	Chat container background
`headerBackground`	Header background
`containerWidth`	Chat container width
`chatBorderRadius`	Chat border radius
`layoutMaxWidth`	Layout max width

令牌名称	主题化的UI区域
`fabBackground`	FAB按钮背景色
`containerBackground`	聊天容器背景色
`headerBackground`	头部背景色
`containerWidth`	聊天容器宽度
`chatBorderRadius`	聊天组件圆角
`layoutMaxWidth`	布局最大宽度

Agentforce Header

Agentforce头部

Token name	UI area themed
`headerBlockBackground`	Header block background
`headerBlockBorderBottomWidth`	Header border bottom width
`headerBlockBorderBottomStyle`	Header border bottom style
`headerBlockBorderBottomColor`	Header border bottom color
`headerBlockBorderRadius`	Header corner radius
`headerBlockPaddingBlock`	Header block padding (vertical)
`headerBlockPaddingInline`	Header inline padding (horizontal)
`headerBlockMinHeight`	Header minimum height
`headerBlockBrandingGap`	Header branding area gap
`headerBlockFontFamily`	Header font family
`headerBlockFontWeight`	Header title font weight
`headerBlockFontSize`	Header title font size
`headerBlockLineHeight`	Header title line height
`headerBlockTextColor`	Header text color
`headerBlockIconDisplay`	Header icon display
`headerBlockIconMargin`	Header icon margin
`headerBlockIconColor`	Header icon color
`headerBlockIconWidth`	Header icon width
`headerBlockIconHeight`	Header icon height
`headerBlockLogoMaxHeight`	Header logo max height
`headerBlockLogoMaxWidth`	Header logo max width
`headerBlockLogoMinWidth`	Header logo min width
`headerBlockButtonHeight`	Header action button height
`headerBlockButtonWidth`	Header action button width
`headerBlockButtonPadding`	Header action button padding
`headerBlockButtonBorderRadius`	Header action button border radius
`headerBlockHoverBackground`	Header hover background
`headerBlockActiveBackground`	Header active background
`headerBlockFocusBorder`	Header focus border

令牌名称	主题化的UI区域
`headerBlockBackground`	头部区块背景色
`headerBlockBorderBottomWidth`	头部底部边框宽度
`headerBlockBorderBottomStyle`	头部底部边框样式
`headerBlockBorderBottomColor`	头部底部边框颜色
`headerBlockBorderRadius`	头部圆角
`headerBlockPaddingBlock`	头部区块内边距（垂直）
`headerBlockPaddingInline`	头部区块内边距（水平）
`headerBlockMinHeight`	头部最小高度
`headerBlockBrandingGap`	头部品牌区域间距
`headerBlockFontFamily`	头部字体族
`headerBlockFontWeight`	头部标题字体粗细
`headerBlockFontSize`	头部标题字体大小
`headerBlockLineHeight`	头部标题行高
`headerBlockTextColor`	头部文字颜色
`headerBlockIconDisplay`	头部图标显示方式
`headerBlockIconMargin`	头部图标外边距
`headerBlockIconColor`	头部图标颜色
`headerBlockIconWidth`	头部图标宽度
`headerBlockIconHeight`	头部图标高度
`headerBlockLogoMaxHeight`	头部Logo最大高度
`headerBlockLogoMaxWidth`	头部Logo最大宽度
`headerBlockLogoMinWidth`	头部Logo最小宽度
`headerBlockButtonHeight`	头部操作按钮高度
`headerBlockButtonWidth`	头部操作按钮宽度
`headerBlockButtonPadding`	头部操作按钮内边距
`headerBlockButtonBorderRadius`	头部操作按钮圆角
`headerBlockHoverBackground`	头部悬停背景色
`headerBlockActiveBackground`	头部激活状态背景色
`headerBlockFocusBorder`	头部焦点边框

Agentforce Welcome Block

Agentforce欢迎区块

Token name	UI area themed
`welcomeBlockTextContainerWidth`	Welcome text container width
`welcomeBlockFontFamily`	Welcome block font family
`welcomeBlockFontSize`	Welcome block font size
`welcomeBlockFontWeight`	Welcome block font weight
`welcomeBlockLineHeight`	Welcome block line height
`welcomeBlockLetterSpacing`	Welcome block letter spacing
`welcomeBlockTextColor`	Welcome block text color
`welcomeBlockPaddingVertical`	Welcome block vertical padding
`welcomeBlockPaddingHorizontal`	Welcome block horizontal padding
`welcomeBlockTextAnimationDuration`	Welcome text animation duration

令牌名称	主题化的UI区域
`welcomeBlockTextContainerWidth`	欢迎文字容器宽度
`welcomeBlockFontFamily`	欢迎区块字体族
`welcomeBlockFontSize`	欢迎区块字体大小
`welcomeBlockFontWeight`	欢迎区块字体粗细
`welcomeBlockLineHeight`	欢迎区块行高
`welcomeBlockLetterSpacing`	欢迎区块字间距
`welcomeBlockTextColor`	欢迎区块文字颜色
`welcomeBlockPaddingVertical`	欢迎区块垂直内边距
`welcomeBlockPaddingHorizontal`	欢迎区块水平内边距
`welcomeBlockTextAnimationDuration`	欢迎文字动画时长

Agentforce Messages

Agentforce消息

Token name	UI area themed
`messageBlockBorderRadius`	Message block border radius
`avatarDisplay`	Avatar display property (e.g. `block` , `none` )
`hideMessageActions`	Message actions display (e.g. `block` , `none` to hide)
`hideCopyAction`	Copy action button display (e.g. `inline-flex` , `none` )
`messageBlockPaddingContainer`	Message block container padding
`messageBlockFontSize`	Message block font size
`messageBlockBackgroundColor`	Message block background (base)
`messageBlockInboundBorder`	Inbound message border
`messageBlockOutboundBorder`	Outbound message border
`messageBlockBodyWidth`	Message block body width
`messageBlockPadding`	Message block padding
`messageBlockContainerMarginTop`	Message block container top margin
`messageBlockLineHeight`	Message block line height

令牌名称	主题化的UI区域
`messageBlockBorderRadius`	消息区块圆角
`avatarDisplay`	头像显示属性（例如 `block` 、 `none` ）
`hideMessageActions`	消息操作显示（例如 `block` 、 `none` 隐藏）
`hideCopyAction`	复制操作按钮显示（例如 `inline-flex` 、 `none` ）
`messageBlockPaddingContainer`	消息区块容器内边距
`messageBlockFontSize`	消息区块字体大小
`messageBlockBackgroundColor`	消息区块背景色（基础）
`messageBlockInboundBorder`	接收消息边框
`messageBlockOutboundBorder`	发送消息边框
`messageBlockBodyWidth`	消息区块主体宽度
`messageBlockPadding`	消息区块内边距
`messageBlockContainerMarginTop`	消息区块容器上边距
`messageBlockLineHeight`	消息区块行高

Avatar visibility (behavioral config)

头像可见性（行为配置）

Use

renderingConfig.showAvatar

to control whether avatars are rendered in message rows.

```
showAvatar: true
```
(default) renders avatars.
```
showAvatar: false
```
hides avatars by removing them from the DOM.

使用

renderingConfig.showAvatar

控制消息行中是否渲染头像。

```
showAvatar: true
```
（默认）渲染头像。
```
showAvatar: false
```
通过从DOM中移除头像来隐藏它们。

Inbound message (agent → customer)

接收消息（Agent → 客户）

Token name	UI area themed
`inboundMessgeTextColor`	Inbound message text color (base)
`messageBlockInboundBorderRadius`	Inbound message border radius
`messageBlockInboundBackgroundColor`	Inbound message background
`messageBlockInboundTextColor`	Inbound message text color
`messageBlockInboundWidth`	Inbound message width
`messageBlockInboundTextAlign`	Inbound message text alignment
`messageBlockInboundHoverBackgroundColor`	Inbound message hover background

令牌名称	主题化的UI区域
`inboundMessgeTextColor`	接收消息文字颜色（基础）
`messageBlockInboundBorderRadius`	接收消息圆角
`messageBlockInboundBackgroundColor`	接收消息背景色
`messageBlockInboundTextColor`	接收消息文字颜色
`messageBlockInboundWidth`	接收消息宽度
`messageBlockInboundTextAlign`	接收消息文字对齐方式
`messageBlockInboundHoverBackgroundColor`	接收消息悬停背景色

Outbound message (customer → agent)

发送消息（客户 → Agent）

Token name	UI area themed
`messageBlockOutboundBorderRadius`	Outbound message border radius
`messageBlockOutboundBackgroundColor`	Outbound message background
`messageBlockOutboundTextColor`	Outbound message text color
`messageBlockOutboundWidth`	Outbound message width
`messageBlockOutboundMarginLeft`	Outbound message left margin
`messageBlockOutboundTextAlign`	Outbound message text alignment

令牌名称	主题化的UI区域
`messageBlockOutboundBorderRadius`	发送消息圆角
`messageBlockOutboundBackgroundColor`	发送消息背景色
`messageBlockOutboundTextColor`	发送消息文字颜色
`messageBlockOutboundWidth`	发送消息宽度
`messageBlockOutboundMarginLeft`	发送消息左边距
`messageBlockOutboundTextAlign`	发送消息文字对齐方式

Agentforce Input

Agentforce输入框

Token name	UI area themed
`messageInputPadding`	Message input container padding
`messageInputFooterBorderColor`	Message input footer border color
`messageInputBorderRadius`	Message input border radius
`messageInputBorderTransitionDuration`	Message input border transition duration
`messageInputBorderTransitionEasing`	Message input border transition easing
`messageInputTextColor`	Message input text color
`messageInputTextBackgroundColor`	Message input text background color
`messageInputFooterBorderFocusColor`	Message input footer focus border color
`messageInputFocusShadow`	Message input focus shadow
`messageInputMaxHeight`	Message input max height
`messageInputLineHeight`	Message input line height
`messageInputTextPadding`	Message input text padding
`messageInputFontWeight`	Message input font weight
`messageInputFontSize`	Message input font size
`messageInputOverflowY`	Message input overflow Y
`messageInputScrollbarWidth`	Message input scrollbar width
`messageInputScrollbarColor`	Message input scrollbar color
`messageInputActionsWidth`	Message input actions width
`messageInputActionsPaddingRight`	Message input actions right padding
`messageInputFooterPlaceholderText`	Message input placeholder text color
`messageInputPlaceholderFontWeight`	Placeholder font weight
`messageInputErrorTextColor`	Message input error text color
`messageInputActionsGap`	Message input actions gap
`messageInputActionsPadding`	Message input actions padding
`messageInputActionButtonSize`	Message input action button size
`messageInputActionButtonRadius`	Message input action button radius
`messageInputFooterSendButton`	Message input send button color
`messageInputSendButtonDisabledColor`	Message input send button disabled color
`messageInputActionButtonFocusBorder`	Message input action button focus border
`messageInputActionButtonActiveIconColor`	Message input action button active icon color
`messageInputActionButtonActiveBackground`	Message input action button active background
`messageInputSendButtonIconColor`	Message input send button icon color
`messageInputFooterSendButtonHoverColor`	Message input send button hover color
`messageInputActionButtonHoverShadow`	Message input action button hover shadow
`messageInputFilePreviewPadding`	Message input file preview padding
`messageInputTextareaMaxHeight`	Message input textarea max height
`messageInputTextareaWithImageMaxHeight`	Message input textarea max height (with image)

令牌名称	主题化的UI区域
`messageInputPadding`	消息输入容器内边距
`messageInputFooterBorderColor`	消息输入底部边框颜色
`messageInputBorderRadius`	消息输入框圆角
`messageInputBorderTransitionDuration`	消息输入框边框过渡时长
`messageInputBorderTransitionEasing`	消息输入框边框过渡缓动效果
`messageInputTextColor`	消息输入文字颜色
`messageInputTextBackgroundColor`	消息输入文字背景色
`messageInputFooterBorderFocusColor`	消息输入底部焦点边框颜色
`messageInputFocusShadow`	消息输入框焦点阴影
`messageInputMaxHeight`	消息输入框最大高度
`messageInputLineHeight`	消息输入行高
`messageInputTextPadding`	消息输入文字内边距
`messageInputFontWeight`	消息输入字体粗细
`messageInputFontSize`	消息输入字体大小
`messageInputOverflowY`	消息输入框垂直溢出方式
`messageInputScrollbarWidth`	消息输入框滚动条宽度
`messageInputScrollbarColor`	消息输入框滚动条颜色
`messageInputActionsWidth`	消息输入操作区宽度
`messageInputActionsPaddingRight`	消息输入操作区右边距
`messageInputFooterPlaceholderText`	消息输入框占位符文字颜色
`messageInputPlaceholderFontWeight`	占位符字体粗细
`messageInputErrorTextColor`	消息输入框错误文字颜色
`messageInputActionsGap`	消息输入操作区间距
`messageInputActionsPadding`	消息输入操作区内边距
`messageInputActionButtonSize`	消息输入操作按钮尺寸
`messageInputActionButtonRadius`	消息输入操作按钮圆角
`messageInputFooterSendButton`	消息输入框发送按钮颜色
`messageInputSendButtonDisabledColor`	消息输入框发送按钮禁用状态颜色
`messageInputActionButtonFocusBorder`	消息输入操作按钮焦点边框
`messageInputActionButtonActiveIconColor`	消息输入操作按钮激活状态图标颜色
`messageInputActionButtonActiveBackground`	消息输入操作按钮激活状态背景色
`messageInputSendButtonIconColor`	消息输入框发送按钮图标颜色
`messageInputFooterSendButtonHoverColor`	消息输入框发送按钮悬停颜色
`messageInputActionButtonHoverShadow`	消息输入操作按钮悬停阴影
`messageInputFilePreviewPadding`	消息输入文件预览内边距
`messageInputTextareaMaxHeight`	消息输入文本域最大高度
`messageInputTextareaWithImageMaxHeight`	消息输入文本域（带图片）最大高度

Agentforce Error Block

Agentforce错误区块

Token name	UI area themed
`errorBlockBackground`	Error block background color

Styling with styleTokens:

tsx

<AgentforceConversationClient
  agentId="0Xx..."
  styleTokens={{
    headerBlockBackground: "#0176d3",
    headerBlockTextColor: "#ffffff",
    messageBlockInboundBackgroundColor: "#4CAF50",
  }}
/>

For complex patterns, consult

references/examples.md

for:

Sidebar containers and responsive sizing
Dark theme and advanced theming combinations
Inline without header, calculated dimensions
Complete host component examples

Common mistakes to avoid: Consult

references/constraints.md

for:

Invalid props (containerStyle, style, className)
Invalid styling approaches (CSS files, style tags)
What files NOT to edit (implementation files)

令牌名称	主题化的UI区域
`errorBlockBackground`	错误区块背景色

使用styleTokens设置样式：

tsx

<AgentforceConversationClient
  agentId="0Xx..."
  styleTokens={{
    headerBlockBackground: "#0176d3",
    headerBlockTextColor: "#ffffff",
    messageBlockInboundBackgroundColor: "#4CAF50",
  }}
/>

对于复杂模式，请查阅

references/examples.md

获取以下内容：

侧边栏容器和响应式尺寸
深色主题和高级主题组合
无头部内联模式、计算尺寸
完整宿主组件示例

需避免的常见错误：请查阅

references/constraints.md

获取以下内容：

无效属性（containerStyle、style、className）
无效样式设置方法（CSS文件、style标签）
不应编辑的文件（实现文件）

Common Issues

常见问题

If component doesn't appear or authentication fails, see

references/troubleshooting.md

for:

Agent activation and deployment
Localhost trusted domains
Cookie restriction settings

如果组件未显示或验证失败，请查阅

references/troubleshooting.md

获取以下内容：

Agent激活与部署
Localhost可信域名
Cookie限制设置