Skip to content

Commit c0183a5

Browse files
committed
feat(site): 添加tiny-robot的初始代码
1 parent cfb7481 commit c0183a5

File tree

4 files changed

+442
-1
lines changed

4 files changed

+442
-1
lines changed

examples/sites/package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@
2727
"@docsearch/css": "^3.8.0",
2828
"@docsearch/js": "^3.8.0",
2929
"@docsearch/react": "npm:@docsearch/css",
30+
"@opentiny/tiny-robot": "0.2.0-alpha.6",
31+
"@opentiny/tiny-robot-kit": "0.2.0-alpha.6",
32+
"@opentiny/tiny-robot-svgs": "0.2.0-alpha.6",
3033
"@opentiny/utils": "workspace:~",
3134
"@opentiny/vue": "workspace:~",
3235
"@opentiny/vue-common": "workspace:~",
@@ -100,4 +103,4 @@
100103
"vite-svg-loader": "^3.6.0",
101104
"vue-tsc": "^1.8.5"
102105
}
103-
}
106+
}

examples/sites/src/main.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import { createHead } from '@vueuse/head'
22
import { createApp } from 'vue'
33
import '@unocss/reset/eric-meyer.css'
44

5+
// tiny-robot 对话框
6+
import '@opentiny/tiny-robot/dist/style.css'
7+
58
// markdown文件内代码高亮
69
import 'prismjs/themes/prism.css'
710
import 'uno.css'

examples/sites/src/views/components-doc/common.vue

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,73 @@
8484
</div>
8585
<div id="footer"></div>
8686
</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>
87154
</template>
88155

89156
<script setup lang="ts">
@@ -101,6 +168,20 @@ import ComponentContributor from './components/contributor.vue'
101168
import ApiDocs from './components/api-docs.vue'
102169
import useTasksFinish from './composition/useTasksFinish'
103170
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+
104185
const props = defineProps({ loadData: {}, appMode: {}, demoKey: {} })
105186
106187
const emit = defineEmits(['single-demo-change', 'load-page'])
@@ -435,6 +516,47 @@ const handleAnchorClick = (e, data) => {
435516
}
436517
437518
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+
})
438560
</script>
439561

440562
<style lang="less" scoped>

0 commit comments

Comments
 (0)