Skip to content

Commit 55784b2

Browse files
aiqlcomaiqlcom
committed
Capable of loading layout and DeepSeek-R1
1 parent ac61f89 commit 55784b2

File tree

2 files changed

+182
-8
lines changed

2 files changed

+182
-8
lines changed

‎example/config/deepseek.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
"defaultChoiceStore": {
1010
"model": [
1111
"deepseek-chat",
12-
"deepseek-coder"
12+
"deepseek-coder",
13+
"deepseek-reasoner"
1314
]
1415
}
1516
}

‎index.html‎

Lines changed: 180 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,40 @@
4040
<meta name="description"
4141
content="AIQL provides a suite of tools designed to streamline the development and deployment of AI applications in a cloud-native environment.">
4242
<title>Chatbot</title>
43+
<style>
44+
::-webkit-scrollbar {
45+
display: none;
46+
}
47+
48+
.loading {
49+
all: initial;
50+
position: fixed;
51+
top: calc(50% - 35px);
52+
left: calc(50% - 35px);
53+
display: flex;
54+
width: 70px;
55+
height: 70px;
56+
border: 4px solid #1867C0;
57+
border-top-color: rgba(0, 0, 0, 0.2);
58+
border-right-color: rgba(0, 0, 0, 0.2);
59+
border-bottom-color: rgba(0, 0, 0, 0.2);
60+
border-radius: 100%;
61+
overflow: hidden;
62+
63+
animation: circle infinite 1s linear;
64+
}
65+
66+
@keyframes circle {
67+
0% {
68+
transform: rotate(0);
69+
}
70+
71+
100% {
72+
transform: rotate(360deg);
73+
}
74+
}
75+
</style>
76+
<div id="loading" class="loading"></div>
4377

4478
<!-- MDI -->
4579
<!-- https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/MaterialDesign-Webfont/7.4.47/css/materialdesignicons.min.css -->
@@ -74,6 +108,13 @@
74108
<script src="https://cdn.jsdelivr.org/npm/sortablejs/Sortable.min.js"></script>
75109
<script src="https://cdn.jsdelivr.org/npm/vue3-draggable-next/dist/vuedraggable.umd.min.js"></script>
76110

111+
<script>
112+
window.onload = function () {
113+
document.getElementById('lottie').style.display = 'block';
114+
document.getElementById('loading').style.display = 'none';
115+
};
116+
</script>
117+
77118
<style scoped lang="scss">
78119
[v-cloak] {
79120
display: none;
@@ -97,6 +138,7 @@
97138
}
98139

99140
#lottie {
141+
display: none;
100142
height: calc(99vh - 50px);
101143
max-height: calc(100% - 100px);
102144
}
@@ -255,6 +297,7 @@
255297
}
256298

