@flamingo-stack/openframe-frontend-core 0.0.691 → 0.0.692

package/src/components/features/remote-session/remote-session-dialog.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { Button } from '../../ui/button/button';
+import type { RemoteSessionDialogVariant } from './types';
+
+export interface RemoteSessionDialogProps {
+  variant: RemoteSessionDialogVariant;
+  /** Named in the "ended" and "connection lost" notices. */
+  organizationName: string;
+  /** End confirm: the end call is in flight. */
+  ending?: boolean;
+  /** End confirm: the user confirmed. */
+  onEndSession?: () => void;
+  /** Cancel (end confirm) or Close (the notices). */
+  onClose: () => void;
+}
+
+const NOTICE_COPY: Record<Exclude<RemoteSessionDialogVariant, 'end-confirm'>, { title: string; suffix: string }> = {
+  'session-ended': { title: 'Remote session ended', suffix: 'has disconnected from your device.' },
+  'connection-lost': { title: 'Connection lost', suffix: 'lost the connection to your device.' },
+};
+
+/** The session's terminal dialogs: the end confirm and the "it is over" notices. */
+export function RemoteSessionDialog({
+  variant,
+  organizationName,
+  ending = false,
+  onEndSession,
+  onClose,
+}: RemoteSessionDialogProps) {
+  if (variant === 'end-confirm') {
+    return (
+      <DialogCard>
+        <div className="flex w-full flex-col gap-[var(--spacing-system-xs)]">
+          <h1 className="w-full text-ods-text-primary text-h2">End remote session?</h1>
+          <p className="w-full text-ods-text-primary text-h4">
+            The technician will lose access to your device immediately.
+          </p>
+        </div>
+        <div className="flex w-full items-stretch gap-[var(--spacing-system-l)]">
+          <Button variant="outline" fullWidth disabled={ending} onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="destructive" fullWidth loading={ending} onClick={onEndSession}>
+            End Session
+          </Button>
+        </div>
+      </DialogCard>
+    );
+  }
+
+  const copy = NOTICE_COPY[variant];
+  return (
+    <DialogCard>
+      <div className="flex w-full flex-col gap-[var(--spacing-system-xs)]">
+        <h1 className="w-full text-ods-text-primary text-h2">{copy.title}</h1>
+        <p className="w-full text-ods-text-primary text-h4">
+          <span className="text-ods-accent">{organizationName}</span> {copy.suffix}
+        </p>
+      </div>
+      <div className="flex w-full justify-end">
+        <Button variant="outline" className="w-1/2" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+    </DialogCard>
+  );
+}
+
+function DialogCard({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex w-full flex-col gap-[var(--spacing-system-l)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xl)]">
+      {children}
+    </div>
+  );
+}

package/src/components/features/remote-session/remote-session-overlay.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { cn } from '../../../utils/cn';
+import { MonitorOffIcon } from '../../icons-v2-generated';
+
+/*
+ * The always-visible "your screen is being controlled" indicator: a border
+ * around the screen and an End Session pill hanging from its top edge.
+ * The colour is the ODS warning token, not the accent: the accent follows
+ * tenant branding, and this indicator must stay a recognisable fixed yellow.
+ */
+
+/** The warning-yellow frame drawn around a whole screen; it never takes pointer events. */
+export function RemoteSessionBorder({ className }: { className?: string }) {
+  return <div className={cn('pointer-events-none size-full border-4 border-ods-warning', className)} />;
+}
+
+/**
+ * The End Session pill. It sits flush against the top edge of the screen, so
+ * only its bottom corners are rounded and it reads as one piece with the border.
+ */
+export function RemoteSessionPill({ onEndSession }: { onEndSession: () => void }) {
+  return (
+    <button
+      type="button"
+      className="flex items-center gap-[var(--spacing-system-xsf)] rounded-b-md bg-ods-warning px-[var(--spacing-system-m)] py-[var(--spacing-system-xs)] text-ods-text-on-accent"
+      onClick={onEndSession}
+    >
+      <MonitorOffIcon size={24} color="currentColor" />
+      <span className="whitespace-nowrap text-h3">End Session</span>
+    </button>
+  );
+}

