<template>
|
<NodeBasicLayout
|
v-model:title="data.title"
|
:type="NodeType.LLM"
|
:description="VueFlowHelper.getConfigValue(data, 'description', '调用大模型回答用户问题或者处理任务。')"
|
:isViewMode="isViewMode"
|
>
|
<Handle :id="targetHandleId" type="target" :position="Position.Left" />
|
<el-form ref="formRef" :model="data" :rules="formRules" label-position="right" label-width="60px" :show-message="false">
|
<FieldLayout :title="VueFlowHelper.getConfigValue(modelSetting, 'name', '模型设置')">
|
<div class="w-full flex-items-center gap-x-2">
|
<div class="flex-column gap-y-1.5">
|
<el-form-item
|
labelPosition="top"
|
:label="VueFlowHelper.getParams(modelSetting, 'llm_model').label"
|
prop="group_params.0.params.0.value"
|
>
|
<el-tree-select
|
v-model="VueFlowHelper.getParams(modelSetting, 'llm_model').value"
|
:data="llmInfoList"
|
:props="{ label: 'name', value: 'id' }"
|
:render-after-expand="false"
|
:check-strictly="false"
|
:show-checkbox="false"
|
:accordion="true"
|
:disabled="isViewMode"
|
filterable
|
clearable
|
:placeholder="VueFlowHelper.getParams(modelSetting, 'llm_model').placeholder"
|
/>
|
</el-form-item>
|
</div>
|
<div class="flex-column gap-y-1.5">
|
<el-form-item
|
labelPosition="top"
|
:label="VueFlowHelper.getParams(modelSetting, 'temperature').label"
|
prop="group_params.0.params.1.value"
|
>
|
<el-input-number
|
class="w-full"
|
controls-position="right"
|
v-model="VueFlowHelper.getParams(modelSetting, 'temperature').value"
|
:readonly="isViewMode"
|
placeholder=""
|
></el-input-number>
|
</el-form-item>
|
</div>
|
</div>
|
</FieldLayout>
|
<FieldLayout :title="prompt.name" required>
|
<el-form-item labelWidth="0" prop="group_params.1.params.0.value">
|
<CodeEditor
|
:title="prompt.name"
|
class="nowheel w-full"
|
v-model:editValue="VueFlowHelper.getParams(prompt, 'prompt').value"
|
:maxHeight="180"
|
:disabled="isViewMode"
|
/>
|
</el-form-item>
|
</FieldLayout>
|
<FieldLayout :title="outputParam.name" required>
|
<el-form-item labelWidth="0" prop="group_params.2.params.0.value">
|
<el-input
|
class="w-full flex-0"
|
v-model="outputParam.params[0].value"
|
placeholder="输出参数名"
|
:readonly="isViewMode"
|
></el-input>
|
</el-form-item>
|
</FieldLayout>
|
</el-form>
|
|
<Handle :id="sourceHandleId" type="source" :position="Position.Right" />
|
</NodeBasicLayout>
|
</template>
|
|
<script setup lang="ts">
|
import type { NodeProps } from '@vue-flow/core';
|
import { Handle, Position, useNode } from '@vue-flow/core';
|
import { onMounted, ref } from 'vue';
|
import { VueFlowHelper } from '../../VueFlowHelper';
|
import { NodeType } from '../../vueFlowEnum';
|
import FieldLayout from './components/FieldLayout.vue';
|
import NodeBasicLayout from './components/NodeBasicLayout.vue';
|
import type { LLMNodeData, LLMNodeEvents } from './index';
|
import CodeEditor from '/@/components/input/codeEditor/index.vue';
|
import { invalid } from 'moment';
|
import { validateForm } from './utils';
|
|
defineProps<
|
NodeProps<LLMNodeData, LLMNodeEvents> & {
|
isViewMode?: boolean;
|
llmInfoList: any[];
|
}
|
>();
|
|
const node = useNode();
|
const sourceHandleId = ref(VueFlowHelper.getHandleId(node.node, 'source'));
|
const targetHandleId = ref(VueFlowHelper.getHandleId(node.node, 'target'));
|
|
const data = ref(node.node.data);
|
const modelSetting = ref(VueFlowHelper.getGroupParam(data.value, 0));
|
const prompt = ref(VueFlowHelper.getGroupParam(data.value, 1));
|
const outputParam = ref(VueFlowHelper.getGroupParam(data.value, 2));
|
VueFlowHelper.getConfigValue(VueFlowHelper.getParams(prompt.value, 'prompt'), 'label', '');
|
|
const formRules = ref({
|
'group_params.0.params.0.value': [{ required: true, message: '请选择模型', trigger: 'change' }],
|
'group_params.1.params.0.value': [{ required: true, message: '请输入提示词', trigger: 'blur' }],
|
'group_params.2.params.0.value': [{ required: true, message: '请输入输出参数名', trigger: 'blur' }],
|
|
});
|
|
const emit = defineEmits(['register']);
|
const formRef = ref();
|
|
// 表单验证方法
|
|
// 注册节点实例
|
onMounted(() => {
|
emit('register', {
|
validateForm: validateForm(formRef),
|
});
|
});
|
</script>
|
