fix: html_render supports chatUserProfile function

[shaohuzhang1]

fix: html_render supports chatUserProfile function

[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.

[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]

There is an issue with the use of inject('chatUserProfile'). The provided code does not handle cases where there might not be a valid value injected for this key. It should include checks to ensure that chatUserProfile exists before making further calls. Also, the <script> block at the very beginning seems out of place and should be moved after closing the <style> tags or inside the template section.

Additionally, the _INSTANCE_ID variable is defined but used without prefixing it with $, which suggests it's likely meant to be part of another object. If this is intentional, make sure to include a proper JavaScript module export for such values.

Here are some corrections:

1. Check if chatUserProfile is available before calling its methods.
2. Move non-template script blocks closer to their respective elements or wrap them properly.
3. Ensure _INSTANCE_ID is correctly referenced within any JavaScript variables.

These changes will help improve robustness and maintainability of the Vue component.

[shaohuzhang1]

The provided code has several improvements and optimizations that can be applied:

1. Remove Redundant Declarations: Remove commented-out lines like window.chatUserProfile.

2. Use provide with Proper Function Reference for Reusability: The provide usage is correct, but ensure it provides a function reference rather than its evaluation.

3. Simplify Conditional Logic: Inline some conditional logic where possible to reduce nesting and make the code more readable.

4. Optimize Data Types and Variable Assignments: Ensure that variable assignments are clear and minimize reassignment without necessary changes.

5. Consistent Naming Conventions: Use consistent naming conventions across similar variables or functions.

Here's an optimized version of the code:

import { ref } from 'vue'
import { onBeforeUnmount } from 'vue'

export default {
  setup(props) {
    const chatUser = props.currentUser || {} // Assuming currentUser exists

    provide('getSelectModelList', (params: any) => {
      return loadSharedApi<{ type: 'model'; systemType: 'workspace' }>({ type: 'model', systemType: 'workspace' }).getSelectModelList(params)
    })

    provide('chatUserProfile', () => {
      if (props.type !== 'ai-chat') return null

      if (
        chatUser.chat_profile &&
        chatUser.chat_profile.authentication_type === 'login'
      ) {
        return chatUser.getChatUserProfile()
      }

      return Promise.resolve(null)
    })

    const transcribing = ref(false)

    defineOptions({ name: 'AiChat' })

    const handleScroll = (event: WheelEvent) => {
      const container = document.getElementById('textArea')
      if (!container) return

      if (Math.abs(event.deltaY) < 50 && !transcribing.value) {
        event.preventDefault()

        const newCursorPos = Math.min(
          container.scrollLeft + ((event.deltaY > 0 ? event.deltaY : -event.deltaY) * 5),
          container.scrollWidth - container.clientWidth,
        )

        container.scrollTo({
          left: Math.round(newCursorPos),
        })
      }
    }

    let lastMousePress: number | null = null

    document.addEventListener('mousedown', () => {
      lastMousePress = Date.now()
    })
    document.addEventListener('mouseup', () => {
      lastMousePress = null
    })
    document.addEventListener('mousemove', (e) => {
      if (
        e.target instanceof HTMLTextAreaElement ||
        e.target.closest('.code-editor-textarea-wrapper') !== null
      )
        return

      if (lastMousePress) {
        const container =	document.getElementById('textInputFieldWrapper')

        if (!container) return

        const delta = e.clientX - container.offsetLeft - container.clientWidth / 2
        const scrollRange = container.offsetWidth - container.clientWidth
        const newPos = Math.max(-scrollRange, Math.min(scrollRange, deltaX))
        
        container.style.scrollLeft += newPos
      }
    }, true)

    onBeforeUnmount(() => {
      document.removeEventListener('wheel', handleScroll)
      document.removeEventListener('mousedown', () => {})
      document.removeEventListener('mouseup', () => {})
      document.removeEventListener('mousemove', (e) => {})
    })

    function parseTransform(transformStr: string) {
      const result = transformStr.match(/^([-+]?\d+(\.\d+)?)([pxcm])?$/i)?.map(Number);
      
      if (result) return {
        scale: result[2] ? parseFloat(result[1]) : 1,
        translateX: result[1],
        translateY: result[1],
        translateZ: result[1],
      };

      return result;
    }

    return {
      transcribing,
      handleScroll,
    };
  },
}

Key Changes:

• Removed redundant assignment to window.chatUserProfile.
• Simplified and clarified conditional logic in chatUserProfile.
• Improved readability and maintainability throughout the component.