[BUG] RTL (right to left) content support in chatbot UI · FlowiseAI/Flowise#2086

(4 comments) (0 reactions) (0 assignees)TypeScript (52,823 stars) (24,335 forks)batch import

enhancementhelp wantedui

説明

Not sure whether this is a bug / missing feature etc...- but is it possibe to support right to left langauges (Hebrew, Arabic etc..) in the chat UI - basically adding <html dir="rtl"... in the UI container body - is it possible to have some "JS/html hook" for this ? not supporting this makes the UI looks bad mainly with response text that has some bullets numbers etc...

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Flow If applicable, add exported flow in order to help replicating the problem.

Setup

Installation [e.g. docker, npx flowise start, pnpm start]
Flowise Version [e.g. 1.2.11]
OS: [e.g. macOS, Windows, Linux]
Browser [e.g. chrome, safari]

Additional context Add any other context about the problem here.

コントリビューターガイド

技術スタック: typescripthtmlcss
領域: frontendinternationalizationlocalization
Issue 種別: feature
難度: 2
推定時間: 1-3 hours
活動状況: fresh
明確さ: clear
前提条件: Basic HTML and CSSUnderstanding of RTL text directionFamiliarity with chatbot UI components
初心者向け度: 85
調査方針: Investigate the frontend chat UI component, likely in files like 'packages/ui/src/ChatMessage.tsx' or similar, to identify where the <html> or root element is rendered. Add a dir attribute to the container element based on a detected language or a configuration option. Consider using the 'dir' CSS property and adjusting any text alignment or bullet points in CSS for RTL support. The issue mentions a JS/html hook, so explore adding a prop or function to toggle direction.