@alicloud-panxi/aicoach-sdk v1.1.39

磐曦 AI Coach 运行时 SDK 使用文档

1. 安装 H5-SDK

npm install @alicloud-panxi/aicoach-sdk --save

2. 快速接入

2.1. 依赖

引入前置依赖包：

react、react-dom、moment（React 推荐 18+）

2.2. 引入

// React
import PanxiAicoachSDK from '@alicloud-panxi/aicoach-sdk';
// Vue 
// import PanxiAicoachSdk from '@alicloud-panxi/aicoach-sdk/dist/index.es.vue';
import '@alicloud-panxi/aicoach-sdk/dist/aicoach-sdk.css';

const params: SDKOptions = {
  // 通过第一步服务端对接后，服务端会透出一个api接口，这个接口地址就是apiPath
  apiPath: 'https://xxx.com/path/to/server',
  // 要渲染的容器dom节点
  container: containerRef.current,

  // 对练场景
  type: 'practice',
  taskId: '843025256126496768',
  interact: 'text',
  userId: '1524004782438033',

  // 报告场景
  type: 'report',
  sessionId: '',

  // UI自定义参数 - 按需
  customOptions: {
    global: {
      // backgroundColor: '#000',
    },
    headerPanel: {
      // isHideTitle: true,
    },
  },
  
  // css主题自定义 - 按需
  cssToken: {
    '--panxi-color-brand': 'rgba(255, 0, 0, 1)',	// 主题色
    '--panxi-font-family': 'PingFang SC'	// 字体
    '--panxi-layout': 'loose' // 宽松布局，不设置则默认紧凑布局，只对报告页生效
  }
};

// 实例化一个渲染对象
const newSdkInstance = new PanxiAicoachSDK(params);

// 获取sessionId
const sessionId = newSdkInstance.getSessionId();

// 关闭对练任务，返回Promise，可异步获取结果
newSdkInstance.closeTask();

// 完成对练任务，返回Promise，可异步获取结果
newSdkInstance.finishTask();

// 销毁渲染对象
newSdkInstance.stop();

interface SDKOptions {
  apiPath: string;
  container: HTMLElement;
  type?: 'practice' | 'report';
  interact?: 'text' | 'chat' | 'call' | 'video' | 'gif';
  apiPathOptions?: Record<string, any>;
  framework?: 'vue' | 'react';
  taskId?: string;
  sessionId?: string;
  userId?: string;
  customOptions?: CustomOptions;
  cssToken?: cssToken;
  onStart?: (data) => void;
  onEnd?: (data) => void;
  onSend?: (data) => void;
  onReceive?: (data) => void;
  onShowReport?: () => void;
}

2.3. 参数说明

2.4. 方法说明

2.5. UI 自定义参数类型 CustomOptions

⚠️ boolean 类型的数据默认值都为 false

• global：全局对象

• headerPanel：头部面板

• messagePanel：消息面板

参数名	描述	类型	扩展字段	上下文
isHideMuteButton	是否隐藏静音按钮	boolean	-	-
isHideWordsTipButton	是否隐藏话术提示按钮	boolean	-	-
inputFocus	输入框聚焦事件	function	-	-
inputBlur	输入框失焦事件	function	-	-
CustomMessage	自定义消息面板组件	HTMLElement	-	字段： ws websocket 对象 rtcInstance AliRtc 实例 messagesList 消息列表 inputType （多输入交互下）当前输入方式 isfirstRoundFinish 是否完成一轮对话isAgentAnswering 智能体是否正在回答realtimeWords 话术提示（流式返回） isUserTalking 用户是否正在录音 scriptInfo 剧本信息
				方法： startRecord() 开始录音 handleCancel() 取消录音 handleSend(type, content?) 发送消息，type='text'为发送文本消息，type='voice'为发送音频，只有发送文本消息时需要传 content handleVolume() 智能体声音播放控制（默认播放智能体声音）handleClickRealtimeWords() 点击生成话术提示字聊天）

• confirmPanel：确认面板（弹窗面板）

• resultPanel：结果面板（抽屉组件）

• reportPanel：报告面板（报告页）

2.6. 版本说明

版本说明;