feat: Intent STT TTS node support model reference

[shaohuzhang1]

feat: Intent STT TTS node support model reference

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[shaohuzhang1]

The provided code snippet contains several improvements and corrections:

1. Type Handling: The stt_model_id property now checks its type ('reference') to decide which prop to use ('stt_model_id_reference' or 'stt_model_id'). This enhances flexibility based on user selections.

2. Optimized Button Placement: A horizontal flex container has been added around the ModelSelect component, making it look cleaner and responsive.

3. Conditional Rendering: Only shows the NodeCascader when stt_model_id_type is 'reference', improving usability since not all users might need this feature.

4. Default Property Values: In the createNodePropsData() function, default values are set for properties if they are missing from the node's data, preventing runtime errors.

5. Placeholder Text Consistency: Added more specific placeholders where necessary, such as $t('common.custom') in the dropdown label.

These changes make the code more robust, intuitive, and maintainable while addressing potential bugs in input validation and layout adjustments.

Note: Make sure translations ($t() calls) are correctly configured and available for the specified languages ('workflow.variable.label', etc.).

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaohuzhang1]

Here are some potential issues and suggestions from reviewing the given code:

Potential Issues

1. Variable Scope Issue:

   • The variable modelChange is declared within an inner function but not defined outside of it. This might indicate that there's an issue with its scope, possibly resulting in undefined behavior.

2. Missing Function Definitions:

   • getSelectModel, resetModalSettings, and other functions used within Vue templates (v-on directives) need to be properly defined elsewhere in the component or passed down by parent components.

3. Conditional Rendering Logic:

   • There seems to be redundancy between conditional rendering based on form_data.model_id_type. Consider simplifying the logic where possible.

4. Component Interaction:

   • The <NodeCascader> component references properties like node_model which aren't defined in the provided snippet. Ensure this component has access to necessary data.

5. Translation Strings:

   • If $t is called directly within templates without a context (like <lang:.../>) ensure translations are correctly loaded into the application.

Optimization Suggestions

1. Reduce Repetitive Code:

   • Extract out repetitive code blocks into reusable utility functions to reduce redundancy and improve readability.

2. Use Vuex Actions for Mutations:

   • For state management, consider using Vuex actions instead of direct mutation logic if you don’t already use one. This can help keep mutations clear and maintainable.

3. Lazy Loading Components:

   • If <ModelSelect> and <NodeCascader> are large or complex components, consider lazy loading them only when needed during runtime to improve initial app performance.

4. Optimize Template Structure:

   • Ensure template structure remains clean and optimized. Avoid deeply nested elements to avoid excessive DOM parsing time and memory usage.

5. Avoid Inline Event Handlers：

   • Where possible, move event handlers (especially those triggered by user input) to methods outside of template logic to enhance reusability and maintainability.

Suggested Improvements

// Example of how the improved version might look
<template>
  <el-form ...>
    <!-- Conditionally render ModelSelect component -->
    <ModelSelect v-if="form_data.model_id_type !== 'reference'" />

    <!-- Conditional render NodeCascader component -->
    <NodeCascader v-else ref="nodeCascaderRef" />

    <!-- Common Form Items -->
    ...
  </el-form>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue';
import ModelSelect from './ModelSelect.vue';
import NodeCascader from './NodeCascader.vue';

const form_data = reactive({
  // Initialize with appropriate defaults here
});

// Computed property handling model change event
const handleModelChange = (newModelID: string): void => {
  form_data.model_id = newModelID;
};

watch(() => props.nodeModel.properties.node_data, (newValue) => {
  if (!newValue.model_id_type) {
    newValue.model_id_type = 'custom';
  }
  
  if (!newValue.model_id_reference) {
    setValue(newValue, 'model_id_reference', []);
  }

  Object.assign(form_data, newValue);
}, {
  deep: true,
});
</script>

This suggested approach reduces redundancy, optimizes component interactions, enhances scalability, and improves overall code quality through proper separation of concerns within Vue instances via the Composition API pattern introduced in Vue 3.

[shaohuzhang1]

There seem to be several improvements and changes needed in the provided code:

1. Variable Naming Consistency: Replace form_data with formData for better consistency.

2. Default Value Handling: Ensure that default values are set appropriately when a model isn't provided initially.

3. Code Refactoring:

   const form = {
+    ...defaultValues(nodeModel),
     is_result: false,
     content_list: [],
     model_params_setting: {}
   }

   const formData = computed(() => ({
     ...nodeModel.nodeData ?? {},
-    tts_model_id_type: nodeMdoel?.properties.node_data?.tts_model_id_type || 'custom',
-    tts_model_id_reference: nodeModel.properties?.node_data?.tts_model_id_reference || []
+    ...defaultValues(nodeModel)
   }))

4. Add Necessary Imports: Import necessary components like defaultValues, set.

5. Improve User Experience: Adjust labels and tooltips where appropriate for clarity.

6. Validation Rules: Make sure validation rules are correctly implemented according to the application’s requirements.

Here's an example of how you might implement these suggested changes using TypeScript:

import { defineComponent, reactive, watchEffect, computed, PropType } from 'vue'

const defaultValues = (nodeModel): Record<string, any> => {
  // Implement logic to get default values here
  return {
    tts_model_id: '', 
    tts_model_id_type: 'custom', 
    tts_model_id_reference: [], 
    is_result: false, 
    content_list: [], 
    model_params_setting: {}
  }
}

export default defineComponent({
  name: 'YourComponentName',
  props: {
    nodeModel: {
      type: Object as PropType<any>,
      required: true
    }
  },
  setup(props) {
    const formState = reactive({
      ...defaultValues(props.nodeModel)
    })

    const formData = computed({
      get: () => {
        const { properties } = props.nodeModel

        return {
          ...properties.node_data ?? {}, // Use strict nullish coalescing operator
          ...formState
        }
      }
    })

    // Watch effect to ensure initialization is done before setting initial state
    watchEffect(() => {
      if (!props.nodeModel.nodeData) {
        // Initialize nodeData or other necessary state changes
      }
    })

    // Define methods here if needed...

    return {
      formData
    }
  }
})

This should help improve the readability and functionality of your Vue.js component while addressing potential issues and providing optimizations.