Package Exports

starfish-chat
starfish-chat/dist/index.esm.js
starfish-chat/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (starfish-chat) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Starfish Chat - 多平台客服组件

Starfish Chat是一个基于React开发的多平台客服组件，目前支持H5、Web网页和微信小程序三个平台。该组件提供了灵活的CDN引入方式。组件设计简洁易用，能够满足各类在线客服场景的需求。

功能特点

🌟 多平台支持：同时支持 H5、Web 网页和微信小程序
💬 实时消息：基于 MQTT 的实时消息收发
📎 多媒体消息：支持发送文本、图片、文件等多种类型消息
🎨 主题定制：支持自定义主题颜色和客服图标
📱 自适应布局：完美适配不同设备和屏幕尺寸

安装

npm install starfish-chat
# 或者使用 yarn
yarn add starfish-chat
# 或者使用 pnpm
pnpm add starfish-chat

使用方法

Web/H5 环境

import { StarfishChat } from "starfish-chat";
// 引入样式文件
import "starfish-chat/dist/styles/index.scss";

const App = () => {
  return (
    <StarfishChat
      show
      title="客服"
      userInfo={{
        appid: "your_app_id", // 应用id
        union_id: "user_unique_id", // 用户标识(在商户下唯一id)
        nickname: "用户昵称", // 昵称
        avatar: "https://example.com/avatar.png", // 头像 (非必填)
      }}
      themeColor="#216DF4"
      platform="web" // 可选，指定显示平台为web 、h5
      onClose={() => console.log("聊天窗口关闭")}
    />
  );
};

通过 CDN 使用

<!DOCTYPE html>
<html>
  <head>
    <title>StarfishChat Demo</title>
    <!-- 引入 React 相关依赖 -->
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <!-- 引入 StarfishChat -->
    <script src="https://unpkg.com/starfish-chat@latest/dist/index.umd.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/starfish-chat@latest/dist/index.css"
    />
  </head>
  <body>
    <div id="root"></div>
    <script>
      const { StarfishChat } = window.StarfishChat;

      const App = () => {
        return React.createElement(StarfishChat, {
          show: true,
          title: "客服",
          userInfo: {
            appid: "your_app_id",
            union_id: "user_unique_id",
            nickname: "用户昵称",
            avatar: "https://example.com/avatar.png",
          },
          themeColor: "#216DF4",
          platform: "web", // 可选，指定显示平台为web
          onClose: () => console.log("聊天窗口关闭"),
        });
      };

      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(React.createElement(App));
    </script>
  </body>
</html>

组件属性

属性名	类型	说明	是否必填	默认值
userInfo	{ appid: string; union_id: string; nickname: string; avatar?: string }	用户信息配置	是	-
show	boolean	控制聊天组件的显示和隐藏	是	false
title	string	聊天窗口标题	否	'客服'
themeColor	string	主题颜色	否	'#216DF4'
serviceIcon	string	客服头像图标	否	默认图标
onClose	() => void	关闭聊天窗口的回调函数	否	-
platform	"h5" \| "miniprogram" \| "web" \| "unknown"	自定义显示平台	否	自动判断
serverUrl	string	服务器地址	否	-
mqtt	{ url: string }	MQTT配置	否	-

userInfo 属性说明

字段名	类型	说明	是否必填
appid	string	应用的唯一标识	是
union_id	string	用户在商户下的唯一标识	是
nickname	string	用户昵称	是
avatar	string	用户头像 URL	否

开发

克隆仓库：git clone [repository-url]
安装依赖：npm install
开发模式：npm run dev
构建：npm run build

NPM 打包与发布

准备工作

确保已安装 Node.js 和 npm
登录 npm 账号：
```
npm login
```
确保 package.json 中的信息正确：
- name：包名称
- version：版本号
- description：包描述
- main：入口文件
- files：需要发布的文件列表

版本更新

根据修改的内容选择合适的版本更新命令：

# 补丁版本，修复问题
npm version patch

# 小版本，新增功能
npm version minor

# 大版本，不兼容的修改
npm version major

打包

# 打包项目
npm run build

# 确认打包文件
npm pack --dry-run

发布

# 发布到 npm
npm publish

# 发布测试版本（可选）
npm publish --tag beta

注意：首次发布包时，建议先使用 npm publish --access public 命令。

JSPM

starfish-chat