@ahmedramez-org/nexus-chat 1.0.0-beta.23 → 1.0.0-beta.24

package/README.md

@@ -17,7 +17,7 @@ build itself is not in this package: Copilot serves it, and each GitHub Release
 ```
 
 Incorta serves this script next to `embed.html`; it is not in this package and needs no build. It
-draws the Incorta Intelligence launcher at the bottom right and opens the embedded chat (below)
+draws the Incorta Intelligence launcher at the bottom right (bottom left on a `dir="rtl"` page) and opens the embedded chat (below)
 floating, docked or full screen, on the user's Incorta session, so the page holds no token. It is
 one classic script with no imports, so a page on any origin loads it without CORS.
 
@@ -42,7 +42,8 @@ import { NexusChat } from '@incorta/nexus-chat/react';
 
 It draws its own window: an Incorta Intelligence launcher at the bottom right opens the chat
 floating (a card lifted off the page, opening out of the launcher, which stays under it to hide
-it) or docked flush on the right (the page makes room). The chat's own top bar switches between
+it) or docked flush on the right (the page makes room). On a `dir="rtl"` page the launcher and
+window sit on the left, following a live `dir` change. The chat's own top bar switches between
 the windows (Float, Dock to the side, Enter full screen: every allowed one but the current) and
 closes it back to the launcher; nothing sits above the chat. `modes` limits the windows (default
 all three, in that order) and `defaultMode` opens one on load. Below 768px wide the chat covers

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahmedramez-org/nexus-chat",
-  "version": "1.0.0-beta.23",
+  "version": "1.0.0-beta.24",
   "description": "NexusChat for any app: a connector and React component that load the prebuilt chat from IncortaCopilot (or a pinned copy), and the host contract types and checks.",
   "license": "UNLICENSED",
   "repository": {

package/react.d.ts

@@ -75,7 +75,7 @@ export type NexusChatMode = NexusChatWindowMode;
 /**
  * The chat in an <iframe> served by Incorta, on the user's own Incorta
  * session (the app never holds a token). It draws its window: a launcher
- * icon that opens the chat floating, docked on the right, or fullscreen.
+ * icon that opens the chat floating, docked on the right (left on an RTL page), or fullscreen.
  */
 export interface EmbeddedNexusChatProps {
   /** Incorta's chat page: `<incorta>/copilot/nexus-chat/embed.html`. */

package/window.js

@@ -1,5 +1,5 @@
 // The chat's window, without a framework: a launcher icon that opens a panel
-// floating, docked on the right (the page makes room) or full screen, and the
+// floating, docked at the page's end edge (the page makes room; left in RTL) or full screen, and the
 // embedded chat's side of the iframe protocol. <NexusChat> (react.js) and the
 // one-line script (widget.js) both draw the window with this, so they behave
 // the same.
@@ -7,7 +7,7 @@ import { ICON, PALETTE, reducedMotion, showNexusChatSkeleton } from './index.js'
 
 export const MODES = ['floating', 'docked', 'fullscreen'];
 const PANEL_WIDTH = 400;
-/** The floating window opens out of the launcher, right edges aligned, 12px above it. */
+/** The floating window opens out of the launcher, end edges aligned, 12px above it. */
 const FLOATING = { width: 380, height: 620, edge: 24, launcher: 52, gap: 12 };
 /** Below this width a floating or docked chat would crush the app, so it covers it. */
 const NARROW_VIEWPORT = 768;
@@ -32,45 +32,48 @@ const { edge, launcher: LAUNCHER_SIZE, gap } = FLOATING;
 /** Every placement property any mode sets, cleared before the next mode's. */
 const PLACED = [
   'top',
-  'right',
+  'insetInlineEnd',
   'bottom',
-  'left',
+  'insetInlineStart',
   'inset',
   'width',
   'height',
   'border',
-  'borderLeft',
+  'borderInlineStart',
   'borderRadius',
   'boxShadow',
   'transformOrigin',
 ];
 
 const isNarrow = () => typeof window !== 'undefined' && window.innerWidth < NARROW_VIEWPORT;
+/** Placement follows the page's `dir`: logical properties, plus this for what has none. */
+const isRtl = () =>
+  typeof document !== 'undefined' && getComputedStyle(document.documentElement).direction === 'rtl';
 const tone = (theme) => (theme === 'dark' ? 'dark' : 'light');
 
 function placement(mode, theme) {
   const palette = PALETTE[tone(theme)];
   if (mode === 'docked') {
-    // Flush against the page's right edge, full height: only a hairline between them.
+    // Flush against the page's end edge (right, or left in RTL), full height: only a hairline between them.
     return {
       top: '0',
-      right: '0',
+      insetInlineEnd: '0',
       bottom: '0',
       width: `${PANEL_WIDTH}px`,
-      borderLeft: `1px solid ${palette.line}`,
+      borderInlineStart: `1px solid ${palette.line}`,
     };
   }
   if (mode === 'fullscreen') return { inset: '0' };
   // A card lifted off the page, opening out of the launcher below it.
   return {
-    right: `${edge}px`,
+    insetInlineEnd: `${edge}px`,
     bottom: `${edge + LAUNCHER_SIZE + gap}px`,
     width: `min(${FLOATING.width}px, calc(100vw - ${2 * edge}px))`,
     height: `min(${FLOATING.height}px, calc(100vh - ${2 * edge + LAUNCHER_SIZE + gap}px))`,
     border: `1px solid ${palette.line}`,
     borderRadius: '16px',
     boxShadow: LIFT[tone(theme)],
-    transformOrigin: 'bottom right',
+    transformOrigin: `bottom ${isRtl() ? 'left' : 'right'}`,
   };
 }
 
@@ -129,12 +132,12 @@ export function createChatWindow({ into, panel, modes = MODES, defaultMode, them
   close.title = 'Close';
   close.textContent = '×';
   close.style.cssText =
-    'position:absolute;top:12px;right:14px;z-index:1;width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:inherit;font:20px/1 system-ui,sans-serif;cursor:pointer';
+    'position:absolute;top:12px;inset-inline-end:14px;z-index:1;width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:inherit;font:20px/1 system-ui,sans-serif;cursor:pointer';
   close.onclick = () => show('minimized');
 
   const button = document.createElement('button');
   button.type = 'button';
-  button.style.cssText = `position:fixed;right:${edge}px;bottom:${edge}px;z-index:50;box-sizing:border-box;width:${LAUNCHER_SIZE}px;height:${LAUNCHER_SIZE}px;padding:0;border-radius:50%;place-items:center;cursor:pointer`;
+  button.style.cssText = `position:fixed;inset-inline-end:${edge}px;bottom:${edge}px;z-index:50;box-sizing:border-box;width:${LAUNCHER_SIZE}px;height:${LAUNCHER_SIZE}px;padding:0;border-radius:50%;place-items:center;cursor:pointer`;
   button.onclick = () =>
     show(view === 'floating' && !narrow ? 'minimized' : (last ?? 'fullscreen'));
   into.appendChild(button);
@@ -175,10 +178,10 @@ export function createChatWindow({ into, panel, modes = MODES, defaultMode, them
     // A docked panel takes its width from the page instead of covering it.
     const root = document.documentElement;
     if (now === 'docked' && paddedFrom === undefined) {
-      paddedFrom = root.style.paddingRight;
-      root.style.paddingRight = `${PANEL_WIDTH}px`;
+      paddedFrom = root.style.paddingInlineEnd;
+      root.style.paddingInlineEnd = `${PANEL_WIDTH}px`;
     } else if (now !== 'docked' && paddedFrom !== undefined) {
-      root.style.paddingRight = paddedFrom;
+      root.style.paddingInlineEnd = paddedFrom;
       paddedFrom = undefined;
     }
     shownBefore = now;
@@ -257,7 +260,7 @@ export function createChatWindow({ into, panel, modes = MODES, defaultMode, them
     destroy() {
       destroyed = true;
       window.removeEventListener('resize', onResize);
-      if (paddedFrom !== undefined) document.documentElement.style.paddingRight = paddedFrom;
+      if (paddedFrom !== undefined) document.documentElement.style.paddingInlineEnd = paddedFrom;
       paddedFrom = undefined;
       button.remove();
       close.remove();