chatgpt-app v1.0.4

chatgpt-app

ChatGPT 聊天 UI，进行了 webSocket 和 http 异常处理，如下异常：

• 消息发出，服务端没有任何返回
• 服务端返回消息，但是消息中断
• 网络中断

使用前需引入 css

import "chatgpt-app/dist/bundle.css";

示例

import React from "react";
import ChatgptApp from "chatgpt-app";
import "chatgpt-app/dist/bundle.css";

const baseConfig = {
  httpAPI: "http://10.60.129.65:3080",
  wsAPI: "ws://10.60.129.65:3080",
};

const onError = (type) => {
  console.log("🚀 ~ type:", type);
};

const App = () => <ChatgptApp baseConfig={baseConfig} onError={onError} />;

export default App;

API

ChatgptApp

baseProps

组件必传的基础配置说明

errorType

websocket 交互过程中的报错回调的参数说明

AnswerProps

Answer 组件的 props

getAllData

通过 ref 转发获取组件内全部数据

import React, { useRef } from "react";
import ChatgptApp from "chatgpt-app";
import "chatgpt-app/dist/bundle.css";

const chatRef = useRef(null);

const baseConfig = {
  httpAPI: "http://10.60.129.65:3080",
  wsAPI: "ws://10.60.129.65:3080",
};

const onError = (type) => {
  console.log("🚀 ~ type:", type);
};

const fn = () => {
  // 获取组件内全部数据
  console.log(chatRef.current?.getAllData());
};

const App = () => (
  <ChatgptApp ref={chatRef} baseConfig={baseConfig} onError={onError} />
);

export default App;

服务端接口文档

websocket 对接规范

连接

前端发起连接请求，在 query 中加 token 参数，用来识别用户。

ws://127.0.0.1:3080?token=xxx

心跳

前端每隔 30 秒，发送一个心跳：ping，服务端需返回：pong

数据交互

• 前端发送消息
  • 消息体为 json 格式的字符串（json -> string -> server）

例：

{
    "op": "question",
    "userId": 123,
    "question": "今天天气怎么样",
    "webId": "xxx111"
}

• 服务端返回消息
  • 消息体为json格式的字符串（json -> string -> web）

例：

{
    "op": "answer",
    "answer": "今天下雨",
    "index": 1,
    "webId": "sdf4324lsjdfkl"
}

• 服务端返回状态
  • 服务端处理消息的各个阶段，需返回前端处理状态，参数如下：

例：

{
    "op": "status",
    "status": 1,
    "isDone": false,
    "webId": "xljlsdf123sfg"
}

• 服务端返回异常
  • 服务端发生错误时，需要返回错误信息，参数如下：

例：

{
    "op": "error",
    "message": "网络波动"
}

http接口查询问题详情

GET http://127.0.0.1:3080/question/:webId

Response

{
    "code": 200,
    "data": {
        "id": 20666,
        "webId": "wsl3",
        "userId": 1,
        "anchorId": null,
        "question": "今年哪年",
        "answer": null,
        "questionAt": "2023-03-29T10:01:05.000Z",
        "answerAt": null,
        "needDigest": 0,
        "digest": null,
        "finalQuestion": [
            {
                "role": "system",
                "content": "nihao。\n你好！有什么可以帮助您的吗？\n\n今年哪年。\n今年是2021年。\n\n今年哪年。\n今年是2021年。\n\n今年哪年。\n今年是2021年。"
            },
            {
                "role": "user",
                "content": "今年哪年"
            }
        ],
        "status": 1,
        "error": null
    },
    "error": ""
}