hanbiro-react16-sdk

React 16.2.0 compatible UI components SDK for Hanbiro projects.

Installation

npm install hanbiro-react16-sdk

CSS Import (Required)

You must import the SDK stylesheet at the entry point of your project (or in the HTML file when using UMD).

For npm/ES module projects:

// src/index.tsx or App.tsx
import 'hanbiro-react16-sdk/style.css';

For UMD (script tag):

<link rel="stylesheet" href="path/to/hanbiro-react16-sdk.style.css" />

Exported Components

| Component | Import path | |---|---| | ChatAIDraft | hanbiro-react16-sdk/components | | LoadingCircular | hanbiro-react16-sdk/components | | LoadingContainer | hanbiro-react16-sdk/components |

Exported Utils

| Function | Description | Import path | |---|---|---| | initHanbiroReactSDK | Initialize SDK (baseUrl, signer) | hanbiro-react16-sdk/utils | | getBaseUrl | Get the configured base URL | hanbiro-react16-sdk/utils | | getGroupwareUrl | Get the groupware URL | hanbiro-react16-sdk/utils |

Initialization (Required)

Call initHanbiroReactSDK at the entry point of your project before rendering any components.

import { initHanbiroReactSDK } from 'hanbiro-react16-sdk/utils';

initHanbiroReactSDK({
  baseUrl: 'https://vndev.hanbiro.com',
  signer: null, // Pass your signer instance here if available
});

Usage: ES Module (npm)

import React, { Component } from 'react';
import { ChatAIDraft } from 'hanbiro-react16-sdk/components';
import { getBaseUrl } from 'hanbiro-react16-sdk/utils';
import 'hanbiro-react16-sdk/style.css';

class ChatAIDraftApp extends Component {
  handleApply = (result) => {
    console.log('Applied Output:', result);
  };

  render() {
    return (
      <ChatAIDraft
        baseUrl={getBaseUrl()}
        onApply={this.handleApply}
      />
    );
  }
}

export default ChatAIDraftApp;

Usage: UMD (Script Tag / AngularJS / Legacy Projects)

Load the SDK via <script> and <link> tags directly in your HTML. React and ReactDOM must be loaded first.

<!-- 1. Load peer dependencies -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<!-- 2. Load SDK stylesheet -->
<link rel="stylesheet" href="path/to/hanbiro-react16-sdk.style.css" />

<!-- 3. Load SDK UMD bundle -->
<script src="path/to/hanbiro-react16-sdk.umd.js"></script>

The SDK is exposed as a global variable HanbiroReact16SDK.

// Initialize
HanbiroReact16SDK.initHanbiroReactSDK({
  baseUrl: 'https://vndev.hanbiro.com',
  signer: null,
});

// Mount a component into a DOM element
ReactDOM.render(
  React.createElement(HanbiroReact16SDK.ChatAIDraft, {
    baseUrl: HanbiroReact16SDK.getBaseUrl(),
    onApply: function(result) {
      console.log('Applied:', result);
    },
  }),
  document.getElementById('chat-ai-container')
);

Example: AngularJS Directive

angular.module('myApp').directive('chatAiDraft', function() {
  return {
    restrict: 'E',
    link: function(scope, element) {
      var container = element[0];

      HanbiroReact16SDK.initHanbiroReactSDK({
        baseUrl: 'https://vndev.hanbiro.com',
        signer: null,
      });

      ReactDOM.render(
        React.createElement(HanbiroReact16SDK.ChatAIDraft, {
          baseUrl: HanbiroReact16SDK.getBaseUrl(),
          onApply: function(result) {
            scope.$apply(function() {
              scope.draftContent = result.html;
            });
          },
        }),
        container
      );

      scope.$on('$destroy', function() {
        ReactDOM.unmountComponentAtNode(container);
      });
    }
  };
});

<!-- In your AngularJS template -->
<chat-ai-draft></chat-ai-draft>

ChatAIDraft — Imperative API (Ref)

ChatAIDraft exposes setAIContext via ref, allowing you to programmatically set the HTML content of the AI Context editor inside the Settings panel.

interface ChatAIDraftRef {
  setAIContext: (html: string) => void;
}

React 18 / React 16.8+ (useRef)

import React, { useRef } from 'react';
import { ChatAIDraft } from 'hanbiro-react16-sdk/components';

function MailComposer() {
  const chatRef = useRef<ChatAIDraft>(null);

  const handleOpenAI = () => {
    chatRef.current?.setAIContext('<p>Original email content...</p>');
  };

  return (
    <>
      <button onClick={handleOpenAI}>Open AI</button>
      <ChatAIDraft
        ref={chatRef}
        onApply={(params) => console.log(params.html)}
      />
    </>
  );
}

AngularJS / UMD (callback ref)

let chatAIInstance = null;

ReactDOM.render(
  React.createElement(HanbiroReact16SDK.ChatAIDraft, {
    ref: function(instance) { chatAIInstance = instance; },
    onApply: function(result) { /* ... */ },
  }),
  document.getElementById('chat-ai-container')
);

// Call anytime — e.g. when opening the AI panel
function setEmailContext(html) {
  if (chatAIInstance) {
    chatAIInstance.setAIContext(html);
  }
}

Development Commands

• Run playground locally: npm run dev
• Build library for production: npm run build
• Build playground for production: npm run build:playground
• Typecheck: npm run test:typescript