@qoretechnologies/reqraft 0.10.66-pr.145.gcb1e59d → 0.10.66

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

@@ -1,357 +0,0 @@
-import { ReqoreButton, ReqoreUIProvider } from '@qoretechnologies/reqore';
-import { StoryObj } from '@storybook/react-vite';
-import { expect, fn, screen, userEvent, waitFor, within } from 'storybook/test';
-import { StoryMeta } from '../../types';
-import { InterfaceReferenceTags } from './InterfaceReferenceTags';
-import { TicketReplyBox } from './TicketReplyBox';
-
-const meta = {
-  component: TicketReplyBox,
-  title: 'Components/TicketReplyBox',
-  args: {
-    onSend: fn(),
-  },
-} as StoryMeta<typeof TicketReplyBox>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * The reply is sent with the white primary, never the Qonsole purple: a ticket reply is not a
- * hand-off to Qonsole (instruction-files decision 002). Read from the drawn button, so a theme
- * or a default that brings the purple back fails here.
- */
-const expectWhiteSend = async (canvasElement: HTMLElement) => {
-  const send = within(canvasElement).getByText('Send reply').closest('button')!;
-  await waitFor(() => {
-    const [r, g, b] = getComputedStyle(send).backgroundColor.match(/\d+/g)!.map(Number);
-    expect(Math.min(r, g, b)).toBeGreaterThan(200);
-  });
-};
-
-/**
- * The customer composer, plain-editor variant (used here for a deterministic
- * type→send test): an attach button (no extra menu → a plain button, not a
- * dropdown) and Send. No internal-note toggle. Typing enables Send; clicking it
- * calls `onSend` with the body and `internal: false`.
- */
-export const Default: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders the customer composer's plain-editor variant — an attach button and Send, no internal-note toggle; typing a reply enables Send — the white primary, not the Qonsole purple — which calls onSend with the body and internal: false.",
-      },
-    },
-  },
-  args: { editor: 'plain' },
-  async play({ canvasElement, args }) {
-    const canvas = within(canvasElement);
-    const textarea = canvasElement.querySelector('textarea');
-    await expect(textarea).not.toBeNull();
-    await expect(canvas.queryByText('Internal note')).not.toBeInTheDocument();
-
-    await userEvent.type(textarea!, 'Here is my reply');
-    await expectWhiteSend(canvasElement);
-    await userEvent.click(canvas.getByText('Send reply'));
-    await waitFor(() =>
-      expect(args.onSend).toHaveBeenCalledWith(
-        'Here is my reply',
-        expect.objectContaining({ internal: false })
-      )
-    );
-  },
-};
-
-/**
- * The staff composer (`allowInternalNote`): no toggle — the send button splits, so
- * the primary action posts a public reply and the caret opens "Add internal note",
- * which sends with `internal: true`.
- */
-export const StaffWithInternalNote: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders the staff composer with a split send button — the primary action (white, not the Qonsole purple) posts a public reply, while the caret opens 'Add internal note', which sends with internal: true.",
-      },
-    },
-  },
-  args: { allowInternalNote: true, editor: 'plain' },
-  async play({ canvasElement, args }) {
-    const canvas = within(canvasElement);
-    // no toggle any more; the primary action is a plain "Send reply"
-    await expect(canvas.queryByText('Internal note')).not.toBeInTheDocument();
-    await expect(canvas.getByText('Send reply')).toBeInTheDocument();
-
-    const textarea = canvasElement.querySelector('textarea');
-    await userEvent.type(textarea!, 'internal context');
-    await expectWhiteSend(canvasElement);
-
-    // "Add internal note" lives behind the split-send caret
-    const caret = canvasElement.querySelector('.ticket-send-more');
-    await expect(caret).not.toBeNull();
-    await userEvent.click(caret as Element);
-    await userEvent.click(await screen.findByText('Add internal note'));
-
-    await waitFor(() =>
-      expect(args.onSend).toHaveBeenCalledWith(
-        'internal context',
-        expect.objectContaining({ internal: true })
-      )
-    );
-  },
-};
-
-/** A closed ticket replaces the editor with a muted notice. */
-export const Closed: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders a closed ticket, where the disabled composer replaces the editor with a muted 'ticket is closed' notice.",
-      },
-    },
-  },
-  args: { disabled: true },
-  async play({ canvasElement }) {
-    await expect(within(canvasElement).getByText(/ticket is closed/i)).toBeInTheDocument();
-    await expect(canvasElement.querySelector('textarea')).toBeNull();
-  },
-};
-
-/**
- * The helpdesk composer as it now ships: the shared `<Composer>` with the rich,
- * Qonsole-style editor (`ReqoreRichTextEditor`) instead of a plain textarea. Staff
- * split-send, an attach dropdown (Upload + injected screenshot/capture), the
- * reference-interfaces toggle, and a reference chip below — all through the same
- * slots. Markdown still flows to `onSend` as a plain string. This is the input the
- * helpdesk uses.
- */
-export const RichHelpdeskReply: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the shipping helpdesk composer with the rich Qonsole-style editor — staff split-send, an attach dropdown, a reference-interfaces toggle, and an interface reference chip above the input.',
-      },
-    },
-  },
-  // Rendered under the Qorus theme, as in qorus-ide / admin-portal.
-  decorators: [
-    (Story) => (
-      <ReqoreUIProvider theme={{ main: '#121212', intents: { custom1: '#762f7e' } }}>
-        <div style={{ padding: 20, background: '#121212' }}>
-          <Story />
-        </div>
-      </ReqoreUIProvider>
-    ),
-  ],
-  args: {
-    allowInternalNote: true,
-    defaultText:
-      "Thanks for the detailed report — we've reproduced the timeout and a fix is in review. In the meantime, can you confirm the datasource pool size configured for the sftp-partner connection?",
-    attachMenuItems: () => [
-      { label: 'Take screenshot', icon: 'CameraAiLine', onClick: fn() },
-      { label: 'Capture area', icon: 'CropLine', onClick: fn() },
-    ],
-    // the reference toggle: a quiet icon button, like the attach button beside it
-    footerActions: (
-      <ReqoreButton icon='LinksLine' minimal flat badge={1} tooltip='Reference interfaces' />
-    ),
-    // references on top of the editor (inside the bar), as quiet tags with the kind's
-    // icon — no "References" label, the chips read as the referenced interfaces on their own
-    aboveInput: (
-      <InterfaceReferenceTags
-        references={[{ interface_kind: 'connection', interface_name: 'sftp-partner' }]}
-      />
-    ),
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    // rich editor renders a Slate contenteditable (not a <textarea>) …
-    await expect(canvasElement.querySelector('[contenteditable="true"]')).not.toBeNull();
-    await expect(canvasElement.querySelector('textarea')).toBeNull();
-    // … the staff split-send caret is present …
-    await expect(canvasElement.querySelector('.ticket-send-more')).not.toBeNull();
-    // … and the reference chip renders on top (no "References" label).
-    await expect(canvas.getByText('sftp-partner')).toBeInTheDocument();
-    await expect(canvas.queryByText('References')).not.toBeInTheDocument();
-  },
-};
-
-/**
- * Every referenceable interface kind on one message, so the per-kind icons +
- * chip styling can be reviewed together: workflow, service, job, fsm,
- * connection, mapper, class, value-map, qog, ai-collection, ai-endpoint,
- * ai-guardrail. (`qog` has no built-in icon → the generic fallback.)
- */
-export const AllReferenceTypes: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders a reply carrying every referenceable interface kind at once, so the per-kind icons and chip styling can be reviewed together (qog falls back to the generic glyph).',
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <ReqoreUIProvider theme={{ main: '#121212', intents: { custom1: '#762f7e' } }}>
-        <div style={{ padding: 20, background: '#121212' }}>
-          <Story />
-        </div>
-      </ReqoreUIProvider>
-    ),
-  ],
-  args: {
-    defaultText: 'This one references every interface kind.',
-    aboveInput: (
-      <InterfaceReferenceTags
-        references={[
-          { interface_kind: 'workflow', interface_name: 'order-sync:1.2' },
-          { interface_kind: 'service', interface_name: 'notifier' },
-          { interface_kind: 'job', interface_name: 'nightly-recon' },
-          { interface_kind: 'fsm', interface_name: 'onboarding' },
-          { interface_kind: 'connection', interface_name: 'sftp-partner' },
-          { interface_kind: 'mapper', interface_name: 'csv-to-order' },
-          { interface_kind: 'class', interface_name: 'OrderUtils' },
-          { interface_kind: 'value-map', interface_name: 'country-codes' },
-          { interface_kind: 'qog', interface_name: 'daily-report' },
-          { interface_kind: 'ai-collection', interface_name: 'kb-support' },
-          { interface_kind: 'ai-endpoint', interface_name: 'gpt-router' },
-          { interface_kind: 'ai-guardrail', interface_name: 'pii-filter' },
-        ]}
-      />
-    ),
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByText('workflow')).toBeInTheDocument();
-    await expect(canvas.getByText('ai-guardrail')).toBeInTheDocument();
-  },
-};
-
-// Stand-in app logos (a coloured rounded square + initial) as data-URIs, so the
-// story needs no network. Real logos come from the app catalogue (`app.logo`).
-const appLogo = (hex: string, letter: string) =>
-  `data:image/svg+xml,${encodeURIComponent(
-    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="6" fill="${hex}"/><text x="12" y="17" font-size="13" font-family="sans-serif" font-weight="bold" fill="#fff" text-anchor="middle">${letter}</text></svg>`
-  )}`;
-const APP_LOGOS: Record<string, string> = {
-  Telegram: appLogo('#2AABEE', 'T'),
-  Stripe: appLogo('#635BFF', 'S'),
-};
-
-/**
- * Faithful qog icons — a qog referenced by its trigger app shows that app's logo,
- * exactly like the qogs list. The customer's IDE resolves it live from the
- * reference's `trigger_app` via `resolveInterfaceImage` (it has the app catalogue);
- * a stored `logo` travels to viewers that don't (staff triage, the Qonsole card).
- * A qog with no trigger app falls back to the qog glyph.
- */
-export const QogTriggerAppLogo: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders qogs referenced by their trigger apps, each showing that app's logo — resolved live via resolveInterfaceImage or from a stored logo — while a qog with no trigger app falls back to the qog glyph.",
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <ReqoreUIProvider theme={{ main: '#121212', intents: { custom1: '#762f7e' } }}>
-        <div style={{ padding: 20, background: '#121212' }}>
-          <Story />
-        </div>
-      </ReqoreUIProvider>
-    ),
-  ],
-  args: {
-    defaultText: 'These qogs are referenced by their trigger apps.',
-    aboveInput: (
-      <InterfaceReferenceTags
-        references={[
-          // resolved live from trigger_app (the customer/IDE path)
-          { interface_kind: 'qog', interface_name: 'telegram-intake', trigger_app: 'Telegram' },
-          { interface_kind: 'qog', interface_name: 'stripe-billing', trigger_app: 'Stripe' },
-          // stored logo travels to viewers without the app catalogue (staff / Qonsole)
-          { interface_kind: 'qog', interface_name: 'slack-alerts', logo: appLogo('#4A154B', 'S') },
-          // no trigger app → the qog glyph fallback
-          { interface_kind: 'qog', interface_name: 'manual-recon' },
-        ]}
-        resolveInterfaceImage={(ref) => (ref.trigger_app ? APP_LOGOS[ref.trigger_app] : undefined)}
-      />
-    ),
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByText('telegram-intake')).toBeInTheDocument();
-    // the trigger-app / stored-logo qogs render their app logo image once it has
-    // loaded (the qog glyph stands in until then)
-    await waitFor(() =>
-      expect(canvasElement.querySelectorAll('.reqore-tag img').length).toBe(3)
-    );
-  },
-};
-
-// A stand-in "screenshot" as an SVG File so the story needs no real capture — the
-// composer's attachment strip renders any image File as a thumbnail (the real IDE
-// stages a PNG from captureScreenshot / captureRegion the same way).
-const screenshotFile = () => {
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="260" height="150" viewBox="0 0 260 150">
-    <rect width="260" height="150" rx="8" fill="#0f0b16"/>
-    <rect width="260" height="26" fill="#1c1428"/>
-    <circle cx="16" cy="13" r="4" fill="#ff5f57"/><circle cx="32" cy="13" r="4" fill="#febc2e"/><circle cx="48" cy="13" r="4" fill="#28c840"/>
-    <rect x="16" y="44" width="110" height="12" rx="3" fill="#8e39a0"/>
-    <rect x="16" y="68" width="228" height="9" rx="3" fill="#2c2440"/>
-    <rect x="16" y="86" width="200" height="9" rx="3" fill="#2c2440"/>
-    <rect x="16" y="104" width="170" height="9" rx="3" fill="#2c2440"/>
-    <rect x="16" y="122" width="92" height="9" rx="3" fill="#2c2440"/>
-  </svg>`;
-  return new File([svg], 'region-capture.svg', { type: 'image/svg+xml' });
-};
-
-/**
- * A composed reply with both a staged screenshot (the attachment strip renders any
- * image File as a thumbnail — the real IDE stages a PNG from Take-screenshot /
- * Capture-area) and interface references on top.
- */
-export const WithScreenshotAndReferences: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders a composed reply carrying both a staged screenshot thumbnail in the attachment strip and interface references above the input.',
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <ReqoreUIProvider theme={{ main: '#121212', intents: { custom1: '#762f7e' } }}>
-        <div style={{ padding: 20, background: '#121212' }}>
-          <Story />
-        </div>
-      </ReqoreUIProvider>
-    ),
-  ],
-  args: {
-    defaultText: "Here's the timeout I'm seeing on the nightly run — screenshot attached.",
-    defaultFiles: [screenshotFile()],
-    aboveInput: (
-      <InterfaceReferenceTags
-        references={[
-          { interface_kind: 'connection', interface_name: 'sftp-partner' },
-          { interface_kind: 'qog', interface_name: 'telegram-intake', logo: appLogo('#2AABEE', 'T') },
-        ]}
-      />
-    ),
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    // the staged screenshot thumbnail (an <img>) and the references both render
-    await expect(canvasElement.querySelector('img')).not.toBeNull();
-    await expect(canvas.getByText('sftp-partner')).toBeInTheDocument();
-  },
-};

