1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| <template>
| <div class="w-44 bg-white rounded-lg mt-2 py-2 px-2">
| <div
| v-for="item in sidebarList"
| class="cursor-grab rounded-md bg-white py-3 px-2 hover:bg-gray-100"
| :draggable="true"
| @dragstart="handleOnDragStart($event, item.type)"
| >
| <div class="flex items-center justify-between">
| <h3 class="flex items-center gap-x-2">
| <img :src="item.img" class="h-4 w-4" alt="LLM icon" />
| {{ item.title }}
| </h3>
| <!-- <plus-icon class="text-primary" /> -->
| </div>
| </div>
| </div>
| </template>
|
| <script setup lang="ts">
| import llmImg from '/@/components/vue-flow/ui/assets/images/icon_LLM.png';
| import startImg from '/@/components/vue-flow/ui/assets/images/icon_Start.png';
| import endImg from '/@/components/vue-flow/ui/assets/images/icon_End.png';
| import { NodeType, nodeTypeMap } from '/@/components/vue-flow/vueFlowEnum';
|
| const emit = defineEmits(['dragstart']);
|
| const handleOnDragStart = (e, type: string) => {
| emit('dragstart', e, type);
| };
|
| const sidebarList = [
| {
| type: NodeType.Start,
| title: nodeTypeMap[NodeType.Start],
| img: startImg,
| },
| {
| type: NodeType.End,
| title: nodeTypeMap[NodeType.End],
| img: endImg,
| },
| {
| type: NodeType.Condition,
| title: nodeTypeMap[NodeType.Condition],
| img: llmImg,
| },
| {
| type: NodeType.LLM,
| title: nodeTypeMap[NodeType.LLM],
| img: llmImg,
| },
| {
| type: NodeType.Output,
| title: nodeTypeMap[NodeType.Output],
| img: llmImg,
| },
| {
| type: NodeType.Agent,
| title: nodeTypeMap[NodeType.Agent],
| img: llmImg,
| },
|
| ];
| </script>
| <style scoped lang="scss"></style>
|
|
