@qoretechnologies/reqraft 0.10.10 → 0.10.13-pr.74.gccefa54

package/src/components/supportTicket/AttachmentChips.stories.tsx

@@ -0,0 +1,122 @@
+import { StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
+import { StoryMeta } from '../../types';
+import { AttachmentChips } from './AttachmentChips';
+
+/**
+ * Staged-file chips for a ticket composer. Image files show a thumbnail and open the shared
+ * `ImageLightbox` on click; other files show a paperclip. The pencil renames a file inline
+ * (a File name is read-only, so the host swaps in a renamed copy); the ✕ removes it.
+ */
+const meta = {
+  component: AttachmentChips,
+  title: 'Components/AttachmentChips',
+} as StoryMeta<typeof AttachmentChips>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const imageFile = (label: string, hue: number, name: string): File => {
+  const svg =
+    `<svg xmlns='http://www.w3.org/2000/svg' width='640' height='400'>` +
+    `<rect width='640' height='400' fill='hsl(${hue},40%,16%)'/>` +
+    `<text x='24' y='210' fill='white' font-family='sans-serif' font-size='30'>${label}</text></svg>`;
+  return new File([svg], name, { type: 'image/svg+xml' });
+};
+const textFile = (name: string): File => new File(['log contents'], name, { type: 'text/plain' });
+
+const FILES = [
+  imageFile('before', 265, 'screenshot-2026-07-26-17-41-44.png'),
+  imageFile('after', 205, 'canvas-after.png'),
+  textFile('server.log'),
+];
+
+// Plays the composer's role: owns the file set, swaps in a renamed copy on rename.
+const Harness = () => {
+  const [files, setFiles] = useState<File[]>(FILES);
+  return (
+    <AttachmentChips
+      files={files}
+      onRemove={(index) => setFiles((current) => current.filter((_, j) => j !== index))}
+      onRename={(index, name) =>
+        setFiles((current) =>
+          current.map((file, i) => (i === index ? new File([file], name, { type: file.type }) : file))
+        )
+      }
+    />
+  );
+};
+
+/**
+ * Two screenshots + a log. Clicking a screenshot chip opens the lightbox (paging across the two
+ * images); the log stays a plain chip. Proves the preview opens and paints the image.
+ */
+export const WithImages: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders staged chips for two screenshots and a log, where clicking a screenshot chip opens the shared lightbox while the log stays a plain chip.',
+      },
+    },
+  },
+  render: () => <Harness />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('screenshot-2026-07-26-17-41-44.png')).toBeInTheDocument();
+    await expect(canvas.getByText('server.log')).toBeInTheDocument();
+
+    // clicking an image chip opens the shared lightbox (portals to the body)
+    await userEvent.click(canvas.getByText('canvas-after.png'));
+    await waitFor(() => expect(document.querySelector('[role="dialog"]')).not.toBeNull());
+    await waitFor(() =>
+      expect(document.body.querySelector('img[alt="canvas-after.png"]')).not.toBeNull()
+    );
+  },
+};
+
+/**
+ * Renaming an auto-named screenshot: the pencil turns the chip into an inline input; Enter
+ * commits and the chip shows the new name. Discriminating — remove the rename wiring and the
+ * chip keeps its `screenshot-<timestamp>.png` name.
+ */
+export const Rename: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the staged chips and renames an auto-named screenshot inline — the pencil opens an input, Enter commits, and the chip shows the new name.',
+      },
+    },
+  },
+  render: () => <Harness />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const chip = canvas.getByText('screenshot-2026-07-26-17-41-44.png').closest('.reqore-tag');
+    if (!chip) {
+      throw new Error('chip not found');
+    }
+    // click the rename pencil (its own action; the ✕ is a separate reqore-tag-remove)
+    const renameAction = chip.querySelector<HTMLElement>('.reqore-tag-action:not(.reqore-tag-remove)');
+    if (!renameAction) {
+      throw new Error('rename action not rendered');
+    }
+    await userEvent.click(renameAction);
+
+    // the inline input appears, pre-filled with the current name
+    const input = await waitFor(() => {
+      const el = canvasElement.querySelector<HTMLInputElement>('input');
+      if (!el) {
+        throw new Error('rename input not shown');
+      }
+      return el;
+    });
+    await userEvent.clear(input);
+    await userEvent.type(input, 'mapper-error.png');
+    await userEvent.keyboard('{Enter}');
+
+    // the chip now carries the new name; the auto-name is gone
+    await waitFor(() => expect(canvas.getByText('mapper-error.png')).toBeInTheDocument());
+    await expect(canvas.queryByText('screenshot-2026-07-26-17-41-44.png')).not.toBeInTheDocument();
+  },
+};