package/src/components/supportTicket/TicketReplyBox.tsx

@@ -1,172 +0,0 @@
-import type { TReqoreDropdownItems } from '@qoretechnologies/reqore/dist/components/Dropdown/list';
-import { ReactNode } from 'react';
-import {
-  Composer,
-  IComposerProps,
-  IComposerSendAction,
-  TComposerEditor,
-} from '../composer/Composer';
-import { fileToAttachment as defaultFileToAttachment } from './fileToAttachment';
-import { IAttachmentUpload } from './meta';
-
-/**
- * A ticket reply is not a hand-off to Qonsole, so it does not wear Qonsole's look: no purple
- * bar, no purple send (instruction-files decision 002 — a purple button means "this hands the
- * work to Qonsole / AI" and nothing else). The bar keeps the composer's shape with the theme's
- * own neutral edge (its `main`, a step lighter — how Reqore draws its dividers), and sending
- * the reply is the surface's one primary action: white.
- */
-const REPLY_BOX_EFFECT: IComposerProps['effect'] = {
-  gradient: { direction: 'to bottom right', colors: 'main:lighten:3' },
-};
-const REPLY_SEND_STYLE: Pick<IComposerSendAction, 'intent' | 'minimal'> = {
-  intent: 'white',
-  minimal: false,
-};
-
-/**
- * The `items` shape ReqoreDropdown accepts. Named, not derived: `ReqoreDropdown`
- * is a generic component, and `ComponentProps` of a generic resolves to `{}`
- * under strict checking — so the derived type had no `items` at all.
- */
-type TAttachMenuItems = TReqoreDropdownItems;
-
-export interface ITicketReplyBoxProps {
-  /** Send the composed message. `internal` is only ever true when
-   *  `allowInternalNote` is set (the staff surface). */
-  onSend: (
-    body: string,
-    options: { internal: boolean; attachments?: IAttachmentUpload[] }
-  ) => void | Promise<void>;
-  /** File → base64 upload conversion; defaults to the shared `fileToAttachment`. */
-  fileToAttachment?: (file: File) => Promise<IAttachmentUpload>;
-  /** the send round-trip is in flight */
-  sending?: boolean;
-  /** the ticket can't be replied to (e.g. closed) — renders a notice instead */
-  disabled?: boolean;
-  disabledReason?: string;
-  /** placeholder text. (A function is called with `false` — the mode is chosen at
-   *  send time, so there is no live internal-note mode.) */
-  placeholder?: string | ((internal: boolean) => string);
-  /** send labels; a function is called with `false` for the primary "Send reply"
-   *  and `true` for the "Add internal note" split-menu item. Defaults to
-   *  "Send reply" / "Add internal note". */
-  sendLabel?: string | ((internal: boolean) => string);
-  /** Staff surface: split the send button so it also offers "Add internal note"
-   *  (customer composers omit it and just send a reply). */
-  allowInternalNote?: boolean;
-  /** Extra attach-menu entries beyond "Upload files" — e.g. the IDE's screenshot /
-   *  region capture. Receives the composer's `addFiles`. With any entry the attach
-   *  control becomes a dropdown; otherwise it's a plain button. */
-  attachMenuItems?: (addFiles: (files: File[]) => void) => TAttachMenuItems;
-  /** Extra footer controls left of the send button — e.g. the IDE's
-   *  reference-interfaces toggle. */
-  footerActions?: ReactNode;
-  /** Rendered on top of the editor, inside the bar — e.g. reference chips. */
-  aboveInput?: ReactNode;
-  /** Rendered below the editor — e.g. the IDE's interface-reference picker. */
-  belowInput?: ReactNode;
-  /** Editor flavour. Helpdesk uses the rich, Qonsole-style editor by default; pass
-   *  `plain` for a simple textarea (e.g. deterministic play tests). */
-  editor?: TComposerEditor;
-  /** Initial draft text to seed the editor with (e.g. a restored draft). */
-  defaultText?: string;
-  /** Initial staged files (e.g. a restored draft's attachments, or a demo). */
-  defaultFiles?: File[];
-}
-
-/**
- * The shared ticket reply composer — now a thin adapter over the universal
- * `<Composer>` (the input extracted from qorus-ide's Qonsole chat). It maps the
- * ticket vocabulary onto the composer: the staff `allowInternalNote` becomes a
- * split send (primary "Send reply" + a caret "Add internal note", mode chosen at
- * send time), and staged files convert to `IAttachmentUpload[]` via
- * `fileToAttachment` before `onSend`. App-specific affordances still arrive
- * through slots (`attachMenuItems`, `footerActions`, `belowInput`), so the
- * IDE-only bits (screenshot capture, the reference picker) stay in qorus-ide. A
- * closed ticket renders a muted notice.
- */
-export const TicketReplyBox = ({
-  onSend,
-  fileToAttachment = defaultFileToAttachment,
-  sending,
-  disabled,
-  disabledReason = 'This ticket is closed. Open a new ticket to continue the conversation.',
-  placeholder = 'Write a reply…',
-  sendLabel,
-  allowInternalNote,
-  attachMenuItems,
-  footerActions,
-  aboveInput,
-  belowInput,
-  editor = 'rich',
-  defaultText,
-  defaultFiles,
-}: ITicketReplyBoxProps) => {
-  const resolvedPlaceholder =
-    typeof placeholder === 'function' ? placeholder(false) : placeholder;
-  // Label for a given send mode: `false` = public reply, `true` = internal note.
-  const labelFor = (note: boolean): string =>
-    sendLabel !== undefined
-      ? typeof sendLabel === 'function'
-        ? sendLabel(note)
-        : sendLabel
-      : note
-        ? 'Add internal note'
-        : 'Send reply';
-
-  // Staff surface splits the send button; customer surface is a single "Send reply".
-  // Both send the reply as the white primary (`REPLY_SEND_STYLE`); the internal note
-  // stays amber (`warning`) so it can't be mistaken for a public reply.
-  const sendActions: IComposerSendAction[] | undefined = allowInternalNote
-    ? [
-        {
-          id: 'reply',
-          label: labelFor(false),
-          icon: 'SendPlane2Line',
-          ...REPLY_SEND_STYLE,
-        },
-        {
-          id: 'internal',
-          label: labelFor(true),
-          icon: 'StickyNoteLine',
-          minimal: true,
-          intent: 'warning',
-        },
-      ]
-    : undefined;
-
-  const handleSend = async (
-    body: string,
-    { files, action }: { files: File[]; action?: string }
-  ): Promise<void> => {
-    const internal = action === 'internal';
-    const attachments = files.length
-      ? await Promise.all(files.map(fileToAttachment))
-      : undefined;
-    await onSend(body, { internal, attachments });
-  };
-
-  return (
-    <Composer
-      editor={editor}
-      defaultText={defaultText}
-      defaultFiles={defaultFiles}
-      placeholder={resolvedPlaceholder}
-      sending={sending}
-      disabled={disabled}
-      disabledReason={disabledReason}
-      onSend={handleSend}
-      sendLabel={labelFor(false)}
-      sendIntent={REPLY_SEND_STYLE.intent}
-      sendMinimal={REPLY_SEND_STYLE.minimal}
-      sendActions={sendActions}
-      effect={REPLY_BOX_EFFECT}
-      sendMenuClassName='ticket-send-more'
-      attachMenuItems={attachMenuItems}
-      footerActions={footerActions}
-      aboveInput={aboveInput}
-      belowInput={belowInput}
-    />
-  );
-};

