@qoretechnologies/reqraft 0.10.8 → 0.10.9-pr.74.g452d4d3

package/dist/components/ticketThread/TicketThread.js

@@ -0,0 +1,137 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TicketThread = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var reqore_1 = require("@qoretechnologies/reqore");
+var react_markdown_1 = __importDefault(require("react-markdown"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var supportTicket_1 = require("../supportTicket");
+var AUTHOR_META = {
+    customer: { icon: 'User3Line' },
+    staff: { icon: 'CustomerService2Line' },
+    system: { icon: 'InformationLine' },
+};
+/** Compact relative-time label from an ISO timestamp. */
+var timeAgo = function (iso) {
+    if (!iso) {
+        return '';
+    }
+    var then = new Date(iso).getTime();
+    if (Number.isNaN(then)) {
+        return '';
+    }
+    var seconds = Math.round((then - Date.now()) / 1000);
+    var rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
+    var units = [
+        ['year', 31536000],
+        ['month', 2592000],
+        ['week', 604800],
+        ['day', 86400],
+        ['hour', 3600],
+        ['minute', 60],
+        ['second', 1],
+    ];
+    for (var _i = 0, units_1 = units; _i < units_1.length; _i++) {
+        var _a = units_1[_i], unit = _a[0], per = _a[1];
+        if (Math.abs(seconds) >= per || unit === 'second') {
+            return rtf.format(Math.round(seconds / per), unit);
+        }
+    }
+    return '';
+};
+/** Human-readable file size, e.g. "12.3 KB". */
+var formatBytes = function (bytes) {
+    if (bytes < 1024) {
+        return "".concat(bytes, " B");
+    }
+    var units = ['KB', 'MB', 'GB'];
+    var value = bytes / 1024;
+    var unit = 0;
+    while (value >= 1024 && unit < units.length - 1) {
+        value /= 1024;
+        unit += 1;
+    }
+    return "".concat(value.toFixed(1), " ").concat(units[unit]);
+};
+/** The label shown above a run of messages. Customer view masks staff identity as
+ *  "Qorus Support"; staff view shows the real author with a role prefix. Internal
+ *  notes always label as "Internal note" regardless of viewer. */
+var authorLabel = function (message, viewerRole) {
+    if (message.internal) {
+        return 'Internal note';
+    }
+    if (viewerRole === 'customer') {
+        return message.author_type === 'customer' ? 'You' : 'Qorus Support';
+    }
+    return "".concat(message.author_type === 'staff' ? 'Support' : 'Customer', " \u00B7 ").concat(message.author_id);
+};
+/** Per-role bubble tint: staff green, customer blue, internal notes amber. */
+var bubbleIntent = function (message) {
+    if (message.internal) {
+        return 'warning';
+    }
+    return message.author_type === 'staff' ? 'success' : 'info';
+};
+var StyledThread = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  width: 100%;\n"])));
+// System messages read as a centered muted note between bubble clusters; the
+// nested rule flattens react-markdown's own <p> margins so it sits on one line.
+var StyledSystemRow = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  font-size: 11px;\n  opacity: 0.55;\n  text-align: center;\n  p {\n    margin: 0;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  font-size: 11px;\n  opacity: 0.55;\n  text-align: center;\n  p {\n    margin: 0;\n  }\n"])));
+/** The inner content of a message bubble: an optional author label (shown once
+ *  per same-author run), the markdown body, attachment chips, and reference chips. */
+var BubbleContent = function (_a) {
+    var _b, _c;
+    var message = _a.message, showLabel = _a.showLabel, viewerRole = _a.viewerRole, onDownloadAttachment = _a.onDownloadAttachment, resolveInterfaceIcon = _a.resolveInterfaceIcon, onInterfaceClick = _a.onInterfaceClick;
+    var isInternal = !!message.internal;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showLabel ? ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { verticalAlign: 'center', gapSize: 'tiny', style: { marginBottom: 4 }, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: isInternal ? 'EyeOffLine' : AUTHOR_META[message.author_type].icon, size: 'tiny' }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { size: 'small', effect: { weight: 'bold', opacity: 0.7 }, children: authorLabel(message, viewerRole) })] })) : null, (0, jsx_runtime_1.jsx)(react_markdown_1.default, { children: message.body }), ((_b = message.attachments) === null || _b === void 0 ? void 0 : _b.length) ? ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreControlGroup, { wrap: true, gapSize: 'small', style: { marginTop: 8 }, children: message.attachments.map(function (a) { return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { icon: 'Download2Line', size: 'small', flat: true, badge: formatBytes(a.size_bytes), tooltip: "".concat(a.content_type, " \u00B7 download"), onClick: function () { return onDownloadAttachment === null || onDownloadAttachment === void 0 ? void 0 : onDownloadAttachment(a.attachment_id, a.filename); }, children: a.filename }, a.attachment_id)); }) })) : null, ((_c = message.referenced_interfaces) === null || _c === void 0 ? void 0 : _c.length) ? ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: 8 }, children: (0, jsx_runtime_1.jsx)(supportTicket_1.InterfaceReferenceTags, { references: message.referenced_interfaces, resolveInterfaceIcon: resolveInterfaceIcon, onInterfaceClick: onInterfaceClick }) })) : null] }));
+};
+/** Split the thread into centered system lines and runs of consecutive
+ *  non-system messages (each run becomes one auto-clustered bubble group). */
+var toSegments = function (messages) {
+    var segments = [];
+    for (var _i = 0, messages_1 = messages; _i < messages_1.length; _i++) {
+        var message = messages_1[_i];
+        if (message.author_type === 'system') {
+            segments.push({ kind: 'system', message: message });
+            continue;
+        }
+        var last = segments[segments.length - 1];
+        if ((last === null || last === void 0 ? void 0 : last.kind) === 'bubbles') {
+            last.messages.push(message);
+        }
+        else {
+            segments.push({ kind: 'bubbles', messages: [message] });
+        }
+    }
+    return segments;
+};
+var TicketThread = function (_a) {
+    var messages = _a.messages, _b = _a.viewerRole, viewerRole = _b === void 0 ? 'customer' : _b, loading = _a.loading, onDownloadAttachment = _a.onDownloadAttachment, resolveInterfaceIcon = _a.resolveInterfaceIcon, onInterfaceClick = _a.onInterfaceClick;
+    if (loading) {
+        return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreControlGroup, { vertical: true, fluid: true, horizontalAlign: 'center', style: { padding: '24px 0' }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreSpinner, { type: 5, iconColor: 'info', size: 'big', children: "Loading conversation\u2026" }) }));
+    }
+    if (!messages.length) {
+        return (0, jsx_runtime_1.jsx)(reqore_1.ReqoreEmptyState, { icon: 'Chat3Line', title: 'No messages yet' });
+    }
+    return ((0, jsx_runtime_1.jsxs)(StyledThread, { children: [toSegments(messages).map(function (segment, index) {
+                return segment.kind === 'system' ? ((0, jsx_runtime_1.jsxs)(StyledSystemRow, { children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'InformationLine', size: 'tiny' }), (0, jsx_runtime_1.jsx)(react_markdown_1.default, { children: segment.message.body })] }, segment.message.message_id)) : ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreBubbleGroup, { children: segment.messages.map(function (message, i) {
+                        var previous = segment.messages[i - 1];
+                        // Label once per same-author run; an internal note always gets its
+                        // own label even from the same staff author.
+                        var showLabel = !previous ||
+                            previous.author_type !== message.author_type ||
+                            !!previous.internal !== !!message.internal;
+                        var isSelf = message.author_type === viewerRole;
+                        return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreBubble, { align: isSelf ? 'right' : 'left', intent: bubbleIntent(message), minimal: !message.internal, flat: !message.internal, timestamp: timeAgo(message.created) || undefined, children: (0, jsx_runtime_1.jsx)(BubbleContent, { message: message, showLabel: showLabel, viewerRole: viewerRole, onDownloadAttachment: onDownloadAttachment, resolveInterfaceIcon: resolveInterfaceIcon, onInterfaceClick: onInterfaceClick }) }, message.message_id));
+                    }) }, "group-".concat(index)));
+            }), (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreP, { size: 'tiny', effect: { opacity: 0.5, textAlign: 'center' }, children: [messages.length, " message", messages.length === 1 ? '' : 's'] })] }));
+};
+exports.TicketThread = TicketThread;
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=TicketThread.js.map

