@mulmochat-plugin/quiz 0.2.0 → 0.3.0

package/README.ja.md

@@ -11,9 +11,18 @@ MulmoChat用のクイズプラグイン。複数選択式のクイズをユー
 
 このプラグインは、MulmoChatのプラグインシステムのリファレンス実装です。サーバー通信不要なシンプルな構造のため、新しいプラグインを作成する際のテンプレートとして使用できます。
 
+**フレームワーク非依存のcoreアーキテクチャ**と**VueおよびReact実装**を実現しています:
+- **Core**: フレームワーク非依存のプラグインロジック（任意のUIフレームワークで使用可能）
+- **Vue**: Vue専用のUIコンポーネント
+- **React**: React専用のUIコンポーネント
+
+### 特徴
+
 - **Tailwind CSS 4** を使用したスタイリング
 - **TypeScript** による型安全な実装
 - **ESLint** による静的解析
+- **フレームワーク非依存のcore** による移植性
+- **マルチフレームワーク対応**（VueとReact）
 
 ## インストール
 
@@ -27,8 +36,7 @@ yarn add @mulmochat-plugin/quiz
 
 2. MulmoChatの`src/tools/index.ts`でインポート:
 ```typescript
-import QuizPlugin from "@mulmochat-plugin/quiz";
-import "@mulmochat-plugin/quiz/style.css";
+import QuizPlugin from "@mulmochat-plugin/quiz/vue";
 
 // pluginListに追加
 const pluginList = [
@@ -37,6 +45,32 @@ const pluginList = [
 ];
 ```
 
+3. `src/main.ts`でスタイルをインポート:
+```typescript
+import "@mulmochat-plugin/quiz/style.css";
+```
+
+## パッケージエクスポート
+
+```typescript
+// デフォルト: Core（フレームワーク非依存）
+import { pluginCore, TOOL_NAME, QuizData } from "@mulmochat-plugin/quiz";
+
+// Vue実装
+import QuizPlugin from "@mulmochat-plugin/quiz/vue";
+import "@mulmochat-plugin/quiz/style.css";
+
+// Vue名前付きエクスポート
+import { plugin, View, Preview } from "@mulmochat-plugin/quiz/vue";
+
+// React実装
+import QuizPlugin from "@mulmochat-plugin/quiz/react";
+import "@mulmochat-plugin/quiz/style.css";
+
+// React名前付きエクスポート
+import { plugin, View, Preview } from "@mulmochat-plugin/quiz/react";
+```
+
 ## 開発
 
 ### セットアップ
@@ -48,7 +82,11 @@ yarn install
 ### 開発サーバー
 
 ```bash
+# Vueデモ
 yarn dev
+
+# Reactデモ
+yarn dev:react
 ```
 
 http://localhost:5173/ でデモページが表示されます。
@@ -76,31 +114,45 @@ yarn lint
 ```
 MulmoChatPluginQuiz/
 ├── src/
-│   ├── index.ts          # エクスポート定義
+│   ├── index.ts          # デフォルトエクスポート（core）
 │   ├── style.css         # Tailwind CSSエントリー
-│   ├── common/           # プラグイン非依存の共通コード
-│   │   ├── index.ts      # 共通エクスポート
-│   │   └── types.ts      # ToolPlugin, ToolResult など
-│   └── plugin/           # クイズ固有の実装
-│       ├── index.ts      # プラグインインスタンスと実行ロジック
-│       ├── types.ts      # クイズの型とTOOL_DEFINITION
-│       ├── samples.ts    # テスト用サンプルデータ
-│       ├── View.vue      # メインビューコンポーネント
-│       └── Preview.vue   # サイドバープレビューコンポーネント
-├── demo/                 # 汎用プラグインデモ（どのプラグインでも動作）
-│   ├── App.vue           # 動的コンポーネント描画
+│   ├── core/             # フレームワーク非依存（Vue/React依存なし）
+│   │   ├── index.ts      # Coreエクスポート
+│   │   ├── types.ts      # Quiz固有の型（QuizData, QuizArgs）
+│   │   ├── definition.ts # ツール定義（スキーマ）
+│   │   ├── samples.ts    # サンプルデータ
+│   │   └── plugin.ts     # Execute関数
+│   ├── vue/              # Vue固有の実装
+│   │   ├── index.ts      # Vueプラグイン（core + コンポーネント）
+│   │   ├── View.vue      # メインビューコンポーネント
+│   │   └── Preview.vue   # サイドバープレビュー
+│   └── react/            # React固有の実装
+│       ├── index.ts      # Reactプラグイン（core + コンポーネント）
+│       ├── View.tsx      # メインビューコンポーネント
+│       └── Preview.tsx   # サイドバープレビュー
+├── demo/                 # Vueデモ
+│   ├── App.vue
 │   └── main.ts
+├── demo-react/           # Reactデモ
+│   ├── App.tsx
+│   ├── main.tsx
+│   ├── style.css
+│   ├── index.html
+│   └── vite.config.ts
 ├── package.json
 ├── vite.config.ts
 ├── tsconfig.json
+├── tsconfig.react.json   # React用TypeScript設定
 └── eslint.config.js
 ```
 
 ### ディレクトリの役割
 
