@qoretechnologies/reqraft 0.10.38-pr.96.g9405cd1 → 0.10.38

package/src/components/form/fields/template/TemplateField.stories.tsx

@@ -411,6 +411,55 @@ export const AliasedStateTemplateValue: StoryObj<typeof meta> = {
   },
 };
 
+/** A catalogue can only offer what the action's output type declares, so it
+ *  stops at a list — `choices` is offered, `choices[0].message.content` is
+ *  hand-written past it. Such a value has no item of its own and used to
+ *  render as its raw token; it is now named after its nearest ancestor. */
+export const ExtendedPathTemplateValue: StoryObj<typeof meta> = {
+  args: {
+    component: LongStringField,
+    type: 'string',
+    allowTemplates: true,
+    allowCustomValues: true,
+    value: '$data:{dc_ai_reply.choices[0].message.content}',
+    templates: {
+      items: [
+        {
+          label: 'Generate AI Reply',
+          items: [
+            {
+              label: 'Choices',
+              value: '$data:{3.choices}',
+              badge: 'list',
+              metadata: { aliasValues: ['$data:{dc_ai_reply.choices}'] },
+            },
+          ],
+        },
+      ],
+    } as any,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField holding a path extended past the named field it starts from ($data:{dc_ai_reply.choices[0].message.content}, where the catalogue only offers "choices") — the chip is named after its nearest ancestor as "Choices[0].message.content" instead of printing the raw token.',
+      },
+    },
+  },
+  play: async () => {
+    await waitFor(() => {
+      const chip = Array.from(document.querySelectorAll('.reqore-button')).find((button) =>
+        button.textContent?.includes('Choices[0].message.content')
+      );
+      expect(chip, 'the extended path is named after its ancestor').toBeTruthy();
+    });
+    const rawChips = Array.from(document.querySelectorAll('.reqore-button')).filter((button) =>
+      button.textContent?.includes('$data:{')
+    );
+    expect(rawChips, 'no chip prints the raw token').toHaveLength(0);
+  },
+};
+
 export const ElementTypeInListShowsCorrectTemplates: StoryObj<typeof meta> = {
   args: {
     component: auto,

package/src/components/form/fields/template/TemplateField.tsx

@@ -30,11 +30,11 @@ import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import {
   filterTemplatesByType as templatesFilterFunc,
-  findTemplate,
   getTemplateKey,
   getTemplateValue,
   isBracedTemplateToken,
   isCompleteTemplateToken,
+  describeTemplateReference,
   isValueTemplate,
 } from '../../../../helpers/templates';
 import { getTypeFromValue } from '../../../../helpers/validations';
@@ -218,8 +218,13 @@ export const TemplateDropdownSelector = memo(
     size,
     ...rest
   }: ITemplateDropdownSelectorProps) => {
-    const template = findTemplate(templates, value);
-    const label = template?.label || value || rest.label || 'Select Template';
+    // One resolver for every surface that names a reference — the picker chip
+    // here, the read-only tag, and the compact row's expression summary. The
+    // row and this editor must agree: a reference that reads as its path when
+    // the row is closed cannot read as `$data:{…}` the moment it is opened.
+    const resolved = describeTemplateReference(templates, value);
+    const template = resolved.item;
+    const label = resolved.label || rest.label || 'Select Template';
     const leftIconProps = useMemo(
       (): IReqoreButtonProps['leftIconProps'] => ({
         image: template?.metadata?.image,
@@ -369,7 +374,7 @@ export const TemplateField = memo(
     const showTemplateToggle = allowCustomValues && allowTemplates && !rest.arg_schema;
 
     // Only a BRACED context ref (`$data:{…}` — machine-written, nobody types
-    // one) renders as the picker chip (label + app image via findTemplate)
+    // one) renders as the picker chip (named via `resolveTemplateLabel`)
     // rather than as its raw text in a string editor. Plain word-path tokens
     // (`$local:id`) are typeable, so per the build #123 review they keep the
     // input that offers templates while typing. Mixed text-and-token strings

package/src/helpers/templates.ts

@@ -103,6 +103,68 @@ const matchesTemplateValue = (item: TReqoreDropdownItem, value: string): boolean
   item.value === value ||
   !!(item.metadata as { aliasValues?: string[] } | undefined)?.aliasValues?.includes(value);
 
+/** Splits `$data:{a.b.c}` into its key (`$data`) and inner path (`a.b.c`). */
+const TEMPLATE_TOKEN_PATH = /^(\$[A-Za-z_][\w-]*):\{(.*)\}$/;
+
+const getTokenPath = (value?: unknown): { key: string; path: string } | undefined => {
+  const match = typeof value === 'string' ? TEMPLATE_TOKEN_PATH.exec(value) : null;
+  return match ? { key: match[1], path: match[2] } : undefined;
+};
+
+/**
+ * The longest catalogue item whose path is a PREFIX of `value`, plus the part
+ * of the path it does not cover.
+ *
+ * A catalogue can only offer what the action's output type declares, so it
+ * stops at a list: `choices` is offered, `choices[0].message.content` is not —
+ * an operator hand-extends the path past the named field. Such a value has no
+ * item to match and used to render as its own raw token. Naming it by its
+ * nearest ancestor (`Choices[0].message.content`) keeps the chip readable
+ * without inventing a catalogue entry that does not exist.
+ *
+ * The match must break at a path boundary (`.` or `[`) so `choicesOther` is
+ * never named after `choices`, and the token keys must agree so a `$config:`
+ * item never names a `$data:` value.
+ */
+export const findTemplateByPath = (
+  templates: IReqoreFormTemplates,
+  value: string
+): { item: TReqoreDropdownItem; remainder: string } | undefined => {
+  const ref = getTokenPath(value);
+  if (!ref) return undefined;
+
+  let best: { item: TReqoreDropdownItem; path: string; remainder: string } | undefined;
+
+  const consider = (item: TReqoreDropdownItem, candidate?: string) => {
+    const itemPath = getTokenPath(candidate);
+    if (!itemPath || itemPath.key !== ref.key || !ref.path.startsWith(itemPath.path)) {
+      return;
+    }
+    const boundary = ref.path[itemPath.path.length];
+    if (boundary !== '.' && boundary !== '[') {
+      return;
+    }
+    if (!best || itemPath.path.length > best.path.length) {
+      best = { item, path: itemPath.path, remainder: ref.path.slice(itemPath.path.length) };
+    }
+  };
+
+  const walk = (items?: TReqoreDropdownItems) => {
+    items?.forEach((item) => {
+      consider(item, item.value as string);
+      (item.metadata as { aliasValues?: string[] } | undefined)?.aliasValues?.forEach((alias) =>
+        consider(item, alias)
+      );
+      if (item.items) {
+        walk(item.items);
+      }
+    });
+  };
+
+  walk(templates?.items);
+  return best ? { item: best.item, remainder: best.remainder } : undefined;
+};
+
 export const findTemplate = (
   templates: IReqoreFormTemplates,
   value: string
@@ -128,6 +190,113 @@ export const findTemplate = (
   return result;
 };
 
+/**
+ * Joins a catalogue item's name to the part of the path it does not cover.
+ * A field step reads as a step (`Choices › message`), while an array index
+ * binds to the name it indexes (`Choices[0]`) rather than floating off it.
+ */
+const composeExtendedLabel = (label: string, remainder: string): string =>
+  remainder.startsWith('.') ? `${label} › ${remainder.slice(1)}` : `${label}${remainder}`;
+
+/**
+ * The one answer to "what is this reference called?", so a value reads the
+ * same in the picker chip, the read-only tag and the compact row's summary.
+ * Exact match first (aliases included), then the nearest catalogue ancestor
+ * for a hand-extended path, and finally the raw token — which is honest when
+ * the catalogue holds nothing that explains the value.
+ */
+export const resolveTemplateLabel = (
+  templates: IReqoreFormTemplates | undefined,
+  value: string
+): { label: string; item?: TReqoreDropdownItem } => {
+  if (!templates || !value) {
+    return { label: value };
+  }
+
+  const exact = findTemplate(templates, value);
+  if (exact) {
+    return { label: (exact.label as string) || value, item: exact };
+  }
+
+  const extended = findTemplateByPath(templates, value);
+  if (extended) {
+    return {
+      label: composeExtendedLabel(extended.item.label as string, extended.remainder),
+      item: extended.item,
+    };
+  }
+
+  return { label: value };
+};
+
+/**
+ * What to call a reference when the catalogue explains nothing about it — the
+ * reference's own path, with the token wrapper stripped:
+ * `$data:{dc_ai_reply.choices[0].message.content}` reads as
+ * `dc_ai_reply.choices[0].message.content`.
+ *
+ * Surfaces exist with no catalogue at all (the Automation Hub template preview
+ * never fetches one), and there the raw token is the only thing left to show.
+ * Showing it as `$data:{…}` renders a value as code; showing the path renders
+ * it as a name, which is the honest floor.
+ */
+export const getTemplateReferencePath = (value: string): string =>
+  getTokenPath(value)?.path ?? value;
+
+/**
+ * The best available name for a reference, for a surface that must show
+ * something readable no matter what: the catalogue's name when it has one,
+ * otherwise the bare path. `resolveTemplateLabel` keeps falling back to the
+ * raw token, because a picker that cannot resolve a value should say exactly
+ * what the value is.
+ */
+export const describeTemplateReference = (
+  templates: IReqoreFormTemplates | undefined,
+  value: string
+): { label: string; item?: TReqoreDropdownItem } => {
+  const resolved = resolveTemplateLabel(templates, value);
+  return resolved.item ? resolved : { label: getTemplateReferencePath(value) };
+};
+
+const EMBEDDED_TEMPLATE_TOKEN = new RegExp(TEMPLATE_TOKEN_SOURCE, 'g');
+
+export type TTemplateTextSegment =
+  | { kind: 'text'; text: string }
+  | { kind: 'token'; text: string };
+
+/**
+ * Splits prose that embeds template tokens into its literal and token parts —
+ * `trim("$data:{…}")` becomes `trim("`, the token, `")`. Used to chip the
+ * references inside a rendered expression instead of printing them raw.
+ */
+export const splitTemplateTokens = (text?: string): TTemplateTextSegment[] => {
+  if (!text) {
+    return [];
+  }
+
+  const segments: TTemplateTextSegment[] = [];
+  let lastIndex = 0;
+
+  // A fresh regex per call: a shared /g instance carries `lastIndex` between
+  // calls and would skip tokens on the second string it is given.
+  const pattern = new RegExp(EMBEDDED_TEMPLATE_TOKEN.source, 'g');
+  let match: RegExpExecArray | null;
+
+  while ((match = pattern.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({ kind: 'text', text: text.slice(lastIndex, match.index) });
+    }
+    segments.push({ kind: 'token', text: match[0] });
+    lastIndex = match.index + match[0].length;
+  }
+
+  if (lastIndex < text.length) {
+    segments.push({ kind: 'text', text: text.slice(lastIndex) });
+  }
+
+  return segments;
+};
+
 // Ported verbatim from qorus-ide `helpers/functions.tsx` (FIELD_STACK_REPORT
 // batch) — the previous reqraft version used naive badge equality; the IDE
 // routes compatibility through `areQorusTypesCompatible` (int↔string coercion