feat(site): connect next-sdk and ai dialog box to realize dynamic switching routing function of large models

examples/sites/.stylelintrc.js

@@ -1,11 +1,11 @@
 module.exports = {
-  extends: 'stylelint-config-standard', //stylelint-config-airbnb
+  extends: 'stylelint-config-standard',
   rules: {
     'string-quotes': 'single',
     'property-no-unknown': true,
     'selector-pseudo-class-no-unknown': true,
     'at-rule-empty-line-before': 'always',
     'block-no-empty': true,
-    'indentation': 4 // http://cui.ulanqab.huawei.com/#/articalDetail?id=b76da810d8ed8
+    'indentation': 4
   }
 }

examples/sites/env/.env

@@ -6,3 +6,6 @@ VITE_APP_MODE='pc'
 
 VITE_APP_BUILD_BASE_URL='/'
 VITE_PLAYGROUND_URL=/playground.html
+
+VITE_LLM_API_KEY=
+VITE_LLM_URL=https://api.deepseek.com/v1

examples/sites/package.json

@@ -27,6 +27,10 @@
     "@docsearch/css": "^3.8.0",
     "@docsearch/js": "^3.8.0",
     "@docsearch/react": "npm:@docsearch/css",
+    "@opentiny/next-sdk": "0.0.1-alpha.5",
+    "@opentiny/tiny-robot": "0.3.0-alpha.3",
+    "@opentiny/tiny-robot-kit": "0.3.0-alpha.3",
+    "@opentiny/tiny-robot-svgs": "0.3.0-alpha.3",
     "@opentiny/tiny-vue-mcp": "^0.0.2",
     "@opentiny/utils": "workspace:~",
     "@opentiny/vue": "workspace:~",
@@ -62,7 +66,8 @@
     "tailwindcss": "^3.2.4",
     "vue": "^3.4.31",
     "vue-i18n": "~9.14.3",
