@ahmedramez-org/nexus-chat 1.0.0-beta.3 → 1.0.0-beta.4

package/README.md

@@ -24,9 +24,10 @@ import { NexusChat } from '@incorta/nexus-chat/react';
 ```
 
 It draws its own window: an Incorta Intelligence launcher at the bottom right opens the chat
-floating, docked on the right (the page makes room) or fullscreen, switched or minimized back to
-the launcher from the top right. `modes` limits the windows (default all three, in that order);
-`defaultMode` opens one on load. Below 768px wide the chat covers the page. The window takes the
+floating or docked on the right (the page makes room). The chat's own top bar takes it to full
+screen and back (Undock / Dock to the side) 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; dock returns to the window last shown beside the page. Below 768px wide the chat covers the page. The window takes the
 page's background colour, the chat is drawn smaller when floating or docked, and the launcher icon
 shimmers while the chat loads. `theme` is followed live; `locale` is read when the chat first opens.
 
@@ -47,7 +48,7 @@ need that setting.
 />
 ```
 
-The chat fills the component's box; the app draws any frame around it. `theme`, `locale` (default:
+The chat fills the component's box; the app draws any frame around it. Until the chat is mounted, the Incorta Intelligence mark sits in the middle of the box (the embedded window's loading face), and it leaves when the chat mounts or `onLoadError` fires, so the app's own failure takes the box. `theme`, `locale` (default:
 the browser's), `direction`, `tenantId`, `user` and `window` update the running chat;
 `connection`, `chat`, `actions`, `events`, `instanceId`, `assetsUrl` and `timeoutMs` are read once
 at mount. `window` (`docked`, `canDock`, `setDocked`, `close`) hands the chat's window to the app:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahmedramez-org/nexus-chat",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "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.js

@@ -43,6 +43,9 @@ function DirectChat({
   const windowState = useRef(null);
   windowState.current ??= emitter();
   const hasWindow = Boolean(hostWindow);
+  // Until the chat is mounted its brand mark holds the middle of the box, the
+  // same loading face as the embedded window, so every app shows one.
+  const [loading, setLoading] = useState(true);
 
   useEffect(
     () => environment.current.notify(),
@@ -108,7 +111,10 @@ function DirectChat({
           : {}),
     });
     const fail = (error) => {
-      if (!cancelled) current().onLoadError?.(error);
+      if (cancelled) return;
+      // The app draws its own failure (and Retry) where the chat would be.
+      setLoading(false);
+      current().onLoadError?.(error);
     };
     // In a promise, so a missing source reaches onLoadError like any load failure.
     Promise.resolve()
@@ -121,6 +127,7 @@ function DirectChat({
           forgetNexusChat(source);
           return fail(error);
         }
+        setLoading(false);
         current().onReady?.(handle);
       }, fail);
     return () => {
@@ -138,11 +145,28 @@ function DirectChat({
     };
   }, [hasWindow]);
 
-  return h('div', {
-    ref: element,
-    className,
-    style: { width: '100%', height: '100%', ...style },
-  });
+  // The app's className and style stay on the chat's own root (the mount element).
+  return h(
+    'div',
+    { style: { position: 'relative', width: '100%', height: '100%' } },
+    h('div', { ref: element, className, style: { width: '100%', height: '100%', ...style } }),
+    loading &&
+      h(
+        'div',
+        {
+          role: 'status',
+          'aria-label': 'Loading the AI Assistant',
+          style: {
+            position: 'absolute',
+            inset: 0,
+            display: 'grid',
+            placeItems: 'center',
+            pointerEvents: 'none',
+          },
+        },
+        h('img', { src: ICON, alt: '', width: 48, height: 54 }),
+      ),
+  );
 }
 
 // ---- embedded: the chat in an Incorta-served iframe, in a window drawn here
