Feat/rtl support #271
Feat/rtl support #271
Conversation
- Add RTL character detection utility for Arabic, Hebrew scripts - Apply dir attribute to chat input field - Apply dir attribute to user and assistant messages - Automatically switch text direction when RTL characters detected
Provides bash utility script for managing Claude Code UI development servers with commands for start, stop, restart, status, and logs monitoring.
WalkthroughThe changes add RTL (Right-to-Left) text support to the chat interface via a new utility function and propagate text direction attributes throughout message rendering and input fields. Additionally, a new Bash control script manages the application lifecycle with PID tracking, port collision detection, and dev server orchestration. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant CLI as ccui.sh
participant ProcMgr as Process Manager
participant Backend as Backend Server<br/>(Port 3001)
participant Frontend as Frontend Server<br/>(Port 5173)
participant Browser as Browser
User->>CLI: npm run start
CLI->>ProcMgr: Check & kill stale processes on ports
ProcMgr->>Backend: Force kill (if occupying 3001)
ProcMgr->>Frontend: Force kill (if occupying 5173)
CLI->>CLI: Ensure .env exists (copy from .env.example)
CLI->>ProcMgr: Launch 'npm run dev' (backend + frontend)
ProcMgr->>Backend: Start dev server
ProcMgr->>Frontend: Start dev server
CLI->>CLI: Record PID in pid file
par Readiness Polling
CLI->>Backend: Check port 3001 ready?
CLI->>Frontend: Check port 5173 ready?
end
Backend-->>CLI: ✓ Ready
Frontend-->>CLI: ✓ Ready
CLI->>User: Print URLs & log path
CLI->>Browser: Open frontend in browser
Browser-->>Frontend: Load UI
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
ccui.sh (1)
29-37: Consider graceful shutdown before SIGKILL for port cleanup.Using
kill -9immediately doesn't give processes a chance to clean up. Consider sending SIGTERM first.🔎 Proposed improvement
for PORT in $SERVER_PORT $CLIENT_PORT; do PORT_PIDS=$(lsof -ti:$PORT 2>/dev/null) if [ ! -z "$PORT_PIDS" ]; then echo "⚠️ Port $PORT is in use by processes: $PORT_PIDS" echo "🔧 Killing processes on port $PORT..." - kill -9 $PORT_PIDS 2>/dev/null - sleep 1 + kill $PORT_PIDS 2>/dev/null + sleep 2 + # Force kill if still running + PORT_PIDS=$(lsof -ti:$PORT 2>/dev/null) + if [ ! -z "$PORT_PIDS" ]; then + kill -9 $PORT_PIDS 2>/dev/null + sleep 1 + fi fi done
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
ccui.shsrc/components/ChatInterface.jsxsrc/utils/rtlDetection.js
🧰 Additional context used
🧬 Code graph analysis (1)
src/components/ChatInterface.jsx (1)
src/utils/rtlDetection.js (1)
hasRTLCharacters(8-24)
🪛 Shellcheck (0.11.0)
ccui.sh
[warning] 46-46: Use 'cd ... || exit' or 'cd ... || return' in case cd fails.
(SC2164)
🔇 Additional comments (8)
src/utils/rtlDetection.js (1)
8-24: LGTM! Clean RTL detection implementation.The function handles input validation correctly and covers the primary RTL scripts (Arabic and Hebrew). The regex is efficient for simple presence detection.
Consider adding Syriac, Thaana, or N'Ko ranges if broader RTL support is needed in the future, but current coverage handles the vast majority of RTL text.
src/components/ChatInterface.jsx (7)
37-37: LGTM! Import is correctly placed.The RTL detection utility is properly imported for use in the chat interface.
95-111: LGTM! Markdown wrapper correctly propagates direction.The
dirattribute on the wrapper div will cascade to all child elements rendered by ReactMarkdown, ensuring proper RTL text flow.
366-371: LGTM! RTL detection is properly memoized.Using
useMemoensures the RTL detection only runs whenmessage.contentchanges, avoiding unnecessary regex executions on re-renders.
409-411: LGTM! User message RTL direction applied correctly.The direction attribute ensures RTL text in user messages displays with proper alignment and text flow.
1582-1590: LGTM! Assistant message RTL handling is complete.Both Markdown and plain text rendering paths correctly apply the direction attribute, ensuring consistent RTL support for all assistant responses.
1658-1660: LGTM! Input RTL detection is appropriately memoized.The
useMemoensures RTL detection only recalculates when the input value changes. The regex is lightweight enough that additional debouncing isn't necessary for typical input lengths.
4731-4732: LGTM! Textarea direction responds to RTL content.The input field will automatically switch to RTL mode when the user types RTL characters, providing a natural typing experience for RTL languages.
| #!/bin/bash | ||
|
|
||
| # Claude Code UI Control Script | ||
| # Usage: ccui.sh [start|stop] |
There was a problem hiding this comment.
Usage comment is incomplete.
The usage comment only mentions start|stop but the script supports start|stop|restart|status|logs.
🔎 Proposed fix
# Claude Code UI Control Script
-# Usage: ccui.sh [start|stop]
+# Usage: ccui.sh [start|stop|restart|status|logs]📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| #!/bin/bash | |
| # Claude Code UI Control Script | |
| # Usage: ccui.sh [start|stop] | |
| #!/bin/bash | |
| # Claude Code UI Control Script | |
| # Usage: ccui.sh [start|stop|restart|status|logs] |
🤖 Prompt for AI Agents
In ccui.sh around lines 1 to 4, the usage comment only lists "start|stop" but
the script actually supports "start|stop|restart|status|logs"; update the usage
comment to enumerate all supported commands (start|stop|restart|status|logs) and
optionally add a short example or brief note about required permissions so users
know how to invoke each action correctly.
| # Claude Code UI Control Script | ||
| # Usage: ccui.sh [start|stop] | ||
|
|
||
| PROJECT_DIR="/Users/alexsuprun/Documents/my-code/claudecodeui" |
There was a problem hiding this comment.
Hardcoded path prevents portability.
The PROJECT_DIR is hardcoded to a specific user's machine path. This will break for any other user of the repository.
🔎 Proposed fix: Use script location for portability
-PROJECT_DIR="/Users/alexsuprun/Documents/my-code/claudecodeui"
+# Resolve project directory from script location
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PROJECT_DIR="$SCRIPT_DIR"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| PROJECT_DIR="/Users/alexsuprun/Documents/my-code/claudecodeui" | |
| # Resolve project directory from script location | |
| SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" | |
| PROJECT_DIR="$SCRIPT_DIR" |
🤖 Prompt for AI Agents
In ccui.sh around line 6, PROJECT_DIR is hardcoded to a single user path which
breaks portability; replace that hardcoded value with logic that derives the
project directory from the script's location (resolve the script path using
dirname/realpath or ${BASH_SOURCE[0]} as a fallback) so PROJECT_DIR points to
the repository root relative to the script and works for any user.
| fi | ||
|
|
||
| # Start the dev server (both backend and frontend) in background | ||
| cd "$PROJECT_DIR" |
There was a problem hiding this comment.
Handle cd failure to avoid running commands in wrong directory.
If the directory doesn't exist or is inaccessible, the script will continue running npm run dev from the wrong location.
🔎 Proposed fix
- cd "$PROJECT_DIR"
+ cd "$PROJECT_DIR" || { echo "❌ Failed to change to project directory: $PROJECT_DIR"; exit 1; }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| cd "$PROJECT_DIR" | |
| cd "$PROJECT_DIR" || { echo "❌ Failed to change to project directory: $PROJECT_DIR"; exit 1; } |
🧰 Tools
🪛 Shellcheck (0.11.0)
[warning] 46-46: Use 'cd ... || exit' or 'cd ... || return' in case cd fails.
(SC2164)
🤖 Prompt for AI Agents
In ccui.sh around line 46, the script does `cd "$PROJECT_DIR"` without checking
if it succeeded; add an explicit check immediately after the cd to detect
failure and stop the script (print a clear error to stderr and exit with a
non‑zero status) so subsequent commands like `npm run dev` aren’t executed from
the wrong directory; alternatively use a safe form that combines cd with an
immediate fallback exit (or enable errexit) to ensure the script aborts on cd
failure.
1 participant
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.