package/src/components/supportTicket/__fixtures__/kindMarks.ts

@@ -1,28 +0,0 @@
-import { defaultInterfaceIcon, TInterfaceKindIcon } from '../meta';
-
-/* Stand-ins for a host's kind marks in stories. Inline, so they load offline. */
-
-/** A green Qog-like mark: loads. */
-export const STORY_QOG_IMAGE = `data:image/svg+xml;utf8,${encodeURIComponent(
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="6" fill="#2e9d4f"/><circle cx="12" cy="12" r="5" fill="#fff"/></svg>'
-)}`;
-
-/** A trigger app's logo: loads. */
-export const STORY_APP_LOGO = `data:image/svg+xml;utf8,${encodeURIComponent(
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="12" fill="#229ed9"/></svg>'
-)}`;
-
-/** An image that can never load (malformed data URI). */
-export const STORY_BROKEN_IMAGE = 'data:image/png;base64,not-an-image';
-
-/** The IDE's resolver: a Qog is its green mark (font icon fallback); the rest, font icons. */
-export const storyKindMark = (kind: string): TInterfaceKindIcon =>
-  kind === 'fsm' || kind === 'qog' ?
-    { icon: 'FlowChart', image: STORY_QOG_IMAGE }
-  : defaultInterfaceIcon(kind);
-
-/** The same, with a Qog image that fails to load. */
-export const storyBrokenKindMark = (kind: string): TInterfaceKindIcon =>
-  kind === 'fsm' || kind === 'qog' ?
-    { icon: 'FlowChart', image: STORY_BROKEN_IMAGE }
-  : defaultInterfaceIcon(kind);

