Skip to content

fix: chat avatar display problem #2749

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
merged 1 commit into from
Mar 31, 2025
Merged

fix: chat avatar display problem #2749

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
3 changes: 3 additions & 0 deletions ui/src/views/application-workflow/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,6 +359,9 @@ function getDetail() {
detail.value.tts_model_id = res.data.tts_model
detail.value.tts_type = res.data.tts_type
saveTime.value = res.data?.update_time
application.asyncGetAccessToken(id, loading).then((res: any) => {
detail.value = { ...detail.value, ...res.data }
})
workflowRef.value?.clearGraphData()
nextTick(() => {
workflowRef.value?.render(detail.value.work_flow)
Copy link
Contributor

Choose a reason for hiding this comment

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

The provided code is mostly correct but has a few minor improvements that can be made:

  1. Consistent Return Value Handling: The application.asyncGetAccessToken promise returns an object with properties like status and possibly other attributes instead of data. You may want to handle this more appropriately.

    application.asyncGetAccessToken(id, loading).then((res: any) => {
  if (res.status && res.data) {
    detail.value = { ...detail.value, ...res.data };
  } else {
    console.error("Failed to retrieve access token data");
  }
}).catch((error) => {
  console.error("Error fetching access token:", error);
});

  2. Optimize Next Tick Execution: Since you're calling nextTick() synchronously after clearing the graph data, it might not improve performance much unless there's significant work being done in the template rendering phase. Consider moving this to workflowRef.value?.render(detail.value.work_flow) directly inside nextTick.

  3. Type Annotations: While TypeScript annotations aren't necessary in modern JavaScript, they help catch potential errors related to type mismatches during development. Ensure all variables are properly typed.

Here’s the slightly optimized version:

function getDetail() {
  detail.value.tts_model_id = res.data.tts_model
  detail.value.tts_type = res.data.tts_type
  saveTime.value = res.data?.update_time;

  application.asyncGetAccessToken(id, loading).then((res: any) => {
    if (res.status && res.data) {
      detail.value = { ...detail.value, ...res.data };
    } else {
      console.error("Failed to retrieve access token data.");
    }
  }).catch((error) => {
    console.error("Error fetching access token:", error);
  });

  // Move nextTick execution here directly for render logic.
  nextTick(() => {
    const updatedWorkflow = { 
      tts_model_id: res.data.tts_model,
      tts_type: res.data.tts_type,
      update_time: res.data?.update_time,
      ...(detail.value || {}),
      ...detail.value.newFieldFromTokenAccess,
      // Add other fields needed from token access as needed
    };

    workflowRef.value?.clearGraphData();
    workflowRef.value?.render(updatedWorkflow);
  });
}

These changes enhance readability and consistency while addressing some common practices for handling asynchronous operations better.

Expand Down
3 changes: 3 additions & 0 deletions ui/src/views/application/ApplicationSetting.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -693,6 +693,9 @@ function getDetail() {
applicationForm.value.tts_type = res.data.tts_type
applicationForm.value.model_setting.no_references_prompt =
res.data.model_setting.no_references_prompt || '{question}'
application.asyncGetAccessToken(id, loading).then((res: any) => {
applicationForm.value = { ...applicationForm.value, ...res.data }
})
})
}

Copy link
Contributor

Choose a reason for hiding this comment

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

The code looks generally fine but has a few areas that can be improved:

  1. Async/Await: The use of loading in application.asyncGetAccessToken(id, loading) is redundant because the async/await syntax inherently handles the promise's resolution status.

  2. Optional Chaining: Using optional chaining (?.) is recommended over null checks for accessing nested properties to avoid errors.

  3. Return Statement: The return statement after the .then() handler is unnecessary and might hide errors if not handled properly.

  4. Code Splitting: Assuming applicationForm, id, and other variables are defined elsewhere and used multiple times, consider splitting the function into smaller parts to improve readability and maintainability.

Here’s an optimized version of the code with these improvements:

function getDetail() {
  applicationForm.value.tts_type = res.data.tts_type;
  
  // Use ? for optional chaining to safely access object properties
  const noReferencesPrompt = res.data.model_setting?.no_references_prompt || '{question}';
  applicationForm.value.model_setting.no_references_prompt = noReferencesPrompt;

  // Use async/await for cleaner error handling
  try {
    const accessTokenResponse = await application.asyncGetAccessToken(id);
    
    // Merge the returned data into applicationForm using spread operator
    Object.assign(applicationForm.value, accessTokenResponse.data);
  } catch (error) {
    console.error('Error fetching access token:', error);
  }
}

Key Changes:

  • Removed the loading parameter from application.asyncGetAccessToken.
  • Used optional chaining (?.) on res.data.model_setting.no_references_prompt.
  • Swapped .then().catch() with a try...catch block for cleaner error handling.
  • Merged the merged response data directly into applicationForm.value using Object.assign.

Expand Down