@qoretechnologies/reqraft 0.10.65 → 0.10.66-pr.145.g124fc92

package/src/components/supportTicket/ReferencePicker.tsx

@@ -4,8 +4,11 @@ import {
   ReqoreMenuItem,
   ReqoreModal,
   ReqoreSpinner,
+  useReqoreTheme,
 } from '@qoretechnologies/reqore';
 import { TReqoreBadge } from '@qoretechnologies/reqore/dist/components/Button';
+import { getReadableColor } from '@qoretechnologies/reqore/dist/helpers/colors';
+import { rgba } from 'polished';
 import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { thinScrollbar } from '../../helpers/scrollbar';
@@ -128,21 +131,22 @@ const Panes = styled.div`
  * instead keeps a focus cue without the box. The selector is scoped under this wrapper,
  * so it outranks Reqore's without `!important`.
  *
- * `$active` (the field has a query) holds the underline at full accent, so a filtered
- * list is legible as filtered at a glance — the same signal `intent='info'` carries on
- * a plain filter control, spoken in this surface's own accent.
+ * The line is the theme's neutral hairline, a step brighter on focus. Only `$active` (the
+ * field has a query) colours it, in `$accent` — blue by default, the same signal
+ * `intent='info'` carries on a plain filter control: blue says a filter is narrowing the
+ * list, and nothing else (instruction-files decision 001). It is never the product's
+ * purple, which a support surface does not wear (decision 002).
  */
-const Search = styled.div<{ $accent: string; $active?: boolean }>`
+const Search = styled.div<{ $accent: string; $line: string; $focus: string; $active?: boolean }>`
   padding: 6px 4px 4px;
-  border-bottom: 1px solid
-    ${({ $accent, $active }) => ($active ? $accent : `${$accent}80`)};
+  border-bottom: 1px solid ${({ $accent, $line, $active }) => ($active ? $accent : $line)};
   transition: border-color 0.15s ease-out;
 
   .reqore-control-wrapper:focus-within {
     outline: none;
   }
   &:focus-within {
-    border-bottom-color: ${({ $accent }) => $accent};
+    border-bottom-color: ${({ $accent, $focus, $active }) => ($active ? $accent : $focus)};
   }
 `;
 
@@ -152,8 +156,6 @@ const Note = styled.div`
   font-size: 12px;
 `;
 
-const DEFAULT_ACCENT = '#762f7e';
-
 /*
  * How a picked row reads: `info`, tinted rather than filled.
  *
@@ -241,7 +243,8 @@ export interface IReferencePickerProps {
    * vocabulary.
    */
   resolveKindLabel?: (kind: string) => string;
-  /** the underline / selected-kind colour. Defaults to the support surfaces' violet. */
+  /** the search underline's colour while the list is filtered. Defaults to the theme's
+   *  `info` blue — the colour that says a filter is narrowing a list. */
   accent?: string;
   /** shown above the panes — the composer's picked-reference chips, typically */
   header?: ReactNode;
