lblab Component Docs

AIGC 对话组件

这是一款 AIGC 对话组件

🎨 支持流式对话输出，开箱即用，支持internLM 及 lmdeploy api，也支持自定义api

😀 支持 md 格式代码块、latex 公式、表格、图片及视频渲染

😝 支持约定格式的插件渲染

👻支持流式对话安全审核

😏 提供样式自定义接口

Chatbox 范例及 live 代码展示如下：

对接 delployLM reset api 进行流式输出，demo 如下：

// import ChatWebkit from 'chat-webkit'
function App() {
  const ref = useRef();
  const sessionList = [
    {
      id: "2",
      message:
        "以下是一个简单的快速排序（QuickSort）的 Python 代码实现：\n```python\ndef quick_sort(arr):\n   if len(arr) <= 1:\n       return arr\n   else:\n       pivot = arr[0]\n       left = []\n       right = []\n       for i in range(1, len(arr)):\n           if arr[i] < pivot:\n               left.append(arr[i])\n           else:\n               right.append(arr[i])\n       return quick_sort(left) + [pivot] + quick_sort(right)\n```\n这段代码使用了递归的方式实现快速排序。在每一次递归中，我们选择数组中的第一个元素作为基准值（pivot），然后将数组中所有小于基准值的元素放到一个新的左子数组中，将所有大于等于基准值的元素放到一个新的右子数组中。最后，我们将左子数组、基准值和右子数组拼接起来并返回。",
      status: 0,
      question: "帮我写一段快排？",
    },
  ];

  
  const startSse = () => {
    ref.current.startSse("你好，AIGC大模型，今天是星期几啊？");
  };

  const stopSse = () => {
    ref.current.stopSse();
  };

  const reGenerate = () => {
    ref.current.reGenerate();
  };

  return (
    <>
      <div className="chatContainer">
        <ChatWebkit.ChatBox
           body={{
            prompt: "写一个500字的儿童睡前故事",
            session_id: -1,
            interactive_mode: true,
            stream: true,
            request_output_len: 512,
            top_p: 0.8,
            top_k: 40,
            temperature: 0.8,
            repetition_penalty: 1,
            ignore_eos: false,
          }}
          apiType={2}
          propsSessionList={sessionList}
          url={"http://10.140.0.187:8080/v1/chat/interactive"}
          requestMessageContainerStyle={{ backgroundColor: "#CFBEFF" }}
          responseMessageContainerStyle={{
            backgroundColor: "rgba(39,45,230,.1)",
          }}
          ref={ref}
        />
        <Button
          style={{
            "background-color": "#4096ff",
            "margin-right": "5px",
            border: "0px",
            padding: "10px",
            "border-radius": "6px",
          }}
          onClick={startSse}
        >
          开始会话
        </Button>
        <Button
          style={{
            "background-color": "#4096ff",
            "margin-right": "5px",
            border: "0px",
            padding: "10px",
            "border-radius": "6px",
          }}
          onClick={stopSse}
        >
          停止会话
        </Button>
        <Button
          style={{
            "background-color": "#4096ff",
            "margin-right": "5px",
            border: "0px",
            padding: "10px",
            "border-radius": "6px",
          }}
          onClick={reGenerate}
        >
          重试
        </Button>
      </div>
    </>
  );
}
render(App);

