chat-webkit v0.0.100-beta

简体中文

✨ 特性

• 🌈 ChatBox

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

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

  支持约定格式的插件渲染

  支持流式对话安全审核

  提供样式自定义接口

• 📦 ChatManagement: 支持会话管理
• 🛡 Diff：内容对比组件
• ⚙️ WordAddinWriter: 支持在word-addin工程中开箱即用写作，支持internLM 及 lmdeploy api，也支持自定义api

🖥 兼容环境

📦 安装

npm install chat-webkit --save

yarn add chat-webkit

pnpm add chat-webkit

🔨 示例

import React, { useState } from 'react';
import ChatWebkit from 'chat-webkit';

const App = () => {
  const [sessionList, setsessionList] = useState([
    {
      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大风景区',
      status: 0,
    },
  ]);

  return <ChatWebkit.ChatBox url='' apiType={1} propsSessionList={sessionList} />;
};

export default App;

环境要求

React >= 18.0.0

参考文档

ChatBox 组件使用说明

ChatManagement 组件使用说明

Diff 组件使用说明

WordAddinWriter 组件使用说明