// pages/chat/chat.js
import { ChatPage } from '@ag-kit/ui-miniprogram';

Page({
  data: {
    messages: [],
    inputValue: '',
    isLoading: false
  },

  onLoad() {
    this.chatPage = new ChatPage({
      agentId: 'my-agent',
      onMessage: (message) => this.handleMessage(message)
    });
  },

  handleMessage(message) {
    this.setData({
      messages: [...this.data.messages, message]
    });
  }
});

const chatPage = new ChatPage({
  agentId: 'my-agent',
  onMessage: (message) => handleMessage(message),
  theme: 'light'
});

const messageList = new MessageList({
  messages: this.data.messages,
  loading: this.data.isLoading
});

const messageInput = new MessageInput({
  placeholder: '请输入消息...',
  onSend: (message) => this.sendMessage(message),
  disabled: this.data.isLoading
});

<!-- pages/chat/chat.wxml -->
<view class="chat-container">
  <message-list messages="{{messages}}" loading="{{isLoading}}" />
  <message-input 
    value="{{inputValue}}" 
    bind:send="onSend"
    disabled="{{isLoading}}"
  />
</view>

/* pages/chat/chat.wxss */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.message-list {
  flex: 1;
  overflow-y: auto;
}

.message-input {
  padding: 20rpx;
  background: #f5f5f5;
}