// import ChatWebkit from 'chat-webkit'
function App() {
  const ref = useRef();
  const sessionList = [
    {
      id: "2",
      message:
        "以下是一个简单的快速排序（QuickSort）的 Python 代码实现：\n```python\ndef quick_sort(arr):\n   if len(arr) <= 1:\n       return arr\n   else:\n       pivot = arr[0]\n       left = []\n       right = []\n       for i in range(1, len(arr)):\n           if arr[i] < pivot:\n               left.append(arr[i])\n           else:\n               right.append(arr[i])\n       return quick_sort(left) + [pivot] + quick_sort(right)\n```\n这段代码使用了递归的方式实现快速排序。在每一次递归中，我们选择数组中的第一个元素作为基准值（pivot），然后将数组中所有小于基准值的元素放到一个新的左子数组中，将所有大于等于基准值的元素放到一个新的右子数组中。最后，我们将左子数组、基准值和右子数组拼接起来并返回。",
      status: 0,
      question: "帮我写一段快排？",
    },
  ];

  
  const startSse = () => {
    ref.current.startSse("你好，AIGC大模型，今天是星期几啊？");
  };

  const stopSse = () => {
    ref.current.stopSse();
  };

  const reGenerate = () => {
    ref.current.reGenerate();
  };

  return (
    <>
      <div className="chatContainer">
        <ChatWebkit.ChatBox
           body={{
            prompt: "写一个500字的儿童睡前故事",
            session_id: -1,
            interactive_mode: true,
            stream: true,
            request_output_len: 512,
            top_p: 0.8,
            top_k: 40,
            temperature: 0.8,
            repetition_penalty: 1,
            ignore_eos: false,
          }}
          apiType={2}
          propsSessionList={sessionList}
          url={"http://10.140.0.187:8080/v1/chat/interactive"}
          requestMessageContainerStyle={{ backgroundColor: "#CFBEFF" }}
          responseMessageContainerStyle={{
            backgroundColor: "rgba(39,45,230,.1)",
          }}
          ref={ref}
        />
        <Button
          style={{
            "background-color": "#4096ff",
            "margin-right": "5px",
            border: "0px",
            padding: "10px",
            "border-radius": "6px",
          }}
          onClick={startSse}
        >
          开始会话
        </Button>
        <Button
          style={{
            "background-color": "#4096ff",
            "margin-right": "5px",
            border: "0px",
            padding: "10px",
            "border-radius": "6px",
          }}
          onClick={stopSse}
        >
          停止会话
        </Button>
        <Button
          style={{
            "background-color": "#4096ff",
            "margin-right": "5px",
            border: "0px",
            padding: "10px",
            "border-radius": "6px",
          }}
          onClick={reGenerate}
        >
          重试
        </Button>
      </div>
    </>
  );
}
render(App);

支持代码块、latex 公式及表格渲染，并配置头像及自定义气泡样式

// import ChatWebkit from 'chat-webkit'
function App() {
  const sessionList = [
    {
      id: "2",
      message:
        "以下是一个简单的快速排序（QuickSort）的 Python 代码实现：\n```python\ndef quick_sort(arr):\n   if len(arr) <= 1:\n       return arr\n   else:\n       pivot = arr[0]\n       left = []\n       right = []\n       for i in range(1, len(arr)):\n           if arr[i] < pivot:\n               left.append(arr[i])\n           else:\n               right.append(arr[i])\n       return quick_sort(left) + [pivot] + quick_sort(right)\n```\n这段代码使用了递归的方式实现快速排序。在每一次递归中，我们选择数组中的第一个元素作为基准值（pivot），然后将数组中所有小于基准值的元素放到一个新的左子数组中，将所有大于等于基准值的元素放到一个新的右子数组中。最后，我们将左子数组、基准值和右子数组拼接起来并返回。",
      status: 0,
      question: "帮我写一段快排？",
    },
    {
      id: "3",
      message:
        "微积分是数学中的一个重要分支，它研究的是函数的变化率和积分。以下是微积分中一些常见的概念和公式：\n\n1. 导数：函数 $f(x)$ 在点 $x=a$ 处的导数表示为 $f'(a)$ 或 $\\frac{df}{dx}(a)$，表示函数在该点的变化率。导数可以通过极限定义求得：\n$$f'(a)=\\lim_{h\\to 0}\\frac{f(a+h)-f(a)}{h}$$\n2. 微分：函数 $f(x)$ 在点 $x=a$ 处的微分表示为 $df(a)$，它是一个线性映射，可以看作是函数在该点的局部线性近似。微分可以通过导数定义：\n$$df(a)=\\lim_{h\\to 0} \\frac{f(a+h)-f(a)}{h}dh$$\n3. 不定积分：函数 $f(x)$ 的不定积分表示为 $\\int f(x)dx$，表示函数的一个原函数。不定积分可以通过导数求得：\n$$\\int f(x)dx=F(x)+C$$\n其中 $F(x)$ 是 $f(x)$ 的一个原函数，$C$ 是常数。\n4. 定积分：函数 $f(x)$ 在区间 $[a,b]$ 上的定积分表示为 $\\int_a^b f(x)dx$，表示函数在该区间上的面积。定积分可以通过不定积分求得：\n$$\\int_a^b f(x)dx=F(b)-F(a)$$\n其中 $F(x)$ 是 $f(x)$ 的一个原函数。\n\n以上是微积分中的一些基本概念和公式，它们可以用 LaTeX 公式表示。例如，导数可以表示为：\n$$f'(a)=\\lim_{h\\to 0}\\frac{f(a+h)-f(a)}{h}$$\n不定积分可以表示为：\n$$\\int f(x)dx=F(x)+C$$\n定积分可以表示为：\n$$\\int_a^b f(x)dx=F(b)-F(a)$$\n希望这些公式能够帮助您更好地理解微积分的概念和应用。",
      status: 0,
      question: "帮我用latex公式描述微积分?",
    },
    {
      id: "4",
      message:
        "以下是世界上十大著名风景区的列表：\n\n| 排名 | 景点名称 | 所在国家 |\n| --- | --- | --- |\n| 1 | 大峡谷国家公园 | 美国 |\n| 2 | 班芙国家公园 | 加拿大 |\n| 3 | 雅典卫城 | 希腊 |\n| 4 | 吴哥窟 | 柬埔寨 |\n| 5 | 大峡谷国家公园 | 坦桑尼亚 |\n| 6 | 罗马斗兽场 | 意大利 |\n| 7 | 长城 | 中国 |\n| 8 | 雅尔塔宫殿 | 乌克兰 |\n| 9 | 巨石阵 | 英国 |\n| 10 | 大堡礁 | 澳大利亚 |\n\n这些景点都是世界著名的旅游胜地，吸引了无数游客前来参观和探索。无论是自然风光还是人文历史，这些景点都拥有着独特的魅力和价值。",
      question: "帮我列出10大风景区",
    },
  ];

  return (
    <>
      <div className="chatContainer">
        <ChatWebkit.ChatBox
          userAvatar={<span>TEST USER</span>}
          modelAvatar={<span>LLM</span>}
          propsSessionList={sessionList}
          url=''
          apiType={1}
          requestMessageContainerStyle={{ backgroundColor: "#ffffff" }}
          responseMessageContainerStyle={{
            backgroundColor: "rgba(39,45,230,.1)",
          }}
        />
      </div>
    </>
  );
}
render(App);

