84
84
</div >
85
85
<div id =" footer" ></div >
86
86
</div >
87
+
88
+ <!-- mcp-robot弹窗 -->
89
+ <tr-container v-model:show =" show" v-model:fullscreen =" fullscreen" >
90
+ <template #operations >
91
+ <tr-icon-button :icon =" IconNewSession" size =" 28" svgSize =" 20" @click =" createConversation()" />
92
+ <span style =" display : inline-flex ; line-height : 0 ; position : relative " >
93
+ <tr-icon-button :icon =" IconHistory" size =" 28" svgSize =" 20" @click =" showHistory = true" />
94
+ <tr-history
95
+ v-show =" showHistory"
96
+ class =" tr-history-demo"
97
+ tab-title =" 历史对话"
98
+ :selected =" currentMessageId"
99
+ :search-bar =" true"
100
+ :data =" historyData"
101
+ @close =" showHistory = false"
102
+ @item-click =" handleHistorySelect"
103
+ ></tr-history >
104
+ </span >
105
+ </template >
106
+ <div v-if =" messages.length === 0" >
107
+ <tr-welcome title =" 盘古助手" description =" 您好,我是盘古助手,您专属的华为云专家" :icon =" welcomeIcon" >
108
+ <template #footer >
109
+ <div class =" welcome-footer" >
110
+ <span >根据相关法律法规要求,您需要先 <a >登录</a >,若没有帐号,您可前往 <a >注册</a ></span >
111
+ </div >
112
+ </template >
113
+ </tr-welcome >
114
+ <tr-prompts
115
+ :items =" promptItems"
116
+ :wrap =" true"
117
+ item-class =" prompt-item"
118
+ class =" tiny-prompts"
119
+ @item-click =" handlePromptItemClick"
120
+ ></tr-prompts >
121
+ </div >
122
+ <tr-bubble-list v-else :items =" messages" :roles =" roles" auto-scroll ></tr-bubble-list >
123
+
124
+ <template #footer >
125
+ <div class =" chat-input" >
126
+ <tr-suggestion
127
+ v-model:open =" suggestionOpen"
128
+ :items =" suggestionItems"
129
+ :categories =" categories"
130
+ @fill-template =" handleFillTemplate"
131
+ :maxVisibleItems =" 5"
132
+ >
133
+ <template #trigger =" { onKeyDown , onTrigger } " >
134
+ <tr-sender
135
+ ref =" senderRef"
136
+ mode =" single"
137
+ v-model =" inputMessage"
138
+ :placeholder =" GeneratingStatus.includes(messageState.status) ? '正在思考中...' : '请输入您的问题'"
139
+ :clearable =" true"
140
+ :loading =" GeneratingStatus.includes(messageState.status)"
141
+ :showWordLimit =" true"
142
+ :maxLength =" 1000"
143
+ :template =" currentTemplate"
144
+ @submit =" handleSendMessage"
145
+ @cancel =" abortRequest"
146
+ @keydown =" handleMessageKeydown($event, onTrigger, onKeyDown)"
147
+ @reset-template =" clearTemplate"
148
+ ></tr-sender >
149
+ </template >
150
+ </tr-suggestion >
151
+ </div >
152
+ </template >
153
+ </tr-container >
87
154
</template >
88
155
89
156
<script setup lang="ts">
@@ -101,6 +168,20 @@ import ComponentContributor from './components/contributor.vue'
101
168
import ApiDocs from ' ./components/api-docs.vue'
102
169
import useTasksFinish from ' ./composition/useTasksFinish'
103
170
171
+ import {
172
+ TrBubbleList ,
173
+ TrContainer ,
174
+ TrHistory ,
175
+ TrIconButton ,
176
+ TrPrompts ,
177
+ TrSender ,
178
+ TrSuggestion ,
179
+ TrWelcome
180
+ } from ' @opentiny/tiny-robot'
181
+ import { GeneratingStatus } from ' @opentiny/tiny-robot-kit'
182
+ import { IconHistory , IconNewSession } from ' @opentiny/tiny-robot-svgs'
183
+ import { useTinyRobot } from ' ./useTinyRobot.js'
184
+
104
185
const props = defineProps ({ loadData: {}, appMode: {}, demoKey: {} })
105
186
106
187
const emit = defineEmits ([' single-demo-change' , ' load-page' ])
@@ -435,6 +516,47 @@ const handleAnchorClick = (e, data) => {
435
516
}
436
517
437
518
defineExpose ({ loadPage })
519
+
520
+ // tiny-robot相关
521
+ const {
522
+ client,
523
+ fullscreen,
524
+ show,
525
+ aiAvatar,
526
+ userAvatar,
527
+ welcomeIcon,
528
+ promptItems,
529
+ templateSuggestions,
530
+ templateCategories,
531
+ messageManager,
532
+ createConversation,
533
+ messages,
534
+ messageState,
535
+ inputMessage,
536
+ sendMessage,
537
+ abortRequest,
538
+ roles,
539
+ showHistory,
540
+ historyData,
541
+ currentMessageId,
542
+ handlePromptItemClick,
543
+ handleHistorySelect,
544
+ suggestionItems,
545
+ categories,
546
+ senderRef,
547
+ currentTemplate,
548
+ suggestionOpen,
549
+ handleFillTemplate,
550
+ clearTemplate,
551
+ handleSendMessage,
552
+ handleMessageKeydown
553
+ } = useTinyRobot ()
554
+
555
+ onMounted (() => {
556
+ // tiny-robot 通过路由参数存在 mcp-robot, 则弹出对话容器
557
+ const hasRobot = router .currentRoute .value .params [' mcp-robot' ]
558
+ show .value = !! hasRobot
559
+ })
438
560
</script >
439
561
440
562
<style lang="less" scoped>
0 commit comments