package/src/components/features/remote-session/remote-session-parts.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import { type CSSProperties, type ReactNode, useEffect, useState } from 'react';
+import { cn } from '../../../utils/cn';
+import { DraggerIcon, RecordingIcon } from '../../icons-v2-generated';
+import { OpenFrameLogo } from '../../icons/openframe-logo';
+import { SquareAvatar } from '../../ui/square-avatar';
+import type { RemoteSessionDragHandlers } from './types';
+
+/**
+ * The remote session surfaces are fixed-size desktop windows (440 / 600 px
+ * wide), so the responsive ODS scale would step their typography and spacing
+ * down to the mobile values below the 800 px breakpoint. The scope pins the
+ * scale to its desktop values; everything inside keeps the regular utilities.
+ */
+const DESKTOP_SCALE = {
+  '--spacing-system-xs': '0.5rem',
+  '--spacing-system-s': '0.75rem',
+  '--spacing-system-m': '1rem',
+  '--spacing-system-l': '1.5rem',
+  '--spacing-system-xl': '2.5rem',
+  '--font-size-h1-title': '3.5rem',
+  '--font-size-h2-sub-title': '2rem',
+  '--font-size-h3-body': '1.125rem',
+  '--font-size-h4-body': '1.125rem',
+  '--font-size-h5-caption': '0.875rem',
+  '--font-size-h6-caption': '0.875rem',
+  '--font-line-space-h1-main-title': '4rem',
+  '--font-line-space-h2-sub-title': '2.5rem',
+  '--font-line-space-h3-body': '1.5rem',
+  '--font-line-space-h4-body': '1.5rem',
+  '--font-line-space-h5-caption': '1.25rem',
+  '--font-line-space-h6-caption': '1.25rem',
+} as CSSProperties;
+
+export interface RemoteSessionScopeProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Root of every remote session surface: the desktop type and spacing scale,
+ * and the OpenFrame brand whatever the host app's tenant branding is - the
+ * "you are being helped" surfaces are OpenFrame-branded by design.
+ */
+export function RemoteSessionScope({ children, className }: RemoteSessionScopeProps) {
+  return (
+    <div data-app-type="openframe" style={DESKTOP_SCALE} className={className}>
+      {children}
+    </div>
+  );
+}
+
+export interface RemoteSessionOrgLogoProps {
+  name: string;
+  logoUrl?: string | null;
+  /** Width and height in px. */
+  sizePx: number;
+  className?: string;
+}
+
+/** Organization logo tile; the OpenFrame mark when there is no logo. */
+export function RemoteSessionOrgLogo({ name, logoUrl, sizePx, className }: RemoteSessionOrgLogoProps) {
+  if (logoUrl) {
+    return (
+      <SquareAvatar
+        variant="square"
+        fit="contain"
+        sizePx={sizePx}
+        src={logoUrl}
+        alt={name}
+        fallback={name}
+        className={cn('shrink-0 rounded-md border border-ods-border bg-ods-card', className)}
+      />
+    );
+  }
+  return (
+    <div
+      role="img"
+      aria-label={name}
+      style={{ width: sizePx, height: sizePx }}
+      className={cn(
+        'flex shrink-0 items-center justify-center rounded-md border border-ods-border bg-ods-card',
+        className,
+      )}
+    >
+      <OpenFrameLogo className="size-1/2" />
+    </div>
+  );
+}
+
+/** The green SESSION RECORDING tag. */
+export function RemoteSessionRecordingTag() {
+  return (
+    <div className="flex h-8 items-center gap-[var(--spacing-system-xs)] self-start rounded-md bg-ods-success-secondary p-[var(--spacing-system-xsf)]">
+      <RecordingIcon size={16} color="currentColor" className="text-ods-success" />
+      <span className="text-ods-success text-h5">Session Recording</span>
+    </div>
+  );
+}
+
+/** Grab cursor on the surfaces the window is moved by. */
+export const REMOTE_SESSION_DRAG_HANDLE_CLASS = 'cursor-grab active:cursor-grabbing';
+
+/** The dragger glyph in the top-right corner of a block header: the visible handle for moving it. */
+export function RemoteSessionDragger({ dragHandlers }: { dragHandlers?: RemoteSessionDragHandlers }) {
+  return (
+    <span
+      aria-hidden
+      className={cn(
+        'absolute right-[var(--spacing-system-xsf)] top-[var(--spacing-system-xsf)] text-ods-text-secondary',
+        dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS,
+      )}
+      {...dragHandlers}
+    >
+      <DraggerIcon size={24} color="currentColor" />
+    </span>
+  );
+}
+
+/** `m:ss` for an elapsed duration; `h:mm:ss` from the first hour on. */
+export function formatRemoteSessionElapsed(elapsedMs: number): string {
+  const total = Math.max(0, Math.floor(elapsedMs / 1000));
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor((total % 3600) / 60);
+  const seconds = String(total % 60).padStart(2, '0');
+  return hours > 0 ? `${hours}:${String(minutes).padStart(2, '0')}:${seconds}` : `${minutes}:${seconds}`;
+}
+
+/** The session's elapsed time since `startedAt` (ISO), ticking once a second. */
+export function useRemoteSessionTimer(startedAt: string): string {
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  useEffect(() => {
+    const timer = setInterval(() => setNowMs(Date.now()), 1_000);
+    return () => clearInterval(timer);
+  }, []);
+  return formatRemoteSessionElapsed(nowMs - Date.parse(startedAt));
+}