package/src/components/supportTicket/AttachmentChips.tsx

@@ -0,0 +1,142 @@
+import { ReqoreControlGroup, ReqoreInput, ReqoreTag } from '@qoretechnologies/reqore';
+import { useEffect, useState } from 'react';
+import { ImageLightbox } from '../imageLightbox';
+
+/*
+ * Renders the files staged on a ticket composer as removable chips. Image files — whether
+ * uploaded, pasted, or captured as a screenshot — show a thumbnail and open the shared
+ * `ImageLightbox` on click (paging across the staged images, click-to-zoom); everything else
+ * shows a paperclip + filename. When `onRename` is given, a pencil turns the chip into an
+ * inline input so a captured `screenshot-<timestamp>.png` can be given a meaningful name (a
+ * File's name is read-only, so the host swaps in a renamed copy).
+ *
+ * The thumbnail object URLs ARE the full-image URLs the lightbox shows, so they're created
+ * once here and revoked when the file set changes or on unmount. Renders nothing when empty.
+ */
+
+export interface IAttachmentChipsProps {
+  files: File[];
+  onRemove: (index: number) => void;
+  /** Rename a staged file. Omit to make chips non-renamable. The host replaces the File with a
+   *  renamed copy (`new File([file], newName, { type: file.type })`). */
+  onRename?: (index: number, newName: string) => void;
+  disabled?: boolean;
+}
+
+export const AttachmentChips = ({ files, onRemove, onRename, disabled }: IAttachmentChipsProps) => {
+  const [thumbnails, setThumbnails] = useState<string[]>([]);
+  // index into the image subset that's open in the lightbox, or null when closed.
+  const [previewIndex, setPreviewIndex] = useState<number | null>(null);
+  // the file index currently being renamed inline, plus its working name.
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+  const [draftName, setDraftName] = useState<string>('');
+
+  useEffect(() => {
+    const urls = files.map((file) =>
+      file.type.startsWith('image/') ? URL.createObjectURL(file) : ''
+    );
+    setThumbnails(urls);
+    return () => urls.forEach((url) => url && URL.revokeObjectURL(url));
+  }, [files]);
+
+  if (!files.length) {
+    return null;
+  }
+
+  // The staged images in order, each with its original file index + object URL — the set the
+  // lightbox pages across. Non-image files are skipped.
+  const imageEntries = files
+    .map((file, index) => ({ file, index, url: thumbnails[index] }))
+    .filter((entry) => entry.url);
+
+  const startRename = (index: number) => {
+    setDraftName(files[index].name);
+    setEditingIndex(index);
+  };
+  const commitRename = () => {
+    if (editingIndex === null) {
+      return;
+    }
+    const name = draftName.trim();
+    if (onRename && name && name !== files[editingIndex].name) {
+      onRename(editingIndex, name);
+    }
+    setEditingIndex(null);
+  };
+
+  return (
+    <>
+      <ReqoreControlGroup wrap gapSize='small' verticalAlign='center'>
+        {files.map((file, index) => {
+          if (editingIndex === index) {
+            return (
+              <ReqoreInput
+                key={`edit-${index}`}
+                value={draftName}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                  setDraftName(event.target.value)
+                }
+                onBlur={commitRename}
+                onKeyDown={(event: React.KeyboardEvent) => {
+                  if (event.key === 'Enter') {
+                    commitRename();
+                  } else if (event.key === 'Escape') {
+                    setEditingIndex(null);
+                  }
+                }}
+                size='small'
+                fixed
+                autoFocus
+              />
+            );
+          }
+
+          const thumbnail = thumbnails[index];
+          const imageIndex = thumbnail
+            ? imageEntries.findIndex((entry) => entry.index === index)
+            : -1;
+          const actions =
+            onRename && !disabled
+              ? [
+                  {
+                    icon: 'Edit2Line' as const,
+                    tooltip: 'Rename',
+                    onClick: (event: React.MouseEvent<HTMLDivElement>) => {
+                      event.stopPropagation();
+                      startRename(index);
+                    },
+                  },
+                ]
+              : undefined;
+          return (
+            <ReqoreTag
+              key={`${file.name}-${index}`}
+              icon={thumbnail ? undefined : 'AttachmentLine'}
+              leftIconProps={thumbnail ? { image: thumbnail } : undefined}
+              label={file.name}
+              size='small'
+              tooltip={thumbnail ? 'Click to preview' : undefined}
+              actions={actions}
+              onClick={thumbnail ? () => setPreviewIndex(imageIndex) : undefined}
+              onRemoveClick={disabled ? undefined : () => onRemove(index)}
+            />
+          );
+        })}
+      </ReqoreControlGroup>
+      {previewIndex !== null && imageEntries[previewIndex] ? (
+        <ImageLightbox
+          images={imageEntries.map((entry) => ({
+            attachment_id: String(entry.index),
+            filename: entry.file.name,
+          }))}
+          index={previewIndex}
+          onIndex={setPreviewIndex}
+          onClose={() => setPreviewIndex(null)}
+          fetchAttachmentUrl={async (id) =>
+            imageEntries.find((entry) => String(entry.index) === id)?.url ?? ''
+          }
+        />
+      ) : null}
+    </>
+  );
+};

