@elocalentai/chat-sdk (英语)

反应 SDK 用于将 Eloalent AI 的聊天功能整合到您的应用程序中.

先决条件

• 反应 18 或更高(仅用于执行反应)
• 节点.js 18或以上
• 支持ES6+的现代浏览器

安装

# Using npm
npm install @eloquentai/chat-sdk

# Using yarn
yarn add @eloquentai/chat-sdk

# Using pnpm
pnpm add @eloquentai/chat-sdk

快速启动

反应执行

要在反应应用程序中使用 SDK,请导入 Chat 组件来自 SDK.

import { Chat } from "@eloquentai/chat-sdk";

function App() {
  return (
    <Chat
      // REQUIRED - Your Eloquent AI app ID
      appId="YOUR_APP_ID"
      // OPTIONAL - You can provide a unique id that should be used to identify the user
      userId={crypto.randomUUID()}
    />
  );
}

别忘了在你的应用程序里 输入底片样式

import "@eloquentai/chat-sdk/index.css";

香草执行

要在香草环境中使用 SDK, 请在 HTML 文件中列入脚本标记并呼叫 renderChat。 。 。 .

<script src="https://unpkg.com/@eloquentai/chat-sdk"></script>

<div id="chat-container"></div>

<script>
  EloquentChatSDK.renderChat(document.getElementById("chat-container"), {
    // REQUIRED - Your Eloquent AI app ID
    appId: "YOUR_APP_ID",
    // OPTIONAL - You can provide a unique id that should be used to identify the user
    userId: crypto.randomUUID(),
  });
</script>

renderChat 返回您可以调用以删除聊天部件的卸载函数 :

<script>
  const unmount = EloquentChatSDK.renderChat(
    document.getElementById("chat-container"),
    { appId: "YOUR_APP_ID" },
  );

  // Later, to remove the widget:
  unmount();
</script>

特征

• 浮动聊天部件 ——一个发射机泡和聊天窗口,在被隔离的iframe中被制成,所以主机页面样式从不漏入出.
• 实时消息 – 助手在WebSocket连接(AWS AppSync)上进行回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回的回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回.
• 持续对话 ——主动对话通过本地存储自动恢复(如在页面重载上).
• 用户识别 ——支持基于匿名设备的身份以及可选的外部用户ID和自定义用户元数据.
• 主动/欢迎信息 ——可选信息泡可以自动出现,邀请用户开始对话.
• 聊天收视率 ——用户可以在一次谈话被关闭或升级后进行评分.
• 人员交接/升级 ——SDK在对话升级为人代理时会承认,并相应关闭AI聊天会话.
• 他们 ——自定义气泡颜色和合法文本来与你的品牌相匹配.
• 移动响应器 ——自动调整移动取景口布局.

配置

Chat 组件道具

聊天界面选项

路过 chatProps 道具 (英语).

他们

<Chat
  appId="YOUR_APP_ID"
  theme={{
    userBubbleColor: "#6f34b7",
    legalText: "Powered by Eloquent AI",
  }}
/>

高级用途

renderChat

程序上将聊天部件上载到任何DOM元素中——由香草/UMD构建内部使用,但也可以从ES模块中获取,用于非JSX设置:

import { renderChat } from "@eloquentai/chat-sdk";

const unmount = renderChat(document.getElementById("chat-container"), {
  appId: "YOUR_APP_ID",
});

ChatInterface

聊天窗口UI没有浮动的放出器气泡或iframe隔离,用于将聊天直接嵌入到您自己的布局(例如专用支持页面).

import { ChatInterface } from "@eloquentai/chat-sdk";

<ChatInterface
  isOpen
  closeButton={false}
  cleanChatButton
  messages={messages}
  onSendMessage={onSendMessage}
/>;

useRealtimeSocket

直接订阅实时对话事件流的下级钩子, 如果您需要自定义消息处理到所提供的组件之外 .

import { useRealtimeSocket } from "@eloquentai/chat-sdk";

const { connect, disconnect, clearProcessedIds } = useRealtimeSocket({
  chatSettings,
  chatId,
  messages,
  onMessage: (response, chatId) => {
    /* handle incoming assistant message */
  },
  onCognition: (content) => {
    /* assistant is "thinking" */
  },
  onCognitionComplete: () => {},
  fetchHistory: async (chatId) => [],
});

支助

关于问题、专题请求或问题,请与口头AI小组联系.