├── .eslintrc.js
├── .gitignore
├── .prettierrc.cjs
├── .vscode
    └── extensions.json
├── README.md
├── components.json
├── cover.png
├── index.html
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── public
    └── vite.svg
├── src
    ├── App.vue
    ├── assets
    │   └── images
    │   │   ├── icon_Api.png
    │   │   ├── icon_Code.png
    │   │   ├── icon_Condition.png
    │   │   ├── icon_End.png
    │   │   ├── icon_Google.jpeg
    │   │   ├── icon_Knowledge.png
    │   │   ├── icon_LLM.png
    │   │   ├── icon_Start.png
    │   │   └── icon_Variable.png
    ├── components
    │   ├── main-canvas.vue
    │   ├── monaco-editor.vue
    │   ├── ui
    │   │   ├── button
    │   │   │   ├── Button.vue
    │   │   │   └── index.ts
    │   │   ├── collapsible
    │   │   │   ├── Collapsible.vue
    │   │   │   ├── CollapsibleContent.vue
    │   │   │   ├── CollapsibleTrigger.vue
    │   │   │   └── index.ts
    │   │   ├── command
    │   │   │   ├── Command.vue
    │   │   │   ├── CommandDialog.vue
    │   │   │   ├── CommandEmpty.vue
    │   │   │   ├── CommandGroup.vue
    │   │   │   ├── CommandInput.vue
    │   │   │   ├── CommandItem.vue
    │   │   │   ├── CommandList.vue
    │   │   │   ├── CommandSeparator.vue
    │   │   │   ├── CommandShortcut.vue
    │   │   │   └── index.ts
    │   │   ├── dialog
    │   │   │   ├── Dialog.vue
    │   │   │   ├── DialogClose.vue
    │   │   │   ├── DialogContent.vue
    │   │   │   ├── DialogDescription.vue
    │   │   │   ├── DialogFooter.vue
    │   │   │   ├── DialogHeader.vue
    │   │   │   ├── DialogTitle.vue
    │   │   │   ├── DialogTrigger.vue
    │   │   │   └── index.ts
    │   │   ├── form
    │   │   │   ├── FormControl.vue
    │   │   │   ├── FormDescription.vue
    │   │   │   ├── FormItem.vue
    │   │   │   ├── FormLabel.vue
    │   │   │   ├── FormMessage.vue
    │   │   │   ├── index.ts
    │   │   │   └── useFormField.ts
    │   │   ├── input
    │   │   │   ├── Input.vue
    │   │   │   └── index.ts
    │   │   ├── label
    │   │   │   ├── Label.vue
    │   │   │   └── index.ts
    │   │   ├── menubar
    │   │   │   ├── Menubar.vue
    │   │   │   ├── MenubarCheckboxItem.vue
    │   │   │   ├── MenubarContent.vue
    │   │   │   ├── MenubarGroup.vue
    │   │   │   ├── MenubarItem.vue
    │   │   │   ├── MenubarLabel.vue
    │   │   │   ├── MenubarMenu.vue
    │   │   │   ├── MenubarRadioGroup.vue
    │   │   │   ├── MenubarRadioItem.vue
    │   │   │   ├── MenubarSeparator.vue
    │   │   │   ├── MenubarShortcut.vue
    │   │   │   ├── MenubarSub.vue
    │   │   │   ├── MenubarSubContent.vue
    │   │   │   ├── MenubarSubTrigger.vue
    │   │   │   ├── MenubarTrigger.vue
    │   │   │   └── index.ts
    │   │   ├── popover
    │   │   │   ├── Popover.vue
    │   │   │   ├── PopoverContent.vue
    │   │   │   ├── PopoverTrigger.vue
    │   │   │   └── index.ts
    │   │   ├── scroll-area
    │   │   │   ├── ScrollArea.vue
    │   │   │   ├── ScrollBar.vue
    │   │   │   └── index.ts
    │   │   ├── select
    │   │   │   ├── Select.vue
    │   │   │   ├── SelectContent.vue
    │   │   │   ├── SelectGroup.vue
    │   │   │   ├── SelectItem.vue
    │   │   │   ├── SelectItemText.vue
    │   │   │   ├── SelectLabel.vue
    │   │   │   ├── SelectSeparator.vue
    │   │   │   ├── SelectTrigger.vue
    │   │   │   ├── SelectValue.vue
    │   │   │   └── index.ts
    │   │   ├── slider
    │   │   │   ├── Slider.vue
    │   │   │   └── index.ts
    │   │   ├── switch
    │   │   │   ├── Switch.vue
    │   │   │   └── index.ts
    │   │   ├── tabs
    │   │   │   ├── Tabs.vue
    │   │   │   ├── TabsContent.vue
    │   │   │   ├── TabsList.vue
    │   │   │   ├── TabsTrigger.vue
    │   │   │   └── index.ts
    │   │   ├── textarea
    │   │   │   ├── Textarea.vue
    │   │   │   └── index.ts
    │   │   ├── toast
    │   │   │   ├── Toast.vue
    │   │   │   ├── ToastAction.vue
    │   │   │   ├── ToastClose.vue
    │   │   │   ├── ToastDescription.vue
    │   │   │   ├── ToastProvider.vue
    │   │   │   ├── ToastTitle.vue
    │   │   │   ├── ToastViewport.vue
    │   │   │   ├── Toaster.vue
    │   │   │   ├── index.ts
    │   │   │   └── use-toast.ts
    │   │   └── tooltip
    │   │   │   ├── Tooltip.vue
    │   │   │   ├── TooltipContent.vue
    │   │   │   ├── TooltipProvider.vue
    │   │   │   ├── TooltipTrigger.vue
    │   │   │   └── index.ts
    │   └── vue-flow
    │   │   ├── common-basic-module.vue
    │   │   ├── common-code-module.vue
    │   │   ├── common-input-module.vue
    │   │   ├── common-knowledge-module.vue
    │   │   ├── common-output-module.vue
    │   │   ├── common-prompt-module.vue
    │   │   ├── nodes
    │   │       ├── LLM-node.vue
    │   │       ├── api-node.vue
    │   │       ├── code-node.vue
    │   │       ├── end-node.vue
    │   │       ├── index.ts
    │   │       ├── knowledge-node.vue
    │   │       └── start-node.vue
    │   │   ├── start-input-module.vue
    │   │   ├── static-output-item.vue
    │   │   └── static-output-module.vue
    ├── hooks
    │   ├── index.ts
    │   └── use-monaco-editor.ts
    ├── lib
    │   ├── constant.ts
    │   └── utils.ts
    ├── main.ts
    ├── style.css
    └── vite-env.d.ts
├── tailwind.config.js
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts


