UIKit · React components

@imcore/uikit is a React chat UI component library built on top of @imcore/sdk: conversation list, message thread, composer and a connection-state banner, drop-in. Included in every edition.

Install

npm i <the @imcore/uikit .tgz URL or file>
# Also needs the SDK and React
npm i <the @imcore/sdk .tgz>

Integration in 30 lines

import { ImcoreClient } from '@imcore/sdk';
import { ImcoreProvider, ConversationList, MessageList, Composer, ConnectionBanner } from '@imcore/uikit';
import '@imcore/uikit/theme.css';
import { useState } from 'react';

const client = new ImcoreClient({ url: 'wss://your-imcore-host/acc', auth: { token: YOUR_TOKEN } });
void client.connect();

export default function App() {
  const [peer, setPeer] = useState<string | null>(null);
  return (
    <ImcoreProvider client={client} ownUserID={MY_USER_ID}>
      <ConnectionBanner />
      <div style={{ display: 'flex', height: '100vh' }}>
        <div style={{ width: 320, borderRight: '1px solid #eee' }}>
          <ConversationList onSelect={(c) => setPeer(c.targetUserID ?? null)} />
        </div>
        {peer && (
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
            <MessageList target={{ scene: 'dm', targetUserID: peer }} />
            <Composer target={{ scene: 'dm', targetUserID: peer }} />
          </div>
        )}
      </div>
    </ImcoreProvider>
  );
}

Theming

Every color reads a CSS variable (--imcore-*, plus the --bubble-own-bg / --bubble-own-ink / --bubble-other-bg / --bubble-other-ink tokens shared with the chat-studio skin). Redefine them on :root to re-skin.

Headless hooks

Hosts that want their own markup can build directly on the UI-less hooks: useConnectionState / useConversations / useMessages.

Flutter

imcore_uikit is a Flutter chat UI component library built on top of the imcore_sdk Dart/Flutter SDK: conversation list, message thread and composer, sharing the same component contract and theme tokens as the web UIKit. Included in every edition.

Install

Unpack it as a sibling directory next to the SDK (imcore_uikit depends on ../imcore_sdk by path):

your-project/
  packages/
    imcore_sdk/
    imcore_uikit/

dependencies:
  imcore_uikit:
    path: packages/imcore_uikit

Quickstart

import 'package:flutter/material.dart';
import 'package:imcore_sdk/imcore_sdk.dart';
import 'package:imcore_uikit/imcore_uikit.dart';

final client = ImcoreClient(
  url: 'wss://your-imcore-host/acc',
  auth: AuthConfig(token: yourToken, login: LoginPayload(userId: myUserId)),
)..connect();

class ChatPage extends StatelessWidget {
  const ChatPage({super.key});

  @override
  Widget build(BuildContext context) {
    return ImcoreScope(
      client: client,
      ownUserId: myUserId,
      child: Column(children: [
        const ConnectionBanner(),
        Expanded(
          child: ConversationListView(
            onSelect: (c) => Navigator.push(context, MaterialPageRoute(
              builder: (_) => ThreadPage(peer: c.wire.targetUserID!),
            )),
          ),
        ),
      ]),
    );
  }
}

class ThreadPage extends StatelessWidget {
  const ThreadPage({super.key, required this.peer});
  final String peer;

  @override
  Widget build(BuildContext context) {
    return ImcoreScope(
      client: client,
      ownUserId: myUserId,
      child: Scaffold(
        appBar: AppBar(title: Text(peer)),
        body: Column(children: [
          Expanded(child: MessageListView(target: DmTarget(peer))),
          ImcoreComposer(target: DmTarget(peer)),
        ]),
      ),
    );
  }
}

Theming

Add ImcoreTheme.light().copyWith(...) to your ThemeData.extensions — the bubbleOwnBg / bubbleOwnInk / bubbleOtherBg / bubbleOtherInk token names are shared with the web UIKit. Hosts that want their own markup can skip the widgets and build on the headless controllers: ConnectionStateNotifier / ConversationsController / MessagesController.