Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions ui/src/workflow/nodes/ai-chat-node/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -287,13 +287,14 @@
</div>
</template>
</el-form-item>
<el-form-item @click.prevent>
<el-form-item
@click.prevent
v-if="[WorkflowMode.Application, WorkflowMode.ApplicationLoop].includes(workflowMode)"
>
<template #label>
<div class="flex align-center">
<div class="mr-4">
<span>{{
$t('views.workflow.nodes.aiChatNode.returnContent.label')
}}</span>
<span>{{ $t('views.workflow.nodes.aiChatNode.returnContent.label') }}</span>
</div>
<el-tooltip effect="dark" placement="right" popper-class="max-w-200">
<template #content>
Expand Down Expand Up @@ -335,6 +336,8 @@ import { useRoute } from 'vue-router'

import { resetUrl } from '@/utils/common'
import { relatedObject } from '@/utils/array.ts'
import { WorkflowMode } from '@/enums/application'
const workflowMode = (inject('workflowMode') as WorkflowMode) || WorkflowMode.Application
const getResourceDetail = inject('getResourceDetail') as any
const route = useRoute()

Expand Down
19 changes: 7 additions & 12 deletions ui/src/workflow/nodes/image-generate/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,7 @@
@wheel="wheel"
:teleported="false"
v-model="form_data.model_id"
:placeholder="
$t('views.workflow.nodes.imageGenerateNode.model.requiredMessage')
"
:placeholder="$t('views.workflow.nodes.imageGenerateNode.model.requiredMessage')"
:options="modelOptions"
showFooter
@focus="getSelectModel"
Expand Down Expand Up @@ -106,9 +104,7 @@
</div>
<el-tooltip effect="dark" placement="right" popper-class="max-w-200">
<template #content
>{{
$t('views.workflow.nodes.imageGenerateNode.negative_prompt.tooltip')
}}
>{{ $t('views.workflow.nodes.imageGenerateNode.negative_prompt.tooltip') }}
</template>
<AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
</el-tooltip>
Expand All @@ -118,23 +114,20 @@
@wheel="wheel"
:title="$t('views.workflow.nodes.imageGenerateNode.negative_prompt.label')"
v-model="form_data.negative_prompt"
:placeholder="
$t('views.workflow.nodes.imageGenerateNode.negative_prompt.placeholder')
"
:placeholder="$t('views.workflow.nodes.imageGenerateNode.negative_prompt.placeholder')"
style="height: 150px"
@submitDialog="submitNegativeDialog"
/>
</el-form-item>
<el-form-item
:label="$t('views.workflow.nodes.aiChatNode.returnContent.label')"
@click.prevent
v-if="[WorkflowMode.Application, WorkflowMode.ApplicationLoop].includes(workflowMode)"
>
<template #label>
<div class="flex align-center">
<div class="mr-4">
<span>{{
$t('views.workflow.nodes.aiChatNode.returnContent.label')
}}</span>
<span>{{ $t('views.workflow.nodes.aiChatNode.returnContent.label') }}</span>
</div>
<el-tooltip effect="dark" placement="right" popper-class="max-w-200">
<template #content>
Expand All @@ -161,6 +154,8 @@ import AIModeParamSettingDialog from '@/views/application/component/AIModeParamS
import { t } from '@/locales'
import { useRoute } from 'vue-router'
import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
import { WorkflowMode } from '@/enums/application'
const workflowMode = (inject('workflowMode') as WorkflowMode) || WorkflowMode.Application
const getResourceDetail = inject('getResourceDetail') as any
const route = useRoute()

