@gui-chat-plugin/template 0.1.1

package/README.ja.md

@@ -0,0 +1,258 @@
+# GUIChat プラグインテンプレート
+
+**チャットデモ環境統合**を備えたGUIChat/MulmoChat用プラグインテンプレート。
+
+このテンプレートは、ジュニアエンジニアがプラグインとLLMの連携を実際のチャットインターフェースで確認しながらプラグイン開発を学べるように設計されています。
+
+> **Note**: このテンプレートには**Quizプラグインが動作サンプル**として含まれています。Quizプラグインは、ユーザー入力を受け付けるインタラクティブなプラグインの作成方法を示しています。自分のプラグイン実装に置き換えてください。
+
+## 特徴
+
+- **チャット統合デモ**: 実際のチャットインターフェースでプラグインをテスト
+- **Mockモード**: APIキー不要で開発
+- **Real APIモード**: 本番環境に近いOpenAI APIでテスト
+- **フレームワーク非依存のCore**: プラグインロジックをUIフレームワークから分離
+- **Vue + React対応**: 両フレームワークをすぐに使用可能
+- **TypeScript**: 完全な型安全性
+- **Tailwind CSS 4**: モダンなスタイリング
+
+## クイックスタート
+
+```bash
+# 依存関係をインストール
+yarn install
+
+# 開発サーバーを起動
+yarn dev        # Vueデモ
+yarn dev:react  # Reactデモ
+```
+
+http://localhost:5173 を開いてデモを確認。
+
+### デモ機能
+
+1. **チャットパネル**: メッセージを送信してLLMの応答を確認
+2. **Mockモード**: APIキー不要でテスト（「quiz」「hello」キーワードを認識）
+3. **Real APIモード**: OpenAI APIキーで実際のLLM連携
+4. **Viewコンポーネント**: プラグインの結果表示を確認
+5. **Previewコンポーネント**: サイドバーサムネイルを確認
+6. **Quick Samples**: プラグインサンプルを直接実行
+
+## 独自プラグインの作成
+
+### ステップ1: テンプレートをコピー
+
+```bash
+cp -r GUIChatPluginTemplate GUIChatPluginMyPlugin
+cd GUIChatPluginMyPlugin
+```
+
+### ステップ2: package.jsonを更新
+
+パッケージ名を変更:
+```json
+{
+  "name": "guichat-plugin-my-plugin",
+  "description": "プラグインの説明"
+}
+```
+
+### ステップ3: プラグインを実装
+
+`src/core/`のファイルを編集（Vue/React共通）:
+
+1. **types.ts** - データ型を定義
+2. **definition.ts** - ツール名とJSONスキーマを定義
+3. **samples.ts** - テストデータを追加
+4. **plugin.ts** - execute関数を実装
+
+#### Vueの場合
+
+`src/vue/`のファイルを編集:
+
+1. **View.vue** - メインUIコンポーネント
+2. **Preview.vue** - サイドバーサムネイル
+
+開発サーバー起動: `yarn dev`
+
+#### Reactの場合
+
+`src/react/`のファイルを編集:
+
+1. **View.tsx** - メインUIコンポーネント
+2. **Preview.tsx** - サイドバーサムネイル
+
+開発サーバー起動: `yarn dev:react`
+
+### ステップ4: モックレスポンスを更新（オプション）
+
+`demo/shared/chat-utils.ts`を編集してプラグイン用のモックレスポンスを追加:
+
+```typescript
+export const DEFAULT_MOCK_RESPONSES: Record<string, MockResponse> = {
+  // プラグインのモックレスポンスを追加
+  myKeyword: {
+    toolCall: {
+      name: "myToolName",
+      args: { /* 引数 */ },
+    },
+  },
+  // ...
+};
+```
+
+## プラグイン構造
+
+✏️ = 編集するファイル　　🚫 = 編集しない（そのまま使う）
+
+```
+GUIChatPluginTemplate/
+│
+├── src/                  # 📦 npmパッケージとして配布される部分
+│   │                     #    MulmoChatなどのアプリから使用される
+│   ├── index.ts          # 🚫 デフォルトエクスポート（core）
+│   ├── style.css         # 🚫 Tailwind CSSエントリー
+│   ├── core/             # フレームワーク非依存（Vue/React依存なし）
+│   │   ├── index.ts      # 🚫 Coreエクスポート
+│   │   ├── types.ts      # ✏️ プラグイン固有の型
+│   │   ├── definition.ts # ✏️ ツール定義（LLM用スキーマ）
+│   │   ├── 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/              # Vueデモ
+    ├── react/            # Reactデモ
+    └── shared/
+        └── chat-utils.ts # ✏️ モックレスポンス追加時のみ編集
+```
+
+> **初心者向け解説**:
+> - `src/` = あなたが作るプラグイン本体。npm公開後、他のアプリからインポートして使う
+> - `demo/` = 開発中にプラグインをテストするための環境。npm公開時には含まれない
+> - ✏️ のファイルだけ編集すればプラグインが作れる
+
+## チャットフローの理解
+
+通常はOpenAI APIを通じてLLMと通信します。Mockモードは**開発時のテスト用**で、APIキー不要でプラグインの動作確認ができます。
+
+```
+ユーザー入力
+    ↓
+useChat.sendMessage()
+    ↓
+┌─────────────────────────────────────┐
+│  Mockモード?（テスト用）             │
+│  ├─ Yes → モックレスポンスを返す    │
+│  └─ No  → OpenAI APIを呼び出す ←通常│
+└─────────────────────────────────────┘
+    ↓
+LLMレスポンス（tool_callsを含む場合あり）
+    ↓
+┌─────────────────────────────────────┐
+│  tool_callsあり?                    │
+│  ├─ Yes → plugin.execute(args)      │
+│  │        → 結果を更新              │
+│  │        → Viewコンポーネントに表示 │
+│  │        → APIを再呼び出し          │
+│  │        → LLMの応答を取得          │
+│  └─ No  → テキストレスポンスを表示   │
+└─────────────────────────────────────┘
+```
+
+## 重要な概念
+
+### ToolResult
+
+execute関数は`ToolResult`を返します:
+
+```typescript
+interface ToolResult<T, J> {
+  toolName: string;      // TOOL_NAMEと一致必須（必須）
+  message: string;       // LLM向けの簡潔なステータス
+  jsonData?: J;          // LLMに見えるデータ
+  data?: T;              // UI専用データ（LLMには送信されない）
+  title?: string;        // 結果のタイトル
+  instructions?: string; // LLMへのフォローアップ指示
+}
+```
+
+### Viewコンポーネントのprops
+
+```typescript
+// View.vueが受け取るprops
+{
+  selectedResult: ToolResult;              // 表示する現在の結果
+  sendTextMessage: (text: string) => void; // チャットにメッセージを送信
+}
+
+// 発行するイベント
+@updateResult="(updated: ToolResult) => void"
+```
+
+### 重要なパターン: ref + watch
+
+View.vueでは、`computed`の代わりに`ref + watch`パターンを使用:
+
+```typescript
+// ✅ 正しい
+const data = ref<MyData | null>(null);
+watch(
+  () => props.selectedResult,
+  (newResult) => {
+    if (newResult?.jsonData) {
+      data.value = newResult.jsonData;
+    }
+  },
+  { immediate: true }
+);
+
+// ❌ 間違い - リアクティビティの問題が発生
+const data = computed(() => props.selectedResult?.jsonData);
+```
+
+## コマンド
+
+```bash
+yarn dev          # Vueデモを起動
+yarn dev:react    # Reactデモを起動
+yarn build        # 本番用ビルド
+yarn typecheck    # 型チェック
+yarn lint         # コードのLint
+```
+
+## MulmoChatとの統合
+
+プラグイン開発後:
+
+1. npmに公開またはローカルパスを使用
+2. MulmoChatにインストール:
+   ```bash
+   yarn add guichat-plugin-my-plugin
+   ```
+3. MulmoChatの`src/tools/index.ts`でインポート:
+   ```typescript
+   import MyPlugin from "guichat-plugin-my-plugin/vue";
+   ```
+
+## ドキュメント
+
+詳細なドキュメントは[docs/](./docs/README.ja.md)を参照:
+
+- [はじめに](./docs/getting-started.ja.md) - 初心者向けチュートリアル
+- [プラグイン開発ガイド](./docs/plugin-development-guide.md) - 詳細リファレンス
+- [AI開発ガイド](./docs/ai-development-guide.md) - AI向け最適化ガイド
+- [npm公開ガイド](./docs/npm-publishing-guide.md) - 公開と統合
+
+## ライセンス
+
+MIT