// import ChatWebkit from 'chat-webkit'
function App() {
  const sessionList = [
    {
      id: "2",
      message:
        "以下是一个简单的快速排序（QuickSort）的 Python 代码实现：\n```python\ndef quick_sort(arr):\n   if len(arr) <= 1:\n       return arr\n   else:\n       pivot = arr[0]\n       left = []\n       right = []\n       for i in range(1, len(arr)):\n           if arr[i] < pivot:\n               left.append(arr[i])\n           else:\n               right.append(arr[i])\n       return quick_sort(left) + [pivot] + quick_sort(right)\n```\n这段代码使用了递归的方式实现快速排序。在每一次递归中，我们选择数组中的第一个元素作为基准值（pivot），然后将数组中所有小于基准值的元素放到一个新的左子数组中，将所有大于等于基准值的元素放到一个新的右子数组中。最后，我们将左子数组、基准值和右子数组拼接起来并返回。",
      status: 0,
      question: "帮我写一段快排？",
    },
    {
      id: "3",
      message:
        "微积分是数学中的一个重要分支，它研究的是函数的变化率和积分。以下是微积分中一些常见的概念和公式：\n\n1. 导数：函数 $f(x)$ 在点 $x=a$ 处的导数表示为 $f'(a)$ 或 $\\frac{df}{dx}(a)$，表示函数在该点的变化率。导数可以通过极限定义求得：\n$$f'(a)=\\lim_{h\\to 0}\\frac{f(a+h)-f(a)}{h}$$\n2. 微分：函数 $f(x)$ 在点 $x=a$ 处的微分表示为 $df(a)$，它是一个线性映射，可以看作是函数在该点的局部线性近似。微分可以通过导数定义：\n$$df(a)=\\lim_{h\\to 0} \\frac{f(a+h)-f(a)}{h}dh$$\n3. 不定积分：函数 $f(x)$ 的不定积分表示为 $\\int f(x)dx$，表示函数的一个原函数。不定积分可以通过导数求得：\n$$\\int f(x)dx=F(x)+C$$\n其中 $F(x)$ 是 $f(x)$ 的一个原函数，$C$ 是常数。\n4. 定积分：函数 $f(x)$ 在区间 $[a,b]$ 上的定积分表示为 $\\int_a^b f(x)dx$，表示函数在该区间上的面积。定积分可以通过不定积分求得：\n$$\\int_a^b f(x)dx=F(b)-F(a)$$\n其中 $F(x)$ 是 $f(x)$ 的一个原函数。\n\n以上是微积分中的一些基本概念和公式，它们可以用 LaTeX 公式表示。例如，导数可以表示为：\n$$f'(a)=\\lim_{h\\to 0}\\frac{f(a+h)-f(a)}{h}$$\n不定积分可以表示为：\n$$\\int f(x)dx=F(x)+C$$\n定积分可以表示为：\n$$\\int_a^b f(x)dx=F(b)-F(a)$$\n希望这些公式能够帮助您更好地理解微积分的概念和应用。",
      status: 0,
      question: "帮我用latex公式描述微积分?",
    },
    {
      id: "4",
      message:
        "以下是世界上十大著名风景区的列表：\n\n| 排名 | 景点名称 | 所在国家 |\n| --- | --- | --- |\n| 1 | 大峡谷国家公园 | 美国 |\n| 2 | 班芙国家公园 | 加拿大 |\n| 3 | 雅典卫城 | 希腊 |\n| 4 | 吴哥窟 | 柬埔寨 |\n| 5 | 大峡谷国家公园 | 坦桑尼亚 |\n| 6 | 罗马斗兽场 | 意大利 |\n| 7 | 长城 | 中国 |\n| 8 | 雅尔塔宫殿 | 乌克兰 |\n| 9 | 巨石阵 | 英国 |\n| 10 | 大堡礁 | 澳大利亚 |\n\n这些景点都是世界著名的旅游胜地，吸引了无数游客前来参观和探索。无论是自然风光还是人文历史，这些景点都拥有着独特的魅力和价值。",
      question: "帮我列出10大风景区",
    },
  ];

  return (
    <>
      <div className="chatContainer">
        <ChatWebkit.ChatBox
          userAvatar={<span>TEST USER</span>}
          modelAvatar={<span>LLM</span>}
          propsSessionList={sessionList}
          url=''
          apiType={1}
          requestMessageContainerStyle={{ backgroundColor: "#ffffff" }}
          responseMessageContainerStyle={{
            backgroundColor: "rgba(39,45,230,.1)",
          }}
        />
      </div>
    </>
  );
}
render(App);

