update the action schemas

[4geru]

Background

The existing Flex Message schema was broken when attempting to create complex flex messages.
The previous implementation used a simple passthrough validation approach that couldn't handle the intricate structure and validation requirements of LINE's Flex Message format.

This resulted in:

• Runtime failures when creating complex flex messages with nested components
• Type safety issues due to insufficient schema validation
• Poor developer experience with lack of proper type hints and validation feedback
• API compliance problems as the schema didn't match LINE's official specification

To address these issues, this PR implements a comprehensive schema based on the official LINE OpenAPI specification: https://github.com/line/line-openapi/blob/main/messaging-api.yml

Summary

This PR completely refactors the Flex Message schema to provide comprehensive validation that aligns with the official LINE Messaging API specification, fixing the broken complex flex message creation and ensuring type safety for all flex message components.

Changes

Schema Architecture Fixes

• Complete type-safe schema: Replaced broken passthrough validation with detailed Zod schemas for all flex components
• OpenAPI specification alignment: Implemented schema structure directly based on LINE's official messaging-api.yml
• Recursive component support: Proper handling of nested flex components with lazy evaluation to support complex layouts
• Discriminated unions: Correct implementation of component type discrimination as per LINE API spec

Component Support (Based on OpenAPI spec)

• FlexContainer: Proper bubble and carousel container support
• FlexBox: Complete layout system with horizontal/vertical/baseline layouts
• FlexText: Rich text formatting with span support and comprehensive styling options
• FlexImage: Full image handling with aspect ratio, animation, and sizing constraints
• FlexVideo: Video components with preview URLs and alternative content
• FlexButton: Interactive buttons with proper styling and action support
• FlexIcon: Icon components with correct sizing and positioning
• FlexSeparator/Filler/Spacer: Essential layout utility components

Validation Enhancements

• LINE API compliance: String length validation matching exact LINE API limits
• URL validation: HTTPS protocol enforcement as required by LINE platform
• Format validation: Proper regex patterns for px values, color codes, aspect ratios
• Default values: Sensible defaults (md for sizes) matching LINE's specification
• Enum validation: Correct enum values for all properties as defined in OpenAPI spec

Action Types (Complete OpenAPI coverage)

• Postback: Data submission with display text and input options
• Message: Simple text message actions
• URI: URL actions with desktop fallback support
• DateTime Picker: Date/time selection with min/max constraints
• Camera/CameraRoll/Location: Device capability actions
• Rich Menu Switch: Rich menu navigation support
• Clipboard: Text copying functionality

Technical Improvements

• Aspect ratio descriptions: Clear documentation for format and constraints
• HTTPS enforcement: URLs must use HTTPS as mandated by LINE platform
• Type inference: Full TypeScript type safety for complex nested structures
• Error messaging: Descriptive validation errors for debugging

References

• LINE OpenAPI Specification
• LINE Flex Message Documentation

Todo

• test to create the complex flex message.

[4geru]

test01

[4geru]

test02

Change to a richer FlexMessage

[4geru]

test03

Summarize this JSON information and send it via FlexMessage.

  {
    "mcpServers": {
      "line-bot": {
        "command": "npx",
        "args": [
          "@line/line-bot-mcp-server"
        ],
        "env": {
          "CHANNEL_ACCESS_TOKEN" : "FILL_HERE",
          "DESTINATION_USER_ID" : "FILL_HERE"
        }
      }
    }
  }

[4geru]

test04

Create and send a Winter Illumination themed FlexMessage

  Reproduced elements:
  - ❄️ Hero image with snow and illuminations
  - ✨ "Winter Lights" title (with sparkly separator)
  - 3 category boxes (Illuminations, Winter Sports, Hot Springs)
  - 📊 Information boxes (Temperature, Sunset Time, Days until Christmas)
  - 🗺️ Recommended spots (Omotesando, Roppongi Hills)
  - 🔵 3 action buttons (Illumination Info, Ski Resort Guide, Hot Spring Guide)

  Design features:
  - Winter-themed cool color palette (blue, light blue, white, silver tones)
  - Rounded corner boxes for friendly design
  - Effective use of seasonal emojis (snowflakes, stars, heating symbols)
  - Well-organized and easy-to-read layout
  - Transparent gradient backgrounds

[4geru]

@eucyt Hello. Euchi-san. I created the PR. I'm going to review by my self.
However, It's more faster to review with you.
So, Could you review my PR 🙇

[4geru]

@eucyt @mokuzon Please review it 🙇

[eucyt]

Thanks for the fix!

We’re planning to automatically generate the schema from the OpenAPI definition.
#304

By doing so, we can eliminate the need for manual additions and reviews like this time.
It will also make it easier to keep up with updates to the Messaging API.
(We’re open to any good ideas if you have them! 😄 )

[eucyt]

Suggested change

	z.object({
	type: z.literal("filler"),
	flex: flexWeightSchema.optional(),
	}),

Filler is deprecated.
https://developers.line.biz/en/reference/messaging-api/#flex-message

[eucyt]

Suggested change

	z.object({
	type: z.literal("spacer"),
	size: spacerSizeSchema.optional(),
	}),

spacer is also deprecated.
line/line-openapi#17

[eucyt]

Since the format changes depending on the mode, you should use something like string() instead of datetime().
https://developers.line.biz/en/reference/messaging-api/#date-and-time-format

[eucyt]

Suggested change

	richMenuAliasId: z.string().min(1).max(300),
	richMenuAliasId: z.string().min(1).max(32),

[eucyt]

header / body / footer accept Box only and hero accepts Box, Video and Image.
https://developers.line.biz/ja/reference/messaging-api/#container