package/src/components/supportTicket/attachmentAccess.ts

@@ -1,97 +0,0 @@
-/*
- * Authed attachment byte-fetching, shared by every ticket surface.
- *
- * Attachment bytes can't go through the JSON fetch helpers, so each app grew its
- * own raw-`fetch` copy: qorus-ide in `views/support/api.ts`, admin-portal in
- * `pages/SupportTickets/helpers.ts`. The two were the same function down to the
- * error text ("Could not download the attachment") and the anchor-click dance —
- * they differed only in how the URL is built, which auth header is sent, and
- * which Error subclass is thrown.
- *
- * Those three differences are the parameters below. Everything else — the
- * non-OK check, `URL.createObjectURL`, the temporary anchor, revoking the object
- * URL — lives here once.
- */
-
-export interface ITicketAttachmentAccessConfig {
-  /** Absolute URL for one attachment's bytes. */
-  attachmentUrl: (ticketId: string, attachmentId: string) => string;
-  /**
-   * Headers for the byte request — typically auth. A function rather than a
-   * value because tokens are resolved per request, not at wire-up time.
-   */
-  headers?: () => Record<string, string>;
-  /**
-   * Error to throw on a non-OK response. Defaults to a plain `Error`; apps with
-   * their own API error type (carrying the status) pass a factory.
-   */
-  onError?: (message: string, status: number) => Error;
-}
-
-export interface ITicketAttachmentAccess {
-  /** Raw bytes. `failure` is the message used if the response isn't OK. */
-  fetchBlob: (ticketId: string, attachmentId: string, failure?: string) => Promise<Blob>;
-  /**
-   * An object URL for the bytes — for inline thumbnails and the lightbox.
-   *
-   * The caller owns the returned URL and must `URL.revokeObjectURL` it when the
-   * element goes away; this cannot do it for them without breaking the img.
-   */
-  fetchBlobUrl: (ticketId: string, attachmentId: string) => Promise<string>;
-  /** Save the attachment to disk under its original filename. */
-  download: (ticketId: string, attachmentId: string, filename: string) => Promise<void>;
-}
-
-const DEFAULT_DOWNLOAD_FAILURE = 'Could not download the attachment';
-const DEFAULT_LOAD_FAILURE = 'Could not load the attachment';
-
-/**
- * Save a blob to disk under `filename`, via a temporary anchor.
- *
- * Exported because it is the half of `download` that has nothing to do with
- * tickets — a surface that already holds the bytes shouldn't have to re-fetch
- * them just to reuse the save behaviour.
- */
-export const saveBlobAs = (blob: Blob, filename: string): void => {
-  const url = URL.createObjectURL(blob);
-  const anchor = document.createElement('a');
-
-  anchor.href = url;
-  anchor.download = filename;
-  document.body.appendChild(anchor);
-  anchor.click();
-  anchor.remove();
-  // Safari needs the URL alive until the click is processed; a task boundary is
-  // enough and avoids leaking the blob for the life of the document.
-  setTimeout(() => URL.revokeObjectURL(url), 0);
-};
-
-export const createTicketAttachmentAccess = ({
-  attachmentUrl,
-  headers,
-  onError,
-}: ITicketAttachmentAccessConfig): ITicketAttachmentAccess => {
-  const fetchBlob = async (
-    ticketId: string,
-    attachmentId: string,
-    failure: string = DEFAULT_LOAD_FAILURE
-  ): Promise<Blob> => {
-    const response = await fetch(attachmentUrl(ticketId, attachmentId), {
-      headers: headers?.() ?? {},
-    });
-
-    if (!response.ok) {
-      throw onError ? onError(failure, response.status) : new Error(failure);
-    }
-
-    return response.blob();
-  };
-
-  return {
-    fetchBlob,
-    fetchBlobUrl: async (ticketId, attachmentId) =>
-      URL.createObjectURL(await fetchBlob(ticketId, attachmentId, DEFAULT_LOAD_FAILURE)),
-    download: async (ticketId, attachmentId, filename) =>
-      saveBlobAs(await fetchBlob(ticketId, attachmentId, DEFAULT_DOWNLOAD_FAILURE), filename),
-  };
-};

package/src/components/supportTicket/fileToAttachment.ts

@@ -1,24 +0,0 @@
-import { IAttachmentUpload } from './meta';
-
-/**
- * Read a picked `File` into the inline base64 upload shape the support API expects
- * (the SaaS plane accepts attachments as base64 on the create/reply payload, with
- * no separate multipart upload). Shared by every composer so the customer and
- * staff surfaces encode files identically.
- */
-export const fileToAttachment = (file: File): Promise<IAttachmentUpload> =>
-  new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onerror = () => reject(new Error(`Could not read ${file.name}`));
-    reader.onload = () => {
-      // reader.result is a data URL: "data:<type>;base64,<content>"
-      const result = String(reader.result);
-      const content = result.slice(result.indexOf(',') + 1);
-      resolve({
-        filename: file.name,
-        content_type: file.type || 'application/octet-stream',
-        content,
-      });
-    };
-    reader.readAsDataURL(file);
-  });