# @amazon-connect-touchpoint/web 中文文档

规范地址：https://npmcn.com/package/%40amazon-connect-touchpoint/web/

版本：1\.0\.6
npm 元数据更新时间：2026-11-09T11:33:13.537Z
中文译文更新时间：2026-11-09T12:00:11.524Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40amazon-connect-touchpoint/web
原文对照：https://npmcn.com/package/%40amazon-connect-touchpoint/web/?lang=original
项目主页：https://github.com/amazon-connect/touchpoint#readme
源码仓库：https://github.com/amazon-connect/touchpoint

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：6.4 MB，132 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.19\.0
- 运行依赖：19 个
- 首次发布：2026-08-31T20:22:07.700Z
- 最新版本发布：2026-11-09T11:33:13.214Z
- 近 30 天下载量：3354（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：17（近 12 个月 17 个）

## 中文简介

Amazon 连接客户端的谈话 UI 和 SDK

## 安装

```sh
npm install @amazon-connect-touchpoint/web
```

也可以使用：`pnpm add @amazon-connect-touchpoint/web`、`yarn add @amazon-connect-touchpoint/web`、`bun add @amazon-connect-touchpoint/web`

## README

# 触点

触点是亚马逊连通客户端的即时对话UI和SDK——a 用于聊天、语音和语音-mini,加 **现场同步**,则 保持语音或聊天对话与您同步的本地技术 屏幕界面.

```bash
npm i @amazon-connect-touchpoint/web
```

## 先决条件

要运行触点, 您需要使用 Amazon 连接客户 实例 与联系 流程,加上一个浏览器-显示端点来薄荷联系人证书。 聚集起来 在您拨打电话之前,以下 `create()`数字 :

| 你需要的东西 | 从何而来 |
| --- | --- |
| **启动Chat 连接端点** (聊天声) | API 网关/ Lambda 路由, 使用 Amazon Connect 的 `StartChatContact` 并返回与会者全权证书。 部署 [开始聊天联系API](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/cloudformationTemplates/startChatContactAPI)所需的时间 `input: "text"`。通过 `config.chatEndpoint`。 。 。 . |
| **启动WebRTC 连接端点** (声音) | 终点唤起 `StartWebRTCContact` 并返回 Chime 连接数据。 部署 [开始WebRTC 联系样本](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples/tree/main/Backend/AmazonConnectNetraApiSample)所需的时间 `input: "voice"` 财务报告和审定财务报表 `input: "voiceMini"`。通过 `config.voiceEndpoint`。 。 。 . |
| **实例标识** | 亚马逊连接客户实例(UUID) 联系人创建于其中. `config.instanceId`。 。 。 . |
| **联系人流程标识** | 处理联系人的接触流程(UUID). `config.contactFlowId`。 。 。 . |
| **地区** | 您的例子中的 AWS 区域, 例如 . `us-west-2`。 。 。 . `config.region`。 。 。 . |

这就是你需要的 聊天和语音. **现场同步是可选的** - 这个 还需要一个代理CX设计器(ACXD)应用程序;见下文.

### 建立亚马逊连接客户端

1.  **创建联系人流程** 在您的亚马逊连接客户实例中 处理联系人; 注意 **实例标识** 财务报告和审定财务报表 **联系流程 ID**。 。 。 .
2.  **站起浏览器端点** 因此,页面可以创建一个联系人—— [启动聊天联系](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/cloudformationTemplates/startChatContactAPI) (聊天)和 [开始WebRTC 联系](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples/tree/main/Backend/AmazonConnectNetraApiSample) 以上(声)端.

### 添加 Live 同步( 可选)

Live Sync使对话与屏幕界面同步. 这是 只有需要 ACXD 的特性;没有它便可以进行简单的聊天和语音工作。 启用 内容:

