create-catalog-item

CatalogItem の作成

目標

提供された json_schema_builder Schema に基づいて、対応するデータクラス、CatalogItem インスタンス、Widget クラスを含む GenUI CatalogItem を正しく実装します。これにより、AI モデルが UI コンポーネントを適切に生成し、操作できるようになります。

手順

Schema から CatalogItem を作成するよう指示された場合は、次の手順に従ってください。

1. データクラスを作成する：

   • _<SchemaName>Data という名前を付けます（例：スキーマが myCardSchema の場合、データクラスは _MyCardData です）。
   • スキーマで定義されている各プロパティの final フィールドを追加します。
   • factory _<SchemaName>Data.fromJson(Map<String, Object?> json) メソッドを作成します。
   • try-catch ブロックでプロパティを解析し、新しいインスタンスを返します。
   • 各プロパティを json マップから想定される型にキャストします。例：title: json['title'] as String, または action: json['action'] as JsonMap?,。
   • エラーが発生した場合は、catch ブロックで Exception('Invalid JSON for _<SchemaName>Data') をスローします。

2. CatalogItem インスタンスを作成する：

   • 「Schema」接尾辞を除いた、スキーマ名と同じ名前を付けます（例：myCardSchema の場合は myCard）。
   • final CatalogItem として宣言します。
   • name には名前を大文字で始めた形式を設定します（例：'MyCard'）。
   • dataSchema には提供されたスキーマを設定します。
   • widgetBuilder: (itemContext) を実装します。
     • itemContext.data を Map<String, Object?> にキャストします。
     • データクラスの fromJson メソッドを使用してデータを解析します：_<SchemaName>Data.fromJson(json)。
     • 対応する Widget クラスを返し、必要なデータを渡します。
     • スキーマにアクションコールバック（onCompleted など）が含まれている場合は、ここで実装します。resolveContext を使用してアクションコンテキストを解析し、itemContext.dispatchEvent(...) を使ってイベントをディスパッチする必要があります。

3. Widget クラスを作成する：

   • _<CapitalizedSchemaName> という名前を付けます（例：_MyCard）。
   • 状態要件に応じて StatelessWidget または StatefulWidget を継承します。
   • データクラスを必須プロパティとして追加します（例：final _<SchemaName>Data data;）。
   • 必要なコールバックプロパティを追加します（例：final void Function(int) onCompleted;）。
   • Flutter Material コンポーネント（例：Card、Column、Text）を使用して build メソッドを実装します。データクラスの各フィールドが表示され、アクションがボタンなどのインタラクティブな要素で表現されていることを確認してください。

例

入力スキーマ

final basicCardSchema = S.object(
  properties: {
    'component': S.string(enumValues: ['BasicCard']),
    'title': S.string(),
    'description': 
    'action': A2uiSchemas.action(),
  },
  required: ['title'],
);

出力例

class _BasicCardData {
  final String title;
  final JsonMap? action;

  _BasicCardData({required this.title, this.action});

  factory _BasicCardData.fromJson(Map<String, Object?> json) {
    try {
      return _BasicCardData(
        title: json['title'] as String,
        action: json['action'] as JsonMap?,
      );
    } catch (e) {
      throw Exception('Invalid JSON for _BasicCardData: $e');
    }
  }
}

final basicCard = CatalogItem(
  name: 'BasicCard',
  dataSchema: basicCardSchema,
  widgetBuilder: (itemContext) {
    final json = itemContext.data as Map<String, Object?>;
    final data = _BasicCardData.fromJson(json);

    return _BasicCard(
      data: data,
      onTap: () async {
        final action = data.action;
        if (action == null) return;
        final event = action['event'] as JsonMap?;
        final name = (event?['name'] as String?) ?? '';
        final JsonMap contextDefinition =
            (event?['context'] as JsonMap?) ?? <String, Object?>{};
        final JsonMap resolvedContext = await resolveContext(
          itemContext.dataContext,
          contextDefinition,
        );
        itemContext.dispatchEvent(
          UserActionEvent(
            name: name,
            sourceComponentId: itemContext.id,
            context: resolvedContext,
          ),
        );
      }
    );
  },
);

class _BasicCard extends StatelessWidget {
  final _BasicCardData data;
  final VoidCallback onTap;

  const _BasicCard({super.key, required this.data, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        title: Text(data.title),
        onTap: onTap,
      ),
    );
  }
}

制約

• fromJson で JSON を解析する際は、try-catch ブロックと型キャストを適切に使用してください。
• スキーマにアクションが含まれている場合は、resolveContext を使って変数を正しく取得し、itemContext.dispatchEvent を使用してアクションを解決してください。