feat(site): add the tiny-robot drawer to the official website.

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

@@ -9,7 +9,13 @@
       <slot name="header-right" />
     </template>
   </ComponentHeader>
-  <div class="docs-content" id="doc-layout-scroller" ref="scrollRef" @scroll="onDocLayoutScroll">
+  <div
+    class="docs-content"
+    :class="{ 'docs-on-robot-show': show }"
+    id="doc-layout-scroller"
+    ref="scrollRef"
+    @scroll="onDocLayoutScroll"
+  >
     <div class="ti-rel cmp-container">
       <div class="flex-horizontal docs-content-main">
         <div class="docs-tabs-wrap">
@@ -84,6 +90,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 +174,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 +522,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.query['mcp-robot'] !== undefined
+  show.value = !!hasRobot
+})
 </script>
 
 <style lang="less" scoped>
@@ -444,6 +572,10 @@ defineExpose({ loadPage })
   margin-top: 16px;
   transition: all ease-in-out 0.3s;
 
+  &.docs-on-robot-show {
+    margin-right: 480px;
+  }
+
   .docs-tabs-wrap {
     width: 100%;
     flex: 1;
@@ -554,3 +686,58 @@ defineExpose({ loadPage })
   }
 }
 </style>
+
+// mcp-robot的样式
+<style scoped lang="less">
+.chat-input {
+  margin-top: 8px;
+  padding: 10px 15px;
+}
+
+.tiny-container {
+  top: 64px;
+
+  container-type: inline-size;
+
+  :deep(.tr-welcome__title-wrapper) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.welcome-footer {
+  margin-top: 12px;
+  color: rgb(128, 128, 128);
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.tiny-prompts {
+  padding: 16px 24px;
+
+  :deep(.prompt-item) {
+    width: 100%;
+    box-sizing: border-box;
+
+    @container (width >=64rem) {
+      width: calc(50% - 8px);
+    }
+
+    .tr-prompt__content-label {
+      font-size: 14px;
+      line-height: 24px;
+    }
+  }
+}
+
+.tr-history-demo {
+  position: absolute;
+  right: 100%;
+  top: 100%;
+  z-index: 100;
+  width: 300px;
+  height: 600px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
+}
+</style>