257299
::-webkit-scrollbar {
300+
display: block;
258301
block-size: 5px;
259302
inline-size: 5px;
260303
}
@@ -324,6 +367,9 @@
324367
<v-btn @click="settingStore.agentDialog = true" variant="elevated" icon="mdi-account-supervisor"
325368
v-tooltip:end="$t('$vuetify.dataIterator.a.title')">
326369
</v-btn>
370+
<v-btn v-if="mcpStore.getServers" @click="resourceStore.resourceDialog = true"
371+
variant="elevated" icon="mdi-database" v-tooltip:end="$t('$vuetify.dataIterator.r.title')">
372+
</v-btn>
327373
<v-badge key="1" :content="historyStore.conversation.length" color="info" max="99"
328374
location='top left'>
329375
<v-btn variant="elevated" icon="mdi-list-box" @click="settingStore.configHistory = true"
@@ -608,7 +654,7 @@
608654
</v-dialog>
609655
<v-dialog v-model="promptStore.promptDialog" class="dialog-card">
610656
<v-card prepend-icon="mdi-account-cog" :title="$t('$vuetify.dataIterator.p.title')">
611-
<v-data-iterator :items="promptStore.promptList" :search="promptStore.search"
657+
<v-data-iterator :items="promptStore.promptList" :search="promptStore.search" items-per-page="-1"
612658
@update:options="promptStore.loadPrompts" :loading="promptStore.loading">
613659
<template v-slot:header>
614660
<v-toolbar class="px-2">
@@ -661,6 +707,57 @@
661707
</v-card-text>
662708
</v-card>
663709
</v-dialog>
710+
<v-dialog v-model="resourceStore.resourceDialog" class="dialog-card" scrollable>
711+
<v-card prepend-icon="mdi-database" :title="$t('$vuetify.dataIterator.r.title')">
712+
<v-tabs :items="mcpStore.listServerResources()" v-model="resourceStore.tab" color="primary">
713+
<template v-slot:tab="{ item }">
714+
<v-tab :text="item.name" :value="item.name" class="text-none"></v-tab>
715+
</template>
716+
</v-tabs>
717+
<v-divider></v-divider>
718+
<v-card-text>
719+
<v-tabs-window v-model="resourceStore.tab">
720+
<v-tabs-window-item v-for="item in mcpStore.listServerResources()" :value="item.name">
721+
<v-data-iterator :items="resourceStore.resourceTemplatesList" items-per-page="-1"
722+
@update:options="resourceStore.loadTemplates(item.templatesList)"
723+
:loading="resourceStore.loadingTemplates">
724+
<template v-slot:default="{ items }">
725+
<v-container>
726+
<v-row dense>
727+
<v-col v-for="item in items"
728+
:key="item.raw.uriTemplate +':'+ item.raw.name" cols="auto"
729+
class="flex-fill">
730+
<v-card border flat>
731+
<v-card-item :subtitle="item.raw.uriTemplate" class="mb-2"
732+
:title="item.raw.name">
733+
</v-card-item>
734+
<v-card-text>{{ item.raw.description }}</v-card-text>
735+
</v-card>
736+
</v-col>
737+
</v-row>
738+
</v-container>
739+
</template>
740+
</v-data-iterator>
741+
<v-data-iterator :items="resourceStore.resourceList" items-per-page="-1"
742+
@update:options="resourceStore.loadResources(item.list)"
743+
:loading="resourceStore.loadingResources">
744+
<template v-slot:default="{ items }">
745+
<v-container>
746+
<v-expansion-panels>
747+
<v-expansion-panel v-for="item in items"
748+
:key="item.raw.uri +':'+ item.raw.name"
749+
:text="JSON.stringify(item.raw)"
750+
:title="item.raw.name +' - '+ item.raw.uri">
751+
</v-expansion-panel>
752+
</v-expansion-panels>
753+
</v-container>
754+
</template>
755+
</v-data-iterator>
756+
</v-tabs-window-item>
757+
</v-tabs-window>
758+
</v-card-text>
759+
</v-card>
760+
</v-dialog>
664761
<v-dialog v-model="settingStore.agentDialog" class="dialog-card">
665762
<v-card prepend-icon="mdi-history" :title="$t('$vuetify.dataIterator.a.title')"
666763
style="overflow-x: auto">
@@ -859,9 +956,13 @@ <h5 class="font-weight-bold mb-4">MCP</h5>
859956
{{item.tool_call_id}}
860957
</v-card-subtitle>
861958
</v-card-item>
862-
<v-card-text v-for="content in item.content">
959+
<v-card-text v-if="Array.isArray(item.content)"
960+
v-for="content in item.content">
863961
{{content.text}}
864962
</v-card-text>
963+
<v-card-text v-else>
964+
{{item.content}}
965+
</v-card-text>
865966
</v-card>
866967
<v-card class="mt-1" variant="flat" v-if="item.role == 'assistant'">
867968
<v-card-text v-if="item.content" class="font-weight-bold">
@@ -953,10 +1054,25 @@ <h5 class="font-weight-bold mb-4">MCP</h5>
9531054
console.log('MCP:', window.mcpServers)
9541055
return window.mcpServers
9551056
},
956-
9571057
},
9581058

