diff --git a/examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vue
index d01084e97a..0a2aa72dfd 100644
--- a/examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vue
@@ -1,119 +1,100 @@
 <template>
-  <tiny-grid
-    :data="tableData"
-    :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
-    :tiny_mcp_config="{
-      server,
-      business: {
-        id: 'company-information',
-        description: '公司人员信息表'
-      }
-    }"
-  >
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="company" title="公司名称"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
-  </tiny-grid>
+  <div>
+    <label style="font-size: 1.5em; margin-right: 8px">选择城市:</label>
+    <tiny-select
+      v-model="queryCity"
+      :options="options"
+      style="width: 200px; margin-bottom: 20px"
+      placeholder="选择城市"
+      :tiny_mcp_config="{
+        server,
+        business: {
+          id: 'city-dropdown',
+          description: '城市下拉框'
+        }
+      }"
+    ></tiny-select>
+    <tiny-grid
+      :data="tableData"
+      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+      height="420px"
+      :tiny_mcp_config="{
+        server,
+        business: {
+          id: 'company-information',
+          description: '公司人员信息表'
+        }
+      }"
+    >
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+      <tiny-grid-column field="company" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+      <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+      <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+    </tiny-grid>
+  </div>
 </template>
 
-<script setup>
-import { ref, onMounted } from 'vue'
-import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
+<script>
+import { TinyGrid, TinyGridColumn, TinySelect } from '@opentiny/vue'
 import { createTransportPair, createSseProxy } from '@opentiny/next'
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
 import { Client } from '@modelcontextprotocol/sdk/client/index.js'
 
