The chat dialog box is too wide, how to adjust the scale

[liduang]

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

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

The chat dialog box is too wide, how to adjust the scale？

✔️ Expected Behavior

No response

❌ Actual Behavior

No response

[dosubot[bot]]

To adjust the scale of the chat dialog box in the self-hosted Dify version 0.8.0, you can use the containerProps option in the difyChatbotConfig object to set the width and height of the chat button. Here is an example configuration:

window.difyChatbotConfig = {
    // ... other configurations
    containerProps: {
        style: {
            width: '60px',  // Adjust the width as needed
            height: '60px', // Adjust the height as needed
        },
    },
}

Alternatively, you can use CSS variables to override the default button styles:

#dify-chatbot-bubble-button {
    --dify-chatbot-bubble-button-width: 60px;  // Adjust the width as needed
    --dify-chatbot-bubble-button-height: 60px; // Adjust the height as needed
}

Additionally, if you are embedding the Dify chatbot using an iframe, you can adjust the scale by modifying the style attribute in the iframe code. For example:

<iframe src="https://udify.app/chatbot/ez1pf83HVV3JgWO4" style="width: 80%; height: 80%; min-height: 500px;" frameborder="0" allow="microphone"></iframe>

This code sets the iframe to 80% of the width and height of its container, with a minimum height of 500px. Adjust these values as needed to achieve the desired scale ^[1][2][3][4].

To continue talking to Dosu, mention @dosu.

[liduang]

Why is the size of chatbot's dialog box different from that of chat's dialog box?

[dosubot[bot]]

The size of the chatbot's dialog box is different from that of the chat's dialog box due to the dynamic resizing logic implemented in the Chat component. Specifically, the handleWindowResize function adjusts the width of the chat footer and chat container based on the window size:

const handleWindowResize = useCallback(() => {
  if (chatContainerRef.current)
    setWidth(document.body.clientWidth - (chatContainerRef.current?.clientWidth + 16) - 8)

  if (chatContainerRef.current && chatFooterRef.current)
    chatFooterRef.current.style.width = `${chatContainerRef.current.clientWidth}px`

  if (chatContainerInnerRef.current && chatFooterInnerRef.current)
    chatFooterInnerRef.current.style.width = `${chatContainerInnerRef.current.clientWidth}px`
}, [])

This function ensures that the chat footer and chat container widths are adjusted whenever the window is resized, which can lead to differences in their sizes ^[1].

To continue talking to Dosu, mention @dosu.

[liduang]

Why was the width of chatbot and chat the same in the previous version, and how can I change it back in this version?

[dosubot[bot]]

The width of the chatbot and chat was the same in the previous version due to the default settings. To change it back in this version, you can customize the width using CSS variables or the containerProps option.

Using CSS Variables

You can set the width of the chatbot button using the --dify-chatbot-bubble-button-width CSS variable. For example:

#dify-chatbot-bubble-button {
    --dify-chatbot-bubble-button-width: 50px; /* Set your desired width */
}

Using containerProps Option

You can also set the width using the containerProps option in the difyChatbotConfig object. For example:

window.difyChatbotConfig = {
    // ... other configurations
    containerProps: {
        style: {
            width: '50px', /* Set your desired width */
        },
    },
};

Using iFrame Code

If you are embedding the chatbot using an iFrame, you can adjust the width directly in the iFrame's style attribute. For example:

<iframe src="https://udify.app/chatbot/ez1pf83HVV3JgWO4" style="width: 50px; height: 100%; min-height: 700px" frameborder="0" allow="microphone"></iframe>

By following these methods, you can customize the width of the chatbot button to match the previous version ^[1][2][3][4].

To continue talking to Dosu, mention @dosu.

[liduang]

It's useless, you're adjusting the chatbot's dialog box size, not the chat's dialog box size

[crazywoola]

We will take a look at this.

[liduang]

I don't understand front-end code, so I want to change it back. The same width is too ugly!