package/src/components/features/remote-session/types.ts

@@ -0,0 +1,41 @@
+import type { HTMLAttributes } from 'react';
+
+/**
+ * Who is on the other end of a remote session, as the end user's surfaces show
+ * it: the organization always, the technician when the backend names one.
+ */
+export interface RemoteSessionParty {
+  organizationName: string;
+  organizationLogoUrl?: string | null;
+  /** Shown under the organization name; offered as a link only when it is https. */
+  organizationSiteUrl?: string | null;
+  /** Present for the technician variant of the session block; the organization variant otherwise. */
+  technicianName?: string | null;
+  technicianAvatarUrl?: string | null;
+}
+
+/** The end user's answer to a remote access request. */
+export type RemoteAccessDecision = 'APPROVED' | 'DENIED';
+
+export type RemoteSessionChatAuthor = 'technician' | 'user' | 'system';
+
+export interface RemoteSessionChatMessage {
+  id: string;
+  author: RemoteSessionChatAuthor;
+  /** The technician's display name on their rows; the party's technician otherwise. */
+  name?: string | null;
+  text: string;
+  at: Date;
+}
+
+/** The terminal dialogs of a session: the end confirm and the two "it is over" notices. */
+export type RemoteSessionDialogVariant = 'end-confirm' | 'session-ended' | 'connection-lost';
+
+/**
+ * Pointer handlers a host attaches to the surfaces the user moves the window
+ * by (the desktop chat starts a native window drag from them).
+ */
+export type RemoteSessionDragHandlers = Pick<
+  HTMLAttributes<HTMLElement>,
+  'onPointerDown' | 'onPointerMove' | 'onPointerUp'
+>;

package/src/stories/RemoteSessionAccessRequest.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import type React from 'react';
+import { fn } from 'storybook/test';
+
+import {
+  RemoteAccessRequestCard,
+  RemoteSessionScope,
+  type RemoteSessionParty,
+} from '../components/features/remote-session';
+
+/**
+ * The end user's consent dialog for a remote access request, shown by the
+ * desktop chat in a 600 px always-on-top window. The host owns the request,
+ * the delivery ack and the decision call; the card only renders and reports
+ * the click.
+ */
+
+const party: RemoteSessionParty = {
+  organizationName: 'TechFlow Solutions',
+  organizationSiteUrl: 'https://www.techflow.com',
+  technicianName: 'Mike Rodriguez',
+};
+
+function WindowDecorator(Story: React.ComponentType) {
+  return (
+    <RemoteSessionScope className="w-[600px]">
+      <Story />
+    </RemoteSessionScope>
+  );
+}
+
+const meta = {
+  title: 'Remote Session/Client/Access Request',
+  component: RemoteAccessRequestCard,
+  tags: ['autodocs'],
+  decorators: [WindowDecorator],
+  args: { party, onDecide: fn(), onOpenSite: fn() },
+} satisfies Meta<typeof RemoteAccessRequestCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A recorded session: the recording notice above the consent line. */
+export const Recorded: Story = {
+  args: { showRecordingNotice: true },
+};
+
+/** Not recorded: no notice. */
+export const NotRecorded: Story = {
+  args: { showRecordingNotice: false },
+};
+
+/** No site and no logo: the OpenFrame mark, no website button. */
+export const WithoutSite: Story = {
+  args: { party: { organizationName: 'TechFlow Solutions' } },
+};
+
+/** A non-https site is shown but never offered as a link. */
+export const PlainHttpSite: Story = {
+  args: { party: { ...party, organizationSiteUrl: 'http://techflow.local' } },
+};
+
+/** Allow Access sent: both buttons lock, the chosen one spins. */
+export const Allowing: Story = {
+  args: { showRecordingNotice: true, deciding: 'APPROVED' },
+};
+
+/** The decision could not be sent: the error replaces the closing line. */
+export const DecisionFailed: Story = {
+  args: { showRecordingNotice: true, error: 'Could not reach the server. Try again.' },
+};

