Sesame AI Assistant

芝麻 AI 助手

UMD 方式使用

1<div id="app"></div>
2<div id="controls">
3  <button id="unmount">Unmount</button>
4  <button id="reinit">Reinit</button>
5</div>
6<script src="sesame-ai-assistant/dist/index.umd.js"></script>
7<script >
8  var instance = null;
9  function init() {
10    instance = new SesameAIAssistant.ChatBox({
11      target: document.getElementById('app'),
12      props: {
13        themeColor: "#1890ff",
14        title: "知识问答",
15        icon: undefined,
16        botAvatar: "https://img14.360buyimg.com/imagetools/jfs/t1/66037/3/24346/9414/64b11b21F51d90361/8f015973cbb7de8d.png",
17        userAvatar: "https://img14.360buyimg.com/imagetools/jfs/t1/66037/3/24346/9414/64b11b21F51d90361/8f015973cbb7de8d.png",
18        knowledgeId: "drip",
19        erpNo: "dripofficial",
20        keyWords: "水滴表格配置",
21        ext1Options: [
22          { name: '问答', value: '1' },
23        ],
24        ext2Options: [
25          { name: '表格', value: 'table' },
26          { name: '表单', value: 'form' },
27        ],
28        greetings: "您好，请问有什么可以帮您？",
29        i18n: {
30          'Examples::Just start': '直接开始 ！',
31          // More i18n see src/i18n.ts
32        },
33        locale: "zh_CN",
34        examples: [
35          "什么是表格？",
36          "如何在表格中新增一列？",
37        ],
38        inputOptions: {
39          mentions: {
40            items: [
41              { type: 'custom-with-icon', text: '新表格(15091)', value: '创建新表格(15091)' },
42              { text: '表单(15093)', value: '创建表单(15093)' },
43              { text: '输入框(15094)', value: '创建输入框(15094)' },
44            ],
45            renderMenuItem(item) {
46              if (item.type === 'custom-with-icon') {
47                return `${item.text} 😀`;
48              }
49            },
50            renderInputItem: (item) => {
51              const innerHTML = item.type === 'custom-with-icon'
52                ? `😀${item.text}`
53                : item.text;
54              return `<span style="border: 1px solid #d8d8d8; background: #d8d8d8; padding: 2px 3px; border-radius: 3px;">${innerHTML}</span>`;
55            },
56            renderMessageItem: (item) => {
57              const innerHTML = item.type === 'custom-with-icon'
58                ? `😀${item.text}`
59                : item.text;
60              return `<span style="border: 1px solid #5fb2ff; background: #5fb2ff; padding: 2px 3px; border-radius: 3px;">${innerHTML}</span>`;
61            },
62          },
63        },
64        env: "dev",
65        bizId: 'drip',
66        bizToken: 'c4b71c84-fb80-4dcb-94ca-4f25d37d0ae5',
67        bizName: '水滴',
68        onBuildingRevert: () => { console.log('onBuildingRevert'); } ,
69        onReceiveMessage: (m)=> { console.log('onReceiveMessage', m); },
70        onClose: () => { console.log('onClose') },
71        onMessageBodyRender: (e, m) => { console.log('onMessageBodyRender', e, m); },
72        onMessageFooterRender: (e, m) => { console.log('onMessageFooterRender', e, m); },
73        onMessageImageClick: (e, m) => { console.log('onMessageImageClick', e, m); },
74        onMessageImageMouseEnter: (e, m) => { console.log('onMessageImageMouseEnter', e, m); },
75      },
76    });
77  };
78  document.getElementById('unmount').addEventListener('click', function unmount() {
79    if (!instance) {
80      return;
81    }
82    instance.$destroy();
83    instance = null;
84  });
85  document.getElementById('reinit').addEventListener('click', function reinit() {
86    if (instance) {
87      instance.reinit();
88    } else {
89      init();
90    }
91  });
92  init();
93</script>

ESM 方式使用

