Skip to content

Commit 12d2364

Browse files
zzcrzzcr
authored
feat(site): connect next-sdk and ai dialog box to realize dynamic switching routing function of large models (#3619)
* feat: 对接next-sdk和ai对话框 * feat: 实现大模型动态切换路由功能 * feat: 添加LLM信息填写对话框及相关逻辑，更新依赖版本
1 parent eaeb932 commit 12d2364

File tree

19 files changed

+703
-67
lines changed

19 files changed

+703
-67
lines changed

‎examples/sites/.stylelintrc.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
module.exports = {
2-
extends: 'stylelint-config-standard', //stylelint-config-airbnb
2+
extends: 'stylelint-config-standard',
33
rules: {
44
'string-quotes': 'single',
55
'property-no-unknown': true,
66
'selector-pseudo-class-no-unknown': true,
77
'at-rule-empty-line-before': 'always',
88
'block-no-empty': true,
9-
'indentation': 4 // http://cui.ulanqab.huawei.com/#/articalDetail?id=b76da810d8ed8
9+
'indentation': 4
1010
}
1111
}

‎examples/sites/env/.env‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,6 @@ VITE_APP_MODE='pc'
66

77
VITE_APP_BUILD_BASE_URL='/'
88
VITE_PLAYGROUND_URL=/playground.html
9+
10+
VITE_LLM_API_KEY=
11+
VITE_LLM_URL=https://api.deepseek.com/v1

‎examples/sites/package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@
2727
"@docsearch/css": "^3.8.0",
2828
"@docsearch/js": "^3.8.0",
2929
"@docsearch/react": "npm:@docsearch/css",
30+
"@opentiny/next-sdk": "0.0.1-alpha.5",
31+
"@opentiny/tiny-robot": "0.3.0-alpha.3",
32+
"@opentiny/tiny-robot-kit": "0.3.0-alpha.3",
33+
"@opentiny/tiny-robot-svgs": "0.3.0-alpha.3",
3034
"@opentiny/tiny-vue-mcp": "^0.0.2",
3135
"@opentiny/utils": "workspace:~",
3236
"@opentiny/vue": "workspace:~",
@@ -62,7 +66,8 @@
6266
"tailwindcss": "^3.2.4",
6367
"vue": "^3.4.31",
6468
"vue-i18n": "~9.14.3",
65-
"vue-router": "4.1.5"
69+
"vue-router": "4.1.5",
70+
"zod": "^3.24.4"
6671
},
6772
"devDependencies": {
6873
"@opentiny-internal/unplugin-virtual-template": "workspace:~",

‎examples/sites/src/App.vue‎

Lines changed: 118 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -7,57 +7,120 @@
77
<iframe v-if="modalSHow" width="100%" height="100%" :src="previewUrl" frameborder="0"></iframe>
88
</tiny-modal>
99
</tiny-config-provider>
10+
<div class="right-panel" :class="{ collapsed: !showTinyRobot }">
11+
<tiny-robot-chat />
12+
</div>
13+
<IconAi @click="handleShowTinyRobot" class="style-settings-icon"></IconAi>
14+
<tiny-dialog-box
15+
v-model:visible="boxVisibility"
16+
:close-on-click-modal="false"
17+
title="请填写您的LLM信息, 否则无法体验智能化能力"
18+
width="30%"
19+
>
20+
<div>
21+
<tiny-form ref="formRef" :model="createData" label-width="120px">
22+
<tiny-form-item label="LLM URL" prop="llmUrl" :rules="{ required: true, messages: '必填', trigger: 'blur' }">
23+
<tiny-input v-model="createData.llmUrl"></tiny-input>
24+
</tiny-form-item>
25+
<tiny-form-item
26+
label="API Key"
27+
prop="llmApiKey"
28+
:rules="{ required: true, messages: '必填', trigger: 'blur' }"
29+
>
30+
<tiny-input v-model="createData.llmApiKey"></tiny-input>
31+
</tiny-form-item>
32+
<tiny-form-item>
33+
<tiny-button @click="submit" type="primary">保存</tiny-button>
34+
</tiny-form-item>
35+
</tiny-form>
36+
</div>
37+
</tiny-dialog-box>
1038
</div>
1139
</template>
1240

13-
<script>
14-
import { defineComponent, onMounted, provide, ref } from 'vue'
15-
import { ConfigProvider, Modal } from '@opentiny/vue'
16-
import { iconClose } from '@opentiny/vue-icon'
17-
import { appData } from './tools'
41+
<script setup lang="ts">
42+
import { onMounted, provide, ref, reactive } from 'vue'
43+
import {
44+
TinyConfigProvider,
45+
TinyModal,
46+
TinyDialogBox,
47+
TinyForm,
48+
TinyFormItem,
49+
TinyInput,
50+
TinyButton
51+
} from '@opentiny/vue'
1852
import useTheme from './tools/useTheme'
53+
import TinyRobotChat from './components/tiny-robot-chat.vue'
54+
import { IconAi } from '@opentiny/tiny-robot-svgs'
55+
import { showTinyRobot } from './composable/utils'
56+
import { createServer, createInMemoryTransport } from '@opentiny/next-sdk'
57+
import { createGlobalMcpTool } from './tools/globalMcpTool'
58+
import { $local, isEnvLLMDefined, isLocalLLMDefined } from './composable/utils'
1959
20-
export default defineComponent({
21-
name: 'AppVue',
22-
props: [],
23-
components: {
24-
TinyConfigProvider: ConfigProvider,
25-
TinyModal: Modal,
26-
TinyIconClose: iconClose()
27-
},
28-
setup() {
29-
const previewUrl = ref(import.meta.env.VITE_PLAYGROUND_URL)
30-
const modalSHow = ref(false)
60+
const boxVisibility = ref(false)
61+
const formRef = ref()
62+
const createData = reactive({
63+
llmUrl: $local.llmUrl || import.meta.env.VITE_LLM_URL,
64+
llmApiKey: $local.llmApiKey || import.meta.env.VITE_LLM_API_KEY
65+
})
3166
32-
onMounted(() => {
33-
// 加载header
34-
const common = new window.TDCommon(['#header'], {
35-
allowDarkTheme: true,
36-
searchConfig: {
37-
show: true
38-
},
39-
menuCollapse: {
40-
useCollapse: true, // 启用1024以下隐藏菜单
41-
menuId: '#layoutSider'
42-
}
43-
})
44-
common.renderHeader()
45-
})
46-
const { designConfig, currentThemeKey } = useTheme()
67+
const submit = () => {
68+
formRef.value.validate().then(() => {
69+
$local.llmUrl = createData.llmUrl
70+
$local.llmApiKey = createData.llmApiKey
71+
boxVisibility.value = false
72+
window.location.reload()
73+
})
74+
}
4775
48-
provide('showPreview', (url) => {
49-
previewUrl.value = url
50-
modalSHow.value = true
51-
})
52-
return {
53-
appData,
54-
designConfig,
55-
currentThemeKey,
56-
previewUrl,
57-
modalSHow
76+
const previewUrl = ref(import.meta.env.VITE_PLAYGROUND_URL)
77+
const modalSHow = ref(false)
78+
const server = createServer(
79+
{
80+
name: 'comprehensive-config',
81+
version: '1.0.0'
82+
},
83+
{
84+
capabilities: {
85+
logging: {},
86+
resources: { subscribe: true, listChanged: true }
5887
}
5988
}
89+
)
90+
91+
server.use(createInMemoryTransport())
92+
93+
createGlobalMcpTool(server)
94+
95+
onMounted(() => {
96+
server.connectTransport()
97+
// 加载header
98+
const common = new window.TDCommon(['#header'], {
99+
allowDarkTheme: true,
100+
searchConfig: {
101+
show: true
102+
},
103+
menuCollapse: {
104+
useCollapse: true, // 启用1024以下隐藏菜单
105+
menuId: '#layoutSider'
106+
}
107+
})
108+
common.renderHeader()
109+
})
110+
const { designConfig, currentThemeKey } = useTheme()
111+
112+
provide('showPreview', (url) => {
113+
previewUrl.value = url
114+
modalSHow.value = true
60115
})
116+
117+
const handleShowTinyRobot = () => {
118+
if (!isEnvLLMDefined && !isLocalLLMDefined) {
119+
boxVisibility.value = true
120+
} else {
121+
showTinyRobot.value = !showTinyRobot.value
122+
}
123+
}
61124
</script>
62125

63126
<style scoped lang="less">
@@ -73,4 +136,18 @@ export default defineComponent({
73136
padding: 34px 0 0;
74137
}
75138
}
139+
.right-panel {
140+
:deep(.tr-container) {
141+
z-index: 9999;
142+
}
143+
}
144+
145+
.style-settings-icon {
146+
position: fixed;
147+
bottom: 100px;
148+
right: 100px;
149+
font-size: 24px;
150+
z-index: 19999;
151+
cursor: pointer;
152+
}
76153
</style>

‎examples/sites/src/components/ReactiveMarkdown.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<div v-html="markdown"></div>
3+
</template>
4+
5+
<script setup lang="ts">
6+
import { BubbleMarkdownMessageRenderer } from '@opentiny/tiny-robot'
7+
import { computed } from 'vue'
8+
9+
const props = defineProps<{ content: string }>()
10+
const markdownRenderer = new BubbleMarkdownMessageRenderer()
11+
const markdown = computed(() => markdownRenderer.md.render(props.content))
12+
</script>

0 commit comments

Comments
 (0)