package/src/components/supportTicket/InterfaceReferenceTags.stories.tsx

@@ -0,0 +1,134 @@
+import { StoryObj } from '@storybook/react-vite';
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
+import { StoryMeta } from '../../types';
+import { InterfaceReferenceTags } from './InterfaceReferenceTags';
+import { IInterfaceReference } from './meta';
+
+// Several references, including two of the same kind (workflow), as `{kind, name}`
+// snapshots — no `resolveInterfaceIcon` is passed, so the built-in per-kind default
+// icons are exercised.
+const REFERENCES: IInterfaceReference[] = [
+  { interface_kind: 'workflow', interface_name: 'order-sync:1.2', reference_id: 'r1' },
+  { interface_kind: 'workflow', interface_name: 'invoice-sync:2.3', reference_id: 'r2' },
+  { interface_kind: 'service', interface_name: 'notification-svc', reference_id: 'r3' },
+  { interface_kind: 'job', interface_name: 'nightly-cleanup', reference_id: 'r4' },
+];
+
+const meta = {
+  component: InterfaceReferenceTags,
+  title: 'Components/InterfaceReferenceTags',
+  args: {
+    references: REFERENCES,
+    label: 'References',
+  },
+} as StoryMeta<typeof InterfaceReferenceTags>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The ticket-header use: a "References" label followed by one chip per reference. */
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders the ticket-header use — a 'References' label followed by one chip per reference.",
+      },
+    },
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('References')).toBeInTheDocument();
+    await expect(canvas.getByText('order-sync:1.2')).toBeInTheDocument();
+    await expect(canvas.getByText('invoice-sync:2.3')).toBeInTheDocument();
+    await expect(canvas.getByText('notification-svc')).toBeInTheDocument();
+    await expect(canvas.getByText('nightly-cleanup')).toBeInTheDocument();
+  },
+};
+
+/**
+ * When `onInterfaceClick` is passed the chips become interactive; clicking one
+ * calls it with that reference (the customer view, which can open the interface on
+ * its own instance, wires this).
+ */
+export const Clickable: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders interactive chips by passing onInterfaceClick — clicking a chip calls it with that reference, as the customer view (which can open the interface on its own instance) wires.',
+      },
+    },
+  },
+  args: { onInterfaceClick: fn() },
+  async play({ canvasElement, args }) {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByText('invoice-sync:2.3'));
+    await waitFor(() =>
+      expect(args.onInterfaceClick).toHaveBeenCalledWith(
+        expect.objectContaining({
+          interface_kind: 'workflow',
+          interface_name: 'invoice-sync:2.3',
+        })
+      )
+    );
+  },
+};
+
+/** The in-thread use: no label — the chips sit under a message. */
+export const NoLabel: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the in-thread use with label undefined — no label, just the chips as they sit under a message.',
+      },
+    },
+  },
+  args: { label: undefined },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await expect(canvas.queryByText('References')).not.toBeInTheDocument();
+    await expect(canvas.getByText('order-sync:1.2')).toBeInTheDocument();
+  },
+};
+
+/**
+ * With no references the component renders nothing — no empty header, no chips —
+ * so a ticket without references shows a clean gap rather than a stray "References:"
+ * label. The dashed frame below is a story-only caption; the empty space inside it
+ * is the component.
+ */
+export const Empty: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the empty case — with no references the component renders nothing (no header, no chips), shown inside a dashed story-only caption frame.',
+      },
+    },
+  },
+  args: { references: [] },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          border: '1px dashed rgba(150, 150, 150, 0.4)',
+          borderRadius: 6,
+          padding: 12,
+          fontSize: 12,
+          opacity: 0.6,
+        }}
+      >
+        No references → the row renders nothing (no empty header, no chips):
+        <Story />
+      </div>
+    ),
+  ],
+  async play({ canvasElement }) {
+    // The dashed frame + caption are the decorator; the component itself renders
+    // nothing — no header text, no chips.
+    await expect(within(canvasElement).queryByText('References')).not.toBeInTheDocument();
+    await expect(within(canvasElement).queryByText('order-sync:1.2')).not.toBeInTheDocument();
+  },
+};