Expand Down
34 changes: 10 additions & 24 deletions ui/src/workflow/nodes/image-to-video/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,7 @@
prop="model_id"
:rules="{
required: true,
message: $t(
'views.workflow.nodes.imageToVideoGenerate.model.requiredMessage',
),
message: $t('views.workflow.nodes.imageToVideoGenerate.model.requiredMessage'),
trigger: 'change',
}"
>
Expand Down Expand Up @@ -48,9 +46,7 @@
:teleported="false"
v-model="form_data.model_id"
@focus="getSelectModel"
:placeholder="
$t('views.workflow.nodes.imageToVideoGenerate.model.requiredMessage')
"
:placeholder="$t('views.workflow.nodes.imageToVideoGenerate.model.requiredMessage')"
:options="modelOptions"
showFooter
:model-type="'ITV'"
Expand Down Expand Up @@ -108,21 +104,15 @@
</div>
<el-tooltip effect="dark" placement="right" popper-class="max-w-200">
<template #content
>{{
$t(
'views.workflow.nodes.imageToVideoGenerate.negative_prompt.tooltip',
)
}}
>{{ $t('views.workflow.nodes.imageToVideoGenerate.negative_prompt.tooltip') }}
</template>
<AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
</el-tooltip>
</div>
</template>
<MdEditorMagnify
@wheel="wheel"
:title="
$t('views.workflow.nodes.imageToVideoGenerate.negative_prompt.label')
"
:title="$t('views.workflow.nodes.imageToVideoGenerate.negative_prompt.label')"
v-model="form_data.negative_prompt"
:placeholder="
$t('views.workflow.nodes.imageToVideoGenerate.negative_prompt.placeholder')
Expand All @@ -136,9 +126,7 @@
:rules="{
type: 'array',
required: true,
message: $t(
'views.workflow.nodes.imageToVideoGenerate.first_frame.requiredMessage',
),
message: $t('views.workflow.nodes.imageToVideoGenerate.first_frame.requiredMessage'),
trigger: 'change',
}"
>
Expand All @@ -161,9 +149,7 @@
:rules="{
type: 'array',
required: false,
message: $t(
'views.workflow.nodes.imageToVideoGenerate.last_frame.requiredMessage',
),
message: $t('views.workflow.nodes.imageToVideoGenerate.last_frame.requiredMessage'),
trigger: 'change',
}"
>
Expand All @@ -184,13 +170,12 @@
<el-form-item
:label="$t('views.workflow.nodes.aiChatNode.returnContent.label')"
@click.prevent
v-if="[WorkflowMode.Application, WorkflowMode.ApplicationLoop].includes(workflowMode)"
>
<template #label>
<div class="flex align-center">
<div class="mr-4">
<span>{{
$t('views.workflow.nodes.aiChatNode.returnContent.label')
}}</span>
<span>{{ $t('views.workflow.nodes.aiChatNode.returnContent.label') }}</span>
</div>
<el-tooltip effect="dark" placement="right" popper-class="max-w-200">
<template #content>
Expand Down Expand Up @@ -218,7 +203,8 @@ import { t } from '@/locales'
import { useRoute } from 'vue-router'
import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
import NodeCascader from '@/workflow/common/NodeCascader.vue'

import { WorkflowMode } from '@/enums/application'
const workflowMode = (inject('workflowMode') as WorkflowMode) || WorkflowMode.Application
const getResourceDetail = inject('getResourceDetail') as any
const route = useRoute()

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are no obvious irregularities or potential issues with the provided code. However, there are a couple of minor optimizations and suggestions that could be made:

Optimizations/Suggestions

  1. Remove Duplicated Message Translation:
    The message requiredMessage appears twice in different places. Consider removing one instance to avoid redundancy.

  2. Reduce Duplication in Placeholder Texts:
    Similar placeholder texts appear multiple times. You can extract these into variables for consistency.

  3. Consistent Use of Vue Ref/Inject:
    Ensure consistent usage of ref and inject. It's generally better practice to use reactive, computed, etc., based on context.

  4. Avoid Direct Usage of String.prototype.includes() in Conditional Checks:
    While not directly related, you might consider using an enum-like approach with symbols or a mapping object instead of direct string checks.

Here's an improved version of the relevant part:

// Extracting translations into constants for clarity
const REQUIRED_MESSAGE_KEY = 'views.workflow.nodes.imageToVideoGenerate.' +
                           'model.requiredMessage'
