@ray-js/t-agent-ui-ray 0.2.8-beta.1 → 0.2.8-beta.3

package/README.md

@@ -1,18 +1,18 @@
-# AI Agent SDK
+# AI Assistant SDK
 
 ## Version Notes
 
-**⚠️ Important Notice**: Starting from version 0.2.x, `@ray-js/t-agent-plugin-assistant` has been deprecated. Please use `@ray-js/t-agent-plugin-aistream` instead.
+**⚠️ Important**: Starting from version 0.2.x, `@ray-js/t-agent-plugin-assistant` has been deprecated. Please use `@ray-js/t-agent-plugin-aistream` instead.
 
-## Installation (ray mini-program)
+## Installation (Ray mini-program)
 
 ```shell
 yarn add @ray-js/t-agent @ray-js/t-agent-plugin-aistream @ray-js/t-agent-ui-ray
 ```
 
-> Ensure that the versions of `@ray-js/t-agent`, `@ray-js/t-agent-plugin-aistream`, and `@ray-js/t-agent-ui-ray` are consistent.
+> Make sure `@ray-js/t-agent`, `@ray-js/t-agent-plugin-aistream`, and `@ray-js/t-agent-ui-ray` are on the same version.
 
-## Mini-Program Kit Requirements
+## Mini-program Kit Requirements
 
 ```json
 {
@@ -22,12 +22,14 @@ yarn add @ray-js/t-agent @ray-js/t-agent-plugin-aistream @ray-js/t-agent-ui-ray
     "DeviceKit": "4.6.1",
     "HomeKit": "3.4.0",
     "MiniKit": "3.12.1",
-    "AIStreamKit": "1.0.0"
+    "AIStreamKit": "1.3.2"
   },
   "baseversion": "2.21.10"
 }
 ```
 
+> When using MCP features, `AIStreamKit` needs to be `2.2.1` or above.
+
 ## package.json Dependency Requirements
 
 ```json
@@ -50,7 +52,7 @@ yarn run miniapp
 
 ## Usage Example
 
-Implementing a chat page using ray UI
+Build a chat page with Ray UI.
 
 ![ChatPage1](https://static1.tuyacn.com/static/txp-ray-TAgent/ChatPage1.png)
 
@@ -59,59 +61,70 @@ Implementing a chat page using ray UI
 import React from 'react';
 import { View } from '@ray-js/components';
 import { createChatAgent, withDebug, withUI } from '@ray-js/t-agent';
-import { ChatContainer, MessageInput, MessageList, MessageActionBar } from '@ray-js/t-agent-ui-ray';
+import {
+  ChatContainer,
+  defaultRenderOptions,
+  MessageInput,
+  MessageList,
+  MessageActionBar,
+} from '@ray-js/t-agent-ui-ray';
 import { withAIStream, withBuildIn } from '@ray-js/t-agent-plugin-aistream';
 
 const createAgent = () => {
-  try {
-    // The order of applying plugins matters
-    const agent = createChatAgent(
-      withUI(), // The withUI plugin provides default UI behavior, essential
-      withAIStream({
-        // Connects to the mini-program AI agent platform, essential in mini-program
-        earlyStart: true, // Whether to establish connection during onAgentStart phase
-        agentId: '', // Enter your agent ID
-      }),
-      withDebug(), // Enables logging to the console
-      withBuildIn() // Provides built-in features
-    );
+  const agent = createChatAgent(
+    withUI(),
+    withAIStream({
+      earlyStart: true,
+      agentId: 'your-agent-id',
+      tokenOptions: {
+        api: 'm.life.ai.agent.token.get',
+        version: '1.0',
+        extParams: {
+          dialogueMode: 1,
+        },
+      },
+    }),
+    withDebug(),
+    withBuildIn()
+  );
 
-    // Lifecycle hooks for custom behavior registration
-    const { onChatStart, createMessage, onChatResume, onError, onInputBlocksPush, session } = agent;
+  agent.plugins.aiStream.onUserDataRead((type, data, result) => {
+    if (type === 'start-event') {
+      result.userData = {
+        sessionAttributes: {
+          'custom.param': {
+            'custom.app.scene': {
+              value: 'chat-page',
+            },
+          },
+        },
+      };
+    }
+  });
 
-    // Initialize chat with a message
-    onChatStart(async result => {
-      const hello = createMessage({
-        role: 'assistant',
-      });
+  const { onChatStart, createMessage } = agent;
 
-      hello.bubble.setText('Hello, world!');
-      result.messages.push(hello);
-      // Persist message for display upon next entry
-      await hello.persist();
+  onChatStart(async result => {
+    const hello = createMessage({
+      role: 'assistant',
     });
 
-    // Message upon chat resume
-    onChatResume(async result => {
-      const welcomeBack = createMessage({
-        role: 'assistant',
-      });
+    hello.bubble.setText('Hello, world!');
+    result.messages.push(hello);
+    await hello.persist();
+  });
 
-      welcomeBack.bubble.setText('Welcome back');
-      result.messages.push(welcomeBack);
-      await welcomeBack.persist();
-    });
-    return agent;
-  } catch (error) {
-    console.error('Agent creation failed:', error);
-    throw error;
-  }
+  return agent;
+};
+
+const renderOptions = {
+  ...defaultRenderOptions,
 };
 
 export default function ChatPage() {
   return (
     <View style={{ height: '100vh' }}>
-      <ChatContainer createAgent={createAgent}>
+      <ChatContainer createAgent={createAgent} renderOptions={renderOptions}>
         <MessageList />
         <MessageInput />
         <MessageActionBar />
@@ -123,46 +136,47 @@ export default function ChatPage() {
 
 # t-agent
 
-The t-agent package, crafted in TypeScript, is a dialogue agent SDK for building feature-rich dialogue interactions, supporting plugins to enhance functionality. As a pure SDK, it doesn't contain UI components, allowing flexibility to work with any framework.
+The t-agent package is a conversational assistant SDK written in TypeScript, used to build conversational agents. It supports a plugin mechanism that lets you extend the agent's capabilities.
+This is a pure SDK package that contains no UI components, so it can be paired with any UI framework.
 
 ## Basic Concepts
 
-![flow.png](https://static1.tuyacn.com/static/txp-ray-TAgent/flow-en.png)
+![flow.png](https://static1.tuyacn.com/static/txp-ray-TAgent/flow.png)
 
-### ChatAgent Dialogue Agent
+### ChatAgent
 
-The core class handles the dialogue lifecycle, message creation, persistence, and supports plugins and hooks to extend functionality.
+The core class of the conversational agent. It manages the conversation lifecycle, message creation, message persistence, and so on. It supports plugins and a hook mechanism to extend the agent's capabilities.
 
-Create a ChatAgent instance using `createChatAgent`:
+Use `createChatAgent` to create a ChatAgent instance:
 
 ```tsx
 import { createChatAgent } from '@ray-js/t-agent';
 const createAgent = () => {
-  /* Apply plugins in the createChatAgent function. Plugin order matters. */
+  /* Apply plugins in the createChatAgent arguments. Note that plugin order matters. */
   const agent = createChatAgent();
 
   return agent;
 };
 ```
 
-Core Attributes:
+Main properties:
 
-- `agent.session` ChatSession container for session data
-- `agent.plugins` Contains applied plugins' methods and hooks
+- `agent.session` — the ChatSession container, used to store session-related data
+- `agent.plugins` — after applying plugins, the plugins' methods and hooks are stored here
 
-Core Methods:
+Main methods:
 
-- `agent.start()` Activates the agent
-- `agent.dispose()` Deactivates the agent
-- `agent.pushInputBlocks(blocks, signal)` Pushes user messages to ChatAgent
-- `agent.createMessage(data)` Creates a message linked to the agent
-- `agent.emitTileEvent(tileId: string, payload: any)` Emits tile events
-- `agent.removeMessage(messageId: string)` Removes messages
-- `agent.flushStreamToShow(message: ChatMessage, response: StreamResponse, composer: ComposeHandler)` Handles stream updates
+- `agent.start()` — start
+- `agent.dispose()` — release
+- `agent.pushInputBlocks(blocks, signal)` — push message blocks into the ChatAgent from the outside, used when a user sends a message to the AI
+- `agent.createMessage(data)` — create a message bound to the current agent
+- `agent.emitTileEvent(tileId: string, payload: any)` — emit a tile event
+- `agent.removeMessage(messageId: string)` — remove a message
+- `agent.flushStreamToShow(message: ChatMessage, response: StreamResponse, composer: ComposeHandler)` — stream-update a message
 
-### Hooks Mechanism
+### Hook Mechanism
 
-ChatAgent implements a framework and data structure. Behavioral details are executed using a hook-driven, event-model approach by registering specific callbacks.
+ChatAgent only defines a runtime framework and data structures; the actual behavior is implemented through the hook mechanism. The hook mechanism is an event-driven programming model — you register callback functions to implement the agent's behavior.
 
 ```tsx
 import { createChatAgent } from '@ray-js/t-agent';