-- **src/common/**: プラグイン非依存の型とユーティリティ。新しいプラグインにコピーするか、このパッケージからインポート。
-- **src/plugin/**: クイズ固有の実装。独自のプラグインロジックに置き換える。
-- **demo/**: 任意のToolPluginで動作する汎用デモ。インポートを変更するだけで使用可能。
+- **src/core/**: フレームワーク非依存の型とプラグインロジック。Vue/React依存なし。
+- **src/vue/**: Vue専用UIコンポーネントとVueプラグインエクスポート。
+- **src/react/**: React専用UIコンポーネントとReactプラグインエクスポート。
+- **demo/**: Vueデモ。
+- **demo-react/**: Reactデモ。
 
 ## 新しいプラグインの作成
 
@@ -121,35 +173,46 @@ yarn dev
 ### 手動セットアップ
 
 詳細な手順は [TEMPLATE.md](./TEMPLATE.md) を参照:
+- Core/Vue/Reactアーキテクチャ
 - そのままコピーできるファイル
-- 変更が必要なファイル（`package.json` のみ）
 - プラグイン固有の実装要件
-- 重要なパターン（View.vue のリアクティビティ）
+- 重要なパターン（View.vueのリアクティビティ）
+
+## Core型定義
 
-## ToolPlugin インターフェース
+### ToolPluginCore（フレームワーク非依存）
 
 ```typescript
-interface ToolPlugin<T, J, A> {
-  toolDefinition: {
-    type: "function";
-    name: string;
-    description: string;
-    parameters?: {
-      type: "object";
-      properties: Record<string, JsonSchemaProperty>;
-      required: string[];
-    };
-  };
+interface ToolPluginCore<T, J, A> {
+  toolDefinition: ToolDefinition;
   execute: (context: ToolContext, args: A) => Promise<ToolResult<T, J>>;
   generatingMessage: string;
   isEnabled: (startResponse?: StartApiResponse | null) => boolean;
-  viewComponent?: Component;
-  previewComponent?: Component;
   // Optional
   systemPrompt?: string;
-  fileUpload?: FileUploadConfig;
-  config?: ToolPluginConfig;
-  samples?: ToolSample[];  // テスト用サンプルデータ
+  inputHandlers?: InputHandler[];
+  configSchema?: PluginConfigSchema;
+  samples?: ToolSample[];
+  backends?: BackendType[];
+}
+```
+
+### ToolPlugin（Vue固有、ToolPluginCoreを拡張）
+
+```typescript
+interface ToolPlugin<T, J, A> extends ToolPluginCore<T, J, A> {
+  viewComponent?: Component;      // Vue Component
+  previewComponent?: Component;   // Vue Component
+  config?: ToolPluginConfig;      // レガシーVueコンポーネントベースの設定
+}
+```
+
+### ToolPlugin（React固有、ToolPluginCoreを拡張）
+
+```typescript
+interface ToolPlugin<T, J, A> extends ToolPluginCore<T, J, A> {
+  viewComponent?: ComponentType;    // React ComponentType
+  previewComponent?: ComponentType; // React ComponentType
 }
 ```
 

package/README.md

@@ -9,11 +9,20 @@ A quiz plugin for MulmoChat. Presents multiple choice quizzes to users.
 
 ## Overview
 
-This plugin is a reference implementation of the MulmoChat plugin system. Its simple structure with no server communication makes it an ideal template for creating new plugins.
+This plugin is the reference implementation of the MulmoChat plugin system. With its simple structure requiring no server communication, it can be used as a template for creating new plugins.
+
+It demonstrates the **framework-agnostic core architecture** with **Vue and React implementations**:
+- **Core**: Framework-agnostic plugin logic (can be used with any UI framework)
+- **Vue**: Vue-specific UI components
+- **React**: React-specific UI components
+
+### Features
 
 - **Tailwind CSS 4** for styling
 - **TypeScript** for type-safe implementation
 - **ESLint** for static analysis
+- **Framework-agnostic core** for portability
+- **Multi-framework support** (Vue and React)
 
 ## Installation
 
@@ -27,8 +36,7 @@ yarn add @mulmochat-plugin/quiz
 
 2. Import in MulmoChat's `src/tools/index.ts`:
 ```typescript
-import QuizPlugin from "@mulmochat-plugin/quiz";
-import "@mulmochat-plugin/quiz/style.css";
+import QuizPlugin from "@mulmochat-plugin/quiz/vue";
 
 // Add to pluginList
 const pluginList = [
@@ -37,6 +45,32 @@ const pluginList = [
 ];
 ```
 
+3. Import styles in `src/main.ts`:
+```typescript
+import "@mulmochat-plugin/quiz/style.css";
+```
+
+## Package Exports
+
+```typescript
+// Default: Core (framework-agnostic)
+import { pluginCore, TOOL_NAME, QuizData } from "@mulmochat-plugin/quiz";
+
+// Vue implementation
+import QuizPlugin from "@mulmochat-plugin/quiz/vue";
+import "@mulmochat-plugin/quiz/style.css";
+
+// Named Vue exports
+import { plugin, View, Preview } from "@mulmochat-plugin/quiz/vue";
+
+// React implementation
+import QuizPlugin from "@mulmochat-plugin/quiz/react";
+import "@mulmochat-plugin/quiz/style.css";
+
+// Named React exports
+import { plugin, View, Preview } from "@mulmochat-plugin/quiz/react";
+```
+
 ## Development
 
 ### Setup
@@ -48,7 +82,11 @@ yarn install
 ### Development Server
 
 ```bash
+# Vue demo
 yarn dev
+
+# React demo
+yarn dev:react
 ```
 
 Demo page will be available at http://localhost:5173/
@@ -76,31 +114,45 @@ yarn lint
 ```
 MulmoChatPluginQuiz/
 ├── src/
-│   ├── index.ts          # Export definitions
+│   ├── index.ts          # Default export (core)
 │   ├── style.css         # Tailwind CSS entry
-│   ├── common/           # Plugin-agnostic shared code
-│   │   ├── index.ts      # Common exports
-│   │   └── types.ts      # ToolPlugin, ToolResult, etc.
-│   └── plugin/           # Quiz-specific implementation
-│       ├── index.ts      # Plugin instance and execute logic
-│       ├── types.ts      # Quiz types and TOOL_DEFINITION
-│       ├── samples.ts    # Sample data for testing
-│       ├── View.vue      # Main view component
-│       └── Preview.vue   # Sidebar preview component
-├── demo/                 # Generic plugin demo (works with any plugin)
-│   ├── App.vue           # Dynamic component rendering
+│   ├── core/             # Framework-agnostic (no Vue/React dependencies)
+│   │   ├── index.ts      # Core exports
+│   │   ├── types.ts      # Quiz-specific types (QuizData, QuizArgs)
+│   │   ├── definition.ts # Tool definition (schema)
+│   │   ├── samples.ts    # Sample data
+│   │   └── plugin.ts     # Execute function
+│   ├── vue/              # Vue-specific implementation
+│   │   ├── index.ts      # Vue plugin (combines core + components)
+│   │   ├── View.vue      # Main view component
+│   │   └── Preview.vue   # Sidebar preview component
+│   └── react/            # React-specific implementation
+│       ├── index.ts      # React plugin (combines core + components)
+│       ├── View.tsx      # Main view component
+│       └── Preview.tsx   # Sidebar preview component
+├── demo/                 # Vue demo
+│   ├── App.vue
 │   └── main.ts
+├── demo-react/           # React demo
+│   ├── App.tsx
+│   ├── main.tsx
+│   ├── style.css
+│   ├── index.html
+│   └── vite.config.ts
 ├── package.json
 ├── vite.config.ts
 ├── tsconfig.json
+├── tsconfig.react.json   # React-specific TypeScript config
 └── eslint.config.js
 ```
 
 ### Directory Purpose
 
-- **src/common/**: Plugin-agnostic types and utilities. Copy this to your new plugin or import from this package.
-- **src/plugin/**: Quiz-specific implementation. Replace with your plugin logic.
-- **demo/**: Generic demo that works with any ToolPlugin. Just change the import.
+- **src/core/**: Framework-agnostic types and plugin logic. No Vue/React dependencies.
+- **src/vue/**: Vue-specific UI components and the full Vue plugin export.
+- **src/react/**: React-specific UI components and the full React plugin export.
+- **demo/**: Vue demo.
+- **demo-react/**: React demo.
 
 ## Creating a New Plugin
 
@@ -121,35 +173,46 @@ yarn dev
 ### Manual Setup
 
 See [TEMPLATE.md](./TEMPLATE.md) for detailed instructions on:
+- Core/Vue architecture
 - Files that can be copied as-is
-- Files requiring modification (only `package.json`)
 - Plugin-specific implementation requirements
 - Important patterns (View.vue reactivity)
 
-## ToolPlugin Interface
+## Core Types
+
+### ToolPluginCore (Framework-agnostic)
 
 ```typescript
-interface ToolPlugin<T, J, A> {
-  toolDefinition: {
-    type: "function";
-    name: string;
-    description: string;
-    parameters?: {
-      type: "object";
-      properties: Record<string, JsonSchemaProperty>;
-      required: string[];
-    };
-  };
+interface ToolPluginCore<T, J, A> {
+  toolDefinition: ToolDefinition;
   execute: (context: ToolContext, args: A) => Promise<ToolResult<T, J>>;
   generatingMessage: string;
   isEnabled: (startResponse?: StartApiResponse | null) => boolean;
-  viewComponent?: Component;
-  previewComponent?: Component;
   // Optional
   systemPrompt?: string;
-  fileUpload?: FileUploadConfig;
-  config?: ToolPluginConfig;
-  samples?: ToolSample[];  // Sample data for testing
+  inputHandlers?: InputHandler[];
+  configSchema?: PluginConfigSchema;
+  samples?: ToolSample[];
+  backends?: BackendType[];
+}
+```
+
+### ToolPlugin (Vue-specific, extends ToolPluginCore)
+
+```typescript
+interface ToolPlugin<T, J, A> extends ToolPluginCore<T, J, A> {
+  viewComponent?: Component;      // Vue Component
+  previewComponent?: Component;   // Vue Component
+  config?: ToolPluginConfig;      // Legacy Vue component-based config
+}
+```
+
+### ToolPlugin (React-specific, extends ToolPluginCore)
+
+```typescript
+interface ToolPlugin<T, J, A> extends ToolPluginCore<T, J, A> {
+  viewComponent?: ComponentType;    // React ComponentType
+  previewComponent?: ComponentType; // React ComponentType
 }
 ```
 

package/README.npm.md

@@ -1,4 +1,4 @@
-# MulmoChat Plugin
+# @mulmochat-plugin/{plugin-name}
 
 A plugin for [MulmoChat](https://github.com/receptron/MulmoChat) - a multi-modal voice chat application with OpenAI's GPT-4 Realtime API.
 
@@ -14,26 +14,60 @@ yarn add @mulmochat-plugin/{plugin-name}
 
 ## Usage
 
+### Vue Implementation (for MulmoChat)
+
 ```typescript
-import Plugin from "@mulmochat-plugin/{plugin-name}";
-import "@mulmochat-plugin/{plugin-name}/style.css";
+// In src/tools/index.ts
+import Plugin from "@mulmochat-plugin/{plugin-name}/vue";
 
-// Add to pluginList
 const pluginList = [
   // ... other plugins
   Plugin,
 ];
+
+// In src/main.ts
+import "@mulmochat-plugin/{plugin-name}/style.css";
 ```
 
+### React Implementation
+
+```typescript
+import Plugin from "@mulmochat-plugin/{plugin-name}/react";
+import "@mulmochat-plugin/{plugin-name}/style.css";
+
+// Named exports
+import { plugin, View, Preview } from "@mulmochat-plugin/{plugin-name}/react";
+```
+
+### Core Only (Framework-agnostic)
+
+```typescript
+import { pluginCore, TOOL_NAME } from "@mulmochat-plugin/{plugin-name}";
+// or
+import pluginCore from "@mulmochat-plugin/{plugin-name}";
+```
+
+## Package Exports
+
+| Export | Description |
+|--------|-------------|
+| `@mulmochat-plugin/{plugin-name}` | Core (framework-agnostic) |
+| `@mulmochat-plugin/{plugin-name}/vue` | Vue implementation with UI components |
+| `@mulmochat-plugin/{plugin-name}/react` | React implementation with UI components |
+| `@mulmochat-plugin/{plugin-name}/style.css` | Tailwind CSS styles |
+
 ## Development
 
 ```bash
 # Install dependencies
 yarn install
 
-# Start dev server (http://localhost:5173/)
+# Start dev server - Vue (http://localhost:5173/)
 yarn dev
 
+# Start dev server - React (http://localhost:5173/)
+yarn dev:react
+
 # Build
 yarn build
 

package/dist/core/definition.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Quiz Tool Definition (Schema)
+ */
+import type { ToolDefinition } from "gui-chat-protocol";
+export declare const TOOL_NAME = "putQuestions";
+export declare const TOOL_DEFINITION: ToolDefinition;

