@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/inputs/input-components/VariableInputComponent.js

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { variableValueToInputText } from "../../../utils/variable-utils.js";
 import { readStructuredList } from "../../../utils/variable-customcomponent.js";
 import { ToggleInput } from "./ToggleInput.js";
@@ -66,7 +66,7 @@ function VariableInputComponent({
   const effectiveValue = isRandomAssignment ? "" : value;
   const stringValue = variableValueToInputText(effectiveValue);
   const stringOnChange = (v) => onChange(v);
-  const fallbackTextarea = /* @__PURE__ */ React.createElement(
+  const fallbackTextarea = /* @__PURE__ */ jsx(
     TextareaInput,
     {
       value: stringValue,
@@ -81,7 +81,7 @@ function VariableInputComponent({
   );
   let inputComponent;
   if (customComponent && readStructuredList(customComponent)?.listId) {
-    inputComponent = /* @__PURE__ */ React.createElement(
+    inputComponent = /* @__PURE__ */ jsx(
       PicklistVariableInput,
       {
         value: effectiveValue,
@@ -92,7 +92,7 @@ function VariableInputComponent({
       }
     );
   } else if (isTableVariableType(type)) {
-    inputComponent = /* @__PURE__ */ React.createElement(
+    inputComponent = /* @__PURE__ */ jsx(
       TableVariableInput,
       {
         type,
@@ -104,7 +104,7 @@ function VariableInputComponent({
   } else if (isMediaVariableType(type)) {
     switch (type) {
       case "image":
-        inputComponent = /* @__PURE__ */ React.createElement(
+        inputComponent = /* @__PURE__ */ jsx(
           ImageVariableInput,
           {
             value: effectiveValue,
@@ -118,7 +118,7 @@ function VariableInputComponent({
         );
         break;
       case "audio":
-        inputComponent = /* @__PURE__ */ React.createElement(
+        inputComponent = /* @__PURE__ */ jsx(
           AudioVariableInput,
           {
             value: effectiveValue,
@@ -132,7 +132,7 @@ function VariableInputComponent({
         );
         break;
       case "video":
-        inputComponent = /* @__PURE__ */ React.createElement(
+        inputComponent = /* @__PURE__ */ jsx(
           VideoVariableInput,
           {
             value: effectiveValue,
@@ -146,7 +146,7 @@ function VariableInputComponent({
         );
         break;
       case "document":
-        inputComponent = /* @__PURE__ */ React.createElement(
+        inputComponent = /* @__PURE__ */ jsx(
           DocumentVariableInput,
           {
             value: effectiveValue,
@@ -160,7 +160,7 @@ function VariableInputComponent({
         );
         break;
       case "youtube":
-        inputComponent = /* @__PURE__ */ React.createElement(
+        inputComponent = /* @__PURE__ */ jsx(
           YoutubeVariableInput,
           {
             value: effectiveValue,
@@ -176,7 +176,7 @@ function VariableInputComponent({
       case "toggle":
       case "light-switch": {
         const [offLabel = "No", onLabel = "Yes"] = customComponent?.toggleValues || [];
-        inputComponent = /* @__PURE__ */ React.createElement(
+        inputComponent = /* @__PURE__ */ jsx(
           ToggleInput,
           {
             value: stringValue,
@@ -191,7 +191,7 @@ function VariableInputComponent({
         break;
       }
       case "radio":
-        inputComponent = hasOptions ? /* @__PURE__ */ React.createElement(
+        inputComponent = hasOptions ? /* @__PURE__ */ jsx(
           RadioGroupInput,
           {
             value: stringValue,
@@ -204,7 +204,7 @@ function VariableInputComponent({
         ) : fallbackTextarea;
         break;
       case "pill-toggle":
-        inputComponent = !hasOptions ? fallbackTextarea : choiceControlFor(options) !== "pill-toggle" ? /* @__PURE__ */ React.createElement(
+        inputComponent = !hasOptions ? fallbackTextarea : choiceControlFor(options) !== "pill-toggle" ? /* @__PURE__ */ jsx(
           SelectInput,
           {
             value: stringValue,
@@ -213,7 +213,7 @@ function VariableInputComponent({
             variableName: formattedName,
             ...sharedProps
           }
-        ) : /* @__PURE__ */ React.createElement(
+        ) : /* @__PURE__ */ jsx(
           PillToggleInput,
           {
             value: stringValue,
@@ -225,7 +225,7 @@ function VariableInputComponent({
         );
         break;
       case "selection-list":
-        inputComponent = hasOptions ? /* @__PURE__ */ React.createElement(
+        inputComponent = hasOptions ? /* @__PURE__ */ jsx(
           SelectInput,
           {
             value: stringValue,
@@ -240,7 +240,7 @@ function VariableInputComponent({
         ) : fallbackTextarea;
         break;
       case "buttons":
-        inputComponent = hasOptions ? /* @__PURE__ */ React.createElement(
+        inputComponent = hasOptions ? /* @__PURE__ */ jsx(
           SelectInput,
           {
             value: stringValue,
@@ -255,7 +255,7 @@ function VariableInputComponent({
         ) : fallbackTextarea;
         break;
       case "checkbox":
-        inputComponent = hasOptions ? /* @__PURE__ */ React.createElement(
+        inputComponent = hasOptions ? /* @__PURE__ */ jsx(
           CheckboxGroupInput,
           {
             value: stringValue,
@@ -268,7 +268,7 @@ function VariableInputComponent({
         ) : fallbackTextarea;
         break;
       case "select":
-        inputComponent = hasOptions ? /* @__PURE__ */ React.createElement(
+        inputComponent = hasOptions ? /* @__PURE__ */ jsx(
           SelectInput,
           {
             value: stringValue,
@@ -281,7 +281,7 @@ function VariableInputComponent({
         ) : fallbackTextarea;
         break;
       case "number":
-        inputComponent = /* @__PURE__ */ React.createElement(
+        inputComponent = /* @__PURE__ */ jsx(
           NumberInput,
           {
             value: stringValue,
@@ -296,7 +296,7 @@ function VariableInputComponent({
         );
         break;
       case "slider":
-        inputComponent = /* @__PURE__ */ React.createElement(
+        inputComponent = /* @__PURE__ */ jsx(
           SliderInput,
           {
             value: stringValue,
@@ -318,7 +318,7 @@ function VariableInputComponent({
       case "percent":
       case "color":
       case "markdown":
-        inputComponent = /* @__PURE__ */ React.createElement(
+        inputComponent = /* @__PURE__ */ jsx(
           ScalarVariableInput,
           {
             kind: type,
@@ -330,7 +330,7 @@ function VariableInputComponent({
         );
         break;
       case "currency":
-        inputComponent = /* @__PURE__ */ React.createElement(
+        inputComponent = /* @__PURE__ */ jsx(
           CurrencyVariableInput,
           {
             value: effectiveValue,
@@ -346,28 +346,41 @@ function VariableInputComponent({
         break;
     }
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: containerRef,
-      className: compact ? "min-w-0 space-y-0.5" : "min-w-0 space-y-1.5"
-    },
-    !hideLabel && !compact && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Label, { className: "text-sm font-medium" }, formattedName), shownHelpText && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground mt-0.5" }, shownHelpText)),
-    !hideLabel && compact && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ React.createElement(Label, { className: "text-xs font-medium pb-1" }, formattedName), shownHelpText && /* @__PURE__ */ React.createElement("span", { className: "text-[11px] text-muted-foreground" }, "\xB7 ", shownHelpText)),
-    inputComponent,
-    randomAssignmentEnabled && /* @__PURE__ */ React.createElement("div", { className: "flex justify-end pt-1" }, /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        type: "button",
-        variant: isRandomAssignment ? "secondary" : "outline",
-        size: "sm",
-        className: compact ? "h-7 text-xs" : void 0,
-        onClick: () => onChange(RANDOM_AUTO_ASSIGN_VALUE),
-        "aria-pressed": isRandomAssignment
-      },
-      /* @__PURE__ */ React.createElement(Dices, { className: "h-3.5 w-3.5" }),
-      isRandomAssignment ? "Random on run" : "Assign randomly"
-    ))
+      className: compact ? "min-w-0 space-y-0.5" : "min-w-0 space-y-1.5",
+      children: [
+        !hideLabel && !compact && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: formattedName }),
+          shownHelpText && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: shownHelpText })
+        ] }),
+        !hideLabel && compact && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-xs font-medium pb-1", children: formattedName }),
+          shownHelpText && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted-foreground", children: [
+            "\xB7 ",
+            shownHelpText
+          ] })
+        ] }),
+        inputComponent,
+        randomAssignmentEnabled && /* @__PURE__ */ jsx("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: isRandomAssignment ? "secondary" : "outline",
+            size: "sm",
+            className: compact ? "h-7 text-xs" : void 0,
+            onClick: () => onChange(RANDOM_AUTO_ASSIGN_VALUE),
+            "aria-pressed": isRandomAssignment,
+            children: [
+              /* @__PURE__ */ jsx(Dices, { className: "h-3.5 w-3.5" }),
+              isRandomAssignment ? "Random on run" : "Assign randomly"
+            ]
+          }
+        ) })
+      ]
+    }
   );
 }
 export {

package/dist/agents/components/inputs/input-components/VideoVariableInput.js

@@ -1,9 +1,10 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import {
   MediaVariableInput
 } from "./MediaVariableInput.js";
 function VideoVariableInput(props) {
-  return /* @__PURE__ */ React.createElement(MediaVariableInput, { ...props, mediaKind: "video" });
+  return /* @__PURE__ */ jsx(MediaVariableInput, { ...props, mediaKind: "video" });
 }
 export {
   VideoVariableInput

package/dist/agents/components/inputs/input-components/YoutubeVariableInput.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Youtube as YoutubeIcon } from "@ai-matrx/icons/brand";
 import { Input } from "@ai-matrx/design-system/controls";
 import { cn } from "@ai-matrx/design-system";
@@ -54,24 +55,35 @@ function YoutubeVariableInput({
     const extracted = extractYoutubeId(raw);
     onChange(extracted ?? raw);
   };
-  return /* @__PURE__ */ React.createElement("div", { className: cn("space-y-1.5", compact && "space-y-1") }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ React.createElement(
-    YoutubeIcon,
-    {
-      className: cn(
-        "w-3.5 h-3.5 shrink-0",
-        id ? "text-red-500" : "text-muted-foreground"
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1.5", compact && "space-y-1"), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(
+        YoutubeIcon,
+        {
+          className: cn(
+            "w-3.5 h-3.5 shrink-0",
+            id ? "text-red-500" : "text-muted-foreground"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          mono: true,
+          value: stored,
+          onChange: (e) => handleChange(e.target.value),
+          placeholder: "Paste any YouTube URL or 11-char video ID",
+          "aria-label": `YouTube URL for ${variableName}`
+        }
       )
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Input,
-    {
-      mono: true,
-      value: stored,
-      onChange: (e) => handleChange(e.target.value),
-      placeholder: "Paste any YouTube URL or 11-char video ID",
-      "aria-label": `YouTube URL for ${variableName}`
-    }
-  )), id && stored !== id && /* @__PURE__ */ React.createElement("p", { className: "text-[10px] text-muted-foreground pl-5" }, "Saved as video ID: ", /* @__PURE__ */ React.createElement("span", { className: "font-mono" }, id)), id && stored === id && /* @__PURE__ */ React.createElement("p", { className: "text-[10px] text-muted-foreground pl-5 font-mono" }, "Video ID"), showWarning && /* @__PURE__ */ React.createElement("p", { className: "text-[10px] text-amber-600 dark:text-amber-400 pl-5" }, "Doesn\u2019t look like a YouTube URL or 11-character video ID yet \u2014 keep typing or paste a link."));
+    ] }),
+    id && stored !== id && /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground pl-5", children: [
+      "Saved as video ID: ",
+      /* @__PURE__ */ jsx("span", { className: "font-mono", children: id })
+    ] }),
+    id && stored === id && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground pl-5 font-mono", children: "Video ID" }),
+    showWarning && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-amber-600 dark:text-amber-400 pl-5", children: "Doesn\u2019t look like a YouTube URL or 11-character video ID yet \u2014 keep typing or paste a link." })
+  ] });
 }
 export {
   YoutubeVariableInput,

package/dist/agents/components/inputs/resources/AttachedDocumentChip.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement, useState } from "react";
 import { ChevronDown, FileText, Loader2, ArrowUpRight } from "lucide-react";
 import {
@@ -82,69 +83,94 @@ function AttachedDocumentChip({
     onOpen();
     setOpen(false);
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     Popover,
     {
       open,
       onOpenChange: (next) => void handleOpenChange(next),
-      modal: true
-    },
-    /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-      ComposerChip,
-      {
-        tone: "quiet",
-        onClick: onOpen,
-        "aria-label": `Document: ${title}`,
-        pressed,
-        busy: pending,
-        busyLabel: "Attaching",
-        icon: createElement(FileText, { className: theme.icon }),
-        label: compactChipLabel(title),
-        remove: {
-          label: `Remove ${title}`,
-          onRemove,
-          disabled: saving
-        },
-        parts: /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-          ComposerChipPart,
+      modal: true,
+      children: [
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            ComposerChip,
+            {
+              tone: "quiet",
+              onClick: onOpen,
+              "aria-label": `Document: ${title}`,
+              pressed,
+              busy: pending,
+              busyLabel: "Attaching",
+              icon: createElement(FileText, { className: theme.icon }),
+              label: compactChipLabel(title),
+              remove: {
+                label: `Remove ${title}`,
+                onRemove,
+                disabled: saving
+              },
+              parts: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                ComposerChipPart,
+                {
+                  tone: "quiet",
+                  onClick: stopBubble,
+                  onPointerDown: stopBubble,
+                  disabled: !fileId,
+                  "aria-label": `What the AI reads from ${title}: ${primaryFormShortLabel(representation)}, ${policyLabel(resourcePolicy)}`,
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      representationLabel(representation),
+                      " \xB7",
+                      " ",
+                      policyLabel(resourcePolicy)
+                    ] }),
+                    /* @__PURE__ */ jsx(ChevronDown, { className: "!size-3" })
+                  ]
+                }
+              ) })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(TooltipContent, { side: "top", className: "max-w-[16rem]", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Attached file" }),
+            /* @__PURE__ */ jsx("div", { className: "font-medium text-popover-foreground", children: title }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-0.5 text-[10px] text-muted-foreground/80", children: [
+              "The AI reads: ",
+              primaryFormShortLabel(representation),
+              fileId ? " \xB7 change it on the right" : ""
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          PopoverContent,
           {
-            tone: "quiet",
+            sizing: "content",
+            side: "top",
+            align: "start",
+            sideOffset: 6,
+            className: "max-h-[min(32rem,var(--radix-popover-content-available-height))] overflow-y-auto p-3",
             onClick: stopBubble,
-            onPointerDown: stopBubble,
-            disabled: !fileId,
-            "aria-label": `What the AI reads from ${title}: ${primaryFormShortLabel(representation)}, ${policyLabel(resourcePolicy)}`
-          },
-          /* @__PURE__ */ React.createElement("span", null, representationLabel(representation), " \xB7", " ", policyLabel(resourcePolicy)),
-          /* @__PURE__ */ React.createElement(ChevronDown, { className: "!size-3" })
-        ))
-      }
-    )), /* @__PURE__ */ React.createElement(TooltipContent, { side: "top", className: "max-w-[16rem]" }, /* @__PURE__ */ React.createElement("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground" }, "Attached file"), /* @__PURE__ */ React.createElement("div", { className: "font-medium text-popover-foreground" }, title), /* @__PURE__ */ React.createElement("div", { className: "mt-0.5 text-[10px] text-muted-foreground/80" }, "The AI reads: ", primaryFormShortLabel(representation), fileId ? " \xB7 change it on the right" : ""))),
-    /* @__PURE__ */ React.createElement(
-      PopoverContent,
-      {
-        sizing: "content",
-        side: "top",
-        align: "start",
-        sideOffset: 6,
-        className: "max-h-[min(32rem,var(--radix-popover-content-available-height))] overflow-y-auto p-3",
-        onClick: stopBubble
-      },
-      /* @__PURE__ */ React.createElement(
-        ResourceFamilyPolicyEditor,
-        {
-          fileId,
-          value: draftPolicy,
-          onChange: setDraftPolicy,
-          primaryRepresentation: draftRepresentation,
-          onPrimaryRepresentationChange: setDraftRepresentation,
-          disabled: saving,
-          compact: true
-        }
-      ),
-      /* @__PURE__ */ React.createElement("div", { className: "my-2 border-t border-border" }),
-      saving ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5 px-2 py-1 text-xs text-muted-foreground" }, /* @__PURE__ */ React.createElement(Loader2, { className: "h-3.5 w-3.5 animate-spin" }), " Saving your choice\u2026") : null,
-      /* @__PURE__ */ React.createElement(Tile, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(ArrowUpRight, null), title: "See file details", onClick: (event) => void openDetails(event), disabled: saving })
-    )
+            children: [
+              /* @__PURE__ */ jsx(
+                ResourceFamilyPolicyEditor,
+                {
+                  fileId,
+                  value: draftPolicy,
+                  onChange: setDraftPolicy,
+                  primaryRepresentation: draftRepresentation,
+                  onPrimaryRepresentationChange: setDraftRepresentation,
+                  disabled: saving,
+                  compact: true
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "my-2 border-t border-border" }),
+              saving ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-2 py-1 text-xs text-muted-foreground", children: [
+                /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
+                " Saving your choice\u2026"
+              ] }) : null,
+              /* @__PURE__ */ jsx(Tile, { variant: "quiet", icon: /* @__PURE__ */ jsx(ArrowUpRight, {}), title: "See file details", onClick: (event) => void openDetails(event), disabled: saving })
+            ]
+          }
+        )
+      ]
+    }
   );
 }
 export {

package/dist/agents/components/inputs/resources/AttachedDocumentChips.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@ai-matrx/design-system/controls";
 import { useEffect } from "react";
 import { AlertTriangle, FileText, RefreshCw } from "lucide-react";
@@ -129,27 +130,27 @@ function DocumentChipRow({
       itemId
     );
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     motion.div,
     {
       initial: { opacity: 0, scale: 0.85 },
       animate: { opacity: 1, scale: 1 },
       exit: { opacity: 0, scale: 0.85 },
-      className: "inline-flex shrink-0"
-    },
-    /* @__PURE__ */ React.createElement(
-      AttachedDocumentChip,
-      {
-        title,
-        fileId,
-        representation: meta.representation,
-        resourcePolicy: meta.resource_policy,
-        onOpen: openCanvas,
-        pressed: isShowing(itemId),
-        onRemove: onDetach,
-        onSettingsChange: (settings) => onSettingsChange(link, edgeKind, fileId, title, settings)
-      }
-    )
+      className: "inline-flex shrink-0",
+      children: /* @__PURE__ */ jsx(
+        AttachedDocumentChip,
+        {
+          title,
+          fileId,
+          representation: meta.representation,
+          resourcePolicy: meta.resource_policy,
+          onOpen: openCanvas,
+          pressed: isShowing(itemId),
+          onRemove: onDetach,
+          onSettingsChange: (settings) => onSettingsChange(link, edgeKind, fileId, title, settings)
+        }
+      )
+    }
   );
 }
 function AttachedDocumentChips({
@@ -282,55 +283,60 @@ function AttachedDocumentChips({
     }
     return true;
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: inline ? "contents" : "flex flex-wrap gap-1.5 px-2 pt-1.5 pb-0.5 shrink-0",
-      "data-rail-entry": inline ? "" : void 0
-    },
-    links.error && /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        type: "button",
-        tone: "warning",
-        className: "shrink-0",
-        onClick: () => void links.reload(),
-        disabled: links.status === "loading",
-        title: links.error,
-        icon: /* @__PURE__ */ React.createElement(AlertTriangle, null),
-        iconEnd: /* @__PURE__ */ React.createElement(RefreshCw, { className: links.status === "loading" ? "animate-spin" : void 0 })
-      },
-      "Attachment list unavailable"
-    ),
-    /* @__PURE__ */ React.createElement(AnimatePresence, { mode: "popLayout" }, processedDocs.map((link) => /* @__PURE__ */ React.createElement(
-      DocumentChipRow,
-      {
-        key: link.edgeId,
-        link,
-        edgeKind: "processed_document",
-        conversationId,
-        processedDocs,
-        visibleFiles,
-        onOpenDrawer: openDrawer,
-        isShowing: itemsTab.isShowing,
-        onDetach: () => detach("processed_document", link.resourceId),
-        onSettingsChange: changeSettings
-      }
-    )), visibleFiles.map((link) => /* @__PURE__ */ React.createElement(
-      DocumentChipRow,
-      {
-        key: link.edgeId,
-        link,
-        edgeKind: "file",
-        conversationId,
-        processedDocs,
-        visibleFiles,
-        onOpenDrawer: openDrawer,
-        isShowing: itemsTab.isShowing,
-        onDetach: () => detach("file", link.resourceId),
-        onSettingsChange: changeSettings
-      }
-    )))
+      "data-rail-entry": inline ? "" : void 0,
+      children: [
+        links.error && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            tone: "warning",
+            className: "shrink-0",
+            onClick: () => void links.reload(),
+            disabled: links.status === "loading",
+            title: links.error,
+            icon: /* @__PURE__ */ jsx(AlertTriangle, {}),
+            iconEnd: /* @__PURE__ */ jsx(RefreshCw, { className: links.status === "loading" ? "animate-spin" : void 0 }),
+            children: "Attachment list unavailable"
+          }
+        ),
+        /* @__PURE__ */ jsxs(AnimatePresence, { mode: "popLayout", children: [
+          processedDocs.map((link) => /* @__PURE__ */ jsx(
+            DocumentChipRow,
+            {
+              link,
+              edgeKind: "processed_document",
+              conversationId,
+              processedDocs,
+              visibleFiles,
+              onOpenDrawer: openDrawer,
+              isShowing: itemsTab.isShowing,
+              onDetach: () => detach("processed_document", link.resourceId),
+              onSettingsChange: changeSettings
+            },
+            link.edgeId
+          )),
+          visibleFiles.map((link) => /* @__PURE__ */ jsx(
+            DocumentChipRow,
+            {
+              link,
+              edgeKind: "file",
+              conversationId,
+              processedDocs,
+              visibleFiles,
+              onOpenDrawer: openDrawer,
+              isShowing: itemsTab.isShowing,
+              onDetach: () => detach("file", link.resourceId),
+              onSettingsChange: changeSettings
+            },
+            link.edgeId
+          ))
+        ] })
+      ]
+    }
   );
 }
 export {