Lase

Appearance

フロントエンド (JS アセット) ​

Lase は Vue 3 ベースのフロントエンドアセットを NPM パッケージ @codebase-jp/lase として提供します。

インストール ​

bash
npm install @codebase-jp/lase

ピア依存関係も合わせてインストールしてください：

bash
npm install vue axios bootstrap bootstrap-icons dayjs vue-router @codebase-jp/vase

モジュール構成 ​

パッケージはコンテキスト別にモジュールが分かれています。

@codebase-jp/lase
├── api/
│   ├── admin/        管理者 API クライアント
│   ├── tenant/       テナント API クライアント
│   ├── common/       共通 API クライアント
│   └── public/       パブリック API クライアント
├── components/
│   ├── admin/        管理画面コンポーネント
│   ├── tenant/       テナント画面コンポーネント
│   └── common/       共通コンポーネント
├── composables/
│   ├── admin/        管理者向け composable
│   └── common/       共通 composable
├── views/
│   ├── admin/        管理画面ビュー（Vue SFC）
│   ├── tenant/       テナント画面ビュー
│   ├── public/       パブリック画面ビュー
│   └── common/       共通ビュー
├── routes/
│   ├── admin/        管理者ルート定義
│   ├── tenant/       テナントルート定義
│   └── public/       パブリックルート定義
├── models/           TypeScript 型定義モデル
├── enums/            TypeScript Enum
├── filters/          フィルター関数
├── utils/            ユーティリティ関数
└── types/            共通型定義

Composables ​

共通 ​

composable説明
useAppアプリケーション情報の取得・管理
useAuth認証状態・ログイン・ログアウト
useAiChatAI チャット
useConfigフロントエンド設定値の取得（詳細）
useLoggerクライアントログの送信
useRecaptchareCAPTCHA v3 トークン取得

テナント ​

composable説明
useEntitlementテナントの有効なエンタイトルメント（機能・利用上限・利用量）の取得と判定

管理者 ​

composable説明
useSenterSenter 課金サービスとの連携

useConfig ​

useConfig は、サーバーサイドの設定値をフロントエンドで参照するための composable です。

仕組み ​

Lase は GET /config エンドポイントを提供しており、Laravel の設定値（config('lase.front') と config('front')）をマージして window.__CONFIG__ としてブラウザに渡します。Blade テンプレートで以下のように読み込みます：

html
<script src="/config"></script>

useConfig はこの window.__CONFIG__ の値を読み取ります。

設定値の定義 ​

設定値は以下の 2 箇所で定義できます。アプリ側（config/front.php）の値が優先されます。

ファイル説明
config/lase.php の front キーパッケージ側のデフォルト値
config/front.phpアプリ側で追加・上書き
php
// config/front.php
return [
    'recaptcha_site_key' => env('FRONT_RECAPTCHA_SITE_KEY'),
    'docs_url' => env('FRONT_DOCS_URL', '/docs/'),
];

WARNING

/config のレスポンスはブラウザに公開されます。秘密鍵やパスワードなどの機密情報は絶対に含めないでください。

API ​

typescript
import useConfig from '@codebase-jp/lase/composables';

const { config, get, has } = useConfig();
プロパティ / メソッド型説明
configRecord<string, ConfigValue>設定オブジェクト全体
get(key, defaultValue?)<T>(key: string, defaultValue?: T) => T | undefinedドット記法で値を取得
has(key)(key: string) => booleanキーが存在するか判定

使用例 ​

typescript
const { get, has } = useConfig();

// 値を取得
const siteKey = get<string>('recaptcha_site_key');

// デフォルト値付き
const docsUrl = get<string>('docs_url', '/docs/');

// ネストされた値をドット記法で取得
const value = get<string>('nested.deep.key');

// 存在チェック
if (has('recaptcha_site_key')) {
  // ...
}

AiChat ​

RAG（AiEmbeddingService）と連携する AI チャット UI です。

vue
<script lang="ts" setup>
import { AiChat } from '@codebase-jp/lase/components';
</script>

<template>
  <AiChat />
</template>