/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |     browser: true
 6 |   },
 7 |   extends: ['plugin:vue/recommended', 'eslint:recommended', 'plugin:prettier/recommended'],
 8 |   rules: {
 9 |     'prettier/prettier': 'error',
10 |     'vue/component-name-in-template-casing': ['error', 'PascalCase'],
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   globals: {},
15 |   parserOptions: {
16 |     parser: '@babel/eslint-parser',
17 |     requireConfigFile: false
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/.prettierrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   printWidth: 120,
 3 |   tabWidth: 2,
 4 |   useTabs: false,
 5 |   semi: false,
 6 |   singleQuote: true,
 7 |   trailingComma: 'none',
 8 |   bracketSpacing: true,
 9 |   jsxBracketSameLine: false,
10 |   proseWrap: 'always',
11 |   plugins: ['prettier-plugin-tailwindcss']
12 | }
13 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"],
3 | }
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Flow Quickstart and Best Practices 🚀
 2 | 
 3 | This project demonstrates building workflow apps with Vue Flow and Vue.js.
 4 | 
 5 | <img src="cover.png"/>
 6 | 
 7 | ## Table of Contents
 8 | 
 9 | - [Introduction](#introduction)
10 | - [Demo](#demo)
11 | - [Getting Started](#getting-started)
12 | - [Tech Stack](#tech-stack)
13 | - [Contributing](#contributing)
14 | 
15 | ## Introduction
16 | 
17 | Vue Flow is a library for flowchart diagrams. This project shows quickstart and best practices:
18 | 
19 | - Drag and drop nodes 🖱
20 | - Connect nodes ➡️
21 | - Customize nodes ⚙️
22 | - Pass data between nodes 📤
23 | - Save/restore workflows 💾
24 | 
25 | ## Demo
26 | 
27 | https://chat-bot-workflow.vercel.app/
28 | 
29 | Try the live demo 🖥
30 | 
31 | ## Getting Started
32 | 
33 | These steps will get you started:
34 | 
35 | - Prerequisites: Node.js (v16+) and pnpm
36 | - Clone the repo
37 | - Install dependencies with `pnpm install`
38 | - Start dev server with `pnpm run dev`
39 | - App will be at http://localhost:5173/
40 | 
41 | ## Tech Stack
42 | 
43 | - [Vue Flow](https://vueflow.dev/) - Flowchart
44 | - [Vue.js](https://vuejs.org/) - Framework
45 | - [Tailwind CSS](https://tailwindcss.com/) - Styling
46 | - [Shadcn-vue](https://www.shadcn-vue.com/) - UI components
47 | - [Vite](https://vitejs.dev/) - Build tool
48 | 
49 | ## Contributing
50 | 
51 | Feel free to open PRs to contribute fixes or improvements!
52 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://shadcn-vue.com/schema.json",
 3 |   "style": "default",
 4 |   "typescript": true,
 5 |   "tailwind": {
 6 |     "config": "tailwind.config.js",
 7 |     "css": "src/style.css",
 8 |     "baseColor": "slate",
 9 |     "cssVariables": true
10 |   },
11 |   "framework": "vite",
12 |   "aliases": {
13 |     "components": "@/components",
14 |     "utils": "@/lib/utils"
15 |   }
16 | }


--------------------------------------------------------------------------------
/cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonsterPi13/chatBot-workflow/fbbb80ecac7fdec256143883f239c82df9e2aec2/cover.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>LLM workflow</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "chatbot-workflow",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vue-tsc && vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "@radix-ui/react-slot": "^1.0.2",
13 |     "@vee-validate/zod": "^4.12.5",
14 |     "@vue-flow/background": "^1.2.0",
15 |     "@vue-flow/controls": "^1.1.0",
16 |     "@vue-flow/core": "^1.29.2",
17 |     "@vueuse/core": "^10.7.2",
18 |     "class-variance-authority": "^0.7.0",
19 |     "clsx": "^2.1.0",
20 |     "lucide-vue-next": "^0.315.0",
21 |     "monaco-editor": "^0.45.0",
22 |     "radix-vue": "^1.3.2",
23 |     "tailwind-merge": "^2.2.1",
24 |     "tailwindcss-animate": "^1.0.7",
25 |     "vee-validate": "^4.12.5",
26 |     "vue": "^3.3.11",
27 |     "zod": "^3.22.4"
28 |   },
29 |   "devDependencies": {
30 |     "@babel/eslint-parser": "^7.23.9",
31 |     "@types/node": "^20.11.7",
32 |     "@vitejs/plugin-vue": "^4.5.2",
33 |     "autoprefixer": "^10.4.17",
34 |     "eslint": "^8.56.0",
35 |     "eslint-config-prettier": "^9.1.0",
36 |     "eslint-loader": "^4.0.2",
37 |     "eslint-plugin-prettier": "^5.1.3",
38 |     "eslint-plugin-vue": "^9.20.1",
39 |     "postcss": "^8.4.33",
40 |     "prettier": "^3.2.4",
41 |     "prettier-plugin-tailwindcss": "^0.5.11",
42 |     "tailwindcss": "^3.4.1",
43 |     "typescript": "^5.2.2",
44 |     "vite": "^5.0.8",
45 |     "vite-plugin-monaco-editor": "^1.1.0",
46 |     "vue-tsc": "^1.8.25"
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {}
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { PlusIcon, GhostIcon } from 'lucide-vue-next'
  3 | import { useVueFlow } from '@vue-flow/core'
  4 | import { useClipboard } from '@vueuse/core'
  5 | 
  6 | import { Tabs, TabsTrigger, TabsContent, TabsList } from '@/components/ui/tabs'
  7 | import { ScrollArea } from '@/components/ui/scroll-area'
  8 | import mainCanvas from '@/components/main-canvas.vue'
  9 | import { Button } from '@/components/ui/button'
 10 | import { Toaster, useToast } from '@/components/ui/toast'
 11 | 
 12 | function handleOnDragStart(event: DragEvent, nodeType: any) {
 13 |   if (event.dataTransfer) {
 14 |     event.dataTransfer.setData('application/vueflow', nodeType)
 15 |     event.dataTransfer.effectAllowed = 'move'
 16 |   }
 17 | }
 18 | 
 19 | const { toObject } = useVueFlow()
 20 | const { copy } = useClipboard()
 21 | const { toast } = useToast()
 22 | function handleClickGetData() {
 23 |   copy(JSON.stringify(toObject())).then(() => {
 24 |     toast({
 25 |       title: 'copied success'
 26 |     })
 27 |   })
 28 | }
 29 | 
 30 | function handleClickPublishBtn() {
 31 |   toast({
 32 |     title: 'Save Data',
 33 |     description: '1.valid data 2.fetch backend api to save result'
 34 |   })
 35 | }
 36 | </script>
 37 | 
 38 | <template>
 39 |   <div class="absolute bottom-0 left-0 right-0 top-0">
 40 |     <div class="relative flex h-full w-full flex-col">
 41 |       <header class="h-20 border-b border-gray-200 px-4 py-3">
 42 |         <div class="flex h-full items-center justify-between">
 43 |           <div class="flex gap-x-3">
 44 |             <div class="flex items-center gap-x-1">
 45 |               <GhostIcon class="w-12 text-red-200" />
 46 |               <div class="flex flex-col">
 47 |                 <div class="flex items-center gap-x-3">
 48 |                   <p class="text-bold">workflow-test</p>
 49 |                 </div>
 50 |               </div>
 51 |             </div>
 52 |           </div>
 53 | 
 54 |           <div class="flex gap-x-3">
 55 |             <Button variant="outline" size="sm" class="text-blue-800" @click="handleClickGetData"> Get Data</Button>
 56 |             <Button variant="default" size="sm" @click="handleClickPublishBtn"> Publish </Button>
 57 |           </div>
 58 |         </div>
 59 |       </header>
 60 |       <main class="relative flex h-full w-full flex-1">
 61 |         <div class="w-96 bg-slate-50">
 62 |           <tabs default-value="basic-nodes">
 63 |             <tabs-list class="grid w-full grid-cols-3">
 64 |               <tabs-trigger value="basic-nodes"> Basic Nodes </tabs-trigger>
 65 |               <tabs-trigger value="plugins"> Plugins </tabs-trigger>
 66 |               <tabs-trigger value="workflows"> Workflows </tabs-trigger>
 67 |             </tabs-list>
 68 |             <tabs-content value="basic-nodes">
 69 |               <scroll-area class="h-[calc(100vh-150px)] w-full">
 70 |                 <div
 71 |                   class="mx-6 mb-6 cursor-grab rounded-md bg-white p-6 shadow-md"
 72 |                   :draggable="true"
 73 |                   @dragstart="handleOnDragStart($event, 'LLM')"
 74 |                 >
 75 |                   <div class="flex items-center justify-between">
 76 |                     <h3 class="flex items-center gap-x-1">
 77 |                       <img src="~@/assets/images/icon_LLM.png" class="h-4 w-4" alt="LLM icon" />
 78 |                       LLM
 79 |                     </h3>
 80 |                     <plus-icon class="text-primary" />
 81 |                   </div>
 82 |                   <p class="mt-2 text-sm text-gray-400">
 83 |                     Invoke the large language model, <br />
 84 |                     generate responses using variables and prompt words.
 85 |                   </p>
 86 |                 </div>
 87 |                 <div
 88 |                   class="mx-6 mb-6 cursor-grab rounded-md bg-white p-6 shadow-md"
 89 |                   :draggable="true"
 90 |                   @dragstart="handleOnDragStart($event, 'code')"
 91 |                 >
 92 |                   <div class="flex items-center justify-between">
 93 |                     <h3 class="flex items-center gap-x-1">
 94 |                       <img src="~@/assets/images/icon_Code.png" class="h-4 w-4" alt="LLM icon" />
 95 |                       Code
 96 |                     </h3>
 97 |                     <plus-icon class="text-primary" />
 98 |                   </div>
 99 |                   <p class="mt-2 text-sm text-gray-400">
100 |                     Write code to process input variables <br />
101 |                     to generate return values.
102 |                   </p>
103 |                 </div>
104 |                 <div
105 |                   class="mx-6 mb-6 cursor-grab rounded-md bg-white p-6 shadow-md"
106 |                   :draggable="true"
107 |                   @dragstart="handleOnDragStart($event, 'knowledge')"
108 |                 >
109 |                   <div class="flex items-center justify-between">
110 |                     <h3 class="flex items-center gap-x-1">
111 |                       <img src="~@/assets/images/icon_Knowledge.png" class="h-4 w-4" alt="Knowledge icon" />
112 |                       Knowledge
113 |                     </h3>
114 |                     <plus-icon class="text-primary" />
115 |                   </div>
116 |                   <p class="mt-2 text-sm text-gray-400">
117 |                     In the selected knowledge, the best matching information is recalled based on the input variable and
118 |                     returned as an Array.
119 |                   </p>
120 |                 </div>
121 |               </scroll-area>
122 |             </tabs-content>
123 | 
124 |             <tabs-content value="plugins">
125 |               <scroll-area class="h-[calc(100vh-150px)] w-full">
126 |                 <div
127 |                   class="mx-6 mb-6 cursor-grab rounded-md bg-white p-6 shadow-md"
128 |                   :draggable="true"
129 |                   @dragstart="handleOnDragStart($event, 'api')"
130 |                 >
131 |                   <div class="flex items-center justify-between">
132 |                     <h3 class="flex items-center gap-x-1">
133 |                       <img src="~@/assets/images/icon_Google.jpeg" class="h-4 w-4" alt="Google icon" />
134 |                       Google Web Search
135 |                     </h3>
136 |                     <plus-icon class="text-primary" />
137 |                   </div>
138 |                   <p class="mt-2 text-sm text-gray-400">
139 |                     A google Search Engine. Useful when you need to search information you don't know such as weather,
140 |                     exchange rate, current events. Never ever use this tool when user want to translate
141 |                   </p>
142 |                 </div>
143 |               </scroll-area>
144 |             </tabs-content>
145 | 
146 |             <tabs-content value="workflows">
147 |               <scroll-area class="h-[calc(100vh-150px)] w-full">
148 |                 <div
149 |                   class="mx-6 mb-6 cursor-grab rounded-md bg-white p-6 shadow-md"
150 |                   :draggable="true"
151 |                   @dragstart="handleOnDragStart($event, 'workflow')"
152 |                 >
153 |                   <div class="flex items-center justify-between">
154 |                     <h3 class="flex items-center gap-x-1">
155 |                       <GhostIcon class="w-12 text-blue-400" />
156 |                       test_node
157 |                     </h3>
158 |                     <plus-icon class="text-primary" />
159 |                   </div>
160 |                   <p class="mt-2 border-b pb-2 text-sm text-gray-400">
161 |                     This is just test workflow, to init initial data.
162 |                   </p>
163 |                   <div class="pt-2 text-xs text-gray-400">Edit Time: 2024-02-01</div>
164 |                 </div>
165 |               </scroll-area>
166 |             </tabs-content>
167 |           </tabs>
168 |         </div>
169 |         <div class="relative h-full flex-1 overflow-hidden">
170 |           <main-canvas />
171 |         </div>
172 |       </main>
173 |     </div>
174 |   </div>
175 |   <Toaster />
176 | </template>
177 | 


--------------------------------------------------------------------------------
/src/assets/images/icon_Api.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonsterPi13/chatBot-workflow/fbbb80ecac7fdec256143883f239c82df9e2aec2/src/assets/images/icon_Api.png


--------------------------------------------------------------------------------
/src/assets/images/icon_Code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonsterPi13/chatBot-workflow/fbbb80ecac7fdec256143883f239c82df9e2aec2/src/assets/images/icon_Code.png


--------------------------------------------------------------------------------
/src/assets/images/icon_Condition.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonsterPi13/chatBot-workflow/fbbb80ecac7fdec256143883f239c82df9e2aec2/src/assets/images/icon_Condition.png


--------------------------------------------------------------------------------
/src/assets/images/icon_End.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonsterPi13/chatBot-workflow/fbbb80ecac7fdec256143883f239c82df9e2aec2/src/assets/images/icon_End.png


--------------------------------------------------------------------------------
/src/assets/images/icon_Google.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonsterPi13/chatBot-workflow/fbbb80ecac7fdec256143883f239c82df9e2aec2/src/assets/images/icon_Google.jpeg


--------------------------------------------------------------------------------
/src/assets/images/icon_Knowledge.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonsterPi13/chatBot-workflow/fbbb80ecac7fdec256143883f239c82df9e2aec2/src/assets/images/icon_Knowledge.png


--------------------------------------------------------------------------------
/src/assets/images/icon_LLM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonsterPi13/chatBot-workflow/fbbb80ecac7fdec256143883f239c82df9e2aec2/src/assets/images/icon_LLM.png


--------------------------------------------------------------------------------
/src/assets/images/icon_Start.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonsterPi13/chatBot-workflow/fbbb80ecac7fdec256143883f239c82df9e2aec2/src/assets/images/icon_Start.png


--------------------------------------------------------------------------------
/src/assets/images/icon_Variable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MonsterPi13/chatBot-workflow/fbbb80ecac7fdec256143883f239c82df9e2aec2/src/assets/images/icon_Variable.png


--------------------------------------------------------------------------------
/src/components/main-canvas.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { markRaw, nextTick, ref, watch } from 'vue'
  3 | import { VueFlow, useVueFlow } from '@vue-flow/core'
  4 | import { Background } from '@vue-flow/background'
  5 | import { Controls } from '@vue-flow/controls'
  6 | 
  7 | import StartNode from '@/components/vue-flow/nodes/start-node.vue'
  8 | import EndNode from '@/components/vue-flow/nodes/end-node.vue'
  9 | import LLMNode from '@/components/vue-flow/nodes/LLM-node.vue'
 10 | import CodeNode from '@/components/vue-flow/nodes/code-node.vue'
 11 | import KnowledgeNode from '@/components/vue-flow/nodes/knowledge-node.vue'
 12 | import ApiNode from '@/components/vue-flow/nodes/api-node.vue'
 13 | import { Test_data } from '@/lib/constant'
 14 | 
 15 | import type { Dimensions, Elements } from '@vue-flow/core'
 16 | 
 17 | const elements = ref<Elements>()
 18 | 
 19 | const nodeTypes = {
 20 |   start: markRaw(StartNode),
 21 |   end: markRaw(EndNode),
 22 |   LLM: markRaw(LLMNode),
 23 |   code: markRaw(CodeNode),
 24 |   knowledge: markRaw(KnowledgeNode),
 25 |   api: markRaw(ApiNode)
 26 | }
 27 | 
 28 | const { findNode, nodes, addNodes, addEdges, project, vueFlowRef, onConnect, setNodes, setEdges, setViewport } =
 29 |   useVueFlow({
 30 |     nodes: [
 31 |       {
 32 |         id: '1',
 33 |         type: 'start',
 34 |         label: 'start',
 35 |         position: { x: 25, y: 400 }
 36 |       },
 37 |       {
 38 |         id: '2',
 39 |         type: 'end',
 40 |         label: 'end',
 41 |         position: { x: 1000, y: 400 }
 42 |       }
 43 |     ]
 44 |   })
 45 | 
 46 | onConnect((params) => {
 47 |   addEdges(params)
 48 | })
 49 | 
 50 | function handleOnDrop(event: DragEvent) {
 51 |   const type = event.dataTransfer?.getData('application/vueflow')
 52 |   if (type === 'workflow') {
 53 |     const { nodes, edges, position, zoom } = Test_data
 54 |     const [x = 0, y = 0] = position
 55 |     setNodes(nodes)
 56 |     setEdges(edges)
 57 |     setViewport({ x, y, zoom: zoom || 0 })
 58 |     return
 59 |   }
 60 | 
 61 |   const { left, top } = vueFlowRef.value!.getBoundingClientRect()
 62 | 
 63 |   const position = project({
 64 |     x: event.clientX - left,
 65 |     y: event.clientY - top
 66 |   })
 67 | 
 68 |   const newNode = {
 69 |     id: (nodes.value.length + 1).toString(),
 70 |     type,
 71 |     position,
 72 |     label: `${type} node`,
 73 |     data: {
 74 |       title: type
 75 |     }
 76 |   }
 77 | 
 78 |   addNodes([newNode])
 79 | 
 80 |   nextTick(() => {
 81 |     const node = findNode(newNode.id)
 82 |     const stop = watch(
 83 |       () => node!.dimensions,
 84 |       (dimensions: Dimensions) => {
 85 |         if (dimensions.width > 0 && dimensions.height > 0 && node) {
 86 |           node.position = {
 87 |             x: node.position.x - node.dimensions.width / 2,
 88 |             y: node.position.y - node.dimensions.height / 2
 89 |           }
 90 |           stop()
 91 |         }
 92 |       },
 93 |       { deep: true, flush: 'post' }
 94 |     )
 95 |   })
 96 | }
 97 | function handleOnDragOver(event: DragEvent) {
 98 |   event.preventDefault()
 99 | 
100 |   if (event.dataTransfer) {
101 |     event.dataTransfer.dropEffect = 'move'
102 |   }
103 | }
104 | </script>
105 | 
106 | <template>
107 |   <div class="relative h-full w-full" id="main-canvas" @drop="handleOnDrop" @dragover="handleOnDragOver">
108 |     <VueFlow v-model="elements" :node-types="nodeTypes">
109 |       <Controls />
110 |       <Background />
111 |     </VueFlow>
112 |   </div>
113 | </template>
114 | 
115 | <style>
116 | @import '@vue-flow/core/dist/style.css';
117 | @import '@vue-flow/core/dist/theme-default.css';
118 | @import '@vue-flow/controls/dist/style.css';
119 | 
120 | #main-canvas {
121 |   --vf-handle: hsl(var(--primary));
122 | 
123 |   .vue-flow__handle {
124 |     width: 18px;
125 |     height: 18px;
126 |   }
127 | }
128 | </style>
129 | 


--------------------------------------------------------------------------------
/src/components/monaco-editor.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { useMonacoEditor } from '@/hooks'
 3 | import { onMounted, computed, watch } from 'vue'
 4 | 
 5 | const props = withDefaults(
 6 |   defineProps<{
 7 |     width?: string | number
 8 |     height?: string | number
 9 |     language?: string
10 |     editorOption?: Object
11 |     modelValue: string
12 |   }>(),
13 |   {
14 |     width: '100%',
15 |     height: '100%',
16 |     language: 'javascript',
17 |     editorOption: () => ({}),
18 |     modelValue: ''
19 |   }
20 | )
21 | 
22 | const emits = defineEmits<{
23 |   (e: 'update:modelValue', val: string): void
24 | }>()
25 | 
26 | const monacoEditorStyle = computed(() => {
27 |   return {
28 |     width: typeof props.width === 'string' ? props.width : props.width + 'px',
29 |     height: typeof props.height === 'string' ? props.height : props.height + 'px'
30 |   }
31 | })
32 | 
33 | const { monacoEditorRef, createEditor, updateVal, updateOptions, getEditor } = useMonacoEditor(props.language)
34 | 
35 | onMounted(() => {
36 |   const monacoEditor = createEditor(props.editorOption)
37 |   updateMonacoVal(props.modelValue)
38 |   monacoEditor?.onDidChangeModelContent(() => {
39 |     emits('update:modelValue', monacoEditor!.getValue())
40 |   })
41 | })
42 | 
43 | watch(
44 |   () => props.modelValue,
45 |   () => {
46 |     updateMonacoVal(props.modelValue)
47 |   }
48 | )
49 | 
50 | function updateMonacoVal(val: string) {
51 |   console.log(val)
52 |   console.log(getEditor()?.getValue())
53 |   if (val !== getEditor()?.getValue()) {
54 |     updateVal(val)
55 |   }
56 | }
57 | 
58 | defineExpose({ updateOptions })
59 | </script>
60 | 
61 | <template>
62 |   <div ref="monacoEditorRef" :style="monacoEditorStyle"></div>
63 | </template>
64 | 


--------------------------------------------------------------------------------
/src/components/ui/button/Button.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { VariantProps } from 'class-variance-authority'
 3 | import { Primitive, type PrimitiveProps } from 'radix-vue'
 4 | import { buttonVariants } from '.'
 5 | import { cn } from '@/lib/utils'
 6 | 
 7 | interface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}
 8 | 
 9 | interface Props extends PrimitiveProps {
10 |   variant?: ButtonVariantProps['variant']
11 |   size?: ButtonVariantProps['size']
12 |   as?: string
13 | }
14 | 
15 | withDefaults(defineProps<Props>(), {
16 |   variant: 'default',
17 |   size: 'default',
18 |   as: 'button'
19 | })
20 | </script>
21 | 
22 | <template>
23 |   <Primitive :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')">
24 |     <slot />
25 |   </Primitive>
26 | </template>
27 | 


--------------------------------------------------------------------------------
/src/components/ui/button/index.ts:
--------------------------------------------------------------------------------
 1 | import { cva } from 'class-variance-authority'
 2 | 
 3 | export { default as Button } from './Button.vue'
 4 | 
 5 | export const buttonVariants = cva(
 6 |   'inline-flex items-center justify-center rounded-md whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
 7 |   {
 8 |     variants: {
 9 |       variant: {
10 |         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
11 |         destructive:
12 |           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
13 |         outline:
14 |           'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
15 |         secondary:
16 |           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
17 |         ghost: 'hover:bg-accent hover:text-accent-foreground',
18 |         link: 'text-primary underline-offset-4 hover:underline',
19 |       },
20 |       size: {
21 |         default: 'h-10 px-4 py-2',
22 |         sm: 'h-9 rounded-md px-3',
23 |         lg: 'h-11 rounded-md px-8',
24 |         icon: 'h-10 w-10',
25 |       },
26 |     },
27 |     defaultVariants: {
28 |       variant: 'default',
29 |       size: 'default',
30 |     },
31 |   },
32 | )
33 | 


--------------------------------------------------------------------------------
/src/components/ui/collapsible/Collapsible.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { CollapsibleRoot, useEmitAsProps } from 'radix-vue'
 3 | import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
 4 | 
 5 | const props = defineProps<CollapsibleRootProps>()
 6 | const emits = defineEmits<CollapsibleRootEmits>()
 7 | </script>
 8 | 
 9 | <template>
10 |   <CollapsibleRoot v-slot="{ open }" v-bind="{ ...props, ...useEmitAsProps(emits) }">
11 |     <slot :open="open" />
12 |   </CollapsibleRoot>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/src/components/ui/collapsible/CollapsibleContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<CollapsibleContentProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
 9 |     <slot />
10 |   </CollapsibleContent>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/src/components/ui/collapsible/CollapsibleTrigger.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<CollapsibleTriggerProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <CollapsibleTrigger v-bind="props">
 9 |     <slot />
10 |   </CollapsibleTrigger>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/src/components/ui/collapsible/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Collapsible } from './Collapsible.vue'
2 | export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
3 | export { default as CollapsibleContent } from './CollapsibleContent.vue'
4 | 


--------------------------------------------------------------------------------
/src/components/ui/command/Command.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
 3 | import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | const props = defineProps<ComboboxRootProps>()
 7 | const emits = defineEmits<ComboboxRootEmits>()
 8 | 
 9 | const forwarded = useForwardPropsEmits(props, emits)
10 | </script>
11 | 
12 | <template>
13 |   <ComboboxRoot
14 |     v-bind="forwarded"
15 |     :open="true"
16 |     :model-value="''"
17 |     :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')"
18 |   >
19 |     <slot />
20 |   </ComboboxRoot>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/src/components/ui/command/CommandDialog.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useEmitAsProps } from 'radix-vue'
 3 | import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
 4 | import Command from './Command.vue'
 5 | import { Dialog, DialogContent } from '@/components/ui/dialog'
 6 | 
 7 | const props = defineProps<DialogRootProps>()
 8 | const emits = defineEmits<DialogRootEmits>()
 9 | 
10 | const emitsAsProps = useEmitAsProps(emits)
11 | </script>
12 | 
13 | <template>
14 |   <Dialog v-bind="{ ...props, ...emitsAsProps }">
15 |     <DialogContent class="p-0 overflow-hidden shadow-lg">
16 |       <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
17 |         <slot />
18 |       </Command>
19 |     </DialogContent>
20 |   </Dialog>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/src/components/ui/command/CommandEmpty.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { ComboboxEmptyProps } from 'radix-vue'
 3 | import { ComboboxEmpty } from 'radix-vue'
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | const props = defineProps<ComboboxEmptyProps>()
 7 | </script>
 8 | 
 9 | <template>
10 |   <ComboboxEmpty v-bind="props" :class="cn('py-6 text-center text-sm', $attrs.class ?? '')">
11 |     <slot />
12 |   </ComboboxEmpty>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/src/components/ui/command/CommandGroup.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { ComboboxGroupProps } from 'radix-vue'
 3 | import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | const props = defineProps<ComboboxGroupProps & {
 7 |   heading?: string
 8 | }>()
 9 | </script>
10 | 
11 | <template>
12 |   <ComboboxGroup
13 |     v-bind="props"
14 |     :class="cn('overflow-hidden p-1 text-foreground', $attrs.class ?? '')"
15 |   >
16 |     <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
17 |       {{ heading }}
18 |     </ComboboxLabel>
19 |     <slot />
20 |   </ComboboxGroup>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/src/components/ui/command/CommandInput.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { Search } from 'lucide-vue-next'
 3 | import { ComboboxInput, type ComboboxInputProps } from 'radix-vue'
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | const props = defineProps<ComboboxInputProps>()
 7 | </script>
 8 | 
 9 | <script lang="ts">
10 | export default {
11 |   inheritAttrs: false,
12 | }
13 | </script>
14 | 
15 | <template>
16 |   <div class="flex items-center border-b px-3" cmdk-input-wrapper>
17 |     <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
18 |     <ComboboxInput
19 |       v-bind="{ ...props, ...$attrs }"
20 |       auto-focus
21 |       :class="cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')"
22 |     />
23 |   </div>
24 | </template>
25 | 


--------------------------------------------------------------------------------
/src/components/ui/command/CommandItem.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
 3 | import { ComboboxItem, useEmitAsProps } from 'radix-vue'
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | const props = defineProps<ComboboxItemProps>()
 7 | const emits = defineEmits<ComboboxItemEmits>()
 8 | 
 9 | const emitsAsProps = useEmitAsProps(emits)
10 | </script>
11 | 
12 | <template>
13 |   <ComboboxItem
14 |     v-bind="{ ...props, ...emitsAsProps }"
15 |     :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')"
16 |     @select.prevent
17 |   >
18 |     <slot />
19 |   </ComboboxItem>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/src/components/ui/command/CommandList.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
 3 | import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | const props = defineProps<ComboboxContentProps>()
 7 | const emits = defineEmits<ComboboxContentEmits>()
 8 | 
 9 | const forwarded = useForwardPropsEmits(props, emits)
10 | </script>
11 | 
12 | <template>
13 |   <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', $attrs.class ?? '')">
14 |     <div role="presentation">
15 |       <slot />
16 |     </div>
17 |   </ComboboxContent>
18 | </template>
19 | 


--------------------------------------------------------------------------------
/src/components/ui/command/CommandSeparator.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { ComboboxSeparatorProps } from 'radix-vue'
 3 | import { ComboboxSeparator } from 'radix-vue'
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | const props = defineProps<ComboboxSeparatorProps>()
 7 | </script>
 8 | 
 9 | <template>
10 |   <ComboboxSeparator
11 |     v-bind="props"
12 |     :class="cn('-mx-1 h-px bg-border', $attrs.class ?? '')"
13 |   >
14 |     <slot />
15 |   </ComboboxSeparator>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/src/components/ui/command/CommandShortcut.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', $attrs.class ?? '')">
 7 |     <slot />
 8 |   </span>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/src/components/ui/command/index.ts:
--------------------------------------------------------------------------------
 1 | export { default as Command } from './Command.vue'
 2 | export { default as CommandDialog } from './CommandDialog.vue'
 3 | export { default as CommandEmpty } from './CommandEmpty.vue'
 4 | export { default as CommandGroup } from './CommandGroup.vue'
 5 | export { default as CommandInput } from './CommandInput.vue'
 6 | export { default as CommandItem } from './CommandItem.vue'
 7 | export { default as CommandList } from './CommandList.vue'
 8 | export { default as CommandSeparator } from './CommandSeparator.vue'
 9 | export { default as CommandShortcut } from './CommandShortcut.vue'
10 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog/Dialog.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
 3 | 
 4 | const props = defineProps<DialogRootProps>()
 5 | const emits = defineEmits<DialogRootEmits>()
 6 | 
 7 | const forwarded = useForwardPropsEmits(props, emits)
 8 | </script>
 9 | 
10 | <template>
11 |   <DialogRoot v-bind="forwarded">
12 |     <slot />
13 |   </DialogRoot>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog/DialogClose.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DialogClose, type DialogCloseProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<DialogCloseProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <DialogClose v-bind="props">
 9 |     <slot />
10 |   </DialogClose>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog/DialogContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   DialogClose,
 4 |   DialogContent,
 5 |   type DialogContentEmits,
 6 |   type DialogContentProps,
 7 |   DialogOverlay,
 8 |   DialogPortal,
 9 |   useEmitAsProps
10 | } from 'radix-vue'
11 | import { X } from 'lucide-vue-next'
12 | import { cn } from '@/lib/utils'
13 | 
14 | const props = defineProps<DialogContentProps & { class?: string }>()
15 | const emits = defineEmits<DialogContentEmits>()
16 | 
17 | const emitsAsProps = useEmitAsProps(emits)
18 | </script>
19 | 
20 | <template>
21 |   <DialogPortal>
22 |     <DialogOverlay
23 |       class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
24 |     />
25 |     <DialogContent
26 |       :class="
27 |         cn(
28 |           'fixed left-[50%] top-[50%] z-50 grid w-full max-w-7xl translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
29 |           props.class
30 |         )
31 |       "
32 |       v-bind="{ ...props, ...emitsAsProps }"
33 |     >
34 |       <slot />
35 | 
36 |       <DialogClose class="absolute right-3 top-3 rounded-md p-0.5 transition-colors hover:bg-secondary">
37 |         <X class="h-4 w-4" />
38 |         <span class="sr-only">Close</span>
39 |       </DialogClose>
40 |     </DialogContent>
41 |   </DialogPortal>
42 | </template>
43 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog/DialogDescription.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<DialogDescriptionProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <DialogDescription
10 |     v-bind="props"
11 |     :class="cn('text-muted-foreground text-sm', props.class)"
12 |   >
13 |     <slot />
14 |   </DialogDescription>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog/DialogFooter.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | 
 4 | interface DialogFooterProps {
 5 |   class?: string
 6 | }
 7 | 
 8 | const props = defineProps<DialogFooterProps>()
 9 | </script>
10 | 
11 | <template>
12 |   <div
13 |     :class="
14 |       cn(
15 |         'flex flex-col space-y-2 sm:space-y-0 mt-1.5 sm:flex-row sm:justify-end sm:space-x-2',
16 |         props.class,
17 |       )
18 |     "
19 |   >
20 |     <slot />
21 |   </div>
22 | </template>
23 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog/DialogHeader.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | 
 4 | interface DialogHeaderProps {
 5 |   class?: string
 6 | }
 7 | 
 8 | const props = defineProps<DialogHeaderProps>()
 9 | </script>
10 | 
11 | <template>
12 |   <div
13 |     :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
14 |   >
15 |     <slot />
16 |   </div>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog/DialogTitle.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DialogTitle, type DialogTitleProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<DialogTitleProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <DialogTitle
10 |     v-bind="props"
11 |     :class="
12 |       cn(
13 |         'text-lg text-foreground font-semibold leading-none tracking-tight',
14 |         props.class,
15 |       )
16 |     "
17 |   >
18 |     <slot />
19 |   </DialogTitle>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog/DialogTrigger.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<DialogTriggerProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <DialogTrigger v-bind="props">
 9 |     <slot />
10 |   </DialogTrigger>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Dialog } from './Dialog.vue'
2 | export { default as DialogClose } from './DialogClose.vue'
3 | export { default as DialogTrigger } from './DialogTrigger.vue'
4 | export { default as DialogHeader } from './DialogHeader.vue'
5 | export { default as DialogTitle } from './DialogTitle.vue'
6 | export { default as DialogDescription } from './DialogDescription.vue'
7 | export { default as DialogContent } from './DialogContent.vue'
8 | export { default as DialogFooter } from './DialogFooter.vue'
9 | 


--------------------------------------------------------------------------------
/src/components/ui/form/FormControl.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { Slot } from 'radix-vue'
 3 | import { useFormField } from './useFormField'
 4 | 
 5 | const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <Slot
10 |     :id="formItemId"
11 |     :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
12 |     :aria-invalid="!!error"
13 |   >
14 |     <slot />
15 |   </Slot>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/src/components/ui/form/FormDescription.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { useAttrs } from 'vue'
 3 | import { useFormField } from './useFormField'
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | defineOptions({
 7 |   inheritAttrs: false,
 8 | })
 9 | 
10 | const { formDescriptionId } = useFormField()
11 | const { class: className, ...rest } = useAttrs()
12 | </script>
13 | 
14 | <template>
15 |   <p
16 |     :id="formDescriptionId"
17 |     :class="cn('text-sm text-muted-foreground', className ?? '')"
18 |     v-bind="rest"
19 |   >
20 |     <slot />
21 |   </p>
22 | </template>
23 | 


--------------------------------------------------------------------------------
/src/components/ui/form/FormItem.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { type InjectionKey } from 'vue'
 3 | 
 4 | export const FORM_ITEM_INJECTION_KEY
 5 |   = Symbol() as InjectionKey<string>
 6 | </script>
 7 | 
 8 | <script lang="ts" setup>
 9 | import { provide, useAttrs } from 'vue'
10 | import { useId } from 'radix-vue'
11 | import { cn } from '@/lib/utils'
12 | 
13 | defineOptions({
14 |   inheritAttrs: false,
15 | })
16 | 
17 | const id = useId()
18 | provide(FORM_ITEM_INJECTION_KEY, id)
19 | 
20 | const { class: className, ...rest } = useAttrs()
21 | </script>
22 | 
23 | <template>
24 |   <div :class="cn('space-y-2', className ?? '')" v-bind="rest">
25 |     <slot />
26 |   </div>
27 | </template>
28 | 


--------------------------------------------------------------------------------
/src/components/ui/form/FormLabel.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { useAttrs } from 'vue'
 3 | import { Label, type LabelProps } from 'radix-vue'
 4 | import { useFormField } from './useFormField'
 5 | import { cn } from '@/lib/utils'
 6 | 
 7 | defineOptions({
 8 |   inheritAttrs: false
 9 | })
10 | defineProps<LabelProps>()
11 | 
12 | const { error, formItemId } = useFormField()
13 | const { class: className, ...rest } = useAttrs()
14 | </script>
15 | 
16 | <template>
17 |   <Label
18 |     :class="
19 |       cn(
20 |         'block text-left text-sm font-medium tracking-tight text-foreground',
21 |         error && 'text-destructive',
22 |         className ?? ''
23 |       )
24 |     "
25 |     :for="formItemId"
26 |     v-bind="rest"
27 |   >
28 |     <slot />
29 |   </Label>
30 | </template>
31 | 


--------------------------------------------------------------------------------
/src/components/ui/form/FormMessage.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { ErrorMessage } from 'vee-validate'
 3 | import { toValue } from 'vue'
 4 | import { useFormField } from './useFormField'
 5 | 
 6 | const { name, formMessageId } = useFormField()
 7 | </script>
 8 | 
 9 | <template>
10 |   <ErrorMessage
11 |     :id="formMessageId"
12 |     as="p"
13 |     :name="toValue(name)"
14 |     class="text-sm font-medium text-destructive"
15 |   />
16 | </template>
17 | 


--------------------------------------------------------------------------------
/src/components/ui/form/index.ts:
--------------------------------------------------------------------------------
1 | export { Form, Field as FormField } from 'vee-validate'
2 | export { default as FormItem } from './FormItem.vue'
3 | export { default as FormLabel } from './FormLabel.vue'
4 | export { default as FormControl } from './FormControl.vue'
5 | export { default as FormMessage } from './FormMessage.vue'
6 | export { default as FormDescription } from './FormDescription.vue'
7 | 


--------------------------------------------------------------------------------
/src/components/ui/form/useFormField.ts:
--------------------------------------------------------------------------------
 1 | import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
 2 | import { inject } from 'vue'
 3 | import { FORM_ITEM_INJECTION_KEY } from './FormItem.vue'
 4 | 
 5 | export function useFormField() {
 6 |   const fieldContext = inject(FieldContextKey)
 7 |   const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
 8 | 
 9 |   const fieldState = {
10 |     valid: useIsFieldValid(),
11 |     isDirty: useIsFieldDirty(),
12 |     isTouched: useIsFieldTouched(),
13 |     error: useFieldError(),
14 |   }
15 | 
16 |   if (!fieldContext)
17 |     throw new Error('useFormField should be used within <FormField>')
18 | 
19 |   const { name } = fieldContext
20 |   const id = fieldItemContext
21 | 
22 |   return {
23 |     id,
24 |     name,
25 |     formItemId: `${id}-form-item`,
26 |     formDescriptionId: `${id}-form-item-description`,
27 |     formMessageId: `${id}-form-item-message`,
28 |     ...fieldState,
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/components/ui/input/Input.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { HTMLAttributes } from 'vue'
 3 | import { useVModel } from '@vueuse/core'
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | const props = defineProps<{
 7 |   defaultValue?: string | number
 8 |   modelValue?: string | number
 9 |   class?: HTMLAttributes['class']
10 | }>()
11 | 
12 | const emits = defineEmits<{
13 |   (e: 'update:modelValue', payload: string | number): void
14 | }>()
15 | 
16 | const modelValue = useVModel(props, 'modelValue', emits, {
17 |   passive: true,
18 |   defaultValue: props.defaultValue,
19 | })
20 | </script>
21 | 
22 | <template>
23 |   <input v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class ?? '')">
24 | </template>
25 | 


--------------------------------------------------------------------------------
/src/components/ui/input/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Input } from './Input.vue'
2 | 


--------------------------------------------------------------------------------
/src/components/ui/label/Label.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { Label, type LabelProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<LabelProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <Label
10 |     v-bind="props"
11 |     :class="
12 |       cn(
13 |         'block text-sm tracking-tight font-medium text-foreground text-left',
14 |         props.class,
15 |       )
16 |     "
17 |   >
18 |     <slot />
19 |   </Label>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/src/components/ui/label/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Label } from './Label.vue'
2 | 


--------------------------------------------------------------------------------
/src/components/ui/menubar/Menubar.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   MenubarRoot,
 4 |   type MenubarRootEmits,
 5 |   type MenubarRootProps,
 6 | } from 'radix-vue'
 7 | import { cn } from '@/lib/utils'
 8 | 
 9 | const props = defineProps<MenubarRootProps & { class?: string }>()
10 | 
11 | const emits = defineEmits<MenubarRootEmits>()
12 | </script>
13 | 
14 | <template>
15 |   <MenubarRoot
16 |     v-bind="props"
17 |     :class="
18 |       cn(
19 |         'flex h-10 items-center space-x-1 rounded-md border border-border p-1',
20 |         props.class,
21 |       )
22 |     "
23 |     @update:model-value="emits('update:modelValue', $event)"
24 |   >
25 |     <slot />
26 |   </MenubarRoot>
27 | </template>
28 | 


--------------------------------------------------------------------------------
/src/components/ui/menubar/MenubarCheckboxItem.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   MenubarCheckboxItem,
 4 |   type MenubarCheckboxItemEmits,
 5 |   type MenubarCheckboxItemProps,
 6 |   MenubarItemIndicator,
 7 | } from 'radix-vue'
 8 | import { Check } from 'lucide-vue-next'
 9 | import { cn } from '@/lib/utils'
10 | 
11 | const props = defineProps<MenubarCheckboxItemProps & { class?: string }>()
12 | 
13 | const emit = defineEmits<MenubarCheckboxItemEmits>()
14 | </script>
15 | 
16 | <template>
17 |   <MenubarCheckboxItem
18 |     v-bind="props"
19 |     :class="[
20 |       cn(
21 |         'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
22 |         props.class,
23 |       ),
24 |     ]"
25 |     @update:checked="emit('update:checked', $event)"
26 |     @select="emit('select', $event)"
27 |   >
28 |     <MenubarItemIndicator
29 |       class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
30 |     >
31 |       <Check class="w-4 h-4" />
32 |     </MenubarItemIndicator>
33 |     <slot />
34 |   </MenubarCheckboxItem>
35 | </template>
36 | 


