type ImageCarouselTemplate = messagingApi.ImageCarouselTemplate;

type ImageCarouselColumn = messagingApi.ImageCarouselColumn;

const COMPACT_TEMPLATE_TEXT_LIMIT = 60;

const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });

type TemplatePayloadAction = {

type?: "uri" | "postback" | "message";

uri?: string;

return messageAction(action.label, action.data ?? action.label);

}

function resolveTemplateTextLimit(params: {

title?: string;

thumbnailImageUrl?: string;

textOnlyLimit: number;

}): number {

return params.title !== undefined || params.thumbnailImageUrl !== undefined

? COMPACT_TEMPLATE_TEXT_LIMIT

: params.textOnlyLimit;

}

function truncateTemplateText(text: string, limit: number): string {

let result = "";

for (const { segment } of graphemeSegmenter.segment(text)) {

if (result.length + segment.length > limit) {

// A pathological grapheme can exceed LINE's whole field limit. Preserve

// graphemes normally, but keep required text non-empty without splitting

// a surrogate pair when the first grapheme alone cannot fit.

if (!result) {

for (const codePoint of segment) {

if (result.length + codePoint.length > limit) {

break;

}

result += codePoint;

}

}

break;

}

result += segment;

}

return result;

}

function formatProductCarouselText(description: string, price?: string): string {

if (!price) {

return description;

}

const priceText = truncateTemplateText(price, COMPACT_TEMPLATE_TEXT_LIMIT);

const descriptionLimit = Math.max(0, COMPACT_TEMPLATE_TEXT_LIMIT - priceText.length - 1);

const descriptionText = truncateTemplateText(description, descriptionLimit);

return descriptionText ? `${descriptionText}\n${priceText}` : priceText;

}

/**

* Create a confirm template (yes/no style dialog)

*/

altText?: string;

},

): TemplateMessage {

const hasThumbnail = Boolean(options?.thumbnailImageUrl?.trim());

const textLimit = hasThumbnail ? 160 : 60;

const textLimit = resolveTemplateTextLimit({

title,

thumbnailImageUrl: options?.thumbnailImageUrl,

textOnlyLimit: 160,

});

const template: ButtonsTemplate = {

type: "buttons",

title: title.slice(0, 40), // LINE limit

text: text.slice(0, textLimit), // LINE limit (60 if no thumbnail, 160 with thumbnail)

text: truncateTemplateText(text, textLimit),

actions: actions.slice(0, 4), // LINE limit: max 4 actions

thumbnailImageUrl: options?.thumbnailImageUrl,

imageAspectRatio: options?.imageAspectRatio ?? "rectangle",

imageBackgroundColor?: string;

defaultAction?: Action;

}): CarouselColumn {

// LINE caps a carousel column's text at 60 chars when the column carries a

// title or thumbnail image, and 120 chars otherwise. Sending an over-length

// text makes LINE reject the whole carousel, so mirror the conditional limit

// the buttons template already applies above.

const textLimit = resolveTemplateTextLimit({ ...params, textOnlyLimit: 120 });

return {

title: params.title?.slice(0, 40),

text: params.text.slice(0, 120), // LINE limit

text: truncateTemplateText(params.text, textLimit),

actions: params.actions.slice(0, 3), // LINE limit: max 3 actions per column

thumbnailImageUrl: params.thumbnailImageUrl,

imageBackgroundColor: params.imageBackgroundColor,

return createCarouselColumn({

title: product.title,

text: product.price

? `${product.description}\n${product.price}`.slice(0, 120)

: product.description,

text: formatProductCarouselText(product.description, product.price),

thumbnailImageUrl: product.imageUrl,

actions,

});