AI妙读

第三方接入

1. 页面添加AI妙读脚本:

<script src="https://a.webtap.cn/miaodu-sdk-web.iife.js?v=1.0.0"></script>

2. 通过以下代码会在页面运行AI妙读的核心功能，用户可以通过点击右下角AI妙读小图标打开相应功能或者看到某部分感兴趣内容时划选相关内容来与AI妙读进行交互。

<script type="text/javascript">
  MiaoDuSDK.init({
      website_id: 'xxx', // 接入第三方分配的唯一id
      themeName: 'red|yello|green', // 助手主题颜色配置
      enableSearchWeb: true|false, // 默认true，是否开启互联网搜索
      enableQuickInfo: true|false, // 默认true，是否开启快捷指令     
      system: { // 系统默认消息配置
          icon: 'data:image/png;base64,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', // base64
          title: '您好！我是Al妙读，试试这样问我',
          subTitle: 'xxx',
          messages: ['a', 'b', 'c']
      },
      type: undefined | 'mini', // 是否设置为迷你按钮模式
      open: true | false, // true(打开AI妙读窗口)|false(迷你图标展示在右下脚),
      messages: [], // 传递消息 {type: 'file', name: 'xxx.docx', fileUrl: 'xxx.com'}
      userStyles: {}, // css props
      showTop: true | false, // 是否展示窗口顶部信息，默认true,
      inputSize: undefined | 'medium', // 默认输入小型框，medium为中型输入框
      enableToolbar: true | false, // 是否启用当前页面划选文本内容弹出工具栏（释意、总结、中英互译）功能
    });

  // 文档消息渲染展示
  MiaoDuSDK.sendMessage({
    {
      type: "file", // type: 'file'|'image'
      name: "AI妙读文档.doc",
      fileUrl: "https://xxx.com/AI妙读文档.doc",
    }
  });
</script>

3. React组件方式

import React from 'react';
import {createRoot} from 'react-dom/client';
import {SDKWeb} from 'ai-miaodu';

function App({config}) {
  return <SDKWeb {...config} />;
}

