Error in displaying pop-up menu in LLM model settings in workflow.

[asemandeveloper]

Self Checks

• [X] This is only for bug report, if you would like to ask a question, please head to Discussions.
• [X] I have searched for existing issues search for existing issues, including closed ones.
• [X] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• [X] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
• [X] Please do not modify this template :) and fill in all the required fields.

Dify version

0.7.1

Cloud or Self Hosted

Cloud, Self Hosted (Docker), Self Hosted (Source)

Steps to reproduce

In creating an APP from the 'Workflow Planning Assistant' template, when I place the LLM node at the end of the workflow and before the last output and enter the / character in the LLM settings box in the system section, pop-up menus are shown with scrolling! and this makes it difficult to choose menu items. See the image below.

✔️ Expected Behavior

Display menus without scrolling.

❌ Actual Behavior

Displaying the menu with a scroll that causes problems.

[dosubot[bot]]

To fix the issue of the pop-up menu displaying with scrolling in the LLM model settings in the workflow, you can adjust the CSS to ensure the pop-up menu is properly positioned and does not require excessive scrolling. Here is an example of how you can modify the CSS:

/* Ensure the pop-up menu is positioned correctly and does not require excessive scrolling */
.pop-up-menu {
    position: absolute;
    max-height: 300px; /* Adjust the height as needed */
    overflow-y: auto; /* Enable vertical scrolling if the content exceeds the max height */
    z-index: 1000; /* Ensure the menu is above other elements */
}

/* Optional: Add some padding and background color for better visibility */
.pop-up-menu-item {
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
}

Additionally, ensure that the ModelSelector component in your Node component is properly configured to handle the pop-up menu. Here is a snippet from the Node component that shows how the ModelSelector is used:

import type { FC } from 'react'
import React from 'react'
import type { LLMNodeType } from './types'
import {
  useTextGenerationCurrentProviderAndModelAndModelList,
} from '@/app/components/header/account-setting/model-provider-page/hooks'
import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
import type { NodeProps } from '@/app/components/workflow/types'

const Node: FC<NodeProps<LLMNodeType>> = ({
  data,
}) => {
  const { provider, name: modelId } = data.model || {}
  const {
    textGenerationModelList,
  } = useTextGenerationCurrentProviderAndModelAndModelList()
  const hasSetModel = provider && modelId

  if (!hasSetModel)
    return null

  return (
    <div className='mb-1 px-3 py-1'>
      {hasSetModel && (
        <ModelSelector
          defaultModel={{ provider, model: modelId }}
          modelList={textGenerationModelList}
          readonly
        />
      )}
    </div>
  )
}

export default React.memo(Node)

Ensure that the ModelSelector component is styled appropriately to avoid any layout issues. This CSS and component configuration should help in displaying the pop-up menu correctly without requiring excessive scrolling, making it easier to choose menu items. Adjust the max-height value as needed to fit your specific requirements ^[1][2][3].

To continue talking to Dosu, mention @dosu.

[asemandeveloper]

Unfortunately, the problem was not solved!

[iamjoel]

It has been fixed.