高济机器人聊天组件

安装

npm set registry http://npmrepo.cowelltech.com/

npm install cowell-ai-chat --save-dev

在页面中使用

引入

import AiChat from 'cowell-ai-chat';

import 'cowell-ai-chat/lib/main.css';

使用

render() {
        const id = getUrlParam('id');
        const env = getEnv().toLocaleUpperCase();
        return (
            <div >
                <AiChat
                    robotId={id}
                    env={env}
                />
            </div>
        )
    }

页面效果

参数

| 参数名 | 类型 | 是否必填 | 默认值 | 说明 | | ---------------------- | --------------------------------------------- | -------- | ------------- | ------------------------------------------------------------------------------------ | | robotId | string | 是 | 25 | 机器人id | | sessionId | string | 是 | - | 会话id (用于保存会话记录，推荐传当前用户id) | | env | string | 否 | "TEST" | 运行环境(LOCAL,TEST,STAGE,PROD) | | containerStyle | React.CSSProperties | 否 | - | 最外层容器style | | agreementName | string | 否 | - | 协议名称 | | agreementLink | string | 否 | - | 协议跳转链接 | | timeFormat | string | 否 | "MM-DD HH:ss" | 发送消息时间格式 | | textAreaProps_message | string | 否 | - | 发送输入框props | | placeholder_message | string | 否 | - | 发送消息输入框placeholder | | feedbackModalOptions | {title, subTitle, placeholder} | 否 | - | 反馈按钮弹框配置 (title: 主标题, subTitle: 副标题) | | onSendMessage | (text) => void | 否 | - | 发送消息事件 text: 发送文案 | | onAnswer | ({answer, timestamp}) => void | 否 | - | 机器人回答 answer: 机器人回答文案； timestamp: 回答所需时间 | | onConversationComplete | ({answer, question, timestamp}) => void | 否 | - | 一次对话完成 question: 问题文案 | | onBtnClick | (text) => void | 否 | - | 发送按钮点击 | | onNewSessionBtnClick | () => void | 否 | - | 新会话按钮点击 | | onGeetingCardShow | () => void | 否 | - | 欢迎语卡片展示 | | onTemplateClick | ({templateContent, templatePosition}) => void | 否 | - | 问题模版点击 templateContent: 模版内容 templatePosition: 模版位置 1快捷键2欢迎语 | | onActionButtonClick | ({messageItem, type}) => void | 否 | - | 机器人操作按钮点击 type: ACTION_TYPE messageItem: { question: 问题, answer: 答案} | | newSessionBtnRenderer | () => any | 否 | - | 新会话按钮渲染函数 | | sendMessageBtnRenderer | () => any | 否 | - | 发送消息按钮渲染函数 | | helpfulBtnRenderer | (active) => any | 否 | - | 有帮助按钮渲染函数 active: 按钮是否是激活状态 | | helplessBtnRenderer | (active) => any | 否 | - | 无帮助按钮渲染函数 | | reAskBtnRenderer | () => any | 否 | - | 重新询问按钮渲染函数 | | copyBtnRenderer | () => any | 否 | - | 复制按钮渲染函数 | | audioPlayBtnRenderer | (isPlaying, loading) => any | 否 | - | 语音播放按钮渲染函数 isPlaying:语音是否正在播放 , loading: 首次加载语音loading状态 | | onArgeementClick | (link) => any | 否 | - | 协议点击 |

/**反馈 */
export enum ACTION_TYPE {
    /**有帮助 */
    HELP = 1,
    /**没帮助 */
    UN_HELP = 2,
    /**重新询问 */
    REASK = 3,
    /**复制 */
    COPY = 4,
    /**复制 */
    AUDIO_PLAY = 5,
}

自定义样式表

在样式中使用

:global {
    .ai_chat_page_wrapper {
        ...
    }
}

| 类名 | 说明 | | ------------------------------------- | ------------------------------------------------ | | ai_chat_page_wrapper | 最外层容器（宽高、背景色，等） | | ai_chat_message_container | 对话列表容器 | | ai_chat_message_item | 消息外层容器 | | ai_chat_message_item_container_system | 消息外层容器(系统消息) | | ai_chat_message_item_system | 消息容器(系统消息) | | ai_chat_message_item_user | 用户消息外层容器 | | ai_chat_message_item_robot | 机器人消息外层容器 | | ai_chat_head | 头像 （_user用户后缀、_robot机器人后缀） | | ai_chat_message_item_text | 消息文字（_user用户后缀、_robot机器人后缀） | | ai_chat_message_item_text_container | 消息内容容器 （_user用户后缀、_robot机器人后缀） | | ai_chat_sendmessage_bar | 底部发送消息容器 | | ai_chat_agreement | 协议容器 | | ai_chat_agreement_label | "请遵守"部分样式 | | ai_chat_agreement_name | 协议名称部分样式 | | ai_chat_search_container | 联想词&指令容器 | | ai_chat_search_item | 联想词&指令容器每条容器 | | ai_chat_input | 输入框 | | ai_chat_send_btn_container | 发送按钮容器 | | ai_chat_newsession_btn_container | 新会话按钮容器 | | ai_chat_message_item_action_item | 操作按钮容器（有帮助、无帮助，复制按钮等） | | ai_chat_conversation_btn | 聊天记录按钮 | | ai_chat_feed_back_modal | 反馈弹窗最外层容器 | | ai_chat_feed_back_modal_content | 反馈弹窗内容容器 | | ai_chat_feed_back_modal_header | 反馈弹窗头部容器 | | ai_chat_feed_back_modal_title | 反馈弹窗标题 | | ai_chat_feed_back_modal_body | 反馈弹窗body容器 | | ai_chat_feed_back_modal_subtitle | 反馈弹窗副标题 | | ai_chat_feed_back_modal_textarea | 反馈弹窗文本框 | | ai_chat_feed_back_modal_footer | 反馈弹窗按钮容器 | | ai_chat_feed_back_modal_button_cancel | 反馈弹窗取消按钮 | | ai_chat_feed_back_modal_button_submit | 反馈弹窗提交按钮 |

全局css变量

变量修改方式

document.documentElement.style.setProperty('--ai-font-size-small', '14px')

| 变量 | 值 | 说明 | | --------------------- | ---- | ---------------------------------------- | | --ai-font-size-small | 12px | 小字文案：协议文案、提示文案、动作按钮等 | | --ai-font-size-normal | 14px | 正常文字大小：消息内容、描述文案等 | | --ai-font-size-big | 22px | 标题文案：机器人介绍、突出显示字体等 |

页面结构

├── README.md
├── global.d.ts
├── lib // 打包文件
│   ├── index.js
│   └── main.css
├── package-lock.json
├── package.json
├── src
│   ├── app.tsx
│   ├── components
│   │   ├── ai-chat
│   │   ├── enums.ts
│   │   ├── index.ts
│   │   └── message-item
│   ├── entry.js    // 打包模式入口文件
│   ├── index.ejs   // 开发模式页面模版
│   ├── index.less  // 公共样式表
│   ├── index.tsx   // 开发模式页面入口
│   ├── types       // 组件类型声明
│   │   ├── ai-chat.d.ts
│   │   └── message-item.d.ts
│   └── utils       // 公共方法
│       ├── index.ts
│       └── request.ts
├── tsconfig.json
├── webpack.config.development.js
├── webpack.config.js
└── webpack.config.production.js

开发模式

npm install

npm run start

打包上传

npm run build

// 修改版本号

npm publish

版本隔离

| 版本规则 | 部门 | | -------- | -------- | | 2.x.x | 客户价值 | | 0.x.x | 互医 |