Skip to content

refactor: Dialogue logic optimization #2776

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shaohuzhang1 merged 1 commit into from
Apr 2, 2025
Merged

refactor: Dialogue logic optimization #2776

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 3 additions & 1 deletion ui/src/components/ai-chat/component/chat-input-operate/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,15 +268,17 @@ const props = withDefaults(
isMobile: boolean
appId?: string
chatId: string
showUserInput?: boolean
sendMessage: (question: string, other_params_data?: any, chat?: chatType) => void
openChatId: () => Promise<string>
checkInputParam: () => boolean
}>(),
{
applicationDetails: () => ({}),
available: true
}
)
const emit = defineEmits(['update:chatId', 'update:loading'])
const emit = defineEmits(['update:chatId', 'update:loading', 'update:showUserInput'])
const chartOpenId = ref<string>()
const chatId_context = computed({
get: () => {
Copy link
Copy Markdown
Contributor Author

@shaohuzhang1 shaohuzhang1 Apr 2, 2025

Choose a reason for hiding this comment

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

The reviewed code appears to be defining Vue.js component options with type annotations and default values. Here's a review of the code:

Issues/Findings:

  1. Redundant Imports: The withDefaults function from @vue/runtime-core could be imported directly, which reduces clutter.

  2. Unused Default Props: The appId?: string prop is not currently used or checked anywhere in the props object, so it might be removed for clarity.

  3. New Required Prop: The new prop showUserInput?: boolean is set as optional but is used directly without initial checks; consider adding a check to ensure its value before using it.

  4. Optional Emitted Events: The use of defineEmits(['update:chatId', 'update:loading']) means that emit('update:showUserInput') won't cause an error if this new event isn't added to the emits array initially. It should be updated accordingly.

  5. Computed Properties: The dependency of the chatId_context computed property on available does not match the logic within it (return false), which might lead to incorrect behavior under certain conditions.

Suggestions:

  1. Update the import statement to remove the unnecessary part (if applicable):
// const { withDefaults } = '@vue/runtime-core'; // Remove if unused
  1. Consider removing the appId?: string since it's not utilized.
  2. Add a check to ensure showUserInput has a defined value when needed:
checkIfShowUserInputIsSet() {
  return typeof this.showUserInput !== "undefined";
}

And update the usage accordingly in methods where you rely on this.showUserInput.
4. Ensure that all changes made after updating the emits array take effect properly by rebuilding the project if necessary.
5. Modify the chatId_context computation to correctly reflect its dependencies:

chatId_context: computed({
  get: () => {
    var retVal = this.available;
    console.log(retVal);
    return retVal ? this.chatId : '';
  },
})

Reviewing these points will help maintain cleaner and more efficient code.

Expand Down
16 changes: 15 additions & 1 deletion ui/src/components/ai-chat/component/user-form/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,9 @@ const inputFieldConfig = ref({ title: t('chat.userInput') })
const showUserInput = ref(true)
const firstMounted = ref(false)

const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()
const dynamicsFormRef2 = ref<InstanceType<typeof DynamicsForm>>()

const emit = defineEmits(['update:api_form_data', 'update:form_data', 'confirm', 'cancel'])

const api_form_data_context = computed({
Expand Down Expand Up @@ -365,7 +368,18 @@ const confirmHandle = () => {
const cancelHandle = () => {
emit('cancel')
}
defineExpose({ checkInputParam })
const render = (data: any) => {
if (dynamicsFormRef.value) {
dynamicsFormRef.value?.render(inputFieldList.value, data)
}
}

const renderDebugAiChat = (data: any) => {
if (dynamicsFormRef2.value) {
dynamicsFormRef2.value?.render(apiInputFieldList.value, data)
}
}
defineExpose({ checkInputParam, render, renderDebugAiChat })
onMounted(() => {
firstMounted.value = true
handleInputFieldList()
Copy link
Copy Markdown
Contributor Author

@shaohuzhang1 shaohuzhang1 Apr 2, 2025

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 part of a Vue.js component that handles dynamic form rendering based on certain conditions. There aren't significant immediate structural issues, but there are some areas for enhancement:

  1. Refactoring dynamicsFormRef: The current implementation uses two separate refs (dynamicsFormRef and dynamicsFormRef2) without any apparent reason. This redundancy could be optimized by consolidating these refs into one.

  2. Event Emits: The emit function is used multiple times within the component logic. Consider creating utility functions or methods to avoid repeating emits.

  3. Dynamic Rendering Logic: Ensure that the render, renderDebugAiChat, and checkInputParam functions are appropriately named and documented. They seem to encapsulate specific tasks related to rendering and handling user inputs.

  4. On Mounted Hook: The handleInputFieldList() function call should have parentheses after it. If this function exists elsewhere in the code, ensure it's called with appropriate parameters.

Here’s an improved version of the code snippet:

@@ -83,6 +83,9 @@ const inputFieldConfig = ref({ title: t('chat.userInput') })
 const showUserInput = ref(true)
 const firstMounted = ref(false)

+const dynamicsFormRefs = ref<[InstanceType<typeof DynamicsForm>, InstanceType<typeof DynamicsForm>]>([null, null])
+
 const emit = defineEmits(['update:api_form_data', 'update:form_data', 'confirm', 'cancel'])

 const api_form_data_context = computed({
@@ -365,7 +368,18 @@ const confirmHandle = () => {
 const cancelHandle = () => {
   emit('cancel')
 }

-defineExpose({ checkInputParam })
+const render = (refIndex: number, data: any) => {
+  const currentRef = dynamicsFormRefs.value[refIndex]
+  if (currentRef) {
+    currentRef.render(inputFieldList.value, data)
+  }
+}

+const renderDebugAiChat = (refIndex: number, data: any) => {
+  const currentRef = dynamicsFormRefs.value[refIndex]
+  if (currentRef) {
+    currentRef.render(apiInputFieldList.value, data)
+  }
+}

+defineExpose({ checkInputParam, render, renderDebugAiChat })

	onMounted(() => {
	  firstMounted.value = true

      // Call the helper function that processes or sets up input field lists here...
	})

Key Changes:

  • consolidated dynamicsFormRef into an array [dynamicsFormRefs.value[0], dynamicsFormRefs.value[1]]
  • added type annotations where necessary
  • created utility functions render and renderDebugAiChat based on the index passed in, avoiding hardcoding which ref to modify.

Expand Down
10 changes: 9 additions & 1 deletion ui/src/components/ai-chat/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,10 @@
:class="type"
:style="{ height: firsUserInput ? '100%' : undefined }"
>
<div v-show="showUserInputContent" :class="firsUserInput ? 'firstUserInput' : 'popperUserInput'">
<div
v-show="showUserInputContent"
:class="firsUserInput ? 'firstUserInput' : 'popperUserInput'"
>
<UserForm
v-model:api_form_data="api_form_data"
v-model:form_data="form_data"
Expand Down Expand Up @@ -60,9 +63,11 @@
:type="type"
:send-message="sendMessage"
:open-chat-id="openChatId"
:check-input-param="checkInputParam"
:chat-management="ChatManagement"
v-model:chat-id="chartOpenId"
v-model:loading="loading"
v-model:show-user-input="showUserInput"
v-if="type !== 'log'"
>
<template #operateBefore>
Expand Down Expand Up @@ -210,6 +215,9 @@ function UserFormCancel() {
// api_form_data.value = JSON.parse(JSON.stringify(initialApiFormData.value))
showUserInput.value = false
}
const checkInputParam = () => {
userFormRef.value?.checkInputParam()
}

function sendMessage(val: string, other_params_data?: any, chat?: chatType) {
if (!userFormRef.value?.checkInputParam()) {
Copy link
Copy Markdown
Contributor Author

@shaohuzhang1 shaohuzhang1 Apr 2, 2025

Choose a reason for hiding this comment

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

The provided code block appears to be from a Vue.js component with a UserForm inside it. While overall it's clean and functional, there are some minor improvements that can be made:

  1. HTML Structure: The <div> tag in line 60 is missing quotation marks around the class attribute. It should be corrected as follows:

    <div v-show="showUserInputContent" :class="firsUserInput ? 'firstUserInput' : 'popperUserInput'">

  2. Function Placement: In line 217, you mistakenly removed the semicolon at the end of the assignment statement initialApiFormData.value = JSON.parse(JSON.stringify(initialApiFormData.value)). If this was intentional, ensure the rest of this logic handles errors correctly.

Here’s the improved code snippet including these changes:

@@ -5,7 +5,10 @@
     :class="type"
     :style="{ height: firsUserInput ? '100%' : undefined }"
   >
-    <div v-show="showUserInputContent" :class="firsUserInput ? 'firstUserInput' : 'popperUserInput'">
+    <div
+      v-show="showUserInputContent"
+      :class="firsUserInput ? 'firstUserInput' : 'popperUserInput'"
+    >
       <UserForm
         v-model:api_form_data="api_form_data"
         v-model:form_data="form_data"
@@ -63,9 +68,11 @@ function UserFormCancel() {
   // api_form_data.value = JSON.parse(JSON.stringify(initialApiFormData.value))
   showUserInput.value = false
 }
+const checkInputParam = () => {
+  userFormRef.value?.checkInputParam()
+}
 
 function sendMessage(val: string, other_params_data?: any, chat?: chatType) {
   if (!userFormRef.value?.checkInputParam()) {

Optimization Suggestion:
If this code segment is part of larger functionality or needs to handle edge cases more robustly, consider adding error handling for parsing initialApiFormData and ensuring that userFormRef exists before calling its method checkInputParam.

This improvement enhances readability and potentially fixes small runtime issues while maintaining the core intent of your original code.

Expand Down