# 画面設計書 87-会話ワークフロー設定画面

## 概要

本ドキュメントは、Chatwootの会話ワークフロー設定画面の設計を記述したものです。この画面では、会話の自動解決や必須属性などのワークフロー設定を管理します。

### 本画面の処理概要

**業務上の目的・背景**：顧客サポート業務において、会話のライフサイクルを効率的に管理するためのワークフロー設定を提供します。自動解決機能により、一定時間応答のない会話を自動的にクローズし、必須属性機能により、会話解決前に特定の情報を必ず入力させることができます。

**画面へのアクセス方法**：サイドメニューの「設定」から「会話ワークフロー」を選択してアクセスします。URLパスは `/app/accounts/:accountId/settings/conversation-workflow` です。

**主要な操作・処理内容**：
1. 自動解決機能の有効化/無効化
2. 自動解決までの時間の設定
3. 自動解決時のメッセージ設定
4. 自動解決時の設定オプション（待機中会話の除外、ラベル適用）
5. 必須属性の追加・削除

**画面遷移**：
- 遷移元：設定メニュー
- 遷移先：請求設定画面（アップグレード時）

**権限による表示制御**：管理者（administrator）ロールのユーザーのみがアクセス可能です。自動解決機能はAUTO_RESOLVE_CONVERSATIONSフィーチャーフラグ、必須属性機能はCONVERSATION_REQUIRED_ATTRIBUTESフィーチャーフラグが有効な場合にのみ表示されます。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 73 | オートメーションルール作成・管理 | 主機能 | 会話ワークフローの設定 |

## 画面種別

設定

## URL/ルーティング

- **パス**: `/app/accounts/:accountId/settings/conversation-workflow`
- **ルート名**: `conversation_workflow_index`

## 入出力項目

### 自動解決設定（AutoResolve）

| 項目名 | データ型 | 必須 | 初期値 | バリデーション | 説明 |
|--------|----------|------|--------|----------------|------|
| isEnabled | Boolean | - | 既存設定 | - | 自動解決の有効/無効 |
| duration | Number | 有効時必須 | 既存設定 | 10分以上 | 自動解決までの時間（分） |
| unit | String | - | MINUTES | MINUTES/HOURS/DAYS | 時間の単位 |
| message | String | 任意 | 既存設定 | - | 自動解決時に送信するメッセージ |
| ignoreWaiting | Boolean | - | 既存設定 | - | 待機中会話を除外するか |
| labelToApply | String | 任意 | 既存設定 | - | 自動解決時に適用するラベル |

### 必須属性設定（ConversationRequiredAttributes）

| 項目名 | データ型 | 必須 | 説明 |
|--------|----------|------|------|
| selectedAttributeKeys | Array | - | 選択された必須属性のキー一覧 |

## 表示項目

### 自動解決セクション（AutoResolve）

| 項目名 | 表示形式 | 説明 |
|--------|----------|------|
| タイトル | テキスト | 「自動解決」 |
| 有効化スイッチ | トグルスイッチ | 機能のON/OFF |
| 時間設定 | 数値入力 + 単位選択 | 自動解決までの時間 |
| メッセージ | テキストエリア | 自動解決時のメッセージ |
| 設定オプション | リスト | 待機中除外、ラベル適用 |
| 更新ボタン | ボタン | 設定を保存 |

### 必須属性セクション（ConversationRequiredAttributes）

| 項目名 | 表示形式 | 説明 |
|--------|----------|------|
| タイトル | テキスト | 「必須属性」 |
| 説明 | テキスト | 機能の説明 |
| 追加ボタン | ドロップダウン付きボタン | 属性を選択して追加 |
| 属性一覧 | リスト | 設定済み必須属性（削除ボタン付き） |

## イベント仕様

### 1-自動解決有効化トグル

スイッチのON/OFF時、isEnabledを更新。OFFにした場合は設定をリセットしてAPI更新。

### 2-自動解決設定更新

フォームのsubmitイベント時：
1. duration が10分以上か検証
2. `updateAccount` でアカウント設定を更新
3. 成功時：成功メッセージを表示
4. 失敗時：エラーメッセージを表示

### 3-必須属性追加

ドロップダウンから属性選択時：
1. selectedAttributeKeysに追加
2. `updateAccount` でアカウント設定を更新

### 4-必須属性削除

属性の削除ボタン押下時：
1. selectedAttributeKeysから削除
2. `updateAccount` でアカウント設定を更新

## データベース更新仕様

### 操作別データベース影響一覧

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 自動解決設定更新 | accounts | UPDATE | settings JSONBカラムの更新 |
| 必須属性追加/削除 | accounts | UPDATE | settings JSONBカラムの更新 |

### テーブル別更新項目詳細

#### accounts

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| UPDATE | settings.auto_resolve_after | duration値（分） | 分単位で保存 |
| UPDATE | settings.auto_resolve_message | メッセージ文字列 | |
| UPDATE | settings.auto_resolve_ignore_waiting | boolean | |
| UPDATE | settings.auto_resolve_label | ラベル名 | |
| UPDATE | settings.conversation_required_attributes | 属性キーの配列 | |

## メッセージ仕様

| メッセージID | 種別 | 表示条件 | メッセージ内容 |
|-------------|------|----------|--------------|
| AUTO_RESOLVE.DURATION.API.SUCCESS | 成功 | 設定更新成功時 | 設定が正常に更新されました |
| AUTO_RESOLVE.DURATION.API.ERROR | エラー | 設定更新失敗時 | 設定の更新に失敗しました |
| AUTO_RESOLVE.DURATION.ERROR | エラー | duration < 10 | 時間は10分以上に設定してください |
| REQUIRED_ATTRIBUTES.SAVE.SUCCESS | 成功 | 必須属性更新成功時 | 必須属性が正常に更新されました |
| REQUIRED_ATTRIBUTES.SAVE.ERROR | エラー | 必須属性更新失敗時 | 必須属性の更新に失敗しました |