9591059
actions: {
1060+
listServerResources: function () {
1061+
const mcpServers = this.getServers
1062+
const mcpKeys = Object.keys(mcpServers)
1063+
const mcpResources = []
1064+
for (const key of mcpKeys) {
1065+
const resources = mcpServers[key]?.resources
1066+
if (resources) {
1067+
mcpResources.push({
1068+
name: key,
1069+
list: resources.list,
1070+
templatesList: resources['templates/list']
1071+
})
1072+
}
1073+
}
1074+
return mcpResources
1075+
},
9601076
loadTools: function () {
9611077
this.loading = true
9621078
try {
@@ -988,7 +1104,8 @@ <h5 class="font-weight-bold mb-4">MCP</h5>
9881104
const toolsListFunction = mcpServers[key]?.tools?.list;
9891105
if (typeof toolsListFunction === 'function') {
9901106
const tools = await toolsListFunction();
991-
console.log(await mcpServers[key]?.prompts?.list())
1107+
// console.log(await mcpServers[key]?.prompts?.list())
1108+
// console.log(await mcpServers[key]?.resources['templates/list']())
9921109
// console.log(await mcpServers[key]?.resources?.list())
9931110
if (tools && Array.isArray(tools.tools)) {
9941111
for (const tool of tools.tools) {
@@ -1244,6 +1361,52 @@ <h5 class="font-weight-bold mb-4">MCP</h5>
12441361
},
12451362
});
12461363

1364+
const useResourceStore = defineStore({
1365+
id: "resourceStore",
1366+
state: () => ({
1367+
resourceDialog: false,
1368+
tab: null,
1369+
1370+
resourceList: [],
1371+
resourceTemplatesList: [],
1372+
1373+
loadingTemplates: false,
1374+
loadingResources: false,
1375+
}),
1376+
actions: {
1377+
loadTemplates: function (resource_function) {
1378+
this.loadingTemplates = true
1379+
try {
1380+
resource_function().then((result) => {
1381+
console.log(result)
1382+
this.resourceTemplatesList = result.resourceTemplates
1383+
return
1384+
})
1385+
} catch (error) {
1386+
console.error('Failed to load resource templates:', error);
1387+
} finally {
1388+
this.loadingTemplates = false;
1389+
}
1390+
1391+
},
1392+
loadResources: function (resource_function) {
1393+
this.loadingResources = true
1394+
try {
1395+
resource_function().then((result) => {
1396+
console.log(result)
1397+
this.resourceList = result.resources
1398+
return
1399+
})
1400+
} catch (error) {
1401+
console.error('Failed to load resources:', error);
1402+
} finally {
1403+
this.loadingResources = false;
1404+
}
1405+
1406+
},
1407+
},
1408+
});
1409+
12471410
const usePromptStore = defineStore({
12481411
id: "promptStore",
12491412
state: () => ({
@@ -1280,7 +1443,9 @@ <h5 class="font-weight-bold mb-4">MCP</h5>
12801443
const allPrompts = []
12811444
for (const key of mcpKeys) {
12821445
const obj = await mcpServers[key]?.prompts?.list();
1283-
obj.prompts.forEach(prompt => allPrompts.push({ title: key, ...prompt }));
1446+
if (obj) {
1447+
obj.prompts.forEach(prompt => allPrompts.push({ title: key, ...prompt }));
1448+
}
12841449
}
12851450

12861451
return allPrompts;
@@ -1490,6 +1655,7 @@ <h5 class="font-weight-bold mb-4">MCP</h5>
14901655
const agentStore = useAgentStore();
14911656
const settingStore = useSettingStore();
14921657
const promptStore = usePromptStore();
1658+
const resourceStore = useResourceStore();
14931659

14941660
const { locale } = useI18n({ useScope: 'global' });
14951661

@@ -1673,6 +1839,7 @@ <h5 class="font-weight-bold mb-4">MCP</h5>
16731839
},
16741840
contentConvert: function (content, toolCallId) {
16751841
const msg = content.map(item => mcpStore.convertItem(item));
1842+
console.log(msg)
16761843
if (msg.find(item => item.type === 'image_url')) {
16771844
return [{
16781845
role: "tool",
@@ -1686,7 +1853,7 @@ <h5 class="font-weight-bold mb-4">MCP</h5>
16861853
} else {
16871854
return [{
16881855
role: "tool",
1689-
content: msg,
1856+
content: msg.map(item => item.text).join('\n'), // If the LLM can support array in tool, use msg directly
16901857
tool_call_id: toolCallId
16911858
}]
16921859
}
@@ -2246,6 +2413,7 @@ <h5 class="font-weight-bold mb-4">MCP</h5>
22462413

22472414
settingStore,
22482415
promptStore,
2416+
resourceStore,
22492417
agentStore,
22502418
snackbarStore,
22512419
mcpStore,
@@ -2279,6 +2447,7 @@ <h5 class="font-weight-bold mb-4">MCP</h5>
22792447
},
22802448
l: { title: 'Language' },
22812449
a: { title: 'Agent' },
2450+
r: { title: 'Resources' },
22822451
g: {
22832452
new: 'New Conversation',
22842453
reg: 'Regeneration'
@@ -2319,6 +2488,7 @@ <h5 class="font-weight-bold mb-4">MCP</h5>
23192488
title: 'Layout della Query AI',
23202489
q: { title: 'Cronologia delle Query' },
23212490
l: { title: 'Lingua' },
2491+
r: { title: 'Risorse' },
23222492
i: {
23232493
title: 'Configurazione dell\'interfaccia',
23242494
apikey: 'Chiave API',
@@ -2354,6 +2524,7 @@ <h5 class="font-weight-bold mb-4">MCP</h5>
23542524
title: 'AI お問い合わせ',
23552525
q: { title: '歴史' },
23562526
l: { title: '言語設定' },
2527+
r: { title: '資源' },
23572528
i: {
23582529
title: 'インターフェイス構成',
23592530
apikey: 'API キー',
@@ -2380,6 +2551,7 @@ <h5 class="font-weight-bold mb-4">MCP</h5>
23802551
title: 'Layout för AI-frågor',
23812552
q: { title: 'Frågehistorik' },
23822553
l: { title: 'Språkinställning' },
2554+
r: { title: 'Resurser' },
23832555
i: {
23842556
title: 'Konfiguration av gränssnitt',
23852557
apikey: 'API Nyckel',
@@ -2413,6 +2585,7 @@ <h5 class="font-weight-bold mb-4">MCP</h5>
24132585
sheet: 'MCP提示词表单'
24142586
},
24152587
a: { title: '智能体' },
2588+
r: { title: '资源' },
24162589
g: {
24172590
new: '新对话',
24182591
reg: '重新生成'
@@ -2473,4 +2646,4 @@ <h5 class="font-weight-bold mb-4">MCP</h5>
24732646
</script>
24742647
</body>
24752648

2476-
</html>
2649+
</html>

0 commit comments

Comments
 (0)