-// 定义响应式数据
-const tableData = ref([
-  {
-    id: '1',
-    company: 'GFD 科技 YX 公司',
-    city: '福州',
-    employees: 800,
-    createdDate: '2014-04-30 00:56:00',
-    boole: false
+export default {
+  components: {
+    TinyGrid,
+    TinyGridColumn,
+    TinySelect
   },
-  {
-    id: '2',
-    company: 'WWW 科技 YX 公司',
-    city: '深圳',
-    employees: 300,
-    createdDate: '2016-07-08 12:36:22',
-    boole: true
+  data() {
+    const _table = [
+      { company: 'GFD 科技 YX 公司', city: '广州', employees: 800, createdDate: '2014-04-30 00:56:00' },
+      { company: 'QWE 科技 YX 公司', city: '深圳', employees: 500, createdDate: '2015-05-01 01:01:01' },
+      { company: 'ASD 科技 YX 公司', city: '中山', employees: 200, createdDate: '2013-03-03 03:03:03' },
+      { company: 'ZXC 科技 YX 公司', city: '广州', employees: 1000, createdDate: '2012-02-02 02:02:02' },
+      { company: 'VBN 科技 YX 公司', city: '深圳', employees: 600, createdDate: '2011-01-01 01:01:01' },
+      { company: 'QWE 科技 YX 公司', city: '中山', employees: 700, createdDate: '2016-08-08 08:08:08' },
+      { company: 'RTY 科技 YX 公司', city: '广州', employees: 900, createdDate: '2015-09-09 09:09:09' },
+      { company: 'UIO 科技 YX 公司', city: '深圳', employees: 1100, createdDate: '2014-10-10 10:10:10' },
+      { company: 'HJK 科技 YX 公司', city: '中山', employees: 1200, createdDate: '2013-11-11 11:11:11' },
+      { company: 'WWW 科技 YX 公司', city: '深圳', employees: 300, createdDate: '2016-07-08 12:36:22' },
+      { company: 'RFV 有限责任公司', city: '中山', employees: 1300, createdDate: '2014-02-14 14:14:14' },
+      { company: 'TGB 科技 YX 公司', city: '广州', employees: 360, createdDate: '2013-01-13 13:13:13' },
+      { company: 'YHN 科技 YX 公司', city: '深圳', employees: 810, createdDate: '2012-12-12 12:12:12' },
+      { company: 'WSX 科技 YX 公司', city: '中山', employees: 800, createdDate: '2011-11-11 11:11:11' },
+      { company: 'KBG 物业 YX 公司', city: '深圳', employees: 400, createdDate: '2014-04-30 23:56:00' },
+      { company: 'SZB 有限责任公司', city: '深圳', employees: 1400, createdDate: '2016-06-03 13:53:25' }
+    ]
+    return {
+      server: new McpServer({ name: 'base-config', version: '1.0.0' }, {}),
+      sessionID: '',
+      tableData: _table,
+      queryCity: '',
+      options: Array.from(new Set(_table.map((item) => item.city))).map((city) => ({
+        label: city,
+        value: city
+      }))
+    }
   },
-  {
-    id: '3',
-    company: 'RFV 有限责任公司',
-    city: '中山',
-    employees: 1300,
-    createdDate: '2014-02-14 14:14:14',
-    boole: false
-  },
-  {
-    id: '4',
-    company: 'TGB 科技 YX 公司',
-    city: '龙岩',
-    employees: 360,
-    createdDate: '2013-01-13 13:13:13',
-    boole: true
-  },
-  {
-    id: '5',
-    company: 'YHN 科技 YX 公司',
-    city: '韶关',
-    employees: 810,
-    createdDate: '2012-12-12 12:12:12',
-    boole: true
-  },
-  {
-    id: '6',
-    company: 'WSX 科技 YX 公司',
-    city: '黄冈',
-    employees: 800,
-    createdDate: '2011-11-11 11:11:11',
-    boole: true
-  },
-  {
-    id: '7',
-    company: 'KBG 物业 YX 公司',
-    city: '赤壁',
-    employees: 400,
-    createdDate: '2016-04-30 23:56:00',
-    boole: false
-  },
-  {
-    id: '8',
-    company: '深圳市福德宝网络技术 YX 公司',
-    boole: true,
-    city: '厦门',
-    createdDate: '2016-06-03 13:53:25',
-    employees: 540
-  }
-])
-
-const server = ref(new McpServer({ name: 'base-config', version: '1.0.0' }, {}))
-const sessionID = ref('')
+  async mounted() {
+    // 1、
+    const [transport, clientTransport] = createTransportPair()
 
-// 生命周期钩子
-onMounted(async () => {
-  // 1、创建传输对
-  const [transport, clientTransport] = createTransportPair()
+    // 2、
+    const client = new Client({ name: 'ai-agent', version: '1.0.0' }, {})
+    await client.connect(clientTransport)
+    const { sessionId } = await createSseProxy({
+      client,
+      url: 'http://39.108.160.245/sse'
+    })
 
-  // 2、创建并连接客户端
-  const client = new Client({ name: 'ai-agent', version: '1.0.0' }, {})
-  await client.connect(clientTransport)
-  const { sessionId } = await createSseProxy({
-    client,
-    url: 'https://39.108.160.245/sse'
-  })
+    this.sessionID = sessionId
+    window.$sessionId = this.sessionID
 
-  sessionID.value = sessionId
-  window.$sessionId = sessionID.value
-
-  // 3、连接服务器
-  await server.value.connect(transport)
-})
+    // 3、
+    await this.server.connect(transport)
+  }
+}
 </script>
diff --git a/examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue b/examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue
index b5b056b084..d2ae337dd9 100644
--- a/examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue
+++ b/examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue
@@ -1,26 +1,43 @@
 <template>
-  <tiny-grid
-    :data="tableData"
-    :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
-    :tiny_mcp_config="{
-      server,
-      business: {
-        id: 'company-information',
-        description: '公司人员信息表'
-      }
-    }"
-  >
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="company" title="公司名称"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
-  </tiny-grid>
+  <div>
+    <label style="font-size: 1.5em; margin-right: 8px">选择城市:</label>
+    <tiny-select
+      v-model="queryCity"
+      :options="options"
+      style="width: 200px; margin-bottom: 20px"
+      placeholder="选择城市"
+      :tiny_mcp_config="{
+        server,
+        business: {
+          id: 'city-dropdown',
+          description: '城市下拉框'
+        }
+      }"
+    ></tiny-select>
+    <tiny-grid
+      :data="tableData"
+      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+      height="420px"
+      :tiny_mcp_config="{
+        server,
+        business: {
+          id: 'company-information',
+          description: '公司人员信息表'
+        }
+      }"
+    >
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+      <tiny-grid-column field="company" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+      <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+      <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+    </tiny-grid>
+  </div>
 </template>
 
 <script>
