@qoretechnologies/reqraft 0.10.25 → 0.10.26

package/src/components/supportTicket/AttachmentChips.tsx

@@ -0,0 +1,147 @@
+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 ?? ''
+          }
+          // the lightbox ids ARE the stringified file indices, so renaming from the
+          // preview funnels into the same host callback as the chip pencil
+          onRename={
+            onRename && !disabled ? (id, name) => onRename(Number(id), name) : undefined
+          }
+        />
+      ) : null}
+    </>
+  );
+};

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

@@ -0,0 +1,171 @@
+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 composer use: the chips are references you're about to send, so each carries
+ * an "×" to detach it. The thread's chips deliberately don't — there, they're a
+ * record of what was sent, and an × would offer to undo something that already
+ * happened.
+ */
+export const Removable: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the composer use, where every chip carries a remove "×". Clicking one calls onRemove with that reference so the composer can detach it before sending.',
+      },
+    },
+  },
+  args: { label: undefined, onRemove: fn() },
+  async play({ canvasElement, args }) {
+    const canvas = within(canvasElement);
+    const remove = canvasElement.querySelectorAll('.reqore-tag-remove');
+
+    // one × per chip — not just on the one under the cursor
+    await expect(remove.length).toBe(4);
+
+    await userEvent.click(remove[1] as HTMLElement);
+    await waitFor(() =>
+      expect(args.onRemove).toHaveBeenCalledWith(
+        expect.objectContaining({
+          interface_kind: 'workflow',
+          interface_name: 'invoice-sync:2.3',
+        })
+      )
+    );
+    // the chips themselves are unchanged — removal is the host's to apply
+    await expect(canvas.getByText('order-sync:1.2')).toBeInTheDocument();
+  },
+};
+
+/** 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,96 @@
+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;
+  /**
+   * Detach a reference. Each chip grows an "×" when given — for the composer,
+   * where the chips are the references you're about to send and so are still
+   * editable. Omitted everywhere the chips are a record of what WAS sent (the
+   * thread, the ticket header, the Qonsole card): those aren't editable, and an
+   * × on them would offer to undo something that already happened.
+   */
+  onRemove?: (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,
+  onRemove,
+  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}
+            onRemoveClick={onRemove ? () => onRemove(reference) : undefined}
+            removeTooltip={`Remove ${reference.interface_kind} ${reference.interface_name}`}
+          />
+        );
+      })}
+    </ReqoreControlGroup>
+  );
+};