@@ -162,19 +186,6 @@ const ICON = `data:image/svg+xml,${encodeURIComponent(
   "<svg width='107' height='120' viewBox='0 0 107 120' fill='none' xmlns='http://www.w3.org/2000/svg'><g clip-path='url(#clip0_108_873)'><path d='M84.0333 35.3749C89.81 37.6474 95.214 41.1522 99.8334 45.8891C102.44 48.5657 104.644 51.4847 106.465 54.5652L106.677 35.385C106.717 31.9611 104.936 28.7896 101.997 27.0423L63.1104 3.93311C66.1798 5.83193 69.078 8.13474 71.7147 10.8517C78.508 17.8208 82.604 26.4261 84.0333 35.3749Z' fill='url(#paint0_linear_108_873)'/><path d='M22.8859 84.8047C17.1092 82.532 11.7049 79.0273 7.0856 74.2907C4.35831 71.4927 2.07382 68.432 0.212009 65.2002L0.000668115 84.6433C-0.0395873 88.0667 1.74171 91.2387 4.68035 92.986L43.9092 116.297C40.7995 114.378 37.8709 112.055 35.204 109.328C28.4109 102.359 24.3149 93.7533 22.8859 84.8047Z' fill='url(#paint1_linear_108_873)'/><path d='M106.114 85.8249L106.456 54.5647C104.645 51.4841 102.431 48.5651 99.824 45.8886C95.2047 41.1517 89.8006 37.6469 84.024 35.3743C86.258 49.4237 81.9006 64.3012 71.0013 75.0076C57.878 87.8849 38.9278 91.1269 22.876 84.8149C24.305 93.7636 28.401 102.369 35.1941 109.338C37.861 112.075 40.7896 114.398 43.8993 116.307L45.1674 117.054L47.9148 118.69C48.891 119.266 49.9376 119.65 51.0144 119.862C53.1882 120.266 55.4626 119.923 57.4553 118.802L101.253 94.0663C104.222 92.3896 106.074 89.2489 106.114 85.8349V85.8249Z' fill='url(#paint2_linear_108_873)'/><path d='M35.908 45.1805C49.0312 32.3027 67.9813 29.0606 84.0333 35.3732C82.604 26.4245 78.508 17.8191 71.7153 10.85C69.0786 8.14313 66.18 5.84031 63.1106 3.93137L61.6714 3.07286L58.7529 1.33563C57.7063 0.709427 56.5691 0.315517 55.4118 0.123615C53.3184 -0.219791 51.1346 0.153915 49.2225 1.22453L5.41455 25.9699C2.44572 27.6465 0.593974 30.7877 0.553719 34.2015L0.211548 65.1889C2.07336 68.4313 4.35785 71.4813 7.08516 74.2787C11.7044 79.016 17.1088 82.5207 22.8854 84.7933C20.6512 70.744 25.0088 55.8664 35.908 45.1603V45.1805Z' fill='#00A098'/><path d='M22.8857 84.8051C22.9663 85.3104 23.0568 85.8251 23.1575 86.3304C23.1877 86.4917 23.2279 86.6637 23.2581 86.8251C23.3285 87.1684 23.399 87.5117 23.4795 87.8551C23.5197 88.0471 23.5701 88.2391 23.6103 88.4311C23.6909 88.7544 23.7713 89.0777 23.8619 89.4004C23.9123 89.5924 23.9626 89.7744 24.0129 89.9664C24.1236 90.3604 24.2443 90.7544 24.3651 91.1377C24.4457 91.3904 24.5261 91.6431 24.6067 91.8851C24.7073 92.1984 24.818 92.5117 24.9287 92.8244C25.0193 93.0671 25.1099 93.3197 25.2004 93.5617C25.291 93.7944 25.3715 94.0164 25.4621 94.2491C25.5627 94.5111 25.6734 94.7837 25.7841 95.0464C25.8647 95.2384 25.9451 95.4304 26.0357 95.6224C26.1565 95.9151 26.2873 96.1977 26.4181 96.4811C26.4584 96.5717 26.4987 96.6524 26.5389 96.7331C26.8609 97.4304 27.2031 98.1171 27.5654 98.8037C27.6057 98.8744 27.6359 98.9451 27.6761 99.0157C27.8573 99.3491 28.0384 99.6824 28.2297 100.006C28.29 100.117 28.3504 100.218 28.4108 100.329C28.602 100.662 28.7932 100.996 28.9945 101.319C29.0448 101.4 29.0951 101.47 29.1354 101.551C29.8399 102.682 30.5947 103.804 31.4098 104.884C31.8225 104.874 92.7287 102.874 96.2107 42.546C96.5533 36.6576 96.352 30.2238 95.486 23.1739L63.1109 3.93311C66.1804 5.83193 69.0787 8.13474 71.7153 10.8517C78.5087 17.8208 82.6047 26.4261 84.0333 35.3749C86.268 49.4242 81.91 64.3017 71.0113 75.0077C57.8878 87.8857 38.9376 91.1277 22.8857 84.8151V84.8051Z' fill='url(#paint3_linear_108_873)'/><path d='M84.0334 35.3745C83.9527 34.8695 83.862 34.3544 83.7614 33.8494C83.7314 33.6878 83.6914 33.5161 83.6607 33.3545C83.5907 33.0111 83.52 32.6677 83.4394 32.3243C83.3994 32.1324 83.3487 31.9405 83.3087 31.7486C83.228 31.4254 83.1474 31.1021 83.0574 30.7789C83.0067 30.5871 82.9567 30.4053 82.906 30.2133C82.7954 29.8195 82.6747 29.4255 82.554 29.0417C82.4734 28.7892 82.3927 28.5367 82.3127 28.2943C82.212 27.9812 82.1014 27.6681 81.99 27.355C81.9 27.1126 81.8094 26.8601 81.7187 26.6177C81.628 26.3854 81.5474 26.1632 81.4567 25.9309C81.356 25.6683 81.2454 25.3956 81.1347 25.133C81.0547 24.9411 80.974 24.7491 80.8834 24.5573C80.7627 24.2643 80.632 23.9815 80.5007 23.6987C80.4607 23.6079 80.4207 23.5271 80.38 23.4463C80.058 22.7493 79.716 22.0625 79.3534 21.3757C79.3134 21.305 79.2834 21.2343 79.2427 21.1636C79.062 20.8303 78.8807 20.497 78.6894 20.1738C78.6294 20.0627 78.5687 19.9617 78.508 19.8506C78.3174 19.5173 78.126 19.184 77.9247 18.8607C77.874 18.7799 77.824 18.7093 77.7834 18.6285C77.0794 17.4973 76.3247 16.3761 75.5094 15.2954C75.0967 15.3055 14.1902 17.3053 10.7082 77.6333C10.366 83.522 10.5673 89.956 11.4328 97.006L43.8082 116.247C40.7386 114.348 37.8403 112.045 35.2036 109.328C28.4104 102.359 24.3145 93.7533 22.8854 84.8047C20.6512 70.7553 25.0089 55.8779 35.908 45.1717C49.0313 32.294 67.9814 29.0518 84.0334 35.3644V35.3745Z' fill='url(#paint4_linear_108_873)'/></g><defs><linearGradient id='paint0_linear_108_873' x1='104.644' y1='41.0916' x2='52.1952' y2='1.61001' gradientUnits='userSpaceOnUse'><stop stop-color='#4854FE'/><stop offset='1' stop-color='#241C55'/></linearGradient><linearGradient id='paint1_linear_108_873' x1='0.000668115' y1='90.7533' x2='43.9092' y2='90.7533' gradientUnits='userSpaceOnUse'><stop stop-color='#4854FE'/><stop offset='1' stop-color='#241C55'/></linearGradient><linearGradient id='paint2_linear_108_873' x1='31.5078' y1='40.5846' x2='92.6593' y2='102.893' gradientUnits='userSpaceOnUse'><stop stop-color='white'/><stop offset='1' stop-color='#4854FE'/></linearGradient><linearGradient id='paint3_linear_108_873' x1='86.272' y1='19.1173' x2='41.5609' y2='98.7424' gradientUnits='userSpaceOnUse'><stop stop-color='#4854FE' stop-opacity='0.93'/><stop offset='1' stop-color='#006EF0' stop-opacity='0'/></linearGradient><linearGradient id='paint4_linear_108_873' x1='19.9156' y1='103.321' x2='61.0359' y2='27.5007' gradientUnits='userSpaceOnUse'><stop stop-color='#006EF0'/><stop offset='1' stop-color='#006EF0' stop-opacity='0'/></linearGradient><clipPath id='clip0_108_873'><rect width='106.667' height='120' fill='white'/></clipPath></defs></svg>",
 )}`;
 