-import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyBaseSelect } from '@opentiny/vue'
 import { createTransportPair, createSseProxy } from '@opentiny/next'
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
 import { Client } from '@modelcontextprotocol/sdk/client/index.js'
@@ -28,80 +45,37 @@ import { Client } from '@modelcontextprotocol/sdk/client/index.js'
 export default {
   components: {
     TinyGrid,
-    TinyGridColumn
+    TinyGridColumn,
+    TinySelect: TinyBaseSelect
   },
   data() {
-    const tableData = [
-      {
-        id: '1',
-        company: 'GFD 科技 YX 公司',
-        city: '福州',
-        employees: 800,
-        createdDate: '2014-04-30 00:56:00',
-        boole: false
-      },
-      {
-        id: '2',
-        company: 'WWW 科技 YX 公司',
-        city: '深圳',
-        employees: 300,
-        createdDate: '2016-07-08 12:36:22',
-        boole: true
-      },
-      {
-        id: '3',
-        company: 'RFV 有限责任公司',
-        city: '中山',
-        employees: 1300,
-        createdDate: '2014-02-14 14:14:14',
-        boole: false
-      },
-      {
-        id: '4',
-        company: 'TGB 科技 YX 公司',
-        city: '龙岩',
-        employees: 360,
-        createdDate: '2013-01-13 13:13:13',
-        boole: true
-      },
-      {
-        id: '5',
-        company: 'YHN 科技 YX 公司',
-        city: '韶关',
-        employees: 810,
-        createdDate: '2012-12-12 12:12:12',
-        boole: true
-      },
-      {
-        id: '6',
-        company: 'WSX 科技 YX 公司',
-        city: '黄冈',
-        employees: 800,
-        createdDate: '2011-11-11 11:11:11',
-        boole: true
-      },
-      {
-        id: '7',
-        company: 'KBG 物业 YX 公司',
-        city: '赤壁',
-        employees: 400,
-        createdDate: '2016-04-30 23:56:00',
-        boole: false
-      },
-      {
-        id: '8',
-        company: '深圳市福德宝网络技术 YX 公司',
-        boole: true,
-        city: '厦门',
-        createdDate: '2016-06-03 13:53:25',
-        employees: 540
-      }
+    const _table = [
+      { company: 'GFD 科技 YX 公司', city: '广州', employees: 800, createdDate: '2014-04-30 00:56:00' },
+      { company: 'QWE 科技 YX 公司', city: '深圳', employees: 500, createdDate: '2015-05-01 01:01:01' },
+      { company: 'ASD 科技 YX 公司', city: '中山', employees: 200, createdDate: '2013-03-03 03:03:03' },
+      { company: 'ZXC 科技 YX 公司', city: '广州', employees: 1000, createdDate: '2012-02-02 02:02:02' },
+      { company: 'VBN 科技 YX 公司', city: '深圳', employees: 600, createdDate: '2011-01-01 01:01:01' },
+      { company: 'QWE 科技 YX 公司', city: '中山', employees: 700, createdDate: '2016-08-08 08:08:08' },
+      { company: 'RTY 科技 YX 公司', city: '广州', employees: 900, createdDate: '2015-09-09 09:09:09' },
+      { company: 'UIO 科技 YX 公司', city: '深圳', employees: 1100, createdDate: '2014-10-10 10:10:10' },
+      { company: 'HJK 科技 YX 公司', city: '中山', employees: 1200, createdDate: '2013-11-11 11:11:11' },
+      { company: 'WWW 科技 YX 公司', city: '深圳', employees: 300, createdDate: '2016-07-08 12:36:22' },
+      { company: 'RFV 有限责任公司', city: '中山', employees: 1300, createdDate: '2014-02-14 14:14:14' },
+      { company: 'TGB 科技 YX 公司', city: '广州', employees: 360, createdDate: '2013-01-13 13:13:13' },
+      { company: 'YHN 科技 YX 公司', city: '深圳', employees: 810, createdDate: '2012-12-12 12:12:12' },
+      { company: 'WSX 科技 YX 公司', city: '中山', employees: 800, createdDate: '2011-11-11 11:11:11' },
+      { company: 'KBG 物业 YX 公司', city: '深圳', employees: 400, createdDate: '2014-04-30 23:56:00' },
+      { company: 'SZB 有限责任公司', city: '深圳', employees: 1400, createdDate: '2016-06-03 13:53:25' }
     ]
-
     return {
       server: new McpServer({ name: 'base-config', version: '1.0.0' }, {}),
       sessionID: '',
-      tableData
+      tableData: _table,
+      queryCity: '',
+      options: Array.from(new Set(_table.map((item) => item.city))).map((city) => ({
+        label: city,
+        value: city
+      }))
     }
   },
   async mounted() {
@@ -113,7 +87,7 @@ export default {
     await client.connect(clientTransport)
     const { sessionId } = await createSseProxy({
       client,
-      url: 'https://39.108.160.245/sse'
+      url: 'http://39.108.160.245/sse'
     })
 
     this.sessionID = sessionId
diff --git a/examples/sites/src/views/components-doc/composition/useTinyRobot.ts b/examples/sites/src/views/components-doc/composition/useTinyRobot.ts
index 9cc83126d2..1f2777e61a 100644
--- a/examples/sites/src/views/components-doc/composition/useTinyRobot.ts
+++ b/examples/sites/src/views/components-doc/composition/useTinyRobot.ts
@@ -3,6 +3,7 @@ import { AIClient, useConversation } from '@opentiny/tiny-robot-kit'
 import { IconAi, IconUser } from '@opentiny/tiny-robot-svgs'
 import { h, nextTick, onMounted, reactive, ref, toRaw, watch } from 'vue'
 import { DifyModelProvider } from './DifyModelProvider.js'
+import type { SuggestionItem } from '@opentiny/tiny-robot'
 
 const difyConfig: AIModelConfig = {
   provider: 'custom',
@@ -24,119 +25,19 @@ export function useTinyRobot() {
 
   const promptItems = [
     {
-      label: '日常助理场景',
-      description: '今天需要我帮你安排日程，规划旅行，还是起草一封邮件？',
-      icon: h('span', { style: { fontSize: '18px' } }, '🧠'),
-      badge: 'NEW'
+      label: '识别网页的内容',
+      description: '公司人员表有多少列，有多少行数据，帮我统计一下！',
+      icon: h('span', { style: { fontSize: '18px' } }, '🧠')
     },
     {
-      label: '学习/知识型场景',
-      description: '有什么想了解的吗？可以是“Vue3 和 React 的区别”！',
+      label: '智能操作网页',
+      description: '请勾选公司人员表最后一行”！',
       icon: h('span', { style: { fontSize: '18px' } }, '🤔')
-    },
-    {
-      label: '创意生成场景',
-      description: '想写段文案、起个名字，还是来点灵感？',
-      icon: h('span', { style: { fontSize: '18px' } }, '✨')
-    }
-  ]
-
-  // 指令模板测试数据
-  const templateSuggestions = [
-    {
-      id: 'write',
-      text: '帮我写作',
-      value: '帮我写作',
-      description: '智能写作助手',
-      template: '帮我撰写 [文章类型] 字的 [主题], 语气类型是 [正式/轻松/专业], 具体内容是 [详细描述]'
-    },
-    {
-      id: 'translate',
-      text: '翻译',
-      value: '翻译',
-      description: '多语言翻译',
-      template: '请将以下 [中文/英文/法语/德语/日语] 内容翻译成 [目标语言]: [需要翻译的内容]'
-    },
-    {
-      id: 'summarize',
-      text: '内容总结',
-      value: '内容总结',
-      description: '智能总结长文本',
-      template: '请对以下内容进行 [简要/详细] 总结，约 [字数] 字: [需要总结的内容]'
-    },
-    {
-      id: 'code-review',
-      text: '代码审查',
-      value: '代码审查',
-      description: '代码质量审查',
-      template:
-        '请帮我审查以下 [JavaScript/TypeScript/Python/Java/C++/Go] 代码，关注 [性能/安全/可读性/最佳实践] 方面: [代码内容]'
-    },
-    {
-      id: 'email-compose',
-      text: '写邮件',
-      value: '写邮件',
-      description: '邮件草拟',
-      template: '请帮我起草一封 [正式/非正式] 邮件，发送给 [收件人角色]，主题是 [邮件主题]，内容是关于 [邮件内容]'
-    },
-    {
-      id: 'data-analysis',
-      text: '数据分析',
-      value: '数据分析',
-      description: '数据分析与报告',
-      template:
-        '请分析以下 [销售/用户/流量/金融/健康] 数据，关注 [增长率/分布/趋势/异常/关联性] 指标，生成 [柱状图/折线图/饼图/散点图/热力图] 可视化: [数据内容]'
-    },
-    {
-      id: 'product-design',
-      text: '产品设计',
-      value: '产品设计',
-      description: '产品功能设计',
-      template:
-        '请设计一个 [移动应用/网站/小程序/桌面软件/智能硬件] 的 [功能名称] 功能，目标用户是 [用户群体]，核心价值是 [功能价值]'
-    },
-    {
-      id: 'meeting-summary',
-      text: '会议纪要',
-      value: '会议纪要',
-      description: '会议记录整理',
-      template: '请帮我整理一份会议纪要，会议主题是 [会议主题]，参会人员有 [参会人员]，会议要点包括 [会议要点]'
-    },
-    {
-      id: 'interview-questions',
-      text: '面试问题',
-      value: '面试问题',
-      description: '生成面试问题',
-      template: '请为 [岗位名称] 岗位，针对 [技能领域] 方向，设计 [3/5/10] 个 [简单/中等/困难] 面试问题'
-    },
-    {
-      id: 'speech-draft',
-      text: '演讲稿',
-      value: '演讲稿',
-      description: '演讲稿撰写',
-      template:
-        '请帮我撰写一篇 [开场/主题/致谢/颁奖/毕业] 演讲稿，主题是 [演讲主题]，时长约 [5/10/15/30] 分钟，受众是 [目标听众]'
-    }
-  ]
-
-  // 模板分类测试数据
-  const templateCategories = [
-    {
-      id: 'common',
-      label: '常用指令',
-      items: templateSuggestions.slice(0, 3)
-    },
-    {
-      id: 'work',
-      label: '工作助手',
-      items: templateSuggestions.slice(3, 6)
-    },
-    {
-      id: 'content',
-      label: '内容创作',
-      items: templateSuggestions.slice(6)
     }
   ]
+  const handlePromptItemClick = (ev, item) => {
+    sendMessage(item.description)
+  }
 
   const { messageManager, createConversation } = useConversation({ client })
 
@@ -146,10 +47,6 @@ export function useTinyRobot() {
 
   const { messages, messageState, inputMessage, sendMessage, abortRequest } = messageManager
 
-  const handlePromptItemClick = (ev, item) => {
-    sendMessage(item.description)
-  }
-
   const roles = {
     assistant: {
       type: 'markdown',
@@ -165,9 +62,30 @@ export function useTinyRobot() {
   }
 
   const showHistory = ref(false)
-
   const historyData = reactive([])
 
+  // 建议按钮组，设置对话的模板
+  const suggestionPillItems = [
+    {
+      id: '1',
+      text: '公司人员表',
+      icon: h('span', { style: { fontSize: '18px' } }, '🔍')
+    },
+    {
+      id: '2',
+      text: '城市下拉框',
+      icon: h('span', { style: { fontSize: '18px' } }, '🛠️')
+    }
+  ]
+
+  function handleSuggestionPillItemClick(item: SuggestionItem) {
+    let templateText = `请对 [目标组件] ,执行 [操作]`
+    let currentInitialValue = { 目标组件: item.text, 操作: '' }
+
+    if (senderRef.value) {
+      senderRef.value.setTemplate(templateText, currentInitialValue)
+    }
+  }
   watch(
     () => messages.value[messages.value.length - 1]?.content,
     () => {
@@ -205,10 +123,6 @@ export function useTinyRobot() {
     showHistory.value = false
   }
 
-  // 指令列表
-  const suggestionItems = templateSuggestions
-  const categories = templateCategories
-
   const senderRef = ref(null)
   const currentTemplate = ref('')
   const suggestionOpen = ref(false)
@@ -291,8 +205,7 @@ export function useTinyRobot() {
     userAvatar,
     welcomeIcon,
     promptItems,
-    templateSuggestions,
-    templateCategories,
+
     messageManager,
     createConversation,
     messages,
@@ -306,14 +219,15 @@ export function useTinyRobot() {
     currentMessageId,
     handlePromptItemClick,
     handleHistorySelect,
-    suggestionItems,
-    categories,
+
     senderRef,
     currentTemplate,
     suggestionOpen,
     handleFillTemplate,
     clearTemplate,
     handleSendMessage,
-    handleMessageKeydown
+    handleMessageKeydown,
+    suggestionPillItems,
+    handleSuggestionPillItemClick
   }
 }
diff --git a/examples/sites/src/views/components-doc/tiny-robot-chat.vue b/examples/sites/src/views/components-doc/tiny-robot-chat.vue
index 6f4f2a428e..de07c9e0d9 100644
--- a/examples/sites/src/views/components-doc/tiny-robot-chat.vue
+++ b/examples/sites/src/views/components-doc/tiny-robot-chat.vue
@@ -18,10 +18,10 @@
       </span>
     </template>
     <div v-if="messages.length === 0">
-      <tr-welcome title="盘古助手" description="您好，我是盘古助手，您专属的华为云专家" :icon="welcomeIcon">
+      <tr-welcome title="智能助手" description="您好，我是Opentiny AI智能助手" :icon="welcomeIcon">
         <template #footer>
           <div class="welcome-footer">
-            <span>根据相关法律法规要求，您需要先 <a>登录</a>，若没有帐号，您可前往 <a>注册</a></span>
+            <!-- <span>根据相关法律法规要求，您需要先 <a>登录</a>，若没有帐号，您可前往 <a>注册</a></span> -->
           </div>
         </template>
       </tr-welcome>
@@ -37,31 +37,22 @@
 
     <template #footer>
       <div class="chat-input">
-        <tr-suggestion
-          v-model:open="suggestionOpen"
-          :items="suggestionItems"
-          :categories="categories"
-          @fill-template="handleFillTemplate"
-          :maxVisibleItems="5"
-        >
-          <template #trigger="{ onKeyDown, onTrigger }">
-            <tr-sender
-              ref="senderRef"
-              mode="single"
-              v-model="inputMessage"
-              :placeholder="GeneratingStatus.includes(messageState.status) ? '正在思考中...' : '请输入您的问题'"
-              :clearable="true"
-              :loading="GeneratingStatus.includes(messageState.status)"
-              :showWordLimit="true"
-              :maxLength="1000"
-              :template="currentTemplate"
-              @submit="handleSendMessage"
-              @cancel="abortRequest"
-              @keydown="handleMessageKeydown($event, onTrigger, onKeyDown)"
-              @reset-template="clearTemplate"
-            ></tr-sender>
-          </template>
-        </tr-suggestion>
+        <TrSuggestionPills :items="suggestionPillItems" @item-click="handleSuggestionPillItemClick" /><br />
+        <tr-sender
+          ref="senderRef"
+          mode="single"
+          v-model="inputMessage"
+          :placeholder="GeneratingStatus.includes(messageState.status) ? '正在思考中...' : '请输入您的问题'"
+          :clearable="true"
+          :loading="GeneratingStatus.includes(messageState.status)"
+          :showWordLimit="true"
+          :maxLength="1000"
+          :template="currentTemplate"
+          @submit="handleSendMessage"
+          @cancel="abortRequest"
+          @keydown="handleMessageKeydown($event, onTrigger, onKeyDown)"
+          @reset-template="clearTemplate"
+        ></tr-sender>
       </div>
     </template>
   </tr-container>
@@ -75,8 +66,8 @@ import {
   TrIconButton,
   TrPrompts,
   TrSender,
-  TrSuggestion,
-  TrWelcome
+  TrWelcome,
+  TrSuggestionPills
 } from '@opentiny/tiny-robot'
 import { GeneratingStatus } from '@opentiny/tiny-robot-kit'
 import { IconHistory, IconNewSession } from '@opentiny/tiny-robot-svgs'
@@ -90,8 +81,7 @@ const {
   userAvatar,
   welcomeIcon,
   promptItems,
-  templateSuggestions,
-  templateCategories,
+
   messageManager,
   createConversation,
   messages,
@@ -105,15 +95,16 @@ const {
   currentMessageId,
   handlePromptItemClick,
   handleHistorySelect,
-  suggestionItems,
-  categories,
+
   senderRef,
   currentTemplate,
   suggestionOpen,
   handleFillTemplate,
   clearTemplate,
   handleSendMessage,
-  handleMessageKeydown
+  handleMessageKeydown,
+  suggestionPillItems,
+  handleSuggestionPillItemClick
 } = useTinyRobot()
 </script>