@@ -171,7 +185,7 @@ const createAgent = () => {
 
   const { onChatStart } = agent;
 
-  // onChatStart Hook triggers on dialogue start
+  // The onChatStart hook fires when the conversation starts
   onChatStart(result => {
     console.log('Chat start', result);
   });
@@ -181,67 +195,68 @@ const createAgent = () => {
 
 #### Hook Execution Order
 
-Hooks are executed in the following order:
+Hooks execute in the following order:
 
 ```
 onAgentStart → onChatStart/onChatResume → onMessageListInit → onInputBlocksPush
 ```
 
-ChatAgent's Central Hooks and Parameters:
-
-- `agent.onAgentStart` Agent initialization
-- `agent.onChatStart` Triggered at dialogue initiation
-  - `result.messages` Initializes message lists
-- `agent.onChatResume` Triggered on dialogue continuation
-  - `result.messages` Restored message lists
-- `agent.onMessageListInit` On message list initialization
-  - `result.messages` Rendering message list, same list as the previous two hooks
-- `agent.onInputBlocksPush` On message block input
-  - `blocks` Input message blocks
-  - `signal` Interrupt signal
-- `agent.onMessageChange` On message updates
-  - `type` Update types: `show`, `update`, `remove`
-  - `message` Updated message instance
-- `agent.onMessagePersist` At message persistence
-  - `payload` Persistence parameters
-  - `message` The message to persist
-- `agent.onTileEvent` After message persistence
-  - `tile` Event-triggering tile
-  - `payload` Event data
-- `agent.onAgentDispose` On agent disposal
-- `agent.onUserAbort` On user interruption
-  - `reason` Interruption reason
-- `agent.onError` On error occurrence
-  - `error` Error details
-
-These hooks accept a callback parameter, invoked upon their criteria. Callbacks can be synchronous or asynchronous. To modify results, adjust the result parameter or message object directly.
-
-### ChatSession Session Container
+ChatAgent's main hooks and parameters:
+
+- `agent.onAgentStart` — initialize the agent
+- `agent.onChatStart` — fires when the conversation starts
+  - `result.messages` — used to initialize the message list
+- `agent.onChatResume` — fires when the conversation resumes
+  - `result.messages` — the already-restored message list
+- `agent.onMessageListInit` — fires when the message list is initialized, after chat start or resume
+  - `result.messages` — the message list used for rendering; it's the same list as the message in the two hooks above
+- `agent.onInputBlocksPush` — fires when message blocks are pushed
+  - `blocks` — the input message blocks
+  - `signal` — the abort signal
+- `agent.onMessageChange` — fires when a message changes
+  - `type` — the change type: `show`, `update`, `remove`
+  - `message` — the changed message
+- `agent.onMessagePersist` — fires when a message is persisted
+  - `payload` — persistence-related parameters
+  - `message` — the target message being persisted
+- `agent.onTileEvent` — fires when a tile event occurs
+  - `tile` — the tile that triggered the event
+  - `payload` — the event payload
+- `agent.onAgentDispose` — fires when the agent is released
+- `agent.onUserAbort` — fires when the user aborts
+  - `reason` — the abort reason
+- `agent.onError` — fires on error
+  - `error` — the error object
+
+These hooks all accept a callback function as their argument and call it when triggered. The callback can be synchronous or asynchronous, and its return value does not affect the result. If you need to change the result, modify the callback's `result` argument, or modify the tile or message object.
+
+### ChatSession
+
+ChatSession stores the message list of the conversation with the agent, context data, and so on. It is created together with the ChatAgent.
+
+Main properties:
+
+- `session.messages` — the message list
+- `session.sessionId` — the session id
+- `session.isNewChat` — whether this is a new conversation, used to distinguish a new chat (`onChatStart`) from a resumed chat (`onChatResume`)
+
+Main methods:
+
+- `session.set` — set session data, can be any type
+- `session.get` — get session data
+- `session.getData` — get session data in object form
+- `session.getLatestMessage` — get the last message
 
-ChatSession holds message lists, session-related data along with intelligent interactions, generated alongside ChatAgent.
-
-Main Properties:
-
-- `session.messages` List of messages
-- `session.sessionId` Unique session ID
-- `session.isNewChat` To distinguish fresh or ongoing chats
-
-Principal Methods:
-
-- `session.set` Assign session data (any type)
-- `session.get` Retrieve session data
-- `session.getData` Fetch session data in object format
-- `session.getLatestMessage` Access the latest message
-
-Hook:
+Hooks:
 
-- `session.onChange` Register for session data updates
+- `session.onChange` — register a callback for session data changes
 
-### ChatMessage Dialogue Message
+### ChatMessage
 
-An abstraction representing each dialogue's content, status with utility methods for message control. Composed of multiple ChatTiles for varied display elements.
+ChatMessage is an abstraction of a conversation message, used to store the message's content, status, and other information. It also provides a set of convenient methods for operating on messages.
+A single ChatMessage can contain multiple ChatTiles, used to display different content.
 
-Creating a Message with `createMessage`:
+Use the `createMessage` method to create a message:
 
 ```tsx
 const createAgent = () => {
@@ -249,13 +264,14 @@ const createAgent = () => {
 
   const { createMessage, onChatStart } = agent;
 
-  // Initialize chat with an assistant's message
+  // When the chat initializes, send a message
   onChatStart(async result => {
+    // Create a message sent by the assistant
     const message = createMessage({
       role: 'assistant',
     });
 
-    // Quickly create text bubble
+    // Access message.bubble to quickly create a text bubble
     message.bubble.setText('Hello!');
     result.messages.push(message);
   });
@@ -264,43 +280,43 @@ const createAgent = () => {
 };
 ```
 
-Core Properties:
+Main properties:
 
-- `message.id` Unique message identifier
-- `message.role` Either assistant or user
-- `message.tiles` List of message tiles
-- `message.status` Message state, `ChatMessageStatus` enum: `START`, `UPDATING`, `FINISH`
-- `message.meta` Supplementary data
-- `message.isShow` Display status
-- `message.bubble` Shortcut for bubble tile
+- `message.id` — the message id
+- `message.role` — the message role, either `assistant` or `user`
+- `message.tiles` — the message's tile list
+- `message.status` — the message status, a `ChatMessageStatus` enum, which can be `START`, `UPDATING`, `FINISH`, etc.
+- `message.meta` — extra data attached to the message
+- `message.isShow` — whether the message has been displayed in the UI
+- `message.bubble` — a shortcut to the message's bubble tile
 
-Key Methods:
+Main methods:
 
-- `message.show` Display message
-- `message.update` Refresh current message
-- `message.remove` Delete current message
-- `message.persist` Save message
-- `message.addTile` Add a tile
-- `message.removeTile` Delete a tile
-- `message.setTilesLocked` Lock/unlock all tiles
-- `message.set` Configure message attributes
-- `message.setMetaValue` Assign meta attribute by key
-- `message.deleteMetaValue` Remove meta attribute
-- `message.setMeta` Comprehensive meta object assignment
-- `message.findTileByType` Locate tile by type
+- `message.show` — display the message in the UI
+- `message.update` — update the current message's state in the UI
+- `message.remove` — remove the current message from the UI
+- `message.persist` — persist the message
+- `message.addTile` — add a tile
+- `message.removeTile` — remove a tile
+- `message.setTilesLocked` — set the locked state of all tiles
+- `message.set` — set message properties
+- `message.setMetaValue` — set a meta property by key-value
+- `message.deleteMetaValue` — delete a meta property
+- `message.setMeta` — set the meta object directly
+- `message.findTileByType` — find a tile by tile type
 
-#### ChatTile Dialogue Message Block
+#### ChatTile
 
-ChatTiles render specific content types fairly like text, images, and cards.
+ChatTile is a block within a conversation message, used to display different content inside a message, such as text, images, cards, etc.
 
-Adding a Tile with `addTile`:
+Use the `addTile` method to add a tile to a message:
 
 ```tsx
 const message = createMessage({
   role: 'assistant',
 });
 
-// Introduce an image tile
+// Add an image tile
 message.addTile('image', {
   src: '/image.jpg',
 });
@@ -308,27 +324,27 @@ message.addTile('image', {
 await message.show();
 ```
 
-Chief Attributes of ChatTile:
+ChatTile's main properties:
 
-- `tile.id` Tile's identifier
-- `tile.type` Type of tile
-- `tile.data` Content held by tile
-- `tile.children` Nested tiles
-- `tile.locked` Tile lock status
-- `tile.fallback` Alternative content for non-displayed tile
-- `tile.message` Parent message of tile
+- `tile.id` — the tile id
+- `tile.type` — the tile type
+- `tile.data` — the tile data
+- `tile.children` — the tile's child tiles
+- `tile.locked` — whether the tile is locked
+- `tile.fallback` — fallback content when the tile cannot be displayed
+- `tile.message` — the message the tile belongs to
 
-Primary Methods of ChatTile:
+ChatTile's main methods:
 
-- `tile.update` Equivalent to `tile.message.update`
-- `tile.show` Synonymous with `tile.message.show`
-- `tile.setLocked` Adjust tile's lock status
-- `tile.addTile` Add a sub-tile
-- `tile.setData` Update tile content
-- `tile.setFallback` Update fallback content
-- `tile.findByType` Locate sub-tile by type
+- `tile.update` — a shortcut for `tile.message.update`
+- `tile.show` — a shortcut for `tile.message.show`
+- `tile.setLocked` — set the tile's locked state
+- `tile.addTile` — add a child tile
+- `tile.setData` — set the tile's data
+- `tile.setFallback` — set the tile's fallback content
+- `tile.findByType` — find a child tile by tile type
 
-Accessing `message.bubble` enables swift bubble tile addition:
+`message.bubble` is a shortcut — simply accessing it quickly adds a bubble tile to the current message:
 
 ```tsx
 const message = createMessage({
@@ -336,125 +352,125 @@ const message = createMessage({
 });
 
 message.bubble.setText('Hello, world!');
-// Equivalent to
+// is equivalent to
 message.addTile('bubble', {}).addTile('text', { text: 'Hello, world!' });
 
 await message.show();
 ```
 
-For bubble messages, additional properties and methods include:
+For bubble messages, in addition to the basic tile methods, some extra properties and methods are provided:
 
-- `message.bubble.text` Reads bubble text
-- `message.bubble.setText` Assigns bubble text
-- `message.bubble.isMarkdown` Determines markdown formatting
-- `message.bubble.setIsMarkdown` Sets markdown format
-- `message.bubble.status` Indicates bubble status
-- `message.bubble.setStatus` Defines bubble status
-- `message.bubble.info` Relays bubble info
-- `message.bubble.setInfo` Configures bubble info
-- `message.bubble.initWithInputBlocks` Initializes bubble with input blocks
+- `message.bubble.text` — property, read the bubble text
+- `message.bubble.setText` — method, set the bubble text
+- `message.bubble.isMarkdown` — property, whether the content is in markdown format
+- `message.bubble.setIsMarkdown` — method, set whether the content is markdown
+- `message.bubble.status` — property, the bubble status (`BubbleTileStatus`)
+- `message.bubble.setStatus` — method, set the bubble status
+- `message.bubble.info` — property, the bubble info
+- `message.bubble.setInfo` — method, set the bubble info
+- `message.bubble.initWithInputBlocks` — method, initialize the bubble with input blocks
 
-**Bubble messages support long press operations**, allowing for copy and delete functions, and animations will be displayed during message loading and updating.
+**Bubble messages support long-press operations**, such as copy and delete. Animations are also shown while the message is loading and updating.
 
-Bubble messages support the following long press operations:
+Bubble messages support the following long-press operations:
 
-- Copy: Copy the message text content
-- Delete: Delete the current message
+- Copy: copy the message text content
+- Delete: delete the current message
 
 ### Lifecycle
 
-ChatAgent phases trigger hooks enabling developers to integrate custom behavior efficiently. Below is the lifecycle depiction:
+ChatAgent triggers different hooks at different stages. Developers can register hooks to implement custom behavior. The sequence diagram below shows the ChatAgent lifecycle.
 
 ```mermaid
 sequenceDiagram
   participant AI as Backend(AI)
   participant A as ChatAgent
-  participant UI as UI Interface
+  participant UI as UI
   actor User as User
 
-  User ->> UI: Open chat interface
-  UI ->> UI: Create Agent object agent
-  UI ->> A: agent.start() Start Agent
+  User ->> UI: Open the chat UI
+  UI ->> UI: Create the agent object `agent`
+  UI ->> A: agent.start() starts the agent
   rect rgba(255,255,0,0.1)
     note over A: Hook: onAgentStart
-    A ->> AI: Check if new session
+    A ->> AI: Check whether it's a new session
     AI ->> A: Return
   end
-  alt Is new session
+  alt New session
     A ->> AI: Start a new session
     note over A: Hook: onChatStart
-  else Is resume session
+  else Resume session
     A ->> AI: Read session history
     AI ->> A: Return history messages
     note over A: Hook: onChatResume
   end
   rect rgba(255,255,0,0.1)
     note over A: Hook: onMessageListInit
-    A ->> UI: Assemble messages to display
+    A ->> UI: Assemble the messages to display
     UI ->> User: Display messages
   end
   opt Conversation
-    User ->> UI: Enter and send message
+    User ->> UI: Type and send a message
     UI ->> A: agent.pushInputBlocks()
     rect rgba(255,255,0,0.1)
       note over A: Hook: onInputBlocksPush
-      A ->> A: Create Message object msg<br/>Set msg as user's input text<br/>msg.show()
+      A ->> A: Create message object `msg`<br/>set msg to the user's input text<br/>msg.show()
       note over A: Hook: onMessageChange show
-      A -->> UI: Update interface
-      UI -->> User: Display new message
-      A ->> A: Create Message object respMsg<br/>Set respMsg as "loading"<br/>respMsg.show()
+      A -->> UI: Update the UI
+      UI -->> User: Display the new message
+      A ->> A: Create message object `respMsg`<br/>set respMsg to loading<br/>respMsg.show()
       note over A: Hook: onMessageChange show
-      A -->> UI: Update interface
-      UI -->> User: Display loading message
-      A ->> AI: Invoke AI
-      AI ->> A: Return message stream
+      A -->> UI: Update the UI
+      UI -->> User: Display the loading response message
+      A ->> AI: Call the AI
+      AI ->> A: Return the message stream
       loop Streaming messages
         AI ->> A: Message packet
         A ->> A: Update respMsg data<br/>respMsg.update()
         note over A: Hook: onMessageChange update
-        A -->> UI: Update interface
-        UI -->> User: Display typing effect/card
+        A -->> UI: Update the UI
+        UI -->> User: Stream text / show cards
       end
     end
    end
 
-    opt Operate message action points (e.g., single selection)
-       User ->> UI: Select option
+    opt Operate on a message action point (single-select example)
+       User ->> UI: Select an option
        UI ->> A: agent.emitTileEvent()
        rect rgba(255,255,0,0.1)
           note over A: Hook: onTileEvent
           A ->> A: Set msg status<br/>msg.persist()
           note over A: Hook: onMessagePersist
-          A ->> AI: Persist message
+          A ->> AI: Persist the message
           AI ->> A: Return result
           A ->> A: msg.update()
           note over A: Hook: onMessageChange update
-          A ->> UI: Update interface
-          UI ->> User: Message greyed out, highlight selection
+          A ->> UI: Update the UI
+          UI ->> User: Dim the message, highlight the selection
        end
     end
-    opt Delete message
-       User ->> UI: Delete message
+    opt Delete a message
+       User ->> UI: Delete a message
        UI ->> A: agent.removeMessage()
        rect rgba(255,255,0,0.1)
           A ->> A: msg.remove()
-          A ->> AI: Mark message deleted
+          A ->> AI: Mark the message as deleted
           note over A: Hook: onMessageChange remove
-          A ->> UI: Update interface
-          UI ->> User: Message disappears
+          A ->> UI: Update the UI
+          UI ->> User: The message disappears
        end
     end
 ```
 
 ### Plugin Mechanism
 
-Plugins are implemented based on the above Hook mechanism and can enhance the functionality of chat agents, such as interfacing with AI platforms, providing UI interfaces, etc. Plugins can also expose methods and properties for developers to use.
+Plugins are implemented on top of the hook mechanism above. Plugins can implement agent capabilities, such as integrating with an AI platform or providing a UI. Plugins can also expose methods and properties for developers to use.
 
 ```tsx
 import { createChatAgent, withUI } from '@ray-js/t-agent';
 const createAgent = () => {
   const agent = createChatAgent(
-    withUI() // withUI plugin provides methods for rendering UI
+    withUI() // The withUI plugin provides some UI rendering methods
   );
 
   return agent;
@@ -468,7 +484,7 @@ const ScrollToBottom = () => {
   const agent = useChatAgent();
 
   const scroll = () => {
-    // Use methods exposed by the plugin
+    // Use a method exposed by a plugin
     agent.plugins.ui.emitEvent('scrollToBottom', { animation: false });
   };
 
@@ -478,12 +494,12 @@ const ScrollToBottom = () => {
 
 #### Writing a Plugin
 
-A plugin is a higher-order function that takes options and returns a function. This function receives a ChatAgent object, within which hooks can be registered.
+A plugin is a higher-order function that takes an options object and returns a function. That function receives a ChatAgent object, in which you can register hooks.
 
 ```tsx
 import { ChatAgent, createHooks, Hookable } from '@ray-js/t-agent';
 
-// Implementing MyPlugin
+// Try a MyPlugin plugin
 export type MyPlugin = GetChatPluginHandler<typeof withMyPlugin>;
 
 export const withMyPlugin = (options: any) => {
@@ -495,11 +511,11 @@ export const withMyPlugin = (options: any) => {
 
     onChatStart(async () => {
       console.log('Chat start');
-      // Trigger plugin hook
+      // Trigger the plugin's hook
       await hooks.callHook('onMyHook', 'Hello, world!');
     });
 
-    // Expose plugin methods and hooks
+    // Expose the plugin's methods and hooks
     return {
       hooks,
       myPlugin: {
@@ -518,7 +534,7 @@ export const withMyPlugin = (options: any) => {
 ```
 
 ```tsx
-// Using the plugin
+// Use the plugin
 import { createChatAgent } from '@ray-js/t-agent';
 
 const createAgent = () => {
@@ -527,10 +543,10 @@ const createAgent = () => {
     withMyPlugin({})
   );
 
-  // Call methods exposed by the plugin
+  // Call a method exposed by the plugin
   agent.plugins.myPlugin.myMethod();
 
-  // Register plugin hooks
+  // Register the plugin's hook
   agent.plugins.myPlugin.onMyHook(msg => {
     console.log(msg);
   });
@@ -543,12 +559,12 @@ const createAgent = () => {
 
 ### withDebug
 
-The withDebug plugin logs messages to the console for easy debugging.
+The withDebug plugin prints logs to the console for convenient debugging.
 
 ```tsx
 const agent = createChatAgent(
   withDebug({
-    autoStart: true, // Whether to start automatically, default is true
+    autoStart: true, // Whether to start automatically, defaults to true
   })
 );
 
@@ -561,72 +577,72 @@ agent.plugins.debug.stop();
 
 ### withUI
 
-The withUI plugin provides default UI behaviors such as message display, message deletion, etc., and a message bus.
+The withUI plugin provides some default UI behaviors, such as displaying and deleting messages, and an event bus.
 
 ```tsx
 const agent = createChatAgent(withUI());
 
-agent.plugins.ui.emitter; // Message bus
+agent.plugins.ui.emitter; // The event bus
 
 // Scroll to bottom
 agent.plugins.ui.emitEvent('scrollToBottom', { animation: false });
 
-// Listen to events
+// Listen for an event
 const off = agent.plugins.ui.onEvent('scrollToBottom', payload => {
   console.log('scroll to bottom', payload.animation);
 });
 
-// Unlisten to events
+// Stop listening
 off();
 ```
 
-The main events of the UI plugin are as follows, and you can freely register additional events you need:
+The main events of the ui plugin are listed below; you can also freely register your own events:
 
-- `messageListInit`: Initialize the message list
-  - `payload.messages: ChatMessageObject[]`: Message list
-- `messageChange`: Message changes
-  - `payload.type: 'show' | 'update' | 'remove'`: Change type
-  - `payload.message: ChatMessageObject`: Message
-- `scrollToBottom`: Scroll to bottom
-  - `payload.animation: boolean`: Whether to use animation
-- `sendMessage`: Send message, triggering UI update
-  - `payload.blocks: InputBlock[]`: Input blocks
-- `setInputBlocks`: Set input blocks in MessageInput
-  - `payload.blocks: InputBlock[]`: Input blocks
-- `sessionChange`: Session data changes
-  - `payload.key: string`: Session key
-  - `payload.value: any`: Session value
-  - `payload.oldValue: any`: Old session value
+- `messageListInit` — initialize the message list
+  - `payload.messages: ChatMessageObject[]` — the message list
+- `messageChange` — message changed
+  - `payload.type: 'show' | 'update' | 'remove'` — the change type
+  - `payload.message: ChatMessageObject` — the message
+- `scrollToBottom` — scroll to bottom
+  - `payload.animation: boolean` — whether to animate
+- `sendMessage` — send a message, triggering a UI update
+  - `payload.blocks: InputBlock[]` — the input blocks
+- `setInputBlocks` — set input blocks into the MessageInput field
+  - `payload.blocks: InputBlock[]` — the input blocks
+- `sessionChange` — session data changed
+  - `payload.key: string` — the session data key
+  - `payload.value: any` — the session data value
+  - `payload.oldValue: any` — the old session data value
 
-Enhanced Features in withUI Plugin (0.2.x):
+UI plugin enhancements (new in 0.2.x):
 
-withUI plugin in version 0.2.x introduces Hook mechanisms for customizing message feedback and history clearing behavior:
+In 0.2.x, the withUI plugin adds a hook mechanism that lets developers customize message-feedback and history-clearing behaviors:
 
-**Message Feedback Hook**:
+**Message feedback hook**:
 
-- `agent.plugins.ui.hook('onMessageFeedback', async context => {})` Register message feedback Hook
-  - `context.payload.messageId: string` Message ID
-  - `context.payload.rate: 'like' | 'unlike'` Feedback type
-  - `context.payload.content?: string` Feedback content (optional)
-  - `context.result: { success: boolean }` Return result, need to set success status
+- `agent.plugins.ui.hook('onMessageFeedback', async context => {})` — register a message feedback hook
+  - `context.payload.messageId: string` — the message ID
+  - `context.payload.rate: 'like' | 'unlike'` — the feedback type
+  - `context.payload.content?: string` — feedback content (optional)
+  - `context.result: { success: boolean }` — the return result; you must set whether it succeeded
 
-**Clear History Hook**:
+**Clear history hook**:
 
-- `agent.plugins.ui.hook('onClearHistory', async context => {})` Register clear history Hook
-  - `context.payload: any` Clear history parameters
-  - `context.result: { success: boolean }` Return result, need to set success status
+- `agent.plugins.ui.hook('onClearHistory', async context => {})` — register a clear-history hook
+  - `context.payload: any` — the clear-history parameters
+  - `context.result: { success: boolean }` — the return result; you must set whether it succeeded
 
-**Calling Hooks**:
+**Calling hooks**:
 
-- `agent.plugins.ui.callHook('onMessageFeedback', payload)` Call message feedback Hook
-- `agent.plugins.ui.callHook('onClearHistory', payload)` Call clear history Hook
+- `agent.plugins.ui.callHook('onMessageFeedback', payload)` — call the message feedback hook
+- `agent.plugins.ui.callHook('onClearHistory', payload)` — call the clear-history hook
 
 Usage example:
 
 ```tsx
 const agent = createChatAgent(withUI(), withAIStream({ agentId: 'your-agent-id' }));
 
-// Register message feedback handler
+// Register message feedback handling
 agent.plugins.ui.hook('onMessageFeedback', async context => {
   const { messageId, rate, content } = context.payload;
   try {
@@ -638,7 +654,7 @@ agent.plugins.ui.hook('onMessageFeedback', async context => {
   }
 });
 
-// Register clear history handler
+// Register clear-history handling
 agent.plugins.ui.hook('onClearHistory', async context => {
   try {
     // Call your API to clear history
@@ -650,14 +666,15 @@ agent.plugins.ui.hook('onClearHistory', async context => {
 });
 ```
 
-> Note: `ChatMessageObject` here is a message object, not a `ChatMessage` type.
-> It contains various attributes and methods to ensure changes are made in the ChatAgent, avoiding conflicts with the UI layer.
+> Note: `ChatMessageObject` here is a message object, not the `ChatMessage` type.
+> It contains some of the message's properties and methods. This is to avoid modifying the message object in the UI layer, which would cause inconsistency with the message object in the ChatAgent.
+> Modifications to message objects should always be done in the ChatAgent.
 
-## Included utils
+## Bundled utils
 
 ### getLogger(prefix: string): Logger
 
-Create a logger for logging messages.
+Create a logger for printing logs.
 
 ```tsx
 import { getLogger } from '@ray-js/t-agent';
@@ -667,31 +684,31 @@ logger.debug('Hello, world!');
 
 ### Emitter
 
-Emitter is an event bus for registering and triggering events.
+Emitter is an event bus used to register and dispatch events.
 
 ```tsx
 import { Emitter, EmitterEvent } from '@ray-js/t-agent';
 const emitter = new Emitter();
 
-// Register event
+// Register an event
 const cb = event => console.log('detail', event.detail);
 emitter.addEventListener('event', cb);
 
-// Trigger event
+// Dispatch an event
 emitter.dispatchEvent(new EmitterEvent('event', { detail: 'Hello, world!' }));
 
-// Remove event
+// Remove the event
 emitter.removeEventListener('event', cb);
 ```
 
 ### StreamResponse
 
-StreamResponse is a streaming response object for handling streaming messages.
+StreamResponse is a streaming response object used to handle streaming messages.
 
 ```tsx
 import { StreamResponse } from '@ray-js/t-agent';
 
-const partStream = await getPartStream(); // Obtain stream data
+const partStream = await getPartStream(); // Get the stream data
 const response = new StreamResponse(partStream);
 
 const parts = response.parts();
@@ -702,15 +719,15 @@ for await (const part of parts) {
 
 ### createHooks, Hookable
 
-Refer to the `hookable` npm package for more details.
+See the `hookable` npm package.
 
 ### isAbortError
 
-Determine if it is an abort error.
+Determine whether an error is an abort error.
 
 ### safeParseJSON
 
-Safely parse JSON strings, returning `undefined` on failure.
+Safely parse a JSON string. Returns `undefined` if parsing fails.
 
 ```tsx
 import { safeParseJSON } from '@ray-js/t-agent';
@@ -722,7 +739,7 @@ console.log(obj.a); // 1
 
 # t-agent-plugin-aistream
 
-t-agent-plugin-aistream is a plugin designed for integration with applet AI agent platforms, offering capabilities to connect to these platforms.
+t-agent-plugin-aistream is a plugin that integrates with the mini-program AI agent platform, providing the ability to connect to it.
 
 ## Installation
 
@@ -738,10 +755,9 @@ import { withAIStream, withBuildIn } from '@ray-js/t-agent-plugin-aistream';
 
 const createAgent = () => {
   const agent = createChatAgent(
-    withUI(), // Typically, the withUI plugin is necessary
+    withUI(), // The withUI plugin is generally required
     withAIStream({
-      earlyStart: true, // Establish connection during onAgentStart phase
-      agentId: 'your-agent-id', // Provide your agent ID
+      agentId: 'your-agent-id', // Enter your agent ID
     }),
     withBuildIn()
   );
@@ -752,76 +768,160 @@ const createAgent = () => {
 
 ## Included Plugins
 
-### withAIStream Plugin
+### withAIStream
 
-This plugin facilitates communication with applet AI agent platforms.
+Provides the ability to integrate with the mini-program AI agent platform.
 
 Parameters:
 
-- `agentId` Agent ID (required)
-- `clientType` Client type, defaults to APP (2)
-- `deviceId` Device ID, required when clientType is DEVICE (1)
-- `wireInput` Whether to pass input blocks to the agent, defaults to true. Set to false if you plan to handle input blocks manually with the onInputBlocksPush Hook
-- `historySize` History message size, defaults to 1000
-- `indexId` Index ID, defaults to 'default'
-- `homeId` Home ID, defaults to current home if not provided
-- `earlyStart` Whether to establish connection during onAgentStart phase
-- `eventIdPrefix` Event ID prefix for cloud debugging and log tracing
-- `tokenOptions` Parameters for getting agent token
-  - `api` API interface name
-  - `version` Interface version
-  - `extParams` Additional parameters
-- `createChatHistoryStore` Custom message storage function
+- `agentId` — the agent ID (required)
+- `clientType` — the client type, defaults to APP (2)
+- `deviceId` — the device ID, required when `clientType` is DEVICE (1)
+- `wireInput` — whether to pass input blocks to the agent, defaults to true. When set to false, you need to write your own `onInputBlocksPush` hook to handle input blocks
+- `historySize` — the history message size, defaults to 1000
+- `indexId` — the index ID, defaults to `'default'`
+- `homeId` — the home ID; defaults to the current home if not provided
+- `earlyStart` — whether to establish the connection during the `onAgentStart` stage
+- `eventIdPrefix` — the eventId prefix, used to make cloud-side debugging and log tracing easier
+- `tokenOptions` — parameters for getting the agent token
+  - `api` — the API name
+  - `version` — the API version
+  - `extParams` — extra parameters
+- `createChatHistoryStore` — a custom message storage function
 
 Methods:
 
-- `agent.plugins.aiStream.send(blocks, signal, userData)` Send a message to the agent
-  - `blocks` Input block array
-  - `signal` Optional AbortSignal for interrupting requests
-  - `userData` Optional user data to be included with the message
-- `agent.plugins.aiStream.chat(blocks, signal, options)` Send a message to the agent while generating a ChatMessage object for the question and the AI's answer, updating in a streaming manner
-  - `blocks` Input block array
-  - `signal` Optional AbortSignal
-  - `options.sendBy` Sender role, defaults to 'user'
-  - `options.responseBy` Responder role, defaults to 'assistant'
-  - `options.userData` Optional user data
-- `agent.plugins.aiStream.getChatId()` Get the current session's chatId, returns Promise<string>
+- `agent.plugins.aiStream.send(blocks, signal, userData)` — send a message to the agent
+  - `blocks` — the input block array
+  - `signal` — an optional AbortSignal used to abort the request
+  - `userData` — optional user data attached to the sent message
+- `agent.plugins.aiStream.chat(blocks, signal, options)` — send a message to the agent and generate a question ChatMessage and an AI answer ChatMessage, with streaming updates
+  - `blocks` — the input block array
+  - `signal` — an optional AbortSignal
+  - `options.sendBy` — the sender role, defaults to `'user'`
+  - `options.responseBy` — the responder role, defaults to `'assistant'`
+  - `options.userData` — optional user data
+- `agent.plugins.aiStream.removeMessage(message)` — delete a history message
+- `agent.plugins.aiStream.clearAllMessages()` — clear all messages of the current session and the local history
+- `agent.plugins.aiStream.getChatId()` — get the current session's chatId, returns `Promise<string>`
 
 Hooks:
 
-- `onMessageParse` Triggered when reading history messages and parsing them, allowing for message modification in this Hook
-  - `msgItem` Stored message object
-  - `result.messages` Parsed message list
-- `onChatMessageSent` Triggered after user message and response message are created
-  - `userMessage` User's sent message
-  - `respMessage` AI's response message
-- `onTextCompose` Triggered when receiving text data, used for handling text rendering
-  - `respMsg` Response message
-  - `status` Message status
-  - `result.text` Text content, can be modified
-- `onSkillCompose` Triggered when receiving skill data, used for handling skill rendering
-  - `skill` Skill data array (ReceivedTextSkillPacketBody[])
-  - `respMsg` Response message
-  - `result.messages` Message list
-- `onSkillsEnd` Triggered when all skills processing is complete
-  - `skills` Skill data list (ReceivedTextSkillPacketBody[])
-  - `respMsg` Response message
-  - `result.messages` Message list
-- `onTTTAction` Triggered when tile uses `sendAction`
-  - `tile` Triggering tile
-  - `result.action` TTTAction, can modify the action to be executed
-- `onCardsReceived` Triggered when receiving card data
-  - `skills` Skill data list (ReceivedTextSkillPacketBody[])
-  - `result.cards` Card list
-- `onUserDataRead` **(0.2.x New)** Triggered when user custom data needs to be read, used to pass additional context information to the AI platform
-  - `type` Trigger type, can be 'create-session' or 'start-event'
-    - `'create-session'` Triggered when creating a session, only once
-    - `'start-event'` Triggered each time a message is sent
-  - `data` Context data
-    - `data.blocks` When type is 'start-event', contains the input blocks for this send
-  - `result.userData` Returned user data object, will be merged and sent to the AI platform
-
-**Usage Example**:
+- `onMessageParse` — fires when reading and parsing history messages; you can modify the message in this hook
+  - `msgItem` — the stored message object
+  - `result.messages` — the parsed message list
+- `onChatMessageSent` — fires after the user message and response message are created
+  - `userMessage` — the message sent by the user
+  - `respMessage` — the AI's response message
+- `onTextCompose` — fires when text data is received, used to handle text rendering
+  - `respMsg` — the response message
+  - `status` — the message status
+  - `result.text` — the text content, can be modified
+- `onSkillCompose` — fires when skill data is received, used to handle skill rendering
+  - `skill` — the current skill data (`ReceivedTextSkillPacketBody`)
+  - `respMsg` — the response message
+  - `result.messages` — the message list
+- `onSkillsEnd` — fires when all skills have been processed
+  - `skills` — the skill data list (`ReceivedTextSkillPacketBody[]`)
+  - `respMsg` — the response message
+  - `result.messages` — the message list
+- `onTTTAction` — fires when a tile uses `sendAction`
+  - `tile` — the triggering tile
+  - `result.action` — the TTTAction, which can be modified to change the action to execute
+- `onCardsReceived` — fires when card data is received
+  - `skills` — the skill data list (`ReceivedTextSkillPacketBody[]`)
+  - `result.cards` — the card list
+- `onUserDataRead` **(new in 0.2.x)** — fires when custom user data needs to be read, used to pass extra context information to the AI platform
+  - `type` — the trigger type, either `'create-session'` or `'start-event'`
+    - `'create-session'` — fires when creating a session, only once
+    - `'start-event'` — fires each time a message is sent
+  - `data` — the context data
+    - `data.blocks` — when type is `'start-event'`, contains the input blocks of this send
+  - `result.userData` — the returned user data object, which is merged and sent to the AI platform
+
+### withMCP
+
+Provides the ability to expose MCP services, allowing the agent to call tools provided inside the mini-program — implementing operations such as controlling Bluetooth devices, calling custom APIs, and reading local files. To use it, you first need to enable "Device MCP" on the agent node. In addition, MCP tool names must start with `device.`.
+
+![mcp-config.jpg](https://static1.tuyacn.com/static/txp-ray-TAgent/mcp-config.jpg)
+
+**Prerequisites**:
+
+- Must be used after `withAIStream`
+- When using MCP features, `AIStreamKit` needs to be `2.2.1` or above
+- `createServer` must return an `McpServer` synchronously
+
+Parameters:
+
+- `createServer(agent)` — create the MCP service instance
+- `createContext(event, agent)` — optional, supplements context for each MCP request
+
+**Usage example**:
+
+```tsx
+import { createChatAgent, withUI } from '@ray-js/t-agent';
+import { McpServer, withAIStream, withMCP } from '@ray-js/t-agent-plugin-aistream';
+
+const createAgent = () => {
+  const server = new McpServer({
+    name: 'demo-mcp',
+    version: '1.0.0',
+  });
+
+  server.registerTool(
+    'device.echo',
+    {
+      description: 'Echo back the input parameters',
+      inputSchema: {
+        type: 'object',
+        properties: {
+          text: { type: 'string' },
+        },
+      },
+    },
+    async (args, context) => {
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify({
+              text: args.text,
+              sessionId: context.sessionId,
+            }),
+          },
+        ],
+      };
+    }
+  );
+
+  return createChatAgent(
+    withUI(),
+    withAIStream({
+      agentId: 'your-agent-id',
+    }),
+    withMCP({
+      createServer: () => server,
+      createContext: event => ({
+        traceId: event.eventId,
+      }),
+    })
+  );
+};
+```
+
+Once enabled, the plugin will:
+
+- Inject `sessionAttributes.deviceMcp` when creating a session
+- Call the corresponding tool when an `MCP_CMD` event is received
+- Return the tool execution result to AIStream in JSON-RPC response format
+
+### Passing Custom Variables
+
+In some cases you may need to pass custom variables into the agent as variables in the workflow. You need to configure the references to the custom variables in the workflow, and then pass them in from the mini-program:
+
+![custom-var-config.jpg](https://static1.tuyacn.com/static/txp-ray-TAgent/custom-var-config.jpg)
+
+**Passing custom variables from the mini-program**:
 
 ```tsx
 const agent = createChatAgent(
@@ -834,10 +934,14 @@ const agent = createChatAgent(
 agent.plugins.aiStream.onUserDataRead((type, data, result) => {
   // Pass user information when creating a session
   if (type === 'create-session') {
-    result.sessionAttributes = {
-      'custom.param': {
-        userName: { value: 'John' },
-        userLevel: { value: 'Plus' },
+    result.userData = {
+      sessionAttributes: {
+        'custom.param': {
+          'custom.app.test_me': {
+            // This is the parameter name configured to be received on the platform
+            value: `with value test me ${type} ${Date.now()}`,
+          },
+        },
       },
     };
     return;
@@ -845,9 +949,13 @@ agent.plugins.aiStream.onUserDataRead((type, data, result) => {
   // Pass dynamic context each time a message is sent
   if (type === 'start-event') {
     result.userData = {
-      'custom.param': {
-        timestamp: { value: Date.now() },
-        pid: { value: '123456' },
+      sessionAttributes: {
+        'custom.param': {
+          'custom.app.test_me': {
+            // This is the parameter name configured to be received on the platform
+            value: `with value test me ${type} ${Date.now()}`,
+          },
+        },
       },
     };
     return;
@@ -855,18 +963,77 @@ agent.plugins.aiStream.onUserDataRead((type, data, result) => {
 });
 ```
 
-### withBuildIn Plugin
+### withBuildIn
+
+Provides some built-in features, such as smart home and knowledge base search.
+
+**Supported skills**:
+
+- **Smart home**: device control, scene management
+- **Knowledge base search**: display of related documents
+
+#### Configuration Options
+
+```tsx
+withBuildIn({
+  // Whether to enable TTS auto-play by default, defaults to false
+  audioAutoPlay: true,
+});
+```
+
+#### TTS Audio Playback
+
+When `withAIStream({ enableTts: true })` is enabled, the server sends TTS audio packets along with messages. `withBuildIn` consumes these audio packets and provides full playback capabilities:
+
+- **Auto-play**: when the audio stream starts (`StreamFlag.START`), if `AIStream.audioAutoPlay` is `true`, playback starts automatically.
+- **Bubble play button**: after the audio stream ends, a `bubbleTool` tile (audio play / copy button) is inserted into the corresponding bubble. The playback parameters (`path` / `codecType` / `sampleRate` / `channels` / `bitDepth` / `pts`) are aggregated by audio stream id and written to the tile, so clicking replays the audio.
+- **Single-item exclusivity**: only one item plays at a time. Starting a new playback or actively stopping will first stop the current playback.
+- **Playback lifecycle**: it listens to the underlying `onAudioPlayChanged` and automatically resets the playback state when playback completes or errors.
+
+**Exposed session state** (all broadcast via the `sessionChange` event; on the UI side you can subscribe with `useAgentSessionValue` and derive component state):
+
+| key                         | Type             | Description                          |
+| --------------------------- | ---------------- | ------------------------------------ |
+| `AIStream.audioAutoPlay`    | `boolean`        | Whether TTS auto-play is enabled     |
+| `AIStream.audioPlaying`     | `boolean`        | Whether playback is currently active |
+| `AIStream.playingMessageId` | `string \| null` | The id of the message being played   |
+
+**Exposed UI events**:
+
+| Event           | Description                                                         |
+| --------------- | ------------------------------------------------------------------- |
+| `audioPlayStop` | Actively stop the current playback (whether or not auto-play is on) |
 
-Offers built-in features including smart home device control and knowledge base search.
+Example: a three-state (playing / auto-play / muted) toggle button at the top of the page:
 
-**Supported Skills**:
+```tsx
+import { useAgentSessionValue, useEmitEvent } from '@ray-js/t-agent-ui-ray';
+
+function AudioToggle() {
+  const [audioAutoPlay, setAudioAutoPlay] = useAgentSessionValue<boolean>('AIStream.audioAutoPlay');
+  const [audioPlaying] = useAgentSessionValue<boolean>('AIStream.audioPlaying');
+  const emitEvent = useEmitEvent();
+
+  const onClick = () => {
+    if (audioPlaying) {
+      // Playing: clicking immediately stops playback, regardless of mute state
+      emitEvent('audioPlayStop', undefined);
+      return;
+    }
+    // Otherwise toggle auto-play / mute
+    setAudioAutoPlay(prev => !prev);
+  };
 
-- **Smart Home**: Device control and scene management
-- **Knowledge Base Search**: Related document display
+  const label = audioPlaying ? '🎵 Playing' : audioAutoPlay ? '🔊 Auto-play' : '🔇 Muted';
+  return <View onClick={onClick}>{label}</View>;
+}
+```
+
+> The `playing` state inside a component should be derived from the session (e.g. `audioPlaying && playingMessageId === message.id`). Do not maintain local playback state inside a tile, to avoid it being persisted or becoming inconsistent with the global state.
 
 ## Mock Mechanism
 
-To facilitate development, we offer a mock mechanism allowing mock data to be used without connecting to applet AI platforms.
+To make development easier, we provide a mock mechanism that lets you develop without connecting to the mini-program AI agent platform — you can develop directly using mock data.
 
 ### Mock AI Stream Response
 
@@ -879,7 +1046,7 @@ mock.hooks.hook('sendToAIStream', context => {
   }
 
   if (context.options.blocks?.some(block => block.text?.includes('smart home'))) {
-    context.responseText = 'Controlling smart devices for you...';
+    context.responseText = 'Controlling your smart devices...';
     context.responseSkills = [
       {
         code: 'smart_home',
@@ -891,7 +1058,7 @@ mock.hooks.hook('sendToAIStream', context => {
                 deviceId: 'vdevo174796589841019',
                 icon: '',
                 dps: { range: '0', toggle: 'ON' },
-                name: 'Towel Rack',
+                name: 'Towel rack',
               },
             ],
           },
@@ -903,7 +1070,7 @@ mock.hooks.hook('sendToAIStream', context => {
 });
 ```
 
-### mock ASR Speech Recognition
+### Mock ASR Speech Recognition
 
 ```tsx
 import { mock } from '@ray-js/t-agent-plugin-aistream';
@@ -913,25 +1080,111 @@ mock.hooks.hook('asrDetection', context => {
 });
 ```
 
-## Additional Utils Tools (Currently under development)
+### Mock MCP
+
+The recommended approach is to decide which MCP tool to call inside the mock `sendToAIStream` hook based on the input content, and then run the full MCP call chain directly via `context.callMCPTool()`.
+
+```tsx
+import { mock } from '@ray-js/t-agent-plugin-aistream';
+
+const getToolCall = (text: string) => {
+  if (text.includes('error') || text.includes('fail') || text.includes('exception')) {
+    return {
+      name: 'device.home.energy.summary.fail',
+      arguments: {
+        reason: 'mock-error-case',
+      },
+    };
+  }
+
+  if (text.includes('energy') || text.includes('power') || text.includes('data')) {
+    return {
+      name: 'device.home.energy.summary.get',
+      arguments: {
+        period: 'today',
+      },
+    };
+  }
+
+  return {
+    name: 'device.app.open',
+    arguments: {
+      category: 'music',
+    },
+  };
+};
+
+export const setupMockMCP = () => {
+  mock.hooks.hook('sendToAIStream', async context => {
+    const text = context.data
+      .filter(item => item.type === 'text')
+      .map(item => item.text)
+      .join(' ');
+
+    if (!/mcp|app|energy|power|data|error|fail|exception/i.test(text)) {
+      return;
+    }
+
+    const toolCall = getToolCall(text);
+
+    await context.writeText(`MCP mock is calling ${toolCall.name}...`);
+
+    try {
+      const result = await context.callMCPTool(toolCall.name, toolCall.arguments, {
+        delayMs: 80,
+      });
+      await context.writeText(
+        `Tool ${toolCall.name} returned: ${
+          typeof result === 'string' ? result : JSON.stringify(result == null ? {} : result)
+        }`
+      );
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      await context.writeText(`MCP mock received a tool error: ${message}`);
+    }
+
+    await context.end();
+  });
+};
+```
+
+Just register it once before creating the agent:
+
+```tsx
+const createAgent = () => {
+  setupMockMCP();
+
+  return createChatAgent(
+    withUI(),
+    withAIStream({
+      agentId: 'your-agent-id',
+    }),
+    withMCP({
+      createServer: () => server,
+    })
+  );
+};
+```
+
+## Bundled utils (currently unstable, still under development)
 
 ### AbortController
 
-This is an AbortController ponyfill for mini-programs, refer to mdn
+This is a ponyfill of AbortController for the mini-program; see MDN.
 
 ### runTTTAction
 
-Run a TTTAction to handle user actions, currently supporting the following actions
+Run a TTTAction to handle the user's operation behavior. The following actions are currently supported:
 
-- `openRoute` Open a route
-- `openMiniApp` Open a mini program
-- `openH5` Open an H5 page
-- `sendMessage` Send a message
-- `buildIn` Built-in action
+- `openRoute` — open a route
+- `openMiniApp` — open a mini-program
+- `openH5` — open an H5 page
+- `sendMessage` — send a message
+- `buildIn` — built-in action
 
 ### AsrAgent
 
-ASR Speech Recognition agent, used for recognizing user's voice input
+An ASR (Automatic Speech Recognition) agent used to recognize the user's voice input.
 
 Usage:
 
@@ -949,7 +1202,7 @@ async function startAsr() {
       }
     },
     onFinish: () => {
-      console.log('Recognition completed');
+      console.log('Recognition finished');
     },
     onError: error => {
       console.error('Recognition error:', error);
@@ -957,7 +1210,7 @@ async function startAsr() {
     recordingOptions: {
       saveFile: false,
       sampleRate: 16000,
-      maxDuration: 60000, // Maximum 60 seconds
+      maxDuration: 60000, // Up to 60 seconds
     },
   });
 
@@ -971,7 +1224,7 @@ async function startAsr() {
 
 ### promisify TTT
 
-A promisify method for the built-in TTT API, used to convert the TTT API into a Promise, supporting mock concurrently
+Provides built-in promisify methods for a large number of TTT APIs, used to convert TTT APIs into Promises, with mock support.
 
 Usage:
 
@@ -979,7 +1232,7 @@ Usage:
 import { promisify } from '@ray-js/t-agent-plugin-aistream';
 
 interface RouterParams {
-  /** Route link */
+  /** The route URL */
   url: string;
   complete?: () => void;
   success?: (params: null) => void;
@@ -994,27 +1247,27 @@ interface RouterParams {
 }
 const router = promisify<RouterParams>(ty.router);
 
-// mock, only effective under IDE
+// mock, only takes effect in the IDE
 mock.hooks.hook('router', context => {
   console.log('call router', context.options);
 });
 
-// invoke
+// Call
 await router({ url: '/pages/index/index' });
 ```
 
 ### sendBlocksToAIStream
 
-**Note: This function is for internal use only. General developers should not call it directly**
+**Note: this function is for internal use only; regular developers generally do not need to call it directly.**
 
-Send message blocks to AIStream. This is a low-level function. You should typically use `agent.plugins.aiStream.send` or `agent.plugins.aiStream.chat` methods instead.
+Send message blocks to AIStream. This is a low-level function — you should generally use the `agent.plugins.aiStream.send` or `agent.plugins.aiStream.chat` methods.
 
-#### Use Cases
+#### When to Use
 
-- ✅ **Suitable**: When you need direct control over streaming response handling
-- ✅ **Suitable**: Implementing custom message sending logic
-- ❌ **Not suitable**: General conversation scenarios, should use `agent.plugins.aiStream.chat`
-- ❌ **Not suitable**: Simple message sending, should use `agent.plugins.aiStream.send`
+- ✅ **Suitable**: when you need direct control over how the streaming response is handled
+- ✅ **Suitable**: when implementing custom message-sending logic
+- ❌ **Not suitable**: for regular conversation scenarios — use `agent.plugins.aiStream.chat`
+- ❌ **Not suitable**: for simple message sending — use `agent.plugins.aiStream.send`
 
 #### Function Signature
 
@@ -1039,7 +1292,7 @@ export function sendBlocksToAIStream(params: SendBlocksToAIStreamParams): {
 ```tsx
 const send = async () => {
   try {
-    // First need to get AIStreamSession object
+    // You need to get the AIStreamSession object first
     const streamSession = agent.session.get('AIStream.streamSession');
 
     const result = sendBlocksToAIStream({
@@ -1048,10 +1301,10 @@ const send = async () => {
       signal: new AbortController().signal,
     });
 
-    // Get metadata after sending
+    // Get the metadata after sending
     const meta = await result.metaPromise;
 
-    // Get streamed message
+    // Get the streaming messages
     const parts = result.response.parts();
     for await (const part of parts) {
       console.log('part', part);
@@ -1063,66 +1316,31 @@ const send = async () => {
 };
 ```
 
-### authorizeAIStreamPolicy
+### Media File Functions
 
-Popup to remind users to accept the AI privacy policy, a security requirement that users must agree to access AI features in the app
+`uploadMedia`, `uploadVideo`, `uploadImage` — upload media files, with caching.
 
-> Note that this function requires `BaseKit >= 3.20.4`. If your BaseKit version is lower than this version, it will be directly passed.
+`isFullLink` — determine whether a link starts with the http(s) protocol.
 
-```tsx
-import { authorizeAIStreamPolicy } from '@ray-js/t-agent-plugin-aistream';
+`parseCloudKey` — parse the cloud storage key from a URL.
 
-// Call this function after the page load completes to pop up the agreement prompt
-const authorize = async () => {
-  try {
-    const result = await authorizeAIStreamPolicy();
-
-    if (result) {
-      // Already agreed or clicked the agree button
-      console.log('User agreed to the AI privacy policy');
-    } else {
-      ty.exitMiniProgram({});
-      console.log('User declined the AI privacy policy');
-    }
-  } catch (e) {
-    // Popup error message
-    ty.showToast({
-      title: I18n.t('get_sign_error'),
-      icon: 'error',
-    });
-    // Delay to allow the user to read clearly
-    setTimeout(() => {
-      ty.exitMiniProgram({});
-    }, 1000);
-  }
-};
-```
+`isLinkExpired` — determine whether a link has expired.
 
-### Functions Related to Media Files
+`getUrlByCloudKey` — get the cloud storage download signed URL from the cache; returns `undefined` if not present.
 
-`uploadMedia`, `uploadVideo`, `uploadImage` are used to upload media files, with caching supported.
+`setUrlByCloudKey` — set the cloud storage download signed URL into the cache.
 
-`isFullLink` is used to determine whether it is a link with http(s) protocol
+`resetUrlByCloudKey` — reset the cloud storage download signed URL cache.
 
-`parseCloudKey` is used to parse the key of cloud storage in the URL
-
-`isLinkExpired` is used to determine whether the link is expired
-
-`getUrlByCloudKey` is used to get the signed download URL of cloud storage from the cache, otherwise returns `undefined`
-
-`setUrlByCloudKey` is used to set the signed download URL of cloud storage into the cache
-
-`resetUrlByCloudKey` is used to reset the cache of the signed download URL of cloud storage
-
-`chooseImage`, `chooseVideo` are used to select media files
+`chooseImage`, `chooseVideo` — choose media files.
 
 ```tsx
 import { useEffect } from 'react';
 
 async function getPictureList() {
-  // Retrieve the user's private picture list from the cloud
+  // Fetch the user's private picture list from the cloud
   const list = await pictureListRequest();
-  // Set into the cache this way, so it won't need to request next time
+  // Set them into the cache so that no request is needed next time
   for (const item of list) {
     setUrlByCloudKey(item.path, item.displayUrl);
   }
@@ -1131,7 +1349,7 @@ async function getPictureList() {
 
 # t-agent-ui-ray
 
-t-agent-ui-ray is a UI component library based on ray, containing some commonly used dialogue interface components, such as message list, message input box, etc.
+t-agent-ui-ray is a Ray-based UI component library that contains common chat UI components, such as the message list and the message input field.
 
 ## Installation
 
@@ -1142,17 +1360,30 @@ yarn add @ray-js/t-agent-ui-ray
 ## Usage
 
 ```tsx
-import { ChatContainer, MessageList, MessageInput } from '@ray-js/t-agent-ui-ray';
-// see the use case of t-agent for createAgent implementation
+import React from 'react';
+import { View } from '@ray-js/components';
+import {
+  ChatContainer,
+  defaultRenderOptions,
+  MessageActionBar,
+  MessageInput,
+  MessageList,
+} from '@ray-js/t-agent-ui-ray';
+// See the t-agent usage example for the createAgent implementation
 import { createAgent } from './createAgent';
 
+const renderOptions = {
+  ...defaultRenderOptions,
+};
+
 export default function ChatPage() {
-  // createAgent must return a ChatAgent instance applied with withUI, withAIStream plugins
+  // createAgent must return a ChatAgent instance with the withUI and withAIStream plugins applied
   return (
     <View style={{ height: '100vh' }}>
-      <ChatContainer createAgent={createAgent}>
+      <ChatContainer createAgent={createAgent} renderOptions={renderOptions}>
         <MessageList />
         <MessageInput />
+        <MessageActionBar />
       </ChatContainer>
     </View>
   );
@@ -1163,75 +1394,84 @@ export default function ChatPage() {
 
 ### ChatContainer
 
-Dialog container, used to wrap message lists and message input boxes, provides the context for `ChatAgent`
+The chat container, used to wrap the message list and the message input field. It provides the `ChatAgent` context.
 
-props:
+Props:
 
-- `className` Class name of the container
-- `createAgent` Function to create `ChatAgent`, which will call this function to create `ChatAgent` instance after `ChatContainer` mount
-- `agentRef` Reference to the `ChatAgent` instance, used to get the `ChatAgent` instance outside the `ChatContainer`
-- `renderOptions` Rendering options, used to decide the rendering method of each element in `MessageList`, refer to the renderOptions custom rendering part below
-  - `renderTileAs` This function decides how to render tiles in the messages
-  - `customBlockTypes` Custom block types, only block types registered here will be rendered by `renderCustomBlockAs`
-  - `renderCustomBlockAs` This function decides how to render custom blocks in markdown bubble messages, by default supports `echarts`
-  - `renderCardAs` This function decides how to render cards in messages, generally no need to customize this item
-  - `renderLongPressAs` **(0.2.x New)** This function decides how to render long press menu, allows customizing long press menu style and behavior
-  - `formatErrorMessageAs` **(0.2.x New)** This function decides how to format error messages, can return user-friendly error messages based on error codes
-  - `customCardMap` Custom card mapping, no need to modify the `renderCardAs` function, just register the card type and corresponding component here
-  - `getStaticResourceBizType` Get static resource `bizType` used to fetch static resources
+- `className` — the container's class name
+- `createAgent` — a function that creates the `ChatAgent`; it is called to create the `ChatAgent` instance after `ChatContainer` mounts
+- `agentRef` — a ref used to obtain the `ChatAgent` instance
+- `renderOptions` — render options that determine how each element in the `MessageList` is rendered; see the "renderOptions custom rendering" section below
+  - `renderTileAs` — a function that determines how to render a tile within a message
+  - `customBlockTypes` — custom block types; only block types registered here will be rendered by `renderCustomBlockAs`
+  - `renderCustomBlockAs` — a function that determines how to render a custom block in a markdown bubble message; `echarts` is supported by default
+  - `renderCardAs` — a function that determines how to render a card within a message; you generally do not need to customize this
+  - `renderLongPressAs` **(new in 0.2.x)** — a function that determines how to render the long-press menu; you can customize the long-press menu's style and behavior
+  - `formatErrorMessageAs` **(new in 0.2.x)** — a function that determines how to format error messages; you can return a user-friendly message based on the error code
+  - `customCardMap` — a custom card map; without modifying `renderCardAs`, you just register card types and their corresponding components here
+  - `getStaticResourceBizType` — get the static resource `bizType`, used to fetch static resources
 
 ### MessageList
 
-Message list, used to display messages. In version 0.2.x, it integrates LazyScrollView component for better performance optimization.
+The message list, used to display messages. In 0.2.x, it integrates the LazyScrollView component for better performance.
 
 **Props**:
 
-- `className` Class name of the list
-- `roleSide` Alignment of message roles, default `{ user: 'end', assistant: 'start' }`
+- `className` — the list's class name
+- `roleSide` — the alignment of message roles, defaults to `{ user: 'end', assistant: 'start' }`
 
-**LazyScrollView Integration (0.2.x New)**:
+**LazyScrollView integration (new in 0.2.x)**:
 
-MessageList internally uses LazyScrollView component to optimize performance when rendering large numbers of messages:
+MessageList internally uses the LazyScrollView component to optimize rendering performance for large numbers of messages:
 
-- **Lazy Rendering**: Only renders messages in the visible area, greatly improving performance
-- **Height Adaptation**: Automatically calculates message heights, supports dynamic content
-- **notifyHeightChanged()**: Automatically notifies height updates when message content changes
+- **Lazy rendering**: only renders messages within the visible area, greatly improving performance
+- **Adaptive height**: automatically calculates message heights, supporting dynamic content
+- **notifyHeightChanged()**: automatically notifies a height update when message content changes
 
 The component automatically handles the following scenarios:
 
-- Ensures the bottom 10 messages are always rendered to avoid blank screens when scrolling to bottom
-- Automatically updates scroll position when message heights change
-- Supports animated scrolling to bottom effects
+- Always renders the bottom 10 messages, avoiding a blank screen when scrolling to the bottom
+- Automatically updates the scroll position when message heights change
+- Supports the scroll-to-bottom animation effect
 
 ### MessageInput
 
-Message input box, used to input messages, upload attachments, ASR speech recognition
+The message input field, used for typing messages, uploading attachments, and ASR speech recognition.
+
+Props:
 
-props:
+- `className` — the input field's class name
+- `placeholder` — the input field's placeholder
+- `placeholderStyle` — the placeholder's style
+- `renderTop` — used to render content above the input field
+- `style` — the input container's style
+- `attachment` — whether to enable attachment upload, or pass `{ image, video, imageCount, videoCount }` for fine-grained control
+- `maxTextLength` — the maximum text length, defaults to 200
+- `maxAudioMs` — the maximum recording duration
+- `onStateChange` — callback for input field state changes; see `MessageInputState` for state values
+- `amplitudeCount` — the number of amplitude samples for the voice waveform
 
-- `className` Class name of the input box
-- `placeholder` Placeholder of the input box
-- `renderTop` Used to render content above the input box
+`MessageInput` currently exports `MessageInputAIStream` by default, suitable for scenarios where `withAIStream` has already been integrated.
 
-### MessageActionBar (0.2.x New)
+### MessageActionBar (new in 0.2.x)
 
-Message action bar component, used to display action buttons when in multi-select mode, supports deleting selected messages and clearing history.
+The message action bar component, used to show action buttons when multi-selecting messages. It supports deleting selected messages and clearing history.
 
 **Props**:
 
-No props need to be passed, the component automatically shows and hides based on multi-select state
+No props need to be passed; the component automatically shows and hides based on the multi-select state.
 
 **Features**:
 
-- **Back Button**: Exit multi-select mode
-- **Clear History Button**: Clear all history messages, will call `onClearHistory` Hook
-- **Delete Selected Button**: Delete currently selected messages, button is disabled when no messages are selected
+- **Back button**: exit multi-select mode
+- **Clear history button**: clear all history messages; calls the `onClearHistory` hook
+- **Delete selected button**: delete the currently selected messages; the button is disabled when no messages are selected
 
-**How it Works**:
+**How it works**:
 
-MessageActionBar component monitors the `UIRay.multiSelect.show` state in session data to determine whether to display. When user long-presses a message and selects "Multi-select", this component will automatically show.
+The MessageActionBar component listens to the `UIRay.multiSelect.show` state in the session data to decide whether to show. When the user long-presses a message and selects "Multi-select", the component automatically appears.
 
-**Usage Example**:
+**Usage example**:
 
 ```tsx
 export default function ChatPage() {
@@ -1249,31 +1489,31 @@ export default function ChatPage() {
 
 ### PrivateImage
 
-Private image component, used to display private images, props are the same as Image, adding bizType parameter
+The private image component, used to display private images. Its props are the same as `Image`, with an added `bizType` parameter.
 
 ### LazyScrollView
 
-Lazy-loading scroll view component for optimizing long list performance, automatically manages rendering in the visible area
+The lazy-loading scroll view component, used to optimize long list performance by automatically managing the rendering of the visible area.
 
-Main Features:
+Main features:
 
-- Virtual Scrolling: Only renders elements in the visible area
-- Height Caching: Automatically caches element heights to improve scrolling performance
-- Dynamic Loading: Dynamically shows/hides elements based on scroll position
-- `notifyHeightChanged()` Function: When element heights change, this method can be called to notify the scroll view to update
+- Virtual scrolling: only renders elements in the visible area
+- Height caching: automatically caches element heights to improve scrolling performance
+- Dynamic loading: dynamically shows/hides elements based on the scroll position
+- `notifyHeightChanged()`: when an element's height changes, you can call this method to notify the scroll view to update
 
-Usage Notes:
+Usage notes:
 
-LazyScrollView is mainly used internally by MessageList, developers generally don't need to use it directly. If you need to dynamically change heights in messages, you can use the `notifyHeightChanged` parameter to notify height changes:
+LazyScrollView is mainly used internally by MessageList; developers generally do not need to use it directly. If you need to dynamically change the height within a message, you can use the `notifyHeightChanged` parameter to notify of the height change:
 
 ```tsx
-// Use in tile component
+// Used inside a tile component
 const MyTile = ({ notifyHeightChanged }) => {
   const [expanded, setExpanded] = useState(false);
 
   const handleToggle = () => {
     setExpanded(!expanded);
-    // Notify height change
+    // Notify of the height change
     notifyHeightChanged();
   };
 
@@ -1288,38 +1528,39 @@ const MyTile = ({ notifyHeightChanged }) => {
 
 ### Built-in tile components
 
-- bubble Bubble
-- buttons Button group
-- card Card
-- image Image
-- recommendations Recommended actions
-- text Text, including markdown support
-- time Time marker
-- tip Tip
-- video Video
-- workflow Workflow options
-
-### Built-in card
-
-- WorkflowReplyCard Workflow reply card
+- bubble — bubble
+- buttons — button group
+- card — card
+- divider — divider
+- documents — related documents
+- executeCard — execution result card
+- file — file
+- image — image
+- operateCard — operation result card
+- recommendations — recommended actions
+- text — text, with markdown support
+- time — time label
+- tip — tip
+- video — video
+- workflow — workflow options
 
 ## React Hooks
 
 ### useChatAgent
 
-Get `ChatAgent` instance in the `ChatContainer` context
+Get the `ChatAgent` instance within the `ChatContainer` context.
 
 ### useAgentMessage
 
-Get `messages: ChatMessageObject[]` list in the `ChatContainer` context
+Get the `messages: ChatMessageObject[]` list within the `ChatContainer` context.
 
 ### useRenderOptions
 
-Get `renderOptions` object in the `ChatContainer` context
+Get the `renderOptions` object within the `ChatContainer` context.
 
 ### useOnEvent
 
-Register UI events in the `ChatContainer` context, and automatically unregister them when the component is unloaded
+Register a UI event within the `ChatContainer` context; it is automatically unregistered when the component unmounts.
 
 ```tsx
 import { useOnEvent } from '@ray-js/t-agent-ui-ray';
@@ -1335,7 +1576,7 @@ const MyComponent = () => {
 
 ### useEmitEvent
 
-Trigger UI events in the `ChatContainer` context
+Emit a UI event within the `ChatContainer` context.
 
 ```tsx
 import { useEmitEvent } from '@ray-js/t-agent-ui-ray';
@@ -1353,7 +1594,7 @@ const MyComponent = () => {
 
 ### useTileProps
 
-Get the `TileProps` object in the tile component; if it's a tile, you can directly obtain it from props.
+Get the `TileProps` object within a tile component. If you're in a tile, you can get it directly from props.
 
 ```tsx
 import { useTileProps } from '@ray-js/t-agent-ui-ray';
@@ -1367,16 +1608,23 @@ const MyTilePart = () => {
 
 ### useSendAction
 
-Send a TTTAction, note that it can only be used inside tile components (or cards).
+Send a TTTAction.
+
+If the current component is inside a tile or card, it goes through `emitTileEvent` first.
+If the current component is just a regular child component under `ChatContainer`, it falls back to triggering the `runTTTAction` UI event.
 
 ```tsx
 import { useSendAction } from '@ray-js/t-agent-ui-ray';
 
-const MyTilePart = () => {
+const ActionPanel = () => {
   const sendAction = useSendAction();
 
   const handleClick = () => {
-    sendAction({ type: 'sendMessage', blocks: [{ type: 'text', text: 'hello' }] });
+    sendAction({
+      type: 'sendMessage',
+      blocks: [{ type: 'text', text: 'hello' }],
+      sendImmediately: true,
+    });
   };
 
   return <button onClick={handleClick}>Send Message</button>;
@@ -1385,7 +1633,7 @@ const MyTilePart = () => {
 
 ### useTranslate
 
-Get internationalization translation function for translating interface text, provides complete multilingual support.
+Get the internationalization translation function, used to translate UI text, with full multilingual support.
 
 ```tsx
 import { useTranslate } from '@ray-js/t-agent-ui-ray';
@@ -1403,24 +1651,24 @@ const MyComponent = () => {
 };
 ```
 
-**Supported Languages**:
+**Supported languages**:
 
-Built-in multilingual support includes:
+The built-in multilingual support includes:
 
-- **Simplified Chinese** (`zh-Hans`): Simplified Chinese
-- **Traditional Chinese** (`zh-Hant`): Traditional Chinese
-- **English** (`en`): English
-- **Japanese** (`ja`): Japanese
-- **German** (`de`): German
-- **French** (`fr`): French
-- **Spanish** (`es`): Spanish
-- **Italian** (`it`): Italian
+- **Simplified Chinese** (`zh-Hans`)
+- **Traditional Chinese** (`zh-Hant`)
+- **English** (`en`)
+- **Japanese** (`ja`)
+- **German** (`de`)
+- **French** (`fr`)
+- **Spanish** (`es`)
+- **Italian** (`it`)
 
 The system automatically selects the corresponding translation based on the user's system language, falling back to English if the current language is not supported.
 
 ## renderOptions Custom Rendering
 
-### Replace or Add Tile
+### Replacing or Adding a Tile
 
 If you need to replace a tile with your own implementation, or add a new tile, you can override `renderTileAs`, for example:
 
@@ -1440,15 +1688,15 @@ const renderOptions = {
     if (props.tile.type === 'image') {
       return <MyImageTile {...props} />;
     }
-    // Maintain default behavior
+    // Keep the default behavior
     return defaultRenderOptions.renderTileAs(props);
   },
 };
 ```
 
-### Customize Long Press Menu (0.2.x New)
+### Customizing the Long-Press Menu (new in 0.2.x)
 
-If you need to customize the style or behavior of the long press menu, you can override the `renderLongPressAs` function, for example:
+If you need to customize the style or behavior of the long-press menu, you can override the `renderLongPressAs` function, for example:
 
 ```tsx
 import { defaultRenderOptions, LongPressResult } from '@ray-js/t-agent-ui-ray';
@@ -1474,16 +1722,16 @@ const renderOptions = {
 };
 ```
 
-Long press menu features include:
+The long-press menu features include:
 
-- **Copy Message**: Copy text content to clipboard
-- **Delete Message**: Delete single message
-- **Multi-select**: Enter multi-select mode, used with MessageActionBar
-- **Like/Unlike**: Provide feedback for assistant messages (only available for assistant role messages)
+- **Copy message**: copy the text content to the clipboard
+- **Delete message**: delete a single message
+- **Multi-select**: enter multi-select mode, used together with MessageActionBar
+- **Like/Dislike**: give feedback on assistant messages (only available for assistant-role messages)
 
-### Customize Error Message Formatting (0.2.x New)
+### Customizing Error Message Formatting (new in 0.2.x)
 
-If you need to customize the display format of error messages, you can override the `formatErrorMessageAs` function, for example:
+If you need to customize how error messages are displayed, you can override the `formatErrorMessageAs` function, for example:
 
 ```tsx
 import { defaultRenderOptions } from '@ray-js/t-agent-ui-ray';
@@ -1491,49 +1739,49 @@ import { defaultRenderOptions } from '@ray-js/t-agent-ui-ray';
 const renderOptions = {
   ...defaultRenderOptions,
   formatErrorMessageAs: (message: string, code: string | undefined) => {
-    // Return custom error messages based on error codes
+    // Return a custom error message based on the error code
     if (code === 'network-offline') {
-      return 'Network connection is abnormal, please check your network settings';
+      return 'Network connection error. Please check your network settings.';
     }
     if (code === 'timeout') {
-      return 'Request timeout, please try again later';
+      return 'Request timed out. Please try again later.';
     }
-    // Use default error message
+    // Use the default error message
     return message;
   },
 };
 ```
 
-Built-in supported error codes include:
+The built-in supported error codes include:
 
-- `network-offline`: Network disconnected
-- `timeout`: Send timeout
-- `invalid-params`: Invalid parameters
-- `session-create-failed`: Connection failed
-- `connection-closed`: Connection closed
-- And more
+- `network-offline`: the network is disconnected
+- `timeout`: send timed out
+- `invalid-params`: invalid parameters
+- `session-create-failed`: connection failed
+- `connection-closed`: connection closed
+- and so on
 
-### Customize Cards
+### Custom Cards
 
-Cards can be categorized into three types: built-in cards (buildIn), custom cards (custom), and low-code cards (lowCode). Currently, low-code cards are still under development. Custom cards can be registered using `customCardMap`.
+Cards fall into three categories: built-in cards (`buildIn`), custom cards (`custom`), and low-code cards (`lowCode`). Low-code cards are still under development. Custom cards can be registered with your own card components via `customCardMap`.
 
-The data structure of the card is as follows:
+The card data structure is as follows:
 
 ```tsx
 enum ChatCardType {
-  CUSTOM = 'custom', // Custom card available for business use
-  BUILD_IN = 'buildIn', // Platform built-in card
-  LOW_CODE = 'lowCode', // Low-code card
+  CUSTOM = 'custom', // Custom cards available for business use
+  BUILD_IN = 'buildIn', // Platform built-in cards
+  LOW_CODE = 'lowCode', // Low-code cards
 }
 
 interface ChatCardObject<T = any> {
-  cardCode: string; // Unique identifier for the card
-  cardType: ChatCardType; // Card type
-  cardData: T; // Data carried by the card
+  cardCode: string; // The code that uniquely identifies the card
+  cardType: ChatCardType; // The card type
+  cardData: T; // The data carried by the card
 }
 ```
 
-Register a custom card:
+Registering a custom card:
 
 ```tsx
 import {
@@ -1546,12 +1794,12 @@ import {
 import { View, Text, Button } from '@ray-js/ray';
 
 const MyCard: ChatCardComponent<{ title: string }, { clicked: boolean }> = props => {
-  // If you need to access attributes like agent, message, tile, emitTileEvent, use useTileProps
+  // If you need properties like agent, message, tile, emitTileEvent, you can use useTileProps
   const { message, agent, tile, emitTileEvent } = useTileProps();
   const { card, setCardState } = props;
   const { cardData, cardState, cardCode } = card as ChatCardObject<{ title: string }>;
 
-  // If you need to send a TTTAction, use useSendAction
+  // If you need to send a TTTAction, you can use useSendAction
   const sendAction = useSendAction();
 
   return (
@@ -1560,12 +1808,12 @@ const MyCard: ChatCardComponent<{ title: string }, { clicked: boolean }> = props
       <Button
         onClick={() => {
           sendAction({ type: 'sendMessage', blocks: [{ type: 'text', text: 'hello' }] });
-          // If you want to set the card state, use setCardState
-          // The second parameter is used to determine whether to persist the card state, default is false
+          // If you need to update the card state, you can use setCardState
+          // The second argument indicates whether to persist the state
           setCardState({ clicked: true }, { persist: true });
         }}
       >
-        Fill text into input
+        Fill text into the input field
       </Button>
     </View>
   );
@@ -1579,21 +1827,21 @@ const renderOptions = {
 };
 ```
 
-### Customize Block
+### Custom Blocks
 
-In `TextTile`, the markdown renderer supports custom blocks. You can register and render custom blocks through `customBlockTypes` and `renderCustomBlockAs`.
+The markdown renderer in `TextTile` supports custom blocks. You can register and render custom blocks via `customBlockTypes` and `renderCustomBlockAs`.
 
-The data structure of the block is as follows:
+The block data structure is as follows:
 
 ```tsx
 export interface MarkdownBlock {
   id: string;
   type: string;
-  children: string; // Content in the block
+  children: string; // The content inside the block
 }
 ```
 
-Register a custom block:
+Registering a custom block:
 
 ```tsx
 import { defaultRenderOptions, MarkdownBlock } from '@ray-js/t-agent-ui-ray';
@@ -1611,12 +1859,12 @@ const renderOptions = {
         </View>
       );
     }
-    return defaultRenderOptions.renderCustomBlockAs(block);
+    return defaultRenderOptions.renderCustomBlockAs(props);
   },
 };
 ```
 
-If a markdown text containing a `fence` of type `my-block` is sent by an AI, since we registered `my-block` above, this `fence` can be treated as a custom block.
+Suppose the AI sends you markdown text containing a `fence` of type `my-block`. Since we registered `my-block` above, this `fence` is treated as a custom block.
 
 ````markdown
 This is my custom block!
@@ -1626,32 +1874,24 @@ Hello, world!
 ```
 ````
 
-The following fence is not registered, and will not be rendered as a custom block, but just as a regular code block.
+The fence below is not registered, so it will not be rendered as a custom block — it's rendered as a regular code block.
 
 ```javascript
 console.log('Hello, world!');
 ```
 
-```
-
 The rendered result is as follows:
 
-```
-
 This is my custom block!
 This is My Block
 Hello, world!
-The following fence is not registered, and will not be rendered as a custom block, but just as a regular code block.
-
----
+The fence below is not registered, so it will not be rendered as a custom block — it's rendered as a regular code block.
 
-## | console.log('Hello, world!'); |
-
-````
+console.log('Hello, world!');
 
 ### getStaticResourceBizType
 
-If your static resources need to include `bizType`, it can be obtained via `getStaticResourceBizType`.
+If your static resources need a `bizType`, you can get the `bizType` via `getStaticResourceBizType`.
 
 ```tsx
 import { defaultRenderOptions } from '@ray-js/t-agent-ui-ray';
@@ -1660,22 +1900,22 @@ const renderOptions = {
   ...defaultRenderOptions,
   getStaticResourceBizType: (src: string, scene: string) => 'bizType',
 };
-````
+```
 
-For different scenarios, you may require different `bizType`. You can return different `bizType` based on `src` and `scene`.
+For different scenarios, you may need different `bizType` values. You can return different `bizType` values based on `src` and `scene`.
 
-The built-in `scene` includes the following:
+The built-in `scene` values are:
 
-- `image:view` Image viewing
-- `image:upload` Image uploading
-- `video:view` Video viewing
-- `video:upload` Video uploading
-- `videoThumb:view` Video thumbnail viewing
-- `videoThumb:upload` Video thumbnail uploading
+- `image:view` — image viewing
+- `image:upload` — image uploading
+- `video:view` — video viewing
+- `video:upload` — video uploading
+- `videoThumb:view` — video thumbnail viewing
+- `videoThumb:upload` — video thumbnail uploading
 
-### Custom Multilingual Support
+### Customizing Internationalization
 
-If you need to customize multilingual support, you can override the `i18nTranslate` function, for example:
+If you need to customize the internationalization in t-agent, you can override the `i18nTranslate` function, for example:
 
 ```tsx
 import { defaultRenderOptions } from '@ray-js/t-agent-ui-ray';
@@ -1684,140 +1924,110 @@ const renderOptions = {
   ...defaultRenderOptions,
   i18nTranslate: (key: string) => {
     if (key === 'hello') {
-      return 'Bonjour';
+      return 'Hello';
     }
-    // Use default multilingual settings
+    // Use the default internationalization
     return I18n.t(key);
   },
 };
 ```
 
-Below are the built-in multilingual keys:
-
-| key                                                        | Usage Context                            | Meaning                                                                      |
-| ---------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------- |
-| t-agent.build-in.button.create_scene_manually              | Built-in ButtonTile button               | Manually create scene                                                        |
-| t-agent.build-in.button.enter_home_manage                  | Built-in ButtonTile button               | Enter _"Home Management"_                                                    |
-| t-agent.build-in.button.enter_room_manage                  | Built-in ButtonTile button               | Enter _"Room Management"_                                                    |
-| t-agent.build-in.button.enter_alarm_message                | Built-in ButtonTile button               | Enter _"Alarm Message List"_                                                 |
-| t-agent.build-in.button.enter_home_message                 | Built-in ButtonTile button               | Enter _"Home Message List"_                                                  |
-| t-agent.build-in.button.enter_bulletin                     | Built-in ButtonTile button               | Enter _"Bulletin Message List"_                                              |
-| t-agent.build-in.button.enter_notification_setting         | Built-in ButtonTile button               | Enter _"Notification Settings"_                                              |
-| t-agent.build-in.button.enter_personal_information         | Built-in ButtonTile button               | Enter _"Personal Information"_                                               |
-| t-agent.build-in.button.enter_account_security             | Built-in ButtonTile button               | Enter _"Account and Security"_                                               |
-| t-agent.build-in.button.enter_setting                      | Built-in ButtonTile button               | Enter _"General Settings"_                                                   |
-| t-agent.build-in.button.enter_paring                       | Built-in ButtonTile button               | Enter _"Device Pairing"_                                                     |
-| t-agent.build-in.button.enter_share_device                 | Built-in ButtonTile button               | Enter _"Share Device"_                                                       |
-| t-agent.build-in.button.enter_faq_feedback                 | Built-in ButtonTile button               | Enter _"FAQs and Feedback"_                                                  |
-| t-agent.build-in.button.questionnaire_take                 | Built-in ButtonTile button               | Take the questionnaire                                                       |
-| t-agent.build-in.button.set_home_location                  | Built-in ButtonTile button               | Set home location                                                            |
-| t-agent.input.voice.require-permission                     | MessageInput switch to voice input       | Need to grant recording permission                                           |
-| t-agent.input.upload.failed                                | MessageInput file upload                 | File upload failed                                                           |
-| t-agent.input.asr.oninput.text.top                         | MessageInput ASR voice input             | I'm listening, please speak                                                  |
-| t-agent.input.asr.oninput.text.center                      | MessageInput ASR voice input             | Release to send, swipe up to cancel                                          |
-| t-agent.input.asr.ptt                                      | MessageInput ASR voice input             | Hold to speak                                                                |
-| t-agent.input.asr.error.too-short                          | MessageInput ASR error                   | Speech too short                                                             |
-| t-agent.input.asr.error.empty                              | MessageInput ASR error                   | Unable to recognize text from speech                                         |
-| t-agent.input.asr.error.unknown                            | MessageInput ASR error                   | Speech recognition failed                                                    |
-| t-agent.input.asr.error.timeout                            | MessageInput ASR error                   | Speech recognition reached time limit, will send directly                    |
-| t-agent.input.upload.source-type.camera                    | MessageInput file upload                 | Take photo                                                                   |
-| t-agent.input.upload.source-type.camera.require-permission | MessageInput file upload                 | Camera permission required for taking photos, please enable in settings      |
-| t-agent.input.upload.source-type.album                     | MessageInput file upload                 | Choose from album                                                            |
-| t-agent.input.upload.source-type.album.require-permission  | MessageInput file upload                 | Album permission required for choosing from album, please enable in settings |
-| t-agent.input.upload.image.max-reached                     | MessageInput file upload                 | Image upload limit reached                                                   |
-| t-agent.input.upload.video.max-reached                     | MessageInput file upload                 | Video upload limit reached                                                   |
-| t-agent.file-tile.unknown-filename                         | FileTile file display                    | File                                                                         |
-| t-agent.message.feedback.success                           | BubbleTile message feedback              | Feedback successful                                                          |
-| t-agent.message.bubble.aborted                             | BubbleTile message                       | User aborted                                                                 |
-| t-agent.message.action.copy                                | BubbleTile long press menu               | Copy message                                                                 |
-| t-agent.message.action.delete                              | BubbleTile long press menu               | Delete message                                                               |
-| t-agent.message.action.multi-select                        | BubbleTile long press menu               | Multi-select                                                                 |
-| t-agent.message.action.like                                | BubbleTile long press menu               | Like message                                                                 |
-| t-agent.message.action.unlike                              | BubbleTile long press menu               | Dislike message                                                              |
-| t-agent.message.copy.success                               | BubbleTile copy success                  | Copy successful                                                              |
-| t-agent.message.delete.success                             | BubbleTile delete success                | Delete successful                                                            |
-| t-agent.message.like.success                               | BubbleTile feedback                      | Like successful                                                              |
-| t-agent.message.unlike.success                             | BubbleTile feedback                      | Dislike successful                                                           |
-| t-agent.message.delete.title                               | BubbleTile delete message dialog title   | Delete message                                                               |
-| t-agent.message.delete.content                             | BubbleTile delete message dialog content | Are you sure to delete this message?                                         |
-| t-agent.message.delete.confirm                             | BubbleTile delete message dialog confirm | Confirm                                                                      |
-| t-agent.message.delete.cancel                              | BubbleTile delete message dialog cancel  | Cancel                                                                       |
-| t-agent.message.clear-history.title                        | MessageActionBar clear history           | Clear history                                                                |
-| t-agent.message.clear-history.content                      | MessageActionBar clear history           | Are you sure to clear history?                                               |
-| t-agent.message.clear-history.button                       | MessageActionBar clear history           | Clear history                                                                |
-| t-agent.message.multi-select-delete.title                  | MessageActionBar multi-select delete     | Delete selected messages                                                     |
-| t-agent.message.multi-select-delete.content                | MessageActionBar multi-select delete     | Are you sure to delete these selected messages?                              |
-| t-agent.execute-card-tile.execution.success                | ExecuteCardTile execution result         | Execution successful                                                         |
-| t-agent.execute-card-tile.execution.failed                 | ExecuteCardTile execution result         | Execution failed                                                             |
-| t-agent.execute-card-tile.scene.invalid                    | ExecuteCardTile scene status             | Scene invalid                                                                |
-| t-agent.execute-card-tile.delete                           | ExecuteCardTile button                   | Delete                                                                       |
-| t-agent.execute-card-tile.execute                          | ExecuteCardTile button                   | Execute                                                                      |
-| t-agent.execute-card-tile.switch.scene.state               | ExecuteCardTile operation                | Switch scene state                                                           |
-| t-agent.operate-card-tile.open.device.failed               | OperateCardTile operation result         | Failed to open device                                                        |
-| t-agent.operate-card-tile.open.scene.failed                | OperateCardTile operation result         | Failed to open scene                                                         |
-| t-agent.operate-card-tile.operation.impact                 | OperateCardTile title                    | Operation impact:                                                            |
-| t-agent.operate-card-tile.hide.details                     | OperateCardTile button                   | Hide details                                                                 |
-| t-agent.operate-card-tile.view.details                     | OperateCardTile button                   | View details                                                                 |
-| t-agent.operate-card-tile.device.move.desc                 | OperateCardTile device move              | Device "{device}" moved to "{room}"                                          |
-| t-agent.operate-card-tile.device.rename.desc               | OperateCardTile device rename            | Device "{oldName}" renamed to "{newName}"                                    |
-| t-agent.operate-card-tile.device.count                     | OperateCardTile device count             | {count} devices                                                              |
-| t-agent.operate-card-tile.scene.count                      | OperateCardTile scene count              | {count} scenes                                                               |
-| t-agent.operate-card-tile.home.count                       | OperateCardTile home count               | {count} homes                                                                |
-| t-agent.operate-card-tile.room.count                       | OperateCardTile room count               | {count} rooms                                                                |
-| t-agent.operate-card-tile.group.count                      | OperateCardTile group count              | {count} groups                                                               |
-| t-agent.operate-card-tile.description.format               | OperateCardTile description format       | {items}.                                                                     |
-| t-agent.operate-card-tile.description.separator            | OperateCardTile description separator    | ,                                                                            |
-| t-agent.expand.tab.device                                  | ExpandTile tab                           | Devices                                                                      |
-| t-agent.expand.tab.scene                                   | ExpandTile tab                           | Scenes                                                                       |
-| t-agent.expand.tab.more                                    | ExpandTile tab                           | Others                                                                       |
-| t-agent.expand.execution.success                           | ExpandTile execution result              | Execution successful                                                         |
-| t-agent.expand.execution.failed                            | ExpandTile execution result              | Execution failed                                                             |
-| t-agent.expand.device.rename                               | ExpandTile device rename                 | {oldName} renamed to {newName}                                               |
-| t-agent.expand.scene.rename                                | ExpandTile scene rename                  | {oldName} renamed to {newName}                                               |
-| t-agent.expand.scene.one-click                             | ExpandTile scene type                    | One-click execution                                                          |
-| t-agent.expand.scene.auto                                  | ExpandTile scene type                    | Automatic execution                                                          |
-| t-agent.expand.no.details                                  | ExpandTile no content prompt             | No details available                                                         |
-| t-agent.error.unknown-error                                | Error message                            | Unknown error                                                                |
-| t-agent.error.network-offline                              | Error message                            | Network disconnected, please check network connection                        |
-| t-agent.error.invalid-params                               | Error message                            | Invalid parameters, please retry                                             |
-| t-agent.error.session-create-failed                        | Error message                            | Connection failed, please retry                                              |
-| t-agent.error.connection-closed                            | Error message                            | Connection closed, please retry                                              |
-| t-agent.error.event-exists                                 | Error message                            | Message sending error, please try again later                                |
-| t-agent.error.event-disposed                               | Error message                            | Message sending error, please try again later                                |
-| t-agent.error.event-closed                                 | Error message                            | Message sending error, please try again later                                |
-| t-agent.error.event-aborted                                | Error message                            | Message aborted                                                              |
-| t-agent.error.event-write-failed                           | Error message                            | Message sending error, please try again later                                |
-| t-agent.error.event-no-data-code                           | Error message                            | Message sending error, please try again later                                |
-| t-agent.error.stream-exists                                | Error message                            | Message sending error, please try again later                                |
-| t-agent.error.timeout                                      | Error message                            | Send timeout                                                                 |
-| t-agent.error.asr-empty                                    | Error message                            | Speech recognition result is empty                                           |
-
-# Change Log
-
-## Version 0.2.x
-
-### @ray-js/t-agent
-
-- **Hook Mechanism Enhancement**: Added new lifecycle hooks such as `onMessageFeedback` and `onClearHistory`
-- **Message State Management**: Optimized message state management, providing more precise message state control
-- **Error Handling**: Enhanced error handling mechanism, supporting more detailed error information and error classification
-- **Performance Optimization**: Optimized memory management and garbage collection mechanisms
-
-### @ray-js/t-agent-plugin-aistream
-
-- **New Plugin**: Replaces the deprecated assistant plugin, providing more powerful functionality
-- **Connection Optimization**: Added `earlyStart` parameter, supporting early connection establishment to reduce first response time
-- **Token Management**: Optimized Token acquisition mechanism, supporting custom `tokenOptions`
-- **Speech Recognition**: Added AsrAgent speech recognition functionality, supporting real-time speech-to-text
-- **Mock Mechanism**: Improved mock mechanism, supporting more flexible testing scenarios
-- **Multi-modal Support**: Default support for various input types including text, images, and voice
-
-### @ray-js/t-agent-ui-ray
-
-- **Message Action Bar**: Added MessageActionBar component, supporting multi-select operations and batch deletion
-- **Virtual Scrolling**: Integrated LazyScrollView, providing virtual scrolling and performance optimization
-- **Internationalization System**: Complete internationalization system, supporting 8 languages including Simplified Chinese, Traditional Chinese, English, Japanese, etc.
-- **Translation Hook**: Added useTranslate Hook, simplifying multilingual usage
-- **Custom Rendering**: Extended renderOptions, supporting more custom rendering options
-- **Interaction Optimization**: Optimized long press menu functionality, supporting copy, delete, multi-select, like and other operations
-- **UI Enhancement**: Added multilingual key-value pairs, covering all UI interaction scenarios
+The built-in i18n keys are as follows:
+
+| key                                                        | Usage                                 | Meaning                                                              |
+| ---------------------------------------------------------- | ------------------------------------- | -------------------------------------------------------------------- |
+| t-agent.build-in.button.create_scene_manually              | ButtonTile built-in button            | Create scene manually                                                |
+| t-agent.build-in.button.enter_home_manage                  | ButtonTile built-in button            | Enter "Home Management"                                              |
+| t-agent.build-in.button.enter_room_manage                  | ButtonTile built-in button            | Enter "Room Management"                                              |
+| t-agent.build-in.button.enter_alarm_message                | ButtonTile built-in button            | Enter "Alarm Message List"                                           |
+| t-agent.build-in.button.enter_home_message                 | ButtonTile built-in button            | Enter "Home Message List"                                            |
+| t-agent.build-in.button.enter_bulletin                     | ButtonTile built-in button            | Enter "Notification Message List"                                    |
+| t-agent.build-in.button.enter_notification_setting         | ButtonTile built-in button            | Enter "Message Push Settings"                                        |
+| t-agent.build-in.button.enter_personal_information         | ButtonTile built-in button            | Enter "Personal Profile"                                             |
+| t-agent.build-in.button.enter_account_security             | ButtonTile built-in button            | Enter "Account & Security"                                           |
+| t-agent.build-in.button.enter_setting                      | ButtonTile built-in button            | Enter "General Settings"                                             |
+| t-agent.build-in.button.enter_paring                       | ButtonTile built-in button            | Enter "Device Pairing"                                               |
+| t-agent.build-in.button.enter_share_device                 | ButtonTile built-in button            | Enter "Device Sharing"                                               |
+| t-agent.build-in.button.enter_faq_feedback                 | ButtonTile built-in button            | Enter "FAQ & Feedback"                                               |
+| t-agent.build-in.button.questionnaire_take                 | ButtonTile built-in button            | Fill out questionnaire                                               |
+| t-agent.build-in.button.set_home_location                  | ButtonTile built-in button            | Set home location                                                    |
+| t-agent.input.voice.require-permission                     | MessageInput switch to voice input    | Recording permission required                                        |
+| t-agent.input.upload.failed                                | MessageInput file upload              | File upload failed                                                   |
+| t-agent.input.asr.oninput.text.top                         | MessageInput ASR voice input          | I'm listening, please speak                                          |
+| t-agent.input.asr.oninput.text.center                      | MessageInput ASR voice input          | Release to send, swipe up to cancel                                  |
+| t-agent.input.asr.ptt                                      | MessageInput ASR voice input          | Hold to talk                                                         |
+| t-agent.input.asr.error.too-short                          | MessageInput ASR error                | Speech too short                                                     |
+| t-agent.input.asr.error.empty                              | MessageInput ASR error                | No text recognized from speech                                       |
+| t-agent.input.asr.error.unknown                            | MessageInput ASR error                | Speech recognition failed                                            |
+| t-agent.input.asr.error.timeout                            | MessageInput ASR error                | Speech recognition reached the time limit; sending now               |
+| t-agent.input.upload.source-type.camera                    | MessageInput file upload              | Take photo                                                           |
+| t-agent.input.upload.source-type.camera.require-permission | MessageInput file upload              | Taking a photo requires camera permission; enable it in Settings     |
+| t-agent.input.upload.source-type.album                     | MessageInput file upload              | Choose from album                                                    |
+| t-agent.input.upload.source-type.album.require-permission  | MessageInput file upload              | Choosing from album requires album permission; enable it in Settings |
+| t-agent.input.upload.image.max-reached                     | MessageInput file upload              | Image upload limit reached                                           |
+| t-agent.input.upload.video.max-reached                     | MessageInput file upload              | Video upload limit reached                                           |
+| t-agent.file-tile.unknown-filename                         | FileTile file display                 | File                                                                 |
+| t-agent.message.feedback.success                           | BubbleTile message rating             | Feedback submitted                                                   |
+| t-agent.message.bubble.aborted                             | BubbleTile message                    | Aborted by user                                                      |
+| t-agent.message.action.copy                                | BubbleTile long-press menu            | Copy message                                                         |
+| t-agent.message.action.delete                              | BubbleTile long-press menu            | Delete message                                                       |
+| t-agent.message.action.multi-select                        | BubbleTile long-press menu            | Multi-select                                                         |
+| t-agent.message.action.like                                | BubbleTile long-press menu            | Like message                                                         |
+| t-agent.message.action.unlike                              | BubbleTile long-press menu            | Dislike message                                                      |
+| t-agent.message.copy.success                               | BubbleTile copy success               | Copied successfully                                                  |
+| t-agent.message.delete.success                             | BubbleTile delete success             | Deleted successfully                                                 |
+| t-agent.message.like.success                               | BubbleTile feedback                   | Liked successfully                                                   |
+| t-agent.message.unlike.success                             | BubbleTile feedback                   | Like removed successfully                                            |
+| t-agent.message.delete.title                               | BubbleTile delete dialog title        | Delete message                                                       |
+| t-agent.message.delete.content                             | BubbleTile delete dialog content      | Are you sure you want to delete this message?                        |
+| t-agent.message.delete.confirm                             | BubbleTile delete dialog confirm      | Confirm                                                              |
+| t-agent.message.delete.cancel                              | BubbleTile delete dialog cancel       | Cancel                                                               |
+| t-agent.message.clear-history.title                        | MessageActionBar clear history        | Clear history                                                        |
+| t-agent.message.clear-history.content                      | MessageActionBar clear history        | Are you sure you want to clear the history?                          |
+| t-agent.message.clear-history.button                       | MessageActionBar clear history        | Clear history                                                        |
+| t-agent.message.multi-select-delete.title                  | MessageActionBar multi-select delete  | Delete selected messages                                             |
+| t-agent.message.multi-select-delete.content                | MessageActionBar multi-select delete  | Are you sure you want to delete the selected messages?               |
+| t-agent.execute-card-tile.execution.success                | ExecuteCardTile execution result      | Execution succeeded                                                  |
+| t-agent.execute-card-tile.execution.failed                 | ExecuteCardTile execution result      | Execution failed                                                     |
+| t-agent.execute-card-tile.scene.invalid                    | ExecuteCardTile scene status          | Scene invalid                                                        |
+| t-agent.execute-card-tile.delete                           | ExecuteCardTile button                | Delete                                                               |
+| t-agent.execute-card-tile.execute                          | ExecuteCardTile button                | Execute                                                              |
+| t-agent.execute-card-tile.switch.scene.state               | ExecuteCardTile operation             | Toggle scene state                                                   |
+| t-agent.operate-card-tile.open.device.failed               | OperateCardTile operation result      | Failed to open device                                                |
+| t-agent.operate-card-tile.open.scene.failed                | OperateCardTile operation result      | Failed to open scene                                                 |
+| t-agent.operate-card-tile.operation.impact                 | OperateCardTile title                 | This operation affects:                                              |
+| t-agent.operate-card-tile.hide.details                     | OperateCardTile button                | Hide details                                                         |
+| t-agent.operate-card-tile.view.details                     | OperateCardTile button                | View details                                                         |
+| t-agent.operate-card-tile.device.move.desc                 | OperateCardTile device move           | Device "{device}" moved to "{room}"                                  |
+| t-agent.operate-card-tile.device.rename.desc               | OperateCardTile device rename         | Device "{oldName}" renamed to "{newName}"                            |
+| t-agent.operate-card-tile.device.count                     | OperateCardTile device count          | {count} device(s)                                                    |
+| t-agent.operate-card-tile.scene.count                      | OperateCardTile scene count           | {count} scene(s)                                                     |
+| t-agent.operate-card-tile.home.count                       | OperateCardTile home count            | {count} home(s)                                                      |
+| t-agent.operate-card-tile.room.count                       | OperateCardTile room count            | {count} room(s)                                                      |
+| t-agent.operate-card-tile.group.count                      | OperateCardTile group count           | {count} group(s)                                                     |
+| t-agent.operate-card-tile.description.format               | OperateCardTile description format    | {items}.                                                             |
+| t-agent.operate-card-tile.description.separator            | OperateCardTile description separator | ,                                                                    |
+| t-agent.expand.tab.device                                  | ExpandTile tab                        | Devices                                                              |
+| t-agent.expand.tab.scene                                   | ExpandTile tab                        | Scenes                                                               |
+| t-agent.expand.tab.more                                    | ExpandTile tab                        | Other                                                                |
+| t-agent.expand.execution.success                           | ExpandTile execution result           | Execution succeeded                                                  |
+| t-agent.expand.execution.failed                            | ExpandTile execution result           | Execution failed                                                     |
+| t-agent.expand.device.rename                               | ExpandTile device rename              | {oldName} renamed to {newName}                                       |
+| t-agent.expand.scene.rename                                | ExpandTile scene rename               | {oldName} renamed to {newName}                                       |
+| t-agent.expand.scene.one-click                             | ExpandTile scene type                 | One-click execution                                                  |
+| t-agent.expand.scene.auto                                  | ExpandTile scene type                 | Automatic execution                                                  |
+| t-agent.expand.no.details                                  | ExpandTile detail display             | No details to display                                                |
+| t-agent.error.unknown-error                                | Error message                         | Unknown error                                                        |
+| t-agent.error.network-offline                              | Error message                         | Network disconnected, please check your connection                   |
+| t-agent.error.invalid-params                               | Error message                         | Invalid parameters, please try again                                 |
+| t-agent.error.session-create-failed                        | Error message                         | Connection failed, please try again                                  |
+| t-agent.error.connection-closed                            | Error message                         | Connection closed, please try again                                  |
+| t-agent.error.event-exists                                 | Error message                         | Message sending error, please try again later                        |
+| t-agent.error.event-disposed                               | Error message                         | Message sending error, please try again later                        |
+| t-agent.error.event-closed                                 | Error message                         | Message sending error, please try again later                        |
+| t-agent.error.event-aborted                                | Error message                         | Message aborted                                                      |
+| t-agent.error.event-write-failed                           | Error message                         | Message sending error, please try again later                        |
+| t-agent.error.event-no-data-code                           | Error message                         | Message sending error, please try again later                        |
+| t-agent.error.stream-exists                                | Error message                         | Message sending error, please try again later                        |
+| t-agent.error.timeout                                      | Error message                         | Send timed out                                                       |
+| t-agent.error.asr-empty                                    | Error message                         | Speech recognition result is empty                                   |