## 例外処理

| 例外条件 | 処理内容 |
|----------|----------|
| durationが10分未満 | エラーメッセージを表示、保存しない |
| API呼び出し失敗 | エラーメッセージをアラート表示 |
| フィーチャーフラグ無効 | 該当セクションを非表示 |

## 備考

- 自動解決機能はAUTO_RESOLVE_CONVERSATIONSフィーチャーフラグが有効な場合のみ表示
- 必須属性機能はCONVERSATION_REQUIRED_ATTRIBUTESフィーチャーフラグが有効な場合のみ表示
- 必須属性機能はCloud版/Enterprise版でのみ利用可能で、無効な場合はPaywallが表示される
- 自動解決の最小時間は10分、最大時間は999日

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | featureFlags.js | `app/javascript/dashboard/featureFlags.js` | AUTO_RESOLVE_CONVERSATIONS, CONVERSATION_REQUIRED_ATTRIBUTESの定義 |
| 1-2 | useAccount.js | `app/javascript/dashboard/composables/useAccount.js` | currentAccount, updateAccountの実装 |

**読解のコツ**: アカウント設定はaccountsテーブルのsettings JSONBカラムに保存される

#### Step 2: エントリーポイントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.vue | `app/javascript/dashboard/routes/dashboard/settings/conversationWorkflow/index.vue` | フィーチャーフラグによる表示制御、各コンポーネントの配置 |

**主要処理フロー**:
1. **行11-14**: useAccountからaccountIdを取得
2. **行16-20**: showAutoResolutionConfig computedでフィーチャーフラグ確認
3. **行22-27**: showRequiredAttributes computedでフィーチャーフラグ確認
4. **行43-44**: 条件付きでAutoResolve, ConversationRequiredAttributesを表示

#### Step 3: コンポーネント層を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | AutoResolve.vue | `app/javascript/dashboard/routes/dashboard/settings/account/components/AutoResolve.vue` | 自動解決設定のフォーム実装 |
| 3-2 | ConversationRequiredAttributes.vue | `app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributes.vue` | 必須属性管理のUI実装 |

**主要処理フロー（AutoResolve.vue）**:
- **行17-20**: refで各設定値を管理
- **行45-81**: watchでcurrentAccountからの値反映
- **行95-107**: handleSubmitでupdateAccount呼び出し
- **行109-119**: handleDisableで設定リセット

**主要処理フロー（ConversationRequiredAttributes.vue）**:
- **行51-53**: selectedAttributeKeys computedでアカウント設定から取得
- **行86-99**: saveRequiredAttributesでupdateAccount呼び出し
- **行102-108**: handleAttributeActionで属性追加
- **行114-120**: handleDeleteで属性削除

### プログラム呼び出し階層図

```
index.vue (エントリーポイント)
    │
    ├─ AutoResolve.vue（v-if="showAutoResolutionConfig"）
    │      │
    │      ├─ watch(currentAccount) → 設定値反映
    │      │
    │      ├─ @submit → handleSubmit
    │      │      └─ updateAccount({ auto_resolve_* })
    │      │
    │      └─ toggleAutoResolve → handleDisable
    │              └─ updateAccount({ auto_resolve_after: null, ... })
    │
    └─ ConversationRequiredAttributes.vue
           │
           ├─ handleAttributeAction
           │      └─ saveRequiredAttributes
           │              └─ updateAccount({ conversation_required_attributes })
           │
           └─ handleDelete
                  └─ saveRequiredAttributes
                          └─ updateAccount({ conversation_required_attributes })
```

### データフロー図

```
[入力]                    [処理]                         [出力]

currentAccount ────────▶ watch反映 ─────────────────────▶ フォーム表示
                              │
フォーム入力 ──────────────────▶
                              │
                              ▼
                      @submit / @change
                              │
                              ▼
                      updateAccount() ─────────────────▶ API呼び出し
                              │                                │
                              ▼                                ▼
                      成功/失敗メッセージ               accounts.settings更新
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.vue | `app/javascript/dashboard/routes/dashboard/settings/conversationWorkflow/index.vue` | ソース | メインページコンポーネント |
| AutoResolve.vue | `app/javascript/dashboard/routes/dashboard/settings/account/components/AutoResolve.vue` | ソース | 自動解決設定コンポーネント |
| ConversationRequiredAttributes.vue | `app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributes.vue` | ソース | 必須属性コンポーネント |
| ConversationRequiredAttributeItem.vue | `app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributeItem.vue` | ソース | 必須属性アイテム |
| ConversationRequiredEmpty.vue | `app/javascript/dashboard/components-next/Conversation/ConversationRequiredEmpty.vue` | ソース | 空状態表示 |
| useAccount.js | `app/javascript/dashboard/composables/useAccount.js` | ソース | アカウントcomposable |
| featureFlags.js | `app/javascript/dashboard/featureFlags.js` | ソース | フィーチャーフラグ定義 |
| SettingsLayout.vue | `app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue` | ソース | 設定画面共通レイアウト |
| BaseSettingsHeader.vue | `app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue` | ソース | 設定ヘッダー |
| BasePaywallModal.vue | `app/javascript/dashboard/routes/dashboard/settings/components/BasePaywallModal.vue` | ソース | Paywall表示 |
