Keural Kit

Keural Kitは、1つのスクリプトでKeuralの画面をお使いのページに埋め込みます。画面はShadow DOMの中に描画されるため、お使いのページのCSSと混ざることはありません。KitはKeuralのウェブ配布時に一緒に更新されます。配布後も古い画面が表示される場合は、ブラウザーとCDNのキャッシュを消去し、window.KeuralKit.__buildでビルド時刻を確認します。

読み込みアンカーリンクをコピー

Kitは、お使いのKeural環境のウェブアドレスから読み込みます。keural.aiの場合はhttps://keural.ai、オンプレミスや専用環境の場合は、その環境のKeuralウェブアドレスです。スクリプトより前に、Kitが呼び出すサーバーのアドレスをwindow.__KEURAL_ENV__に設定します。3つのアドレスは同じ環境のものである必要があり、導入時に担当者から受け取ります。

<script>
  window.__KEURAL_ENV__ = {
    NEXT_PUBLIC_API_BASE_URL: '<KEURAL_API_URL>',
    NEXT_PUBLIC_FAST_API_BASE_URL: '<KEURAL_AGENT_URL>',
    NEXT_PUBLIC_MODE: 'prd',
  };
</script>
<script src="<KEURAL_WEB_URL>/plugin/kit/keural.js" async></script>

同じKitを2つ目のドメインでも使うには、NEXT_PUBLIC_ADDITIONAL_FRONTEND_URL、NEXT_PUBLIC_ADDITIONAL_API_BASE_URL、NEXT_PUBLIC_ADDITIONAL_FAST_API_BASE_URLの3つの値をすべて設定します。1つでも欠けるとエラーになります。値はパスのないhttps://アドレスです。

スクリプトが読み込まれると、window.KeuralKitが生成されます。ReactなどのSPAでは、スクリプトが1回だけ読み込まれるように、ローダーを作って使います。

export function loadKeuralKit(src = '<KEURAL_WEB_URL>/plugin/kit/keural.js') {
  if (window.KeuralKit) return Promise.resolve(window.KeuralKit);
  return new Promise((resolve, reject) => {
    const s = document.createElement('script');
    s.src = src;
    s.async = true;
    s.onload = () => resolve(window.KeuralKit);
    s.onerror = () => {
      s.remove();
      reject(new Error('Keural Kit failed to load'));
    };
    document.head.appendChild(s);
  });
}

チャットを埋め込むアンカーリンクをコピー

const el = document.getElementById('keural-chat')!;

window.KeuralKit.mountChat(el, {
  userInfo: { userId: user.id, name: user.name },
  colorMode: 'light',
  initialData: { message: '今四半期の売上を要約して', room_name: '四半期レポート' },
  onSessionCreated: (roomId) => router.push(`/c/${roomId}`),
  onError: () => router.push('/'),
});

// 画面を離れるとき
window.KeuralKit.unmount(el);

• 既存の会話を開くには、sessionIdに会話IDを入れます。
• initialDataは新しい会話を開くときだけ入れます。既存の会話を開くときに入れると、同じメッセージが再び送信されます。
• userInfo.userIdがない場合は、未ログインとして扱われます。ログイン情報の準備ができてから埋め込みます。

メソッドアンカーリンクをコピー

mount*・update*メソッドは、colorModeとuserInfoを一緒に受け取ります。unmount(el)は要素だけを受け取ります。update*は、同じ要素を新しいオプションで描き直します。ウィンドウを開く・閉じるときは、openの値を変えてupdate*を呼び出します。同じ要素にmount*を再度呼び出すと、既存の画面を再利用します。

mountChatのオプションアンカーリンクをコピー

initialDataアンカーリンクをコピー

画面の言語アンカーリンクをコピー

Kitの画面は韓国語で表示されます。

設定とログインアンカーリンクをコピー

• ユーザーの設定は、Keuralのウェブまたはアプリで変更します。Kitの画面は、その設定に従います。
• ログインは、お使いのサービスが処理します。Kitには、ログインしたユーザーの情報だけを渡します。