github-starred/open-webui
2
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-05-06 10:58:17 -05:00
Code Issues 1.2k Packages Projects Releases 126 Wiki Activity

[GH-ISSUE #19742] issue: RTL Input Layout breaks when attaching files #57645

New Issue
Closed
opened 2026-05-05 21:17:28 -05:00 by GiteaMirror · 4 comments
GiteaMirror commented 2026-05-05 21:17:28 -05:00
Owner
Copy Link

Originally created by @mhosseinarab on GitHub (Dec 4, 2025).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/19742

Check Existing Issues

  • I have searched for any existing and/or related issues.
  • I have searched for any existing and/or related discussions.
  • I have also searched in the CLOSED issues AND CLOSED discussions and found no related items (your issue might already be addressed on the development branch!).
  • I am using the latest version of Open WebUI.

Installation Method

Docker

Open WebUI Version

v0.6.41

Operating System

Ubuntu

Expected Behavior

The input box should maintain the Right-to-Left (RTL) layout automatically when typing in a RTL language like Persian. The file attachment "chip" and specially the text should be aligned correctly to the right side of the input bar.

Actual Behavior

Upon attaching the file, the text alignment breaks (shifts incorrectly) or maybe overlaps with the UI elements.

Steps to Reproduce

  1. Go to the chat input box.
  2. Type Persian text (e.g., "سلام") to trigger the automatic RTL detection.
    • Result: The text correctly aligns to the right.
  3. Click the + (Plus) button and upload a file (e.g., a .txt file).
  4. Observe the input box layout.

Logs & Screenshots

Correct Behavior (Before Attachment):

Image

Broken Behavior (After Attachment):

Image
Originally created by @mhosseinarab on GitHub (Dec 4, 2025). Original GitHub issue: https://github.com/open-webui/open-webui/issues/19742 ### Check Existing Issues - [x] I have searched for any existing and/or related issues. - [x] I have searched for any existing and/or related discussions. - [x] I have also searched in the CLOSED issues AND CLOSED discussions and found no related items (your issue might already be addressed on the development branch!). - [x] I am using the latest version of Open WebUI. ### Installation Method Docker ### Open WebUI Version v0.6.41 ### Operating System Ubuntu ### Expected Behavior The input box should maintain the Right-to-Left (RTL) layout automatically when typing in a RTL language like Persian. The file attachment "chip" and specially the text should be aligned correctly to the right side of the input bar. ### Actual Behavior Upon attaching the file, the text alignment breaks (shifts incorrectly) or maybe overlaps with the UI elements. ### Steps to Reproduce 1. Go to the chat input box. 2. Type Persian text (e.g., "سلام") to trigger the automatic RTL detection. - Result: The text correctly aligns to the right. 3. Click the + (Plus) button and upload a file (e.g., a .txt file). 4. Observe the input box layout. ### Logs & Screenshots Correct Behavior (Before Attachment): <img width="790" height="124" alt="Image" src="https://github.com/user-attachments/assets/674a74c4-b243-4094-aa1c-297bd426cd8a" /> Broken Behavior (After Attachment): <img width="907" height="158" alt="Image" src="https://github.com/user-attachments/assets/41d92f10-70d0-433b-a2bd-a97e91849ee1" />
GiteaMirror added the bughelp wantedconfirmed issue labels 2026-05-05 21:17:29 -05:00
GiteaMirror commented 2026-05-05 21:17:32 -05:00
Author
Owner
Copy Link

@owui-terminator[bot] commented on GitHub (Dec 4, 2025):

🔍 Similar Issues Found

I found some existing issues that might be related to this one. Please check if any of these are duplicates or contain helpful solutions:

  1. #19563 issue:
    by naruto7g • Nov 28, 2025 • bug

  2. #19211 issue:
    by Byrnes9 • Nov 16, 2025 • bug

  3. #18084 issue: DEV docker image broken
    by by-lin • Oct 06, 2025 • bug

  4. #13633 issue: Input text box direction not affected by RTL Interface setting
    by merrime-n • May 07, 2025 • bug

  5. #18974 issue: hanging on front matter requirements after update
    by DuckyBlender • Nov 06, 2025 • bug

Show 5 more related issues

  1. #17446 issue: file upload bug from 0.6.23
    by K7cl • Sep 14, 2025 • bug

  2. #19438 issue: Icon loading regression
    by JoelShepard • Nov 24, 2025 • bug

  3. #16252 issue: Folder issue with uploaded files (not the same as #15898)
    by nc98-ai • Aug 04, 2025 • bug

  4. #15928 issue: Problematic installation
    by PatrickAtYacoub • Jul 22, 2025 • bug

  5. #14650 issue:
    by lilosti • Jun 04, 2025 • bug

💡 Tips:

  • If this is a duplicate, please consider closing this issue and adding any additional details to the existing one
  • If you found a solution in any of these issues, please share it here to help others

This comment was generated automatically by a bot. Please react with a 👍 if this comment was helpful, or a 👎 if it was not.

<!-- gh-comment-id:3611130864 --> @owui-terminator[bot] commented on GitHub (Dec 4, 2025): 🔍 **Similar Issues Found** I found some existing issues that might be related to this one. Please check if any of these are duplicates or contain helpful solutions: 1. [#19563](https://github.com/open-webui/open-webui/issues/19563) **issue:** *by naruto7g • Nov 28, 2025 • `bug`* 2. [#19211](https://github.com/open-webui/open-webui/issues/19211) **issue:** *by Byrnes9 • Nov 16, 2025 • `bug`* 3. [#18084](https://github.com/open-webui/open-webui/issues/18084) **issue: DEV docker image broken** *by by-lin • Oct 06, 2025 • `bug`* 4. [#13633](https://github.com/open-webui/open-webui/issues/13633) **issue: Input text box direction not affected by RTL Interface setting** *by merrime-n • May 07, 2025 • `bug`* 5. [#18974](https://github.com/open-webui/open-webui/issues/18974) **issue: hanging on front matter requirements after update** *by DuckyBlender • Nov 06, 2025 • `bug`* <details> <summary>Show 5 more related issues</summary> 6. [#17446](https://github.com/open-webui/open-webui/issues/17446) **issue: file upload bug from 0.6.23** *by K7cl • Sep 14, 2025 • `bug`* 7. [#19438](https://github.com/open-webui/open-webui/issues/19438) **issue: Icon loading regression** *by JoelShepard • Nov 24, 2025 • `bug`* 8. [#16252](https://github.com/open-webui/open-webui/issues/16252) **issue: Folder issue with uploaded files (not the same as #15898)** *by nc98-ai • Aug 04, 2025 • `bug`* 9. [#15928](https://github.com/open-webui/open-webui/issues/15928) **issue: Problematic installation** *by PatrickAtYacoub • Jul 22, 2025 • `bug`* 10. [#14650](https://github.com/open-webui/open-webui/issues/14650) **issue:** *by lilosti • Jun 04, 2025 • `bug`* </details> --- 💡 **Tips:** - If this is a duplicate, please consider closing this issue and adding any additional details to the existing one - If you found a solution in any of these issues, please share it here to help others *This comment was generated automatically by a bot.* Please react with a 👍 if this comment was helpful, or a 👎 if it was not.
GiteaMirror commented 2026-05-05 21:17:32 -05:00
Author
Owner
Copy Link

@silentoplayz commented on GitHub (Dec 4, 2025):

I wasn't able to reproduce the reported issue

I do want to point out that one of the attached file's name here also got the RTL treatment and reads as txt.201-300, which is quite odd to see.

Image

Then I also managed to figure out this was possible:

Image Image

Edit:

It's possible with LTR text direction as well:
Image

<!-- gh-comment-id:3614390467 --> @silentoplayz commented on GitHub (Dec 4, 2025): ~~I wasn't able to reproduce the reported issue~~ ## I do want to point out that one of the attached file's name here also got the RTL treatment and reads as `txt.201-300`, which is quite odd to see. <img width="2298" height="274" alt="Image" src="https://github.com/user-attachments/assets/b7a2c19d-2767-4fd4-a09d-f6afee49076b" /> ## Then I also managed to figure out this was possible: <img width="2300" height="1284" alt="Image" src="https://github.com/user-attachments/assets/79b42af9-b6e0-44a6-a2ef-b5a5a096e5b4" /> <img width="291" height="388" alt="Image" src="https://github.com/user-attachments/assets/6f67bb61-a5bc-4fec-ac25-2e94e80c70ee" /> ## Edit: It's possible with LTR text direction as well: <img width="2292" height="916" alt="Image" src="https://github.com/user-attachments/assets/3f952562-3b8c-488c-a5fe-6156c22ee198" />
GiteaMirror commented 2026-05-05 21:17:33 -05:00
Author
Owner
Copy Link

@silentoplayz commented on GitHub (Dec 4, 2025):

I previously misunderstood the issue, but now I have a better understanding and I WAS and am able to reproduce the reported issue this time. I was setting the Chat direction to RTL, which wasn't mentioned in the reproduction steps, nor was it needed to reproduce the issue.

With a file attached

Image

Without a file attached

Image
<!-- gh-comment-id:3614577819 --> @silentoplayz commented on GitHub (Dec 4, 2025): I previously misunderstood the issue, but now I have a better understanding and I **WAS** and am able to reproduce the reported issue this time. I was setting the `Chat direction` to `RTL`, which wasn't mentioned in the reproduction steps, nor was it needed to reproduce the issue. ### With a file attached <img width="2299" height="186" alt="Image" src="https://github.com/user-attachments/assets/7c7c8738-03d5-4fb1-9608-3d17e7ea7c55" /> ### Without a file attached <img width="2299" height="186" alt="Image" src="https://github.com/user-attachments/assets/1895a896-75f1-44fd-8755-ccc058893f6a" />
GiteaMirror commented 2026-05-05 21:17:33 -05:00
Author
Owner
Copy Link

@rgaricano commented on GitHub (Dec 5, 2025):

Reference for fix (align file container with setted text dir):
add dir={$settings?.chatDirection ?? 'auto'}
in:
6f1486ffd0/src/lib/components/chat/Messages/UserMessage.svelte (L191)
6f1486ffd0/src/lib/components/chat/Messages/ResponseMessage.svelte (L669)
6f1486ffd0/src/lib/components/channel/Messages/Message.svelte (L318)

<!-- gh-comment-id:3618468936 --> @rgaricano commented on GitHub (Dec 5, 2025): Reference for fix (align file container with setted text dir): add `dir={$settings?.chatDirection ?? 'auto'}` in: https://github.com/open-webui/open-webui/blob/6f1486ffd0cb288d0e21f41845361924e0d742b3/src/lib/components/chat/Messages/UserMessage.svelte#L191 https://github.com/open-webui/open-webui/blob/6f1486ffd0cb288d0e21f41845361924e0d742b3/src/lib/components/chat/Messages/ResponseMessage.svelte#L669 https://github.com/open-webui/open-webui/blob/6f1486ffd0cb288d0e21f41845361924e0d742b3/src/lib/components/channel/Messages/Message.svelte#L318
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
confirmed
confirmed issue
core
documentation
enhancement
good first issue
help wanted
non-core
pull-request
Mirrored from GitHub Pull Request
 python
question
testing wanted
No Label bug confirmed issue help wanted
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#57645
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?