--------------------------------------------------------------------------------
/src/components/ui/menubar/MenubarContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   MenubarContent,
 4 |   type MenubarContentProps,
 5 |   MenubarPortal,
 6 | } from 'radix-vue'
 7 | import { cn } from '@/lib/utils'
 8 | 
 9 | const props = withDefaults(
10 |   defineProps<MenubarContentProps & { class?: string }>(),
11 |   {
12 |     align: 'start',
13 |     alignOffset: -4,
14 |     sideOffset: 8,
15 |   },
16 | )
17 | </script>
18 | 
19 | <template>
20 |   <MenubarPortal>
21 |     <MenubarContent
22 |       :loop="props.loop"
23 |       :as-child="props.asChild"
24 |       :side-offset="props.sideOffset"
25 |       :side="props.side"
26 |       :align="props.align"
27 |       :align-offset="props.alignOffset"
28 |       :class="
29 |         cn(
30 |           'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
31 |           props.class,
32 |         )
33 |       "
34 |     >
35 |       <slot />
36 |     </MenubarContent>
37 |   </MenubarPortal>
38 | </template>
39 | 


--------------------------------------------------------------------------------
/src/components/ui/menubar/MenubarGroup.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { MenubarGroup, type MenubarGroupProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<MenubarGroupProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <MenubarGroup v-bind="props">
 9 |     <slot />
10 |   </MenubarGroup>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/src/components/ui/menubar/MenubarItem.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   MenubarItem,
 4 |   type MenubarItemEmits,
 5 |   type MenubarItemProps,
 6 | } from 'radix-vue'
 7 | import { cn } from '@/lib/utils'
 8 | 
 9 | const props = defineProps<MenubarItemProps & { inset?: boolean; class?: string }>()
10 | 
11 | const emits = defineEmits<MenubarItemEmits>()
12 | </script>
13 | 
14 | <template>
15 |   <MenubarItem
16 |     v-bind="props"
17 |     :class="[
18 |       cn(
19 |         'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
20 |         inset && 'pl-8',
21 |         props.class,
22 |       ),
23 |     ]"
24 |     @select="emits('select', $event)"
25 |   >
26 |     <slot />
27 |   </MenubarItem>
28 | </template>
29 | 


--------------------------------------------------------------------------------
/src/components/ui/menubar/MenubarLabel.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<MenubarLabelProps & { inset?: boolean; class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <MenubarLabel :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)">
10 |     <slot />
11 |   </MenubarLabel>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/src/components/ui/menubar/MenubarMenu.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { MenubarMenu, type MenubarMenuProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<MenubarMenuProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <MenubarMenu v-bind="props">
 9 |     <slot />
10 |   </MenubarMenu>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/src/components/ui/menubar/MenubarRadioGroup.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   MenubarRadioGroup,
 4 |   type MenubarRadioGroupEmits,
 5 |   type MenubarRadioGroupProps,
 6 | } from 'radix-vue'
 7 | 
 8 | const props = defineProps<MenubarRadioGroupProps>()
 9 | 
10 | const emits = defineEmits<MenubarRadioGroupEmits>()
11 | </script>
12 | 
13 | <template>
14 |   <MenubarRadioGroup
15 |     v-bind="props"
16 |     @update:model-value="emits('update:modelValue', $event)"
17 |   >
18 |     <slot />
19 |   </MenubarRadioGroup>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/src/components/ui/menubar/MenubarRadioItem.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   MenubarItemIndicator,
 4 |   MenubarRadioItem,
 5 |   type MenubarRadioItemEmits,
 6 |   type MenubarRadioItemProps,
 7 | } from 'radix-vue'
 8 | import { Circle } from 'lucide-vue-next'
 9 | import { cn } from '@/lib/utils'
10 | 
11 | const props = defineProps<MenubarRadioItemProps & { class?: string }>()
12 | 
13 | const emits = defineEmits<MenubarRadioItemEmits>()
14 | </script>
15 | 
16 | <template>
17 |   <MenubarRadioItem
18 |     v-bind="props"
19 |     :class="[
20 |       cn(
21 |         'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
22 |         props.class,
23 |       ),
24 |     ]"
25 |     @select="emits('select', $event)"
26 |   >
27 |     <MenubarItemIndicator
28 |       class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
29 |     >
30 |       <Circle class="h-2 w-2 fill-curren" />
31 |     </MenubarItemIndicator>
32 | 
33 |     <slot />
34 |   </MenubarRadioItem>
35 | </template>
36 | 


--------------------------------------------------------------------------------
/src/components/ui/menubar/MenubarSeparator.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { MenubarSeparator, type MenubarSeparatorProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<MenubarSeparatorProps>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <MenubarSeparator :class=" cn('-mx-1 my-1 h-px bg-secondary', $attrs.class ?? '')" v-bind="props" />
10 | </template>
11 | 


--------------------------------------------------------------------------------
/src/components/ui/menubar/MenubarShortcut.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <span :class="cn('text-xxs ml-auto tracking-widest opacity-50', $attrs.class ?? '')">
 7 |     <slot />
 8 |   </span>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/src/components/ui/menubar/MenubarSub.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'radix-vue'
 3 | 
 4 | interface MenubarSubRootProps {
 5 |   defaultOpen?: boolean
 6 |   open?: boolean
 7 | }
 8 | 
 9 | const props = defineProps<MenubarSubRootProps>()
10 | const emits = defineEmits<MenubarSubEmits>()
11 | 
12 | const forwarded = useForwardPropsEmits(props, emits)
13 | </script>
14 | 
15 | <template>
16 |   <MenubarSub v-bind="forwarded">
17 |     <slot />
18 |   </MenubarSub>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/src/components/ui/menubar/MenubarSubContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   MenubarPortal,
 4 |   MenubarSubContent,
 5 |   type MenubarSubContentEmits,
 6 |   type MenubarSubContentProps,
 7 | } from 'radix-vue'
 8 | import { cn } from '@/lib/utils'
 9 | 