package/dist/core/index.d.ts

@@ -4,5 +4,7 @@
  * Framework-agnostic types and plugin logic.
  * Import from "@mulmochat-plugin/quiz/core"
  */
-export type { BackendType, ToolContextApp, ToolContext, ToolResult, ToolResultComplete, JsonSchemaProperty, ToolDefinition, StartApiResponse, ToolSample, InputHandler, FileInputHandler, ClipboardImageInputHandler, UrlInputHandler, TextInputHandler, FileUploadConfig, ConfigValue, ConfigFieldSchema, StringFieldSchema, NumberFieldSchema, BooleanFieldSchema, SelectFieldSchema, MultiSelectFieldSchema, SelectOption, PluginConfigSchema, ViewComponentProps, PreviewComponentProps, ToolPluginCore, QuizQuestion, QuizData, QuizArgs, } from "./types";
-export { pluginCore, TOOL_NAME, TOOL_DEFINITION, SAMPLES, executeQuiz } from "./plugin";
+export type { QuizQuestion, QuizData, QuizArgs } from "./types";
+export { pluginCore, executeQuiz } from "./plugin";
+export { TOOL_NAME, TOOL_DEFINITION } from "./definition";
+export { SAMPLES } from "./samples";

package/dist/core/plugin.d.ts

@@ -4,9 +4,7 @@
  * Contains the plugin logic without UI components.
  * Can be used by any framework (Vue, React, etc.)
  */
-import type { ToolPluginCore, ToolContext, ToolResult, ToolDefinition, ToolSample, QuizData, QuizArgs } from "./types";
-export declare const TOOL_NAME = "putQuestions";
-export declare const TOOL_DEFINITION: ToolDefinition;
-export declare const SAMPLES: ToolSample[];
+import type { ToolPluginCore, ToolContext, ToolResult } from "gui-chat-protocol";
+import type { QuizData, QuizArgs } from "./types";
 export declare const executeQuiz: (_context: ToolContext, args: QuizArgs) => Promise<ToolResult<never, QuizData>>;
 export declare const pluginCore: ToolPluginCore<never, QuizData, QuizArgs>;

package/dist/core/samples.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Quiz Sample Data
+ */
+import type { ToolSample } from "gui-chat-protocol";
+export declare const SAMPLES: ToolSample[];