-    "vue-router": "4.1.5"
+    "vue-router": "4.1.5",
+    "zod": "^3.24.4"
   },
   "devDependencies": {
     "@opentiny-internal/unplugin-virtual-template": "workspace:~",

examples/sites/src/App.vue

@@ -7,57 +7,120 @@
         <iframe v-if="modalSHow" width="100%" height="100%" :src="previewUrl" frameborder="0"></iframe>
       </tiny-modal>
     </tiny-config-provider>
+    <div class="right-panel" :class="{ collapsed: !showTinyRobot }">
+      <tiny-robot-chat />
+    </div>
+    <IconAi @click="handleShowTinyRobot" class="style-settings-icon"></IconAi>
+    <tiny-dialog-box
+      v-model:visible="boxVisibility"
+      :close-on-click-modal="false"
+      title="请填写您的LLM信息, 否则无法体验智能化能力"
+      width="30%"
+    >
+      <div>
+        <tiny-form ref="formRef" :model="createData" label-width="120px">
+          <tiny-form-item label="LLM URL" prop="llmUrl" :rules="{ required: true, messages: '必填', trigger: 'blur' }">
+            <tiny-input v-model="createData.llmUrl"></tiny-input>
+          </tiny-form-item>
+          <tiny-form-item
+            label="API Key"
+            prop="llmApiKey"
+            :rules="{ required: true, messages: '必填', trigger: 'blur' }"
+          >
+            <tiny-input v-model="createData.llmApiKey"></tiny-input>
+          </tiny-form-item>
+          <tiny-form-item>
+            <tiny-button @click="submit" type="primary">保存</tiny-button>
+          </tiny-form-item>
+        </tiny-form>
+      </div>
+    </tiny-dialog-box>
   </div>
 </template>
 
-<script>
-import { defineComponent, onMounted, provide, ref } from 'vue'
-import { ConfigProvider, Modal } from '@opentiny/vue'
-import { iconClose } from '@opentiny/vue-icon'
-import { appData } from './tools'
+<script setup lang="ts">
+import { onMounted, provide, ref, reactive } from 'vue'
+import {
+  TinyConfigProvider,
+  TinyModal,
+  TinyDialogBox,
+  TinyForm,
+  TinyFormItem,
+  TinyInput,
+  TinyButton
+} from '@opentiny/vue'
 import useTheme from './tools/useTheme'
+import TinyRobotChat from './components/tiny-robot-chat.vue'
+import { IconAi } from '@opentiny/tiny-robot-svgs'
+import { showTinyRobot } from './composable/utils'
+import { createServer, createInMemoryTransport } from '@opentiny/next-sdk'
+import { createGlobalMcpTool } from './tools/globalMcpTool'
+import { $local, isEnvLLMDefined, isLocalLLMDefined } from './composable/utils'
 
-export default defineComponent({
-  name: 'AppVue',
-  props: [],
-  components: {
-    TinyConfigProvider: ConfigProvider,
-    TinyModal: Modal,
-    TinyIconClose: iconClose()
-  },
-  setup() {
-    const previewUrl = ref(import.meta.env.VITE_PLAYGROUND_URL)
-    const modalSHow = ref(false)
+const boxVisibility = ref(false)
+const formRef = ref()
+const createData = reactive({
+  llmUrl: $local.llmUrl || import.meta.env.VITE_LLM_URL,
+  llmApiKey: $local.llmApiKey || import.meta.env.VITE_LLM_API_KEY
+})
 
-    onMounted(() => {
-      // 加载header
-      const common = new window.TDCommon(['#header'], {
-        allowDarkTheme: true,
-        searchConfig: {
-          show: true
-        },
-        menuCollapse: {
-          useCollapse: true, // 启用1024以下隐藏菜单
-          menuId: '#layoutSider'
-        }
-      })
-      common.renderHeader()
-    })
-    const { designConfig, currentThemeKey } = useTheme()
+const submit = () => {
+  formRef.value.validate().then(() => {
+    $local.llmUrl = createData.llmUrl
+    $local.llmApiKey = createData.llmApiKey
+    boxVisibility.value = false
+    window.location.reload()
+  })
+}
 
-    provide('showPreview', (url) => {
-      previewUrl.value = url
-      modalSHow.value = true
-    })
-    return {
-      appData,
-      designConfig,
-      currentThemeKey,
-      previewUrl,
-      modalSHow
+const previewUrl = ref(import.meta.env.VITE_PLAYGROUND_URL)
+const modalSHow = ref(false)
+const server = createServer(
+  {
+    name: 'comprehensive-config',
+    version: '1.0.0'
+  },
+  {
+    capabilities: {
+      logging: {},
+      resources: { subscribe: true, listChanged: true }
     }
   }
+)
+
+server.use(createInMemoryTransport())
+
+createGlobalMcpTool(server)
+
+onMounted(() => {
+  server.connectTransport()
+  // 加载header
+  const common = new window.TDCommon(['#header'], {
+    allowDarkTheme: true,
+    searchConfig: {
+      show: true
+    },
+    menuCollapse: {
+      useCollapse: true, // 启用1024以下隐藏菜单
+      menuId: '#layoutSider'
+    }
+  })
+  common.renderHeader()
+})
+const { designConfig, currentThemeKey } = useTheme()
+
+provide('showPreview', (url) => {
+  previewUrl.value = url
+  modalSHow.value = true
 })
+
+const handleShowTinyRobot = () => {
+  if (!isEnvLLMDefined && !isLocalLLMDefined) {
+    boxVisibility.value = true
+  } else {
+    showTinyRobot.value = !showTinyRobot.value
+  }
+}
 </script>
 
 <style scoped lang="less">
@@ -73,4 +136,18 @@ export default defineComponent({
     padding: 34px 0 0;
   }
 }
+.right-panel {
+  :deep(.tr-container) {
+    z-index: 9999;
+  }
+}
+
+.style-settings-icon {
+  position: fixed;
+  bottom: 100px;
+  right: 100px;
+  font-size: 24px;
+  z-index: 19999;
+  cursor: pointer;
+}
 </style>

examples/sites/src/components/ReactiveMarkdown.vue

@@ -0,0 +1,12 @@
+<template>
+  <div v-html="markdown"></div>
+</template>
+
+<script setup lang="ts">
+import { BubbleMarkdownMessageRenderer } from '@opentiny/tiny-robot'
+import { computed } from 'vue'
+
+const props = defineProps<{ content: string }>()
+const markdownRenderer = new BubbleMarkdownMessageRenderer()
+const markdown = computed(() => markdownRenderer.md.render(props.content))
+</script>