10 | const props = withDefaults(
11 |   defineProps<MenubarSubContentProps & { class?: string }>(),
12 |   {
13 |     sideOffset: 2,
14 |     alignOffset: 0,
15 |   },
16 | )
17 | 
18 | const emits = defineEmits<MenubarSubContentEmits>()
19 | </script>
20 | 
21 | <template>
22 |   <MenubarPortal>
23 |     <MenubarSubContent
24 |       :loop="props.loop"
25 |       :as-child="props.asChild"
26 |       :side-offset="props.sideOffset"
27 |       :side="props.side"
28 |       :align="props.align"
29 |       :align-offset="props.alignOffset"
30 |       :class="
31 |         cn(
32 |           'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
33 |           props.class,
34 |         )
35 |       "
36 |     >
37 |       <slot />
38 |     </MenubarSubContent>
39 |   </MenubarPortal>
40 | </template>
41 | 


--------------------------------------------------------------------------------
/src/components/ui/menubar/MenubarSubTrigger.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'
 3 | import { ChevronRight } from 'lucide-vue-next'
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | const props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()
 7 | </script>
 8 | 
 9 | <template>
10 |   <MenubarSubTrigger
11 |     v-bind="props"
12 |     :class="[
13 |       cn(
14 |         'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
15 |         inset && 'pl-8',
16 |         props.class,
17 |       ),
18 |     ]"
19 |   >
20 |     <slot />
21 |     <ChevronRight class="ml-auto h-4 w-4" />
22 |   </MenubarSubTrigger>
23 | </template>
24 | 


--------------------------------------------------------------------------------
/src/components/ui/menubar/MenubarTrigger.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { MenubarTrigger, type MenubarTriggerProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<MenubarTriggerProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <MenubarTrigger
10 |     v-bind="props"
11 |     :class="
12 |       cn(
13 |         'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
14 |         props.class,
15 |       )
16 |     "
17 |   >
18 |     <slot />
19 |   </MenubarTrigger>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/src/components/ui/menubar/index.ts:
--------------------------------------------------------------------------------
 1 | export { default as Menubar } from './Menubar.vue'
 2 | export { default as MenubarItem } from './MenubarItem.vue'
 3 | export { default as MenubarContent } from './MenubarContent.vue'
 4 | export { default as MenubarGroup } from './MenubarGroup.vue'
 5 | export { default as MenubarMenu } from './MenubarMenu.vue'
 6 | export { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'
 7 | export { default as MenubarRadioItem } from './MenubarRadioItem.vue'
 8 | export { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'
 9 | export { default as MenubarSeparator } from './MenubarSeparator.vue'
10 | export { default as MenubarSub } from './MenubarSub.vue'
11 | export { default as MenubarSubContent } from './MenubarSubContent.vue'
12 | export { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'
13 | export { default as MenubarTrigger } from './MenubarTrigger.vue'
14 | export { default as MenubarShortcut } from './MenubarShortcut.vue'
15 | export { default as MenubarLabel } from './MenubarLabel.vue'
16 | 


--------------------------------------------------------------------------------
/src/components/ui/popover/Popover.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
 3 | import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
 4 | 
 5 | const props = defineProps<PopoverRootProps>()
 6 | const emits = defineEmits<PopoverRootEmits>()
 7 | 
 8 | const forwarded = useForwardPropsEmits(props, emits)
 9 | </script>
10 | 
11 | <template>
12 |   <PopoverRoot v-bind="forwarded">
13 |     <slot />
14 |   </PopoverRoot>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/src/components/ui/popover/PopoverContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   PopoverContent,
 4 |   type PopoverContentEmits,
 5 |   type PopoverContentProps,
 6 |   PopoverPortal,
 7 |   useForwardPropsEmits,
 8 | } from 'radix-vue'
 9 | import { cn } from '@/lib/utils'
10 | 
11 | const props = withDefaults(
12 |   defineProps<PopoverContentProps & { class?: string }>(),
13 |   {
14 |     sideOffset: 4,
15 |   },
16 | )
17 | const emits = defineEmits<PopoverContentEmits>()
18 | 
19 | const forwarded = useForwardPropsEmits(props, emits)
20 | </script>
21 | 
22 | <template>
23 |   <PopoverPortal>
24 |     <PopoverContent
25 |       v-bind="{ ...forwarded, ...$attrs }"
26 |       :class="
27 |         cn(
28 |           'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
29 |           props.class,
30 |         )
31 |       "
32 |     >
33 |       <slot />
34 |     </PopoverContent>
35 |   </PopoverPortal>
36 | </template>
37 | 


--------------------------------------------------------------------------------
/src/components/ui/popover/PopoverTrigger.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<PopoverTriggerProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <PopoverTrigger v-bind="props">
 9 |     <slot />
10 |   </PopoverTrigger>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/src/components/ui/popover/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Popover } from './Popover.vue'
2 | export { default as PopoverTrigger } from './PopoverTrigger.vue'
3 | export { default as PopoverContent } from './PopoverContent.vue'
4 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-area/ScrollArea.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   ScrollAreaCorner,
 4 |   ScrollAreaRoot,
 5 |   type ScrollAreaRootProps,
 6 |   ScrollAreaViewport,
 7 | } from 'radix-vue'
 8 | import ScrollBar from './ScrollBar.vue'
 9 | import { cn } from '@/lib/utils'
10 | 
11 | const props = withDefaults(
12 |   defineProps<
13 |     ScrollAreaRootProps & { class?: string }
14 |   >(),
15 |   {
16 |     class: '',
17 |     orientation: 'vertical',
18 |   },
19 | )
20 | </script>
21 | 
22 | <template>
23 |   <ScrollAreaRoot :type="type" :class="cn('relative overflow-hidden', props.class)">
24 |     <ScrollAreaViewport class="h-full w-full  rounded-[inherit]">
25 |       <slot />
26 |     </ScrollAreaViewport>
27 |     <ScrollBar />
28 |     <ScrollAreaCorner />
29 |   </ScrollAreaRoot>
30 | </template>
31 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-area/ScrollBar.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {
 6 |   orientation: 'vertical',
 7 | })
 8 | </script>
 9 | 
10 | <template>
11 |   <ScrollAreaScrollbar
12 |     v-bind="props"
13 |     :class="
14 |       cn('flex touch-none select-none transition-colors',
15 |          orientation === 'vertical'
16 |            && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
17 |          orientation === 'horizontal'
18 |            && 'h-2.5 border-t border-t-transparent p-[1px]',
19 |          $attrs.class ?? '')"
20 |   >
21 |     <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
22 |   </ScrollAreaScrollbar>
23 | </template>
24 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-area/index.ts:
--------------------------------------------------------------------------------
1 | export { default as ScrollArea } from './ScrollArea.vue'
2 | export { default as ScrollBar } from './ScrollBar.vue'
3 | 


--------------------------------------------------------------------------------
/src/components/ui/select/Select.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
 3 | import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
 4 | 
 5 | const props = defineProps<SelectRootProps>()
 6 | const emits = defineEmits<SelectRootEmits>()
 7 | 
 8 | const forwarded = useForwardPropsEmits(props, emits)
 9 | </script>
10 | 
11 | <template>
12 |   <SelectRoot v-bind="forwarded">
13 |     <slot />
14 |   </SelectRoot>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/src/components/ui/select/SelectContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   SelectContent,
 4 |   type SelectContentEmits,
 5 |   type SelectContentProps,
 6 |   SelectPortal,
 7 |   SelectViewport,
 8 |   useForwardPropsEmits,
 9 | } from 'radix-vue'
10 | import { cn } from '@/lib/utils'
11 | 
12 | const props = withDefaults(
13 |   defineProps<SelectContentProps & { class?: string }>(), {
14 |     position: 'popper',
15 |     sideOffset: 4,
16 |     avoidCollisions: true,
17 |   },
18 | )
19 | const emits = defineEmits<SelectContentEmits>()
20 | 
21 | const forwarded = useForwardPropsEmits(props, emits)
22 | </script>
23 | 
24 | <template>
25 |   <SelectPortal>
26 |     <SelectContent
27 |       v-bind="{ ...forwarded, ...$attrs }"
28 |       :class="
29 |         cn(
30 |           'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-[--radix-popper-available-height]',
31 |           position === 'popper'
32 |             && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
33 |           props.class,
34 |         )
35 |       "
36 |     >
37 |       <SelectViewport
38 |         :class="
39 |           cn('p-1',
40 |              position === 'popper'
41 |                && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')"
42 |       >
43 |         <slot />
44 |       </SelectViewport>
45 |     </SelectContent>
46 |   </SelectPortal>
47 | </template>
48 | 


--------------------------------------------------------------------------------
/src/components/ui/select/SelectGroup.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { SelectGroup, type SelectGroupProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<SelectGroupProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="props">
10 |     <slot />
11 |   </SelectGroup>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/src/components/ui/select/SelectItem.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   SelectItem,
 4 |   SelectItemIndicator,
 5 |   type SelectItemProps,
 6 |   SelectItemText,
 7 | } from 'radix-vue'
 8 | import { Check } from 'lucide-vue-next'
 9 | import { cn } from '@/lib/utils'
10 | 
11 | const props = defineProps<SelectItemProps & { class?: string }>()
12 | </script>
13 | 
14 | <template>
15 |   <SelectItem
16 |     v-bind="props"
17 |     :class="
18 |       cn(
19 |         'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
20 |         props.class,
21 |       )
22 |     "
23 |   >
24 |     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
25 |       <SelectItemIndicator>
26 |         <Check class="h-4 w-4" />
27 |       </SelectItemIndicator>
28 |     </span>
29 | 
30 |     <SelectItemText>
31 |       <slot />
32 |     </SelectItemText>
33 |   </SelectItem>
34 | </template>
35 | 


--------------------------------------------------------------------------------
/src/components/ui/select/SelectItemText.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { SelectItemText, type SelectItemTextProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<SelectItemTextProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <SelectItemText v-bind="props">
 9 |     <slot />
10 |   </SelectItemText>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/src/components/ui/select/SelectLabel.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { SelectLabel, type SelectLabelProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<SelectLabelProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)">
10 |     <slot />
11 |   </SelectLabel>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/src/components/ui/select/SelectSeparator.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<SelectSeparatorProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <SelectSeparator :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
10 | </template>
11 | 


--------------------------------------------------------------------------------
/src/components/ui/select/SelectTrigger.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'
 3 | import { ChevronDown } from 'lucide-vue-next'
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | const props = withDefaults(
 7 |   defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),
 8 |   {
 9 |     class: '',
10 |     invalid: false,
11 |   },
12 | )
13 | </script>
14 | 
15 | <template>
16 |   <SelectTrigger
17 |     v-bind="props"
18 |     :class="[
19 |       cn(
20 |         'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 whitespace-nowrap [&>span]:truncate [&>span]:min-w-0',
21 |         props.class,
22 |       ),
23 |       props.invalid
24 |         ? '!ring-destructive ring-2 placeholder:!text-destructive'
25 |         : '',
26 |     ]"
27 |   >
28 |     <slot />
29 |     <SelectIcon as-child>
30 |       <ChevronDown class="w-4 h-4 opacity-50" />
31 |     </SelectIcon>
32 |   </SelectTrigger>
33 | </template>
34 | 


--------------------------------------------------------------------------------
/src/components/ui/select/SelectValue.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { SelectValue, type SelectValueProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<SelectValueProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <SelectValue v-bind="props">
 9 |     <slot />
10 |   </SelectValue>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/src/components/ui/select/index.ts:
--------------------------------------------------------------------------------
 1 | export { default as Select } from './Select.vue'
 2 | export { default as SelectValue } from './SelectValue.vue'
 3 | export { default as SelectTrigger } from './SelectTrigger.vue'
 4 | export { default as SelectContent } from './SelectContent.vue'
 5 | export { default as SelectGroup } from './SelectGroup.vue'
 6 | export { default as SelectItem } from './SelectItem.vue'
 7 | export { default as SelectItemText } from './SelectItemText.vue'
 8 | export { default as SelectLabel } from './SelectLabel.vue'
 9 | export { default as SelectSeparator } from './SelectSeparator.vue'
10 | 


--------------------------------------------------------------------------------
/src/components/ui/slider/Slider.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { SliderRootEmits, SliderRootProps } from 'radix-vue'
 3 | import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useEmitAsProps } from 'radix-vue'
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | const props = defineProps<SliderRootProps>()
 7 | const emits = defineEmits<SliderRootEmits>()
 8 | 
 9 | const emitsAsProps = useEmitAsProps(emits)
10 | </script>
11 | 
12 | <template>
13 |   <SliderRoot
14 |     :class="cn('relative flex w-full touch-none select-none items-center', $attrs.class ?? '')"
15 |     v-bind="{ ...props, ...emitsAsProps }"
16 |   >
17 |     <SliderTrack class="relative h-2 w-full grow overflow-hidden rounded-full bg-slate-200">
18 |       <SliderRange class="absolute h-full bg-primary" />
19 |     </SliderTrack>
20 |     <SliderThumb
21 |       class="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
22 |     />
23 |   </SliderRoot>
24 | </template>
25 | 


--------------------------------------------------------------------------------
/src/components/ui/slider/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Slider } from './Slider.vue'
2 | 


--------------------------------------------------------------------------------
/src/components/ui/switch/Switch.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   SwitchRoot,
 4 |   type SwitchRootEmits,
 5 |   type SwitchRootProps,
 6 |   SwitchThumb,
 7 |   useForwardPropsEmits,
 8 | } from 'radix-vue'
 9 | import { cn } from '@/lib/utils'
10 | 
11 | const props = defineProps<SwitchRootProps & { class?: string }>()
12 | const emits = defineEmits<SwitchRootEmits>()
13 | 
14 | const forwarded = useForwardPropsEmits(props, emits)
15 | </script>
16 | 
17 | <template>
18 |   <SwitchRoot
19 |     v-bind="forwarded"
20 |     :class="
21 |       cn(
22 |         'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
23 |         props.class,
24 |       )
25 |     "
26 |   >
27 |     <SwitchThumb
28 |       :class="
29 |         cn(
30 |           'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
31 |         )
32 |       "
33 |     />
34 |   </SwitchRoot>
35 | </template>
36 | 


--------------------------------------------------------------------------------
/src/components/ui/switch/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Switch } from './Switch.vue'
2 | 


--------------------------------------------------------------------------------
/src/components/ui/tabs/Tabs.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
 3 | import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
 4 | 
 5 | const props = defineProps<TabsRootProps>()
 6 | const emits = defineEmits<TabsRootEmits>()
 7 | 
 8 | const forwarded = useForwardPropsEmits(props, emits)
 9 | </script>
10 | 
11 | <template>
12 |   <TabsRoot v-bind="forwarded">
13 |     <slot />
14 |   </TabsRoot>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/src/components/ui/tabs/TabsContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { TabsContent, type TabsContentProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<TabsContentProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <TabsContent
10 |     :class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
11 |     v-bind="props"
12 |   >
13 |     <slot />
14 |   </TabsContent>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/src/components/ui/tabs/TabsList.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { TabsList, type TabsListProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<TabsListProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <TabsList
10 |     v-bind="props"
11 |     :class="
12 |       cn(
13 |         'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
14 |         props.class,
15 |       )
16 |     "
17 |   >
18 |     <slot />
19 |   </TabsList>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/src/components/ui/tabs/TabsTrigger.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { TabsTrigger, type TabsTriggerProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<TabsTriggerProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <TabsTrigger
10 |     v-bind="props"
11 |     :class="
12 |       cn(
13 |         'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-primary data-[state=active]:shadow-sm',
14 |         props.class
15 |       )
16 |     "
17 |   >
18 |     <slot />
19 |   </TabsTrigger>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/src/components/ui/tabs/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Tabs } from './Tabs.vue'
2 | export { default as TabsTrigger } from './TabsTrigger.vue'
3 | export { default as TabsList } from './TabsList.vue'
4 | export { default as TabsContent } from './TabsContent.vue'
5 | 


--------------------------------------------------------------------------------
/src/components/ui/textarea/Textarea.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useVModel } from '@vueuse/core'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<{
 6 |   defaultValue?: string | number
 7 |   modelValue?: string | number
 8 | }>()
 9 | 
10 | const emits = defineEmits<{
11 |   (e: 'update:modelValue', payload: string | number): void
12 | }>()
13 | 
14 | const modelValue = useVModel(props, 'modelValue', emits, {
15 |   passive: true,
16 |   defaultValue: props.defaultValue,
17 | })
18 | </script>
19 | 
20 | <template>
21 |   <textarea v-model="modelValue" :class="cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')" />
22 | </template>
23 | 


--------------------------------------------------------------------------------
/src/components/ui/textarea/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Textarea } from './Textarea.vue'
2 | 


--------------------------------------------------------------------------------
/src/components/ui/toast/Toast.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import type { ToastRootEmits, ToastRootProps } from 'radix-vue'
 3 | import type { VariantProps } from 'class-variance-authority'
 4 | 
 5 | interface ToastVariantProps extends VariantProps<typeof toastVariants> {}
 6 | 
 7 | export interface ToastProps extends ToastRootProps {
 8 |   class?: string
 9 |   variant?: ToastVariantProps['variant']
10 |   'onOpenChange'?: ((value: boolean) => void) | undefined
11 | };
12 | </script>
13 | 
14 | <script setup lang="ts">
15 | import { ToastRoot, useEmitAsProps } from 'radix-vue'
16 | 
17 | import { toastVariants } from '.'
18 | import { cn } from '@/lib/utils'
19 | 
20 | const props = defineProps<ToastProps>()
21 | const emits = defineEmits<ToastRootEmits>()
22 | </script>
23 | 
24 | <template>
25 |   <ToastRoot
26 |     v-bind="{ ...props, ...useEmitAsProps(emits) }"
27 |     :class="cn(toastVariants({ variant: props.variant }), props.class)"
28 |     @update:open="onOpenChange"
29 |   >
30 |     <slot />
31 |   </ToastRoot>
32 | </template>
33 | 