const node = document.querySelector('#root');
const root = createRoot(node);
root.render(
  <App
    config={{
      website_id: 'xxx', // 接入第三方分配的唯一id
      themeName: 'red|yello|green', // 助手主题颜色配置
      enableSearchWeb: true|false, // 默认true，是否开启互联网搜索
      enableQuickInfo: true|false, // 默认true，是否开启快捷指令     
      system: { // 系统默认消息配置
          icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAWxSURBVHgB7VtNSFxXFD7nvjeTKRmjEkkMzSKlQoW6mIUQoYEoSGKrtU4tIslKKDSFLLJoKV01gW4CXSS0WXQVC10YaTKaZnAsFruYhSFCU7BgwVKh2kpQ500ztDPO3Ht67hsVf+ZfF9H3Ppj3c+eee+/57rnn3XnnDIALFy5cOBgI+4jQWOyMlNggTNWAaJxEhHpdTgRJJFqSCn73ZDIzVVXH59raMLNT/uH4cqNUohmE8SoPrIZH59PlStECES0Kw/OnyqR+633r+ALsE/ZEQCgUqyGvakHTvMxqBrjoNBAPvHCPCa4zTSBvvttxPKKLHoRXr6BhXAakphLkLT7OM6lTgCqMXowG22otqBBlEzA5ST4rGXsPUfQSQAcX+aBi4CAC1XA7PVAxiK0LR0jQPctrRQbaXkmWI10yAaEfYgFB4h1SdJUQ6vLVY2Vm+fCULxcEimUeWFLPqiKoE0gtfK0txcwjnuGZneDzjOCZJoHaWmq4Tz/32SC0LMIZyI95rvc1KhoKvlk7DyWgKAGjkXiDBPWFAOyk3QNPcNkcAUZRiO/MJP3a3X1suVB72k+gMD4gpa5w77a5E9CSUPgVpehOMFjYnMPhRH3KkAEm6CL7hS7Qy26HFZK2ChBDaZn6tK/zxFKh9ooTMB7/TBFd31LEzgvnWHLIk5b3nzypnb1xY7dDK4ZQZPUqgPjSvhFme/CC/0coE3fvkq+6PtYshNmpgHrY0TZuqyDwWvBC9e1CbWzO6PDkM7835e0nxJe3VmDlWzeueaYfsVl/G/vLPzowgGWttV0gnNmgP51Or0AFWB9DVH+Gw4nb3iN0ntLyI263WX/PS6EjNB7f5lRZn0V5ZG2or+1EQt9vEuBJeQbZnHv1MyvneNlMk2ti4FJ31TK8gOjr9GtTv8dL7DEg/mz7Du2kiTq21hP8waT3LDvzD/WjWN9DaDLGLOHZYp28JGXZpv5igrr+fv7ctgybgPS/Hh+bjR8cAgT0mUbStn4BDkduAgijXmme0h/m6xYcVCBe36LHVK4quTckSJnOrFPRj0FLERxM8GZqQ49QxMr51HKXADgcLgHgcLgEgMPhEgAOh0sAOBwuAeBwuASAw+ESAA6HSwA4HC4B4HA4ngAT9gkcajKttNWkFDYbACc5jqizQzaCLRzmViuGoOkVb3wiXwx/kiNUq2vYbhC8lkuez/MeSdNHj9bO5sowqQR7IuDh+D+NGaV6EPENKxVv5ffQfm1S2bfoO96lI4Lk4H11qmaJA5ZDHGt8jBtVDFX/YCw2aKWwk+Xr8slrpE1+152MWyNjVgQNnFJSjZaaC5ALZRHwn2GYoXAsIDzivFT0viTVlB1X6YED1DNLdA2zqS42PCBCrGDpmSZoBz77SVE/y93id/5PlaJvOBqskysSUAZKJoAH7vd51fd81cKd5Uos0Ca5wN/MsoIziGJJkbTD3kIYBpc1ccDlHHNlh6635wJtKp/R2SUIYoIos6gQbWUEkV8nTmXzkLCRz3U7xh4QAgMkgJcWRrmNkuOc5ViAn5Vu2VbCs4iEUwQyjFJMxZ5VzxTKG9D5Ratr8S5DwSe0HsPfABMXwbS6GXy79icoADsxy0dNwvC8Tkr2c5Fux58djk1kO5SBvfiACVAYlaji3LUJBp07dso6dz8SyyuwmspaPQnxiM21gdZTZFj7BbaQqPJAgOUDhTpV9pH9ibJ94KggEWXL0qkyBeXyYS8EtHPH7aKSTDtiF7hVDOE0+4TPsZK2cG+BS3cfUKyCAvUL8zQIBxAoYbZYnaIEBC/WjvBpBA4p3N8C4HC4BIDD4T4G85S38g+MP+AwQe86c+yZCj0Gz8BhQp4No70EfLyx5h3lIUmDLQ7ehicy0mfraxNQVVVlEWIEnIOZS+v/a7CXgH69NBxOfOwRch4L/BvkMIBnf/lIxrgDLly4cOEC4H8w20iV5rR7HgAAAABJRU5ErkJggg==', // base64
          title: '您好！我是Al妙读，试试这样问我',
          subTitle: 'xxx',
          messages: ['a', 'b', 'c']
      },
      type: undefined | 'mini', // 是否设置为迷你按钮模式
      open: true | false, // true(打开AI妙读窗口)|false(迷你图标展示在右下脚),
      messages: [], // 传递消息 {type: 'file', name: 'xxx.docx', fileUrl: 'xxx.com'}
      userStyles: {}, // css props
      showTop: true | false, // 是否展示窗口顶部信息，默认true,
      inputSize: undefined | 'medium', // 默认输入小型框，medium为中型输入框
      enableToolbar: true | false, // 是否启用当前页面划选文本内容弹出工具栏（释意、总结、中英互译）功能
    }}
  />,
);