@linktr.ee/messaging-react 3.31.0 → 3.31.1-rc-1785925240

package/dist/index.d.ts

@@ -1786,32 +1786,13 @@ declare module 'stream-chat' {
          */
         accent_color?: string;
     }
-    interface CustomChannelData {
+    interface CustomChannelData extends LinktreeChannelData {
         /**
-         * Whether the channel has at least one visitor-originated message.
-         * Legacy channels may omit this field.
-         */
-        has_visitor_message?: boolean;
-        /**
-         * Priority score assigned by backend classification for spotlighting.
-         */
-        priority_score?: number;
-        /**
-         * Indicates a paid message is pending creator reply.
-         */
-        pending_earn_message_reply?: boolean;
-        /**
-         * Indicates DM agent has deferred and creator follow-up is needed.
-         */
-        agent_deferred?: boolean;
-        /**
-         * Whether DM agent auto-replies are paused for this channel.
+         * Whether DM agent auto-replies are paused for this channel. Writer-only
+         * field not read by other clients, so it stays local rather than in the
+         * shared {@link LinktreeChannelData} contract.
          */
         chatbot_paused?: boolean;
-        /**
-         * Customer classification tag for this conversation (e.g. CUSTOMER_PAID).
-         */
-        customer_tag?: string;
     }
     interface CustomMemberData {
         /**
@@ -1819,7 +1800,7 @@ declare module 'stream-chat' {
          */
         is_follower?: boolean;
     }
-    interface CustomMessageData {
+    interface CustomMessageData extends LinktreeMessageData {
         /**
          * Message metadata from backend.
          * Contains type and payment information.

package/dist/testing.d.ts

@@ -124,32 +124,13 @@ declare module 'stream-chat' {
          */
         accent_color?: string;
     }
-    interface CustomChannelData {
+    interface CustomChannelData extends LinktreeChannelData {
         /**
-         * Whether the channel has at least one visitor-originated message.
-         * Legacy channels may omit this field.
-         */
-        has_visitor_message?: boolean;
-        /**
-         * Priority score assigned by backend classification for spotlighting.
-         */
-        priority_score?: number;
-        /**
-         * Indicates a paid message is pending creator reply.
-         */
-        pending_earn_message_reply?: boolean;
-        /**
-         * Indicates DM agent has deferred and creator follow-up is needed.
-         */
-        agent_deferred?: boolean;
-        /**
-         * Whether DM agent auto-replies are paused for this channel.
+         * Whether DM agent auto-replies are paused for this channel. Writer-only
+         * field not read by other clients, so it stays local rather than in the
+         * shared {@link LinktreeChannelData} contract.
          */
         chatbot_paused?: boolean;
-        /**
-         * Customer classification tag for this conversation (e.g. CUSTOMER_PAID).
-         */
-        customer_tag?: string;
     }
     interface CustomMemberData {
         /**
@@ -157,7 +138,7 @@ declare module 'stream-chat' {
          */
         is_follower?: boolean;
     }
-    interface CustomMessageData {
+    interface CustomMessageData extends LinktreeMessageData {
         /**
          * Message metadata from backend.
          * Contains type and payment information.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.31.0",
+  "version": "3.31.1-rc-1785925240",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "^2.2.0",
-    "@linktr.ee/messaging-taxonomy": "^0.5.0",
+    "@linktr.ee/messaging-core": "2.4.0-rc-1785925240",
+    "@linktr.ee/messaging-taxonomy": "^0.5.1",
     "@phosphor-icons/react": "^2.1.10",
     "culori": "^4.0.2"
   },

package/src/components/LinkAttachment/LinkAttachment.stories.tsx

@@ -7,6 +7,10 @@ import {
 import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
+import { accentSurface } from './components/_shared/accentSurface'
+import type { LinkAttachmentVariant } from './components/_shared/CardShell'
+import { BUBBLE_BG_BY_VARIANT, inkFor } from './components/_shared/chinContrast'
+
 import LinkAttachment from '.'
 
 const IMAGE_THUMBNAIL = '/image-thumbnail.jpg'
@@ -451,3 +455,102 @@ export const AccentWithoutVisibleHero: StoryFn = () => (
 )
 
 AccentWithoutVisibleHero.parameters = { chromatic: { disableSnapshot: false } }
+
+/* ──────────────────────────────────────────────────────────────────
+   Accent derivation swatches
+   ────────────────────────────────────────────────────────────────── */
+
+/**
+ * Max-chroma sRGB colour for a hue — three phase-shifted cosines, so stepping
+ * the hue walks the wheel at the most saturated triple each hue has. Mirrors
+ * the generator `accentSurface.test.ts` sweeps.
+ */
+const vividHex = (hue: number): string =>
+  `#${[0, 120, 240]
+    .map((offset) =>
+      Math.round(127 + 127 * Math.cos(((hue + offset) * Math.PI) / 180))
+        .toString(16)
+        .padStart(2, '0')
+    )
+    .join('')}`
+
+const HUE_SWEEP = Array.from({ length: 24 }, (_, i) => ({
+  label: `${i * 15}°`,
+  accentColor: vividHex(i * 15),
+}))
+
+// Neutrals and near-limits where the AA gate and the ink flip actually decide
+// something, plus the two inputs that must never derive a surface.
+const EDGE_SAMPLES: Array<{ label: string; accentColor?: string }> = [
+  { label: 'mock #738883', accentColor: '#738883' },
+  { label: 'pale #FFF099', accentColor: '#FFF099' },
+  { label: 'near-white #FCF5E3', accentColor: '#FCF5E3' },
+  { label: 'near-black #1e2330', accentColor: '#1e2330' },
+  { label: 'neutral #767676', accentColor: '#767676' },
+  { label: 'vivid #7008E7', accentColor: '#7008E7' },
+  { label: 'none', accentColor: undefined },
+  { label: 'malformed', accentColor: 'rebeccapurple' },
+]
+
+/**
+ * One derivation cell: the surface the card would paint for this accent and
+ * variant, drawn in the ink `inkFor` picks against it. `accentSurface` and
+ * `inkFor` are the only outputs `culori` feeds into the card, so this paints
+ * exactly what a colour-library swap could move — with the resolved hex printed
+ * so a shift also reads as a text diff. A refused accent shows the variant's
+ * fallback fill, tagged.
+ */
+const DerivedSwatch = ({
+  accentColor,
+  variant,
+}: {
+  accentColor?: string
+  variant: LinkAttachmentVariant
+}) => {
+  const surface = accentSurface(accentColor, variant)
+  const painted = surface ?? BUBBLE_BG_BY_VARIANT[variant]
+  return (
+    <div
+      className="flex h-12 flex-col justify-between rounded-md px-2 py-1.5 text-[11px] font-medium"
+      style={{ backgroundColor: painted, color: inkFor(painted) }}
+    >
+      <span>Yoga on Ice</span>
+      <span className="font-mono opacity-80">
+        {surface ?? `fallback ${painted}`}
+      </span>
+    </div>
+  )
+}
+
+const GridHead = ({ children }: { children: React.ReactNode }) => (
+  <div className="text-xs font-medium text-black/40">{children}</div>
+)
+
+/**
+ * Isolates the colour maths behind the accent chin: for every hue at maximum
+ * chroma and every neutral/edge input, the `dark` (Sent) and `light` (Received)
+ * surfaces `accentSurface` derives, each in the ink `inkFor` returns for it.
+ * One snapshot, no hero pixels — a dense visual companion to the
+ * `accentSurface` hue-sweep unit test, so any drift in the derivation shows up
+ * as both a colour change and a hex text diff across adjacent rows.
+ */
+export const AccentDerivation: StoryFn = () => (
+  <div className="min-h-screen w-full bg-[#F9F7F4] p-8">
+    <div className="grid grid-cols-[6rem_1fr_1fr] items-center gap-x-4 gap-y-1.5">
+      <div />
+      <GridHead>Sent (dark stop)</GridHead>
+      <GridHead>Received (light stop)</GridHead>
+      {[...HUE_SWEEP, ...EDGE_SAMPLES].map(({ label, accentColor }) => (
+        <React.Fragment key={label}>
+          <div className="text-right text-xs font-medium text-black/40">
+            {label}
+          </div>
+          <DerivedSwatch accentColor={accentColor} variant="dark" />
+          <DerivedSwatch accentColor={accentColor} variant="light" />
+        </React.Fragment>
+      ))}
+    </div>
+  </div>
+)
+
+AccentDerivation.parameters = { chromatic: { disableSnapshot: false } }

package/src/stream-custom-data.ts

@@ -18,6 +18,8 @@ import {
   type DmAgentSystemType,
   type AgeSafetySystemType,
   type EscalationSystemType,
+  type LinktreeChannelData,
+  type LinktreeMessageData,
 } from '@linktr.ee/messaging-taxonomy'
 import type { Attachment, LocalMessage } from 'stream-chat'
 import 'stream-chat'
@@ -93,32 +95,13 @@ declare module 'stream-chat' {
     accent_color?: string
   }
 
-  interface CustomChannelData {
+  interface CustomChannelData extends LinktreeChannelData {
     /**
-     * Whether the channel has at least one visitor-originated message.
-     * Legacy channels may omit this field.
-     */
-    has_visitor_message?: boolean
-    /**
-     * Priority score assigned by backend classification for spotlighting.
-     */
-    priority_score?: number
-    /**
-     * Indicates a paid message is pending creator reply.
-     */
-    pending_earn_message_reply?: boolean
-    /**
-     * Indicates DM agent has deferred and creator follow-up is needed.
-     */
-    agent_deferred?: boolean
-    /**
-     * Whether DM agent auto-replies are paused for this channel.
+     * Whether DM agent auto-replies are paused for this channel. Writer-only
+     * field not read by other clients, so it stays local rather than in the
+     * shared {@link LinktreeChannelData} contract.
      */
     chatbot_paused?: boolean
-    /**
-     * Customer classification tag for this conversation (e.g. CUSTOMER_PAID).
-     */
-    customer_tag?: string
   }
 
   interface CustomMemberData {
@@ -128,7 +111,7 @@ declare module 'stream-chat' {
     is_follower?: boolean
   }
 
-  interface CustomMessageData {
+  interface CustomMessageData extends LinktreeMessageData {
     /**
      * Message metadata from backend.
      * Contains type and payment information.