支持自定义对话框样式

// import ChatWebkit from 'chat-webkit'
function App() {
  const sessionList = [
    {
      id: "2",
      message:
        "以下是一个简单的快速排序（QuickSort）的 Python 代码实现：\n```python\ndef quick_sort(arr):\n   if len(arr) <= 1:\n       return arr\n   else:\n       pivot = arr[0]\n       left = []\n       right = []\n       for i in range(1, len(arr)):\n           if arr[i] < pivot:\n               left.append(arr[i])\n           else:\n               right.append(arr[i])\n       return quick_sort(left) + [pivot] + quick_sort(right)\n```\n这段代码使用了递归的方式实现快速排序。在每一次递归中，我们选择数组中的第一个元素作为基准值（pivot），然后将数组中所有小于基准值的元素放到一个新的左子数组中，将所有大于等于基准值的元素放到一个新的右子数组中。最后，我们将左子数组、基准值和右子数组拼接起来并返回。",
      status: 0,
      question: "帮我写一段快排？",
    },
  ];

  return (
    <>
      <div className="chatContainer">
        <ChatWebkit.ChatBox
          userAvatar={<span>TEST USER</span>}
          modelAvatar={<span>LLM</span>}
          propsSessionList={sessionList}
          requestMessageContainerStyle={{ backgroundColor: "#ffffff" }}
          responseMessageContainerStyle={{
            backgroundColor: "rgba(39,45,230,.1)",
          }}
          url=''
          apiType={1}
          style={{ backgroundColor: "blue" }}
        />
      </div>
    </>
  );
}
render(App);

// import ChatWebkit from 'chat-webkit'
function App() {
  const sessionList = [
    {
      id: "2",
      message:
        "以下是一个简单的快速排序（QuickSort）的 Python 代码实现：\n```python\ndef quick_sort(arr):\n   if len(arr) <= 1:\n       return arr\n   else:\n       pivot = arr[0]\n       left = []\n       right = []\n       for i in range(1, len(arr)):\n           if arr[i] < pivot:\n               left.append(arr[i])\n           else:\n               right.append(arr[i])\n       return quick_sort(left) + [pivot] + quick_sort(right)\n```\n这段代码使用了递归的方式实现快速排序。在每一次递归中，我们选择数组中的第一个元素作为基准值（pivot），然后将数组中所有小于基准值的元素放到一个新的左子数组中，将所有大于等于基准值的元素放到一个新的右子数组中。最后，我们将左子数组、基准值和右子数组拼接起来并返回。",
      status: 0,
      question: "帮我写一段快排？",
    },
  ];

  return (
    <>
      <div className="chatContainer">
        <ChatWebkit.ChatBox
          userAvatar={<span>TEST USER</span>}
          modelAvatar={<span>LLM</span>}
          propsSessionList={sessionList}
          requestMessageContainerStyle={{ backgroundColor: "#ffffff" }}
          responseMessageContainerStyle={{
            backgroundColor: "rgba(39,45,230,.1)",
          }}
          url=''
          apiType={1}
          style={{ backgroundColor: "blue" }}
        />
      </div>
    </>
  );
}
render(App);

配置 SSE 请求地址、token，通过 ref 方式暴露发起、停止，重试 sse 请求及获取 sse 状态接口。