@@ -303,13 +306,15 @@ export const ReferencePicker = ({
   disabled,
   resolveInterfaceIcon = defaultInterfaceIcon,
   resolveKindLabel = defaultInterfaceKindLabel,
-  accent = DEFAULT_ACCENT,
+  accent,
   header,
   onClose,
   title = 'Reference interfaces',
   layout = 'auto',
   presentation = 'auto',
 }: IReferencePickerProps) => {
+  const theme = useReqoreTheme();
+  const readable = getReadableColor(theme);
   const [query, setQuery] = useState<string>('');
   const needle = query.trim().toLowerCase();
 
@@ -510,7 +515,12 @@ export const ReferencePicker = ({
   const body = (
     <Frame ref={frameRef} $bare={asModal}>
       {header}
-      <Search $accent={accent} $active={!!needle}>
+      <Search
+        $accent={accent ?? theme.intents?.info ?? readable}
+        $line={rgba(readable, 0.2)}
+        $focus={rgba(readable, 0.5)}
+        $active={!!needle}
+      >
         <ReqoreInput
           value={query}
           onChange={(event) => setQuery((event.target as HTMLInputElement).value)}

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

@@ -53,7 +53,6 @@ const themed = (node: ReactNode) => (
 
 const refs = (
   <InterfaceReferenceTags
-    customTheme={{ main: 'custom1' }}
     references={[{ interface_kind: 'connection', interface_name: 'sftp-partner' }]}
   />
 );

package/src/components/supportTicket/TicketHeader.tsx

@@ -201,7 +201,8 @@ export const TicketHeader = ({
        and the strip would no longer line up with them. */
     rowPadding='tiny'
     labelWidth={LABEL_WIDTH}
-    uppercaseLabels
+    /* The labels' case is the theme's (`theme.uppercaseLabels`): an app that sets its
+       labels in sentence case gets "Opened by", not "OPENED BY". */
     flat
     transparent
     padded={false}

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

@@ -16,6 +16,19 @@ const meta = {
 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
@@ -27,7 +40,7 @@ export const Default: Story = {
     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, which calls onSend with the body and internal: false.",
+          "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.",
       },
     },
   },
@@ -39,6 +52,7 @@ export const Default: Story = {
     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(
@@ -59,7 +73,7 @@ export const StaffWithInternalNote: Story = {
     docs: {
       description: {
         story:
-          "Renders the staff composer with a split send button — the primary action posts a public reply, while the caret opens 'Add internal note', which sends with internal: true.",
+          "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.",
       },
     },
   },
@@ -72,6 +86,7 @@ export const StaffWithInternalNote: Story = {
 
     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');
@@ -122,8 +137,7 @@ export const RichHelpdeskReply: Story = {
       },
     },
   },
-  // Rendered under the Qorus theme (as in qorus-ide / admin-portal) so the
-  // `custom1` accent shows as the Qorus purple — a bare reqore theme greys it out.
+  // Rendered under the Qorus theme, as in qorus-ide / admin-portal.
   decorators: [
     (Story) => (
       <ReqoreUIProvider theme={{ main: '#121212', intents: { custom1: '#762f7e' } }}>
@@ -141,23 +155,15 @@ export const RichHelpdeskReply: Story = {
       { label: 'Take screenshot', icon: 'CameraAiLine', onClick: fn() },
       { label: 'Capture area', icon: 'CropLine', onClick: fn() },
     ],
-    // the reference toggle, styled to the same custom1 accent as the send
+    // the reference toggle: a quiet icon button, like the attach button beside it
     footerActions: (
-      <ReqoreButton
-        icon='LinksLine'
-        minimal
-        flat
-        badge={1}
-        customTheme={{ main: 'custom1' }}
-        tooltip='Reference interfaces'
-      />
+      <ReqoreButton icon='LinksLine' minimal flat badge={1} tooltip='Reference interfaces' />
     ),
-    // references on top of the editor (inside the bar), tinted to the accent — no
-    // "References" label, the chips read as the referenced interfaces on their own
+    // 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' }]}
-        customTheme={{ main: 'custom1' }}
       />
     ),
   },
@@ -176,7 +182,7 @@ export const RichHelpdeskReply: Story = {
 
 /**
  * Every referenceable interface kind on one message, so the per-kind icons +
- * accent chip styling can be reviewed together: workflow, service, job, fsm,
+ * 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.)
  */
@@ -185,7 +191,7 @@ export const AllReferenceTypes: Story = {
     docs: {
       description: {
         story:
-          'Renders a reply carrying every referenceable interface kind at once, so the per-kind icons and accent chip styling can be reviewed together (qog falls back to the generic glyph).',
+          '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).',
       },
     },
   },
@@ -202,7 +208,6 @@ export const AllReferenceTypes: Story = {
     defaultText: 'This one references every interface kind.',
     aboveInput: (
       <InterfaceReferenceTags
-        customTheme={{ main: 'custom1' }}
         references={[
           { interface_kind: 'workflow', interface_name: 'order-sync:1.2' },
           { interface_kind: 'service', interface_name: 'notifier' },
@@ -267,7 +272,6 @@ export const QogTriggerAppLogo: Story = {
     defaultText: 'These qogs are referenced by their trigger apps.',
     aboveInput: (
       <InterfaceReferenceTags
-        customTheme={{ main: 'custom1' }}
         references={[
           // resolved live from trigger_app (the customer/IDE path)
           { interface_kind: 'qog', interface_name: 'telegram-intake', trigger_app: 'Telegram' },
@@ -337,7 +341,6 @@ export const WithScreenshotAndReferences: Story = {
     defaultFiles: [screenshotFile()],
     aboveInput: (
       <InterfaceReferenceTags
-        customTheme={{ main: 'custom1' }}
         references={[
           { interface_kind: 'connection', interface_name: 'sftp-partner' },
           { interface_kind: 'qog', interface_name: 'telegram-intake', logo: appLogo('#2AABEE', 'T') },

package/src/components/supportTicket/TicketReplyBox.tsx

@@ -1,9 +1,29 @@
 import type { TReqoreDropdownItems } from '@qoretechnologies/reqore/dist/components/Dropdown/list';
 import { ReactNode } from 'react';
-import { Composer, IComposerSendAction, TComposerEditor } from '../composer/Composer';
+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 `{}`
@@ -96,16 +116,15 @@ export const TicketReplyBox = ({
         : 'Send reply';
 
   // Staff surface splits the send button; customer surface is a single "Send reply".
-  // Both use the Qonsole-style minimal `custom1` accent (the Composer default); the
-  // internal note stays amber (`warning`) so it can't be mistaken for a public 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',
-          minimal: true,
-          customTheme: { main: 'custom1' },
+          ...REPLY_SEND_STYLE,
         },
         {
           id: 'internal',
@@ -139,7 +158,10 @@ export const TicketReplyBox = ({
       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}

package/src/components/supportTicket/useLoadedImages.ts

@@ -66,6 +66,26 @@ export const useLoadedImages = (sources: Array<string | undefined>): ((src?: str
 export const whenImageSettled = (src: string): Promise<void> =>
   imageStatus.has(src) ? Promise.resolve() : loadImage(src);
 
+/**
+ * Resolves with `src` once it has loaded as an image, and rejects when it does not.
+ *
+ * A fetched attachment URL can resolve and still not be a picture — the server
+ * answered with an error page or an empty body — and an `<img>` handed it draws a
+ * broken picture. Chained after the fetch, this puts that case on the same path as
+ * a failed fetch, so every preview falls back to the file's name or its download
+ * chip. A rejected object URL is revoked here, since the caller never receives it.
+ */
+export const loadedImageUrl = async (src: string): Promise<string> => {
+  await whenImageSettled(src);
+  if (imageStatus.get(src) !== 'loaded') {
+    if (src.startsWith('blob:')) {
+      URL.revokeObjectURL(src);
+    }
+    throw new Error('The attachment is not an image that can be shown');
+  }
+  return src;
+};
+
 /** Forget every image's status. For tests only. */
 export const resetLoadedImagesForTests = (): void => {
   imageStatus.clear();

package/src/components/ticketReferences/TicketReferences.stories.tsx

@@ -2,6 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 
 import { StoryMeta } from '../../types';
+import { STORY_BROKEN_IMAGE } from '../supportTicket/__fixtures__/kindMarks';
 import { IInterfaceReference } from '../supportTicket/meta';
 import { ITicketReferenceAttachment, TicketReferences } from './TicketReferences';
 
@@ -215,6 +216,31 @@ export const NoPreview: Story = {
   },
 };
 
+/** A fetch that answers with bytes that are not a picture reads like a failed fetch. */
+export const PreviewThatDoesNotLoad: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the references view where one screenshot\'s bytes are not an image the browser can draw: that tile shows its file name, like a screenshot with no preview, while the others keep their thumbnails.',
+      },
+    },
+  },
+  args: {
+    fetchAttachmentUrl: (id: string) =>
+      Promise.resolve(id === 'img-1' ? STORY_BROKEN_IMAGE : IMG_URLS[id] ?? svgUrl(id, '#555555')),
+  },
+  play: async ({ canvasElement }) => {
+    const tile = (name: string) =>
+      canvasElement.querySelector<HTMLElement>(`button[title="${name}"]`);
+    // the screenshots that load are thumbnails …
+    await waitFor(() => expect(tile('pool-metrics.png')?.querySelector('img')).not.toBeNull());
+    // … and the one that does not is its file name, never a broken picture
+    await waitFor(() => expect(tile('error-screenshot.png')?.textContent).not.toContain('…'));
+    await expect(tile('error-screenshot.png')?.querySelector('img')).toBeNull();
+  },
+};
+
 /** Nothing attached or linked. */
 export const Empty: Story = {
   parameters: {

package/src/components/ticketReferences/TicketReferences.tsx

@@ -27,7 +27,7 @@ import {
   TResolveInterfaceIcon,
   TTicketViewerRole,
 } from '../supportTicket/meta';
-import { useLoadedImages } from '../supportTicket/useLoadedImages';
+import { loadedImageUrl, useLoadedImages } from '../supportTicket/useLoadedImages';
 import type { ITicketThreadAttachment, ITicketThreadMessage } from '../ticketThread/TicketThread';
 
 /*
@@ -241,7 +241,13 @@ const useImageUrls = (
     }
     let active = true;
     const created: string[] = [];
-    Promise.allSettled(ids.map((id) => fetchAttachmentUrl(id).then((url) => ({ id, url })))).then(
+    Promise.allSettled(
+      ids.map((id) =>
+        fetchAttachmentUrl(id)
+          .then(loadedImageUrl)
+          .then((url) => ({ id, url }))
+      )
+    ).then(
       (results) => {
         if (!active) {
           return;
@@ -324,11 +330,13 @@ const Thumb = styled.button`
   justify-content: center;
   position: relative;
   transition: border-color 0.15s;
+  /* A screenshot is something to read, not a hand-off to Qonsole, so its hover and focus
+     brighten the tile's own edge instead of wearing the product's purple (decision 002). */
   &:hover {
-    border-color: rgba(169, 116, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.35);
   }
   &:focus-visible {
-    outline: 2px solid #a974ff;
+    outline: 2px solid rgba(255, 255, 255, 0.6);
     outline-offset: 2px;
   }
   img {

package/src/components/ticketThread/TicketThread.stories.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 
 import { thinScrollbar } from '../../helpers/scrollbar';
 import { StoryMeta } from '../../types';
+import { STORY_BROKEN_IMAGE } from '../supportTicket/__fixtures__/kindMarks';
 import type { IInterfaceReference, TTicketMessageAuthor } from '../supportTicket/meta';
 import { ITicketThreadMessage, TicketThread } from './TicketThread';
 
@@ -159,6 +160,30 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+/**
+ * How coloured a message's card is: the saturation (0–1) of its border, the one place
+ * ReqoreBubble draws its tint. A neutral card is near 0; amber or purple is well above.
+ */
+const cardSaturation = (messageId: string): number => {
+  const bubble = document.getElementById(`ticket-message-${messageId}`);
+  if (!bubble) throw new Error(`message ${messageId} not rendered`);
+  const bordered = [bubble, ...Array.from(bubble.querySelectorAll<HTMLElement>('*'))].find((el) => {
+    const style = getComputedStyle(el);
+    return parseFloat(style.borderTopWidth) > 0 && style.borderTopStyle !== 'none';
+  });
+  if (!bordered) throw new Error(`message ${messageId} has no card border`);
+  const [r, g, b] = getComputedStyle(bordered).borderTopColor.match(/[\d.]+/g)!.map(Number);
+  const max = Math.max(r, g, b);
+  return max === 0 ? 0 : (max - Math.min(r, g, b)) / max;
+};
+
+/** Neither side of a conversation is tinted (no purple, no blue); only an internal note is. */
+const expectNeutralCards = async (ids: string[]) => {
+  for (const id of ids) {
+    await expect(cardSaturation(id)).toBeLessThan(0.2);
+  }
+};
+
 /**
  * The customer viewpoint: the customer's own messages sit on the right under
  * "You", staff appear under a masked "Qorus Support" label, and internal notes
@@ -170,7 +195,7 @@ export const CustomerView: Story = {
     docs: {
       description: {
         story:
-          "Renders the thread from the customer's viewpoint: the customer's own messages sit on the right under 'You', staff appear under the masked 'Qorus Support' label, internal notes are filtered out, and clicking an attachment chip calls onDownloadAttachment with its id and filename.",
+          "Renders the thread from the customer's viewpoint: the customer's own messages sit on the right under 'You', staff appear under the masked 'Qorus Support' label, both as neutral cards (the side and the label say who spoke), internal notes are filtered out, and clicking an attachment chip calls onDownloadAttachment with its id and filename.",
       },
     },
   },
@@ -186,6 +211,8 @@ export const CustomerView: Story = {
     await expect(canvas.getByText('Qorus Support')).toBeInTheDocument();
     // internal notes are filtered out for the customer
     await expect(canvas.queryByText('Internal note')).not.toBeInTheDocument();
+    // the side, the avatar and the label say who spoke; no card is tinted for it
+    await expectNeutralCards(['m1', 'm2']);
 
     await userEvent.click(canvas.getAllByText('deploy-trace.log')[0]);
     await waitFor(() =>
@@ -306,7 +333,7 @@ export const StaffView: Story = {
     docs: {
       description: {
         story:
-          "Renders the thread from the staff viewpoint: staff messages sit on the right, the customer on the left, and staff-only internal notes render amber and bordered under an 'Internal note' label.",
+          "Renders the thread from the staff viewpoint: staff messages sit on the right, the customer on the left, both as neutral cards, and staff-only internal notes render amber and bordered under an 'Internal note' label.",
       },
     },
   },
@@ -320,6 +347,9 @@ export const StaffView: Story = {
     await expect(canvas.getByText('Internal note')).toBeInTheDocument();
     await expect(canvas.getByText(/Support · nick/)).toBeInTheDocument();
     await expect(canvas.getByText(/Customer · acme/)).toBeInTheDocument();
+    // both sides are neutral cards; the internal note alone is amber
+    await expectNeutralCards(['m1', 'm2']);
+    await expect(cardSaturation('m3')).toBeGreaterThan(0.3);
     // the reference chip renders with the built-in default icon (no resolver passed)
     await expect(canvas.getByText('nightly-deploy:1.2')).toBeInTheDocument();
   },
@@ -749,6 +779,45 @@ export const ImagePreview: Story = {
   },
 };
 
+/**
+ * An image attachment whose bytes are not a picture — the server answered with an error
+ * page or an empty body — is a download chip like any other file, never a broken image.
+ */
+export const ImageThatDoesNotLoad: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders a message with two screenshots where one\'s bytes cannot be drawn: that one falls back to its download chip while the other stays a thumbnail.',
+      },
+    },
+  },
+  args: {
+    viewerRole: 'customer',
+    fetchAttachmentUrl: async (id: string) =>
+      id === 'img-1' ? STORY_BROKEN_IMAGE : screenshot('after', 205),
+    messages: [
+      {
+        message_id: 'img',
+        author_type: 'customer',
+        author_id: 'acme',
+        body: 'Here is the canvas before and after the upgrade:',
+        created: ago(6),
+        attachments: [
+          { attachment_id: 'img-1', filename: 'before.png', content_type: 'image/png', size_bytes: 512_000 },
+          { attachment_id: 'img-2', filename: 'after.png', content_type: 'image/png', size_bytes: 486_000 },
+        ],
+      },
+    ],
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await waitFor(() => expect(canvasElement.querySelector('img[alt="after.png"]')).not.toBeNull());
+    await waitFor(() => expect(canvas.getByRole('button', { name: /before\.png/ })).toBeInTheDocument());
+    await expect(canvasElement.querySelector('img[alt="before.png"]')).toBeNull();
+  },
+};
+
 /**
  * One message carrying the whole stack at once — a formatted body, image thumbnails,
  * file chips, and interface references — so the vertical order and spacing of all four

package/src/components/ticketThread/TicketThread.tsx

@@ -13,7 +13,7 @@ import {
 import { getReadableColor } from '@qoretechnologies/reqore/dist/helpers/colors';
 import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
 import { rgba } from 'polished';
-import { ComponentProps, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import styled from 'styled-components';
 import { formatBytes, isImage } from '../../helpers/common';
@@ -25,6 +25,7 @@ import {
   TTicketMessageAuthor,
   TTicketViewerRole,
 } from '../supportTicket';
+import { loadedImageUrl } from '../supportTicket/useLoadedImages';
 
 /*
  * Shared support-ticket conversation thread, used by every Qorus surface that
@@ -32,12 +33,11 @@ import {
  * the Qonsole `support-ticket` renderer. Presentational — data in, callbacks out
  * — so each consumer keeps its own fetch/websocket wiring.
  *
- * Rendered as a comment feed: an avatar beside a bordered, accent-tinted card per
+ * Rendered as a comment feed: an avatar beside a bordered, neutral card per
  * message, each hugging its own side. Built on Reqore's `ReqoreBubble` (which
- * supplies the avatar, the bold author label, the alignment and the tint), so the
- * accent follows whatever the host app themes `custom1` to rather than a colour
- * baked in here. Interface references render via the shared
- * `InterfaceReferenceTags`; the status/priority/category vocabularies live in
+ * supplies the avatar, the bold author label and the alignment). Interface
+ * references render via the shared `InterfaceReferenceTags`, as quiet tags with
+ * the kind's icon; the status/priority/category vocabularies live in
  * `../supportTicket/meta`.
  *
  * Runs of consecutive messages are wrapped in a `ReqoreBubbleGroup`, which prints
@@ -114,10 +114,11 @@ const AUTHOR_META: Record<TTicketMessageAuthor, IAuthorMeta> = {
   system: { icon: 'InformationLine' },
 };
 
-// Both sides share one accent: the side, the avatar and the author label already
-// carry who is speaking, which frees colour to mean "internal note" and nothing
-// else. `custom1` is a theme slot, so each host app supplies its own hue.
-const ACCENT: ComponentProps<typeof ReqoreBubble>['customTheme'] = { main: 'custom1' };
+// No side is tinted: the side, the avatar and the author label ("You", "Qorus
+// Support") already carry who is speaking, which leaves colour one job here —
+// amber for an internal note. Never the product's purple, which a support thread
+// does not wear (instruction-files decision 002: purple marks where you are, a
+// chart's accent, and Qonsole).
 
 /** Avatar glyph; an internal note carries the "not visible to the customer" eye. */
 const authorIcon = (message: ITicketThreadMessage): IReqoreIconName =>
@@ -444,6 +445,7 @@ const ImageThumb = ({
   useEffect(() => {
     let alive = true;
     fetchAttachmentUrl(attachment.attachment_id)
+      .then(loadedImageUrl)
       .then((resolved) => alive && setUrl(resolved))
       .catch(() => alive && setFailed(true));
     return () => {
@@ -666,23 +668,9 @@ export const TicketThread = ({
                 avatar={{ icon: authorIcon(message) }}
                 label={authorLabel(message, viewerRole)}
                 timestamp={message.created ? <ReqoreTimeAgo time={message.created} /> : undefined}
-                // Own messages read as info-blue, the other party's as the purple
-                // accent — so the two sides of the conversation are told apart by
-                // colour as well as by side, and "which of these did I write?" is
-                // answerable at a glance. Deliberately keyed off `viewerRole`, so it
-                // stays correct on the staff surface too (staff replies are the blue
-                // ones there). Internal notes keep their warning intent and are not
-                // re-tinted — they are neither side of the conversation.
-                intent={
-                  message.internal
-                    ? 'warning'
-                    : message.author_type === viewerRole
-                      ? 'info'
-                      : undefined
-                }
-                customTheme={
-                  message.internal || message.author_type === viewerRole ? undefined : ACCENT
-                }
+                // Both sides are neutral cards; an internal note is amber, so it can
+                // never be mistaken for a reply the customer sees.
+                intent={message.internal ? 'warning' : undefined}
                 flat={false}
                 minimal
               >
@@ -698,7 +686,6 @@ export const TicketThread = ({
                   <div style={{ marginTop: 8 }}>
                     <InterfaceReferenceTags
                       size='tiny'
-                      customTheme={ACCENT}
                       references={refsFor(message)}
                       resolveInterfaceIcon={resolveInterfaceIcon}
                       preferKindImage={preferKindImage}

package/src/helpers/allowedValues.ts

@@ -79,6 +79,25 @@ export const findAllowedValueOption = (
   );
 };
 
+/**
+ * The value a choice stands for, whichever of the three ways its entry is
+ * written (see `findAllowedValueOption`): the envelope's `value`, a bare
+ * `value`, or the entry's `name`.
+ *
+ * The row that names a stored choice and the validator that accepts it have
+ * always read all three. The pickers that WRITE a choice read only the
+ * envelope, so a list written bare showed nothing selected for the stored value
+ * and stored `undefined` when a choice was clicked: picking a pipeline
+ * processor's class cleared the field instead of setting it.
+ */
+export const allowedValueOf = (option: any): unknown => {
+  const value = option?.value;
+  if (value && typeof value === 'object' && !Array.isArray(value) && 'value' in value) {
+    return value.value;
+  }
+  return value !== undefined ? value : option?.name;
+};
+
 /**
  * A Slate rich-text document: a non-empty array of element nodes, each with
  * `children`. Told apart from a LIST value, which is an array of elements.