Mixed Script Composer

Forms

About

React message composer for mixed English and Arabic text with direction controls, mentions, attachments, reply context, and a live preview, useful for bilingual chat and team collaboration interfaces.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Mixed Script Composer to your project and fits it to your theme.

Code

How Mixed Script Composer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import MixedScriptComposer from "../components/ui/mixed-script-composer";

export default function MixedScriptComposerDemo() {
  const [failure, setFailure] = React.useState(false);
  const id = React.useId();
  return <div className="flex min-h-[460px] w-full flex-col items-center justify-center bg-background p-4 text-foreground sm:p-8"><div className="w-full max-w-4xl"><div className="mb-4 flex flex-wrap items-center justify-between gap-2 text-xs text-muted-foreground"><span>Workspace / Messages</span><label htmlFor={id} className="flex cursor-pointer items-center gap-2"><input id={id} type="checkbox" checked={failure} onChange={event => setFailure(event.target.checked)} className="h-3.5 w-3.5 accent-primary" /> Simulate send failure</label></div><MixedScriptComposer onSend={async () => { await new Promise(resolve => window.setTimeout(resolve, 500)); if (failure) throw new Error("Simulated send failure"); }} /></div></div>;
}