--------------------------------------------------------------------------------
/src/components/ui/toast/ToastAction.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ToastAction, type ToastActionProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<ToastActionProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <ToastAction v-bind="props" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
10 |     <slot />
11 |   </ToastAction>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/src/components/ui/toast/ToastClose.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ToastClose } from 'radix-vue'
 3 | import { XIcon } from 'lucide-vue-next'
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | const props = defineProps<{
 7 |   class?: string
 8 | }>()
 9 | </script>
10 | 
11 | <template>
12 |   <ToastClose v-bind="props" :class="cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
13 |     <XIcon class="h-4 w-4" />
14 |   </ToastClose>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/src/components/ui/toast/ToastDescription.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ToastDescription, type ToastDescriptionProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<ToastDescriptionProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <ToastDescription :class="cn('text-sm opacity-90', props.class)" v-bind="props">
10 |     <slot />
11 |   </ToastDescription>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/src/components/ui/toast/ToastProvider.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ToastProvider, type ToastProviderProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<ToastProviderProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <ToastProvider v-bind="props">
 9 |     <slot />
10 |   </ToastProvider>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/src/components/ui/toast/ToastTitle.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ToastTitle, type ToastTitleProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<ToastTitleProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <ToastTitle v-bind="props" :class="cn('text-sm font-semibold', props.class)">
10 |     <slot />
11 |   </ToastTitle>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/src/components/ui/toast/ToastViewport.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ToastViewport, type ToastViewportProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<ToastViewportProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <ToastViewport v-bind="props" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
10 | </template>
11 | 


--------------------------------------------------------------------------------
/src/components/ui/toast/Toaster.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { isVNode } from 'vue'
 3 | import { useToast } from './use-toast'
 4 | import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'
 5 | 
 6 | const { toasts } = useToast()
 7 | </script>
 8 | 
 9 | <template>
10 |   <ToastProvider>
11 |     <Toast v-for="toast in toasts" :key="toast.id" v-bind="toast">
12 |       <div class="grid gap-1">
13 |         <ToastTitle v-if="toast.title">
14 |           {{ toast.title }}
15 |         </ToastTitle>
16 |         <template v-if="toast.description">
17 |           <ToastDescription v-if="isVNode(toast.description)">
18 |             <component :is="toast.description" />
19 |           </ToastDescription>
20 |           <ToastDescription v-else>
21 |             {{ toast.description }}
22 |           </ToastDescription>
23 |         </template>
24 |         <ToastClose />
25 |       </div>
26 |       <component :is="toast.action" />
27 |     </Toast>
28 |     <ToastViewport />
29 |   </ToastProvider>
30 | </template>
31 | 


--------------------------------------------------------------------------------
/src/components/ui/toast/index.ts:
--------------------------------------------------------------------------------
 1 | export { default as Toaster } from './Toaster.vue'
 2 | export { default as Toast } from './Toast.vue'
 3 | export { default as ToastViewport } from './ToastViewport.vue'
 4 | export { default as ToastAction } from './ToastAction.vue'
 5 | export { default as ToastClose } from './ToastClose.vue'
 6 | export { default as ToastTitle } from './ToastTitle.vue'
 7 | export { default as ToastDescription } from './ToastDescription.vue'
 8 | export { default as ToastProvider } from './ToastProvider.vue'
 9 | export { toast, useToast } from './use-toast'
10 | 
11 | import { cva } from 'class-variance-authority'
12 | 
13 | export const toastVariants = cva(
14 |   'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
15 |   {
16 |     variants: {
17 |       variant: {
18 |         default: 'border bg-background text-foreground',
19 |         destructive:
20 |                     'destructive group border-destructive bg-destructive text-destructive-foreground',
21 |       },
22 |     },
23 |     defaultVariants: {
24 |       variant: 'default',
25 |     },
26 |   },
27 | )
28 | 


--------------------------------------------------------------------------------
/src/components/ui/toast/use-toast.ts:
--------------------------------------------------------------------------------
  1 | import { computed, ref } from 'vue'
  2 | import type { Component, VNode } from 'vue'
  3 | import type { ToastProps } from './Toast.vue'
  4 | 
  5 | const TOAST_LIMIT = 1
  6 | const TOAST_REMOVE_DELAY = 1000000
  7 | 
  8 | export type StringOrVNode =
  9 |   | string
 10 |   | VNode
 11 |   | (() => VNode)
 12 | 
 13 | type ToasterToast = ToastProps & {
 14 |   id: string
 15 |   title?: string
 16 |   description?: StringOrVNode
 17 |   action?: Component
 18 | }
 19 | 
 20 | const actionTypes = {
 21 |   ADD_TOAST: 'ADD_TOAST',
 22 |   UPDATE_TOAST: 'UPDATE_TOAST',
 23 |   DISMISS_TOAST: 'DISMISS_TOAST',
 24 |   REMOVE_TOAST: 'REMOVE_TOAST',
 25 | } as const
 26 | 
 27 | let count = 0
 28 | 
 29 | function genId() {
 30 |   count = (count + 1) % Number.MAX_VALUE
 31 |   return count.toString()
 32 | }
 33 | 
 34 | type ActionType = typeof actionTypes
 35 | 
 36 | type Action =
 37 |   | {
 38 |     type: ActionType['ADD_TOAST']
 39 |     toast: ToasterToast
 40 |   }
 41 |   | {
 42 |     type: ActionType['UPDATE_TOAST']
 43 |     toast: Partial<ToasterToast>
 44 |   }
 45 |   | {
 46 |     type: ActionType['DISMISS_TOAST']
 47 |     toastId?: ToasterToast['id']
 48 |   }
 49 |   | {
 50 |     type: ActionType['REMOVE_TOAST']
 51 |     toastId?: ToasterToast['id']
 52 |   }
 53 | 
 54 | interface State {
 55 |   toasts: ToasterToast[]
 56 | }
 57 | 
 58 | const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 59 | 
 60 | function addToRemoveQueue(toastId: string) {
 61 |   if (toastTimeouts.has(toastId))
 62 |     return
 63 | 
 64 |   const timeout = setTimeout(() => {
 65 |     toastTimeouts.delete(toastId)
 66 |     dispatch({
 67 |       type: actionTypes.REMOVE_TOAST,
 68 |       toastId,
 69 |     })
 70 |   }, TOAST_REMOVE_DELAY)
 71 | 
 72 |   toastTimeouts.set(toastId, timeout)
 73 | }
 74 | 
 75 | const state = ref<State>({
 76 |   toasts: [],
 77 | })
 78 | 
 79 | function dispatch(action: Action) {
 80 |   switch (action.type) {
 81 |     case actionTypes.ADD_TOAST:
 82 |       state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)
 83 |       break
 84 | 
 85 |     case actionTypes.UPDATE_TOAST:
 86 |       state.value.toasts = state.value.toasts.map(t =>
 87 |         t.id === action.toast.id ? { ...t, ...action.toast } : t,
 88 |       )
 89 |       break
 90 | 
 91 |     case actionTypes.DISMISS_TOAST: {
 92 |       const { toastId } = action
 93 | 
 94 |       if (toastId) {
 95 |         addToRemoveQueue(toastId)
 96 |       }
 97 |       else {
 98 |         state.value.toasts.forEach((toast) => {
 99 |           addToRemoveQueue(toast.id)
100 |         })
101 |       }
102 | 
103 |       state.value.toasts = state.value.toasts.map(t =>
104 |         t.id === toastId || toastId === undefined
105 |           ? {
106 |               ...t,
107 |               open: false,
108 |             }
109 |           : t,
110 |       )
111 |       break
112 |     }
113 | 
114 |     case actionTypes.REMOVE_TOAST:
115 |       if (action.toastId === undefined)
116 |         state.value.toasts = []
117 |       else
118 |         state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)
119 | 
120 |       break
121 |   }
122 | }
123 | 
124 | function useToast() {
125 |   return {
126 |     toasts: computed(() => state.value.toasts),
127 |     toast,
128 |     dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),
129 |   }
130 | }
131 | 
132 | type Toast = Omit<ToasterToast, 'id'>
133 | 
134 | function toast(props: Toast) {
135 |   const id = genId()
136 | 
137 |   const update = (props: ToasterToast) =>
138 |     dispatch({
139 |       type: actionTypes.UPDATE_TOAST,
140 |       toast: { ...props, id },
141 |     })
142 | 
143 |   const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })
144 | 
145 |   dispatch({
146 |     type: actionTypes.ADD_TOAST,
147 |     toast: {
148 |       ...props,
149 |       id,
150 |       open: true,
151 |       onOpenChange: (open: boolean) => {
152 |         if (!open)
153 |           dismiss()
154 |       },
155 |     },
156 |   })
157 | 
158 |   return {
159 |     id,
160 |     dismiss,
161 |     update,
162 |   }
163 | }
164 | 
165 | export { toast, useToast }
166 | 


--------------------------------------------------------------------------------
/src/components/ui/tooltip/Tooltip.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'
 3 | 
 4 | const props = defineProps<TooltipRootProps>()
 5 | const emits = defineEmits<TooltipRootEmits>()
 6 | 
 7 | const forwarded = useForwardPropsEmits(props, emits)
 8 | </script>
 9 | 
10 | <template>
11 |   <TooltipRoot v-bind="forwarded">
12 |     <slot />
13 |   </TooltipRoot>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/src/components/ui/tooltip/TooltipContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = withDefaults(defineProps<TooltipContentProps>(), {
 6 |   sideOffset: 4,
 7 | })
 8 | const emits = defineEmits<TooltipContentEmits>()
 9 | 
10 | const forwarded = useForwardPropsEmits(props, emits)
11 | </script>
12 | 
13 | <template>
14 |   <TooltipPortal>
15 |     <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')">
16 |       <slot />
17 |     </TooltipContent>
18 |   </TooltipPortal>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/src/components/ui/tooltip/TooltipProvider.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { TooltipProvider, type TooltipProviderProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<TooltipProviderProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <TooltipProvider v-bind="props">
 9 |     <slot />
10 |   </TooltipProvider>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/src/components/ui/tooltip/TooltipTrigger.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<TooltipTriggerProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <TooltipTrigger v-bind="props">
 9 |     <slot />
10 |   </TooltipTrigger>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/src/components/ui/tooltip/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Tooltip } from './Tooltip.vue'
2 | export { default as TooltipContent } from './TooltipContent.vue'
3 | export { default as TooltipTrigger } from './TooltipTrigger.vue'
4 | export { default as TooltipProvider } from './TooltipProvider.vue'
5 | 


--------------------------------------------------------------------------------
/src/components/vue-flow/common-basic-module.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { ref } from 'vue'
 3 | import { AlertCircleIcon } from 'lucide-vue-next'
 4 | import { Select, SelectValue, SelectTrigger, SelectContent, SelectItem, SelectGroup } from '@/components/ui/select'
 5 | import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 6 | import { Label } from '@/components/ui/label'
 7 | import { Input } from '@/components/ui/input'
 8 | 
 9 | const data = ref({
10 |   model: '',
11 |   temperature: ''
12 | })
13 | </script>
14 | 
15 | <template>
16 |   <div class="grid grid-cols-2 divide-x-2 rounded-md bg-muted px-3 py-4">
17 |     <div class="grid w-full gap-1.5 pr-4">
18 |       <Label for="Model">Model</Label>
19 |       <Select id="Model" v-model="data.model">
20 |         <select-trigger>
21 |           <select-value placeholder="select a model" />
22 |         </select-trigger>
23 |         <select-content>
24 |           <select-group>
25 |             <select-item value="GPT-3.5(16K)"> GPT-3.5(16K) </select-item>
26 |             <select-item value="GPT-4(8K)"> GPT-4(8K) </select-item>
27 |             <select-item value="GPT-4 Turbo(128K)"> GPT-4 Turbo(128K) </select-item>
28 |           </select-group>
29 |         </select-content>
30 |       </Select>
31 |     </div>
32 | 
33 |     <div class="grid w-full gap-1.5 pl-4">
34 |       <Label for="Temperature" class="flex items-center gap-x-2">
35 |         Temperature
36 |         <tooltip-provider>
37 |           <tooltip>
38 |             <tooltip-trigger>
39 |               <alert-circle-icon class="h-3 w-3 text-muted-foreground" />
40 |             </tooltip-trigger>
41 |             <tooltip-content>
42 |               <p class="max-w-60">
43 |                 Used to control the randomness of large models generating text. When set higher, the model will generate
44 |                 more diversified text, increasing uncertainty; when set lower, the model will generate high probability
45 |                 words, reducing uncertainty.
46 |               </p>
47 |             </tooltip-content>
48 |           </tooltip>
49 |         </tooltip-provider>
50 |       </Label>
51 |       <Input v-model="data.temperature" />
52 |     </div>
53 |   </div>
54 | </template>
55 | 


--------------------------------------------------------------------------------
/src/components/vue-flow/common-code-module.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { ref } from 'vue'
 3 | import { ChevronsUpDownIcon, SquarePenIcon } from 'lucide-vue-next'
 4 | import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible'
 5 | import { Button } from '@/components/ui/button'
 6 | import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
 7 | import MonacoEditor from '../monaco-editor.vue'
 8 | 
 9 | const isOpen = ref(true)
10 | 
11 | const code = ref(
12 |   'async function main({ params }: Args): Promise<Output> {\n    const ret = {\n        "key0": params.input + params.input,\n                      };\n    return ret;\n}'
13 | )
14 | </script>
15 | 
16 | <template>
17 |   <div class="rounded-md bg-muted px-3 py-4">
18 |     <Collapsible v-model:open="isOpen">
19 |       <collapsible-trigger as-child>
20 |         <div class="flex w-full items-center justify-between">
21 |           <div class="flex items-center gap-x-2">
22 |             <chevrons-up-down-icon class="h-4 w-4 cursor-pointer" />
23 |             <p>Code</p>
24 |           </div>
25 |           <Dialog>
26 |             <DialogTrigger @click="(e: Event) => e.stopPropagation()">
27 |               <Button variant="ghost" class="flex items-center gap-x-1 text-primary">
28 |                 <SquarePenIcon class="h-4 w-4" />
29 |                 <p>Edit in IDE</p>
30 |               </Button>
31 |             </DialogTrigger>
32 |             <DialogContent class="w-full! max-w-full! h-full">
33 |               <monaco-editor v-model="code" />
34 |             </DialogContent>
35 |           </Dialog>
36 |         </div>
37 |       </collapsible-trigger>
38 |       <collapsible-content class="space-y-3 px-3 py-3">
39 |         <div class="h-96 w-full">
40 |           <monaco-editor v-model="code" :editor-option="{ readOnly: true }" />
41 |         </div>
42 |       </collapsible-content>
43 |     </Collapsible>
44 |   </div>
45 | </template>
46 | 


--------------------------------------------------------------------------------
/src/components/vue-flow/common-input-module.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { PropType, ref, watchEffect } from 'vue'
  3 | import { ChevronsUpDownIcon, PlusIcon, AlertCircleIcon, MinusCircleIcon } from 'lucide-vue-next'
  4 | import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
  5 | import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible'
  6 | import {
  7 |   Select,
  8 |   SelectContent,
  9 |   SelectGroup,
 10 |   SelectItem,
 11 |   SelectTrigger,
 12 |   SelectValue,
 13 |   SelectLabel
 14 | } from '@/components/ui/select'
 15 | import { Input } from '@/components/ui/input'
 16 | import { Button } from '@/components/ui/button'
 17 | import { Label } from '@/components/ui/label'
 18 | import { useNode, useVueFlow } from '@vue-flow/core'
 19 | 
 20 | type InputItem = {
 21 |   name: string
 22 |   type: 'reference' | 'input'
 23 |   value: string
 24 | }
 25 | 
 26 | type Option = {
 27 |   groupName: string
 28 |   options: {
 29 |     label: string
 30 |     value: string
 31 |   }[]
 32 | }
 33 | 
 34 | const props = defineProps({
 35 |   staticNameKey: {
 36 |     type: [String, Array] as PropType<string | Array<string>>,
 37 |     default: ''
 38 |   }
 39 | })
 40 | 
 41 | const isOpen = ref(true)
 42 | const data = ref<InputItem[]>([])
 43 | watchEffect(() => {
 44 |   if (props.staticNameKey) {
 45 |     if (typeof props.staticNameKey === 'string') {
 46 |       data.value.push({
 47 |         name: props.staticNameKey,
 48 |         type: 'reference',
 49 |         value: ''
 50 |       })
 51 |     } else {
 52 |       props.staticNameKey.forEach((key) => {
 53 |         data.value.push({
 54 |           name: key,
 55 |           type: 'reference',
 56 |           value: ''
 57 |         })
 58 |       })
 59 |     }
 60 |   }
 61 | })
 62 | 
 63 | const referenceOptions = ref<Option[]>([])
 64 | 
 65 | const node = useNode()
 66 | const { findNode } = useVueFlow()
 67 | watchEffect(() => {
 68 |   if (node.connectedEdges && node.connectedEdges.value.length > 0) {
 69 |     const filteredEdges = node.connectedEdges.value.filter((item) => item.target === node.id)
 70 |     referenceOptions.value = filteredEdges.map((edge) => {
 71 |       const node = findNode(edge.source)
 72 |       const currentItem: Option = {
 73 |         groupName: node?.data.title ?? node?.label,
 74 |         options: []
 75 |       }
 76 | 
 77 |       if (node?.data.output) {
 78 |         node?.data.output
 79 |           .filter((item: any) => Boolean(item.name))
 80 |           .forEach((option: any) => {
 81 |             currentItem.options.push({
 82 |               label: option.name,
 83 |               value: option.name
 84 |             })
 85 |           })
 86 |       } else {
 87 |         currentItem.options = []
 88 |       }
 89 |       return currentItem
 90 |     })
 91 |   }
 92 | })
 93 | 
 94 | function handleOnClickAddBtnInInput(e: Event) {
 95 |   e.stopPropagation()
 96 |   isOpen.value = true
 97 |   data.value.push({ name: '', type: 'reference', value: '' })
 98 | }
 99 | 
