@qoretechnologies/reqraft 0.10.64 → 0.10.65-pr.137.g62fcecc

package/src/components/supportTicket/AttachmentChips.tsx

@@ -1,147 +0,0 @@
-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

@@ -1,257 +0,0 @@
-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';
-import {
-  STORY_APP_LOGO,
-  STORY_BROKEN_IMAGE,
-  STORY_QOG_IMAGE,
-  storyBrokenKindMark,
-  storyKindMark,
-} from './__fixtures__/kindMarks';
-import { whenImageSettled } from './useLoadedImages';
-
-// 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();
-  },
-};
-
-const QOG_REFERENCES: IInterfaceReference[] = [
-  { interface_kind: 'fsm', interface_name: 'order-flow', reference_id: 'q1' },
-  {
-    interface_kind: 'fsm',
-    interface_name: 'telegram-intake',
-    reference_id: 'q2',
-    logo: STORY_APP_LOGO,
-  },
-  { interface_kind: 'service', interface_name: 'notification-svc', reference_id: 'q3' },
-];
-
-const chipImages = (canvasElement: HTMLElement) =>
-  Array.from(canvasElement.querySelectorAll('.reqore-tag img')).map((img) =>
-    img.getAttribute('src')
-  );
-
-export const KindImage: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders references with a host resolver that gives a Qog an image (the green mark) and a font icon fallback. The plain Qog shows the image; the app-triggered Qog keeps its stored trigger-app logo, because by default a reference's own logo comes first; the service has no image and shows its font icon.",
-      },
-    },
-  },
-  args: { references: QOG_REFERENCES, resolveInterfaceIcon: storyKindMark },
-  async play({ canvasElement }) {
-    await waitFor(() =>
-      expect(chipImages(canvasElement).sort()).toEqual([STORY_APP_LOGO, STORY_QOG_IMAGE].sort())
-    );
-  },
-};
-
-export const KindImagePreferred: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the same references with preferKindImage: the kind image comes before a reference\'s own logo, so both Qogs show the green Qog mark and the service keeps its font icon.',
-      },
-    },
-  },
-  args: {
-    references: QOG_REFERENCES,
-    resolveInterfaceIcon: storyKindMark,
-    preferKindImage: true,
-  },
-  async play({ canvasElement }) {
-    await waitFor(() =>
-      expect(chipImages(canvasElement)).toEqual([STORY_QOG_IMAGE, STORY_QOG_IMAGE])
-    );
-  },
-};
-
-export const KindImageFailsToLoad: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders a Qog reference whose kind image cannot load: the chip keeps the font icon instead of drawing a broken picture.',
-      },
-    },
-  },
-  args: {
-    references: [QOG_REFERENCES[0]],
-    resolveInterfaceIcon: storyBrokenKindMark,
-    preferKindImage: true,
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByText('order-flow')).toBeInTheDocument();
-    // Once the load has failed, no picture is drawn.
-    await whenImageSettled(STORY_BROKEN_IMAGE);
-    await expect(chipImages(canvasElement)).toEqual([]);
-    await expect(canvasElement.querySelector('.reqore-tag .reqore-icon')).toBeTruthy();
-  },
-};

package/src/components/supportTicket/InterfaceReferenceTags.tsx

@@ -1,129 +0,0 @@
-import { ReqoreControlGroup, ReqoreP, ReqoreTag } from '@qoretechnologies/reqore';
-import { TSizes } from '@qoretechnologies/reqore/dist/constants/sizes';
-import { ComponentProps } from 'react';
-import {
-  defaultInterfaceIcon,
-  IInterfaceReference,
-  toInterfaceKindMark,
-  TResolveInterfaceIcon,
-} from './meta';
-import { useLoadedImages } from './useLoadedImages';
-
-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: a font icon, or a mark `{ icon, image }` whose image
-   *  (e.g. the Qog logo) is drawn once it loads, with the font icon before that and
-   *  instead of it if it fails. Consumers with their own icon vocabulary (the IDE)
-   *  pass one; when omitted the built-in per-kind default is used. */
-  resolveInterfaceIcon?: TResolveInterfaceIcon;
-  /** 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;
-  /**
-   * Which image a chip draws when there is more than one:
-   *
-   * - `false` (the default): the reference's own image first — its stored `logo`,
-   *   then `resolveInterfaceImage` — and the kind's image (from
-   *   `resolveInterfaceIcon`) only when it has neither. This is how chips have
-   *   always looked: an app-triggered Qog shows its trigger app's logo.
-   * - `true`: the kind's image first, then the reference's own. For a host that
-   *   draws every interface of a kind with one mark (the IDE's green Qog), so a
-   *   Qog reads as a Qog whatever app triggers it.
-   *
-   * Either way the kind's font icon shows until the chosen image loads, and
-   * instead of it if it cannot.
-   */
-  preferKindImage?: boolean;
-}
-
-/**
- * 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,
-  preferKindImage = false,
-}: IInterfaceReferenceTagsProps) => {
-  const resolveIcon = resolveInterfaceIcon ?? defaultInterfaceIcon;
-  const marks = (references ?? []).map((reference) => {
-    const mark = toInterfaceKindMark(resolveIcon(reference.interface_kind));
-    const own = reference.logo ?? resolveInterfaceImage?.(reference);
-    return {
-      reference,
-      icon: mark.icon,
-      image: preferKindImage ? (mark.image ?? own) : (own ?? mark.image),
-    };
-  });
-  const isLoaded = useLoadedImages(marks.map(({ image }) => image));
-  if (!references?.length) {
-    return null;
-  }
-  return (
-    <ReqoreControlGroup verticalAlign='center' wrap gapSize='small'>
-      {label ? (
-        <ReqoreP size='small' effect={{ opacity: 0.6 }}>
-          {label}
-        </ReqoreP>
-      ) : null}
-      {marks.map(({ reference, icon, image }) => {
-        // The chosen image (see `preferKindImage`) once it has loaded; the kind's
-        // font icon until then, and if it fails.
-        const loaded = isLoaded(image);
-        return (
-          <ReqoreTag
-            key={
-              reference.reference_id ??
-              `${reference.interface_kind}:${reference.interface_name}`
-            }
-            icon={icon}
-            leftIconProps={loaded ? { 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>
-  );
-};