No text input when debug as multiple models

[JokerQyou]

Self Checks

• [X] This is only for bug report, if you would like to ask a quesion, 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] Pleas do not modify this template :) and fill in all the required fields.

Dify version

0.6.0-fix1

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

You need to have an agent to reproduce this bug.

• Navigate to Studio, and click on any of your agents. You'll be brought to the agent's Orchestrate page.
• On right side of the page, the text input area is just below the chat history area.
• Now click on the model selector, and select "Debug as multiple models", this would add another chat history area. But the text input area disappears.

✔️ Expected Behavior

The text input area should always be there, so we can chat with multiple models to debug.

❌ Actual Behavior

The text input area disappears when debug multiple models. It only appears when there is only a single model selected.

[dosubot[bot]]

Hey @JokerQyou, great to see you diving into the intricacies of Dify again! How's everything going on your end?

Thank you for providing the detailed steps to reproduce the issue. It seems like the PromptValuePanel component, which is responsible for the text input area, might be getting unintentionally hidden or removed when toggling between single and multiple model debug modes.

Here's a segment of the code that might be causing the issue:

{
  debugWithMultipleModel && (
    <div className='grow mt-3 overflow-hidden'>
      <DebugWithMultipleModel
        multipleModelConfigs={multipleModelConfigs}
        onMultipleModelConfigsChange={onMultipleModelConfigsChange}
        onDebugWithMultipleModelChange={handleChangeToSingleModel}
        checkCanSend={checkCanSend}
      />
    </div>
  )
}
{
  !debugWithMultipleModel && (
    <div className="flex flex-col grow">
      {/* Existing code for single model debug */}
    </div>
  )
}

The PromptValuePanel component should be rendered regardless of the debugging mode (single or multiple models). If it's placed within these conditional blocks, it might get unmounted when the condition changes. Consider adjusting the logic to ensure it's always rendered when needed.

If the PromptValuePanel is correctly placed outside these conditional blocks and still disappears, it might be due to some state management logic that's causing the component to unmount or hide. Check any state changes that occur when switching between single and multiple model modes, and ensure that the component's visibility or mounting is not tied to these state changes in a way that would cause it to disappear.

Here's the structure of the PromptValuePanel component for your reference:

const PromptValuePanel: FC<IPromptValuePanelProps> = ({
  appType,
  onSend,
  inputs,
  visionConfig,
  onVisionFilesChange,
}) => {
  // ... existing code ...
}

You can find the full structure of the PromptValuePanel component in the Dify codebase.

Please review and adjust the conditional rendering and state management around the PromptValuePanel component. This should help in resolving the problem. If the issue persists, please provide more details or any specific error messages you're encountering.

Sources

• web/app/components/app/configuration/debug/index.tsx
• web/app/components/app/configuration/prompt-value-panel/index.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[zxhlyh]

fixed #3258