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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.691",
+  "version": "0.0.692",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/features/__tests__/remote-session.test.tsx

@@ -0,0 +1,97 @@
+/**
+ * Remote session widgets: the elapsed format, the consent card's https-only
+ * site link and its decision lock, and the chat composer's send.
+ */
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import {
+  formatRemoteSessionElapsed,
+  RemoteAccessRequestCard,
+  RemoteSessionChatPanel,
+  RemoteSessionMinimizedChip,
+} from '../remote-session';
+
+const party = { organizationName: 'TechFlow Solutions', organizationSiteUrl: 'https://www.techflow.com' };
+
+describe('formatRemoteSessionElapsed', () => {
+  it('counts minutes and seconds, then hours', () => {
+    expect(formatRemoteSessionElapsed(0)).toBe('0:00');
+    expect(formatRemoteSessionElapsed(323_000)).toBe('5:23');
+    expect(formatRemoteSessionElapsed(3_723_000)).toBe('1:02:03');
+  });
+
+  it('never goes negative when the clock is behind the server', () => {
+    expect(formatRemoteSessionElapsed(-5_000)).toBe('0:00');
+  });
+});
+
+describe('RemoteAccessRequestCard', () => {
+  it('offers the site only when it is https', () => {
+    const onOpenSite = vi.fn();
+    const { rerender } = render(<RemoteAccessRequestCard party={party} onDecide={() => {}} onOpenSite={onOpenSite} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Open website' }));
+    expect(onOpenSite).toHaveBeenCalledWith('https://www.techflow.com');
+
+    rerender(
+      <RemoteAccessRequestCard
+        party={{ ...party, organizationSiteUrl: 'http://techflow.local' }}
+        onDecide={() => {}}
+        onOpenSite={onOpenSite}
+      />,
+    );
+    expect(screen.getByText('techflow.local')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Open website' })).toBeNull();
+  });
+
+  it('reports the decision, and locks both buttons while one is in flight', () => {
+    const onDecide = vi.fn();
+    const { rerender } = render(<RemoteAccessRequestCard party={party} onDecide={onDecide} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Allow Access' }));
+    expect(onDecide).toHaveBeenCalledWith('APPROVED');
+
+    rerender(<RemoteAccessRequestCard party={party} onDecide={onDecide} deciding="APPROVED" />);
+    expect(screen.getByRole('button', { name: 'Decline' })).toBeDisabled();
+  });
+
+  it('shows the recording notice only when asked to', () => {
+    const { rerender } = render(<RemoteAccessRequestCard party={party} onDecide={() => {}} />);
+    expect(screen.queryByText(/will be recorded/)).toBeNull();
+    rerender(<RemoteAccessRequestCard party={party} onDecide={() => {}} showRecordingNotice />);
+    expect(screen.getByText(/will be recorded/)).toBeInTheDocument();
+  });
+});
+
+describe('RemoteSessionChatPanel', () => {
+  it('sends the trimmed draft and clears it; a blank draft sends nothing', () => {
+    const onSend = vi.fn();
+    const onDraftChange = vi.fn();
+    const props = {
+      party,
+      elapsed: '1:00',
+      messages: [],
+      onDraftChange,
+      onSend,
+      onCloseChat: () => {},
+      onEndSession: () => {},
+    };
+    const { rerender } = render(<RemoteSessionChatPanel {...props} draft="  hello  " />);
+    fireEvent.click(screen.getByRole('button', { name: 'Send message' }));
+    expect(onSend).toHaveBeenCalledWith('hello');
+    expect(onDraftChange).toHaveBeenCalledWith('');
+
+    onSend.mockClear();
+    rerender(<RemoteSessionChatPanel {...props} draft="   " />);
+    fireEvent.click(screen.getByRole('button', { name: 'Send message' }));
+    expect(onSend).not.toHaveBeenCalled();
+  });
+});
+
+describe('RemoteSessionMinimizedChip', () => {
+  it('expands on click', () => {
+    const onExpand = vi.fn();
+    render(<RemoteSessionMinimizedChip party={{ ...party, technicianName: 'Mike Rodriguez' }} onExpand={onExpand} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Show session block' }));
+    expect(onExpand).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/features/index.ts

@@ -92,6 +92,7 @@ export * from './policy-configuration-panel';
 export * from './waitlist-form';
 export * from './notifications';
 export * from './time-tracker';
+export * from './remote-session';
 export * from './board';
 export * from './sortable-list';
 export * from './ticket-status-config-list';

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

@@ -0,0 +1,36 @@
+export { RemoteAccessRequestCard } from './remote-access-request-card';
+export type { RemoteAccessRequestCardProps } from './remote-access-request-card';
+export {
+  RemoteSessionBlockFrame,
+  RemoteSessionEndButton,
+  RemoteSessionMinimizedChip,
+  RemoteSessionSummary,
+} from './remote-session-block';
+export type {
+  RemoteSessionBlockFrameProps,
+  RemoteSessionMinimizedChipProps,
+  RemoteSessionSummaryProps,
+} from './remote-session-block';
+export { RemoteSessionChatPanel } from './remote-session-chat-panel';
+export type { RemoteSessionChatPanelProps } from './remote-session-chat-panel';
+export { RemoteSessionDialog } from './remote-session-dialog';
+export type { RemoteSessionDialogProps } from './remote-session-dialog';
+export { RemoteSessionBorder, RemoteSessionPill } from './remote-session-overlay';
+export {
+  REMOTE_SESSION_DRAG_HANDLE_CLASS,
+  RemoteSessionDragger,
+  RemoteSessionOrgLogo,
+  RemoteSessionRecordingTag,
+  RemoteSessionScope,
+  formatRemoteSessionElapsed,
+  useRemoteSessionTimer,
+} from './remote-session-parts';
+export type { RemoteSessionOrgLogoProps, RemoteSessionScopeProps } from './remote-session-parts';
+export type {
+  RemoteAccessDecision,
+  RemoteSessionChatAuthor,
+  RemoteSessionChatMessage,
+  RemoteSessionDialogVariant,
+  RemoteSessionDragHandlers,
+  RemoteSessionParty,
+} from './types';

package/src/components/features/remote-session/remote-access-request-card.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { ExternalLinkIcon, InfoCircleIcon } from '../../icons-v2-generated';
+import { Button } from '../../ui/button/button';
+import { RemoteSessionOrgLogo } from './remote-session-parts';
+import type { RemoteAccessDecision, RemoteSessionParty } from './types';
+
+export interface RemoteAccessRequestCardProps {
+  party: RemoteSessionParty;
+  /** The notice that the session will be recorded. */
+  showRecordingNotice?: boolean;
+  /** The decision in flight, if any; both buttons lock while it is set. */
+  deciding?: RemoteAccessDecision | null;
+  /** Replaces the "you can end the session" line, e.g. when the decision could not be sent. */
+  error?: string | null;
+  onDecide: (decision: RemoteAccessDecision) => void;
+  /**
+   * Opens the organization's site. The button only shows for an https URL:
+   * the URL comes from the server, so no other scheme is ever handed out.
+   */
+  onOpenSite?: (url: string) => void;
+}
+
+/** `https://www.techflow.com/` -> `www.techflow.com`. */
+function displaySiteUrl(url: string): string {
+  return url.replace(/^https?:\/\//, '').replace(/\/$/, '');
+}
+
+/** The end user's consent dialog for a remote access request: who is asking, what they get, Decline / Allow Access. */
+export function RemoteAccessRequestCard({
+  party,
+  showRecordingNotice = false,
+  deciding = null,
+  error,
+  onDecide,
+  onOpenSite,
+}: RemoteAccessRequestCardProps) {
+  const { organizationName } = party;
+  const siteUrl = party.organizationSiteUrl ?? undefined;
+  const openableSite = siteUrl?.startsWith('https://') ? siteUrl : undefined;
+
+  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)]">
+      <h1 className="w-full text-ods-text-primary text-h2">Your IT support team is requesting remote access</h1>
+
+      <div className="flex w-full items-center gap-[var(--spacing-system-m)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-m)]">
+        <RemoteSessionOrgLogo name={organizationName} logoUrl={party.organizationLogoUrl} sizePx={64} />
+        <div className="flex min-w-0 flex-1 flex-col">
+          <p className="w-full truncate text-ods-text-primary text-h3">{organizationName}</p>
+          {siteUrl && <p className="w-full truncate text-ods-text-secondary text-h4">{displaySiteUrl(siteUrl)}</p>}
+        </div>
+        {openableSite && onOpenSite && (
+          <Button variant="outline" size="icon" aria-label="Open website" onClick={() => onOpenSite(openableSite)}>
+            <ExternalLinkIcon size={24} color="currentColor" />
+          </Button>
+        )}
+      </div>
+
+      <p className="w-full text-ods-text-primary text-h4">
+        A technician from <span className="text-ods-accent">{organizationName}</span> will be able to view your screen
+        and control your mouse and keyboard during this session.
+      </p>
+
+      <div className="flex w-full flex-col gap-[var(--spacing-system-xs)]">
+        {showRecordingNotice && (
+          <div className="flex w-full items-center gap-[var(--spacing-system-xs)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-s)]">
+            <InfoCircleIcon size={24} color="currentColor" className="shrink-0 text-ods-accent" />
+            <p className="min-w-0 flex-1 text-ods-text-primary text-h6">
+              This session will be recorded and available upon request.
+            </p>
+          </div>
+        )}
+        {error ? (
+          <p className="w-full text-ods-text-primary text-h6">{error}</p>
+        ) : (
+          <p className="w-full text-ods-text-secondary text-h6">You can end the session at any time.</p>
+        )}
+      </div>
+
+      <div className="flex w-full items-stretch gap-[var(--spacing-system-l)]">
+        <Button
+          variant="outline"
+          fullWidth
+          loading={deciding === 'DENIED'}
+          disabled={deciding !== null}
+          onClick={() => onDecide('DENIED')}
+        >
+          Decline
+        </Button>
+        <Button
+          variant="accent"
+          fullWidth
+          loading={deciding === 'APPROVED'}
+          disabled={deciding !== null}
+          onClick={() => onDecide('APPROVED')}
+        >
+          Allow Access
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,182 @@
+'use client';
+
+import { forwardRef, type ReactNode } from 'react';
+import { cn } from '../../../utils/cn';
+import { ChatsIcon, Chevrons03LeftIcon, Chevrons03RightIcon, MonitorOffIcon } from '../../icons-v2-generated';
+import { OpenFrameLogo } from '../../icons/openframe-logo';
+import { Button } from '../../ui/button/button';
+import { SquareAvatar } from '../../ui/square-avatar';
+import {
+  REMOTE_SESSION_DRAG_HANDLE_CLASS,
+  RemoteSessionDragger,
+  RemoteSessionOrgLogo,
+  RemoteSessionRecordingTag,
+} from './remote-session-parts';
+import type { RemoteSessionDragHandlers, RemoteSessionParty } from './types';
+
+export interface RemoteSessionBlockFrameProps {
+  /** The summary or the chat panel. */
+  children: ReactNode;
+  /** The chat panel has a fixed height; the summary hugs its content. */
+  expanded?: boolean;
+  onHide: () => void;
+  className?: string;
+}
+
+/**
+ * The session block's card: 440 px wide, the open panel on top and the
+ * "Hide this Block" bar at the bottom. The ref is the rendered surface, which
+ * a desktop host sizes its window to.
+ */
+export const RemoteSessionBlockFrame = forwardRef<HTMLDivElement, RemoteSessionBlockFrameProps>(
+  ({ children, expanded = false, onHide, className }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex w-[440px] shrink-0 flex-col overflow-hidden rounded-md border border-ods-border bg-ods-bg',
+          expanded && 'h-[680px]',
+          className,
+        )}
+      >
+        {children}
+        <button
+          type="button"
+          className="flex h-12 w-full shrink-0 items-center gap-[var(--spacing-system-xs)] border-t border-ods-border bg-ods-card px-[var(--spacing-system-m)]"
+          onClick={onHide}
+        >
+          <Chevrons03RightIcon size={24} />
+          <span className="min-w-0 flex-1 truncate text-left text-ods-text-secondary text-h4">Hide this Block</span>
+          <OpenFrameLogo className="size-6 shrink-0" />
+        </button>
+      </div>
+    );
+  },
+);
+RemoteSessionBlockFrame.displayName = 'RemoteSessionBlockFrame';
+
+/** The red End Session action shared by the summary and the chat panel. */
+export function RemoteSessionEndButton({ onEndSession }: { onEndSession: () => void }) {
+  return (
+    <Button
+      variant="outline"
+      fullWidth
+      leftIcon={<MonitorOffIcon size={24} color="currentColor" className="text-ods-error" />}
+      onClick={onEndSession}
+    >
+      End Session
+    </Button>
+  );
+}
+
+export interface RemoteSessionSummaryProps {
+  party: RemoteSessionParty;
+  /** Elapsed session time, e.g. from `useRemoteSessionTimer`. */
+  elapsed: string;
+  showRecordingTag?: boolean;
+  onOpenChat: () => void;
+  onEndSession: () => void;
+  /** Makes the header row and the dragger move the window. */
+  dragHandlers?: RemoteSessionDragHandlers;
+}
+
+/** The compact block: who is connected and for how long, Open Chat / End Session. */
+export function RemoteSessionSummary({
+  party,
+  elapsed,
+  showRecordingTag = false,
+  onOpenChat,
+  onEndSession,
+  dragHandlers,
+}: RemoteSessionSummaryProps) {
+  const technician = party.technicianName;
+  return (
+    <div className="relative flex flex-col gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)]">
+      <RemoteSessionDragger dragHandlers={dragHandlers} />
+      <div
+        className={cn(
+          'flex w-full items-center gap-[var(--spacing-system-xs)] pr-[var(--spacing-system-mf)]',
+          dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS,
+        )}
+        {...dragHandlers}
+      >
+        {technician ? (
+          <SquareAvatar
+            variant="round"
+            sizePx={48}
+            src={party.technicianAvatarUrl ?? undefined}
+            fallback={technician}
+          />
+        ) : (
+          <RemoteSessionOrgLogo name={party.organizationName} logoUrl={party.organizationLogoUrl} sizePx={48} />
+        )}
+        <div className="flex min-w-0 flex-1 flex-col">
+          <p className="w-full truncate text-ods-text-primary text-h4">
+            {technician ? `${technician} connected` : 'IT support team is connected'}{' '}
+            <span className="text-ods-text-secondary">({elapsed})</span>
+          </p>
+          <p className="w-full truncate text-ods-text-secondary text-h4">{party.organizationName}</p>
+        </div>
+      </div>
+      {showRecordingTag && <RemoteSessionRecordingTag />}
+      <div className="flex w-full items-stretch gap-[var(--spacing-system-m)]">
+        <Button
+          variant="outline"
+          fullWidth
+          leftIcon={<ChatsIcon size={24} color="currentColor" />}
+          onClick={onOpenChat}
+        >
+          Open Chat
+        </Button>
+        <RemoteSessionEndButton onEndSession={onEndSession} />
+      </div>
+    </div>
+  );
+}
+
+export interface RemoteSessionMinimizedChipProps {
+  party: RemoteSessionParty;
+  onExpand: () => void;
+  /** Lets the chip move the window too; the host tells a drag from a click. */
+  dragHandlers?: RemoteSessionDragHandlers;
+}
+
+/** The hidden block: the technician's avatar (or the organization's logo) and a chevron to bring it back. */
+export const RemoteSessionMinimizedChip = forwardRef<HTMLButtonElement, RemoteSessionMinimizedChipProps>(
+  ({ party, onExpand, dragHandlers }, ref) => {
+    const technician = party.technicianName;
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-label="Show session block"
+        className={cn(
+          'flex shrink-0 flex-col overflow-hidden rounded-md border border-ods-border',
+          dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS,
+        )}
+        onClick={onExpand}
+        {...dragHandlers}
+      >
+        {technician ? (
+          <SquareAvatar
+            sizePx={48}
+            src={party.technicianAvatarUrl ?? undefined}
+            fallback={technician}
+            className="rounded-none"
+          />
+        ) : (
+          <RemoteSessionOrgLogo
+            name={party.organizationName}
+            logoUrl={party.organizationLogoUrl}
+            sizePx={48}
+            className="rounded-none border-0"
+          />
+        )}
+        <span className="flex h-9 w-12 items-center justify-center border-t border-ods-border bg-ods-card">
+          <Chevrons03LeftIcon size={24} />
+        </span>
+      </button>
+    );
+  },
+);
+RemoteSessionMinimizedChip.displayName = 'RemoteSessionMinimizedChip';

package/src/components/features/remote-session/remote-session-chat-panel.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { cn } from '../../../utils/cn';
+import { MessageOffIcon, Send03Icon } from '../../icons-v2-generated';
+import { Button } from '../../ui/button/button';
+import { SquareAvatar } from '../../ui/square-avatar';
+import { RemoteSessionEndButton } from './remote-session-block';
+import {
+  REMOTE_SESSION_DRAG_HANDLE_CLASS,
+  RemoteSessionDragger,
+  RemoteSessionRecordingTag,
+} from './remote-session-parts';
+import type { RemoteSessionChatMessage, RemoteSessionDragHandlers, RemoteSessionParty } from './types';
+
+export interface RemoteSessionChatPanelProps {
+  party: RemoteSessionParty;
+  /** Elapsed session time, e.g. from `useRemoteSessionTimer`. */
+  elapsed: string;
+  messages: RemoteSessionChatMessage[];
+  showRecordingTag?: boolean;
+  /** The composer's text; owned by the host so it survives hiding the block. */
+  draft: string;
+  onDraftChange: (draft: string) => void;
+  /** Called with the trimmed text; the composer clears itself through `onDraftChange`. */
+  onSend: (text: string) => void;
+  /** False while the chat is still connecting: the composer is disabled. */
+  ready?: boolean;
+  error?: string | null;
+  onCloseChat: () => void;
+  onEndSession: () => void;
+  /** Makes the header and the dragger move the window. */
+  dragHandlers?: RemoteSessionDragHandlers;
+}
+
+function formatTime(at: Date): string {
+  return at.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+}
+
+/** The chat with the technician inside the session block. */
+export function RemoteSessionChatPanel({
+  party,
+  elapsed,
+  messages,
+  showRecordingTag = false,
+  draft,
+  onDraftChange,
+  onSend,
+  ready = true,
+  error,
+  onCloseChat,
+  onEndSession,
+  dragHandlers,
+}: RemoteSessionChatPanelProps) {
+  const listRef = useRef<HTMLDivElement>(null);
+
+  // The list is the trigger: the newest row must come into view on every change.
+  useEffect(() => {
+    const list = listRef.current;
+    if (list) list.scrollTop = list.scrollHeight;
+  }, [messages]);
+
+  const handleSend = () => {
+    const text = draft.trim();
+    if (!text) return;
+    onSend(text);
+    onDraftChange('');
+  };
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="relative flex flex-col gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)]">
+        <RemoteSessionDragger dragHandlers={dragHandlers} />
+        <div
+          className={cn(
+            'flex w-full flex-col pr-[var(--spacing-system-mf)]',
+            dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS,
+          )}
+          {...dragHandlers}
+        >
+          <p className="w-full truncate text-ods-text-primary text-h4">
+            Your IT support team is connected <span className="text-ods-text-secondary">({elapsed})</span>
+          </p>
+          <p className="w-full truncate text-ods-text-secondary text-h4">You can end this session at any time</p>
+        </div>
+        {showRecordingTag && <RemoteSessionRecordingTag />}
+        <div className="flex w-full items-stretch gap-[var(--spacing-system-m)]">
+          <Button
+            variant="outline"
+            fullWidth
+            leftIcon={<MessageOffIcon size={24} color="currentColor" />}
+            onClick={onCloseChat}
+          >
+            Close Chat
+          </Button>
+          <RemoteSessionEndButton onEndSession={onEndSession} />
+        </div>
+      </div>
+      <div
+        ref={listRef}
+        className="flex min-h-0 flex-1 flex-col overflow-y-auto bg-ods-card p-[var(--spacing-system-m)]"
+      >
+        {/* mt-auto (not justify-end) keeps the top of an overflowing list scrollable. */}
+        <div className="mt-auto flex flex-col gap-[var(--spacing-system-s)]">
+          {messages.map(message =>
+            message.author === 'system' ? (
+              <p key={message.id} className="w-full text-center text-ods-text-secondary text-h6">
+                {message.text}
+              </p>
+            ) : (
+              <RemoteSessionChatMessageRow key={message.id} message={message} party={party} />
+            ),
+          )}
+        </div>
+      </div>
+      {error && <p className="bg-ods-card px-[var(--spacing-system-m)] text-ods-error text-h6">{error}</p>}
+      <form
+        className="flex items-center gap-[var(--spacing-system-xs)] bg-ods-card px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)]"
+        onSubmit={event => {
+          event.preventDefault();
+          handleSend();
+        }}
+      >
+        <input
+          value={draft}
+          onChange={event => onDraftChange(event.target.value)}
+          disabled={!ready}
+          placeholder={ready ? 'Enter your Message...' : 'Loading chat...'}
+          aria-label="Message"
+          className="h-12 min-w-0 flex-1 rounded-md border border-ods-border bg-ods-bg px-[var(--spacing-system-s)] text-ods-text-primary outline-none text-h6 placeholder:text-ods-text-secondary"
+        />
+        <button
+          type="submit"
+          aria-label="Send message"
+          disabled={!ready}
+          className="flex size-12 shrink-0 items-center justify-center"
+        >
+          <Send03Icon size={24} color="currentColor" className="text-ods-text-primary" />
+        </button>
+      </form>
+    </div>
+  );
+}
+
+function RemoteSessionChatMessageRow({
+  message,
+  party,
+}: {
+  message: RemoteSessionChatMessage;
+  party: RemoteSessionParty;
+}) {
+  const isTechnician = message.author === 'technician';
+  const technician = message.name ?? party.technicianName ?? 'Technician';
+  return (
+    <div className="flex w-full flex-col">
+      <div className="flex w-full items-center gap-[var(--spacing-system-xs)]">
+        {isTechnician && (
+          <SquareAvatar
+            variant="round"
+            sizePx={16}
+            src={party.technicianAvatarUrl ?? undefined}
+            fallback={technician}
+          />
+        )}
+        <span
+          className={cn(
+            'min-w-0 flex-1 truncate text-code',
+            isTechnician ? 'text-ods-accent' : 'text-ods-text-secondary',
+          )}
+        >
+          {isTechnician ? technician : 'User'}
+        </span>
+        <span className="shrink-0 text-ods-text-secondary text-h6">{formatTime(message.at)}</span>
+      </div>
+      <p className="w-full break-words text-ods-text-primary text-h6">{message.text}</p>
+    </div>
+  );
+}