@ai-matrx/chat 0.1.77 → 0.2.1

package/dist/agents/components/inputs/smart-input/SmartAgentInputStacked.js

@@ -0,0 +1,349 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ArrowUp } from "lucide-react";
+import { SmartAgentVariables } from "../variable-input-variations/SmartAgentVariables.js";
+import { AgentTextarea } from "./AgentTextarea.js";
+import { ComposerStopButton, InputActionButtons } from "./InputActionButtons.js";
+import { ConversationContextRail } from "./ConversationContextRail.js";
+import { UninitializedShell } from "./UninitializedShell.js";
+import { SmartInputFileDropTarget } from "./SmartInputFileDropTarget.js";
+import {
+  smartExecute,
+  cancelExecution
+} from "../../../redux/execution-system/thunks/smart-execute.thunk.js";
+import { useAppDispatch, useAppSelector } from "../../../../store/hooks.js";
+import { selectShowFreeformInput } from "../../../redux/execution-system/instance-ui-state/instance-ui-state.selectors.js";
+import { selectIsExecuting } from "../../../redux/execution-system/selectors/aggregate.selectors.js";
+import { selectAllResourcesResolved } from "../../../redux/execution-system/instance-resources/instance-resources.selectors.js";
+import { Button } from "@ai-matrx/design-system";
+import { cn } from "@ai-matrx/design-system";
+import { composerShows } from "./composer/composer-mode-visibility.js";
+import { ComposerChipsRow } from "./composer/ComposerChipsRow.js";
+import { ComposerMetaRow, ComposerPills, ComposerScopeCluster, ComposerValueGroupChip } from "./composer/ComposerMetaRow.js";
+import { useComposerFold } from "./composer/useComposerFold.js";
+function SmartAgentInputStacked({
+  conversationId,
+  uploadRoot = "userContent",
+  uploadPath = "agent-attachments",
+  enablePasteImages = true,
+  compact = false,
+  showSendButton = true,
+  showVariableIcon = true,
+  surfaceKey,
+  draftAlias,
+  disableSend = false,
+  variablesPanelStyle,
+  contextRailPresentation = "default",
+  contextRailAttachedItems,
+  extraRightControls,
+  surfaceValueAnchors,
+  composer
+}) {
+  const dispatch = useAppDispatch();
+  const [voiceBusy, setVoiceBusy] = useState(false);
+  const [expandRequestKey, setExpandRequestKey] = useState(0);
+  const { ref: composerRootRef, folded } = useComposerFold();
+  const showFreeformInput = useAppSelector(
+    selectShowFreeformInput(conversationId ?? "")
+  );
+  const isExecuting = useAppSelector(selectIsExecuting(conversationId ?? ""));
+  const allResourcesResolved = useAppSelector(
+    selectAllResourcesResolved(conversationId ?? "")
+  );
+  const sendBlocked = disableSend || voiceBusy || !allResourcesResolved;
+  if (!conversationId) {
+    return /* @__PURE__ */ jsx(UninitializedShell, {});
+  }
+  const handleSubmit = () => {
+    if (!sendBlocked) dispatch(smartExecute({ conversationId, surfaceKey }));
+  };
+  if (!showFreeformInput) {
+    const handleStop = () => dispatch(cancelExecution(conversationId));
+    const formCompact = composer.size === "compact" || composer.size === "launcher";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "matrx-touch-targets mx-auto flex w-full min-w-0 shrink-0 flex-col",
+          formCompact ? void 0 : "max-w-[768px]"
+        ),
+        "data-composer-size": composer.size,
+        "data-composer-style": "form",
+        "data-assist-dock-avoid": "",
+        children: /* @__PURE__ */ jsxs(
+          SmartInputFileDropTarget,
+          {
+            conversationId,
+            uploadRoot,
+            uploadPath,
+            pasteFiles: enablePasteImages,
+            className: cn(
+              "relative flex w-full min-h-0 flex-col gap-1.5 border border-border bg-card transition-colors focus-within:border-foreground/25",
+              "[&_[data-variable-row]]:px-1.5 [&_[data-variable-heading]]:px-1.5 [&>input[type=file]]:!hidden",
+              formCompact ? "rounded-[14px] p-1.5" : "rounded-[22px] p-2 shadow-[0_2px_10px_rgba(0,0,0,0.05)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                ConversationContextRail,
+                {
+                  conversationId,
+                  className: "px-0 pb-0",
+                  presentation: contextRailPresentation,
+                  attachedItems: contextRailAttachedItems,
+                  surfaceValueName: surfaceValueAnchors?.context,
+                  withAttachments: true,
+                  attachmentsSurfaceValueName: surfaceValueAnchors?.resources,
+                  withValueGroupChip: false
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SmartAgentVariables,
+                {
+                  conversationId,
+                  compact: formCompact,
+                  onSubmit: handleSubmit,
+                  styleOverride: variablesPanelStyle,
+                  surfaceValueName: surfaceValueAnchors?.variables
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-1.5", children: [
+                /* @__PURE__ */ jsx(ComposerValueGroupChip, { conversationId }),
+                /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
+                  extraRightControls,
+                  isExecuting ? /* @__PURE__ */ jsx(ComposerStopButton, { onStop: handleStop }) : /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      size: "sm",
+                      onClick: handleSubmit,
+                      disabled: sendBlocked,
+                      className: "h-8 gap-1.5 rounded-full px-3",
+                      children: [
+                        /* @__PURE__ */ jsx(ArrowUp, { className: "h-3.5 w-3.5" }),
+                        "Run"
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
+  const isCompact = composer.size === "compact";
+  const menuSide = composer.size === "splash" ? "bottom" : "top";
+  const cardClassName = cn(
+    "relative flex w-full min-h-0 flex-col border border-border bg-card transition-colors focus-within:border-foreground/25",
+    // ONE inset (Arman, 2026-10-03): the send button's distance from the
+    // card edge is every edge's distance. Variable labels and text start
+    // where the + glyph does (6px in).
+    isCompact ? "[&_[data-variable-row]]:px-2 [&_[data-variable-heading]]:px-2" : "[&_[data-variable-row]]:px-1.5 [&_[data-variable-heading]]:px-1.5",
+    // The drop target's hidden file input is not a row (it took a gap), and
+    // an inline-block textarea leaves a 7px baseline strip under itself.
+    "[&>input[type=file]]:!hidden [&_textarea]:block",
+    isCompact ? "rounded-[14px] p-1.5 gap-1.5" : "rounded-[22px] p-2 gap-0 shadow-[0_2px_10px_rgba(0,0,0,0.05)] dark:shadow-[0_1px_0_0_rgba(255,255,255,0.04)_inset,0_1px_2px_0_rgba(0,0,0,0.4)]"
+  );
+  const textarea = /* @__PURE__ */ jsx(
+    AgentTextarea,
+    {
+      draftAlias,
+      conversationId,
+      compact: isCompact,
+      uploadRoot,
+      uploadPath,
+      surfaceKey,
+      disableSend: sendBlocked,
+      initiallyExpanded: expandRequestKey > 0,
+      showExpandToggle: !isCompact,
+      placeholder: composer.placeholder,
+      maxHeightPx: composer.maxInputHeightPx,
+      textMenu: composer.textMenu,
+      minHeightPx: isCompact ? 32 : 64,
+      composerType: true,
+      composerRows: !isCompact,
+      flush: true
+    },
+    `composer-${composer.size}-${expandRequestKey}`
+  );
+  const buttonsProps = {
+    conversationId,
+    uploadRoot,
+    uploadPath,
+    showSendButton,
+    showVariableIcon,
+    surfaceKey,
+    disableSend: sendBlocked
+  };
+  const composerParts = { size: composer.size, mode: composer.mode, folded };
+  if (composer.size === "launcher") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: composerRootRef,
+        className: "matrx-touch-targets mx-auto flex w-full min-w-0 max-w-[420px] shrink-0 flex-col",
+        "data-composer-size": composer.size,
+        "data-composer-mode": composer.mode,
+        "data-assist-dock-avoid": "",
+        children: /* @__PURE__ */ jsxs(
+          SmartInputFileDropTarget,
+          {
+            conversationId,
+            uploadRoot,
+            uploadPath,
+            pasteFiles: enablePasteImages,
+            className: cn(
+              "relative flex w-full min-h-0 flex-col gap-1 rounded-[18px] border p-1.5",
+              "border-glass-edge bg-glass shadow-glass backdrop-blur-glass backdrop-saturate-glass transition-[border-color,background-color,box-shadow]",
+              "focus-within:border-primary/70 focus-within:bg-card focus-within:ring-2 focus-within:ring-primary/15 focus-within:shadow-glass-lg",
+              "[&_[data-variable-row]]:px-2 [&_[data-variable-heading]]:px-2",
+              "[&>input[type=file]]:!hidden [&_textarea]:block"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                ConversationContextRail,
+                {
+                  conversationId,
+                  presentation: "overflow-only",
+                  attachedItems: contextRailAttachedItems,
+                  surfaceValueName: surfaceValueAnchors?.context,
+                  withValueGroupChip: false,
+                  className: "px-0 pb-0"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SmartAgentVariables,
+                {
+                  conversationId,
+                  compact: true,
+                  onSubmit: handleSubmit,
+                  styleOverride: variablesPanelStyle,
+                  surfaceValueName: surfaceValueAnchors?.variables
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-end gap-1.5", children: [
+                /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+                  AgentTextarea,
+                  {
+                    draftAlias,
+                    conversationId,
+                    compact: true,
+                    uploadRoot,
+                    uploadPath,
+                    surfaceKey,
+                    disableSend: sendBlocked,
+                    autoFocus: false,
+                    showExpandToggle: false,
+                    placeholder: composer.placeholder,
+                    maxHeightPx: composer.maxInputHeightPx,
+                    minHeightPx: 32,
+                    composerType: true,
+                    flush: true
+                  },
+                  `composer-launcher-${expandRequestKey}`
+                ) }),
+                /* @__PURE__ */ jsx(
+                  InputActionButtons,
+                  {
+                    ...buttonsProps,
+                    onVoiceBusyChange: setVoiceBusy,
+                    composer: { ...composerParts, part: "launcher" }
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: composerRootRef,
+      className: cn(
+        // THE 44px FLOOR for every control on a touch layout (globals.css);
+        // desktop density is untouched.
+        "matrx-touch-targets mx-auto flex w-full min-w-0 shrink-0 flex-col gap-1",
+        isCompact ? void 0 : "max-w-[768px]"
+      ),
+      "data-composer-size": composer.size,
+      "data-composer-mode": composer.mode,
+      "data-composer-folded": folded ? "" : void 0,
+      "data-assist-dock-avoid": "",
+      children: [
+        composer.meta !== "none" && composerShows(composer.mode, "chips.row") ? /* @__PURE__ */ jsx(ComposerChipsRow, { conversationId, mode: composer.mode, menuSide, chipShape: composer.chipShape }) : null,
+        /* @__PURE__ */ jsxs(
+          SmartInputFileDropTarget,
+          {
+            conversationId,
+            uploadRoot,
+            uploadPath,
+            pasteFiles: enablePasteImages,
+            className: cardClassName,
+            children: [
+              /* @__PURE__ */ jsx(
+                ConversationContextRail,
+                {
+                  conversationId,
+                  presentation: contextRailPresentation,
+                  attachedItems: contextRailAttachedItems,
+                  surfaceValueName: surfaceValueAnchors?.context,
+                  withAttachments: true,
+                  attachmentsSurfaceValueName: surfaceValueAnchors?.resources,
+                  withValueGroupChip: false,
+                  className: "px-0 pb-1"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SmartAgentVariables,
+                {
+                  conversationId,
+                  compact: isCompact,
+                  onSubmit: handleSubmit,
+                  styleOverride: variablesPanelStyle,
+                  surfaceValueName: surfaceValueAnchors?.variables
+                }
+              ),
+              isCompact ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-end gap-1.5", children: [
+                /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: textarea }),
+                /* @__PURE__ */ jsx(InputActionButtons, { ...buttonsProps, composer: { ...composerParts, part: "send" } })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                textarea,
+                /* @__PURE__ */ jsx(
+                  InputActionButtons,
+                  {
+                    ...buttonsProps,
+                    onVoiceBusyChange: setVoiceBusy,
+                    extraRightControls,
+                    onRequestInputExpand: () => setExpandRequestKey((key) => key + 1),
+                    composer: composerParts
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        isCompact ? /* @__PURE__ */ jsx(
+          InputActionButtons,
+          {
+            ...buttonsProps,
+            onVoiceBusyChange: setVoiceBusy,
+            extraRightControls,
+            onRequestInputExpand: () => setExpandRequestKey((key) => key + 1),
+            composer: {
+              ...composerParts,
+              part: "controls",
+              leading: composer.meta === "none" ? void 0 : /* @__PURE__ */ jsx(ComposerScopeCluster, { conversationId, composer, folded }),
+              trailing: composer.meta === "none" ? void 0 : /* @__PURE__ */ jsx(ComposerPills, { conversationId, composer, menuSide, folded })
+            }
+          }
+        ) : composer.meta === "none" ? null : /* @__PURE__ */ jsx(ComposerMetaRow, { conversationId, composer, menuSide, folded })
+      ]
+    }
+  );
+}
+export {
+  SmartAgentInputStacked
+};

package/dist/agents/components/inputs/smart-input/SmartInputFileDropTarget.d.ts

@@ -0,0 +1,15 @@
+interface SmartInputFileDropTargetProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+    conversationId: string;
+    uploadRoot?: string;
+    uploadPath?: string;
+    /**
+     * Pasted files (a screenshot, Cmd/Ctrl+V of a copied file) attach through
+     * the same upload as a drop. react-dropzone OWNS paste-to-upload (v20+,
+     * on by default); nothing else in the input may also catch the paste, or
+     * every pasted image attaches twice (2026-10-06). False = paste stays text.
+     */
+    pasteFiles?: boolean;
+    children: React.ReactNode;
+}
+export declare function SmartInputFileDropTarget({ conversationId, uploadRoot, uploadPath, pasteFiles, className, children, ...rootProps }: SmartInputFileDropTargetProps): import("react").JSX.Element;
+export {};

package/dist/agents/components/inputs/smart-input/SmartInputFileDropTarget.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDropzone } from "react-dropzone";
+import { Loader2, Upload } from "lucide-react";
+import { cn } from "@ai-matrx/design-system";
+import { useUploadAgentResources } from "../resources/usePasteImageResource.js";
+function SmartInputFileDropTarget({
+  conversationId,
+  uploadRoot,
+  uploadPath,
+  pasteFiles = true,
+  className,
+  children,
+  ...rootProps
+}) {
+  const uploadResources = useUploadAgentResources(conversationId, {
+    uploadRoot,
+    uploadPath
+  });
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop: (files) => void uploadResources(files),
+    noClick: true,
+    noKeyboard: true,
+    noPaste: !pasteFiles
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...getRootProps({
+        ...rootProps,
+        className: cn("relative", className)
+      }),
+      "data-agent-input-shell": true,
+      "data-drop-active": isDragActive ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsx("input", { ...getInputProps() }),
+        children,
+        isDragActive ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-0 z-30 flex items-center justify-center rounded-[inherit] border-2 border-dashed border-primary bg-background/90 backdrop-blur-sm",
+            "aria-live": "polite",
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 font-medium text-primary", children: [
+              /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+                /* @__PURE__ */ jsx(Upload, { className: "h-6 w-6", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx(
+                  Loader2,
+                  {
+                    className: "absolute -bottom-1 -right-1 h-3.5 w-3.5 animate-spin rounded-full bg-background",
+                    "aria-hidden": "true"
+                  }
+                )
+              ] }),
+              "Drop files to attach"
+            ] })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  SmartInputFileDropTarget
+};

package/dist/agents/components/inputs/smart-input/UninitializedShell.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function UninitializedShell(): React.JSX.Element;

package/dist/agents/components/inputs/smart-input/UninitializedShell.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUp } from "lucide-react";
+import { Button } from "@ai-matrx/design-system";
+const SEND_BTN_CLASS = "h-9 w-9 p-0 shrink-0 rounded-full bg-foreground text-background hover:bg-foreground/90 disabled:opacity-25 disabled:shadow-none shadow-[0_1px_0_0_rgba(255,255,255,0.25)_inset,0_1px_2px_0_rgba(0,0,0,0.25)]";
+function UninitializedShell() {
+  return /* @__PURE__ */ jsxs("div", { className: "bg-card rounded-[20px] border border-border overflow-hidden shadow-[0_2px_16px_-4px_rgba(0,0,0,0.08)] dark:shadow-[0_1px_0_0_rgba(255,255,255,0.04)_inset,0_1px_2px_0_rgba(0,0,0,0.4)]", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-3 pt-3", children: /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        disabled: true,
+        placeholder: "Initializing...",
+        className: "w-full bg-transparent border-none outline-none text-base text-muted-foreground/50 placeholder:text-muted-foreground/40 resize-none leading-7",
+        style: { minHeight: 40, maxHeight: 200 },
+        rows: 1
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end px-2 pb-2", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: true,
+        className: SEND_BTN_CLASS,
+        "aria-label": "Send message (still initializing)",
+        children: /* @__PURE__ */ jsx(ArrowUp, { className: "w-5 h-5" })
+      }
+    ) })
+  ] });
+}
+export {
+  UninitializedShell
+};

