Artemis React Native UI SDK

React Native UI SDK for embedding Artemis agent chat in iOS and Android apps. This package provides the chat screen, modal wrapper, message bubbles, rich content renderers, theme resolution, and configuration helpers on top of the published React Native socket SDK.

Package: @koredev/artemis-react-native-ui-sdk

Current version: 1.0.0

Install:

npm install @koredev/[email protected]

Development Setup

This UI SDK depends on the published React Native socket SDK package:

{
  "dependencies": {
    "@koredev/artemis-react-native-socket-sdk": "0.0.1"
  }
}

Install dependencies and build the UI SDK:

npm install
npm run build

npm pack runs the build first and packages the generated dist/ folder.

Example App

An example React Native app lives in example/. It is wired to the local UI SDK source through Metro and uses the published socket SDK dependency.

npm run example:start
npm run example:android
npm run example:ios

Use this when Android/iOS tooling is available. See example/README.md for credentials, install, and run steps.

For a quick non-native verification, run:

npm test

That currently performs a TypeScript build and declaration check.

Integration Steps

1. Install the UI SDK in your React Native app:

npm install @koredev/[email protected]

2. Make sure your app uses compatible React and React Native versions:

{
  "react": ">=18.0.0",
  "react-native": ">=0.72.0"
}

3. Import AgentChatModal or AgentChatScreen from the package:

import {
  AgentChatModal,
  SDKConfigurationLoader,
} from '@koredev/artemis-react-native-ui-sdk';

4. Create the SDK configuration using your Artemis project values:

const configuration = SDKConfigurationLoader.createDefault({
  projectId: 'your-project-id',
  endpoint: 'https://your-runtime.example.com',
  apiKey: 'YOUR_PUBLIC_API_KEY',
  channelId: 'your-channel-id',
});

5. Render the chat UI:

import React, {useState} from 'react';
import {Button, View} from 'react-native';
import {
  AgentChatModal,
  SDKConfigurationLoader,
} from '@koredev/artemis-react-native-ui-sdk';

const configuration = SDKConfigurationLoader.createDefault({
  projectId: 'your-project-id',
  endpoint: 'https://your-runtime.example.com',
  apiKey: 'YOUR_PUBLIC_API_KEY',
  channelId: 'your-channel-id',
});

export function App() {
  const [visible, setVisible] = useState(false);

  return (
    <View style={{flex: 1}}>
      <Button title="Open Chat" onPress={() => setVisible(true)} />
      <AgentChatModal
        visible={visible}
        configuration={configuration}
        title="Agent Chat"
        keyboardVerticalOffset={0}
        onRequestClose={() => setVisible(false)}
      />
    </View>
  );
}

Keyboard Handling

AgentChatScreen and AgentChatModal keep the footer input visible when the keyboard opens. Full-screen modals usually work with the default keyboardVerticalOffset={0}.

If you embed AgentChatScreen below a native header or another fixed top bar, pass that header height as keyboardVerticalOffset:

<AgentChatScreen
  configuration={configuration}
  keyboardVerticalOffset={64}
/>

Public API

• AgentChatScreen
• AgentChatModal
• useAgentChat
• SDKConfigurationLoader
• RichTemplateRegistry
• defaultRichTemplateRegistry

The package also re-exports the socket SDK AgentSDK, configuration types, message/event types, and logger.

Current Status

Core chat UI, socket SDK integration, theme resolution, message models, rich-content parsing, rich template renderers, and the local example app are in place.

See docs/flutter-ui-parity-spec.md for the remaining Flutter parity plan.