Skip to content

Conversation

@4geru
Copy link
Contributor

@4geru 4geru commented Oct 22, 2025

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

Todo

  • test to create the complex flex message.

@4geru
Copy link
Contributor Author

4geru commented Oct 22, 2025

test01

スクリーンショット 2025-10-23 8 54 03 スクリーンショット 2025-10-23 8 54 14

@4geru
Copy link
Contributor Author

4geru commented Oct 23, 2025

test02

Change to a richer FlexMessage

スクリーンショット 2025-10-23 9 02 44

@4geru
Copy link
Contributor Author

4geru commented Oct 23, 2025

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"
        }
      }
    }
  }
スクリーンショット 2025-10-23 9 09 22

@4geru
Copy link
Contributor Author

4geru commented Oct 23, 2025

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
スクリーンショット 2025-10-23 9 23 45

@4geru 4geru marked this pull request as ready for review October 23, 2025 00:24
@4geru
Copy link
Contributor Author

4geru commented Oct 23, 2025

@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 4geru force-pushed the 4geru/update-the-flex-message-schema branch from dff40b2 to 7a189bb Compare October 26, 2025 09:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant