开发定制 AI 助手小程序手把手教程（二）

最新推荐文章于 2025-11-24 02:17:16 发布

原创最新推荐文章于 2025-11-24 02:17:16 发布 · 898 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #AI音频 #人工智能 #AI助手 #小程序 #开发语言 #智能体

6. 与智能体对话

在 IDE 中模拟对话

在开发状态下，可以使用 Mock 机制在 IDE 下进行模拟对话。新建一个文件，例如 src/pages/Home/mock.ts，用于模拟消息回复。

import { mock } from '@ray-js/t-agent-plugin-aistream'
mock.hooks.hook('sendToAIStream', context => {
  if (context.options.block?.includes('hello')) {
    context.responseText = 'hello, who are you?';
  }
});

再在 src/pages/Home/index.tsx 中引入该文件。

import './mock'
// 余下内容

此时，当您在 IDE 中发送 hello 时，智能体会回复 hello, who are you?。

真机预览

同时，您可以使用真机预览，在您的 OEM App 上调试真实的 AI 对话。

7. 控制设备（可选）

当您创建的产品支持 AI 控制时，您可以在智能体中实现对设备的控制。

配置产品支持 AI 控制

访问 AI 产品指令配置页面，完成指令配置并且发布。

设置智能体支持控制设备

回到我的智能体页面，定位到您刚刚创建的智能体，并单击 Agent管理 按钮进入管理页面。
单击 + 开发版本 创建一个新版本。
单击 工具集 下的 + 按钮，在 新增工具集 窗口的 设备控制工具集 > 选择工具 下选择 控制设备、查询设备 两项，然后单击添加。

修改提示词，描述设备控制的功能，例如：

# 角色
你是一位设备控制智能体，精通智能设备管理，擅长远程控制和设备同步，对设备自动化和智能家居系统有独到的见解。

## 技能
### 技能 1: 远程设备控制
### 技能 2: 设备状态监测与同步

最后单击发布按钮，发布智能体。
再次真机预览您的小程序，与智能体对话，尝试控制设备。

8. 定制外观和功能

您可以定制这个对话页面的任何外观，例如修改背景颜色、字体颜色、字体大小等。

功能按钮

例如，您想在消息列表和输入框之间，增加一个功能按钮：

export default function Home() {
  // ... 前面的代码
  return (
    <View style={{height: '100vh'}}>
      <ChatContainer createAgent={createAgent}>
        <MessageList/>
        <Button>功能按钮</Button> {/* 新增功能按钮 */}
        <MessageInput/>
      </ChatContainer>
    </View>
  )
}

气泡颜色

您可以修改气泡的颜色，创建一个 chat.css 文件，填入以下内容，然后引入页面：

.t-agent-message-list-row-start .t-agent-bubble-tile-bubble {
  background-color: blue;
}

.t-agent-message-list-row-end .t-agent-bubble-tile-bubble {
  background-color: gray;
}

import './chat.css'

@ray-js/t-agent-ui-ray 组件库提供了一些默认的样式，您可以根据自己的需求进行修改。

9. 定制欢迎语与问候语

如果您想在用户进入对话页面时，发送一条欢迎消息，或者在用户隔一段时间后重新进入小程序时，发送一条问候消息，可以在 src/pages/Home/index.tsx 中添加以下代码：

// 修改 createAgent 函数
const createAgent = () => {
  
  // ... 前面的代码
  
  const { onChatStart, createMessage, onChatResume } = agent

  // 创建一条初始的欢迎信息
  onChatStart(async (result) => {
    const hello = createMessage({
      role: 'assistant',
    })

    hello.bubble.setText(I18n.t('message.hello')) // 此处定义您想写的问候的多语言
    
    result.messages.push(hello)
    
    await hello.persist() // 将这个消息气泡持久化下来
  })

  // 恢复聊天时，发送一条消息
  onChatResume(async (result) => {
    // 判断上一条消息是否是两小时前
    const lastMessage = session.getLatestMessage()
    const lastMessageCreateTime = lastMessage?.meta?.createdAt
    
    if (lastMessageCreateTime < Date.now() - 1000 * 60 * 60 * 2) {
      // 如果是，发送一条欢迎回来的消息
      const welcomeBack = createMessage({
        role: 'assistant',
      })

      welcomeBack.bubble.setText(I18n.t('message.welcomeBack')) // 此处定义您想写的欢迎回来的多语言
      result.messages.push(welcomeBack)
      await welcomeBack.persist()
    }
  })
  return agent
}