-const TOOL_ICONS = {
-  floating: 'M4 4h16v16H4zM12 12h6v6h-6z',
-  docked: 'M4 4h16v16H4zM14 4v16',
-  fullscreen: 'M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5',
-  minimize: 'M5 12h14',
-};
-const TOOL_LABELS = {
-  floating: 'Float',
-  docked: 'Dock',
-  fullscreen: 'Full screen',
-  minimize: 'Minimize',
-};
-
 function isNarrow() {
   return typeof window !== 'undefined' && window.innerWidth < NARROW_VIEWPORT;
 }
@@ -188,57 +199,26 @@ function pageBackground() {
   return 'Canvas';
 }
 
-function ToolButton({ tool, onClick }) {
-  return h(
-    'button',
-    {
-      type: 'button',
-      title: TOOL_LABELS[tool],
-      'aria-label': TOOL_LABELS[tool],
-      onClick,
-      style: {
-        display: 'grid',
-        placeItems: 'center',
-        width: 28,
-        height: 28,
-        padding: 0,
-        border: 0,
-        borderRadius: 6,
-        background: 'transparent',
-        color: 'inherit',
-        cursor: 'pointer',
-      },
-    },
-    h(
-      'svg',
-      {
-        width: 16,
-        height: 16,
-        viewBox: '0 0 24 24',
-        fill: 'none',
-        stroke: 'currentColor',
-        strokeWidth: 2,
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-        'aria-hidden': true,
-      },
-      h('path', { d: TOOL_ICONS[tool] }),
-    ),
-  );
-}
-
 function EmbeddedChat({ embedUrl, modes = MODES, defaultMode, theme = 'light', locale }) {
   const allowed = modes.filter((mode) => MODES.includes(mode));
+  const canFullscreen = allowed.includes('fullscreen');
   const [view, setView] = useState(allowed.includes(defaultMode) ? defaultMode : 'minimized');
   // Created on first open and kept while minimized, so the conversation stays.
   const [opened, setOpened] = useState(view !== 'minimized');
   const [ready, setReady] = useState(false);
+  // The chat itself is up, and draws the window's controls; until then (loading,
+  // signed out, failed) the window keeps a close of its own.
+  const [mounted, setMounted] = useState(false);
   const [narrow, setNarrow] = useState(isNarrow);
   const [background, setBackground] = useState('Canvas');
   const frame = useRef(null);
   const icon = useRef(null);
   const fallback = useRef(undefined);
   const shown = view === 'minimized' ? undefined : narrow ? 'fullscreen' : view;
+  // Where "dock" goes back to from full screen: the window last shown beside the page.
+  const [side, setSide] = useState(
+    view === 'floating' || view === 'docked' ? view : allowed.find((mode) => mode !== 'fullscreen'),
+  );
   // Set once: a new src would reload the chat. Later theme changes go by message.
   // The app's URL is kept as given (relative ones resolve like any iframe src).
   const [src] = useState(() => {
@@ -250,6 +230,7 @@ function EmbeddedChat({ embedUrl, modes = MODES, defaultMode, theme = 'light', l
 
   const show = (next) => {
     setView(next);
+    if (next === 'floating' || next === 'docked') setSide(next);
     if (next !== 'minimized') setOpened(true);
   };
 
@@ -281,6 +262,7 @@ function EmbeddedChat({ embedUrl, modes = MODES, defaultMode, theme = 'light', l
     const onMessage = (event) => {
       if (event.source === frame.current?.contentWindow && event.data?.nexusChat === 'ready') {
         setReady(true);
+        if (event.data.mounted === true) setMounted(true);
       }
     };
     window.addEventListener('message', onMessage);
@@ -290,13 +272,39 @@ function EmbeddedChat({ embedUrl, modes = MODES, defaultMode, theme = 'light', l
     };
   }, []);
 
-  // Theme and type size follow the app without reloading the iframe.
+  // The chat's own window controls, relayed by the page inside: dock (back
+  // beside the page, or full screen) and close (minimize).
+  useEffect(() => {
+    // From the chat page itself, not a sign-in page the frame navigated to.
+    const origin = new URL(embedUrl, location.href).origin;
+    const onMessage = (event) => {
+      if (event.source !== frame.current?.contentWindow || event.origin !== origin) return;
+      if (event.data?.nexusChat === 'dock' && (event.data.docked || canFullscreen))
+        show(event.data.docked ? side : 'fullscreen');
+      if (event.data?.nexusChat === 'close') show('minimized');
+    };
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, [side, canFullscreen, embedUrl]);
+
+  // Theme, type size and the window's state follow the app without reloading
+  // the iframe. The chat draws its own dock and close controls from the state:
+  // "docked" means beside the page (floating or docked), the opposite of full screen.
   const sendStyle = () =>
     frame.current?.contentWindow?.postMessage(
-      { nexusChat: 'style', theme, remBase: REM_BASE[shown ?? 'floating'] },
+      {
+        nexusChat: 'style',
+        theme,
+        remBase: REM_BASE[shown ?? 'floating'],
+        // Undock goes to full screen, so it is offered only where the app allows full screen.
+        window: {
+          docked: shown !== 'fullscreen',
+          canDock: !narrow && side !== undefined && canFullscreen,
+        },
+      },
       new URL(embedUrl, location.href).origin,
     );
-  useEffect(sendStyle, [theme, shown]);
+  useEffect(sendStyle, [theme, shown, narrow, side, canFullscreen]);
 
   useEffect(() => {
     if (ready || !opened || !icon.current?.animate) return;
@@ -323,8 +331,6 @@ function EmbeddedChat({ embedUrl, modes = MODES, defaultMode, theme = 'light', l
     docked: { top: 0, right: 0, bottom: 0, width: PANEL_WIDTH },
     fullscreen: { inset: 0 },
   };
-  // Narrow screens cover the app anyway, so only minimizing is offered there.
-  const tools = [...(narrow ? [] : allowed.filter((mode) => mode !== shown)), 'minimize'];
 
   return h(
     'div',
@@ -341,24 +347,11 @@ function EmbeddedChat({ embedUrl, modes = MODES, defaultMode, theme = 'light', l
             boxSizing: 'border-box',
             display: shown ? 'flex' : 'none',
             flexDirection: 'column',
-            gap: 4,
             padding: GUTTER,
-            paddingTop: 4,
             background,
             ...placement[shown ?? 'floating'],
           },
         },
-        h(
-          'div',
-          { style: { display: 'flex', justifyContent: 'flex-end', gap: 2 } },
-          tools.map((tool) =>
-            h(ToolButton, {
-              key: tool,
-              tool,
-              onClick: () => show(tool === 'minimize' ? 'minimized' : tool),
-            }),
-          ),
-        ),
         h(
           'div',
           {
@@ -382,6 +375,31 @@ function EmbeddedChat({ embedUrl, modes = MODES, defaultMode, theme = 'light', l
             },
             style: { display: 'block', width: '100%', height: '100%', border: 0 },
           }),
+          !mounted &&
+            h(
+              'button',
+              {
+                type: 'button',
+                'aria-label': 'Close AI Assistant',
+                title: 'Close',
+                onClick: () => show('minimized'),
+                style: {
+                  position: 'absolute',
+                  top: 8,
+                  right: 8,
+                  zIndex: 1,
+                  width: 32,
+                  height: 32,
+                  border: 0,
+                  borderRadius: '50%',
+                  background: 'transparent',
+                  color: 'inherit',
+                  font: '20px/1 system-ui, sans-serif',
+                  cursor: 'pointer',
+                },
+              },
+              '×',
+            ),
           !ready &&
             h(
               'div',