package/README.md

@@ -0,0 +1,248 @@
+# GUIChat Plugin Template
+
+A plugin template for GUIChat/MulmoChat with **integrated chat demo environment**.
+
+This template is designed for junior engineers to learn plugin development with a working chat interface that demonstrates how plugins interact with LLMs.
+
+> **Note**: This template includes a **Quiz plugin as a working sample**. The Quiz plugin demonstrates how to create interactive plugins with user input. Replace it with your own plugin implementation.
+
+## Features
+
+- **Chat-Integrated Demo**: Test your plugin with a real chat interface
+- **Mock Mode**: Develop without needing an API key
+- **Real API Mode**: Test with OpenAI API for production-like behavior
+- **Framework-agnostic Core**: Plugin logic separated from UI framework
+- **Vue + React Support**: Both frameworks supported out of the box
+- **TypeScript**: Full type safety
+- **Tailwind CSS 4**: Modern styling
+
+## Quick Start
+
+```bash
+# Install dependencies
+yarn install
+
+# Start development server
+yarn dev
+```
+
+Open http://localhost:5173 to see the demo.
+
+### Demo Features
+
+1. **Chat Panel**: Send messages and see LLM responses
+2. **Mock Mode**: Toggle to test without API key (recognizes "quiz" and "hello" keywords)
+3. **Real API Mode**: Enter your OpenAI API key for actual LLM integration
+4. **View Component**: See how your plugin renders results
+5. **Preview Component**: See the sidebar thumbnail
+6. **Quick Samples**: Execute plugin samples directly
+
+## Creating Your Own Plugin
+
+### Step 1: Copy this template
+
+```bash
+cp -r GUIChatPluginTemplate GUIChatPluginMyPlugin
+cd GUIChatPluginMyPlugin
+```
+
+### Step 2: Update package.json
+
+Change the package name:
+```json
+{
+  "name": "guichat-plugin-my-plugin",
+  "description": "Your plugin description"
+}
+```
+
+### Step 3: Implement your plugin
+
+Edit the files in `src/core/` (shared by Vue/React):
+
+1. **types.ts** - Define your data types
+2. **definition.ts** - Define tool name and JSON schema
+3. **samples.ts** - Add test data
+4. **plugin.ts** - Implement execute function
+
+#### For Vue
+
+Edit the files in `src/vue/`:
+
+1. **View.vue** - Main UI component
+2. **Preview.vue** - Sidebar thumbnail
+
+Start dev server: `yarn dev`
+
+#### For React
+
+Edit the files in `src/react/`:
+
+1. **View.tsx** - Main UI component
+2. **Preview.tsx** - Sidebar thumbnail
+
+Start dev server: `yarn dev:react`
+
+### Step 4: Update mock responses (optional)
+
+Edit `demo/shared/chat-utils.ts` to add mock responses for your plugin:
+
+```typescript
+export const DEFAULT_MOCK_RESPONSES: Record<string, MockResponse> = {
+  // Add your plugin's mock response
+  myKeyword: {
+    toolCall: {
+      name: "myToolName",
+      args: { /* your args */ },
+    },
+  },
+  // ...
+};
+```
+
+## Plugin Structure
+
+✏️ = Edit this file　　🚫 = Don't edit (use as-is)
+
+```
+GUIChatPluginTemplate/
+│
+├── src/                  # 📦 Distributed as npm package
+│   │                     #    Used by apps like MulmoChat
+│   ├── index.ts          # 🚫 Default export (core)
+│   ├── style.css         # 🚫 Tailwind CSS entry
+│   ├── core/             # Framework-agnostic (no Vue/React dependencies)
+│   │   ├── index.ts      # 🚫 Core exports
+│   │   ├── types.ts      # ✏️ Plugin-specific types
+│   │   ├── definition.ts # ✏️ Tool definition (schema for LLM)
+│   │   ├── samples.ts    # ✏️ Sample data for testing
+│   │   └── 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/                 # 🔧 For development/testing only (NOT distributed)
+    │                     #    Chat demo to test your plugin
+    │                     #    🚫 Generally no edits needed
+    ├── vue/              # Vue demo
+    ├── react/            # React demo
+    └── shared/
+        └── chat-utils.ts # ✏️ Edit only to add mock responses
+```
+
+> **For Beginners**:
+> - `src/` = Your plugin code. After npm publish, other apps import and use this
+> - `demo/` = Development environment to test your plugin. Not included in npm package
+> - Just edit the ✏️ files to create your plugin
+
+## Understanding the Chat Flow
+
+Normally, the chat communicates with the LLM via OpenAI API. Mock Mode is **for development testing only**, allowing you to test plugin behavior without an API key.
+
+```
+User Input
+    ↓
+useChat.sendMessage()
+    ↓
+┌─────────────────────────────────────┐
+│  Mock Mode? (for testing)           │
+│  ├─ Yes → Return mock response      │
+│  └─ No  → Call OpenAI API ← normal  │
+└─────────────────────────────────────┘
+    ↓
+LLM Response (may include tool_calls)
+    ↓
+┌─────────────────────────────────────┐
+│  Has tool_calls?                    │
+│  ├─ Yes → plugin.execute(args)      │
+│  │        → Update result           │
+│  │        → Show in View component  │
+│  │        → Call API again          │
+│  │        → Get LLM response        │
+│  └─ No  → Show text response        │
+└─────────────────────────────────────┘
+```
+
+## Key Concepts
+
+### ToolResult
+
+The execute function returns a `ToolResult`:
+
+```typescript
+interface ToolResult<T, J> {
+  toolName: string;      // Must match TOOL_NAME (required)
+  message: string;       // Brief status for LLM
+  jsonData?: J;          // Data visible to LLM
+  data?: T;              // Data for UI only (not sent to LLM)
+  title?: string;        // Result title
+  instructions?: string; // Follow-up instructions for LLM
+}
+```
+
+### View Component Props
+
+```typescript
+// Props received by View.vue
+{
+  selectedResult: ToolResult;              // Current result to display
+  sendTextMessage: (text: string) => void; // Send message back to chat
+}
+
+// Event emitted
+@updateResult="(updated: ToolResult) => void"
+```
+
+### Important Pattern: ref + watch
+
+In View.vue, always use `ref + watch` pattern instead of `computed`:
+
+```typescript
+// ✅ Correct
+const data = ref<MyData | null>(null);
+watch(
+  () => props.selectedResult,
+  (newResult) => {
+    if (newResult?.jsonData) {
+      data.value = newResult.jsonData;
+    }
+  },
+  { immediate: true }
+);
+
+// ❌ Wrong - causes reactivity issues
+const data = computed(() => props.selectedResult?.jsonData);
+```
+
+## Commands
+
+```bash
+yarn dev          # Start Vue demo
+yarn dev:react    # Start React demo
+yarn build        # Build for production
+yarn typecheck    # Type check
+yarn lint         # Lint code
+```
+
+## Integration with MulmoChat
+
+After developing your plugin:
+
+1. Publish to npm or use local path
+2. Install in MulmoChat:
+   ```bash
+   yarn add guichat-plugin-my-plugin
+   ```
+3. Import in MulmoChat's `src/tools/index.ts`:
+   ```typescript
+   import MyPlugin from "guichat-plugin-my-plugin/vue";
+   ```
+
+## License
+
+MIT

