val Message.wineId: String? get() = extraData["wine_id"] as? String

@Composable
fun MessageScreen(
    cid: String,
    onBackPressed: () -> Unit
) {
    val context = LocalContext.current
    val viewModelFactory = remember {
        MessagesViewModelFactory(
            context = context,
            channelId = cid,
            messageLimit = 30
        )
    }

    BackHandler(onBack = onBackPressed)

    ChatTheme {
        MessagesScreen(
            viewModelFactory = viewModelFactory,
            onBackPressed = onBackPressed
        )
    }
}

ChatTheme(
    componentFactory = object : ChatComponentFactory {
        ...
    }
) {
    ...
}

// MessageExtension.kt
val Message.wineId: String? get() = extraData["wine_id"] as? String
val Message.isAiGenerating: Boolean get() =
    extraData["ai_generated"] as? Boolean == true &&
            extraData["generating"] as? Boolean == true

// MessageScreen.kt
ChatTheme(
    componentFactory = object : ChatComponentFactory {

        @Composable
        override fun MessageFooterContent(messageItem: MessageItemState) {
            if (messageItem.message.isAiGenerating) { // custom field
                Text("Find Catalog...")
            } else {
                Column {
                    messageItem.message.wineId?.let { wineId ->  // custom field
                        Button(
                            onClick = {
                                onWineClick(wineId)
                            },
                        ) {
                            Text("See Detail")
                        }
                    }
                    super.MessageFooterContent(messageItem)
                }
            }
        }
    }
) {
    ...
}

// agentController.ts
const agent = await createAgent(user_id, channel_type, channel_id_updated);
await agent.init();

// AnthropicAgent.ts
init = async () => {
  const apiKey = process.env.ANTHROPIC_API_KEY as string | undefined;
  if (!apiKey) {
    throw new Error("Anthropic API key is required");
  }
  this.anthropic = new Anthropic({ apiKey });

  // subscribe new message event
  this.chatClient.on("message.new", this.handleMessage);
};

// AnthropicAgent.ts
private handleMessage = async (e: Event<DefaultGenerics>) => {
    ...
    if (!e.message || e.message.ai_generated) {
        console.log('Skip handling ai generated message');
        return;
    }
    ...
    const message = e.message.text;
    if (!message) return;
}

private handleMessage = async (e: Event<DefaultGenerics>) => {
    ...
    // 1. Merge recent messages to create conversation context
    const messages = this.channel.state.messages
        .slice(-10)
        .filter((msg) => msg.text && msg.text.trim() !== '')
        .map<MessageParam>((message) => ({
        role: message.user?.id.startsWith('ai-wine-butler-from')
            ? 'assistant'
            : 'user',
        content: message.text || '',
        }));

    if (e.message.parent_id !== undefined) {
      messages.push({
        role: 'user',
        content: message,
      });
    }

    // 2. Send a temporary empty message to indicate the AI is “typing”
    const { message: channelMessage } = await this.channel.sendMessage({
      text: '',
      ai_generated: true,
      generating: true,
    });

    // 3. Make a real request to the AI model and receive a response
    const aiAgentMessage = await this.anthropic.messages.create({
      max_tokens: 1024,
      messages,
      model: 'claude-3-5-sonnet-20241022',
    });

    // 4. Use partialUpdate to replace the placeholder message with the final reply
    await this.chatClient.partialUpdateMessage(channelMessage.id, {
      set: {
        text: aiAgentMessage.content
            .filter((c) => c.type == 'text')
            .map((c) => c.text)
            .join(''),
        generating: false,
      },
    });
    ...
}

You are a friendly AI wine butler who answers questions about wine and recommends the perfect wine for any occasion.

The wines we have in stock are as follows:
${JSON.stringify(wines, null, 2)}

1. Answer any wine-related questions from the user.
2. Recommend wines based on the user’s preferences, occasion, or food pairing, using a courteous and elegant tone.
3. Only suggest wines that are currently in stock.
4. Provide clear and simple explanations if the user asks about wine knowledge.
5. Politely decline to answer if the question is too difficult or inappropriate.

All responses must be in JSON format, using escape characters like \\n for line breaks. Do not include markdown or explanations—only return the JSON.

Required fields:
- text: A conversational message including a recommendation and a follow-up question
- attachments: If a wine is recommended, include an image
- wine_id: The ID of the recommended wine (if any)

Example format:
{
  text: string,
  attachments: [
    {
      type: 'image (constant)',
      image_url: '(wine image url)'
    }
  ],
  wine_id: string?
}

private handleMessage = async (e: Event<DefaultGenerics>) => {
    ...
    const systemPrompt = "You are a friendly AI wine butler who..."

    const messages = [
        {
        role: 'user', // or 'system' depending on your LLM setup
        content: systemPrompt,
        } as MessageParam,
        ...this.channel.state.messages
        ...
    ]
}

private handleMessage = async (e: Event<DefaultGenerics>) => {
    ...
    await this.chatClient.partialUpdateMessage(channelMessage.id, {
        set: {
        ...JSON.parse(
            aiAgentMessage.content
            .filter((c) => c.type == 'text')
            .map((c) => c.text)
            .join(''),
        ),
        generating: false,
        },
    });
    ...
}