package/dist/agents/components/inputs/smart-input/ViewOnlyComposerBar.d.ts

@@ -0,0 +1 @@
+export declare function ViewOnlyComposerBar(): import("react").JSX.Element;

package/dist/agents/components/inputs/smart-input/ViewOnlyComposerBar.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Eye } from "lucide-react";
+function ViewOnlyComposerBar() {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "data-testid": "view-only-composer",
+      className: "mx-auto mb-2 flex w-full items-center gap-2 rounded-xl border border-border bg-card px-3 py-2.5 text-sm text-muted-foreground",
+      title: "Ask the owner for edit access to reply here.",
+      children: [
+        /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4 shrink-0", "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: "View only \u2014 you can read this chat, not reply" })
+      ]
+    }
+  );
+}
+export {
+  ViewOnlyComposerBar
+};

package/dist/agents/components/inputs/smart-input/composer/ComposerAgentPill.d.ts

@@ -0,0 +1,15 @@
+import type { ComposerAgentControl, ComposerMode, ComposerSize } from "./composer-types.js";
+interface ComposerAgentPillProps {
+    conversationId: string;
+    mode: ComposerMode;
+    size: ComposerSize;
+    agentControl?: ComposerAgentControl;
+    menuSide: "top" | "bottom";
+    /**
+     * The composer is narrow (useComposerFold): Output and Effort leave the row
+     * and ride THIS menu, under the agent choice (Arman, 2026-10-04).
+     */
+    folded?: boolean;
+}
+export declare function ComposerAgentPill({ conversationId, mode, size, agentControl, menuSide, folded }: ComposerAgentPillProps): import("react").JSX.Element;
+export {};