Chatbot dialog width too small after uprade to 0.10.0

langgenius / dify

Dify is an open-source LLM app development platform. Dify's intuitive interface combines AI workflow, RAG pipeline, agent capabilities, model management, observability features and more, letting you quickly go from prototype to production.

https://dify.ai

Other

53.01k stars 7.73k forks source link

Chatbot dialog width too small after uprade to 0.10.0 #9637

Open ziyu4huang opened 1 month ago

ziyu4huang commented 1 month ago

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

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

Use "Run App", and start chat .

✔️ Expected Behavior

Expect the dialog take all space of browser

❌ Actual Behavior

the dialog looks too small.

I try to hack div , make the max-w-720 to 1280px , it looks OK. class="px-8 mx-auto pt-6 w-full max-w-[1280px] false"

How can we fix it ?

dosubot[bot] commented 1 month ago

Hello @ziyu4huang! 👋 I'm here to assist you with any bugs, questions, or contributions you have for the Dify project. I'm an expert bot ready to help while you wait for a human maintainer.

To fix the issue of the chatbot dialog width being too small after upgrading to version 0.10.0, you can modify the max-w-[720px] to max-w-[1280px] in the chatContainerInnerClassName and chatFooterInnerClassName properties within the ChatWrapper component. Here is the relevant code snippet with the modification:

<Chat
  ...
  chatContainerInnerClassName={`mx-auto pt-6 w-full max-w-[1280px] ${isMobile && 'px-4'}`}
  ...
  chatFooterInnerClassName={`mx-auto w-full max-w-[1280px] ${isMobile && 'px-4'}`}
  ...
/>

This change will increase the maximum width of the chat container and footer to 1280px, addressing the issue of the dialog width being too small ^[1].

To continue talking to Dosu, mention @dosu.

crazywoola commented 1 month ago

Do you have a screenshot?

ziyu4huang commented 1 month ago

Sorry, due to company's policy , I have difficut to upload image. I will try it late outside company.

ziyu4huang commented 1 month ago

Here is the dialog screen , it can no take full with of browser screen_too_small

I think the bot answer where the code cause the problem. I am not sure why is okay before.

screen_too_small-2

crazywoola commented 1 month ago

I see

dosubot[bot] commented 4 days ago

Hi, @ziyu4huang. I'm Dosu, and I'm helping the Dify team manage their backlog. I'm marking this issue as stale.

Issue Summary:

The chatbot dialog width was too small after upgrading to version 0.10.0 in a self-hosted Docker environment.
You suggested increasing the maximum width from 720px to 1280px.
I provided a code snippet to modify the ChatWrapper component, which should resolve the issue.
You confirmed the issue visually with a screenshot.

Next Steps:

Please let us know if this issue is still relevant to the latest version of the Dify repository by commenting on this issue.
If there is no further activity, this issue will be automatically closed in 15 days.

Thank you for your understanding and contribution!