Skip to content

feat: Chat page retains the display of the last conversation #2301

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
Feb 17, 2025
Merged

feat: Chat page retains the display of the last conversation #2301

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
7 changes: 7 additions & 0 deletions ui/src/views/chat/embed/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,13 @@ function getChatLog(id: string) {

log.asyncGetChatLogClient(id, page, left_loading).then((res: any) => {
chatLogData.value = res.data.records
paginationConfig.current_page = 1
paginationConfig.total = 0
currentRecordList.value = []
currentChatId.value = chatLogData.value?.[0]?.id || 'new'
if (currentChatId.value !== 'new') {
getChatRecord()
}
})
}

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 snippet seems to be part of a function that retrieves chat logs. Here are some potential issues and optimizations:

  1. State Management: Ensure that chatLogData.value, paginationConfig.current_page, paginationConfig.total, currentRecordList.value, and currentChatId.value are correctly defined and updated throughout the application.

  2. Pagination Reset: You should handle cases where no records are fetched (res.data.records.length === 0) before resetting pagination configuration and lists.

  3. Error Handling:

    • Add checks for errors returned by asyncGetChatLogClient.
    • Consider using .catch() to handle network or API errors gracefully.

  4. Function Calls after Data Update**:

    • Ensure that all subsequent functions called like getChatRecord() are not dependent on data being loaded asynchronously.

  5. Code Clarity:

    • Comment the purpose and logic of each section. It's helpful for future reference and maintenance.
    • Use more descriptive variable names if needed.

Here’s a revised version with suggested improvements:

function getChatLog(id: string) {
  if (!id) return; // Handle invalid input

  log.asyncGetChatLogClient(id, 1, true).then((res: any) => {
    const { records } = res.data;

    if (records && records.length > 0) {
      chatLogData.value = records;
      paginationConfig.current_page = 1;
      paginationConfig.total = 0;
      currentRecordList.value = [];
      currentChatId.value = records[0].id || 'new';
      
      if (currentChatId.value !== 'new') {
        getChatRecord();
      }
    } else {
      console.warn("No records found for chat ID:", id);
    }

  }).catch(error => {
    console.error("Failed to fetch chat log:", error);
    // Optionally add UI feedback
  });
}

Additional Tips:

  • Testing: Write unit tests to cover different scenarios, including edge cases like empty responses or network failures.
  • Logging: Implement proper logging to track the flow and state changes during execution.
  • API Documentation: If this function is exposed, consider documenting its parameters, return values, and expected behavior in comments or docstrings.

Expand Down
11 changes: 10 additions & 1 deletion ui/src/views/chat/pc/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,16 @@ function getChatLog(id: string, refresh?: boolean) {
log.asyncGetChatLogClient(id, page, left_loading).then((res: any) => {
chatLogData.value = res.data.records
if (refresh) {
currentChatName.value = chatLogData.value?.[0].abstract
currentChatName.value = chatLogData.value?.[0]?.abstract
} else {
paginationConfig.value.current_page = 1
paginationConfig.value.total = 0
currentRecordList.value = []
currentChatId.value = chatLogData.value?.[0]?.id || 'new'
currentChatName.value = chatLogData.value?.[0]?.abstract || t('chat.createChat')
if (currentChatId.value !== 'new') {
getChatRecord()
}
}
})
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Code Review

The provided getChatLog function appears to be part of a larger system handling聊天 logs, possibly within an application like a messaging platform. There are some potential issues and improvements that can be made:

  1. Null/Undefined Checks: The code contains checks for null or undefined values on properties like .abstract, .id, and so on. However, it's still worth adding checks at more critical points in the logic.

  2. Default Values: Setting default values using the logical OR operator (||) is generally fine when you have clear context about what should happen if the value is not available, such as setting "new" to a new_chat message ID.

  3. Error Handling: Currently, there's no error handling for network requests or other failures that might occur during data retrieval. It would be beneficial to include basic try-catch blocks to handle these scenarios gracefully.

  4. Optimization Suggestions:

    • Lazy Loading with Infinite Scroll: Instead of fetching all pages upfront and storing them entirely in memory, consider implementing infinite scrolling. This will reduce memory usage and improve performance.
    • Debounce Updates: If chatLogData.value changes frequently, consider debouncing updates to ensure they don't overwhelm the UI.
    • Efficient Data Filtering: If needed, optimize how you filter or process data once it arrives from the server.

Here’s an improved version of the function incorporating these considerations:

function getChatLog(id: string, refresh?: boolean) {
  const fetchMoreLogs = async (page: number): Promise<void> => {
    await log.asyncGetChatLogClient(id, page, left_loading)
      .then(({ data: { records } }) => {
        chatLogData.value.push(...records);
        
        if (!refresh && !records.length) {
          paginationConfig.value.current_page = 1;
          paginationConfig.value.total = 0;
          currentRecordList.value = [];
          currentChatId.value = '';
          currentChatName.value = t('chat.createChat');
          return;
        }

        // Pagination handling
        paginationConfig.value.current_page++;
        paginationConfig.value.total = records.length; // Assuming total length is correctly calculated by backend
        
        // Default values for next record set
        if (paginationConfig.value.current_page <= paginationConfig.value.last_page) {
          fetchMoreLogs(paginationConfig.value.current_page);
        }
      })
      .catch((error) => {
        console.error("Error fetching chat log:", error); // Log errors for debugging
        // Handle specific error cases here if necessary
      });
  };

  log.asyncGetChatLogClient(id, left_loading).then(({ data: { records } }) => {
    chatLogData.value = records;

    if (refresh) {
      currentChatName.value = chatLogData.value?.[0]?.abstract || t('chat.createChat');
    } else {
      paginationConfig.value.current_page = 1;
      paginationConfig.value.total = records.length;
      currentRecordList.value = [];
      currentChatId.value = chatLogData.value?.[0]?.id || '';
      
      // Start fetching additional pages if necessary
      if (paginationConfig.value.total > 0) {
        fetchMoreLogs(2);
      }

      // Set initial chat name
      currentChatName.value = chatLogData.value?.[0]?.abstract || t('chat.createChat');
    }

    // Optionally, call getChatRecord() here if needed initially
  })
}

Key Changes:

  • Fetch More Logs Function: Added a recursive function fetchMoreLogs to handle paging through multiple pages without loading everything into memory at once.
  • Pagination Logic: Properly handles pagination by updating currentPage and total.
  • Error Handling: Basic error logging included. Specific error handling can be added based on application needs.
  • Code Structure: Improved readability and modularity by breaking down tasks logically.

Expand Down