@space3-npm/cybersoul-ui

A React component library providing the user interface for the CyberSoul character interaction experience.

Features

• CharacterInteractPanel: A highly interactive, responsive chat and event management panel for virtual character interactions.
  • Supports text, image, and voice inputs.
  • Automatic summarization and core memory injection workflows.
  • Built-in OnDemand event triggers ("force interact").
  • Mobile-first responsive design utilizing Ant Design's App and Drawer context.
  • Real-time relationship and state update visuals (e.g., temperature/talking style changes).

Installation

npm install @space3-npm/cybersoul-ui

Note: Make sure you install the required peerDependencies: react, react-dom, and antd.

Usage

Ensure your application is wrapped with Ant Design's <App> provider to provide correct notification and message context.

import { App } from 'antd';
import { CharacterInteractPanel } from '@space3-npm/cybersoul-ui';

function AppHost() {
  return (
    <App>
      <YourMainComponent />
    </App>
  );
}

function YourMainComponent() {
  return (
    <CharacterInteractPanel 
      open={true}
      characterKeyHash="example-hash"
      api={{
        interactWithCharacter: async () => {},
        ondemandEventWithCharacter: async () => {},
        summarizeChatHistory: async () => "summary",
        saveChatMoment: async () => {},
        patchCoreMemoryViaSdk: async () => {}
      }}
      onCancel={() => console.log('Cancel')}
    />
  );
}

Development

• npm run dev: Run TypeScript compiler in watch mode.
• npm run build: Build the project (output to dist).