Target branch: Pull requests should target the dev branch.
Description: Briefly describe the changes in this pull request.
Changelog: Ensure a changelog entry following the format of Keep a Changelog is added at the bottom of the PR description.
Documentation: Have you updated relevant documentation Open WebUI Docs, or other documentation sources?
Dependencies: Are there any new dependencies? Have you updated the dependency versions in the documentation?
Testing: Have you written and run sufficient tests for the changes?
Code Review: Have you self-reviewed your code and addressed any coding standard issues?
Description
Add support for RTL layout only for the chat. The user can now choose the preferred layout, LTR (left-to-right) or RTL (right-to-left), via the interface settings. The default is LTR.
Notice that code blocks will remain in LTR as it is considered the modern standard for programming languages.
Changelog Entry
Added
Option to switch the chat layout from LTR to RTL in the settings (LTR is the default).
English translation.
Chat direction was added to the settings store.
Changed
RTL layout support in the Chat components (except Code blocks).
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.
## 📋 Pull Request Information
**Original PR:** https://github.com/open-webui/open-webui/pull/2317
**Author:** [@idomamia](https://github.com/idomamia)
**Created:** 5/16/2024
**Status:** ❌ Closed
**Base:** `dev` ← **Head:** `feat/rtl-layout-chat-support`
---
### 📝 Commits (6)
- [`9c389df`](https://github.com/open-webui/open-webui/commit/9c389df727c97c429516ed2b7bc8cc21669dc7de) Add chat direction to the settings store
- [`a3a832a`](https://github.com/open-webui/open-webui/commit/a3a832a9359bc4a51f5fa5498d960b5ce073385d) Add chat direction toggle button in the interface settings
- [`16b218e`](https://github.com/open-webui/open-webui/commit/16b218e6867cbfe7fca7b6a7a1c2524c24486a56) Add layout direction to all the chat components
- [`4ccb5d3`](https://github.com/open-webui/open-webui/commit/4ccb5d39c7d05f054601e7bc6b7ac6489d4283c2) Code blocks should be in LTR layout for all layouts
- [`97f1d16`](https://github.com/open-webui/open-webui/commit/97f1d1665aab37dbec1f9ed20604ce0bb44acbd0) Add to the i18n the chat direction text
- [`2e77ad8`](https://github.com/open-webui/open-webui/commit/2e77ad87ccdd1eab1b06ce4d7b01a885c1f1dd65) Make the margin and avatar support both LTR and RTL
### 📊 Changes
**9 files changed** (+37 additions, -5 deletions)
<details>
<summary>View changed files</summary>
📝 `src/lib/components/chat/MessageInput.svelte` (+1 -0)
📝 `src/lib/components/chat/Messages/CodeBlock.svelte` (+1 -1)
📝 `src/lib/components/chat/Messages/Name.svelte` (+1 -1)
📝 `src/lib/components/chat/Messages/ProfileImage.svelte` (+3 -1)
📝 `src/lib/components/chat/Messages/ResponseMessage.svelte` (+1 -1)
📝 `src/lib/components/chat/Messages/UserMessage.svelte` (+1 -1)
📝 `src/lib/components/chat/Settings/Interface.svelte` (+25 -0)
📝 `src/lib/i18n/locales/en-US/translation.json` (+3 -0)
📝 `src/lib/stores/index.ts` (+1 -0)
</details>
### 📄 Description
## Pull Request Checklist
- [x] **Target branch:** Pull requests should target the `dev` branch.
- [x] **Description:** Briefly describe the changes in this pull request.
- [x] **Changelog:** Ensure a changelog entry following the format of [Keep a Changelog](https://keepachangelog.com/) is added at the bottom of the PR description.
- [ ] **Documentation:** Have you updated relevant documentation [Open WebUI Docs](https://github.com/open-webui/docs), or other documentation sources?
- [ ] **Dependencies:** Are there any new dependencies? Have you updated the dependency versions in the documentation?
- [x] **Testing:** Have you written and run sufficient tests for the changes?
- [x] **Code Review:** Have you self-reviewed your code and addressed any coding standard issues?
---
## Description
Add support for RTL layout only for the chat. The user can now choose the preferred layout, LTR (left-to-right) or RTL (right-to-left), via the interface settings. The default is LTR.
Notice that code blocks will remain in LTR as it is considered the modern standard for programming languages.
---
### Changelog Entry
### Added
- Option to switch the chat layout from LTR to RTL in the settings (LTR is the default).
- English translation.
- Chat direction was added to the settings store.
### Changed
- RTL layout support in the Chat components (except Code blocks).
---
### Additional Information
- A gif of my implementation:

- Related to #2134
---
<sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
📋 Pull Request Information
Original PR: https://github.com/open-webui/open-webui/pull/2317
Author: @idomamia
Created: 5/16/2024
Status: ❌ Closed
Base:
dev← Head:feat/rtl-layout-chat-support📝 Commits (6)
9c389dfAdd chat direction to the settings storea3a832aAdd chat direction toggle button in the interface settings16b218eAdd layout direction to all the chat components4ccb5d3Code blocks should be in LTR layout for all layouts97f1d16Add to the i18n the chat direction text2e77ad8Make the margin and avatar support both LTR and RTL📊 Changes
9 files changed (+37 additions, -5 deletions)
View changed files
📝
src/lib/components/chat/MessageInput.svelte(+1 -0)📝
src/lib/components/chat/Messages/CodeBlock.svelte(+1 -1)📝
src/lib/components/chat/Messages/Name.svelte(+1 -1)📝
src/lib/components/chat/Messages/ProfileImage.svelte(+3 -1)📝
src/lib/components/chat/Messages/ResponseMessage.svelte(+1 -1)📝
src/lib/components/chat/Messages/UserMessage.svelte(+1 -1)📝
src/lib/components/chat/Settings/Interface.svelte(+25 -0)📝
src/lib/i18n/locales/en-US/translation.json(+3 -0)📝
src/lib/stores/index.ts(+1 -0)📄 Description
Pull Request Checklist
devbranch.Description
Add support for RTL layout only for the chat. The user can now choose the preferred layout, LTR (left-to-right) or RTL (right-to-left), via the interface settings. The default is LTR.
Notice that code blocks will remain in LTR as it is considered the modern standard for programming languages.
Changelog Entry
Added
Changed
Additional Information
A gif of my implementation:

Related to #2134
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.