把 Amazon Quick 嵌入式聊天定制成你的应用体验

2026-08-19 42 预计阅读时间: 1 分钟
来源: aws.amazon.com AI 摘要 Original link

Disclaimer: This article is an AI-assisted summary. Read it together with the original source when precision matters. The summary may omit context, version differences, or edge cases and is not official documentation.

预计阅读时间：11 分钟

Amazon Quick 嵌入式聊天可以把对话式 AI 直接带进现有 Web 应用。真正投入使用时，默认聊天窗口往往还不够：容器尺寸需要适配页面布局，颜色和字体要融入品牌界面，产品标识可能需要隐藏，AI 还需要以符合业务场景的角色与用户交流。

这篇文章围绕三个定制层次展开：外层容器样式、SDK 提供的聊天样式配置，以及品牌和 agent persona 的调整。示例中的具体配置项名称需要以你所使用的 Amazon Quick SDK 版本为准；下面的代码展示一种可以改造到项目中的集成方式。

先把聊天窗口当作应用的一部分

嵌入式聊天不是一个孤立的 iframe 或弹窗。它通常位于应用的主内容区、侧边栏或帮助中心，因此需要先确定几个稳定的布局约束：

  • 宽度是否随父容器变化；
  • 高度是否需要占满可视区域；
  • 移动端是否切换为全屏或底部面板；
  • 聊天区域与导航栏、页脚之间如何留出空间；
  • 加载状态和错误状态是否会改变页面布局。

一个简单的容器可以先解决尺寸和响应式问题：

<div class="support-layout">
  <main class="page-content">
    <h1>订单管理</h1>
    <p>这里是业务页面内容。</p>
  </main>

  <aside class="quick-chat-shell" aria-label="AI 助手">
    <div id="quick-chat"></div>
  </aside>
</div>

<style>
  .support-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    min-height: 680px;
  }

  .quick-chat-shell {
    min-height: 680px;
    border-left: 1px solid #d8dee8;
    background: #ffffff;
  }

  #quick-chat {
    width: 100%;
    height: 100%;
    min-height: inherit;
  }

  @media (max-width: 760px) {
    .support-layout {
      display: block;
      min-height: auto;
    }

    .quick-chat-shell {
      min-height: 620px;
      margin-top: 16px;
      border: 1px solid #d8dee8;
    }
  }
</style>

这里的 quick-chat-shell 只负责页面级布局，聊天组件本身的颜色、字体和消息气泡样式应交给 Amazon Quick 的 SDK 配置或组件样式接口处理。这样可以避免把业务页面的 CSS 选择器直接绑定到 SDK 的内部 DOM 结构上。

用 SDK 样式配置保持品牌一致

定制聊天时，优先查找 SDK 是否提供以下能力：

  • 聊天容器或主题配置；
  • 用户消息与 agent 消息的颜色；
  • 字体、边框和圆角；
  • 输入框、发送按钮和欢迎状态；
  • 组件品牌标识的显示策略。

可以把这些配置集中到一个对象中，再传给嵌入初始化函数。下面是一个需要根据实际 SDK API 名称调整的示例：

const quickChatConfig = {
  container: document.querySelector('#quick-chat'),
  style: {
    fontFamily: 'Inter, system-ui, sans-serif',
    accentColor: '#0b6e99',
    surfaceColor: '#ffffff',
    borderColor: '#d8dee8',
    userMessageColor: '#e8f3f8',
    agentMessageColor: '#f4f6f8',
    borderRadius: '6px'
  },
  branding: {
    showProviderBranding: false
  },
  agentPersona: {
    name: '订单助理',
    instructions: '用简洁、准确的中文回答订单和配送问题。无法确认时，明确说明需要人工处理。'
  }
};

// 具体初始化方法和字段名称请替换为当前 Amazon Quick SDK 版本的 API。
const chat = AmazonQuickEmbeddedChat.create(quickChatConfig);
chat.mount();

示例中的 branding 和 agentPersona 代表两类不同设置。品牌显示策略影响界面呈现；persona 则影响 agent 如何自称、采用什么语气，以及如何处理不确定答案。不要把密钥、内部系统地址或仅供服务端使用的业务规则放入浏览器端 persona 配置中。

