fix(robot): add examples of Perfecting AI Agents #3476
Conversation
WalkthroughThe updates refactor and simplify several Vue components and a composition function related to an AI assistant and grid demo. Components are migrated from Composition API to Options API, dropdowns for city selection are added, static data arrays are updated, and the suggestion system is streamlined from complex templates to clickable suggestion pills. Welcome messages and UI elements are also updated. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SuggestionPills
participant useTinyRobot
participant TrSender
User->>SuggestionPills: Clicks a suggestion pill
SuggestionPills->>useTinyRobot: handleSuggestionPillItemClick(pill)
useTinyRobot->>TrSender: Set template with pill text as target component
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. examples/sites/src/views/components-doc/composition/useTinyRobot.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🔭 Outside diff range comments (1)
examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue (1)
81-98: 🛠️ Refactor suggestionAdd error handling for async operations.
The mounted lifecycle hook performs multiple async operations without proper error handling, which could lead to silent failures.
Add comprehensive error handling:
async mounted() { + try { // 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' }) this.sessionID = sessionId window.$sessionId = this.sessionID // 3、 await this.server.connect(transport) + } catch (error) { + console.error('Failed to initialize AI agent connection:', error) + // Consider showing user-friendly error message + } }
♻️ Duplicate comments (2)
examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vue (2)
90-90: Security concern: HTTP endpoint in production code.Same security issue as the other file - HTTP endpoint could expose data transmission risks.
Refer to the security recommendation in the other file review regarding environment-based URL configuration.
81-98: Add error handling for async operations.The async operations in the mounted hook lack proper error handling, creating potential for silent failures.
Apply the same error handling pattern recommended in the other file review.
🧹 Nitpick comments (3)
examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue (1)
40-40: Resolve import inconsistency between component files.This file imports
TinyBaseSelectand aliases it asTinySelect, while the composition API version importsTinySelectdirectly. This inconsistency could cause confusion.For consistency with the other file, consider importing
TinySelectdirectly:-import { TinyGrid, TinyGridColumn, TinyBaseSelect } from '@opentiny/vue' +import { TinyGrid, TinyGridColumn, TinySelect } from '@opentiny/vue'- TinySelect: TinyBaseSelect + TinySelectAlso applies to: 49-49
examples/sites/src/views/components-doc/composition/useTinyRobot.ts (1)
67-79: Review suggestion pill items for consistency and usability.The new suggestion pill items provide a simplified UI approach. Consider the following:
- The items are hardcoded and specific to certain UI components
- Icons use emoji characters which may not render consistently across platforms
- The naming could be more descriptive for better user understanding
Consider using icon components instead of emoji for consistency:
- icon: h('span', { style: { fontSize: '18px' } }, '🔍') + icon: h(IconSearch, { style: { fontSize: '18px' } })And consider making the items more configurable or adding more comprehensive examples.
examples/sites/src/views/components-doc/tiny-robot-chat.vue (1)
24-24: Consider removing commented code or documenting the reason.The legal notice about login and registration is commented out. If this is intentional for the demo/example, consider removing it entirely to keep the code clean.
Either remove the commented code or add a comment explaining why it's kept:
- <!-- <span>根据相关法律法规要求，您需要先 <a>登录</a>，若没有帐号，您可前往 <a>注册</a></span> --> + <!-- Login/registration notice disabled for demo purposes -->Or remove it completely if not needed.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vue(1 hunks)examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue(2 hunks)examples/sites/src/views/components-doc/composition/useTinyRobot.ts(5 hunks)examples/sites/src/views/components-doc/tiny-robot-chat.vue(5 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (9)
examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vue (2)
39-50: Good migration from Composition API to Options API.The migration from Composition API (
<script setup>) to Options API is well-executed with proper component structure and imports.
52-79:✅ Verification successful
Verify data consistency between component files.
The static data array
_tableappears identical between both files, which is good for consistency in demos.Let me verify the data consistency between the files:
🏁 Script executed:
#!/bin/bash # Description: Verify that both files have identical _table data arrays # Extract and compare the _table arrays from both files echo "=== Comparing _table arrays between both files ===" # Extract _table from first file echo "First file _table:" rg -A 20 "const _table = \[" examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue echo -e "\n=== Second file _table:" # Extract _table from second file rg -A 20 "const _table = \[" examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vueLength of output: 3856
Confirmed
_tableData ConsistencyBoth
examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vueand
examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vue
define an identical_tablearray of demo records—no further action needed.examples/sites/src/views/components-doc/composition/useTinyRobot.ts (3)
6-6: LGTM! Import added for new suggestion pill functionality.The import addition for
SuggestionItemtype properly supports the new pill-based suggestion system.
38-40: LGTM! Function positioning improved.Moving
handlePromptItemClickup in the code improves readability and logical organization without changing functionality.
208-208: LGTM! Return statement properly updated for new functionality.The return statement correctly exposes the new suggestion pill items and handler while maintaining existing functionality.
Also applies to: 222-222, 229-231
examples/sites/src/views/components-doc/tiny-robot-chat.vue (4)
21-21: LGTM! Welcome message updated for branding consistency.The welcome message has been appropriately updated from "盘古助手" to "智能助手" and the description changed to reflect "Opentiny AI智能助手", which aligns with the project branding.
40-40: LGTM! Simplified suggestion UI implementation.The replacement of the complex
tr-suggestioncomponent withTrSuggestionPillssimplifies the UI and aligns with the refactored suggestion system in the composition function.
69-70: LGTM! Imports updated correctly for component changes.The import statement properly removes
TrSuggestionand addsTrSuggestionPillsto match the component usage changes.
84-84: LGTM! Destructuring updated to match composition function changes.The destructuring correctly removes the old suggestion-related properties and adds the new pill-related ones, maintaining consistency with the refactored
useTinyRobotcomposition function.Also applies to: 98-98, 105-107
| @@ -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' | |||
There was a problem hiding this comment.
Security concern: HTTP endpoint in production code.
The SSE proxy URL was changed from HTTPS to HTTP, which could expose data transmission to security risks in production environments.
Consider using environment-based configuration or at minimum document why HTTP is required:
+ // TODO: Use HTTPS in production environment
const { sessionId } = await createSseProxy({
client,
- url: 'http://39.108.160.245/sse'
+ url: process.env.NODE_ENV === 'production' ? 'https://39.108.160.245/sse' : 'http://39.108.160.245/sse'
})📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| url: 'http://39.108.160.245/sse' | |
| const { sessionId } = await createSseProxy({ | |
| client, | |
| // TODO: Use HTTPS in production environment | |
| url: process.env.NODE_ENV === 'production' | |
| ? 'https://39.108.160.245/sse' | |
| : 'http://39.108.160.245/sse' | |
| }) |
🤖 Prompt for AI Agents
In examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue at line 90, the SSE
proxy URL uses an HTTP endpoint, which poses a security risk in production.
Update the code to use an HTTPS URL for secure data transmission. Alternatively,
implement environment-based configuration to switch between HTTP and HTTPS
depending on the deployment environment, and document the reason if HTTP must be
used.
| <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> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Implement city filtering functionality.
The city dropdown is currently non-functional - it's bound to queryCity but doesn't filter the grid data. This creates a misleading user interface.
Add a computed property to filter the table data:
data() {
// ... existing code
},
+ computed: {
+ filteredTableData() {
+ if (!this.queryCity) {
+ return this.tableData
+ }
+ return this.tableData.filter(item => item.city === this.queryCity)
+ }
+ },Then update the grid to use the filtered data:
- :data="tableData"
+ :data="filteredTableData"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <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> | |
| <script> | |
| export default { | |
| data() { | |
| return { | |
| // ... existing data | |
| queryCity: '', | |
| options: [], // 城市选项列表 | |
| tableData: [] // 原始表格数据 | |
| } | |
| }, | |
| computed: { | |
| filteredTableData() { | |
| if (!this.queryCity) { | |
| return this.tableData | |
| } | |
| return this.tableData.filter(item => item.city === this.queryCity) | |
| } | |
| }, | |
| // ... 其他组件选项 | |
| } | |
| </script> | |
| <template> | |
| <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 | |
| :columns="columns" | |
| :data="filteredTableData" | |
| row-key="id" | |
| <!-- 其他属性 --> | |
| ></tiny-grid> | |
| </template> |
🤖 Prompt for AI Agents
In examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue around lines 4 to
16, the city dropdown is bound to queryCity but does not filter the grid data,
causing a misleading UI. To fix this, add a computed property that filters the
grid data based on the selected queryCity value, and update the grid component
to use this filtered data instead of the full dataset.
| <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> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Implement city filtering functionality.
Similar to the other file, the city dropdown lacks filtering functionality, making it purely cosmetic.
Add filtering logic as shown in the other file review. The implementation should be identical since both files use the same data structure.
🤖 Prompt for AI Agents
In examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vue
between lines 4 and 16, the city dropdown component lacks filtering
functionality, making it non-interactive. To fix this, add a filtering method or
computed property that filters the options based on the user's input in the
dropdown. Bind this filtered list to the tiny-select component's options prop,
replicating the filtering logic used in the other reviewed file with the same
data structure.
| label: '识别网页的内容', | ||
| description: '公司人员表有多少列，有多少行数据，帮我统计一下！', | ||
| icon: h('span', { style: { fontSize: '18px' } }, '🧠') |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify prompt item descriptions for accuracy and user experience.
The prompt items have been updated to focus on specific webpage interaction scenarios. The descriptions appear to have potential issues:
- Line 29: "公司人员表有多少列，有多少行数据，帮我统计一下！" - This is a specific counting task
- Line 34: "请勾选公司人员表最后一行"！" - This has a syntax error with misplaced quotation mark and appears incomplete
Fix the syntax error and complete the description:
- description: '请勾选公司人员表最后一行"！',
+ description: '请勾选公司人员表最后一行！',Also, consider whether these specific prompts align with the general AI assistant capabilities or if they should be more generic examples.
Also applies to: 33-35
🏁 Script executed:
#!/bin/bash
# Display the context around the prompt items in useTinyRobot.ts
FILE="examples/sites/src/views/components-doc/composition/useTinyRobot.ts"
echo "Lines 25-40 in $FILE:"
sed -n '25,40p' "$FILE"Length of output: 728
Fix malformed prompt description and review wording
Please update the second prompt item's description and reconsider both descriptions for clarity and generality:
• File: examples/sites/src/views/components-doc/composition/useTinyRobot.ts
– Replace the stray curly quote in the second item's description:
- description: '请勾选公司人员表最后一行”！',
+ description: '请勾选公司人员表最后一行！',• Review both prompt descriptions for user experience—these examples are highly specific (“公司人员表…”). Consider using more generic phrasing, for instance:
- 统计网页表格的行数和列数
- 选择网页表格的最后一行
🤖 Prompt for AI Agents
In examples/sites/src/views/components-doc/composition/useTinyRobot.ts around
lines 28 to 30 and 33 to 35, fix the syntax error in the second prompt item's
description by removing the misplaced quotation mark and completing the sentence
properly. Additionally, revise both prompt descriptions to be more generic and
clear for better user experience, such as changing "公司人员表有多少列，有多少行数据，帮我统计一下！" to
"统计网页表格的行数和列数" and "请勾选公司人员表最后一行" to "选择网页表格的最后一行".
| function handleSuggestionPillItemClick(item: SuggestionItem) { | ||
| let templateText = `请对 [目标组件] ,执行 [操作]` | ||
| let currentInitialValue = { 目标组件: item.text, 操作: '' } | ||
|
|
||
| if (senderRef.value) { | ||
| senderRef.value.setTemplate(templateText, currentInitialValue) | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Verify template setting mechanism and error handling.
The new handler sets a template with placeholders, but there are potential issues:
- No validation that
senderRef.valueexists before calling methods - The template text and initial values are hardcoded
- Missing error handling for the
setTemplatecall
Add proper error handling and validation:
function handleSuggestionPillItemClick(item: SuggestionItem) {
let templateText = `请对 [目标组件] ,执行 [操作]`
let currentInitialValue = { 目标组件: item.text, 操作: '' }
- if (senderRef.value) {
- senderRef.value.setTemplate(templateText, currentInitialValue)
- }
+ if (senderRef.value && typeof senderRef.value.setTemplate === 'function') {
+ try {
+ senderRef.value.setTemplate(templateText, currentInitialValue)
+ } catch (error) {
+ console.error('Failed to set template:', error)
+ }
+ }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function handleSuggestionPillItemClick(item: SuggestionItem) { | |
| let templateText = `请对 [目标组件] ,执行 [操作]` | |
| let currentInitialValue = { 目标组件: item.text, 操作: '' } | |
| if (senderRef.value) { | |
| senderRef.value.setTemplate(templateText, currentInitialValue) | |
| } | |
| } | |
| function handleSuggestionPillItemClick(item: SuggestionItem) { | |
| let templateText = `请对 [目标组件] ,执行 [操作]` | |
| let currentInitialValue = { 目标组件: item.text, 操作: '' } | |
| if (senderRef.value && typeof senderRef.value.setTemplate === 'function') { | |
| try { | |
| senderRef.value.setTemplate(templateText, currentInitialValue) | |
| } catch (error) { | |
| console.error('Failed to set template:', error) | |
| } | |
| } | |
| } |
🤖 Prompt for AI Agents
In examples/sites/src/views/components-doc/composition/useTinyRobot.ts around
lines 81 to 88, the function handleSuggestionPillItemClick lacks validation for
senderRef.value before calling setTemplate, uses hardcoded template text and
initial values, and has no error handling for setTemplate. Fix this by first
checking if senderRef.value exists before calling setTemplate, replace hardcoded
template text and initial values with parameters or configurable values if
possible, and wrap the setTemplate call in a try-catch block to handle and log
any errors gracefully.
| <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> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify tr-sender props consistency after component restructuring.
The tr-sender component props appear unchanged, but since it was previously nested inside a tr-suggestion trigger slot and is now standalone, verify that all props and event handlers work correctly in the new structure.
Run the following script to check if there are any other usages of the old suggestion system that might need updating:
🏁 Script executed:
#!/bin/bash
# Search for remaining tr-suggestion component usage in the codebase
rg -A 5 -B 5 "tr-suggestion" --type vue --type ts --type js
# Search for any references to the removed suggestion-related properties
rg -A 3 -B 3 "(suggestionItems|categories|onTrigger|onKeyDown)" --type vue --type ts --type jsLength of output: 212
To ensure we catch all occurrences in .vue files, let’s re-run the search without relying on unrecognized file-type flags:
🏁 Script executed:
#!/bin/bash
# Search for any tr-suggestion component usage in .vue files
rg -n 'tr-suggestion' -g '*.vue'
# Search for any references to the old suggestion-related props or handlers
rg -n '(suggestionItems|categories|onTrigger|onKeyDown)' -g '*.vue'Length of output: 480
I’m still seeing a leftover reference to the old suggestion handlers in tiny-robot-chat.vue:
We need to confirm that onTrigger and onKeyDown are now defined (or safely removed) so this event binding won’t break. If those helpers no longer exist, you should:
- Remove them from the call site (
@keydown="handleMessageKeydown($event)"), or - Re-implement any necessary trigger logic directly within
handleMessageKeydown.
Once you verify and adjust that handler, the standalone <tr-sender> usage will be fully decoupled from the old suggestion system.
🏁 Script executed:
#!/bin/bash
# Show the handleMessageKeydown definition and usage context
sed -n '1,200p' examples/sites/src/views/components-doc/tiny-robot-chat.vue | rg -C3 'handleMessageKeydown'Length of output: 524
Remove outdated suggestion handler references in tiny-robot-chat.vue
The useTinyRobot() hook no longer returns onTrigger or onKeyDown, so passing them into handleMessageKeydown will be undefined and likely break your keydown logic. Update the @keydown binding to remove these arguments (or replace them with the correct handlers if needed).
• File: examples/sites/src/views/components-doc/tiny-robot-chat.vue
Line 53 (approx):
Replace:
- @keydown="handleMessageKeydown($event, onTrigger, onKeyDown)"
+ @keydown="handleMessageKeydown($event)"If you still need custom trigger behavior, import or define the proper callbacks and pass those instead of the removed suggestion handlers.
🤖 Prompt for AI Agents
In examples/sites/src/views/components-doc/tiny-robot-chat.vue around lines 41
to 55, the @keydown event on the tr-sender component passes onTrigger and
onKeyDown arguments to handleMessageKeydown, but these handlers are no longer
returned by useTinyRobot and thus undefined. To fix this, remove onTrigger and
onKeyDown from the @keydown binding so it only passes the event object, or if
custom trigger logic is still needed, replace them with the correct current
handlers. This will prevent errors from undefined arguments and decouple the
component from the old suggestion system.
PR
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Improvements
Bug Fixes