im-sdk 一个轻量级的前端消息展示框架

im-sdk是一个基于React+Mobx的聊天消息显示框架，主要组成部分为消息展示列表。

界面预览

快速开始

<!-- 页面上声明一个容器用于Mount组件 -->
<div class="root"></div>

import React from 'react';
import ImSdk from 'im-sdk';
import Product from './components/product';

// 获取sdk实例
const sdk = new ImSdk();
// 将实例渲染到root标签上，然后获取bot实例
const bot = sdk.render('#root');

bot.text('您好，我是Jimi智能机器人', 'robot').new().then(()=> {
    return bot.text('有什么我能帮助您的吗？', 'robot').new();
}).then(()=> {
    return bot.text('我想查询一下我的订单到哪里了', 'human').new();
}).then(()=> {
    return bot.component(Product, {}).new();
}).then(()=> {
    return bot.text('是这个商品吗？','robot').new();
}).then(()=> {
    return bot.text('是的','human').new();
}).then(()=> {
    return bot.text('当前商品正在配送中，预计下午两点中送达，请耐心等待！如有需要，可直接联系配送员,配送员联系电话：13800138000', 'robot').new()
});

接口预览

sdk

|函数名|参数|说明| |-----|---|----| |sdk.render(root)|string|渲染聊天列表组件，将其挂载到参数中提供的Dom节点上| |sdk.mountEditor(editor)|React Component|添加聊天编辑框，聊天编辑框位于聊天列表下方| |sdk.mountHeader(header)|React Component|添加当天对话者信息，该组件位于消息列表的上方| |sdk.registerScrollEvent(fn)|function|添加下拉刷新时的回调函数，当列表到达顶部后继续下拉，则触发回调函数|

bot

|函数名|参数|说明| |-----|---|----| |bot.text(content, target)|(string, string)|往消息列表中添加文本消息| |bot.image(url, target)|(string, string)|往消息列表中添加图片消息| |bot.component(com,data)|(Component, Object)|再消息列表中渲染一个自定义组件消息| |bot.system(content)|string|渲染一条系统提示消息| |bot.timeLine(date)|string/number/Date|渲染一条时间消息|

若要正确的渲染消息，还需要再以上接口的基础上调用new()或old()方法，new()表示再消息列表底部追加新消息, old()表示在消息列表的最前面插入消息，可用于添加历史消息记录。使用方式如下所示：

bot.text('Hello world', 'human').new();  // 在消息列表底部渲染一条新信息
bot.text('Hello javascript').old();      // 在消息列表顶部插入一条信息

自定义组件示例

如果我们想在消息列表中渲染一条自定义组件消息，则需要对组件消息进行定义，下面示例定义了一个商品信息组件

• 自定义组件消息定义(product.js)

import React from 'react';

class Product extends React.PureComponent {
    render() {
        return (
            <div className="product">
                <div className="product__title">{this.props.data.name}</div>
                <div className="product__image" style={{backgroundImage: `url('${this.props.data.cover}')`}}/>
                <div className="product__price">&yen;{this.props.data.price}</div>
            </div>
        );
    }
    componentDidMount() {
        this.props.done(this.props.data);
    }
}
export default Product;

• 渲染自定义组件消息

import Product from './product.js';
const data = {
    name : '商品名称',
    cover: '商品封面',
    price: '商品价格'
};
bot.component(Product, data).new();

对于每个自定义组件，父组件会向其传入两个参数：

• data
• done

data为渲染组件需要用到的数据，done为组件渲染完成或用户主动操作后必须要调用的回调函数，若往done中添加一个参数，则上层的Promise或获取到返回的值。

bot.component(Product, data).then(res=> {
    console.log(res); // res为调用done()方法时返回的值
})