chat-bot-for-cirs

v1.1.48

Published

a month ago

A chat bot component for CIRS

0High
0Medium
0Low

winnie_jinhaojie

chat bot component ui react antd ai chatbot conversation

ChatBot for CIRS

一个基于 React 和 Ant Design 的聊天机器人组件，专为 CIRS 系统设计。

安装

npm install chat-bot-for-cirs

使用方法

基本用法

import React from 'react';
import ChatBot from 'chat-bot-for-cirs';

function App() {
  return (
    <div>
      <h1>我的应用</h1>
      <ChatBot />
    </div>
  );
}

export default App;

高级用法

import React, { useState } from 'react';
import ChatBot from 'chat-bot-for-cirs';

function App() {
  const [expanded, setExpanded] = useState(false);

  const handleExpandedChange = (newExpanded) => {
    setExpanded(newExpanded);
    console.log('聊天窗口状态:', newExpanded ? '展开' : '收起');
  };

  return (
    <div>
      <h1>我的应用</h1>
      <ChatBot
        expanded={expanded}
        onExpandedChange={handleExpandedChange}
        config={{
          apiEndpoint: 'https://api.example.com/chat',
          headers: {
            'Authorization': 'Bearer your-token'
          }
        }}
        style={{
          zIndex: 9999
        }}
      />
    </div>
  );
}

export default App;

在 HTML 中直接使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ChatBot 示例</title>
  <!-- 引入 React -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <!-- 引入 Ant Design -->
  <script src="https://unpkg.com/[email protected]/dist/antd.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/antd.min.css">
  <!-- 引入 Ant Design Icons -->
  <script src="https://unpkg.com/@ant-design/[email protected]/lib/index.js"></script>
  <!-- 引入 React Markdown -->
  <script src="https://unpkg.com/[email protected]/dist/react-markdown.min.js"></script>
  <!-- 引入 ChatBot -->
  <script src="https://unpkg.com/chat-bot-for-cirs@latest/dist/index.umd.js"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const { createElement: h } = React;
    const { createRoot } = ReactDOM;
    
    function App() {
      return h('div', null, [
        h('h1', null, '我的应用'),
        h(ChatBotForCirs.default, null)
      ]);
    }
    
    const root = createRoot(document.getElementById('root'));
    root.render(h(App));
  </script>
</body>
</html>

API

ChatBot Props

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | expanded | boolean | false | 是否展开聊天窗口 | | onExpandedChange | (expanded: boolean) => void | - | 展开状态变化回调 | | className | string | - | 自定义样式类名 | | style | React.CSSProperties | - | 自定义样式 | | config | object | - | 聊天机器人配置 |

Config 配置

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | apiEndpoint | string | - | API 端点 | | headers | Record<string, string> | - | 请求头 |

构建产物

dist/index.js - CommonJS 格式
dist/index.esm.js - ES Module 格式
dist/index.umd.js - UMD 格式（未压缩）
dist/index.min.js - UMD 格式（压缩版）
dist/index.d.ts - TypeScript 类型声明

依赖

Peer Dependencies

React >= 18.0.0
ReactDOM >= 18.0.0

Dependencies

antd ^4.24.16
@ant-design/icons
react-markdown

许可证

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme