@ chatkitty/ core (中文(简体) )

安装

npm install @chatkitty/core

基本用途

看看这个 HTML 示例 是一个完整的范例.

npx chatkitty html-example:serve

正在装入聊天UI

import { loadChatUi } from '@chatkitty/core';

await loadChatUi({
  widgetId: 'YOUR_WIDGET_ID',
  username: 'USER_USERNAME',
  container: {
    id: 'chat-ui',
    height: '100%',
  },
});

// Define the container in your HTML
// <div id="chat-ui"></div>

手动连接到 ChatKitty

要手动连接到 ChatKitty API,请使用您的 API 键和正在连接的用户名 。 如果您想要在程序上扩展功能, 或者需要访问 SDK 客户端, 这将会有所帮助 .

import { connectApi } from '@chatkitty/core';

const apiKey = 'YOUR_CHATKITTY_API_KEY';
const username = 'USER_USERNAME';

const connection = await connectApi({
  apiKey: apiKey,
  username: username,
});

const { user, notifications, updateUser } = connection;

console.log('Connected as user:', user.value);

// Set event listeners if needed
user.watch((user) => console.log('User updated:', user));

// optional: get SDK client
const client = connection.getSdkClient();

// Load Chat UI using existing connection
await loadChatUi({
    widgetId: 'YOUR_WIDGET_ID',
    container: {
        id: 'chat-ui',
        height: '100%',
    }, { connection }
);

// Don't forget to disconnect when done
await connection.dispose();

自定义聊天体验

ChatKitty允许通过主题、本地化、音频通知和更多内容来广泛定制聊天UI和行为。 例如,要自定义主题并提供自定义用户配置:

await loadChatUi({
  widgetId: 'YOUR_WIDGET_ID',
  theme: 'dark',
  profile: {
    displayName: 'John Doe',
    displayPicture: 'https://example.com/user-avatar.jpg',
  },
  // Other options...
});

看看这个 ChatKitty 用户界面文档 用于完整定制选项清单.