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

examples/sites/package.json

@@ -27,6 +27,10 @@
     "@docsearch/css": "^3.8.0",
     "@docsearch/js": "^3.8.0",
     "@docsearch/react": "npm:@docsearch/css",
+    "@opentiny/tiny-robot": "0.2.0-alpha.7",
+    "@opentiny/tiny-robot-kit": "0.2.0-alpha.7",
+    "@opentiny/tiny-robot-svgs": "0.2.0-alpha.7",
+    "@opentiny/tiny-schema-renderer": "1.0.0-beta.5",
     "@opentiny/utils": "workspace:~",
     "@opentiny/vue": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
@@ -100,4 +104,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,7 @@
     </div>
     <div id="footer"></div>
   </div>
+  <robotChat v-if="show"></robotChat>
 </template>
 
 <script setup lang="ts">
@@ -101,6 +108,8 @@ import ComponentContributor from './components/contributor.vue'
 import ApiDocs from './components/api-docs.vue'
 import useTasksFinish from './composition/useTasksFinish'
 
+import robotChat from './tiny-robot-chat.vue'
+
 const props = defineProps({ loadData: {}, appMode: {}, demoKey: {} })
 
 const emit = defineEmits(['single-demo-change', 'load-page'])
@@ -435,6 +444,13 @@ const handleAnchorClick = (e, data) => {
 }
 
 defineExpose({ loadPage })
+
+const show = ref(false)
+onMounted(() => {
+  // tiny-robot 通过路由参数存在 mcp-robot, 则弹出对话容器
+  const hasRobot = router.currentRoute.value.query['mcp-robot'] !== undefined
+  show.value = !!hasRobot
+})
 </script>
 
 <style lang="less" scoped>
@@ -444,6 +460,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 +574,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>

examples/sites/src/views/components-doc/composition/DifyModelProvider.ts

@@ -0,0 +1,64 @@
+import type { ChatCompletionRequest } from '@opentiny/tiny-robot-kit'
+import type { AIModelConfig } from '@opentiny/tiny-robot-kit'
+import type { ChatCompletionResponse } from '@opentiny/tiny-robot-kit'
+import type { StreamHandler } from '@opentiny/tiny-robot-kit'
+import { BaseModelProvider, handleSSEStream, handleRequestError } from '@opentiny/tiny-robot-kit'
+
+/**
+ * 对接AIClient的自定义 Dify 大模型服务
+ *
+ * const client = new AIClient({
+ *  provider: 'custom',
+ *  providerImplementation: new CustomModelProvider( config )
+ * });
+ */
+export class DifyModelProvider extends BaseModelProvider {
+  constructor(config: AIModelConfig) {
+    super(config)
+  }
+  /** 同步请示不需要实现 */
+  chat(request: ChatCompletionRequest): Promise<ChatCompletionResponse> {
+    throw new Error('Method not implemented.')
+  }
+
+  /** 异步流式请求 */
+  async chatStream(request: ChatCompletionRequest, handler: StreamHandler): Promise<void> {
+    const { signal } = request
+    this.validateRequest(request)
+
+    try {
+      // 验证请求的messages属性，必须是数组，且每个消息必须有role\content属性
+      // const { onData, onDone, onError } = handler
+      const lastMessage = request.messages[request.messages.length - 1].content
+
+      // 模拟异步流式响应
+      const response = await fetch(`${this.config.apiUrl}/chat-messages`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${this.config.apiKey}`,
+          'Accept': 'text/event-stream'
+        },
+        body: JSON.stringify({
+          query: lastMessage,
+          user: 'user',
+          response_mode: 'stream'
+          // conversation_id:''
+        })
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      await handleSSEStream(response, handler, signal)
+    } catch (error) {
+      if (signal && signal.aborted) {
+        console.warn('Request was aborted:', error)
+      } else {
+        console.error('Error in chatStream:', error)
+        handler.onError(handleRequestError(error))
+      }
+    }
+  }
+}