1.  **构建ACXD应用程序.** 在ACXD Canvas, 有线 `Start` − a 个 **现场同步** 节点 `Exit application`。在现场同步节点上,宣布 助手可以使用的动作和范围(或用此定义在苍蝇上) 用于快速原型的SDK——见 [现场同步](https://npmcn.com/package/%40amazon-connect-touchpoint/web/#readme-live-sync) 页:1.
    
    ![A Live Sync node in the ACXD Canvas: Start → Live Sync (with actions) → Exit application](https://npmcn.com/package/%40amazon-connect-touchpoint/web/livesync-acxd-canvas.png)
    
2.  **出版并复制您的密钥.** 部署应用程序,然后复制 **部署密钥** 财务报告和审定财务报表 **API 密钥** 从它的设置.
    
3.  **联系方式进入其中** 因此联系人到达ACXD应用程序, 并传递密钥为 `liveSync.deploymentKey` 编号 : `liveSync.apiKey`。 。 。 .
    

这个 [互动操场](https://npmcn.com/package/%40amazon-connect-touchpoint/web/#readme-interactive-playground) 让您插入这些值 进入一个形式,并启动一个现场实例 不写任何代码.

## 实例

### 聊天

```js
import { create } from "@amazon-connect-touchpoint/web";

const touchpoint = await create({
  config: {
    // Your StartChatContact endpoint (e.g. an API Gateway route) that mints a
    // participant token.
    chatEndpoint: "REPLACE_WITH_START_CHAT_ENDPOINT",
    instanceId: "REPLACE_WITH_INSTANCE_ID",
    participantDisplayName: "REPLACE_WITH_PARTICIPANT_DISPLAY_NAME",
    contactFlowId: "REPLACE_WITH_CONTACT_FLOW_ID",
    region: "us-east-1",
  },
  input: "text",
});
```

### 自定义聊天客户端( 高级)

默认情况下, Touchpoint 直接与 Amazon 连接参与者服务交谈 从使用参与者符号的浏览器中获取。 路由每个参与者服务 使用自己的后端调用(所以符号从未到达浏览器), 扩展 `ChatClient` 并通过一个实例作为 `customChatClient`。 。 。 . `ChatClient` 实值 从 [amazon 连接聊天室](https://github.com/amazon-connect/amazon-connect-chatjs#connectchatsessionchatclient)· ; 参见其执行方法的文件.

```js
import { create, ChatClient } from "@amazon-connect-touchpoint/web";

class MyChatClient extends ChatClient {
  createParticipantConnection(participantToken, type, acknowledgeConnection) {
    /* TODO: call your backend */
  }
  disconnectParticipant(connectionToken) {
    /* TODO: disconnect participant */
  }
  sendMessage(connectionToken, content, contentType, clientToken) {
    /* TODO: send message */
  }
  sendEvent(connectionToken, contentType, content, clientToken) {
    /* TODO: send event */
  }
  getTranscript(connectionToken, args) {
    /* TODO: get transcript */
  }
  // Other optional properties
}

const touchpoint = await create({
  config: {
    customChatClient: new MyChatClient(),
    chatEndpoint: "REPLACE_WITH_START_CHAT_ENDPOINT", // The chat endpoint does not need to return a `participantToken`
    instanceId: "REPLACE_WITH_INSTANCE_ID",
    participantDisplayName: "REPLACE_WITH_PARTICIPANT_DISPLAY_NAME",
    contactFlowId: "REPLACE_WITH_CONTACT_FLOW_ID",
    region: "us-east-1",
  },
  input: "text",
});
```

否时 `customChatClient` 提供聊天细节时没有 `participantToken`警告记录在控制台上.

### 语音迷你

一个紧凑而活泼的声音部件。 语音模式通过您的 `StartWebRTCContact` 终点 在移动时, 它垂直堆放, 一个拖动柄 让客户把它移出页面.

```js
import { create } from "@amazon-connect-touchpoint/web";

const touchpoint = await create({
  config: {
    voiceEndpoint: "REPLACE_WITH_START_WEBRTC_ENDPOINT",
    instanceId: "REPLACE_WITH_INSTANCE_ID",
    contactFlowId: "REPLACE_WITH_CONTACT_FLOW_ID",
    region: "us-east-1",
  },
  input: "voiceMini", // or "voice" for the full-screen experience
});
```

### 布局

`windowSize` 控制如何显示扩展的经验(适用于聊天) 和全屏声音; `voiceMini` 总是紧凑的浮动部件 :

-   `half` _(默认)_ 右侧和其余部分与小组重叠 页面已淡出.
-   `full` ——覆盖整个景区.
-   `floating` ——一个被剥离的圆形面板,在页面上徘徊而无 淡化它,所以网站保持可见性和互动性.
-   `side-by-side` ——一面板对接右边缘进行全高;更宽 取景口 页面被面板宽度所收缩,所以没有隐藏 它可以同时使用.

`floating` 财务报告和审定财务报表 `side-by-side` 用于浏览时聊天的理想方式——方式 语音对话已经在页面旁边运行 .

```js
const touchpoint = await create({
  config: {/* … */},
  input: "text",
  windowSize: "side-by-side",
});
```

### 他们

传递部分 `theme` 来配合你的品牌。 这个 **口音** 颜色驱动器突出 元素 — 发送按钮、 加载器、 选定状态和语音 音频信号波纹 和默认为黑/白 所以设置一个品牌口音是 立即可见 口音上的对比前景( 如发出箭头) 自动生成.

```js
const touchpoint = await create({
  config: {/* … */},
  theme: {
    accent: "#22c55e",
    // Optional overrides: primary, secondary, background, fontFamily, …
  },
});
```

#### 容器样式

将扩大的面板置于或大小与 `windowSize` 预设 允许,通过 `containerStyle`触点使一个封闭的阴影根内,所以 在主机页面上写入的 CSS 无法到达它—— 样式对象是支持的方式 ,并应用在预设自身样式上.

它只适用于整个谈话容器——扩大的聊天和 全屏语音体验. 发射图标和 `voiceMini` 部件是 定位为自身紧凑的浮动元素,不受影响.

```js
const touchpoint = await create({
  config: {/* … */},
  windowSize: "floating",
  containerStyle: {
    borderLeft: "1px solid #efefef",
  },
});
```

配置可按 JSON 提供 `configuration` 属性 `<connect-touchpoint>` 元素,所以它不被认为可信: 容器级别属性(位置、大小、间隔、边框、阴影、变换、, ) 被接受,以及负载远程资源的值(.)`url()`, (中文(简体) ), `image-set()`, (中文(简体) ), `element()`)或试图偷运额外申报,用控制台投放 警告 警告他们 使用 `theme` 以重排容器内的内容.

#### 消息发泡

转写信息可以作为气泡,独立地为每一边提供: `userMessageBubble` 给客户留言和 `agentMessageBubble` 联 合 国 帮办的 随着气泡的关闭,信息 变成简单的文本 背景.

然后每个气泡都可以用 `userMessageBubbleStyle` 编号 : `agentMessageBubbleStyle`。这些仅在匹配时应用 `*MessageBubble` 启用了旗帜——一个样式对象自己不会转弯 泡泡开来.

```js
const touchpoint = await create({
  config: {/* … */},
  input: "text",
  userMessageBubble: true,
  agentMessageBubble: true,
  userMessageBubbleStyle: {
    backgroundColor: "#e8f0fe",
    color: "#102a43",
    borderRadius: "20px",
  },
  agentMessageBubbleStyle: {
    backgroundColor: "#f3f3f3",
    color: "#102a43",
    borderRadius: "20px",
  },
});
```

气泡样式使用与 `containerStyle` (共享资源) `CustomStyle` 类型,包括文本 `color`: 仅限 所支持的属性被保存,任何包含 `url()`, (中文(简体) ), `image-set()`, (中文(简体) ), `element()`,评论,或附加声明 控制台警告,因为配置可能以无人信任的JSON方式到达 `configuration` 属性 `<connect-touchpoint>` 键.

#### 图标

每个内置图标都可以被替换为 `icons` 选项。 钥匙是名字 触点导出为 `Icons` (例如:. `Close`, (中文(简体) ), `Send`, (中文(简体) ), `Mic`, (中文(简体) ), `Restart`; 值是反应组件。 你离开的图标 保持他们的默认, 并覆盖到任何地方 触点使图标。 可能是这样 后来更改为 `touchpoint.update({ icons })`。 。 。 .

制作图标的最简单方式是 `createIcon`,则使用 SVG 内容 :

```jsx
import { create, createIcon, html } from "@amazon-connect-touchpoint/web";

// Create icons once, outside of any render, so their identity stays stable.
const Send = createIcon(html`<path d="M3 20L21 12L3 4V10L15 12L3 14V20Z" />`);

const touchpoint = await create({
  config: {/* … */},
  icons: { Send },
});
```

`createIcon` 处理内置图标所依赖的细节,所以您只使用 SVG 需要形状 :

-   **24×24集装箱.** SVG是用 `viewBox="0 0 24 24"`绘制 您的路径在 24x24 网格。 通过第二个论点来改变它,例如. `createIcon(children, { viewBox: "0 0 16 16" })`。 。 。 .
-   **`currentColor`。 。 。 .** 形状充满 `currentColor` 默认,所以 图标来取取它所在的按钮或标签的文本颜色,包括 徘徊和残疾状态。 避免路径中的硬编码颜色 。 对于 基于中风的艺术作品, 设定 `fill: "none"` 财务报告和审定财务报表 `stroke: "currentColor"` 输入 第二个论点: `createIcon(<path d="…" />, { fill: "none", stroke: "currentColor", strokeWidth: 2 })`。 。 。 .
-   **大小和 `className`。 。 。 .** 这个 `size` (以像素计)和 `className` 道具是: 道具是: 适用于 `<svg>` 给你的 没有 `size` 图标填入容器.
-   **无障碍.** 图标从辅助技术中隐藏 可访问名称总是来自周围的按钮或文本.

您也可以通过任何接受的 React 组件 `size` 财务报告和审定财务报表 `className` 相反,比如说,它使一个图标从你自己的设计系统中产生。 没错 然后负责这些道具,以及使用 `currentColor` 如果它应该 遵循周围的文字颜色.

### 欢迎屏幕

对于文字对话,开口助理信息作为 浸润 **欢迎屏幕**: 问候(和任何选择)是中心 垂直, 连接/ 思考状态以信件所在位置为中心 出现。 输入会一直隐藏到第一个消息到达; 如果信件 有选择, 输入被拉起 在问候下面 有选择下面. 它一直持续到客户发送或选择的东西,然后对话 继续作为正常记录。 如果第一个信息包含模式或 向导,则使用普通记录.

默认启用. 设定 `welcomeScreen: false` 来制造一个头痛 从第一个消息。 当a `brandIcon` 设定, 它出现在 欢迎屏幕上方; 设置 `welcomeScreenLogo: false` 藏起来.

```js
const touchpoint = await create({
  config: {/* … */},
  input: "text",
  welcomeScreen: false, // opt out of the immersive welcome screen
});
```

### 隐藏和添加元素

内建的UI可以调取两个元素标识符列表. 使用导出 enums,或无类型环境中的平面字符串.

`hiddenElements` 省去默认元素 :

| `HiddenElement` | 字符串 | 隐藏 |
| --- | --- | --- |
| `HiddenElement.HeaderRestart` | `"header.restart"` | 头部的重启按钮 . |
| `HiddenElement.WelcomeScreenLogo` | `"welcomescreen.logo"` | 欢迎屏上的品牌标志. |

`addedElements` 选择默认关闭的元素 :

| `AddedElement` | 字符串 | 添加数 |
| --- | --- | --- |
| `AddedElement.HeaderClose` | `"header.close"` | 最小按钮右侧一个会崩溃部件的按钮 . |

```js
import {
  create,
  HiddenElement,
  AddedElement,
} from "@amazon-connect-touchpoint/web";

const touchpoint = await create({
  config: {/* … */},
  input: "text",
  hiddenElements: [HiddenElement.HeaderRestart],
  addedElements: [AddedElement.HeaderClose], // or ["header.close"]
});
```

未知值被忽略 。 两种列表可以稍后更改 `update()`。 。 。 . `welcomeScreenLogo: false` 为了躲藏而堕落 `HiddenElement.WelcomeScreenLogo`。 。 。 .

### 助理身份

显示参与者信息时(`showParticipantInfo: true`),自动 助手被标签 **"AI" (英语)** 带有默认图标。 覆盖两者以匹配您的 品牌为 `assistantName` (显示名称)和 `assistantIcon` (图像 URL) )作为助手的外形. `avatarShape` 控制参与者是否 阿凡达人 `"round"` (违约)或 `"square"`。 。 。 .

```js
const touchpoint = await create({
  config: {/* … */},
  input: "text",
  showParticipantInfo: true,
  assistantName: "Ada",
  assistantIcon: "https://example.com/assistant.png",
  avatarShape: "square",
});
```

### 现场同步

Live Sync是本地的亚马逊连接客户端技术同步 与数字、屏幕接口进行语音(或聊天)对话。 顾客看 选项、下一步和实时确认,同时由AI代理指导 ——没有应用,没有频道开关——解锁语音或语音的复杂多步任务 单独聊天不能处理 顾客需要看到 选择 完成行动 在一次持续的对话.

在触点,AI代理驱动页面通过 **自定义动作**: 您 : 在 JSON Schema 中注册一个命名动作, 代理解决客户 输入输入的参数,您的处理器将其应用到页面中.

```js
import { create } from "@amazon-connect-touchpoint/web";

const touchpoint = await create({
  config: {
    chatEndpoint: "REPLACE_WITH_START_CHAT_ENDPOINT",
    participantDisplayName: "REPLACE_WITH_PARTICIPANT_DISPLAY_NAME",
    instanceId: "REPLACE_WITH_INSTANCE_ID",
    contactFlowId: "REPLACE_WITH_CONTACT_FLOW_ID",
    region: "us-east-1",
  },
  input: "voiceMini",
  liveSync: {
    deploymentKey: "REPLACE_WITH_DEPLOYMENT_KEY",
    apiKey: "REPLACE_WITH_API_KEY",
    // `contactId` is optional — defaults to the active session's contact. Set it
    // to bind a separate contact (e.g. an inbound phone call) to this page.
  },
});

// Advertise the actions the AI agent may take (sent once a contact exists):
await touchpoint.sendContext({
  actions: [
    {
      action: "set_cabin_class",
      description: "Choose the cabin class",
      schema: {
        type: "object",
        properties: {
          cabin: { type: "string", enum: ["economy", "business", "first"] },
        },
        required: ["cabin"],
      },
      handler: ({ cabin }) => setCabinClass(cabin),
    },
  ],
});
```

动作也可以配置在 [代理 CX 设计器( ACXD)](https://docs.aws.amazon.com/connect/latest/adminguide/acxd.html) 在 Live Sync 节点上; 在此定义它们对于快速原型化有用 。 改为: 通知 Live 同步脚本, 用户到达一步, 呼叫 `touchpoint.sendStep({ stepId, scriptId, apiKey, context })`。 。 。 .

### 外部( 无用户界面)

使用 `input: "external"` 切入点 **没有实现 UI**打开 聊天或语音联系——它只连接 Live Sync 到已有的 现场接触(由 `liveSync.contactId`这样联系人就可以驱动您 数字资产实时. 常见情况是 **电话**:呼叫者说话 在页面同时更新时插入代理服务器。 没有 `chatEndpoint` 或者说 `voiceEndpoint` 需要; 只有 Live Sync 证书.

```js
import { create } from "@amazon-connect-touchpoint/web";

const touchpoint = await create({
  config: { region: "us-east-1" },
  input: "external",
  liveSync: {
    deploymentKey: "REPLACE_WITH_DEPLOYMENT_KEY",
    apiKey: "REPLACE_WITH_API_KEY",
    contactId: "REPLACE_WITH_CONTACT_ID", // the contact to sync with
  },
});

// Advertise your actions, then drive the page as the agent invokes them.
await touchpoint.sendContext({ actions: [/* … */] });
```

### 自定义模式

除正则模式外,还可以在代码片段中直接定义完全自定义模式为React组件. 如果应用程序消息包含这种模式,则组件会用有效载荷数据以及使与对话互动变得容易的对话处理器来提供.

为了使编写这些反应组件变得简单,并消除汇编JSX的需要,软件包输出为: `html` 标记模板文字 a'la [开发/htm](https://github.com/developit/htm)。 。 。 . `html` 还预装了一系列组件和图标 触点已经用于渲染它的UI,这样你就可以轻松地创建并作好与"触点"在风格上相匹配的标记. 完整列表可见于 [导出定义](https://github.com/amazon-connect/touchpoint/blob/7d34fa3eef1b6308fa2f48b4af38f9e30bc51c38/src/index.tsx#L53-L86),而一个更视觉的指南 将很快提供.

下面是一个完整的例子:

```js
import { create, html } from "@amazon-connect-touchpoint/web";

const touchpoint = await create({
  config: {
    // Your StartChatContact endpoint (e.g. an API Gateway route) that mints a
    // participant token.
    chatEndpoint: "REPLACE_WITH_START_CHAT_ENDPOINT",
    participantDisplayName: "REPLACE_WITH_PARTICIPANT_DISPLAY_NAME",
    instanceId: "REPLACE_WITH_INSTANCE_ID",
    contactFlowId: "REPLACE_WITH_CONTACT_FLOW_ID",
    region: "us-east-1",
  },
  input: "text",
  modalityComponents: {
    MyModality: ({ data, conversationHandler }) => {
      return html`
        <div>
          <p>Are you sure?</p>
          <IconButton
            type="main"
            label="Yes"
            onClick=${() => {
              conversationHandler.sendText("yes");
            }}
            icon="{Check}"
          />
          <IconButton
            type="ghost"
            label="No"
            onClick=${() => {
              conversationHandler.sendText("no");
            }}
            icon="{Close}"
          />
        </div>
      `;
    },
  },
});
```

### 嵌入模式( 高级)

触点还登记a `<connect-touchpoint>` 自定义元素。 设定其 可写入 `touchpointConfiguration` 属性到您将传递给的同一对象 [`create()`](https://npmcn.com/package/%40amazon-connect-touchpoint/web/#readme-api-reference) 开始于 **嵌入模式**没有发射按钮, 并 UI 填入您放入的容器, 因此它会掉入已有的页面 设置.

```html
<div class="my-grid-layout">
  <main>
    <!-- Main page content -->
  </main>
  <aside>
    <connect-touchpoint></connect-touchpoint>
  </aside>
</div>
<script>
  document.querySelector("connect-touchpoint").touchpointConfiguration = {
    config: {
      // Your StartChatContact endpoint (e.g. an API Gateway route) that mints a
      // participant token.
      chatEndpoint: "REPLACE_WITH_START_CHAT_ENDPOINT",
      participantDisplayName: "REPLACE_WITH_PARTICIPANT_DISPLAY_NAME",
      instanceId: "REPLACE_WITH_INSTANCE_ID",
      contactFlowId: "REPLACE_WITH_CONTACT_FLOW_ID",
      region: "us-east-1",
    },
    input: "text",
  };
</script>
```

元素大小本身带有低特异性默认—— `display: block; height: 350px` 页:1 `text` 财务报告和审定财务报表 `voice`, (中文(简体) ), `display: inline-block` 页:1 `voiceMini` —— 说 以适应您的布局 :

```css
connect-touchpoint {
  height: 100%;
}
```

### 结束联系

当基本的亚马逊连接连接结束时——语音呼叫断开 (包括在升级的代理解决并挂起之后)或聊天联系人是 关闭——触点起火 `onContactEnded`。对于语音输入,默认动作 将部件折叠回发射台; 聊天保存结束的记录 可见。 此事件可取消, 您可以接管 :

```js
const touchpoint = await create({
  config: {/* … */},
  input: "voice",
  onContactEnded: (event) => {
    // Keep the widget open and handle the end yourself:
    // event.preventDefault();
    console.log("contact ended");
  },
});
```

## 互动操场

本地运行项目启动一个互动游乐场,涵盖每个 能力(聊天、语音、语音小声和现场同步):

```bash
npm install
npm run dev
# then open http://localhost:5173
```

## API 参考

SDK的全部规格——每个配置选项、类型和模式 构成部分——来源和生活 **[`docs/`](https://npmcn.com/package/%40amazon-connect-touchpoint/web/docs/README.md)**。 。 。 .

共同切入点:

-   [`create(config)`](https://npmcn.com/package/%40amazon-connect-touchpoint/web/docs/README.md) 创建并挂起触点实例.
-   `TouchpointConfiguration` ——顶级选项(`config`, (中文(简体) ), `input`, (中文(简体) ), `colorMode`, (中文(简体) ), `windowSize`, (中文(简体) ), `theme`, (中文(简体) ), `containerStyle`, (中文(简体) ), `liveSync`, (中文(简体) ), `brandIcon`, (中文(简体) ), `onContactEnded`, (中文(简体) ), `userMessageBubble`, (中文(简体) ), `agentMessageBubble`, (中文(简体) ), `userMessageBubbleStyle`, (中文(简体) ), `agentMessageBubbleStyle`, (中文(简体) ), `welcomeScreen`, (中文(简体) ), `welcomeScreenLogo`, (中文(简体) ), `hiddenElements`, (中文(简体) ), `addedElements`, (中文(简体) ), `showParticipantInfo`, (中文(简体) ), `assistantName`, (中文(简体) ), `assistantIcon`, (中文(简体) ), `avatarShape`, (中文(简体) ), `icons`(中文(简体) ).
-   `ConnectConfig` ——亚马逊连接客户端连接细节.
-   `LiveSyncConnection` 编号 : `LiveSyncContextInput` ——现场同步连接和 动作 / 范围 / 目的地 , 您向 AI 代理公司 发布广告 .

## 许可证

[麻省理工学院](https://npmcn.com/package/%40amazon-connect-touchpoint/web/LICENSE)

## 常见问题

### @amazon-connect-touchpoint/web 是什么？

Amazon 连接客户端的谈话 UI 和 SDK

### 如何安装 @amazon-connect-touchpoint/web？

在项目目录运行 npm install @amazon-connect-touchpoint/web，或使用 pnpm add / yarn add / bun add。

### @amazon-connect-touchpoint/web 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @amazon-connect-touchpoint/web 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @amazon-connect-touchpoint/web 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.19\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @amazon-connect-touchpoint/web 可以商用吗？

@amazon-connect-touchpoint/web 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @amazon-connect-touchpoint/web 的下载量有多少？

根据 npm 官方下载统计，@amazon-connect-touchpoint/web 在 2026/10/06 – 2026/11/04 这 30 天内被下载 3,354 次，日均约 112 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @amazon-connect-touchpoint/web 还在维护吗？

最新版本 1\.0\.6 发布于 2026/11/09（今天）；至今共发布 17 个版本，其中过去 12 个月发布了 17 个；首次发布于 2026/09/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

