FlowiseAI/Flowise

[BUG] RTL (right to left) content support in chatbot UI

Open

#2086 opened on Apr 2, 2024

View on GitHub
 (4 comments) (0 reactions) (0 assignees)TypeScript (52,823 stars) (24,335 forks)batch import
enhancementhelp wantedui

Description

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:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. 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.

Contributor guide

Tech stack
typescripthtmlcss
Domain
frontendinternationalizationlocalization
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic HTML and CSSUnderstanding of RTL text directionFamiliarity with chatbot UI components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
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.