若为自定义接口，数据返回格式需满足自定义API SSE返回的数据格式说明，且为GET 请求

// import ChatWebkit from 'chat-webkit'
const TooLongErrorComponent = () => {
  const tooLongErrorClick = () => {
    console.lopg("this chat is too long");
  };

  return <div onClick={tooLongErrorClick}>tooo lll</div>;
};

function App() {
  const ref = useRef();

  const sessionList = [
    {
      id: "2",
      message:
        "以下是一个简单的快速排序（QuickSort）的 Python 代码实现：\n```python\ndef quick_sort(arr):\n   if len(arr) <= 1:\n       return arr\n   else:\n       pivot = arr[0]\n       left = []\n       right = []\n       for i in range(1, len(arr)):\n           if arr[i] < pivot:\n               left.append(arr[i])\n           else:\n               right.append(arr[i])\n       return quick_sort(left) + [pivot] + quick_sort(right)\n```\n这段代码使用了递归的方式实现快速排序。在每一次递归中，我们选择数组中的第一个元素作为基准值（pivot），然后将数组中所有小于基准值的元素放到一个新的左子数组中，将所有大于等于基准值的元素放到一个新的右子数组中。最后，我们将左子数组、基准值和右子数组拼接起来并返回。",
      status: 0,
      question: "帮我写一段快排？",
    },
  ];

  const startSse = () => {
    ref.current.startSse("你好，AIGC大模型，今天是星际几啊？");
  };

  const stopSse = () => {
    ref.current.stopSse();
  };

  const reGenerate = () => {
    ref.current.reGenerate();
  };

  const getSseStatus = () => {
    console.log(ref.current.getStatus());
  };

  return (
    <>
      <div className="chatContainer">
        <ChatWebkit.ChatBox
          userAvatar={<span>TEST USER</span>}
          modelAvatar={<span>LLM</span>}
          tooLongErrorComponent={TooLongErrorComponent()}
          eventName=""
          apiType={1}
          propsSessionList={sessionList}
          url={"{your api or internLM api}"}
          token={"this is sse header token"}
          requestMessageContainerStyle={{ backgroundColor: "#ffffff" }}
          responseMessageContainerStyle={{
            backgroundColor: "rgba(39,45,230,.1)",
          }}
          ref={ref}
        />
      </div>
      <Button
        style={{
          "background-color": "#4096ff",
          "margin-right": "5px",
          border: "0px",
          padding: "10px",
          "border-radius": "6px",
        }}
        onClick={startSse}
      >
        开始会话
      </Button>
      <Button
        style={{
          "background-color": "#4096ff",
          "margin-right": "5px",
          border: "0px",
          padding: "10px",
          "border-radius": "6px",
        }}
        onClick={stopSse}
      >
        停止会话
      </Button>
      <Button
        style={{
          "background-color": "#4096ff",
          "margin-right": "5px",
          border: "0px",
          padding: "10px",
          "border-radius": "6px",
        }}
        onClick={reGenerate}
      >
        重试
      </Button>
      <Button
        style={{
          "background-color": "#4096ff",
          "margin-right": "5px",
          border: "0px",
          padding: "10px",
          "border-radius": "6px",
        }}
        onClick={getSseStatus}
      >
        获取状态
      </Button>
    </>
  );
}
render(App);

// import ChatWebkit from 'chat-webkit'
const TooLongErrorComponent = () => {
  const tooLongErrorClick = () => {
    console.lopg("this chat is too long");
  };

  return <div onClick={tooLongErrorClick}>tooo lll</div>;
};

