@flamingo-stack/openframe-frontend-core 0.0.716 → 0.0.718

package/src/components/chat/types/message.types.ts

@@ -12,15 +12,13 @@ export const MESSAGE_TYPE = {
   TEXT: 'TEXT',
   THINKING: 'THINKING',
   ASK: 'ASK',
-  /** Per-answer source metadata (documents, videos, entity cards).
+  /** Per-answer attachments (cited documents, videos, entity cards).
    *
-   *  TWO names for ONE payload, on purpose. `SOURCES` is the contract the
-   *  backend is moving to; `GUIDE` is the envelope it ships in today, reused
-   *  from Guide Mode v2 so a released frontend keeps working during the v2→v3
-   *  rollout. Both decode through the same path, so dropping `GUIDE` later is a
-   *  deletion here and nothing else. */
+   *  `ATTACHMENTS` carries `sources` / `videos` / `cards` on the record itself.
+   *  `GUIDE` is the envelope it replaced — the same arrays under `payload` —
+   *  and stays only until every backend ships `ATTACHMENTS`. */
+  ATTACHMENTS: 'ATTACHMENTS',
   GUIDE: 'GUIDE',
-  SOURCES: 'SOURCES',
   EXECUTING_TOOL: 'EXECUTING_TOOL',
   EXECUTED_TOOL: 'EXECUTED_TOOL',
   APPROVAL_REQUEST: 'APPROVAL_REQUEST',
@@ -412,7 +410,7 @@ export interface ThinkingMessageData extends MessageDataBase {
  *
  * Lives here, beside `Message`, because BOTH transports produce it now: the SSE
  * adapter reads it off the per-turn metadata frame, and the NATS path decodes it
- * out of a `GUIDE`/`SOURCES` chunk. It used to be declared inside
+ * out of an `ATTACHMENTS` chunk. It used to be declared inside
  * `use-sse-chat-adapter`, which made "a Guide answer's citations" structurally a
  * property of one transport — `use-sse-chat-adapter` still re-exports the name
  * so existing imports keep working.
@@ -451,13 +449,20 @@ export interface ChatSource {
   label?: string;
 }
 
-/** Persisted source-metadata row. `payload` is the SAME object the live chunk
- *  carries, so history and realtime share one decoder (`sourceMetadataEvent`)
- *  and cannot drift apart. Left as an open record here rather than typed
- *  structurally: it is unvalidated wire data, and the decoder is what turns it
- *  into `ChatSource[]` / `ChatRef[]`. */
+/** Persisted attachments row (GraphQL `AttachmentsData`). The arrays are the
+ *  SAME ones the live chunk carries, so history and realtime share one decoder
+ *  (`attachmentsEvent`) and cannot drift apart. Left untyped: it is unvalidated
+ *  wire data, and the decoder is what turns it into `ChatSource[]` / `ChatRef[]`. */
+export interface AttachmentsMessageData extends MessageDataBase {
+  type: 'ATTACHMENTS';
+  sources?: unknown;
+  videos?: unknown;
+  cards?: unknown;
+}
+
+/** The envelope `ATTACHMENTS` replaced: the same arrays under `payload`. */
 export interface SourceMetadataMessageData extends MessageDataBase {
-  type: 'GUIDE' | 'SOURCES';
+  type: 'GUIDE';
   payload?: unknown;
 }
 
@@ -603,6 +608,7 @@ export type MessageData =
   | TextMessageData
   | ThinkingMessageData
   | AskMessageData
+  | AttachmentsMessageData
   | SourceMetadataMessageData
   | ExecutingToolMessageData
   | ExecutedToolMessageData
@@ -654,7 +660,7 @@ export interface ProcessedMessage {
    *  Absent when the source row(s) carried no seq. */
   streamSeq?: number;
   /** Documents this answer cited — see `Message.sources`, the same field.
-   *  Replayed from the turn's persisted `GUIDE`/`SOURCES` row, so a reloaded
+   *  Replayed from the turn's persisted `ATTACHMENTS` row, so a reloaded
    *  answer carries the citations the live one did. */
   sources?: ChatSource[];
   /** Entity references this answer's metadata described — see `Message.refs`. */

package/src/components/chat/types/unified-chat-state.types.ts

@@ -239,7 +239,7 @@ export interface UnifiedChatMessage {
   /**
    * Documents this answer cited, rendered as chips beneath it. Produced by
    * BOTH transports now — SSE reads them off the per-turn metadata frame, NATS
-   * decodes them out of a `GUIDE`/`SOURCES` chunk.
+   * decodes them out of an `ATTACHMENTS` chunk.
    */
   sources?: ChatSource[];
   /**

package/src/components/chat/utils/process-historical-messages.ts

@@ -34,7 +34,12 @@ import {
 // One normalizer for ask rows, shared with the live decoder — history and the
 // stream must agree on which options are usable.
 import { normalizeAskOptions } from '../../../chat-protocol/nats-decoder';
-import { mergeSourceMetadata, sourceMetadataEvent, type SourceMetadata } from '../../../chat-protocol/source-metadata';
+import {
+  attachmentsEvent,
+  mergeSourceMetadata,
+  sourceMetadataEvent,
+  type SourceMetadata,
+} from '../../../chat-protocol/source-metadata';
 import { applyApprovalStatusToSegment } from '../stream/message-mutations';
 import {
   MESSAGE_TYPE,
@@ -122,11 +127,14 @@ export function decodeHistoricalMessageData(data: MessageData): ChatStreamEvent
       }
       return null;
 
-    // Persisted source metadata, through the SAME decoder the live chunk uses
-    // (`sourceMetadataEvent`). That shared parse is the whole reason a reloaded
+    // Persisted attachments, through the SAME decoder the live chunk uses
+    // (`attachmentsEvent`). That shared parse is the whole reason a reloaded
     // answer renders identically to the one the reader watched arrive.
+    case MESSAGE_TYPE.ATTACHMENTS:
+      return attachmentsEvent(data);
+
+    // The envelope `ATTACHMENTS` replaced (see `MESSAGE_TYPE.GUIDE`).
     case MESSAGE_TYPE.GUIDE:
-    case MESSAGE_TYPE.SOURCES:
       return 'payload' in data ? sourceMetadataEvent(data.payload) : null;
 
     // Same completeness gate as the live decoder (`decodeNatsChunk`): a

package/src/components/features/remote-session/index.ts

@@ -34,6 +34,8 @@ export type {
   KeepRecordingSelection,
   ReleaseKeepingModalProps,
 } from './remote-session-keep-modals';
+export { AssignTicketModal, UnassignTicketModal } from './remote-session-ticket-modals';
+export type { AssignTicketModalProps, UnassignTicketModalProps } from './remote-session-ticket-modals';
 export {
   RemoteSessionEventList,
   RemoteSessionTimelineMarkers,

package/src/components/features/remote-session/remote-session-keep-modals.tsx

@@ -151,8 +151,8 @@ export interface ReleaseKeepingModalProps {
   keptOn: string;
   /** The reason as it reads in the sentence, e.g. "Client dispute". */
   reason: string;
-  /** The ticket or reference the Keep was placed for. */
-  ticket?: string | null;
+  /** The tickets assigned to the recording, as they read in the line, e.g. "TKT-4631"; the line is left out without any. */
+  tickets?: string[];
   /** When the recording will be deleted once released, formatted. */
   expiresOn: string;
   /** The original expiry date when it has already passed, so the release adds the grace period. */
@@ -169,7 +169,7 @@ export function ReleaseKeepingModal({
   keptBy,
   keptOn,
   reason,
-  ticket,
+  tickets = [],
   expiresOn,
   dueOn,
   isPending = false,
@@ -185,7 +185,7 @@ export function ReleaseKeepingModal({
         <p>
           Kept by {keptBy} on {keptOn} for {reason}.
         </p>
-        {ticket && <p>Ticket: {ticket}</p>}
+        {tickets.length > 0 && <p>Ticket: {tickets.join(', ')}</p>}
       </div>
 
       <KeepNotice icon={<HourglassIcon size={24} color="currentColor" />} title={`It will expire on ${expiresOn}`}>

package/src/components/features/remote-session/remote-session-ticket-modals.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { useState } from 'react';
+import { Autocomplete, type AutocompleteOption } from '../../ui/autocomplete';
+import { Button } from '../../ui/button/button';
+import { ModalV2, ModalV2Footer, ModalV2Header, ModalV2Title } from '../../ui/modal-v2';
+
+export interface AssignTicketModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /**
+   * The tickets that can be assigned: label = title, value = ticket id. Leave
+   * out the ones already assigned to the recording.
+   */
+  options: AutocompleteOption<string>[];
+  /** Server-side search: called with the typed text; the caller refreshes `options`. Client-side filtering otherwise. */
+  onSearch?: (query: string) => void;
+  /** The ticket search is in flight. */
+  loading?: boolean;
+  /** The assignment is in flight: the button spins and the dialog refuses to close. */
+  isPending?: boolean;
+  onConfirm: (ticketIds: string[]) => void;
+}
+
+/** Assign Ticket: links one or more tickets to a recording. */
+export function AssignTicketModal({
+  isOpen,
+  onClose,
+  options,
+  onSearch,
+  loading = false,
+  isPending = false,
+  onConfirm,
+}: AssignTicketModalProps) {
+  const [ticketIds, setTicketIds] = useState<string[]>([]);
+  // Titles of the picked tickets: a server-side search replaces `options`, and
+  // a picked ticket missing from the new results would otherwise show its id.
+  const [titles, setTitles] = useState<Record<string, string>>({});
+
+  // Every opening starts blank. Reset while rendering, not from an effect: the
+  // modal stays mounted when it closes, so an effect would paint the opening
+  // frame with the previous selection still in the field.
+  const [seededOpen, setSeededOpen] = useState(isOpen);
+  if (seededOpen !== isOpen) {
+    setSeededOpen(isOpen);
+    if (isOpen) {
+      setTicketIds([]);
+      setTitles({});
+    }
+  }
+
+  const handleChange = (ids: string[]) => {
+    setTicketIds(ids);
+    setTitles(prev => {
+      const next: Record<string, string> = {};
+      for (const id of ids) next[id] = options.find(option => option.value === id)?.label ?? prev[id] ?? id;
+      return next;
+    });
+  };
+
+  const handleAssign = () => {
+    if (ticketIds.length === 0 || isPending) return;
+    onConfirm(ticketIds);
+  };
+
+  return (
+    <ModalV2 isOpen={isOpen} onClose={isPending ? () => {} : onClose} className="text-left md:max-w-[600px]">
+      <ModalV2Header>
+        <ModalV2Title>Assign Ticket</ModalV2Title>
+      </ModalV2Header>
+
+      <Autocomplete
+        multiple
+        wrapTags
+        label="Tickets"
+        labelVariant="large"
+        options={options}
+        value={ticketIds}
+        onChange={handleChange}
+        renderTag={option => titles[option.value] ?? option.label}
+        onInputChange={onSearch ? (value, reason) => reason === 'input' && onSearch(value) : undefined}
+        disableClientFilter={Boolean(onSearch)}
+        loading={loading}
+        noOptionsText="No tickets found"
+        disabled={isPending}
+      />
+
+      <ModalV2Footer>
+        <Button type="button" variant="outline" onClick={onClose} disabled={isPending} className="flex-1 md:hidden">
+          Cancel
+        </Button>
+        <div className="hidden flex-1 md:block" />
+        <Button
+          type="button"
+          variant="accent"
+          onClick={handleAssign}
+          loading={isPending}
+          disabled={ticketIds.length === 0}
+          className="flex-1"
+        >
+          Assign
+        </Button>
+      </ModalV2Footer>
+    </ModalV2>
+  );
+}
+
+export interface UnassignTicketModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /** The unassignment is in flight: the button spins and the dialog refuses to close. */
+  isPending?: boolean;
+  onConfirm: () => void;
+}
+
+/** Unassign Ticket: unlinks a ticket from a recording; the ticket itself is unchanged. */
+export function UnassignTicketModal({ isOpen, onClose, isPending = false, onConfirm }: UnassignTicketModalProps) {
+  return (
+    <ModalV2 isOpen={isOpen} onClose={isPending ? () => {} : onClose} className="text-left md:max-w-[600px]">
+      <ModalV2Header>
+        <ModalV2Title>Unassign Ticket</ModalV2Title>
+      </ModalV2Header>
+
+      <p className="w-full text-ods-text-primary text-h4">
+        This Ticket will no longer be linked to this remote session. The ticket itself stays as it is, and you can
+        assign it again anytime.
+      </p>
+
+      <ModalV2Footer>
+        <Button type="button" variant="outline" onClick={onClose} disabled={isPending} className="flex-1 md:hidden">
+          Cancel
+        </Button>
+        <div className="hidden flex-1 md:block" />
+        <Button type="button" variant="destructive" onClick={onConfirm} loading={isPending} className="flex-1">
+          Unassign
+        </Button>
+      </ModalV2Footer>
+    </ModalV2>
+  );
+}

package/src/components/ui/autocomplete.tsx

@@ -140,6 +140,12 @@ export interface AutocompleteMultipleProps<T = string> extends AutocompleteBaseP
   limitTags?: number | 'auto';
   /** Custom render function for the "+N" overflow chip */
   getLimitTagsText?: (more: number) => ReactNode;
+  /**
+   * Show every tag in full, wrapping onto more lines: the field grows instead
+   * of truncating labels and collapsing the rest into "+N". `limitTags` is
+   * ignored. For short pickers whose picks must stay readable (ticket titles).
+   */
+  wrapTags?: boolean;
 }
 
 export type AutocompleteProps<T = string> = AutocompleteSingleProps<T> | AutocompleteMultipleProps<T>;
@@ -189,6 +195,7 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
   // Multiple-only props
   const maxItems = multiple ? (props as AutocompleteMultipleProps<T>).maxItems : undefined;
   const renderTag = multiple ? (props as AutocompleteMultipleProps<T>).renderTag : undefined;
+  const wrapTags = multiple && ((props as AutocompleteMultipleProps<T>).wrapTags ?? false);
   const limitTagsProp = multiple ? ((props as AutocompleteMultipleProps<T>).limitTags ?? 'auto') : 'auto';
   const getLimitTagsText = multiple
     ? ((props as AutocompleteMultipleProps<T>).getLimitTagsText ?? ((more: number) => `+${more}`))
@@ -252,7 +259,7 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
     inputRef,
   } = useAutoLimitTags({
     count: multiple ? selectedOptions.length : 0,
-    limitTags: multiple ? limitTagsProp : 0,
+    limitTags: multiple ? (wrapTags ? selectedOptions.length : limitTagsProp) : 0,
     placeholder: inputPlaceholder,
   });
 
@@ -506,15 +513,22 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
             </span>
           )}
 
-          {/* Middle zone: tags + input — single line with overflow */}
-          <div ref={middleRef} className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden px-2">
+          {/* Middle zone: tags + input — single line with overflow, or wrapped lines with `wrapTags` */}
+          <div
+            ref={middleRef}
+            className={cn(
+              'flex min-w-0 flex-1 items-center gap-2 px-2',
+              wrapTags ? 'flex-wrap py-[var(--spacing-system-xsf)]' : 'overflow-hidden',
+            )}
+          >
             {/* Tags (multiple mode only) */}
             {multiple &&
               visibleTags.map(option => (
                 <Tag
                   key={String(option.value)}
                   variant="outline"
-                  labelClassName="max-w-[90px] truncate"
+                  className={wrapTags ? 'max-w-full' : undefined}
+                  labelClassName={wrapTags ? 'truncate' : 'max-w-[90px] truncate'}
                   label={renderTag ? renderTag(option) : option.label}
                   onClose={
                     !disabled