Sesame AI Assistant

芝麻 AI 助手

UMD 方式使用

<div id="app"></div>
<div id="controls">
  <button id="unmount">Unmount</button>
  <button id="reinit">Reinit</button>
</div>
<script src="sesame-ai-assistant/dist/index.umd.js"></script>
<script >
  var instance = null;
  function init() {
    instance = new SesameAIAssistant.ChatBox({
      target: document.getElementById('app'),
      props: {
        themeColor: "#1890ff",
        title: "知识问答",
        icon: undefined,
        botAvatar: "https://img14.360buyimg.com/imagetools/jfs/t1/66037/3/24346/9414/64b11b21F51d90361/8f015973cbb7de8d.png",
        userAvatar: "https://img14.360buyimg.com/imagetools/jfs/t1/66037/3/24346/9414/64b11b21F51d90361/8f015973cbb7de8d.png",
        knowledgeId: "drip",
        erpNo: "dripofficial",
        keyWords: "水滴表格配置",
        ext1Options: [
          { name: '问答', value: '1' },
        ],
        ext2Options: [
          { name: '表格', value: 'table' },
          { name: '表单', value: 'form' },
        ],
        greetings: "您好，请问有什么可以帮您？",
        i18n: {
          'Examples::Just start': '直接开始 ！',
          // More i18n see src/i18n.ts
        },
        locale: "zh_CN",
        examples: [
          "什么是表格？",
          "如何在表格中新增一列？",
        ],
        inputOptions: {
          mentions: {
            items: [
              { type: 'custom-with-icon', text: '新表格(15091)', value: '创建新表格(15091)' },
              { text: '表单(15093)', value: '创建表单(15093)' },
              { text: '输入框(15094)', value: '创建输入框(15094)' },
            ],
            renderMenuItem(item) {
              if (item.type === 'custom-with-icon') {
                return `${item.text} 😀`;
              }
            },
            renderInputItem: (item) => {
              const innerHTML = item.type === 'custom-with-icon'
                ? `😀${item.text}`
                : item.text;
              return `<span style="border: 1px solid #d8d8d8; background: #d8d8d8; padding: 2px 3px; border-radius: 3px;">${innerHTML}</span>`;
            },
            renderMessageItem: (item) => {
              const innerHTML = item.type === 'custom-with-icon'
                ? `😀${item.text}`
                : item.text;
              return `<span style="border: 1px solid #5fb2ff; background: #5fb2ff; padding: 2px 3px; border-radius: 3px;">${innerHTML}</span>`;
            },
          },
        },
        env: "dev",
        bizId: 'drip',
        bizToken: 'c4b71c84-fb80-4dcb-94ca-4f25d37d0ae5',
        bizName: '水滴',
        onBuildingRevert: () => { console.log('onBuildingRevert'); } ,
        onReceiveMessage: (m)=> { console.log('onReceiveMessage', m); },
        onClose: () => { console.log('onClose') },
        onMessageBodyRender: (e, m) => { console.log('onMessageBodyRender', e, m); },
        onMessageFooterRender: (e, m) => { console.log('onMessageFooterRender', e, m); },
        onMessageImageClick: (e, m) => { console.log('onMessageImageClick', e, m); },
        onMessageImageMouseEnter: (e, m) => { console.log('onMessageImageMouseEnter', e, m); },
      },
    });
  };
  document.getElementById('unmount').addEventListener('click', function unmount() {
    if (!instance) {
      return;
    }
    instance.$destroy();
    instance = null;
  });
  document.getElementById('reinit').addEventListener('click', function reinit() {
    if (instance) {
      instance.reinit();
    } else {
      init();
    }
  });
  init();
</script>

ESM 方式使用

<link rel="stylesheet" href="sesame-ai-assistant/dist/assets/index.css">
<div id="app"></div>
<div id="controls">
  <button id="unmount">Unmount</button>
  <button id="reinit">Reinit</button>
</div>
<script type="module">
  import { ChatBox } from 'sesame-ai-assistant/dist/index.es.js';

  var instance = null;
  function init() {
    instance = new SesameAIAssistant.ChatBox({
      target: document.getElementById('app'),
      props: {
        themeColor: "#1890ff",
        textColor: "#FFFFFF",
        title: "知识问答",
        icon: undefined,
        botAvatar: "https://img14.360buyimg.com/imagetools/jfs/t1/66037/3/24346/9414/64b11b21F51d90361/8f015973cbb7de8d.png",
        userAvatar: "https://img14.360buyimg.com/imagetools/jfs/t1/66037/3/24346/9414/64b11b21F51d90361/8f015973cbb7de8d.png",
        knowledgeId: "drip",
        erpNo: "dripofficial",
        keyWords: "水滴表格配置",
        ext1Options: [
          { name: '问答', value: '1' },
        ],
        ext2Options: [
          { name: '表格', value: 'table' },
          { name: '表单', value: 'form' },
        ],
        greetings: "您好，请问有什么可以帮您？",
        i18n: {
          'Examples::Just start': '直接开始 ！',
          // More i18n see src/i18n.ts
        },
        locale: "zh_CN",
        examples: [
          "什么是表格？",
          "如何在表格中新增一列？",
        ],
        inputOptions: {
          mentions: {
            items: [
              { type: 'custom-with-icon', text: '新表格(15091)', value: '创建新表格(15091)' },
              { text: '表单(15093)', value: '创建表单(15093)' },
              { text: '输入框(15094)', value: '创建输入框(15094)' },
            ],
            renderMenuItem(item) {
              if (item.type === 'custom-with-icon') {
                return `${item.text} 😀`;
              }
            },
            renderInputItem: (item) => {
              const innerHTML = item.type === 'custom-with-icon'
                ? `😀${item.text}`
                : item.text;
              return `<span style="border: 1px solid #d8d8d8; background: #d8d8d8; padding: 2px 3px; border-radius: 3px;">${innerHTML}</span>`;
            },
            renderMessageItem: (item) => {
              const innerHTML = item.type === 'custom-with-icon'
                ? `😀${item.text}`
                : item.text;
              return `<span style="border: 1px solid #5fb2ff; background: #5fb2ff; padding: 2px 3px; border-radius: 3px;">${innerHTML}</span>`;
            },
          },
        },
        env: "dev",
        bizId: 'drip',
        bizToken: 'c4b71c84-fb80-4dcb-94ca-4f25d37d0ae5',
        bizName: '水滴',
        onBuildingRevert: () => { console.log('onBuildingRevert'); } ,
        onReceiveMessage: (m)=> { console.log('onReceiveMessage', m); },
        onClose: () => { console.log('onClose') },
        onMessageBodyRender: (e, m) => { console.log('onMessageBodyRender', e, m); },
        onMessageFooterRender: (e, m) => { console.log('onMessageFooterRender', e, m); },
        onMessageImageClick: (e, m) => { console.log('onMessageImageClick', e, m); },
        onMessageImageMouseEnter: (e, m) => { console.log('onMessageImageMouseEnter', e, m); },
      },
    });
  };
  document.getElementById('unmount').addEventListener('click', function unmount() {
    if (!instance) {
      return;
    }
    instance.$destroy();
    instance = null;
  });
  document.getElementById('reinit').addEventListener('click', function reinit() {
    if (instance) {
      instance.reinit();
    } else {
      init();
    }
  });
  init();
</script>