In the "Add Model" dialog box of Azure OpenAI Service, the "Base Model" list will be obscured.

[breakstring]

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] Please do not modify this template :) and fill in all the required fields.

Dify version

0.6.10

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

1. Log in to the console.
2. Click the drop-down menu in the upper right corner, select "Settings," and then choose "Model Provider" from the left navigation.
3. Find "Azure OpenAI Service" and click the "Add Model" button.
4. Scroll through the content of the pop-up dialog box and expand the "Base Model" list.

✔️ Expected Behavior

Able to see all the list items in the "Base Model" completely and select the items without any obstruction.

❌ Actual Behavior

The list items in the "Base Model" are obscured, and when the type is something like tts or embedding, the obscured area happens to cover the items that need to be selected, making it impossible to select them.

[dosubot[bot]]

Hey @breakstring! 👋 I'm here to help you with any bugs, questions, or contributions. I'm your friendly bot assistant, Dosu. Let's squash those bugs together!

To fix the issue where the "Base Model" list is obscured in the "Add Model" dialog box of Azure OpenAI Service within the Dify application, you can ensure that the show_on condition for the base_model_name variable is correctly set to display the options based on the selected __model_type. Here is the relevant part of the configuration:

- variable: base_model_name
  label:
    en_US: Base Model
    zh_Hans: 基础模型
  type: select
  required: true
  options:
    - label:
        en_US: gpt-35-turbo
      value: gpt-35-turbo
      show_on:
        - variable: __model_type
          value: llm
    - label:
        en_US: gpt-35-turbo-0125
      value: gpt-35-turbo-0125
      show_on:
        - variable: __model_type
          value: llm
    - label:
        en_US: gpt-35-turbo-16k
      value: gpt-35-turbo-16k
      show_on:
        - variable: __model_type
          value: llm
    - label:
        en_US: gpt-4
      value: gpt-4
      show_on:
        - variable: __model_type
          value: llm
    - label:
        en_US: gpt-4-32k
      value: gpt-4-32k
      show_on:
        - variable: __model_type
          value: llm
    - label:
        en_US: gpt-4o
      value: gpt-4o
      show_on:
        - variable: __model_type
          value: llm
    - label:
        en_US: gpt-4o-2024-05-13
      value: gpt-4o-2024-05-13
      show_on:
        - variable: __model_type
          value: llm
    - label:
        en_US: gpt-4-turbo
      value: gpt-4-turbo
      show_on:
        - variable: __model_type
          value: llm
    - label:
        en_US: gpt-4-turbo-2024-04-09
      value: gpt-4-turbo-2024-04-09
      show_on:
        - variable: __model_type
          value: llm
    - label:
        en_US: gpt-4-0125-preview
      value: gpt-4-0125-preview
      show_on:
        - variable: __model_type
          value: llm
    - label:
        en_US: gpt-4-1106-preview
      value: gpt-4-1106-preview
      show_on:
        - variable: __model_type
          value: llm
    - label:
        en_US: gpt-4-vision-preview
      value: gpt-4-vision-preview
      show_on:
        - variable: __model_type
          value: llm
    - label:
        en_US: gpt-35-turbo-instruct
      value: gpt-35-turbo-instruct
      show_on:
        - variable: __model_type
          value: llm
    - label:
        en_US: text-embedding-ada-002
      value: text-embedding-ada-002
      show_on:
        - variable: __model_type
          value: text-embedding
    - label:
        en_US: text-embedding-3-small
      value: text-embedding-3-small
      show_on:
        - variable: __model_type
          value: text-embedding
    - label:
        en_US: text-embedding-3-large
      value: text-embedding-3-large
      show_on:
        - variable: __model_type
          value: text-embedding
    - label:
        en_US: whisper-1
      value: whisper-1
      show_on:
        - variable: __model_type
          value: speech2text
    - label:
        en_US: tts-1
      value: tts-1
      show_on:
        - variable: __model_type
          value: tts
    - label:
        en_US: tts-1-hd
      value: tts-1-hd
      show_on:
        - variable: __model_type
          value: tts
  placeholder:
    zh_Hans: 在此输入您的模型版本
    en_US: Enter your model version

Ensure that the show_on conditions are correctly set for each model type to avoid any obscuring issues in the UI ^[1].

Additionally, there are known CSS issues in the Dify repository that could cause dropdown lists to be obscured in dialog boxes. Specifically, the .monaco-select-box-dropdown-container.visible class sets the overflow property to hidden, which can cause dropdown lists to be obscured. You might need to adjust the overflow property or other related styles to ensure that dropdown lists are properly displayed within dialog boxes ^[2].

To continue talking to Dosu, mention @dosu.

[takatost]

The configuration method of Azure OpenAI is different from OpenAI. For Azure OpenAI, you need to manually add a custom named Deployment in the Azure console and select a base model. The same goes for Dify, you need to choose a base model and enter the corresponding Deployment name.

[breakstring]

The configuration method of Azure OpenAI is different from OpenAI. For Azure OpenAI, you need to manually add a custom named Deployment in the Azure console and select a base model. The same goes for Dify, you need to choose a base model and enter the corresponding Deployment name.

What I discussed above is not about how to use the Azure OpenAI Service Node, but rather an out-of-the-box UI bug in Dify related to the Azure OpenAI node.

[gijigae]

@takatost it would be a lot easier to understand the bug if you look at the video clip below. :) When you click on the Base Model dropdown box, the text, "Get your API key from Azure", is on top of the base model list.

[kurokobo]

@breakstring @gijigae @takatost This issue is addressed in 0.6.11 so we can close this😀

[breakstring]

@breakstring @gijigae @takatost This issue is addressed in 0.6.11 so we can close this😀

Just quick checked and this issue was fixed. Thank you.