package/src/stories/RemoteSessionBlock.stories.tsx

@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import type React from 'react';
+import { useState } from 'react';
+import { fn } from 'storybook/test';
+
+import {
+  RemoteSessionBlockFrame,
+  RemoteSessionChatPanel,
+  RemoteSessionMinimizedChip,
+  RemoteSessionScope,
+  RemoteSessionSummary,
+  type RemoteSessionChatMessage,
+  type RemoteSessionParty,
+} from '../components/features/remote-session';
+
+/**
+ * The session block the end user sees while a technician is connected: the
+ * summary, the chat with the technician, and the minimized chip. In the
+ * desktop chat it lives in its own 440 px window the user can drag around.
+ */
+
+const organization: RemoteSessionParty = { organizationName: 'TechFlow Solutions' };
+const technician: RemoteSessionParty = { ...organization, technicianName: 'Mike Rodriguez' };
+
+const minutesAgo = (minutes: number) => new Date(Date.now() - minutes * 60_000);
+
+const messages: RemoteSessionChatMessage[] = [
+  { id: 'm1', author: 'system', text: 'Mike Rodriguez joined the session', at: minutesAgo(6) },
+  { id: 'm2', author: 'technician', text: 'Hi! I can see your screen now.', at: minutesAgo(5) },
+  { id: 'm3', author: 'user', text: 'Great, the printer is the one on the left.', at: minutesAgo(4) },
+  { id: 'm4', author: 'technician', text: 'Got it - reinstalling the driver now.', at: minutesAgo(2) },
+];
+
+function WindowDecorator(Story: React.ComponentType) {
+  return (
+    <RemoteSessionScope>
+      <Story />
+    </RemoteSessionScope>
+  );
+}
+
+const meta = {
+  title: 'Remote Session/Client/Session Block',
+  component: RemoteSessionSummary,
+  tags: ['autodocs'],
+  decorators: [WindowDecorator],
+  args: {
+    party: technician,
+    elapsed: '5:23',
+    showRecordingTag: true,
+    onOpenChat: fn(),
+    onEndSession: fn(),
+  },
+  render: args => (
+    <RemoteSessionBlockFrame onHide={fn()}>
+      <RemoteSessionSummary {...args} dragHandlers={{ onPointerDown: fn() }} />
+    </RemoteSessionBlockFrame>
+  ),
+} satisfies Meta<typeof RemoteSessionSummary>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A named technician: avatar and "<name> connected". */
+export const Technician: Story = {};
+
+/** No technician name on the session: the organization's logo and "IT support team is connected". */
+export const Organization: Story = {
+  args: { party: organization },
+};
+
+/** Not recorded: no SESSION RECORDING tag. */
+export const NotRecorded: Story = {
+  args: { showRecordingTag: false },
+};
+
+/** A long name truncates before the dragger in the corner. */
+export const LongName: Story = {
+  args: { party: { ...technician, technicianName: 'Maximilian Alexander Rodriguez-Fernandez' } },
+};
+
+/** The chat with the technician, opened from the block. */
+export const Chat: Story = {
+  render: args => {
+    const [draft, setDraft] = useState('');
+    return (
+      <RemoteSessionBlockFrame expanded onHide={fn()}>
+        <RemoteSessionChatPanel
+          party={args.party}
+          elapsed={args.elapsed}
+          showRecordingTag={args.showRecordingTag}
+          messages={messages}
+          draft={draft}
+          onDraftChange={setDraft}
+          onSend={fn()}
+          onCloseChat={fn()}
+          onEndSession={args.onEndSession}
+          dragHandlers={{ onPointerDown: fn() }}
+        />
+      </RemoteSessionBlockFrame>
+    );
+  },
+};
+
+/** The chat while it is still connecting: the composer is disabled. */
+export const ChatConnecting: Story = {
+  render: args => (
+    <RemoteSessionBlockFrame expanded onHide={fn()}>
+      <RemoteSessionChatPanel
+        party={args.party}
+        elapsed={args.elapsed}
+        messages={[]}
+        ready={false}
+        draft=""
+        onDraftChange={fn()}
+        onSend={fn()}
+        onCloseChat={fn()}
+        onEndSession={args.onEndSession}
+      />
+    </RemoteSessionBlockFrame>
+  ),
+};
+
+/** "Hide this Block": the technician's avatar and a chevron to bring the block back. */
+export const MinimizedTechnician: Story = {
+  render: args => <RemoteSessionMinimizedChip party={args.party} onExpand={fn()} />,
+};
+
+/** The minimized chip of the organization variant. */
+export const MinimizedOrganization: Story = {
+  render: () => <RemoteSessionMinimizedChip party={organization} onExpand={fn()} />,
+};
+
+/** The whole block, switching between summary, chat and the chip like the desktop window does. */
+export const Interactive: Story = {
+  render: args => {
+    const [panel, setPanel] = useState<'summary' | 'chat'>('summary');
+    const [minimized, setMinimized] = useState(false);
+    const [draft, setDraft] = useState('');
+    const [thread, setThread] = useState(messages);
+    if (minimized) return <RemoteSessionMinimizedChip party={args.party} onExpand={() => setMinimized(false)} />;
+    return (
+      <RemoteSessionBlockFrame expanded={panel === 'chat'} onHide={() => setMinimized(true)}>
+        {panel === 'summary' ? (
+          <RemoteSessionSummary {...args} onOpenChat={() => setPanel('chat')} />
+        ) : (
+          <RemoteSessionChatPanel
+            party={args.party}
+            elapsed={args.elapsed}
+            showRecordingTag={args.showRecordingTag}
+            messages={thread}
+            draft={draft}
+            onDraftChange={setDraft}
+            onSend={text =>
+              setThread(current => [...current, { id: `m${current.length + 1}`, author: 'user', text, at: new Date() }])
+            }
+            onCloseChat={() => setPanel('summary')}
+            onEndSession={args.onEndSession}
+          />
+        )}
+      </RemoteSessionBlockFrame>
+    );
+  },
+};