const NEGATIVE_PROMPT_PLACEHOLDER = t(REQUIRED_MESSAGE_KEY)
const LAST_FRAME_REQUIRED_MESSAGE_KEY = 'views.workflow.nodes.imageToVideoGenerate.' +
                                      'last_frame.requiredMessage'

<el-form-item :label="t('views.workflow.nodes.aiChatNode.returnContent.label')" @click.prevent>
  <template #label>
    <div class="flex align-center">
      <div class="mr-4">
        {{ t('views.workflow.nodes.aiChatNode.returnContent.label') }}
      </div>
      <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
        <template #content>
          <!-- Tooltip content -->
        </template>
        <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
      </el-tooltip>
    </div>
  </template>
</el-form-item>

<style scoped>
/* Existing styles */
</style>

<script setup lang="ts">
import { ref } from 'vue';
import { computed } from 'vue';
import AppIcon from '$components/AppIcons/icons.vue';

function getSelectedOption() {
  // Implementation logic
}

defineProps<{
  form_data: any;
}>();

interface ModelType {
  ITV?: boolean; // Assuming this is defined elsewhere in your project
}
const modelOptions: Array<ModelType> = /* Initialize model options */;
// ... other props and methods ...

// Example usage:
if ([WorkflowMode.Application, WorkflowMode.ApplicationLoop].includes(workflowMode)) {
  return (
    <div>
      {/* Form item */}
    </div>
  );
}
</script>

<!-- Existing imports and components -->

These changes make the code slightly more organized and maintainable while preserving its functionality.

Expand Down
24 changes: 8 additions & 16 deletions ui/src/workflow/nodes/image-understand/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,7 @@
prop="model_id"
:rules="{
required: true,
message: $t(
'views.workflow.nodes.imageUnderstandNode.model.requiredMessage',
),
message: $t('views.workflow.nodes.imageUnderstandNode.model.requiredMessage'),
trigger: 'change',
}"
>
Expand Down Expand Up @@ -46,9 +44,7 @@
@wheel="wheel"
:teleported="false"
v-model="form_data.model_id"
:placeholder="
$t('views.workflow.nodes.imageUnderstandNode.model.requiredMessage')
"
:placeholder="$t('views.workflow.nodes.imageUnderstandNode.model.requiredMessage')"
:options="modelOptions"
showFooter
:model-type="'IMAGE'"
Expand Down Expand Up @@ -143,9 +139,7 @@
:rules="{
type: 'array',
required: true,
message: $t(
'views.workflow.nodes.imageUnderstandNode.image.requiredMessage',
),
message: $t('views.workflow.nodes.imageUnderstandNode.image.requiredMessage'),
trigger: 'change',
}"
>
Expand All @@ -157,22 +151,19 @@
ref="nodeCascaderRef"
:nodeModel="nodeModel"
class="w-full"
:placeholder="
$t('views.workflow.nodes.imageUnderstandNode.image.requiredMessage')
"
:placeholder="$t('views.workflow.nodes.imageUnderstandNode.image.requiredMessage')"
v-model="form_data.image_list"
/>
</el-form-item>
<el-form-item
:label="$t('views.workflow.nodes.aiChatNode.returnContent.label')"
@click.prevent
v-if="[WorkflowMode.Application, WorkflowMode.ApplicationLoop].includes(workflowMode)"
>
<template #label>
<div class="flex align-center">
<div class="mr-4">
<span>{{
$t('views.workflow.nodes.aiChatNode.returnContent.label')
}}</span>
<span>{{ $t('views.workflow.nodes.aiChatNode.returnContent.label') }}</span>
</div>
<el-tooltip effect="dark" placement="right" popper-class="max-w-200">
<template #content>
Expand Down Expand Up @@ -202,7 +193,8 @@ import { t } from '@/locales'
import { useRoute } from 'vue-router'
import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
import GeneratePromptDialog from '@/views/application/component/GeneratePromptDialog.vue'