package/src/components/supportTicket/InterfaceReferenceTags.tsx

@@ -0,0 +1,85 @@
+import { ReqoreControlGroup, ReqoreP, ReqoreTag } from '@qoretechnologies/reqore';
+import { TSizes } from '@qoretechnologies/reqore/dist/constants/sizes';
+import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
+import { ComponentProps } from 'react';
+import { defaultInterfaceIcon, IInterfaceReference } from './meta';
+
+export interface IInterfaceReferenceTagsProps {
+  references?: IInterfaceReference[];
+  /** Optional leading label, e.g. "References" in a ticket header. Omitted (the
+   *  default) inside the thread, where the chips sit under a message. */
+  label?: string;
+  /** Resolve a per-kind icon. Consumers with their own icon vocabulary (the IDE)
+   *  pass one; when omitted the built-in per-kind default is used. */
+  resolveInterfaceIcon?: (kind: string) => IReqoreIconName;
+  /** Open a referenced interface; chips are static (informational) when omitted —
+   *  e.g. the staff view, which can't reach the customer's instance. */
+  onInterfaceClick?: (reference: IInterfaceReference) => void;
+  size?: TSizes;
+  /** Chip styling — pass `intent`/`customTheme` (e.g. `{ main: 'custom1' }`) to tint
+   *  the reference chips to a surface's accent (the Qonsole/helpdesk composer does). */
+  intent?: ComponentProps<typeof ReqoreTag>['intent'];
+  customTheme?: ComponentProps<typeof ReqoreTag>['customTheme'];
+  /** Resolve a per-reference image — e.g. a qog's trigger-app logo, the way the
+   *  qogs list does. When this (or the reference's own `logo`) returns a value, the
+   *  chip shows the image in place of the kind icon. */
+  resolveInterfaceImage?: (reference: IInterfaceReference) => string | undefined;
+}
+
+/**
+ * The chips for the Qorus interfaces a ticket or message references, as
+ * `{kind, name}` snapshots. The single renderer for interface references across
+ * every support surface — the ticket header (with a "References" label), the
+ * thread (per message, no label), and the Qonsole card — so a reference looks
+ * identical everywhere. Renders nothing when there are no references.
+ */
+export const InterfaceReferenceTags = ({
+  references,
+  label,
+  resolveInterfaceIcon,
+  onInterfaceClick,
+  size = 'small',
+  intent,
+  customTheme,
+  resolveInterfaceImage,
+}: IInterfaceReferenceTagsProps) => {
+  if (!references?.length) {
+    return null;
+  }
+  const resolveIcon = resolveInterfaceIcon ?? defaultInterfaceIcon;
+  return (
+    <ReqoreControlGroup verticalAlign='center' wrap gapSize='small'>
+      {label ? (
+        <ReqoreP size='small' effect={{ opacity: 0.6 }}>
+          {label}
+        </ReqoreP>
+      ) : null}
+      {references.map((reference) => {
+        // an app-triggered qog shows the trigger app's logo (stored, or resolved by
+        // a viewer with the app catalogue); everything else shows its kind glyph.
+        const image = reference.logo ?? resolveInterfaceImage?.(reference);
+        return (
+          <ReqoreTag
+            key={
+              reference.reference_id ??
+              `${reference.interface_kind}:${reference.interface_name}`
+            }
+            icon={image ? undefined : resolveIcon(reference.interface_kind)}
+            leftIconProps={image ? { image } : undefined}
+            labelKey={reference.interface_kind}
+            label={reference.interface_name}
+            size={size}
+            intent={intent}
+            customTheme={customTheme}
+            tooltip={
+              onInterfaceClick
+                ? `Open ${reference.interface_kind} ${reference.interface_name}`
+                : `${reference.interface_kind}: ${reference.interface_name}`
+            }
+            onClick={onInterfaceClick ? () => onInterfaceClick(reference) : undefined}
+          />
+        );
+      })}
+    </ReqoreControlGroup>
+  );
+};