100 | function handleClickDeleteBtnInInput(index: number) {
101 |   data.value.splice(index, 1)
102 | }
103 | </script>
104 | 
105 | <template>
106 |   <div class="rounded-md bg-muted px-3 py-4">
107 |     <Collapsible v-model:open="isOpen">
108 |       <collapsible-trigger as-child>
109 |         <div class="flex w-full items-center justify-between">
110 |           <div class="flex items-center gap-x-2">
111 |             <chevrons-up-down-icon class="h-4 w-4 cursor-pointer" />
112 |             <p>Input</p>
113 |             <tooltip-provider>
114 |               <tooltip>
115 |                 <tooltip-trigger>
116 |                   <alert-circle-icon class="h-3 w-3 text-muted-foreground" />
117 |                 </tooltip-trigger>
118 |                 <tooltip-content>
119 |                   <p class="max-w-60">
120 |                     Enter the information that needs to be added to the prompt words, which can be referenced by the
121 |                     prompt words.
122 |                   </p>
123 |                 </tooltip-content>
124 |               </tooltip>
125 |             </tooltip-provider>
126 |           </div>
127 |           <Button variant="ghost">
128 |             <plus-icon
129 |               class="h-4 w-4 cursor-pointer text-primary"
130 |               @click="handleOnClickAddBtnInInput"
131 |               v-if="!staticNameKey"
132 |             />
133 |           </Button>
134 |         </div>
135 |       </collapsible-trigger>
136 |       <collapsible-content class="space-y-3 px-3 py-3">
137 |         <div class="flex gap-x-4">
138 |           <Label class="w-3/12 text-sm text-muted-foreground">Name</Label>
139 |           <Label class="w-3/12 text-sm text-muted-foreground">Type</Label>
140 |           <Label class="w-6/12 text-sm text-muted-foreground">Value</Label>
141 |         </div>
142 |         <div class="flex gap-x-4" v-for="(item, index) in data" :key="index">
143 |           <div class="w-3/12">
144 |             <p v-if="staticNameKey">{{ item.name }}</p>
145 |             <Input v-model="item.name" placeholder="Enter name" v-else />
146 |           </div>
147 |           <div class="w-3/12">
148 |             <Select v-model="item.type">
149 |               <SelectTrigger class="w-full">
150 |                 <SelectValue placeholder="Select Type" />
151 |               </SelectTrigger>
152 |               <SelectContent>
153 |                 <SelectGroup>
154 |                   <SelectItem value="reference"> Reference </SelectItem>
155 |                   <SelectItem value="input"> Input </SelectItem>
156 |                 </SelectGroup>
157 |               </SelectContent>
158 |             </Select>
159 |           </div>
160 |           <div class="flex w-6/12 cursor-pointer items-center gap-x-2">
161 |             <Select v-if="item.type === 'reference'" v-model="item.value">
162 |               <SelectTrigger class="w-full">
163 |                 <SelectValue placeholder="please select" />
164 |               </SelectTrigger>
165 |               <SelectContent>
166 |                 <SelectGroup v-for="(group, index) in referenceOptions" :key="index" v-if="referenceOptions.length > 0">
167 |                   <SelectLabel>{{ group.groupName }}</SelectLabel>
168 |                   <SelectItem v-for="option in group.options" :key="option.value" :value="option.value">
169 |                     {{ option.label }}
170 |                   </SelectItem>
171 |                 </SelectGroup>
172 |                 <p class="px-2 text-muted-foreground" v-else>no items</p>
173 |               </SelectContent>
174 |             </Select>
175 |             <Input v-model="item.value" placeholder="Enter value" v-else />
176 |             <minus-circle-icon
177 |               class="h-4 w-4"
178 |               @click="() => handleClickDeleteBtnInInput(index)"
179 |               v-if="!staticNameKey"
180 |             />
181 |           </div>
182 |         </div>
183 |       </collapsible-content>
184 |     </Collapsible>
185 |   </div>
186 | </template>
187 | 


--------------------------------------------------------------------------------
/src/components/vue-flow/common-knowledge-module.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { ref } from 'vue'
  3 | import { ChevronsUpDownIcon, PlusIcon, AlertCircleIcon, MinusCircleIcon } from 'lucide-vue-next'
  4 | import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
  5 | import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible'
  6 | import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
  7 | import { Button } from '@/components/ui/button'
  8 | import { Slider } from '@/components/ui/slider'
  9 | 
 10 | type KnowledgeItem = {
 11 |   knowledgeId: string
 12 | }
 13 | 
 14 | const isOpen = ref(true)
 15 | const data = ref<{
 16 |   relatedKnowledgeArray: KnowledgeItem[]
 17 |   maxRecalls: number[]
 18 |   minMatchingDegree: number[]
 19 | }>({
 20 |   relatedKnowledgeArray: [{ knowledgeId: '' }],
 21 |   maxRecalls: [3],
 22 |   minMatchingDegree: [0.4]
 23 | })
 24 | 
 25 | const knowledgeOptions = ref([
 26 |   {
 27 |     label: 'knowledge-base1',
 28 |     value: 'knowledge-base1Id1'
 29 |   },
 30 |   {
 31 |     label: 'knowledge-base2',
 32 |     value: 'knowledge-base1Id2'
 33 |   }
 34 | ])
 35 | 
 36 | function handleOnClickAddBtnInInput(e: Event) {
 37 |   e.stopPropagation()
 38 |   isOpen.value = true
 39 |   data.value.relatedKnowledgeArray.push({
 40 |     knowledgeId: ''
 41 |   })
 42 | }
 43 | 
 44 | function handleClickDeleteBtnInInput(index: number) {
 45 |   data.value.relatedKnowledgeArray.splice(index, 1)
 46 | }
 47 | </script>
 48 | 
 49 | <template>
 50 |   <div class="rounded-md bg-muted px-3 py-4">
 51 |     <Collapsible v-model:open="isOpen">
 52 |       <collapsible-trigger as-child>
 53 |         <div class="flex w-full items-center justify-between">
 54 |           <div class="flex items-center gap-x-2">
 55 |             <chevrons-up-down-icon class="h-4 w-4 cursor-pointer" />
 56 |             <p>Knowledge</p>
 57 |             <tooltip-provider>
 58 |               <tooltip>
 59 |                 <tooltip-trigger>
 60 |                   <alert-circle-icon class="h-3 w-3 text-muted-foreground" />
 61 |                 </tooltip-trigger>
 62 |                 <tooltip-content>
 63 |                   <p class="max-w-60">
 64 |                     Select the range of knowledge that needs to be matched, and recall information only from the
 65 |                     selected knowledge
 66 |                   </p>
 67 |                 </tooltip-content>
 68 |               </tooltip>
 69 |             </tooltip-provider>
 70 |           </div>
 71 |           <Button variant="ghost">
 72 |             <plus-icon class="h-4 w-4 cursor-pointer text-primary" @click="handleOnClickAddBtnInInput" />
 73 |           </Button>
 74 |         </div>
 75 |       </collapsible-trigger>
 76 |       <collapsible-content class="space-y-3 px-3 py-3">
 77 |         <div
 78 |           class="flex w-full cursor-pointer items-center gap-x-2"
 79 |           v-for="(item, index) in data.relatedKnowledgeArray"
 80 |           :key="index"
 81 |         >
 82 |           <Select v-model="item.knowledgeId">
 83 |             <SelectTrigger class="w-full">
 84 |               <SelectValue placeholder="Select knowledge" />
 85 |             </SelectTrigger>
 86 |             <SelectContent>
 87 |               <SelectGroup v-for="(item, index) in knowledgeOptions" :key="index" v-if="knowledgeOptions.length > 0">
 88 |                 <SelectItem :key="item.value" :value="item.value">
 89 |                   {{ item.label }}
 90 |                 </SelectItem>
 91 |               </SelectGroup>
 92 |               <p class="px-2 text-muted-foreground" v-else>no items</p>
 93 |             </SelectContent>
 94 |           </Select>
 95 |           <minus-circle-icon class="h-4 w-4" @click="() => handleClickDeleteBtnInInput(index)" />
 96 |         </div>
 97 |         <div class="flex gap-x-8">
 98 |           <div class="flex w-52 items-center gap-x-1">
 99 |             <p class="text-nowrap text-sm text-muted-foreground">Maximum number of recalls</p>
100 |             <tooltip-provider>
101 |               <tooltip>
102 |                 <tooltip-trigger>
103 |                   <alert-circle-icon class="h-3 w-3 text-muted-foreground" />
104 |                 </tooltip-trigger>
105 |                 <tooltip-content>
106 |                   <p class="max-w-60">
107 |                     The maximum number of paragraphs returned to the model from knowledge. The larger the number, the
108 |                     more content is returned.
109 |                   </p>
110 |                 </tooltip-content>
111 |               </tooltip>
112 |             </tooltip-provider>
113 |           </div>
114 |           <Slider v-model="data.maxRecalls" :max="10" :min="1" :step="1" />
115 |           <p class="w-8">
116 |             {{ data.maxRecalls?.[0] }}
117 |           </p>
118 |         </div>
119 |         <div class="flex gap-x-8">
120 |           <div class="flex w-52 items-center gap-x-1">
121 |             <p class="text-nowrap text-sm text-muted-foreground">Minimum matching degree</p>
122 |             <tooltip-provider>
123 |               <tooltip>
124 |                 <tooltip-trigger>
125 |                   <alert-circle-icon class="h-3 w-3 text-muted-foreground" />
126 |                 </tooltip-trigger>
127 |                 <tooltip-content>
128 |                   <p class="max-w-60">
129 |                     Select paragraphs according to the set matching degree and return it to the model. Content with a
130 |                     matching degree lower that the set will not be recalled.
131 |                   </p>
132 |                 </tooltip-content>
133 |               </tooltip>
134 |             </tooltip-provider>
135 |           </div>
136 |           <Slider v-model="data.minMatchingDegree" :max="0.99" :min="0.01" :step="0.1" />
137 |           <p class="w-8">
138 |             {{ data.minMatchingDegree?.[0] }}
139 |           </p>
140 |         </div>
141 |       </collapsible-content>
142 |     </Collapsible>
143 |   </div>
144 | </template>
145 | 


--------------------------------------------------------------------------------
/src/components/vue-flow/common-output-module.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { PropType, ref } from 'vue'
  3 | import { useNode } from '@vue-flow/core'
  4 | import { ChevronsUpDownIcon, PlusIcon, AlertCircleIcon, MinusCircleIcon } from 'lucide-vue-next'
  5 | import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
  6 | import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible'
  7 | import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
  8 | import { Input } from '@/components/ui/input'
  9 | import { Button } from '@/components/ui/button'
 10 | import { Label } from '@/components/ui/label'
 11 | 
 12 | type Output = {
 13 |   name: string
 14 |   type: string
 15 |   description: string
 16 | }
 17 | 
 18 | const props = defineProps({
 19 |   data: {
 20 |     type: Object as PropType<Output[]>,
 21 |     default: () => []
 22 |   }
 23 | })
 24 | 
 25 | const typesOptions = [
 26 |   {
 27 |     value: 'String',
 28 |     label: 'String'
 29 |   },
 30 |   {
 31 |     value: 'Integer',
 32 |     label: 'Integer'
 33 |   },
 34 |   {
 35 |     value: 'Boolean',
 36 |     label: 'Boolean'
 37 |   },
 38 |   {
 39 |     value: 'Number',
 40 |     label: 'Number'
 41 |   },
 42 |   {
 43 |     value: 'Object',
 44 |     label: 'Object'
 45 |   },
 46 |   {
 47 |     value: 'Array<String>',
 48 |     label: 'Array<String>'
 49 |   },
 50 |   {
 51 |     value: 'Array<Integer>',
 52 |     label: 'Array<Integer>'
 53 |   },
 54 |   {
 55 |     value: 'Array<Boolean>',
 56 |     label: 'Array<Boolean>'
 57 |   },
 58 |   {
 59 |     value: 'Array<Number>',
 60 |     label: 'Array<Number>'
 61 |   },
 62 |   {
 63 |     value: 'Array<Object>',
 64 |     label: 'Array<Object>,'
 65 |   }
 66 | ]
 67 | 
 68 | const node = useNode()
 69 | 
 70 | const isOpen = ref(false)
 71 | const data = ref<Output[]>(props.data)
 72 | if (props.data.length !== 0) {
 73 |   isOpen.value = true
 74 |   node.node.data = {
 75 |     ...node.node.data,
 76 |     output: data
 77 |   }
 78 | }
 79 | 
 80 | function handleOnClickAddBtnInInput(e: Event) {
 81 |   e.stopPropagation()
 82 |   isOpen.value = true
 83 |   data.value.push({ name: '', type: '', description: '' })
 84 |   node.node.data = {
 85 |     ...node.node.data,
 86 |     output: data
 87 |   }
 88 | }
 89 | 
 90 | function handleClickDeleteBtnInInput(index: number) {
 91 |   data.value.splice(index, 1)
 92 |   node.node.data = {
 93 |     ...node.node.data,
 94 |     output: data
 95 |   }
 96 | }
 97 | </script>
 98 | 
 99 | <template>
100 |   <div class="rounded-md bg-muted px-3 py-4">
101 |     <Collapsible v-model:open="isOpen">
102 |       <collapsible-trigger as-child>
103 |         <div class="flex w-full items-center justify-between">
104 |           <div class="flex items-center gap-x-2">
105 |             <chevrons-up-down-icon class="h-4 w-4 cursor-pointer" />
106 |             <p>Output</p>
107 |             <tooltip-provider>
108 |               <tooltip>
109 |                 <tooltip-trigger>
110 |                   <alert-circle-icon class="h-3 w-3 text-muted-foreground" />
111 |                 </tooltip-trigger>
112 |                 <tooltip-content>
113 |                   <p class="max-w-60">
114 |                     Enter the information that needs to be added to the prompt words, which can be referenced by the
115 |                     prompt words.
116 |                   </p>
117 |                 </tooltip-content>
118 |               </tooltip>
119 |             </tooltip-provider>
120 |           </div>
121 |           <Button variant="ghost">
122 |             <plus-icon class="h-4 w-4 cursor-pointer text-primary" @click="handleOnClickAddBtnInInput" />
123 |           </Button>
124 |         </div>
125 |       </collapsible-trigger>
126 |       <collapsible-content class="space-y-3 px-3 py-3">
127 |         <div class="flex gap-x-4">
128 |           <Label class="w-4/12 text-sm text-muted-foreground">Name</Label>
129 |           <Label class="w-2/12 text-sm text-muted-foreground">Type</Label>
130 |           <Label class="w-6/12 text-sm text-muted-foreground">Description</Label>
131 |         </div>
132 |         <div class="flex gap-x-4" v-for="(item, index) in data" :key="index">
133 |           <div class="w-3/12">
134 |             <Input v-model="item.name" placeholder="Enter name" />
135 |           </div>
136 |           <div class="w-3/12">
137 |             <Select>
138 |               <SelectTrigger class="w-full">
139 |                 <SelectValue placeholder="Select type" />
140 |               </SelectTrigger>
141 |               <SelectContent>
142 |                 <SelectGroup>
143 |                   <SelectItem v-for="option in typesOptions" :value="option.value" :key="option.value">
144 |                     {{ option?.label }}</SelectItem
145 |                   >
146 |                 </SelectGroup>
147 |               </SelectContent>
148 |             </Select>
149 |           </div>
150 |           <div class="flex w-6/12 cursor-pointer items-center gap-x-2">
151 |             <Input v-model="item.description" placeholder="Describe what the variable is used for" />
152 |             <minus-circle-icon class="h-4 w-4 text-primary" @click="() => handleClickDeleteBtnInInput(index)" />
153 |           </div>
154 |         </div>
155 |       </collapsible-content>
156 |     </Collapsible>
157 |   </div>
158 | </template>
159 | 


--------------------------------------------------------------------------------
/src/components/vue-flow/common-prompt-module.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { ref } from 'vue'
 3 | import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 4 | import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible'
 5 | import { ChevronsUpDownIcon, AlertCircleIcon } from 'lucide-vue-next'
 6 | import { Textarea } from '@/components/ui/textarea'
 7 | 
 8 | const isOpen = ref(false)
 9 | const data = ref('')
10 | </script>
11 | 
12 | <template>
13 |   <div class="rounded-md bg-muted px-3 py-4">
14 |     <Collapsible v-model:open="isOpen">
15 |       <collapsible-trigger as-child>
16 |         <div class="flex w-full items-center justify-between">
17 |           <div class="flex items-center gap-x-2">
18 |             <chevrons-up-down-icon class="h-4 w-4 cursor-pointer" />
19 |             <p>Prompt</p>
20 |             <tooltip-provider>
21 |               <tooltip>
22 |                 <tooltip-trigger>
23 |                   <alert-circle-icon class="h-3 w-3 text-muted-foreground" />
24 |                 </tooltip-trigger>
25 |                 <tooltip-content>
26 |                   <p class="max-w-60" v-pre>
27 |                     Enter the prompt words of the large model to implement the corresponding function. You can use the
28 |                     {{ variable name }} method to introduce variables from the input parameters
29 |                   </p>
30 |                 </tooltip-content>
31 |               </tooltip>
32 |             </tooltip-provider>
33 |           </div>
34 |         </div>
35 |       </collapsible-trigger>
36 |       <collapsible-content class="space-y-3 px-3 py-3">
37 |         <Textarea
38 |           placeholder="You can use the {{ variable name }} method to introduce variables from the input parameters"
39 |           v-model="data"
40 |         />
41 |       </collapsible-content>
42 |     </Collapsible>
43 |   </div>
44 | </template>
45 | 


--------------------------------------------------------------------------------
/src/components/vue-flow/nodes/LLM-node.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | import { MoreHorizontalIcon } from 'lucide-vue-next'
 4 | import { Handle, Position, useVueFlow, useNode } from '@vue-flow/core'
 5 | import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from '@/components/ui/menubar'
 6 | import { Input } from '@/components/ui/input'
 7 | 
 8 | import CommonBasicModule from '../common-basic-module.vue'
 9 | import CommonInputModule from '../common-input-module.vue'