import { WorkflowMode } from '@/enums/application'
const workflowMode = (inject('workflowMode') as WorkflowMode) || WorkflowMode.Application
const getResourceDetail = inject('getResourceDetail') as any
const route = useRoute()

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code you provided is largely syntactically correct and does not contain any major problems. However, there are a few areas where improvements could be made:

  1. Consistent Message Placement: Ensure that all placeholder messages referring to $t('views.workflow.nodes.imageUnderstandNode.model.requiredMessage' or similar messages are consistently used and localized.

  2. Duplicated Code: The comment-based documentation at the top of several lines can make them look unnecessary but may indicate important information about the form controls being defined.

  3. Optional Placeholder Text: Consider whether it's necessary to include placeholder text if it will always be displayed due to rules defined on the input fields.

  4. Logical Consistency: Verify that the logic inside functions like getResourceDetail and others is functioning as intended without unexpected side effects.

  5. Dynamic Usage: Ensure that dynamic imports (e.g., [WorkflowMode.Application, WorkflowMode.ApplicationLoop].includes(workflowMode)) are correctly implemented according to Vue.js injection patterns and TypeScript types.

Overall, these checks should help ensure robustness and maintainability of the code. Make sure to review each section again after implementing the suggested changes to confirm everything works as expected with your specific use cases.

Expand Down
7 changes: 4 additions & 3 deletions ui/src/workflow/nodes/question-node/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -120,13 +120,12 @@
<el-form-item
:label="$t('views.workflow.nodes.aiChatNode.returnContent.label')"
@click.prevent
v-if="[WorkflowMode.Application, WorkflowMode.ApplicationLoop].includes(workflowMode)"
>
<template #label>
<div class="flex align-center">
<div class="mr-4">
<span>{{
$t('views.workflow.nodes.aiChatNode.returnContent.label')
}}</span>
<span>{{ $t('views.workflow.nodes.aiChatNode.returnContent.label') }}</span>
</div>
<el-tooltip effect="dark" placement="right" popper-class="max-w-200">
<template #content>
Expand Down Expand Up @@ -155,6 +154,8 @@ import { isLastNode } from '@/workflow/common/data'
import { t } from '@/locales'
import { useRoute } from 'vue-router'
import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
import { WorkflowMode } from '@/enums/application'
const workflowMode = (inject('workflowMode') as WorkflowMode) || WorkflowMode.Application
const getResourceDetail = inject('getResourceDetail') as any
const route = useRoute()

Expand Down
28 changes: 10 additions & 18 deletions ui/src/workflow/nodes/reply-node/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,8 @@
size="small"
style="width: 85px"
>
<el-option
:label="$t('views.workflow.variable.Referencing')"
value="referencing"
/>
<el-option
:label="$t('common.custom')"
value="content"
/>
<el-option :label="$t('views.workflow.variable.Referencing')" value="referencing" />
<el-option :label="$t('common.custom')" value="content" />
</el-select>
</div>
</template>
Expand All @@ -44,22 +38,19 @@
ref="nodeCascaderRef"
:nodeModel="nodeModel"
class="w-full"
:placeholder="
$t('views.workflow.nodes.searchKnowledgeNode.searchQuestion.placeholder')
"
:placeholder="$t('views.workflow.nodes.searchKnowledgeNode.searchQuestion.placeholder')"
v-model="form_data.fields"
/>
</el-form-item>
<el-form-item
v-if="[WorkflowMode.Application, WorkflowMode.ApplicationLoop].includes(workflowMode)"
:label="$t('views.workflow.nodes.aiChatNode.returnContent.label')"
@click.prevent
>
<template #label>
<div class="flex align-center">
<div class="mr-4">
<span>{{
$t('views.workflow.nodes.aiChatNode.returnContent.label')
}}</span>
<span>{{ $t('views.workflow.nodes.aiChatNode.returnContent.label') }}</span>
</div>
<el-tooltip effect="dark" placement="right" popper-class="max-w-200">
<template #content>
Expand All @@ -79,9 +70,10 @@
import { set } from 'lodash'
import NodeContainer from '@/workflow/common/NodeContainer.vue'
import NodeCascader from '@/workflow/common/NodeCascader.vue'
import { ref, computed, onMounted } from 'vue'
import { ref, computed, onMounted, inject } from 'vue'
import { isLastNode } from '@/workflow/common/data'

import { WorkflowMode } from '@/enums/application'
const workflowMode = (inject('workflowMode') as WorkflowMode) || WorkflowMode.Application
const props = defineProps<{ nodeModel: any }>()

const wheel = (e: any) => {
Expand Down Expand Up @@ -111,7 +103,7 @@ const form_data = computed({
},
set: (value) => {
set(props.nodeModel.properties, 'node_data', value)
}
},
})