package/dist/components/ticketThread/TicketThread.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TicketThread.js","sourceRoot":"","sources":["../../../src/components/ticketThread/TicketThread.tsx"],"names":[],"mappings":"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"}

package/dist/components/ticketThread/index.d.ts

@@ -0,0 +1,3 @@
+export { TicketThread } from './TicketThread';
+export type { ITicketThreadAttachment, ITicketThreadMessage, ITicketThreadProps, } from './TicketThread';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ticketThread/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ticketThread/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EACV,uBAAuB,EACvB,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,gBAAgB,CAAC"}

package/dist/components/ticketThread/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TicketThread = void 0;
+var TicketThread_1 = require("./TicketThread");
+Object.defineProperty(exports, "TicketThread", { enumerable: true, get: function () { return TicketThread_1.TicketThread; } });
+//# sourceMappingURL=index.js.map

package/dist/components/ticketThread/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ticketThread/index.ts"],"names":[],"mappings":";;;AAAA,+CAA8C;AAArC,4GAAA,YAAY,OAAA"}

package/dist/index.d.ts

@@ -20,4 +20,6 @@ export type { ILspCompletionItem, ILspDiagnostic, ILspMarkupContent, ILspParamet
 export * from './components/smartEditor';
 export * from './components/dpqlEditor';
 export * from './components/qonsoleSmartInput';
+export * from './components/supportTicket';
+export * from './components/ticketThread';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EACL,aAAa,EACb,uBAAuB,EACvB,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,4BAA4B,EAC5B,gCAAgC,GACjC,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,GACjB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,YAAY,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,cAAc,mCAAmC,CAAC;AAClD,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,kBAAkB,GACnB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,gBAAgB,IAAI,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAC/F,YAAY,EACV,YAAY,EACZ,iBAAiB,GAClB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,YAAY,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAClE,YAAY,EACV,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,wBAAwB,EACxB,YAAY,EACZ,SAAS,EACT,iBAAiB,EACjB,wBAAwB,EACxB,sBAAsB,EACtB,iBAAiB,EACjB,wBAAwB,EACxB,YAAY,EACZ,gBAAgB,GACjB,MAAM,yBAAyB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EACL,aAAa,EACb,uBAAuB,EACvB,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,4BAA4B,EAC5B,gCAAgC,GACjC,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,GACjB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,YAAY,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,cAAc,mCAAmC,CAAC;AAClD,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,kBAAkB,GACnB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,gBAAgB,IAAI,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAC/F,YAAY,EACV,YAAY,EACZ,iBAAiB,GAClB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,YAAY,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAClE,YAAY,EACV,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,wBAAwB,EACxB,YAAY,EACZ,SAAS,EACT,iBAAiB,EACjB,wBAAwB,EACxB,sBAAsB,EACtB,iBAAiB,EACjB,wBAAwB,EACxB,YAAY,EACZ,gBAAgB,GACjB,MAAM,yBAAyB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC"}

package/dist/index.js

@@ -46,4 +46,6 @@ Object.defineProperty(exports, "ReqraftLspClient", { enumerable: true, get: func
 __exportStar(require("./components/smartEditor"), exports);
 __exportStar(require("./components/dpqlEditor"), exports);
 __exportStar(require("./components/qonsoleSmartInput"), exports);
+__exportStar(require("./components/supportTicket"), exports);
+__exportStar(require("./components/ticketThread"), exports);
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,oDAAkC;AAClC,uDAAqC;AACrC,qDAQ+B;AAP7B,4GAAA,aAAa,OAAA;AACb,sHAAA,uBAAuB,OAAA;AACvB,yGAAA,UAAU,OAAA;AACV,+GAAA,gBAAgB,OAAA;AAChB,6GAAA,cAAc,OAAA;AACd,2HAAA,4BAA4B,OAAA;AAC5B,+HAAA,gCAAgC,OAAA;AAGlC,+CAAqD;AAA5C,mGAAA,WAAW,OAAA;AAQpB,sDAAqD;AAA5C,oGAAA,QAAQ,OAAA;AAEjB,4DAAkE;AAAzD,+GAAA,iBAAiB,OAAA;AAE1B,oEAAkD;AAClD,+DAIqC;AAHnC,oHAAA,iBAAiB,OAAA;AACjB,kHAAA,eAAe,OAAA;AACf,qHAAA,kBAAkB,OAAA;AAEpB,gEAA+F;AAAtF,sHAAA,gBAAgB,OAA2B;AAKpD,uCAAsC;AAA7B,8FAAA,KAAK,OAAA;AACd,oDAAkC;AAClC,+CAAqD;AAA5C,6GAAA,gBAAgB,OAAA;AAiBzB,2DAAyC;AACzC,0DAAwC;AACxC,iEAA+C"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,oDAAkC;AAClC,uDAAqC;AACrC,qDAQ+B;AAP7B,4GAAA,aAAa,OAAA;AACb,sHAAA,uBAAuB,OAAA;AACvB,yGAAA,UAAU,OAAA;AACV,+GAAA,gBAAgB,OAAA;AAChB,6GAAA,cAAc,OAAA;AACd,2HAAA,4BAA4B,OAAA;AAC5B,+HAAA,gCAAgC,OAAA;AAGlC,+CAAqD;AAA5C,mGAAA,WAAW,OAAA;AAQpB,sDAAqD;AAA5C,oGAAA,QAAQ,OAAA;AAEjB,4DAAkE;AAAzD,+GAAA,iBAAiB,OAAA;AAE1B,oEAAkD;AAClD,+DAIqC;AAHnC,oHAAA,iBAAiB,OAAA;AACjB,kHAAA,eAAe,OAAA;AACf,qHAAA,kBAAkB,OAAA;AAEpB,gEAA+F;AAAtF,sHAAA,gBAAgB,OAA2B;AAKpD,uCAAsC;AAA7B,8FAAA,KAAK,OAAA;AACd,oDAAkC;AAClC,+CAAqD;AAA5C,6GAAA,gBAAgB,OAAA;AAiBzB,2DAAyC;AACzC,0DAAwC;AACxC,iEAA+C;AAC/C,6DAA2C;AAC3C,4DAA0C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqraft",
-  "version": "0.10.8",
+  "version": "0.10.9-pr.74.g452d4d3",
   "description": "ReQraft is a collection of React components and hooks that are used across Qore Technologies' products made using the ReQore component library from Qore.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/form/engine/CompactRow.tsx

@@ -35,7 +35,6 @@ import {
   StyledActionSlot,
   StyledCardHeading,
   StyledCardLabel,
-  StyledCodePreview,
   StyledColorSwatch,
   StyledColumn,
   StyledEditCard,
@@ -257,26 +256,6 @@ export const CompactRow = memo(
         );
       }
 
-      // Code-editor read summary: replace the truncated string with a chip
-      // showing line count + character count. The actual code renders below
-      // the row as a monospace `<pre>` inside a `ReqoreCollapsibleContent` —
-      // see `showCodePreview` below. Keeps the row height fixed while making
-      // multi-line source readable without opening the full editor.
-      if (valueType === 'code-editor' && typeof field?.value === 'string') {
-        const lines = field.value.split('\n').length;
-        const chars = field.value.length;
-        return (
-          <ReqoreTag
-            size='small'
-            minimal
-            intent='info'
-            icon='CodeLine'
-            label={`${lines} ${lines === 1 ? 'line' : 'lines'}`}
-            labelKey={`${chars} ${chars === 1 ? 'char' : 'chars'}`}
-          />
-        );
-      }
-
       // Selected allowed-value / enum item with a logo (e.g. language images):
       // render it beside the value, where it belongs — not as the field's icon.
       const allowedImage = getAllowedValueImage(field?.value, schema);
@@ -934,16 +913,6 @@ export const CompactRow = memo(
         return inner !== null && typeof inner === 'object';
       });
     const showStructuredPreview = hashEntries.length > 0 || isHashList;
-    // Multi-line code preview: a `code-editor` field with a non-empty string
-    // value gets a `<pre>`-based code block under the row, capped by a
-    // `ReqoreCollapsibleContent` so the collapsed height stays row-sized and
-    // "Show more" reveals the rest.  Sits in the same inset the hash/list
-    // preview uses — mutually exclusive with `showStructuredPreview`.
-    const showCodePreview =
-      !hidden &&
-      valueType === 'code-editor' &&
-      typeof optionField?.value === 'string' &&
-      optionField.value.length > 0;
     const typeLabel =
       showFieldTypes ?
         `<${(schema?.ui_type as string) || (schema?.type as string) || 'auto'}${(schema as { ui_element_type?: string } | undefined)?.ui_element_type ? `[${(schema as { ui_element_type?: string }).ui_element_type}]` : ''}>`
@@ -1095,7 +1064,7 @@ export const CompactRow = memo(
         role='button'
         tabIndex={0}
         aria-label={label}
-        className={`readfirst-row options-readfirst-value${hidden ? ' readfirst-row-hidden' : ''}${fieldDisabled ? ' readfirst-row-disabled' : ''}${isHighlighted ? ' readfirst-row-group-highlight' : ''}${isFlashed ? ' readfirst-row-flash' : ''}${showLabelDesc ? ' readfirst-row-info-open' : ''}${panelMessages.length || showStructuredPreview || showCodePreview ? ' readfirst-row-tall' : ''}${clusterBlockClass ? ' ' + clusterBlockClass : ''}`}
+        className={`readfirst-row options-readfirst-value${hidden ? ' readfirst-row-hidden' : ''}${fieldDisabled ? ' readfirst-row-disabled' : ''}${isHighlighted ? ' readfirst-row-group-highlight' : ''}${isFlashed ? ' readfirst-row-flash' : ''}${showLabelDesc ? ' readfirst-row-info-open' : ''}${panelMessages.length || showStructuredPreview ? ' readfirst-row-tall' : ''}${clusterBlockClass ? ' ' + clusterBlockClass : ''}`}
         aria-disabled={fieldDisabled || undefined}
         style={stripeStyle}
         onClick={activate}
@@ -1206,31 +1175,6 @@ export const CompactRow = memo(
               </ReqoreCollapsibleContent>
             </StyledRowInset>
           : null}
-          {/* Code-editor preview: same inset placement as hash/list — a monospace
-              `<pre>` block wrapped in `ReqoreCollapsibleContent` so the collapsed
-              row stays row-height while multi-line source reveals via "Show more".
-              Stopping propagation here (like the structured inset) — a click on
-              the collapse button must not also open the field editor. */}
-          {showCodePreview ?
-            <StyledRowInset
-              className='options-readfirst-inset options-readfirst-code-inset'
-              onClick={(e) => e.stopPropagation()}
-            >
-              <ReqoreCollapsibleContent
-                maxCollapsedHeight={96}
-                buttonProps={{ className: 'options-readfirst-viewmore' }}
-              >
-                <StyledCodePreview
-                  className='options-readfirst-code'
-                  $bg={cHover}
-                  $border={`${cDivider}88`}
-                  $fg={cKey}
-                >
-                  {optionField.value as string}
-                </StyledCodePreview>
-              </ReqoreCollapsibleContent>
-            </StyledRowInset>
-          : null}
         </StyledRowValue>
         <StyledRowActions>
           {/* Column discipline (table treatment): variable-width chips lead and

package/src/components/form/engine/FormEngine.stories.tsx

@@ -715,73 +715,6 @@ export const OptionInheritsRenderPropFromSiblingCompact: Story = {
   },
 };
 
-// Compact-row code-editor preview: a `code-editor` field with a multi-line
-// string value renders (a) a "N lines · N chars" tag in the value cell instead
-// of the truncated raw string, and (b) a monospace `<pre>` block under the row
-// capped by a `ReqoreCollapsibleContent` — the "Show more" affordance the value
-// cell couldn't provide on its own. Locks the compact preview so a future
-// CompactRow refactor can't silently reduce a Qorus source-code field to an
-// ellipsised one-liner again.
-export const CompactRowCodeEditorPreview: Story = {
-  args: {
-    compact: true,
-    minColumnWidth: '360px',
-    componentOverrides: { 'code-editor': CodeEditorStandin },
-    value: {
-      language: { type: 'string', value: 'qore' },
-      source: {
-        type: 'string',
-        value:
-          '%new-style\n%require-types\n%strict-args\n' +
-          '%enable-all-warnings\n\n' +
-          'class ExampleJob inherits QorusJob {\n' +
-          '    run() {\n' +
-          '        logInfo("running");\n' +
-          '    }\n' +
-          '}\n',
-      },
-    },
-    options: {
-      language: {
-        type: 'string',
-        ui_type: 'string',
-        display_name: 'Language',
-        allowed_values: [
-          { display_name: 'Qore', value: { type: 'string', value: 'qore' } },
-          { display_name: 'Python', value: { type: 'string', value: 'python' } },
-          { display_name: 'Java', value: { type: 'string', value: 'java' } },
-        ],
-      },
-      source: {
-        type: 'string',
-        ui_type: 'code-editor',
-        display_name: 'Source Code',
-        inherit_props: { language: 'language' },
-      },
-    },
-  },
-  play: async ({ canvasElement }) => {
-    // (a) The monospace preview mounted under the row — contains a substring
-    //     only the source has, proving `showCodePreview` kicked in and the
-    //     `StyledCodePreview` block is in the DOM.
-    await waitFor(
-      () => {
-        const preview = canvasElement.querySelector('.options-readfirst-code');
-        expect(preview).toBeTruthy();
-        expect(preview?.textContent).toContain('class ExampleJob inherits QorusJob');
-      },
-      { timeout: 5000 }
-    );
-    // (b) The value cell replaced its truncated raw string with a summary tag —
-    //     query the tag directly (its label + labelKey render on separate spans,
-    //     so text-matching across them is fragile). Look for the CodeLine icon
-    //     that only this tag mounts alongside the source-code row.
-    const sourceRow = canvasElement.querySelector('[data-field="source"]');
-    expect(sourceRow).toBeTruthy();
-    expect(sourceRow?.textContent ?? '').toMatch(/\d+\s*lines?/);
-  },
-};
-
 // qorus#347-followup, scope forwarding: this story exercises the nested
 // case of the OptionInheritsRenderPropFromSibling contract. The parent
 // form declares `methods: { ui_type: 'list', element_type: 'hash',

package/src/components/form/engine/compactRowStyles.ts

@@ -335,27 +335,6 @@ export const StyledRowInset = styled.div`
   margin-top: 4px;
 `;
 
-// A collapsed code-block preview shown under the value summary for a
-// `code-editor` field.  Multi-line, monospace, subtle background — matches
-// the aesthetic of the classic code-view surface but small enough to sit
-// inside a read-row.  Height is capped by the wrapping `ReqoreCollapsibleContent`
-// so the "Show more" affordance stays useful.
-export const StyledCodePreview = styled.pre<{ $bg: string; $border: string; $fg: string }>`
-  margin: 0;
-  padding: 8px 10px;
-  border-radius: 4px;
-  background: ${({ $bg }) => $bg};
-  border: 1px solid ${({ $border }) => $border};
-  color: ${({ $fg }) => $fg};
-  font-family:
-    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-  font-size: 11.5px;
-  line-height: 1.5;
-  white-space: pre;
-  overflow: auto;
-  max-width: 100%;
-`;
-
 // A small inline colour swatch shown before an rgbcolor value's hex string.
 export const StyledColorSwatch = styled.span<{ $color: string; $border: string }>`
   width: 12px;

package/src/components/supportTicket/AttachmentChips.tsx

@@ -0,0 +1,50 @@
+import { ReqoreControlGroup, ReqoreTag } from '@qoretechnologies/reqore';
+import { useEffect, useState } from 'react';
+
+/*
+ * Renders the files staged on a ticket composer as removable chips. Image files —
+ * whether uploaded, pasted, or captured as a screenshot — show a thumbnail;
+ * everything else shows a paperclip + filename. Thumbnail object URLs are created
+ * here and revoked when the file set changes or the component unmounts. Renders
+ * nothing when there are no staged files.
+ */
+
+export interface IAttachmentChipsProps {
+  files: File[];
+  onRemove: (index: number) => void;
+  disabled?: boolean;
+}
+
+export const AttachmentChips = ({ files, onRemove, disabled }: IAttachmentChipsProps) => {
+  const [thumbnails, setThumbnails] = 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;
+  }
+
+  return (
+    <ReqoreControlGroup wrap gapSize='small' verticalAlign='center'>
+      {files.map((file, index) => {
+        const thumbnail = thumbnails[index];
+        return (
+          <ReqoreTag
+            key={`${file.name}-${index}`}
+            icon={thumbnail ? undefined : 'AttachmentLine'}
+            leftIconProps={thumbnail ? { image: thumbnail } : undefined}
+            label={file.name}
+            size='small'
+            onRemoveClick={disabled ? undefined : () => onRemove(index)}
+          />
+        );
+      })}
+    </ReqoreControlGroup>
+  );
+};

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

@@ -0,0 +1,102 @@
+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 = {
+  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 = {
+  args: { onInterfaceClick: fn() },
+  async play({ canvasElement, args }) {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByText('invoice-sync:2.3'));
+    await waitFor(() =>
+      expect(args.onInterfaceClick).toHaveBeenCalledWith(
+        expect.objectContaining({
+          interface_kind: 'workflow',
+          interface_name: 'invoice-sync:2.3',
+        })
+      )
+    );
+  },
+};
+
+/** The in-thread use: no label — the chips sit under a message. */
+export const NoLabel: Story = {
+  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 = {
+  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,62 @@
+import { ReqoreControlGroup, ReqoreP, ReqoreTag } from '@qoretechnologies/reqore';
+import { TSizes } from '@qoretechnologies/reqore/dist/constants/sizes';
+import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
+import { defaultInterfaceIcon, IInterfaceReference } from './meta';
+
+export interface IInterfaceReferenceTagsProps {
+  references?: IInterfaceReference[];
+  /** Optional leading label, e.g. "References" in a ticket header. Omitted (the
+   *  default) inside the thread, where the chips sit under a message. */
+  label?: string;
+  /** Resolve a per-kind icon. Consumers with their own icon vocabulary (the IDE)
+   *  pass one; when omitted the built-in per-kind default is used. */
+  resolveInterfaceIcon?: (kind: string) => IReqoreIconName;
+  /** Open a referenced interface; chips are static (informational) when omitted —
+   *  e.g. the staff view, which can't reach the customer's instance. */
+  onInterfaceClick?: (reference: IInterfaceReference) => void;
+  size?: TSizes;
+}
+
+/**
+ * The chips for the Qorus interfaces a ticket or message references, as
+ * `{kind, name}` snapshots. The single renderer for interface references across
+ * every support surface — the ticket header (with a "References" label), the
+ * thread (per message, no label), and the Qonsole card — so a reference looks
+ * identical everywhere. Renders nothing when there are no references.
+ */
+export const InterfaceReferenceTags = ({
+  references,
+  label,
+  resolveInterfaceIcon,
+  onInterfaceClick,
+  size = 'small',
+}: 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) => (
+        <ReqoreTag
+          key={reference.reference_id ?? `${reference.interface_kind}:${reference.interface_name}`}
+          icon={resolveIcon(reference.interface_kind)}
+          labelKey={reference.interface_kind}
+          label={reference.interface_name}
+          size={size}
+          tooltip={
+            onInterfaceClick
+              ? `Open ${reference.interface_kind} ${reference.interface_name}`
+              : `${reference.interface_kind}: ${reference.interface_name}`
+          }
+          onClick={onInterfaceClick ? () => onInterfaceClick(reference) : undefined}
+        />
+      ))}
+    </ReqoreControlGroup>
+  );
+};