function App() {
  const ref = useRef();

  const sessionList = [
    {
      id: "2",
      message:
        "以下是一个简单的快速排序（QuickSort）的 Python 代码实现：\n```python\ndef quick_sort(arr):\n   if len(arr) <= 1:\n       return arr\n   else:\n       pivot = arr[0]\n       left = []\n       right = []\n       for i in range(1, len(arr)):\n           if arr[i] < pivot:\n               left.append(arr[i])\n           else:\n               right.append(arr[i])\n       return quick_sort(left) + [pivot] + quick_sort(right)\n```\n这段代码使用了递归的方式实现快速排序。在每一次递归中，我们选择数组中的第一个元素作为基准值（pivot），然后将数组中所有小于基准值的元素放到一个新的左子数组中，将所有大于等于基准值的元素放到一个新的右子数组中。最后，我们将左子数组、基准值和右子数组拼接起来并返回。",
      status: 0,
      question: "帮我写一段快排？",
    },
  ];

  const startSse = () => {
    ref.current.startSse("你好，AIGC大模型，今天是星际几啊？");
  };

  const stopSse = () => {
    ref.current.stopSse();
  };

  const reGenerate = () => {
    ref.current.reGenerate();
  };

  const getSseStatus = () => {
    console.log(ref.current.getStatus());
  };

  return (
    <>
      <div className="chatContainer">
        <ChatWebkit.ChatBox
          userAvatar={<span>TEST USER</span>}
          modelAvatar={<span>LLM</span>}
          tooLongErrorComponent={TooLongErrorComponent()}
          eventName=""
          apiType={1}
          propsSessionList={sessionList}
          url={"{your api or internLM api}"}
          token={"this is sse header token"}
          requestMessageContainerStyle={{ backgroundColor: "#ffffff" }}
          responseMessageContainerStyle={{
            backgroundColor: "rgba(39,45,230,.1)",
          }}
          ref={ref}
        />
      </div>
      <Button
        style={{
          "background-color": "#4096ff",
          "margin-right": "5px",
          border: "0px",
          padding: "10px",
          "border-radius": "6px",
        }}
        onClick={startSse}
      >
        开始会话
      </Button>
      <Button
        style={{
          "background-color": "#4096ff",
          "margin-right": "5px",
          border: "0px",
          padding: "10px",
          "border-radius": "6px",
        }}
        onClick={stopSse}
      >
        停止会话
      </Button>
      <Button
        style={{
          "background-color": "#4096ff",
          "margin-right": "5px",
          border: "0px",
          padding: "10px",
          "border-radius": "6px",
        }}
        onClick={reGenerate}
      >
        重试
      </Button>
      <Button
        style={{
          "background-color": "#4096ff",
          "margin-right": "5px",
          border: "0px",
          padding: "10px",
          "border-radius": "6px",
        }}
        onClick={getSseStatus}
      >
        获取状态
      </Button>
    </>
  );
}
render(App);

插件显示配置

// import ChatWebkit from 'chat-webkit'
function App() {
  const sessionList = [
    {
      id: "2",
      message: "开始会话后，这里就会显示第一句话，如果太长",
      status: 0,
      question: "1+1=?",
      tools: [
        {
          args: {
            text: "```python\ndef solution():\n    answer = cucl()\n    return answer\n```",
          },
          errmsg: "NameError(\"name 'cucl' is not defined\")",
          result: null,
          state: -10002,
          thought:
            "这段代码定义了一个名为 cucl 的函数，它返回 1 + 1 的结果，即 2。",
          type: "PythonExecutor",
          url: "http://python-executor-service.cloud-dev:8210/inference",
          valid: 0,
        },
        {
          args: {
            text: "```python\ndef solution():\n    def cucl():\n        return 1 + 1\n    answer = cucl()\n    return answer\n```",
          },
          errmsg: "",
          result: {
            text: "2",
          },
          state: 0,
          thought:
            "这段代码定义了一个名为 cucl 的函数，它返回 1 + 1 的结果，即 2。",
          type: "PythonExecutor",
          url: "http://python-executor-service.cloud-dev:8210/inference",
          valid: 0,
        },
      ],
    },
    {
      id: "3",
      message: "开始会话后，这里就会显示第一句话，如果太长",
      status: 0,
      question: "搜索上海天气",
      tools: [
        {
          args: {
            text: "上海天气",
          },
          errmsg: "",
          result: {
            origin: [
              {
                note: "directly return answerBox, thx google !",
                origin: {
                  answer: "85°F",
                  title:
                    "Fudan University, 220 Handan Road, Yangpu District, Shanghai, China / Weather",
                },
                summ: "85°F",
                title:
                  "Fudan University, 220 Handan Road, Yangpu District, Shanghai, China / Weather",
                type: "answerBox",
                url: "http://www.zgjia.com/jingdian/yangpu_fudandaxue/15tian.html",
              },
            ],
            text: "0.85°F",
          },
          state: 0,
          thought: "我需要使用搜索API来获取上海和天气的信息。",
          type: "Search",
          url: "http://moss-websearch.cloud:7004/inference",
          valid: 0,
        },

      ],
    },
  ];

  return (
    <>
      <div className="chatContainer">
        <ChatWebkit.ChatBox
          userAvatar={<span>TEST USER</span>}
          modelAvatar={<span>LLM</span>}
          isPluginCollpaseed={false}
          apiType={1}
          url=""
          propsSessionList={sessionList}
          requestMessageContainerStyle={{ backgroundColor: "#ffffff" }}
          responseMessageContainerStyle={{
            backgroundColor: "rgba(39,45,230,.1)",
          }}
        />
      </div>
    </>
  );
}
render(App);