移除品牌标识时要确认边界

“移除品牌”可能包含几种不同需求：隐藏聊天标题中的提供商名称、替换默认图标、改变欢迎文案，或者完全使用应用自己的 agent 名称。这些能力是否可用，取决于 Amazon Quick 嵌入式聊天 SDK 当前版本和产品配置。

实施时建议按下面的顺序验证：

  1. 找到 SDK 文档中关于 branding、theme、header 或 provider display 的配置项。
  2. 确认隐藏标识不会违反产品使用条款或用户告知要求。
  3. 在加载、正常对话、错误和转人工状态分别检查品牌元素。
  4. 通过浏览器开发者工具确认样式没有依赖容易变化的内部类名。
  5. 为桌面端和移动端分别保存视觉回归截图。

如果 SDK 没有提供某个品牌控制项，不建议用脆弱的 DOM 删除脚本强行隐藏。更稳妥的做法是保留该元素，或者联系产品支持确认受支持的配置方式。

Persona 不只是改一个名字

自定义 agent persona 时，至少要明确四件事：

  • 身份：它是谁，例如“订单助理”或“企业 IT 服务台”。
  • 语气：回答是简洁、专业，还是更适合面向消费者的亲切表达。
  • 边界：哪些问题可以回答，哪些情况必须转人工或要求用户提供更多信息。
  • 事实来源：回答应基于哪些知识库、业务数据或应用上下文。

可以先使用一段短指令进行验证：

你是“订单助理”，服务于电商后台用户。

回答规则：
- 使用简洁、专业的中文；
- 先直接回答，再给出必要的下一步；
- 只根据已提供的订单信息回答，不猜测物流状态；
- 无法确认订单、退款或配送结果时，说明原因并建议转人工；
- 不要声称自己执行了尚未完成的操作。

这类 persona 文本适合表达角色和交互边界，但不应替代后端授权。用户是否能查看订单、修改地址或申请退款，仍然应该由服务端根据登录身份和业务权限决定。

一套更容易维护的落地方式

在项目中，可以把聊天初始化拆成三层：

  • 页面容器负责尺寸、位置和响应式行为；
  • 主题配置负责颜色、字体和控件外观；
  • persona 配置负责名称、语气和回答边界。

例如，使用环境变量决定不同环境的 agent 配置：

const personaByEnvironment = {
  development: {
    name: '测试订单助理',
    instructions: '这是测试环境。不要执行真实订单操作。'
  },
  production: {
    name: '订单助理',
    instructions: '只回答已授权用户可访问的订单信息，无法确认时转人工。'
  }
};

const environment = window.APP_ENV || 'development';
const persona = personaByEnvironment[environment];

const config = {
  container: document.getElementById('quick-chat'),
  agentPersona: persona
};

AmazonQuickEmbeddedChat.create(config).mount();

生产环境还应补充内容安全策略、认证状态处理、错误提示和埋点。尤其要观察用户关闭聊天、重复提问、会话过期以及 agent 无法回答时的行为，这些状态通常比首次加载更能暴露集成问题。

上线前检查清单

  • 聊天容器在窄屏和宽屏下都不会挤压主页面内容。
  • 输入框、消息列表和发送操作在键盘操作下可用。
  • 自定义字体和颜色满足可读性要求。
  • 默认品牌元素已按产品和合规要求处理。
  • agent 名称、语气和欢迎文案与业务品牌一致。
  • persona 没有包含密钥、个人数据或可绕过权限的指令。
  • 订单、账户等敏感操作仍由服务端鉴权。
  • 加载失败、网络中断、会话过期和转人工状态都有明确反馈。
  • 当前 SDK 版本的配置字段已经通过实际运行验证，而不是只依赖示例代码。

Amazon Quick 嵌入式聊天的价值不只在于把 AI 窗口放进页面，更在于让它成为应用交互的一部分。先稳定容器布局，再通过 SDK 定制视觉和品牌，最后用清晰的 persona 约束 agent 的表达与边界，通常能在开发效率、界面一致性和运营风险之间取得更好的平衡。

# AI # AWS # LLM # 云原生 # 云平台 # 前端 # 机器学习

相关推荐