package/src/stories/RemoteSessionDialog.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import type React from 'react';
+import { fn } from 'storybook/test';
+
+import { RemoteSessionDialog, RemoteSessionScope } from '../components/features/remote-session';
+
+/** The session's terminal dialogs, each shown by the desktop chat in its own 600 px window. */
+
+function WindowDecorator(Story: React.ComponentType) {
+  return (
+    <RemoteSessionScope className="w-[600px]">
+      <Story />
+    </RemoteSessionScope>
+  );
+}
+
+const meta = {
+  title: 'Remote Session/Client/Dialogs',
+  component: RemoteSessionDialog,
+  tags: ['autodocs'],
+  decorators: [WindowDecorator],
+  args: {
+    variant: 'end-confirm',
+    organizationName: 'TechFlow Solutions',
+    onEndSession: fn(),
+    onClose: fn(),
+  },
+} satisfies Meta<typeof RemoteSessionDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** End Session from the block or the pill asks first. */
+export const EndConfirm: Story = {};
+
+/** The end call is in flight. */
+export const Ending: Story = {
+  args: { ending: true },
+};
+
+/** The technician (or the user) ended the session. */
+export const SessionEnded: Story = {
+  args: { variant: 'session-ended' },
+};
+
+/** The relay dropped: the session is over, there is no rejoin. */
+export const ConnectionLost: Story = {
+  args: { variant: 'connection-lost' },
+};

package/src/stories/RemoteSessionIndicator.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { fn } from 'storybook/test';
+
+import { RemoteSessionBorder, RemoteSessionPill, RemoteSessionScope } from '../components/features/remote-session';
+
+/**
+ * The always-visible "your screen is being controlled" indicator: the yellow
+ * border around every screen and the End Session pill hanging from its top
+ * edge. The desktop chat draws each in its own click-through window.
+ */
+
+const meta = {
+  title: 'Remote Session/Client/Screen Indicator',
+  component: RemoteSessionPill,
+  tags: ['autodocs'],
+  args: { onEndSession: fn() },
+  decorators: [
+    Story => (
+      <RemoteSessionScope>
+        <Story />
+      </RemoteSessionScope>
+    ),
+  ],
+} satisfies Meta<typeof RemoteSessionPill>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The pill on its own. */
+export const Pill: Story = {};
+
+/** Border and pill together, on a screen-sized stand-in. */
+export const Screen: Story = {
+  render: args => (
+    <div className="relative h-[360px] w-[640px] bg-ods-bg">
+      <div className="absolute inset-0">
+        <RemoteSessionBorder />
+      </div>
+      <div className="absolute inset-x-0 top-0 flex justify-center">
+        <RemoteSessionPill {...args} />
+      </div>
+    </div>
+  ),
+};