// import ChatWebkit from 'chat-webkit'
function App() {
  const sessionList = [
    {
      id: "2",
      message: "开始会话后，这里就会显示第一句话，如果太长",
      status: 0,
      question: "1+1=?",
      tools: [
        {
          args: {
            text: "```python\ndef solution():\n    answer = cucl()\n    return answer\n```",
          },
          errmsg: "NameError(\"name 'cucl' is not defined\")",
          result: null,
          state: -10002,
          thought:
            "这段代码定义了一个名为 cucl 的函数，它返回 1 + 1 的结果，即 2。",
          type: "PythonExecutor",
          url: "http://python-executor-service.cloud-dev:8210/inference",
          valid: 0,
        },
        {
          args: {
            text: "```python\ndef solution():\n    def cucl():\n        return 1 + 1\n    answer = cucl()\n    return answer\n```",
          },
          errmsg: "",
          result: {
            text: "2",
          },
          state: 0,
          thought:
            "这段代码定义了一个名为 cucl 的函数，它返回 1 + 1 的结果，即 2。",
          type: "PythonExecutor",
          url: "http://python-executor-service.cloud-dev:8210/inference",
          valid: 0,
        },
      ],
    },
    {
      id: "3",
      message: "开始会话后，这里就会显示第一句话，如果太长",
      status: 0,
      question: "搜索上海天气",
      tools: [
        {
          args: {
            text: "上海天气",
          },
          errmsg: "",
          result: {
            origin: [
              {
                note: "directly return answerBox, thx google !",
                origin: {
                  answer: "85°F",
                  title:
                    "Fudan University, 220 Handan Road, Yangpu District, Shanghai, China / Weather",
                },
                summ: "85°F",
                title:
                  "Fudan University, 220 Handan Road, Yangpu District, Shanghai, China / Weather",
                type: "answerBox",
                url: "http://www.zgjia.com/jingdian/yangpu_fudandaxue/15tian.html",
              },
            ],
            text: "0.85°F",
          },
          state: 0,
          thought: "我需要使用搜索API来获取上海和天气的信息。",
          type: "Search",
          url: "http://moss-websearch.cloud:7004/inference",
          valid: 0,
        },

      ],
    },
  ];

  return (
    <>
      <div className="chatContainer">
        <ChatWebkit.ChatBox
          userAvatar={<span>TEST USER</span>}
          modelAvatar={<span>LLM</span>}
          isPluginCollpaseed={false}
          apiType={1}
          url=""
          propsSessionList={sessionList}
          requestMessageContainerStyle={{ backgroundColor: "#ffffff" }}
          responseMessageContainerStyle={{
            backgroundColor: "rgba(39,45,230,.1)",
          }}
        />
      </div>
    </>
  );
}
render(App);

参数说明

组件入参说明

参数	说明	是否必需	类型	默认值
apiType	API类型配置 InternLM（或自定义api）:1 lmdeploy:2	是	enum
url	sse 连接地址（可为lmdeploy 或 internLM 对话请求api地址，也可为自定义api，自定义api数据返回格式参考:SSE返回的数据格式说明），若只想直接渲染propsSessionList，url可填空字符串	是	string
propsSessionList	历史对话记录	否	SseMesage[]
eventName	sse 返回数据时，监听事件名称，默认为 message	否	string
style	对话框样式自定义	否	React.CSSProperties
sseMaxWaitTime	SSE 连接超时时长	否	number
sseNoMessageWaitTime	无消息，会话超时时长	否	number
sseActiveWaitTime	会话中（已收到消息），超时提示等待时长	否	number
sseActiveCloseTime	会话中（已收到消息），超时主动关闭时长	否	number
token	头部鉴权信息	否	string
requestMessageContainerStyle	提问对话框样式自定义	否	React.CSSProperties
responseMessageContainerStyle	回答对话框样式自定义	否	React.CSSProperties
isShowStopGenerateButton	是否显示停止生成按钮	否	boolean	true
stopGenerateButtonStyle	停止生成按钮样式自定义	否	React.CSSProperties
stopGenerateWords	停止生成文字配置	否	string	停止生成
isShowRegenerateButton	当会话失败时，是否显示重新生成按钮	否	boolean	true
reGenerateComponent	重新生成组件自定义	否	JSX.Element
tooLongErrorComponent	超长提示组件自定义	否	JSX.Element
modelCloseStyle	模型关闭样式自定义	否	React.CSSProperties
sseStopCallback	sse会话结束回调	否	（url:string）=>void
userAvatar	用户头像自定义	否	JSX.Element
modelAvatar	模型头像自定义	否	JSX.Element
reviewCallback	人工审核回调	否	(id:string,result:number,raw ?:any)=>void
reviewInfoCallback	审核详情点击回调	否	(id:string)=>void
reviewTimeingComponent	自定义审核计时器插槽	否	JSX.Element
reviewTimoutComponent	自定义审核超时插槽	否	JSX.Element
isPluginCollpaseed	插件是否展开	否	boolean
body	post请求body配置	否	Body