1<link rel="stylesheet" href="sesame-ai-assistant/dist/assets/index.css">
2<div id="app"></div>
3<div id="controls">
4  <button id="unmount">Unmount</button>
5  <button id="reinit">Reinit</button>
6</div>
7<script type="module">
8  import { ChatBox } from 'sesame-ai-assistant/dist/index.es.js';
9
10  var instance = null;
11  function init() {
12    instance = new SesameAIAssistant.ChatBox({
13      target: document.getElementById('app'),
14      props: {
15        themeColor: "#1890ff",
16        textColor: "#FFFFFF",
17        title: "知识问答",
18        icon: undefined,
19        botAvatar: "https://img14.360buyimg.com/imagetools/jfs/t1/66037/3/24346/9414/64b11b21F51d90361/8f015973cbb7de8d.png",
20        userAvatar: "https://img14.360buyimg.com/imagetools/jfs/t1/66037/3/24346/9414/64b11b21F51d90361/8f015973cbb7de8d.png",
21        knowledgeId: "drip",
22        erpNo: "dripofficial",
23        keyWords: "水滴表格配置",
24        ext1Options: [
25          { name: '问答', value: '1' },
26        ],
27        ext2Options: [
28          { name: '表格', value: 'table' },
29          { name: '表单', value: 'form' },
30        ],
31        greetings: "您好，请问有什么可以帮您？",
32        i18n: {
33          'Examples::Just start': '直接开始 ！',
34          // More i18n see src/i18n.ts
35        },
36        locale: "zh_CN",
37        examples: [
38          "什么是表格？",
39          "如何在表格中新增一列？",
40        ],
41        inputOptions: {
42          mentions: {
43            items: [
44              { type: 'custom-with-icon', text: '新表格(15091)', value: '创建新表格(15091)' },
45              { text: '表单(15093)', value: '创建表单(15093)' },
46              { text: '输入框(15094)', value: '创建输入框(15094)' },
47            ],
48            renderMenuItem(item) {
49              if (item.type === 'custom-with-icon') {
50                return `${item.text} 😀`;
51              }
52            },
53            renderInputItem: (item) => {
54              const innerHTML = item.type === 'custom-with-icon'
55                ? `😀${item.text}`
56                : item.text;
57              return `<span style="border: 1px solid #d8d8d8; background: #d8d8d8; padding: 2px 3px; border-radius: 3px;">${innerHTML}</span>`;
58            },
59            renderMessageItem: (item) => {
60              const innerHTML = item.type === 'custom-with-icon'
61                ? `😀${item.text}`
62                : item.text;
63              return `<span style="border: 1px solid #5fb2ff; background: #5fb2ff; padding: 2px 3px; border-radius: 3px;">${innerHTML}</span>`;
64            },
65          },
66        },
67        env: "dev",
68        bizId: 'drip',
69        bizToken: 'c4b71c84-fb80-4dcb-94ca-4f25d37d0ae5',
70        bizName: '水滴',
71        onBuildingRevert: () => { console.log('onBuildingRevert'); } ,
72        onReceiveMessage: (m)=> { console.log('onReceiveMessage', m); },
73        onClose: () => { console.log('onClose') },
74        onMessageBodyRender: (e, m) => { console.log('onMessageBodyRender', e, m); },
75        onMessageFooterRender: (e, m) => { console.log('onMessageFooterRender', e, m); },
76        onMessageImageClick: (e, m) => { console.log('onMessageImageClick', e, m); },
77        onMessageImageMouseEnter: (e, m) => { console.log('onMessageImageMouseEnter', e, m); },
78      },
79    });
80  };
81  document.getElementById('unmount').addEventListener('click', function unmount() {
82    if (!instance) {
83      return;
84    }
85    instance.$destroy();
86    instance = null;
87  });
88  document.getElementById('reinit').addEventListener('click', function reinit() {
89    if (instance) {
90      instance.reinit();
91    } else {
92      init();
93    }
94  });
95  init();
96</script>