WIP KVSettings

dRAGon-Okinawa · Aug 29, 2024 · fe89a85 · fe89a85
1 parent ea12078
commit fe89a85
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 31 deletions.
diff --git a/frontend/src/components/custom/kv-settings.vue b/frontend/src/components/custom/kv-settings.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'KVSettings'
+});
+
+const settingsModel = defineModel<string[]>('settings', { required: true });
+
+const settings = computed({
+  get() {
+    // console.log(settingsModel.value);
+    if (!settingsModel.value) {
+      return [];
+    }
+
+    // Split settingsModel into key-value pairs
+    const test = settingsModel.value.map(item => {
+      const [key, value] = item.split('=');
+      return { key, value: value || '' };
+    });
+
+    // console.log(test);
+
+    return test;
+  },
+  set(newValue) {
+    // console.log(newValue);
+    settingsModel.value = newValue.map(item => (item ? `${item.key}=${item.value}` : ''));
+  }
+});
+</script>
+
+<template>
+  <NDynamicInput v-model:value="settings">
+    <template #create-button-default>
+      {{ $t('common.add') }}
+    </template>
+    <template #default="{ index }">
+      <div class="flex">
+        <NFormItem :path="`settings[${index}].key`" ignore-path-change :show-label="false" class="flex-auto">
+          <NInput v-model:value="settings[index].key" :placeholder="$t('common.key')" @keydown.enter.prevent />
+        </NFormItem>
+        <div class="mt-1 w-14 flex-auto text-center align-middle">=</div>
+        <NFormItem :path="`settings[${index}].value`" ignore-path-change :show-label="false" class="flex-auto">
+          <NInput v-model:value="settings[index].value" :placeholder="$t('common.value')" @keydown.enter.prevent />
+        </NFormItem>
+      </div>
+    </template>
+  </NDynamicInput>
+</template>
+
+<style scoped></style>
diff --git a/frontend/src/typings/components.d.ts b/frontend/src/typings/components.d.ts
@@ -30,6 +30,7 @@ declare module 'vue' {
     IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
     IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     IconUilSearch: typeof import('~icons/uil/search')['default']
+    KvSettings: typeof import('./../components/custom/kv-settings.vue')['default']
     LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
     LookForward: typeof import('./../components/custom/look-forward.vue')['default']
     MenuToggler: typeof import('./../components/common/menu-toggler.vue')['default']

diff --git a/frontend/src/views/infrastructure/silo-list/modules/silo-edit.vue b/frontend/src/views/infrastructure/silo-list/modules/silo-edit.vue
@@ -6,6 +6,7 @@ import { $t } from '@/locales';
 import { translateOptions } from '@/utils/common';
 import { embeddingModelOptions, ingestorLoaderOptions, vectorStoreOptions } from '@/constants/business';
 import { fetchUpsertSilo } from '@/service/api';
+import KVSettings from '../../../../components/custom/kv-settings.vue';
 
 defineOptions({
   name: 'SiloEdit'
@@ -45,9 +46,16 @@ type Model = Pick<Api.SiloManage.Silo, 'uuid'>;
 
 const model: Model = reactive(createDefaultModel());
 
-function createDefaultModel(): Model {
+function createDefaultModel(): Api.SiloManage.Silo {
   return {
-    uuid: NIL_UUID
+    uuid: NIL_UUID,
+    name: '',
+    vectorStore: null,
+    embeddingModel: null,
+    ingestorLoader: null,
+    vectorStoreSettings: null,
+    embeddingSettings: null,
+    ingestorSettings: null
   };
 }
 
@@ -60,7 +68,6 @@ const rules: Record<RuleKey, App.Global.FormRule> = {
 
 function handleInitModel() {
   Object.assign(model, createDefaultModel());
-
   if (props.operateType === 'edit' && props.rowData) {
     Object.assign(model, props.rowData);
   }
@@ -109,20 +116,7 @@ watch(visible, () => {
         />
         <NCollapse>
           <NCollapseItem :title="$t('common.settings')">
-            <NDynamicInput>
-              <template #create-button-default>
-                {{ $t('common.add') }}
-              </template>
-              <div class="flex">
-                <NFormItem ignore-path-change :show-label="false" class="flex-auto">
-                  <NInput :placeholder="$t('common.key')" @keydown.enter.prevent />
-                </NFormItem>
-                <div class="mt-1 w-14 flex-auto text-center align-middle">=</div>
-                <NFormItem ignore-path-change :show-label="false" class="flex-auto">
-                  <NInput :placeholder="$t('common.value')" @keydown.enter.prevent />
-                </NFormItem>
-              </div>
-            </NDynamicInput>
+            <KVSettings v-model:settings="model.vectorStoreSettings" />
           </NCollapseItem>
         </NCollapse>
         <NDivider title-placement="left">
@@ -133,7 +127,13 @@ watch(visible, () => {
           :placeholder="$t('dRAGon.embeddingModel')"
           :options="translateOptions(embeddingModelOptions)"
           clearable
+          class="mb-4"
         />
+        <NCollapse>
+          <NCollapseItem :title="$t('common.settings')">
+            <KVSettings v-model:settings="model.embeddingSettings" />
+          </NCollapseItem>
+        </NCollapse>
         <NDivider title-placement="left">
           {{ $t('dRAGon.ingestorLoader') }}
         </NDivider>
@@ -142,7 +142,13 @@ watch(visible, () => {
           :placeholder="$t('dRAGon.ingestorLoader')"
           :options="translateOptions(ingestorLoaderOptions)"
           clearable
+          class="mb-4"
         />
+        <NCollapse>
+          <NCollapseItem :title="$t('common.settings')">
+            <KVSettings v-model:settings="model.ingestorSettings" />
+          </NCollapseItem>
+        </NCollapse>
       </NForm>
       <template #footer>
         <NSpace :size="16">

diff --git a/frontend/src/views/infrastructure/silo-list/modules/silo-search.vue b/frontend/src/views/infrastructure/silo-list/modules/silo-search.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue';
 import { $t } from '@/locales';
-import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { useNaiveForm } from '@/hooks/common/form';
 import { vectorStoreOptions } from '@/constants/business';
 import { translateOptions } from '@/utils/common';
 
@@ -20,17 +19,6 @@ const { formRef, validate, restoreValidation } = useNaiveForm();
 
 const model = defineModel<Api.SiloManage.SiloSearchParams>('model', { required: true });
 
-type RuleKey = Extract<keyof Api.SystemManage.UserSearchParams, 'userEmail' | 'userPhone'>;
-
-const rules = computed<Record<RuleKey, App.Global.FormRule>>(() => {
-  const { patternRules } = useFormRules(); // inside computed to make locale reactive
-
-  return {
-    userEmail: patternRules.email,
-    userPhone: patternRules.phone
-  };
-});
-
 async function reset() {
   await restoreValidation();
   emit('reset');
@@ -44,7 +32,7 @@ async function search() {
 
 <template>
   <NCard :title="$t('common.search')" :bordered="false" size="small" class="card-wrapper">
-    <NForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="80">
+    <NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
       <NGrid responsive="screen" item-responsive>
         <NFormItemGi span="24 s:12 m:6" label="UUID" path="uuid" class="pr-24px">
           <NInput v-model:value="model.uuid" placeholder="UUID" @keyup.enter="search" />