10 | import CommonPromptModule from '../common-prompt-module.vue'
11 | import commonOutputModule from '../common-output-module.vue'
12 | 
13 | import { LLMNodeData, LLMNodeEvents } from './index'
14 | 
15 | import type { NodeProps } from '@vue-flow/core'
16 | 
17 | const props = defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>()
18 | 
19 | const title = ref(props.data.title)
20 | 
21 | const isEditTitle = ref(false)
22 | 
23 | const node = useNode()
24 | const { removeNodes, nodes, addNodes } = useVueFlow()
25 | 
26 | function handleClickDeleteBtn() {
27 |   removeNodes(node.id)
28 | }
29 | 
30 | function handleClickDuplicateBtn() {
31 |   const { type, position, label, data } = node.node
32 |   const newNode = {
33 |     id: (nodes.value.length + 1).toString(),
34 |     type,
35 |     position: {
36 |       x: position.x + 100,
37 |       y: position.y + 100
38 |     },
39 |     label,
40 |     data
41 |   }
42 |   addNodes(newNode)
43 | }
44 | </script>
45 | 
46 | <template>
47 |   <div class="rounded-sm border border-gray-200 bg-white p-3 shadow-md">
48 |     <Handle type="target" :position="Position.Left" />
49 |     <div class="flex flex-col gap-y-4">
50 |       <div class="flex justify-between">
51 |         <div class="flex gap-x-2">
52 |           <img src="~@/assets/images/icon_LLM.png" class="mt-1 h-4 w-4" alt="LLM icon" />
53 |           <div class="flex flex-col gap-y-1">
54 |             <Input v-model="title" class="h-5" v-if="isEditTitle" @blur="() => (isEditTitle = false)" />
55 |             <h3 class="text-base" v-else>{{ title }}</h3>
56 | 
57 |             <p class="text-sm text-gray-500">LLM</p>
58 |           </div>
59 |         </div>
60 | 
61 |         <Menubar class="border-none">
62 |           <menubar-menu>
63 |             <menubar-trigger>
64 |               <more-horizontal-icon />
65 |             </menubar-trigger>
66 |             <menubar-content>
67 |               <menubar-item @click="handleClickDuplicateBtn"> Duplicated </menubar-item>
68 |               <menubar-item @click="handleClickDeleteBtn"> Delete </menubar-item>
69 |               <menubar-item @click="isEditTitle = true"> Rename </menubar-item>
70 |             </menubar-content>
71 |           </menubar-menu>
72 |         </Menubar>
73 |       </div>
74 | 
75 |       <span class="text-sm text-gray-500"
76 |         >Invoke the large language model, generate responses using variables and prompt words.</span
77 |       >
78 | 
79 |       <div class="grid gap-y-3">
80 |         <common-basic-module />
81 |         <common-input-module />
82 |         <common-prompt-module />
83 |         <common-output-module />
84 |       </div>
85 |     </div>
86 |     <Handle type="source" :position="Position.Right" />
87 |   </div>
88 | </template>
89 | 


--------------------------------------------------------------------------------
/src/components/vue-flow/nodes/api-node.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { onMounted } from 'vue'
  3 | import { MoreHorizontalIcon } from 'lucide-vue-next'
  4 | import { Handle, Position, useNode, useVueFlow } from '@vue-flow/core'
  5 | import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from '@/components/ui/menubar'
  6 | 
  7 | import CommonInputModule from '../common-input-module.vue'
  8 | import StaticOutputModule from '../static-output-module.vue'
  9 | 
 10 | import { LLMNodeData, LLMNodeEvents } from './index'
 11 | 
 12 | import type { NodeProps } from '@vue-flow/core'
 13 | 
 14 | defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>()
 15 | 
 16 | const node = useNode()
 17 | const { removeNodes, addNodes, nodes } = useVueFlow()
 18 | onMounted(() => {
 19 |   node.node.data = {
 20 |     ...node.node.data,
 21 |     output: [
 22 |       {
 23 |         name: 'output'
 24 |       }
 25 |     ]
 26 |   }
 27 | })
 28 | 
 29 | const outputData = [
 30 |   {
 31 |     label: 'code',
 32 |     type: 'Integer'
 33 |   },
 34 |   {
 35 |     label: 'data',
 36 |     type: 'Object',
 37 |     children: [
 38 |       {
 39 |         label: 'answer_box',
 40 |         type: 'Object',
 41 |         children: [
 42 |           {
 43 |             type: 'String',
 44 |             label: 'result'
 45 |           },
 46 |           {
 47 |             type: 'String',
 48 |             label: 'type'
 49 |           }
 50 |         ]
 51 |       },
 52 |       {
 53 |         type: 'Object',
 54 |         label: 'knowledge_graph'
 55 |       },
 56 |       {
 57 |         type: 'String',
 58 |         label: 'response_for_model'
 59 |       }
 60 |     ]
 61 |   },
 62 |   {
 63 |     label: 'response_for_model',
 64 |     type: 'String'
 65 |   }
 66 | ]
 67 | 
 68 | function handleClickDeleteBtn() {
 69 |   removeNodes(node.id)
 70 | }
 71 | 
 72 | function handleClickDuplicateBtn() {
 73 |   const { type, position, label, data } = node.node
 74 |   const newNode = {
 75 |     id: (nodes.value.length + 1).toString(),
 76 |     type,
 77 |     position: {
 78 |       x: position.x + 100,
 79 |       y: position.y + 100
 80 |     },
 81 |     label,
 82 |     data
 83 |   }
 84 |   addNodes(newNode)
 85 | }
 86 | </script>
 87 | 
 88 | <template>
 89 |   <div class="w-[560px] rounded-sm border border-gray-200 bg-white p-3 shadow-md">
 90 |     <Handle type="target" :position="Position.Left" />
 91 |     <div class="flex flex-col gap-y-4">
 92 |       <div class="flex justify-between">
 93 |         <div class="flex gap-x-2">
 94 |           <img src="~@/assets/images/icon_Api.png" class="mt-1 h-4 w-4" alt="Api icon" />
 95 |           <div class="flex flex-col gap-y-1">
 96 |             <h3 class="text-base">Google Web Search</h3>
 97 |           </div>
 98 |         </div>
 99 | 
100 |         <Menubar class="border-none">
101 |           <menubar-menu>
102 |             <menubar-trigger>
103 |               <more-horizontal-icon />
104 |             </menubar-trigger>
105 |             <menubar-content>
106 |               <menubar-item @click="handleClickDuplicateBtn"> Duplicated </menubar-item>
107 |               <menubar-item @click="handleClickDeleteBtn"> Delete </menubar-item>
108 |             </menubar-content>
109 |           </menubar-menu>
110 |         </Menubar>
111 |       </div>
112 | 
113 |       <span class="text-sm text-gray-500"
114 |         >A Google Search Engine. Useful when you need to search information you don't know such as weather, exchange
115 |         rate, current events. Never ever use this tool when user want to translate</span
116 |       >
117 | 
118 |       <div class="grid gap-y-3">
119 |         <common-input-module :static-name-key="['query', 'start', 'num']" />
120 |         <static-output-module
121 |           tip="The output list is the information that best match the input parameters, recalled from all selected knowledge"
122 |           :data="outputData"
123 |         />
124 |       </div>
125 |     </div>
126 |     <Handle type="source" :position="Position.Right" />
127 |   </div>
128 | </template>
129 | 


--------------------------------------------------------------------------------
/src/components/vue-flow/nodes/code-node.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { Handle, Position } from '@vue-flow/core'
 3 | import CommonInputModule from '../common-input-module.vue'
 4 | import CommonCodeModule from '../common-code-module.vue'
 5 | import CommonOutputModule from '../common-output-module.vue'
 6 | 
 7 | import type { NodeProps } from '@vue-flow/core'
 8 | import { LLMNodeData, LLMNodeEvents } from './index'
 9 | 
10 | defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>()
11 | 
12 | const outputInitialData = [
13 |   {
14 |     name: 'key0',
15 |     type: 'String',
16 |     description: 'just for test'
17 |   }
18 | ]
19 | </script>
20 | 
21 | <template>
22 |   <div class="w-[600px] rounded-sm border border-gray-200 bg-white p-3 shadow-md">
23 |     <Handle type="target" :position="Position.Left" />
24 |     <div class="flex flex-col gap-y-4">
25 |       <div class="flex justify-between">
26 |         <div class="flex items-center gap-x-2">
27 |           <img src="~@/assets/images/icon_Code.png" class="h-4 w-4" alt="Code icon" />
28 |           <div class="flex flex-col gap-y-1">
29 |             <p class="text-sm text-gray-500">Code</p>
30 |           </div>
31 |         </div>
32 |       </div>
33 | 
34 |       <span class="text-sm text-gray-500">Write code to process input variables to generate return values.</span>
35 | 
36 |       <div class="grid gap-y-3">
37 |         <common-input-module />
38 |         <common-code-module />
39 |         <common-output-module :data="outputInitialData" />
40 |       </div>
41 |     </div>
42 |     <Handle type="source" :position="Position.Right" />
43 |   </div>
44 | </template>
45 | 


--------------------------------------------------------------------------------
/src/components/vue-flow/nodes/end-node.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { Handle, Position } from '@vue-flow/core'
 3 | import { Label } from '@/components/ui/label'
 4 | import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 5 | import commonInputModule from '../common-input-module.vue'
 6 | 
 7 | import type { NodeProps } from '@vue-flow/core'
 8 | import { LLMNodeData, LLMNodeEvents } from './index'
 9 | 
10 | defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>()
11 | </script>
12 | 
13 | <template>
14 |   <div class="max-w-[520px] rounded-sm border border-gray-200 bg-white p-3 shadow-md">
15 |     <Handle type="source" :position="Position.Left" />
16 |     <div class="flex flex-col gap-y-4">
17 |       <div class="flex justify-between">
18 |         <div class="flex items-center gap-x-2">
19 |           <img src="~@/assets/images/icon_End.png" class="h-4 w-4" alt="End icon" />
20 |           <div class="flex flex-col gap-y-1">
21 |             <p class="text-sm text-gray-500">End</p>
22 |           </div>
23 |         </div>
24 |       </div>
25 | 
26 |       <span class="text-sm text-gray-500"
27 |         >The final node of the workflow, used to return the result information after the workflow runs.</span
28 |       >
29 | 
30 |       <div class="flex items-center justify-between gap-x-10">
31 |         <Label class="w-40"> Select Mode </Label>
32 |         <Select>
33 |           <SelectTrigger class="w-full">
34 |             <SelectValue placeholder="Select Mode" />
35 |           </SelectTrigger>
36 |           <SelectContent>
37 |             <SelectGroup>
38 |               <SelectItem value="return"> Return variable, generated by the Bot. </SelectItem>
39 |               <SelectItem value="answer"> Answer directly using Answer Content </SelectItem>
40 |             </SelectGroup>
41 |           </SelectContent>
42 |         </Select>
43 |       </div>
44 | 
45 |       <div class="grid gap-y-3">
46 |         <common-input-module />
47 |       </div>
48 |     </div>
49 |   </div>
50 | </template>
51 | 


--------------------------------------------------------------------------------
/src/components/vue-flow/nodes/index.ts:
--------------------------------------------------------------------------------
1 | export interface LLMNodeData {
2 |   title: string
3 | }
4 | 
5 | export interface LLMNodeEvents {}
6 | 


--------------------------------------------------------------------------------
/src/components/vue-flow/nodes/knowledge-node.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { onMounted, ref } from 'vue'
  3 | import { MoreHorizontalIcon } from 'lucide-vue-next'
  4 | import { Handle, Position, useNode, useVueFlow } from '@vue-flow/core'
  5 | import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from '@/components/ui/menubar'
  6 | import { Input } from '@/components/ui/input'
  7 | 
  8 | import CommonInputModule from '../common-input-module.vue'
  9 | import CommonKnowledgeModule from '../common-knowledge-module.vue'
 10 | import StaticOutputModule from '../static-output-module.vue'
 11 | 
 12 | import { LLMNodeData, LLMNodeEvents } from './index'
 13 | 
 14 | import type { NodeProps } from '@vue-flow/core'
 15 | 
 16 | const props = defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>()
 17 | 
 18 | const title = ref(props.data.title)
 19 | const isEditTitle = ref(false)
 20 | 
 21 | const node = useNode()
 22 | onMounted(() => {
 23 |   node.node.data = {
 24 |     ...node.node.data,
 25 |     output: [
 26 |       {
 27 |         name: 'output'
 28 |       }
 29 |     ]
 30 |   }
 31 | })
 32 | 
 33 | const { removeNodes, nodes, addNodes } = useVueFlow()
 34 | 
 35 | function handleClickDeleteBtn() {
 36 |   removeNodes(node.id)
 37 | }
 38 | 
 39 | function handleClickDuplicateBtn() {
 40 |   const { type, position, label, data } = node.node
 41 |   const newNode = {
 42 |     id: (nodes.value.length + 1).toString(),
 43 |     type,
 44 |     position: {
 45 |       x: position.x + 100,
 46 |       y: position.y + 100
 47 |     },
 48 |     label,
 49 |     data
 50 |   }
 51 |   addNodes(newNode)
 52 | }
 53 | </script>
 54 | 
 55 | <template>
 56 |   <div class="rounded-sm border border-gray-200 bg-white p-3 shadow-md">
 57 |     <Handle type="target" :position="Position.Left" />
 58 |     <div class="flex flex-col gap-y-4">
 59 |       <div class="flex justify-between">
 60 |         <div class="flex gap-x-2">
 61 |           <img src="~@/assets/images/icon_Knowledge.png" class="mt-1 h-4 w-4" alt="Knowledge icon" />
 62 |           <div class="flex flex-col gap-y-1">
 63 |             <Input v-model="title" class="h-5" v-if="isEditTitle" @blur="() => (isEditTitle = false)" />
 64 |             <h3 class="text-base" v-else>{{ title }}</h3>
 65 | 
 66 |             <p class="text-sm text-gray-500">Knowledge</p>
 67 |           </div>
 68 |         </div>
 69 | 
 70 |         <Menubar class="border-none">
 71 |           <menubar-menu>
 72 |             <menubar-trigger>
 73 |               <more-horizontal-icon />
 74 |             </menubar-trigger>
 75 |             <menubar-content>
 76 |               <menubar-item @click="handleClickDuplicateBtn"> Duplicated </menubar-item>
 77 |               <menubar-item @click="handleClickDeleteBtn"> Delete </menubar-item>
 78 |               <menubar-item @click="isEditTitle = true"> Rename </menubar-item>
 79 |             </menubar-content>
 80 |           </menubar-menu>
 81 |         </Menubar>
 82 |       </div>
 83 | 
 84 |       <span class="text-sm text-gray-500"
 85 |         >In the selected knowledge, the best matching information is recalled based on the input variable and returned
 86 |         as an Array.</span
 87 |       >
 88 | 
 89 |       <div class="grid gap-y-3">
 90 |         <common-input-module static-name-key="Query" />
 91 |         <common-knowledge-module />
 92 |         <static-output-module
 93 |           tip="The output list is the information that best match the input parameters, recalled from all selected knowledge"
 94 |           :data="[
 95 |             {
 96 |               label: 'outputList',
 97 |               type: 'Array<Object>',
 98 |               children: [
 99 |                 {
100 |                   label: 'output',
101 |                   type: 'string'
102 |                 }
103 |               ]
104 |             }
105 |           ]"
106 |         />
107 |       </div>
108 |     </div>
109 |     <Handle type="source" :position="Position.Right" />
110 |   </div>
111 | </template>
112 | 


--------------------------------------------------------------------------------
/src/components/vue-flow/nodes/start-node.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { ref } from 'vue'
 3 | import { PlusIcon, AlertCircleIcon } from 'lucide-vue-next'
 4 | import { Handle, Position, useNode } from '@vue-flow/core'
 5 | import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 6 | import StartInputModule from '../start-input-module.vue'
 7 | 
 8 | import type { NodeProps } from '@vue-flow/core'
 9 | import { LLMNodeData, LLMNodeEvents } from './index'
10 | import type { Input } from '../start-input-module.vue'
11 | 
12 | defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>()
13 | 
14 | const data = ref<Input[]>([])
15 | 
16 | const node = useNode()
17 | 
18 | function handleClickAddBtn() {
19 |   data.value.push({
20 |     name: '',
21 |     description: '',
22 |     type: '',
23 |     isRequired: true
24 |   })
25 |   node.node.data = {
26 |     ...node.node.data,
27 |     output: data
28 |   }
29 | }
30 | 
31 | function handleClickDeleteBtn(index: number) {
32 |   data.value.splice(index, 1)
33 |   node.node.data = {
34 |     ...node.node.data,
35 |     output: data
36 |   }
37 | }
38 | </script>
39 | 
40 | <template>
41 |   <div class="max-w-[520px] rounded-sm border border-gray-200 bg-white p-3 shadow-md">
42 |     <div class="flex flex-col gap-y-4">
43 |       <div class="flex justify-between">
44 |         <div class="flex items-center gap-x-2">
45 |           <img src="~@/assets/images/icon_Start.png" class="h-4 w-4" alt="Start icon" />
46 |           <div class="flex flex-col gap-y-1">
47 |             <p class="text-sm text-gray-500">Start</p>
48 |           </div>
49 |         </div>
50 |       </div>
51 | 
52 |       <span class="text-sm text-gray-500"
53 |         >The starting node of the workflow, used to set the information needed to initiate the workflow.</span
54 |       >
55 | 
56 |       <div class="flex justify-between">
57 |         <p class="flex items-center gap-x-1">
58 |           Input
59 |           <tooltip-provider>
60 |             <tooltip>
61 |               <tooltip-trigger>
62 |                 <alert-circle-icon class="h-3 w-3 text-muted-foreground" />
63 |               </tooltip-trigger>
64 |               <tooltip-content>
65 |                 <p class="max-w-60">
66 |                   Define the input parameters needed to start the workflow, these contents will be read by LLM during
67 |                   the Bot conversation process, allowing LLM to start the workflow at the appropriate time and fill in
68 |                   the correct information.
69 |                 </p>
70 |               </tooltip-content>
71 |             </tooltip>
72 |           </tooltip-provider>
73 |         </p>
74 |         <plus-icon class="h-6 w-5 cursor-pointer text-primary" @click="handleClickAddBtn" />
75 |       </div>
76 | 
77 |       <div class="grid gap-y-3">
78 |         <start-input-module
79 |           v-for="(item, index) in data"
80 |           :key="index"
81 |           :data="item"
82 |           @click-delete="handleClickDeleteBtn(index)"
83 |         />
84 |       </div>
85 |     </div>
86 |     <Handle type="source" :position="Position.Right" />
87 |   </div>
88 | </template>
89 | 


