feat(site): 添加tiny-robot的初始代码

Author: shenjunjian

examples/sites/package.json

@@ -27,6 +27,9 @@
     "@docsearch/css": "^3.8.0",
     "@docsearch/js": "^3.8.0",
     "@docsearch/react": "npm:@docsearch/css",
+    "@opentiny/tiny-robot": "0.2.0-alpha.6",
+    "@opentiny/tiny-robot-kit": "0.2.0-alpha.6",
+    "@opentiny/tiny-robot-svgs": "0.2.0-alpha.6",
     "@opentiny/utils": "workspace:~",
     "@opentiny/vue": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
@@ -100,4 +103,4 @@
     "vite-svg-loader": "^3.6.0",
     "vue-tsc": "^1.8.5"
   }
-}
+}

examples/sites/src/main.js

@@ -2,6 +2,9 @@ import { createHead } from '@vueuse/head'
 import { createApp } from 'vue'
 import '@unocss/reset/eric-meyer.css'
 
+// tiny-robot 对话框
+import '@opentiny/tiny-robot/dist/style.css'
+
 // markdown文件内代码高亮
 import 'prismjs/themes/prism.css'
 import 'uno.css'

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

@@ -84,6 +84,73 @@
     </div>
     <div id="footer"></div>
   </div>
+
+  <!-- mcp-robot弹窗 -->
+  <tr-container v-model:show="show" v-model:fullscreen="fullscreen">
+    <template #operations>
+      <tr-icon-button :icon="IconNewSession" size="28" svgSize="20" @click="createConversation()" />
+      <span style="display: inline-flex; line-height: 0; position: relative">
+        <tr-icon-button :icon="IconHistory" size="28" svgSize="20" @click="showHistory = true" />
+        <tr-history
+          v-show="showHistory"
+          class="tr-history-demo"
+          tab-title="历史对话"
+          :selected="currentMessageId"
+          :search-bar="true"
+          :data="historyData"
+          @close="showHistory = false"
+          @item-click="handleHistorySelect"
+        ></tr-history>
+      </span>
+    </template>
+    <div v-if="messages.length === 0">
+      <tr-welcome title="盘古助手" description="您好，我是盘古助手，您专属的华为云专家" :icon="welcomeIcon">
+        <template #footer>
+          <div class="welcome-footer">
+            <span>根据相关法律法规要求，您需要先 <a>登录</a>，若没有帐号，您可前往 <a>注册</a></span>
+          </div>
+        </template>
+      </tr-welcome>
+      <tr-prompts
+        :items="promptItems"
+        :wrap="true"
+        item-class="prompt-item"
+        class="tiny-prompts"
+        @item-click="handlePromptItemClick"
+      ></tr-prompts>
+    </div>
+    <tr-bubble-list v-else :items="messages" :roles="roles" auto-scroll></tr-bubble-list>
+
+    <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>
+      </div>
+    </template>
+  </tr-container>
 </template>
 
 <script setup lang="ts">
@@ -101,6 +168,20 @@ import ComponentContributor from './components/contributor.vue'
 import ApiDocs from './components/api-docs.vue'
 import useTasksFinish from './composition/useTasksFinish'
 
+import {
+  TrBubbleList,
+  TrContainer,
+  TrHistory,
+  TrIconButton,
+  TrPrompts,
+  TrSender,
+  TrSuggestion,
+  TrWelcome
+} from '@opentiny/tiny-robot'
+import { GeneratingStatus } from '@opentiny/tiny-robot-kit'
+import { IconHistory, IconNewSession } from '@opentiny/tiny-robot-svgs'
+import { useTinyRobot } from './useTinyRobot.js'
+
 const props = defineProps({ loadData: {}, appMode: {}, demoKey: {} })
 
 const emit = defineEmits(['single-demo-change', 'load-page'])
@@ -435,6 +516,47 @@ const handleAnchorClick = (e, data) => {
 }
 
 defineExpose({ loadPage })
+
+// tiny-robot相关
+const {
+  client,
+  fullscreen,
+  show,
+  aiAvatar,
+  userAvatar,
+  welcomeIcon,
+  promptItems,
+  templateSuggestions,
+  templateCategories,
+  messageManager,
+  createConversation,
+  messages,
+  messageState,
+  inputMessage,
+  sendMessage,
+  abortRequest,
+  roles,
+  showHistory,
+  historyData,
+  currentMessageId,
+  handlePromptItemClick,
+  handleHistorySelect,
+  suggestionItems,
+  categories,
+  senderRef,
+  currentTemplate,
+  suggestionOpen,
+  handleFillTemplate,
+  clearTemplate,
+  handleSendMessage,
+  handleMessageKeydown
+} = useTinyRobot()
+
+onMounted(() => {
+  // tiny-robot 通过路由参数存在 mcp-robot, 则弹出对话容器
+  const hasRobot = router.currentRoute.value.params['mcp-robot']
+  show.value = !!hasRobot
+})
 </script>
 
 <style lang="less" scoped>