Body说明

参数	说明	是否必需	类型
session_id	会话id	是	number
interactive_mode	是否交互模式	是	boolean
stream	是否流式返回	是	boolean
request_output_len	指定模型输出的期望长度或大小	是	number
top_p	控制生成 token 的概率大小	是	number
top_k	控制模型生成回答时考虑的上下文单词数量的参数	是	number
temperature	模型生成文本时创造性和多样性的超参数	是	number
repetition_penalty	控制模型生成文本时重复性的方法	是	number
ignore_eos	是否忽略或不在意"End of Sequence"（EOS）标记	是	boolean

SseMesage格式说明

参数	说明	是否必需	类型
id	聊天id（唯一）	是	number
status	对话状态	是	AllStatus
message	对话回复信息	是	string
question	对话问题	是	string
machineAuditResult	机器审核结果	否	0审核不通过，1审核通过，2待审核
personAuditResult	人工审核结果	否	0审核不通过，1审核通过，2待审核，3审核超时
tools	插件回复列表	否	ToolInfo[]

插件数据(ToolInfo)格式说明

参数	说明	是否必需	类型	默认值	版本
thought	思考步骤	是	string	---	---
type	类型	是	string	---	---
args	执行内容	是	{ text:string}	---	---
errmsg	错误信息	是	string	---	---
result	执行结果	是	any	---	---
state	状态	是	number	---	---
valid	是否有效	是	number	---	---

自定义API SSE返回的数据格式说明

参数	说明	是否必需	类型	默认值	版本
code	状态码	是	AllStatus
data	数据	是	Data

AllStatus格式说明

枚举值	说明	版本
3	发起请求5s 内，无消息
4	发起请求5s 后，无消息
1	接收到event stream，流式输出中
-1	接收出错
0	接收完成
-20003	会话超长
-20008	模型关闭

Data格式说明

参数	是否必需	类型
context	否	string
id	是	number
request	是	string
response	是	string

Edit this page on GitLab

lblab Component Docs

AIGC 对话组件

AIGC 对话组件

这是一款 AIGC 对话组件

🎨 支持流式对话输出，开箱即用，支持internLM 及 lmdeploy api，也支持自定义api

😀 支持 md 格式代码块、latex 公式、表格、图片及视频渲染

😝 支持约定格式的插件渲染

👻支持流式对话安全审核

😏 提供样式自定义接口

Chatbox 范例及 live 代码展示如下：

对接 delployLM reset api 进行流式输出，demo 如下：

支持代码块、latex 公式及表格渲染，并配置头像及自定义气泡样式

支持自定义对话框样式

配置 SSE 请求地址、token，通过 ref 方式暴露发起、停止，重试 sse 请求及获取 sse 状态接口。

若为自定义接口，数据返回格式需满足自定义API SSE返回的数据格式说明，且为GET 请求

插件显示配置

参数说明

组件入参说明

Body说明

SseMesage格式说明

插件数据(ToolInfo)格式说明

自定义API SSE返回的数据格式说明

AllStatus格式说明

Data格式说明

开始

FAQ

On this page

AIGC 对话组件

AIGC 对话组件

这是一款 AIGC 对话组件

🎨 支持流式对话输出，开箱即用，支持internLM 及 lmdeploy api，也支持自定义api

😀 支持 md 格式代码块、latex 公式、表格、图片及视频渲染

😝 支持约定格式的插件渲染

👻支持流式对话安全审核

😏 提供样式自定义接口

Chatbox 范例及 live 代码展示如下：

对接 delployLM reset api 进行流式输出，demo 如下：

支持代码块、latex 公式及表格渲染，并配置头像及自定义气泡样式

支持自定义对话框样式

配置 SSE 请求地址、token，通过 ref 方式暴露发起、停止，重试 sse 请求及获取 sse 状态接口。

若为自定义接口，数据返回格式需满足 自定义API SSE返回的数据格式说明，且为GET 请求

插件显示配置

参数说明

组件入参说明

Body说明

SseMesage格式说明

插件数据(ToolInfo)格式说明

自定义API SSE返回的数据格式说明

AllStatus格式说明

Data格式说明

开始

FAQ

On this page

若为自定义接口，数据返回格式需满足自定义API SSE返回的数据格式说明，且为GET 请求