function submitDialog(val: string) {
Expand All @@ -123,7 +115,7 @@ const nodeCascaderRef = ref()
const validate = () => {
return Promise.all([
nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
replyNodeFormRef.value?.validate()
replyNodeFormRef.value?.validate(),
]).catch((err: any) => {
return Promise.reject({ node: props.nodeModel, errMessage: err })
})
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided code appears to be TypeScript with Vue.js components, likely part of an application that handles workflows. While I can't perform specific linting or analysis on this codebase without additional context (like imports, module dependencies), here are general notes and suggestions for improving it:

  1. Consistency: Ensure consistent indentation and spacing throughout the file.

  2. Template Literals: Use template literals consistently when interpolating strings in templates to avoid concatenation problems.

  3. Arrow Function Syntax: Consistently use arrow functions for callback-based logic (wheel, submitDialog) and event handlers.

  4. Type Annotations: Add type annotations where available to improve readability and catch potential errors at compile-time using tools like TypeScripts ESLint plugin.

  5. Unused Variables: Remove unused variables or parameters to make the code cleaner.

  6. Error Handling: Ensure proper error handling across asynchronous operations, especially if multiple promises need to be resolved sequentially.

Here's a simplified version of some of these improvements:

// File: src/components/form/FormElement.tsx

<template>
  <!-- Form element content -->
</template>

<script lang="ts">
import { computed, defineComponent, reactive } from "vue";

export default defineComponent({
  name: 'FormElement',
  setup() {
    const formData = reactive({});
    
    const handleValidate = async (): Promise<string | null> => {
      try {
        await nodeCascaderRef.value?.validate();
        
        // Additional validation for replyNodeFormRef if needed
        
        return '';
      } catch (err: any) {
        console.error(err);
        return err.message;
      }
    };
    
    const onSubmit = async (val: string): Promise<void> => {
      if (await handleValidate()) {
        // Proceed with submission
        submitDialog(val);
      }
    };
    
    return {
      formData,
      handleSubmit: handleSubmit,
    };
  },
});
</script>

Make sure to adjust the names and structure according to your actual component hierarchy and requirements. For more detailed analysis and optimizations, consider running static code analysis tooling with appropriate configurations.

Expand Down
7 changes: 4 additions & 3 deletions ui/src/workflow/nodes/speech-to-text-node/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -81,13 +81,12 @@
<el-form-item
:label="$t('views.workflow.nodes.aiChatNode.returnContent.label')"
@click.prevent
v-if="[WorkflowMode.Application, WorkflowMode.ApplicationLoop].includes(workflowMode)"
>
<template #label>
<div class="flex align-center">
<div class="mr-4">
<span>{{
$t('views.workflow.nodes.aiChatNode.returnContent.label')
}}</span>
<span>{{ $t('views.workflow.nodes.aiChatNode.returnContent.label') }}</span>
</div>
<el-tooltip effect="dark" placement="right" popper-class="max-w-200">
<template #content>
Expand Down Expand Up @@ -116,8 +115,10 @@ import { t } from '@/locales'
import { useRoute } from 'vue-router'
import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
import STTModeParamSettingDialog from '@/views/application/component/STTModelParamSettingDialog.vue'
import { WorkflowMode } from '@/enums/application'
const getResourceDetail = inject('getResourceDetail') as any
const route = useRoute()
const workflowMode = (inject('workflowMode') as WorkflowMode) || WorkflowMode.Application

const {
params: { id },
Expand Down
Loading
Loading