Props ​

prop既定値説明
placeholderメッセージを入力...入力欄のプレースホルダ
welcomeMessageこんにちは！…初回表示時のメッセージ
suggestionsログイン/パスワード/問い合わせの3件質問例のボタン。[] で非表示
showSourcestrue回答の参照元ドキュメントを表示するか
autofocustrue表示直後に入力欄へフォーカスするか

挙動 ​

  • Markdown 描画 — 回答は Markdown として描画されます。LLM の出力はドキュメント経由のプロンプトインジェクションを含み得るため、ChatMarkdownUtil が許可リスト方式でサニタイズします（script / iframe / img / イベントハンドラ属性 / javascript: リンクは除去）。ユーザーの発言は Markdown として解釈せずそのまま表示します。
  • 参照元の表示 — バックエンドが RAG で参照したドキュメントを AI SDK の source-document パートとして通知します。docs_url を基に閲覧用リンクへ変換して表示します。
  • スクロール追従 — 最下部付近にいる間だけ自動追従します。読み返し中に引き戻されません。
  • 入力 — Enter で送信、Shift+Enter で改行、日本語入力の変換確定中は送信しません。高さは入力量に応じて自動調整されます。応答中も入力は可能です（送信のみ抑止）。
  • 中断・再試行・リセット — 応答中は停止ボタン、エラー時は再試行ボタン、会話のリセットボタンを表示します。

TIP

AiChat 自体はチャットの中身（メッセージ一覧・入力欄）のみを提供します。画面右下に浮かべる起動ボタン・パネルごと欲しい場合は、下記の AiChatWidget を使ってください。

AiChatWidget ​

AiChat を画面右下の起動ボタン（FAB）とパネルで包んだ、すぐ使える形の共通ウィジェットです。アプリのルートコンポーネントに1つ置くだけで、全画面共通のAIアシスタントを提供します。

vue
<script lang="ts" setup>
import { AiChatWidget } from '@codebase-jp/lase/components';
</script>

<template>
  <AiChatWidget />
</template>

Props ​

AiChat の placeholder / welcomeMessage / suggestions / showSources をそのまま受け取り、AiChat へ引き渡します（autofocus は非表示中のフォーカスを避けるため常に false で固定）。加えて以下を持ちます。

prop既定値説明
labelAIアシスタントパネルのタイトル・起動ボタンの aria-label

挙動 ​

  • 起動ボタンはクリックでパネルの開閉をトグルします。パネルは Esc キーでも閉じられます。
  • パネルは v-show で保持されるため、閉じても会話は消えません。
  • 幅576px未満の画面では、パネルが画面幅いっぱいに近い大きさになります。

TIP

チャット枠を独自にカスタマイズしたい場合（サイドバーに埋め込む等）は、AiChatWidget ではなく AiChat を直接使ってください。

管理画面ビュー ​

管理画面の Vue コンポーネントが提供されています。

ディレクトリ説明
views/admin/dashboard/ダッシュボード
views/admin/tenants/テナント管理
views/admin/users/ユーザー管理
views/admin/plans/プラン管理
views/admin/announcements/お知らせ管理
views/admin/admin-users/管理者ユーザー管理
views/admin/admin-roles/管理者ロール管理
views/admin/admin-mails/メール管理
views/admin/admin-images/画像管理
views/admin/inquiries/お問い合わせ管理
views/admin/blocked-domains/禁止ドメイン管理
views/admin/tenant-roles/テナントロール管理

ルーティング ​

Lase のルートをアプリの Vue Router に組み込む例：

typescript
import { createRouter, createWebHistory } from 'vue-router';
import adminRoutes from '@codebase-jp/lase/routes/admin';
import tenantRoutes from '@codebase-jp/lase/routes/tenant';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    ...adminRoutes,
    ...tenantRoutes,
  ],
});

TypeScript 型 ​

モデルの TypeScript 型は @codebase-jp/lase/models からインポートできます：

typescript
import type { Tenant, User, Subscription, Plan } from '@codebase-jp/lase/models';

Copyright © Codebase Inc.