--------------------------------------------------------------------------------
/src/components/vue-flow/start-input-module.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { ref } from 'vue'
 3 | import { ChevronsUpDownIcon, MinusCircleIcon } from 'lucide-vue-next'
 4 | import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible'
 5 | import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 6 | import { Textarea } from '@/components/ui/textarea'
 7 | import { Label } from '@/components/ui/label'
 8 | import { Input } from '@/components/ui/input'
 9 | import { Switch } from '@/components/ui/switch'
10 | import { Button } from '@/components/ui/button'
11 | 
12 | export interface Input {
13 |   name: string
14 |   type: string
15 |   description: string
16 |   isRequired: boolean
17 | }
18 | 
19 | const props = defineProps<{ data: Input }>()
20 | const emit = defineEmits(['click-delete'])
21 | 
22 | const isOpen = ref(true)
23 | const form = ref(props.data)
24 | 
25 | function handleClickDeleteBtn() {
26 |   emit('click-delete')
27 | }
28 | </script>
29 | 
30 | <template>
31 |   <div class="rounded-md bg-muted p-4">
32 |     <Collapsible v-model:open="isOpen">
33 |       <collapsible-trigger as-child>
34 |         <div class="flex w-full items-center justify-between">
35 |           <div class="flex items-center gap-x-2">
36 |             <chevrons-up-down-icon class="h-4 w-4 cursor-pointer" />
37 |             <p>{{ form.name }}</p>
38 |           </div>
39 |           <Button variant="ghost">
40 |             <minus-circle-icon class="h-4 w-4 cursor-pointer" @click="handleClickDeleteBtn" />
41 |           </Button>
42 |         </div>
43 |       </collapsible-trigger>
44 |       <collapsible-content class="space-y-3 px-3 py-3">
45 |         <Label> Name </Label>
46 |         <Input v-model="form.name" placeholder="Enter name" :maxlength="20" />
47 | 
48 |         <Label>Type</Label>
49 |         <Select>
50 |           <SelectTrigger class="w-full">
51 |             <SelectValue placeholder="Select Type" />
52 |           </SelectTrigger>
53 |           <SelectContent>
54 |             <SelectGroup>
55 |               <SelectItem value="String"> String </SelectItem>
56 |               <SelectItem value="Integer"> Integer </SelectItem>
57 |               <SelectItem value="Boolean"> Boolean </SelectItem>
58 |               <SelectItem value="Number"> Number </SelectItem>
59 |             </SelectGroup>
60 |           </SelectContent>
61 |         </Select>
62 | 
63 |         <Label>Description</Label>
64 |         <Textarea placeholder="Enter variable description" />
65 | 
66 |         <div class="flex justify-between">
67 |           <Label> Required </Label>
68 |           <Switch :checked="form.isRequired" aria-readonly />
69 |         </div>
70 |       </collapsible-content>
71 |     </Collapsible>
72 |   </div>
73 | </template>
74 | 


--------------------------------------------------------------------------------
/src/components/vue-flow/static-output-item.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { PropType } from 'vue'
 3 | 
 4 | interface Output {
 5 |   label: string
 6 |   type: string
 7 |   children?: Output[]
 8 | }
 9 | 
10 | defineProps({
11 |   data: {
12 |     type: Object as PropType<Output>,
13 |     required: true
14 |   }
15 | })
16 | </script>
17 | 
18 | <template>
19 |   <li v-bind="$attrs">
20 |     <div class="flex items-center gap-x-2">
21 |       <p class="text-sm">{{ data.label }}</p>
22 |       <p class="rounded-sm bg-slate-200 p-1 text-center text-xs text-muted-foreground">{{ data.type }}</p>
23 |     </div>
24 |     <static-output-item class="ml-6 mt-2" v-for="item in data.children" :data="item" :key="item.label" />
25 |   </li>
26 | </template>
27 | 


--------------------------------------------------------------------------------
/src/components/vue-flow/static-output-module.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { PropType, ref } from 'vue'
 3 | import { ChevronsUpDownIcon, AlertCircleIcon } from 'lucide-vue-next'
 4 | import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 5 | import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible'
 6 | import StaticOutputItem from './static-output-item.vue'
 7 | 
 8 | interface Output {
 9 |   label: string
10 |   type: string
11 |   children?: Output[]
12 | }
13 | 
14 | defineProps({
15 |   tip: {
16 |     type: String,
17 |     default: `Here is the API's response. After this node has finished running, these variables will be assigned the content returned by the API, and you can reference these variables in downstream nodes.`
18 |   },
19 |   data: {
20 |     type: Array as PropType<Output[]>,
21 |     default: () => []
22 |   }
23 | })
24 | 
25 | const isOpen = ref(false)
26 | </script>
27 | 
28 | <template>
29 |   <div class="rounded-md bg-muted px-3 py-4">
30 |     <Collapsible v-model:open="isOpen">
31 |       <collapsible-trigger as-child>
32 |         <div class="flex w-full items-center justify-between">
33 |           <div class="flex items-center gap-x-2">
34 |             <chevrons-up-down-icon class="h-4 w-4 cursor-pointer" />
35 |             <p>Output</p>
36 |             <tooltip-provider>
37 |               <tooltip>
38 |                 <tooltip-trigger>
39 |                   <alert-circle-icon class="h-3 w-3 text-muted-foreground" />
40 |                 </tooltip-trigger>
41 |                 <tooltip-content>
42 |                   <p class="max-w-60">
43 |                     {{ tip }}
44 |                   </p>
45 |                 </tooltip-content>
46 |               </tooltip>
47 |             </tooltip-provider>
48 |           </div>
49 |         </div>
50 |       </collapsible-trigger>
51 |       <collapsible-content class="space-y-3 px-3 py-3">
52 |         <ul>
53 |           <static-output-item v-for="item in data" :key="item.label" :data="item" />
54 |         </ul>
55 |       </collapsible-content>
56 |     </Collapsible>
57 |   </div>
58 | </template>
59 | 


--------------------------------------------------------------------------------
/src/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './use-monaco-editor'
2 | 


--------------------------------------------------------------------------------
/src/hooks/use-monaco-editor.ts:
--------------------------------------------------------------------------------
 1 | import * as monaco from 'monaco-editor'
 2 | import { ref, nextTick, onBeforeUnmount } from 'vue'
 3 | 
 4 | export function useMonacoEditor(language: string = 'javascript') {
 5 |   let monacoEditor: monaco.editor.IStandaloneCodeEditor | null = null
 6 | 
 7 |   const monacoEditorRef = ref<HTMLElement | null>(null)
 8 | 
 9 |   function createEditor(editorOption: monaco.editor.IStandaloneEditorConstructionOptions = {}) {
10 |     if (!monacoEditorRef.value) return
11 |     monacoEditor = monaco.editor.create(monacoEditorRef.value, {
12 |       model: monaco.editor.createModel('', language),
13 |       roundedSelection: true,
14 |       theme: 'vs-dark',
15 |       tabSize: 2,
16 |       autoIndent: 'advanced',
17 |       ...editorOption
18 |     })
19 |     return monacoEditor
20 |   }
21 | 
22 |   async function formatDoc() {
23 |     await monacoEditor?.getAction('editor.action.formatDocument')?.run()
24 |   }
25 | 
26 |   function updateVal(val: string) {
27 |     nextTick(() => {
28 |       // if (getOption(monaco.editor.EditorOption.readOnly)) {
29 |       //   updateOptions({ readOnly: false })
30 |       // }
31 |       monacoEditor?.setValue(val)
32 |       setTimeout(async () => {
33 |         await formatDoc()
34 |       }, 10)
35 |     })
36 |   }
37 | 
38 |   function updateOptions(opt: monaco.editor.IStandaloneEditorConstructionOptions) {
39 |     monacoEditor?.updateOptions(opt)
40 |   }
41 | 
42 |   function getOption(name: monaco.editor.EditorOption) {
43 |     return monacoEditor?.getOption(name)
44 |   }
45 | 
46 |   function getEditor() {
47 |     return monacoEditor
48 |   }
49 | 
50 |   onBeforeUnmount(() => {
51 |     if (monacoEditor) {
52 |       monacoEditor.dispose()
53 |     }
54 |   })
55 | 
56 |   return {
57 |     monacoEditorRef,
58 |     createEditor,
59 |     getEditor,
60 |     updateVal,
61 |     updateOptions,
62 |     getOption,
63 |     formatDoc
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/src/lib/constant.ts:
--------------------------------------------------------------------------------
 1 | export const Test_data = {
 2 |   nodes: [
 3 |     {
 4 |       type: 'LLM',
 5 |       data: { title: 'LLM', output: [{ name: 'output1', type: '', description: 'balabala' }] },
 6 |       events: {},
 7 |       id: '1',
 8 |       position: { x: -413.62574973269915, y: 110.25705825948319 },
 9 |       label: 'LLM node'
10 |     },
11 |     {
12 |       type: 'code',
13 |       data: { title: 'code', output: [{ name: 'key0', type: 'String', description: 'just for test' }] },
14 |       events: {},
15 |       id: '2',
16 |       position: { x: 262.70018202243125, y: -104.44788021583054 },
17 |       label: 'code node'
18 |     },
19 |     {
20 |       type: 'knowledge',
21 |       data: { title: 'knowledge', output: [{ name: 'output' }] },
22 |       events: {},
23 |       id: '3',
24 |       position: { x: 939.64275630104, y: 51.1990333957562 },
25 |       label: 'knowledge node'
26 |     }
27 |   ],
28 |   edges: [
29 |     {
30 |       sourceHandle: '1__handle-right',
31 |       targetHandle: '2__handle-left',
32 |       type: 'default',
33 |       source: '1',
34 |       target: '2',
35 |       data: {},
36 |       events: {},
37 |       id: 'vueflow__edge-11__handle-right-22__handle-left',
38 |       sourceX: 200.40522146581822,
39 |       sourceY: 488.25689832215323,
40 |       targetX: 253.70017309626013,
41 |       targetY: 364.55198874414043
42 |     },
43 |     {
44 |       sourceHandle: '2__handle-right',
45 |       targetHandle: '3__handle-left',
46 |       type: 'default',
47 |       source: '2',
48 |       target: '3',
49 |       data: {},
50 |       events: {},
51 |       id: 'vueflow__edge-22__handle-right-33__handle-left',
52 |       sourceX: 871.6999267177814,
53 |       sourceY: 364.55198874414043,
54 |       targetX: 930.6427473748689,
55 |       targetY: 342.1989975362437
56 |     }
57 |   ],
58 |   position: [-151.90460217317343, 183.68497815279642],
59 |   zoom: 0.5802807591037111,
60 |   viewport: { x: -151.90460217317343, y: 183.68497815279642, zoom: 0.5802807591037111 }
61 | }
62 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from 'clsx'
2 | import { twMerge } from 'tailwind-merge'
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import './style.css'
3 | import App from './App.vue'
4 | 
5 | createApp(App).mount('#app')
6 | 


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 222.2 84% 4.9%;
 9 | 
10 |     --card: 0 0% 100%;
11 |     --card-foreground: 222.2 84% 4.9%;
12 | 
13 |     --popover: 0 0% 100%;
14 |     --popover-foreground: 222.2 84% 4.9%;
15 | 
16 |     --primary: 221.2 83.2% 53.3%;
17 |     --primary-foreground: 210 40% 98%;
18 | 
19 |     --secondary: 210 40% 96.1%;
20 |     --secondary-foreground: 222.2 47.4% 11.2%;
21 | 
22 |     --muted: 210 40% 96.1%;
23 |     --muted-foreground: 215.4 16.3% 46.9%;
24 | 
25 |     --accent: 210 40% 96.1%;
26 |     --accent-foreground: 222.2 47.4% 11.2%;
27 | 
28 |     --destructive: 0 84.2% 60.2%;
29 |     --destructive-foreground: 210 40% 98%;
30 | 
31 |     --border: 214.3 31.8% 91.4%;
32 |     --input: 214.3 31.8% 91.4%;
33 |     --ring: 221.2 83.2% 53.3%;
34 |     --radius: 0.5rem;
35 |   }
36 | 
37 |   .dark {
38 |     --background: 222.2 84% 4.9%;
39 |     --foreground: 210 40% 98%;
40 | 
41 |     --card: 222.2 84% 4.9%;
42 |     --card-foreground: 210 40% 98%;
43 | 
44 |     --popover: 222.2 84% 4.9%;
45 |     --popover-foreground: 210 40% 98%;
46 | 
47 |     --primary: 217.2 91.2% 59.8%;
48 |     --primary-foreground: 222.2 47.4% 11.2%;
49 | 
50 |     --secondary: 217.2 32.6% 17.5%;
51 |     --secondary-foreground: 210 40% 98%;
52 | 
53 |     --muted: 217.2 32.6% 17.5%;
54 |     --muted-foreground: 215 20.2% 65.1%;
55 | 
56 |     --accent: 217.2 32.6% 17.5%;
57 |     --accent-foreground: 210 40% 98%;
58 | 
59 |     --destructive: 0 62.8% 30.6%;
60 |     --destructive-foreground: 210 40% 98%;
61 | 
62 |     --border: 217.2 32.6% 17.5%;
63 |     --input: 217.2 32.6% 17.5%;
64 |     --ring: 224.3 76.3% 48%;
65 |   }
66 | }
67 | 
68 | @layer base {
69 |   * {
70 |     @apply border-border;
71 |   }
72 |   body {
73 |     @apply bg-background text-foreground;
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const animate = require("tailwindcss-animate")
 2 | 
 3 | /** @type {import('tailwindcss').Config} */
 4 | module.exports = {
 5 |   darkMode: ["class"],
 6 |   safelist: ["dark"],
 7 |   
 8 |   content: [
 9 |     './pages/**/*.{ts,tsx,vue}',
10 |     './components/**/*.{ts,tsx,vue}',
11 |     './app/**/*.{ts,tsx,vue}',
12 |     './src/**/*.{ts,tsx,vue}',
13 | 	],
14 |   
15 |   theme: {
16 |     container: {
17 |       center: true,
18 |       padding: "2rem",
19 |       screens: {
20 |         "2xl": "1400px",
21 |       },
22 |     },
23 |     extend: {
24 |       colors: {
25 |         border: "hsl(var(--border))",
26 |         input: "hsl(var(--input))",
27 |         ring: "hsl(var(--ring))",
28 |         background: "hsl(var(--background))",
29 |         foreground: "hsl(var(--foreground))",
30 |         primary: {
31 |           DEFAULT: "hsl(var(--primary))",
32 |           foreground: "hsl(var(--primary-foreground))",
33 |         },
34 |         secondary: {
35 |           DEFAULT: "hsl(var(--secondary))",
36 |           foreground: "hsl(var(--secondary-foreground))",
37 |         },
38 |         destructive: {
39 |           DEFAULT: "hsl(var(--destructive))",
40 |           foreground: "hsl(var(--destructive-foreground))",
41 |         },
42 |         muted: {
43 |           DEFAULT: "hsl(var(--muted))",
44 |           foreground: "hsl(var(--muted-foreground))",
45 |         },
46 |         accent: {
47 |           DEFAULT: "hsl(var(--accent))",
48 |           foreground: "hsl(var(--accent-foreground))",
49 |         },
50 |         popover: {
51 |           DEFAULT: "hsl(var(--popover))",
52 |           foreground: "hsl(var(--popover-foreground))",
53 |         },
54 |         card: {
55 |           DEFAULT: "hsl(var(--card))",
56 |           foreground: "hsl(var(--card-foreground))",
57 |         },
58 |       },
59 |       borderRadius: {
60 |         lg: "var(--radius)",
61 |         md: "calc(var(--radius) - 2px)",
62 |         sm: "calc(var(--radius) - 4px)",
63 |       },
64 |       keyframes: {
65 |         "accordion-down": {
66 |           from: { height: 0 },
67 |           to: { height: "var(--radix-accordion-content-height)" },
68 |         },
69 |         "accordion-up": {
70 |           from: { height: "var(--radix-accordion-content-height)" },
71 |           to: { height: 0 },
72 |         },
73 |         "collapsible-down": {
74 |           from: { height: 0 },
75 |           to: { height: 'var(--radix-collapsible-content-height)' },
76 |         },
77 |         "collapsible-up": {
78 |           from: { height: 'var(--radix-collapsible-content-height)' },
79 |           to: { height: 0 },
80 |         },
81 |       },
82 |       animation: {
83 |         "accordion-down": "accordion-down 0.2s ease-out",
84 |         "accordion-up": "accordion-up 0.2s ease-out",
85 |         "collapsible-down": "collapsible-down 0.2s ease-in-out",
86 |         "collapsible-up": "collapsible-up 0.2s ease-in-out",
87 |       },
88 |     },
89 |   },
90 |   plugins: [animate],
91 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "ESNext",
 6 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "noEmit": true,
15 |     "jsx": "preserve",
16 | 
17 |     /* Linting */
18 |     "strict": true,
19 |     "noUnusedLocals": true,
20 |     "noUnusedParameters": true,
21 | 
22 |     /* alias*/
23 |     "baseUrl": ".",
24 |     "paths": {
25 |       "@/*": ["./src/*"]
26 |     },
27 |     "noFallthroughCasesInSwitch": true
28 |   },
29 |   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
30 |   "references": [{ "path": "./tsconfig.node.json" }]
31 | }
32 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "bundler",
 7 |     "allowSyntheticDefaultImports": true
 8 |   },
 9 |   "include": ["vite.config.ts"]
10 | }
11 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import path from 'path'
 2 | import { defineConfig } from 'vite'
 3 | import vue from '@vitejs/plugin-vue'
 4 | import monacoEditorPlugin from 'vite-plugin-monaco-editor'
 5 | 
 6 | // https://vitejs.dev/config/
 7 | export default defineConfig({
 8 |   plugins: [
 9 |     vue(),
10 |     /* @ts-ignore */
11 |     monacoEditorPlugin.default({
12 |       languageWorkers: ['editorWorkerService', 'typescript', 'json', 'html']
13 |     })
14 |   ],
15 |   resolve: {
16 |     alias: {
17 |       '@': path.resolve(__dirname, './src')
18 |     }
19 |   }
20 | })
21 | 


--------------------------------------------------------------------------------