fix(robot): optimized the example and added sessions and UI adjustment. #3484
Conversation
WalkthroughThe changes update dependency versions, enhance AI chat features, and refactor visibility control for the robot chat component. Conversation history management is removed, global state is introduced for chat visibility, and conversation context is integrated into streaming requests. UI adjustments simplify the chat interface and add a toggle button for chat activation. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ToggleButton
participant appData
participant RobotChat
User->>ToggleButton: Click "Show Robot" button
ToggleButton->>appData: set showTinyRobot = true
appData-->>RobotChat: showTinyRobot changes
RobotChat->>User: Display chat UI
sequenceDiagram
participant User
participant RobotChat
participant DifyModelProvider
participant handleSSEStream
participant globalConversation
User->>RobotChat: Send message
RobotChat->>DifyModelProvider: chatStream(message)
DifyModelProvider->>handleSSEStream: Start SSE stream (includes conversation_id)
handleSSEStream->>globalConversation: Update id on workflow_started
handleSSEStream->>DifyModelProvider: Update messages, set loading states
DifyModelProvider->>RobotChat: Update chat messages
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.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/tools/appData.jsOops! 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/common.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.
✨ 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: 8
🔭 Outside diff range comments (1)
examples/sites/src/views/components-doc/common.vue (1)
14-14:⚠️ Potential issueRemove unused reference to
showvariable.The template still references a
showvariable in the class binding, but this variable no longer exists after switching to global state management.Apply this diff to fix the class binding:
- :class="{ 'docs-on-robot-show': show }" + :class="{ 'docs-on-robot-show': appData.showTinyRobot }"
🧹 Nitpick comments (3)
examples/sites/src/views/components-doc/composition/DifyModelProvider.ts (1)
52-52: Handle empty conversation ID gracefully.The code directly uses
globalConversation.idwithout checking if it's empty. For new conversations, this will send an empty string which might not be the intended behavior.Consider this improvement:
- conversation_id: globalConversation.id + ...(globalConversation.id && { conversation_id: globalConversation.id })This will only include the
conversation_idfield when it has a value, allowing the API to create a new conversation when needed.examples/sites/src/views/components-doc/common.vue (1)
451-452: Consider making the route detection more configurable.The route detection is hardcoded to check for 'grid-ai-agent'. This might make it difficult to extend robot functionality to other routes in the future.
Consider extracting the route pattern to a configuration:
- const hasRobot = router.currentRoute.value.fullPath.includes('grid-ai-agent') + const robotRoutes = ['grid-ai-agent'] // Could be moved to config + const hasRobot = robotRoutes.some(route => router.currentRoute.value.fullPath.includes(route))examples/sites/src/views/components-doc/tiny-robot-chat.vue (1)
87-88: Consider avoiding !important declaration.The CSS changes look appropriate for positioning, but consider whether the
!importantdeclaration is necessary. If possible, increase specificity instead of using!importantto maintain better CSS maintainability.-.tr-container { - top: 64px !important; +.tr-container { + top: 64px;If
!importantis required due to external style conflicts, consider adding a comment explaining why it's necessary.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue(1 hunks)examples/sites/package.json(1 hunks)examples/sites/src/tools/appData.js(3 hunks)examples/sites/src/views/components-doc/common.vue(3 hunks)examples/sites/src/views/components-doc/composition/DifyModelProvider.ts(3 hunks)examples/sites/src/views/components-doc/composition/useTinyRobot.ts(4 hunks)examples/sites/src/views/components-doc/composition/utils.ts(5 hunks)examples/sites/src/views/components-doc/tiny-robot-chat.vue(5 hunks)packages/vue/package.json(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
examples/sites/src/views/components-doc/composition/DifyModelProvider.ts (1)
examples/sites/src/views/components-doc/composition/utils.ts (2)
globalConversation(10-12)handleSSEStream(18-153)
🔇 Additional comments (11)
packages/vue/package.json (1)
240-240: LGTM! Minor formatting improvement.Removing the trailing newline is a good formatting practice for consistency.
examples/sites/src/tools/appData.js (2)
1-1: LGTM! Proper import update for watch functionality.Adding the
watchimport is necessary for the new robot visibility watcher.
12-12: LGTM! Good global state management approach.Adding
showTinyRobotto the global reactive state centralizes robot chat visibility control, which is a good architectural decision.examples/sites/src/views/components-doc/composition/useTinyRobot.ts (3)
45-45: Fix will be needed after DifyModelProvider initialization is corrected.This assignment will work correctly once the
_messagesproperty inDifyModelProvideris properly initialized as aref(). Currently, it's trying to assign a Vue ref to a plain array.This is related to the issue identified in
DifyModelProvider.tsline 18. Ensure that fix is applied first, then this assignment will work correctly.
14-17: Good architectural improvement with provider reuse.Creating a single
DifyModelProviderinstance and reusing it is a better approach than creating new instances. This improves performance and enables proper state management integration.
31-31: Icon rendering improvements are clean.The changes to use
h('span', ...)for rendering emoji icons with explicit font sizes is a good improvement for consistent styling.Also applies to: 36-36, 66-66, 71-71
examples/sites/src/views/components-doc/tiny-robot-chat.vue (5)
42-48: LGTM! Clean toggle button implementation.The toggle button implementation is well-structured with proper conditional rendering and clean event handling. The SVG icon and accessibility attributes (title) are good additions.
52-52: LGTM! Necessary import addition.The addition of
TrSuggestionPillsto the imports is correct and required for the component used in the template.
55-55: LGTM! Required import for global state.The import of
appDatais necessary for the global state management functionality introduced in this PR.
3-3:✅ Verification successful
Verify global state management consistency.
The change to use
appData.showTinyRobotfor visibility control aligns with the global state management approach. Ensure that this global state is properly synchronized across all components that use it.
🏁 Script executed:
#!/bin/bash # Verify that appData.showTinyRobot is consistently used across components rg -A 3 -B 3 "showTinyRobot" --type vue --type js --type tsLength of output: 87
🏁 Script executed:
#!/bin/bash # Retry searching for usages of appData.showTinyRobot across .vue, .js, and .ts files rg -n "showTinyRobot" -g '*.vue' -g '*.js' -g '*.ts'Length of output: 707
Global
showTinyRobotstate usage is consistent and correctly wiredVerified that:
showTinyRobotis defined inexamples/sites/src/tools/appData.js- It’s referenced in
common.vue(v-show and assignment) and intiny-robot-chat.vue(v-model:show and toggle)- No missing or conflicting usages detected
No further changes needed.
20-20:❓ Verification inconclusive
Verify that removing markdown type doesn't affect message rendering.
The removal of
type="markdown"from<tr-bubble-list>may change how messages are displayed. Ensure that this change is intentional and doesn't break existing message formatting.
🏁 Script executed:
#!/bin/bash # Check if markdown rendering is still needed elsewhere or if this affects message display ast-grep --pattern 'tr-bubble-list' rg -A 5 -B 5 "type.*markdown" --type vueLength of output: 106
🏁 Script executed:
#!/bin/bash # Locate the tr-bubble-list component file(s) fd --extension vue tr-bubble-list # Inspect prop definitions and default values in the component rg -n "props\s*:" -C 5 -g "*tr-bubble-list.vue" # Also look for defineProps usage (Vue 3 <script setup>) rg -n "defineProps" -C 5 -g "*tr-bubble-list.vue"Length of output: 433
Verify markdown rendering in tr-bubble-list
I couldn’t locate thetr-bubble-listcomponent source in this repo (it’s likely imported from an external package), so please confirm that removingtype="markdown"won’t break message formatting. Especially ensure that markdown parsing is still enabled by default or handled elsewhere.
| @@ -87,7 +87,7 @@ export default { | |||
| await client.connect(clientTransport) | |||
| const { sessionId } = await createSseProxy({ | |||
| client, | |||
| url: 'http://39.108.160.245/sse' | |||
| url: 'https://39.108.160.245/sse' | |||
There was a problem hiding this comment.
💡 Verification agent
❓ Verification inconclusive
Good security improvement by switching to HTTPS.
The change from HTTP to HTTPS enhances security by encrypting the SSE connection. However, please verify that the endpoint is accessible via HTTPS and consider externalizing this URL to a configuration file for better maintainability.
🏁 Script executed:
#!/bin/bash
# Verify the HTTPS endpoint is accessible
curl -I https://39.108.160.245/sse --connect-timeout 10Length of output: 698
HTTPS endpoint fails certificate verification
The switch to HTTPS is a great security improvement, but curl -I https://39.108.160.245/sse is failing with an SSL error indicating a self-signed certificate. Please address this before merging:
- Replace the self-signed certificate with a valid, CA-signed certificate so clients can verify it out of the box.
- If a self-signed cert is required (e.g., for internal testing), ensure the client trusts it (e.g., import the cert or configure your HTTP client accordingly).
- Externalize the SSE URL (and any related cert-trust settings) into a configuration file or environment variable instead of hard-coding the IP.
🤖 Prompt for AI Agents
In examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue at line 90, the SSE
URL is hardcoded with an HTTPS endpoint using a self-signed certificate that
fails SSL verification. To fix this, replace the self-signed certificate on the
server with a valid CA-signed certificate to ensure proper SSL validation.
Additionally, externalize the SSE URL into a configuration file or environment
variable to improve maintainability and allow easier updates without code
changes. If a self-signed certificate must be used, configure the client to
trust it explicitly by importing the certificate or adjusting the HTTP client
settings accordingly.
| "@opentiny/tiny-robot": "0.2.1", | ||
| "@opentiny/tiny-robot-kit": "0.2.1", | ||
| "@opentiny/tiny-robot-svgs": "0.2.1", |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Good dependency updates from alpha to stable versions.
The consistent update of all tiny-robot packages from alpha versions to stable 0.2.1 indicates improved stability and bug fixes.
🌐 Web query:
What is the latest version of @opentiny/tiny-robot package on npm?
💡 Result:
I couldn't find a package named @opentiny/tiny-robot on npm. It's possible there might be a typo or the package is listed under a different name. However, there is a related package called @opentiny/tiny-engine-plugin-robot, which is currently at version 2.0.0-rc.2. (libraries.io)
If this isn't the package you're referring to, could you please provide more details or verify the package name? That would help me assist you more effectively.
Citations:
Verify package names and published versions
The packages @opentiny/tiny-robot, @opentiny/tiny-robot-kit, and @opentiny/tiny-robot-svgs at version 0.2.1 could not be found on the public npm registry. Please confirm that:
- The package names are correct and match your published artifacts.
- Version
0.2.1has been published (either publicly or to your private registry). - If these are private packages, ensure your CI/npm config points to the correct registry.
Once confirmed or corrected, the dependency bump from alpha to stable can be finalized.
🤖 Prompt for AI Agents
In examples/sites/package.json around lines 32 to 34, the dependencies
"@opentiny/tiny-robot", "@opentiny/tiny-robot-kit", and
"@opentiny/tiny-robot-svgs" at version "0.2.1" do not appear to exist on the
public npm registry. Verify that these package names are correct and correspond
to your published packages. Also confirm that version "0.2.1" is published
either publicly or in your private registry. If these are private packages,
ensure your npm configuration points to the correct registry. Update the package
names or versions accordingly to reflect valid and accessible dependencies.
| watch( | ||
| () => appData.showTinyRobot, | ||
| (value) => { | ||
| document.body.classList.toggle('docs-on-robot-show', value) | ||
| } | ||
| ) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add safety checks for DOM manipulation.
The watcher implementation is good for centralizing the robot visibility side effects, but consider adding safety checks for SSR compatibility and document availability.
watch(
() => appData.showTinyRobot,
(value) => {
- document.body.classList.toggle('docs-on-robot-show', value)
+ if (typeof document !== 'undefined' && document.body) {
+ document.body.classList.toggle('docs-on-robot-show', value)
+ }
}
)📝 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.
| watch( | |
| () => appData.showTinyRobot, | |
| (value) => { | |
| document.body.classList.toggle('docs-on-robot-show', value) | |
| } | |
| ) | |
| watch( | |
| () => appData.showTinyRobot, | |
| (value) => { | |
| if (typeof document !== 'undefined' && document.body) { | |
| document.body.classList.toggle('docs-on-robot-show', value) | |
| } | |
| } | |
| ) |
🤖 Prompt for AI Agents
In examples/sites/src/tools/appData.js around lines 32 to 37, the watcher
toggles a class on document.body without checking if the document object is
available, which can cause issues during server-side rendering (SSR). Add a
safety check to ensure that the code only runs if the document and document.body
exist before attempting to toggle the class. This will prevent errors in
environments where the DOM is not present.
| @@ -14,6 +15,8 @@ import { handleSSEStream } from './utils.js' | |||
| * }); | |||
| */ | |||
| export class DifyModelProvider extends BaseModelProvider { | |||
| _messages: Ref<ChatCompletionRequest['messages']> = [] | |||
There was a problem hiding this comment.
Fix the _messages property initialization.
The _messages property is incorrectly initialized as an empty array instead of a proper Vue Ref. This will cause runtime errors when the SSE handler tries to access .value.
Apply this diff to fix the initialization:
- _messages: Ref<ChatCompletionRequest['messages']> = []
+ _messages: Ref<ChatCompletionRequest['messages']> = ref([])Note: You'll also need to import ref from Vue.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In examples/sites/src/views/components-doc/composition/DifyModelProvider.ts at
line 18, the _messages property is initialized as a plain empty array instead of
a Vue Ref, which will cause runtime errors when accessing .value. Fix this by
importing ref from Vue and initializing _messages using ref([]) to create a
proper reactive reference.
| export const globalConversation = { | ||
| id: '' | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider thread safety for global conversation state.
The globalConversation object is a shared global state that could lead to race conditions if multiple chat sessions are active simultaneously.
Consider one of these approaches:
- Pass conversation context through function parameters instead of global state
- Use a Map to track multiple conversations by session ID
- Add proper synchronization mechanisms
Example for approach 1:
export async function handleSSEStream(
response: Response,
handler: StreamHandler,
message: Ref<ChatCompletionRequest['messages']>,
conversationContext: { id: string },
signal?: AbortSignal
): Promise<void>🤖 Prompt for AI Agents
In examples/sites/src/views/components-doc/composition/utils.ts around lines 10
to 12, the globalConversation object is a shared global state that risks race
conditions with concurrent chat sessions. To fix this, avoid using this global
object by passing the conversation context explicitly through function
parameters, or alternatively use a Map keyed by session IDs to manage multiple
conversations separately. Implement one of these approaches to ensure thread
safety and prevent state conflicts.
| }, | ||
| finish_reason: null | ||
| } | ||
| ], | ||
| object: '', | ||
| model: '' | ||
| }) | ||
| message.value.slice(-1)[0].loading = true |
There was a problem hiding this comment.
Add safety checks for message array access.
The code directly accesses the last message in the array without checking if the array is empty, which could cause runtime errors.
Apply this diff to add safety checks:
- message.value.slice(-1)[0].loading = true
+ const lastMessage = message.value.slice(-1)[0]
+ if (lastMessage) {
+ lastMessage.loading = true
+ }Apply similar fixes to lines 118 and 137 where loading = false is set.
Also applies to: 118-118, 137-137
🤖 Prompt for AI Agents
In examples/sites/src/views/components-doc/composition/utils.ts at lines 95,
118, and 137, the code accesses the last element of the message array without
checking if the array is empty, which can cause runtime errors. Add safety
checks to ensure the message array is not empty before accessing its last
element and setting the loading property. Use conditional checks to verify the
array length is greater than zero before performing these operations.
| .tr-toggle { | ||
| position: absolute; | ||
| cursor: pointer; | ||
| right: 30px; | ||
| top: 50%; | ||
| transform: translateX(50%) translateY(-50%); | ||
| z-index: 9; | ||
| width: 24px; | ||
| height: 24px; | ||
| border-radius: 50%; | ||
| font-size: 18px; | ||
| line-height: 18px; | ||
| background-color: var(--tv-TreeMenu-toggle-button-background-color); | ||
| box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.12); | ||
| border: 1px solid var(--tv-TreeMenu-border-color); | ||
| transform: translateX(100%) translateY(-50%); | ||
| border-top-right-radius: 0; | ||
| border-bottom-right-radius: 0; | ||
|
|
||
| svg { | ||
| margin-top: 2px; | ||
| fill: #808080; | ||
| } | ||
| } |
There was a problem hiding this comment.
Fix duplicate transform declarations.
The toggle button styling is well-implemented with good use of CSS custom properties for theming. However, there are duplicate transform declarations that need to be consolidated.
.tr-toggle {
position: absolute;
cursor: pointer;
right: 30px;
top: 50%;
- transform: translateX(50%) translateY(-50%);
z-index: 9;
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 18px;
line-height: 18px;
background-color: var(--tv-TreeMenu-toggle-button-background-color);
box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.12);
border: 1px solid var(--tv-TreeMenu-border-color);
transform: translateX(100%) translateY(-50%);
border-top-right-radius: 0;
border-bottom-right-radius: 0;The second transform declaration (line 149) will override the first one (line 139), making the first declaration redundant.
📝 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.
| .tr-toggle { | |
| position: absolute; | |
| cursor: pointer; | |
| right: 30px; | |
| top: 50%; | |
| transform: translateX(50%) translateY(-50%); | |
| z-index: 9; | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| font-size: 18px; | |
| line-height: 18px; | |
| background-color: var(--tv-TreeMenu-toggle-button-background-color); | |
| box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.12); | |
| border: 1px solid var(--tv-TreeMenu-border-color); | |
| transform: translateX(100%) translateY(-50%); | |
| border-top-right-radius: 0; | |
| border-bottom-right-radius: 0; | |
| svg { | |
| margin-top: 2px; | |
| fill: #808080; | |
| } | |
| } | |
| .tr-toggle { | |
| position: absolute; | |
| cursor: pointer; | |
| right: 30px; | |
| top: 50%; | |
| z-index: 9; | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| font-size: 18px; | |
| line-height: 18px; | |
| background-color: var(--tv-TreeMenu-toggle-button-background-color); | |
| box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.12); | |
| border: 1px solid var(--tv-TreeMenu-border-color); | |
| transform: translateX(100%) translateY(-50%); | |
| border-top-right-radius: 0; | |
| border-bottom-right-radius: 0; | |
| svg { | |
| margin-top: 2px; | |
| fill: #808080; | |
| } | |
| } |
🤖 Prompt for AI Agents
In examples/sites/src/views/components-doc/tiny-robot-chat.vue between lines 134
and 157, there are two conflicting transform declarations in the .tr-toggle CSS
class. Remove the first transform declaration on line 139 and keep only the
second one on line 149 to avoid redundancy and ensure the intended styling is
applied.
|
|
||
| messageManager, | ||
| createConversation, | ||
| computedMessages, |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify that computedMessages is properly defined and used.
The change to computedMessages suggests a refactor in message handling. Ensure that this computed property is properly defined in the useTinyRobot composable and provides the expected functionality.
🏁 Script executed:
#!/bin/bash
# Check the definition and usage of computedMessages
ast-grep --pattern 'computedMessages'
rg -A 5 -B 5 "computedMessages" --type ts --type jsLength of output: 906
🏁 Script executed:
#!/bin/bash
# Locate useTinyRobot composable file(s) and inspect computedMessages definition
echo "Searching for useTinyRobot definitions..."
composable_files=$(rg -l "export function useTinyRobot" -t ts -t js)
if [ -z "$composable_files" ]; then
echo "No useTinyRobot composable found."
exit 1
fi
echo "Found composables:"
echo "$composable_files"
for file in $composable_files; do
echo
echo "== $file =="
rg -n "computedMessages" -C3 "$file" || echo "No computedMessages reference in $file"
doneLength of output: 1007
Implement and Export computedMessages in useTinyRobot
The component at examples/sites/src/views/components-doc/tiny-robot-chat.vue (line 63) now references computedMessages, but our useTinyRobot composable (examples/sites/src/views/components-doc/composition/useTinyRobot.ts) does not define or return it. You should either:
- Add and return a
computedMessagescomputed property in the composable, for example:import { computed, ref } from 'vue'; export function useTinyRobot() { const messages = ref<Message[]>([]); // … other logic … const computedMessages = computed(() => messages.value); return { // … existing exports … computedMessages, }; }
- Or update the component to use the existing
messagesref (or whatever reactive value you intend) instead ofcomputedMessages.
Locations needing attention:
- examples/sites/src/views/components-doc/composition/useTinyRobot.ts: define and return
computedMessages - examples/sites/src/views/components-doc/tiny-robot-chat.vue (line 63): ensure the destructured property matches the composable
Please make these changes to restore reactivity and avoid undefined references.
🤖 Prompt for AI Agents
In examples/sites/src/views/components-doc/composition/useTinyRobot.ts, define a
computed property named computedMessages that returns the current messages array
(or equivalent reactive data), then export it from the useTinyRobot function. In
examples/sites/src/views/components-doc/tiny-robot-chat.vue at line 63, ensure
that the destructured property matches this computedMessages export from the
composable to maintain reactivity and avoid undefined references.
PR
fix(robot): 完善示例，增加会话及UI调整，loading, drawer
PR Checklist
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
Enhancements
Bug Fixes
Chores