cowell-ai-chat

高济机器人聊天组件

安装

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	互医