package/README.npm.md

@@ -0,0 +1,93 @@
+# guichat-plugin-{plugin-name}
+
+[![npm version](https://badge.fury.io/js/guichat-plugin-{plugin-name}.svg)](https://www.npmjs.com/package/guichat-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.
+
+## What this plugin does
+
+{plugin-description}
+
+## Installation
+
+```bash
+yarn add guichat-plugin-{plugin-name}
+```
+
+## Usage
+
+### Vue Implementation (for MulmoChat)
+
+```typescript
+// In src/tools/index.ts
+import Plugin from "guichat-plugin-{plugin-name}/vue";
+
+const pluginList = [
+  // ... other plugins
+  Plugin,
+];
+
+// In src/main.ts
+import "guichat-plugin-{plugin-name}/style.css";
+```
+
+### React Implementation
+
+```typescript
+import Plugin from "guichat-plugin-{plugin-name}/react";
+import "guichat-plugin-{plugin-name}/style.css";
+
+// Named exports
+import { plugin, View, Preview } from "guichat-plugin-{plugin-name}/react";
+```
+
+### Core Only (Framework-agnostic)
+
+```typescript
+import { pluginCore, TOOL_NAME } from "guichat-plugin-{plugin-name}";
+// or
+import pluginCore from "guichat-plugin-{plugin-name}";
+```
+
+## Package Exports
+
+| Export | Description |
+|--------|-------------|
+| `guichat-plugin-{plugin-name}` | Core (framework-agnostic) |
+| `guichat-plugin-{plugin-name}/vue` | Vue implementation with UI components |
+| `guichat-plugin-{plugin-name}/react` | React implementation with UI components |
+| `guichat-plugin-{plugin-name}/style.css` | Tailwind CSS styles |
+
+## Development
+
+```bash
+# Install dependencies
+yarn install
+
+# Start dev server - Vue (http://localhost:5173/)
+yarn dev
+
+# Start dev server - React (http://localhost:5173/)
+yarn dev:react
+
+# Build
+yarn build
+
+# Type check
+yarn typecheck
+
+# Lint
+yarn lint
+```
+
+## Test Prompts
+
+Try these prompts to test the plugin:
+
+1. "{test-prompt-1}"
+2. "{test-prompt-2}"
+3. "{test-prompt-3}"
+
+## License
+
+MIT

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

@@ -0,0 +1,10 @@
+/**
+ * MulmoChat Plugin Core Exports
+ *
+ * Framework-agnostic types and plugin logic.
+ * Import from "@mulmochat-plugin/quiz/core"
+ */
+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

@@ -0,0 +1,10 @@
+/**
+ * MulmoChat Quiz Plugin Core (Framework-agnostic)
+ *
+ * Contains the plugin logic without UI components.
+ * Can be used by any framework (Vue, React, etc.)
+ */
+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[];

package/dist/core/types.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Quiz Plugin Types
+ *
+ * Quiz-specific type definitions only.
+ * Common types should be imported directly from gui-chat-protocol.
+ */
+/** Single quiz question */
+export interface QuizQuestion {
+    question: string;
+    choices: string[];
+    correctAnswer?: number;
+}
+/** Quiz data stored in result.jsonData */
+export interface QuizData {
+    title?: string;
+    questions: QuizQuestion[];
+    userAnswers?: number[];
+}
+/** Arguments passed to the quiz tool */
+export interface QuizArgs {
+    title?: string;
+    questions: QuizQuestion[];
+}

package/dist/core.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i="putQuestions",o={type:"function",name:i,description:"Present a set of multiple choice questions to test the user's knowledge or abilities. Each question should have 2-6 answer choices.",parameters:{type:"object",properties:{title:{type:"string",description:"Optional title for the quiz (e.g., 'JavaScript Basics Quiz')"},questions:{type:"array",description:"Array of multiple choice questions",items:{type:"object",properties:{question:{type:"string",description:"The question text"},choices:{type:"array",description:"Array of answer choices (2-6 choices)",items:{type:"string"},minItems:2,maxItems:6},correctAnswer:{type:"number",description:"Optional: The index of the correct answer (0-based). Include this if you want to track correct answers."}},required:["question","choices"]},minItems:1}},required:["questions"]}},n=[{name:"JavaScript Quiz",args:{title:"JavaScript Basics",questions:[{question:"What does 'const' do in JavaScript?",choices:["Declares a constant variable","Declares a mutable variable","Creates a function","Imports a module"],correctAnswer:0},{question:"Which method adds an element to the end of an array?",choices:["pop()","shift()","push()","unshift()"],correctAnswer:2},{question:"What is the output of: typeof null?",choices:['"null"','"undefined"','"object"','"boolean"'],correctAnswer:2}]}},{name:"World Capitals",args:{title:"World Capitals Quiz",questions:[{question:"What is the capital of Japan?",choices:["Osaka","Kyoto","Tokyo","Hiroshima"],correctAnswer:2},{question:"What is the capital of Australia?",choices:["Sydney","Melbourne","Canberra","Brisbane"],correctAnswer:2}]}},{name:"Simple Yes/No",args:{questions:[{question:"Is the Earth round?",choices:["Yes","No"],correctAnswer:0}]}}],a=async(l,c)=>{try{const{title:s,questions:e}=c;if(!e||!Array.isArray(e)||e.length===0)throw new Error("At least one question is required");for(let t=0;t<e.length;t++){const r=e[t];if(!r.question||typeof r.question!="string")throw new Error(`Question ${t+1} must have a question text`);if(!Array.isArray(r.choices)||r.choices.length<2)throw new Error(`Question ${t+1} must have at least 2 choices`);if(r.choices.length>6)throw new Error(`Question ${t+1} cannot have more than 6 choices`)}const u={title:s,questions:e};return{toolName:o.name,message:`Quiz presented with ${e.length} question${e.length>1?"s":""}`,jsonData:u,instructions:"The quiz has been presented to the user. Wait for the user to submit their answers. They will tell you their answers in text format."}}catch(s){return console.error("Quiz creation error",s),{toolName:o.name,message:`Quiz error: ${s instanceof Error?s.message:"Unknown error"}`,instructions:"Acknowledge that there was an error creating the quiz and suggest trying again."}}},h={toolDefinition:o,execute:a,generatingMessage:"Preparing quiz...",isEnabled:()=>!0,samples:n};exports.SAMPLES=n;exports.TOOL_DEFINITION=o;exports.TOOL_NAME=i;exports.executeQuiz=a;exports.pluginCore=h;