@ai-matrx/chat 0.5.4 → 0.5.5

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # @ai-matrx/chat
 
+## 0.5.5 — attach a rendered page: screenshot · code · text
+
+- `ResourceOptions.representation` is now a per-resource-type union (`RepresentationByResourceType`:
+  `processed_document` → clean/raw/pdf, `rendered_artifact` → code/screenshot/text).
+- New block type `rendered_artifact` (an HTML page / canvas item as its code or visible text) riding
+  `request.context` as a resource reference with the chosen representation — never `user_input`.
+  Helpers: `agents/utils/renderedArtifactContext` (`availableRenderedArtifactRepresentations`,
+  `renderedArtifactContextEntry`).
+- `useAttachRenderedArtifact(conversationId)`: one click attaches code/text, or a screenshot whose chip
+  shows at once (pending) and fills when the host's capture lands (stored cloud file, or a local PNG
+  uploaded through the paste-image path) — an explicit image part, captured at attach time.
+- Consumer action: a host with a capture engine passes it as `capture` for `screenshot`.
+
+## Unreleased — message prints use each block's own print adapter; live pages never print blank
+
+- `conversation/utils/markdown-print`: every embedded block (fence or `<artifact>`) prints through
+  `@ai-matrx/print`'s block-printer registry (`getBlockPrinter(type).toPrintHtml`) — a quiz as its
+  questions, a deck as its study sheet, an HTML page as its picture — and a message with a web page
+  says "Web pages print as a picture inside a message…". Diagrams still draw once.
+- Full Print (`useDomCapturePrint`) pre-passes every `<iframe>` into its picture before the raster
+  (`conversation/utils/frame-print` → `framesToPictures`), restored after; with no capture engine
+  the frame prints `FRAME_PRINT_STAND_IN`, never blank.
+- New host port `@ai-matrx/chat/host/frame-print`: `setFramePrintCapture(fn)` /
+  `getFramePrintCapture()`, `FramePrintCapture`, `FRAME_PRINT_STAND_IN`.
+- Needs `@ai-matrx/print` ≥ 0.12.0. Consumer action: a host with a page capture engine calls
+  `setFramePrintCapture`; register block printers with `registerBlockPrinter` (print 0.12).
+
+## Unreleased — the Chat-mode agent menu, rebuilt to the owner's layout
+
+- The agent pill's Chat menu is `Agent: <name> ›` · `Model: <model> ›` · "Choose your chat agent"
+  (☆ chat agents, ☆ Custom Agent) · `Choose any agent ›`. Every deeper menu opens the same way (one
+  right chevron; a pushed page in the phone sheet, which this menu now uses on phones). No row carries
+  an explanation line.
+- Custom Agent is the Matrx Chat agent (`chat.cx_default`), no longer the default-chat job; the menu no
+  longer writes a personal default model.
+- `QuickRunModelSelect` takes `presentation="inline"` + `onChosen`.
+- `conversation/utils/markdown-print` follows print 0.12 (`renderBlock` per block; diagrams drawn once).
+- Needs `@ai-matrx/agents` with `ModelListDropdown presentation="inline"`. Consumer action: none.
+
+## Unreleased — wide figures: a rendered page may widen past the reading column
+
+- `assistant-message-layout` exports `WIDE_FIGURE_CLASS`, `WIDE_FIGURE_SCOPE_ATTRIBUTE` and
+  `WIDE_FIGURE_MAX_WIDTH_PX` (1100). The transcript scroll area (a size container) carries
+  `data-wide-figures` only for a centered, reading-width, edge-scrolled column; inside it an element
+  with `WIDE_FIGURE_CLASS` widens to the transcript (1rem gutters, ≤1100px), centered on the column.
+  Everywhere else — `width: "fill"`, start-aligned, notes, rich-document surfaces — it does nothing.
+
+Consumer action: put `WIDE_FIGURE_CLASS` on a figure that should use the room (matrx-frontend's
+inline HTML page card does).
+
+## Unreleased — tap-target comes from design-system
+
+- Imports `@ai-matrx/design-system/tap-target` (and `/tap-target/buttons`, `tap-target.css`) instead of the
+  retired `@ai-matrx/tap-target` (Arman, 2026-10-08: tap-target merges into design-system); the
+  `@ai-matrx/tap-target` dependency is dropped.
+
+Consumer action: none.
+
 ## 0.5.4 — tree-shakeable, and the first screen sheds its heavy parts
 
 - `"sideEffects"` is no longer `true`: it lists the CSS and the ten files that run on import

package/dist/agents/components/chat/ChatIncognitoHeaderButton.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { GhostTapButton } from "@ai-matrx/tap-target/buttons";
+import { GhostTapButton } from "@ai-matrx/design-system/tap-target/buttons";
 import { PageHeaderRightPortal } from "../../../host/chrome.js";
 import { useChatIncognito } from "./ChatIncognitoProvider.js";
 function ChatIncognitoHeaderButton() {

package/dist/agents/components/chat/SandboxPanel.js

@@ -7,7 +7,7 @@ import {
   ExternalLinkTapButton,
   CheckTapButton,
   XTapButton
-} from "@ai-matrx/tap-target/buttons";
+} from "@ai-matrx/design-system/tap-target/buttons";
 import { sandboxDisplayName } from "../../../compute/targets.js";
 import {
   Plus,

package/dist/agents/components/context-items/registry.js

@@ -299,6 +299,15 @@ const CONTEXT_ITEM_TYPE_DEFS = [
     editable: false,
     Body: GenericBody
   },
+  {
+    // An HTML page / canvas item attached as its code or visible text.
+    blockTypes: ["rendered_artifact"],
+    typeLabel: "Page",
+    icon: Code2,
+    themeKey: "editor_code_snippet",
+    editable: false,
+    Body: GenericBody
+  },
   {
     blockTypes: ["editor_code_snippet"],
     typeLabel: "Code",

package/dist/agents/components/conversation-history/ConversationHistorySidebar.js

@@ -73,7 +73,7 @@ import { toast } from "../../../host/notify.js";
 import {
   LoadingTapButton,
   RefreshCwTapButton
-} from "@ai-matrx/tap-target/buttons";
+} from "@ai-matrx/design-system/tap-target/buttons";
 import { useConversationServerSearch } from "./useConversationServerSearch.js";
 import { ConversationSearchStatus } from "./ConversationSearchStatus.js";
 import { countConversationSearchCorpus } from "../../redux/conversation-history/conversation-search.js";

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

@@ -25,6 +25,9 @@ import { dismissRemarkChip, remarkSourceOf } from "../../../redux/execution-syst
 import {
   AttachedDocumentChip
 } from "./AttachedDocumentChip.js";
+function isDocumentRepresentation(value) {
+  return value === "clean" || value === "raw" || value === "pdf";
+}
 function getBlockTypeDisplay(blockType) {
   const def = resolveContextItemDef(blockType);
   return { icon: def.icon, label: def.typeLabel };
@@ -180,7 +183,7 @@ function PendingDocumentResourceChip({
           title: getResourceLabel(resource),
           pending: resource.status === "pending" || resource.status === "resolving",
           fileId: pendingDocumentFileId(resource),
-          representation: resource.options.representation,
+          representation: isDocumentRepresentation(resource.options.representation) ? resource.options.representation : void 0,
           resourcePolicy: resource.options.resourcePolicy,
           onOpen,
           pressed,

package/dist/agents/components/inputs/resources/useAttachRenderedArtifact.d.ts

@@ -0,0 +1,20 @@
+import type { RenderedArtifactRepresentation } from "../../../types/instance.types.js";
+import { type RenderedArtifactSource } from "../../../utils/renderedArtifactContext.js";
+/** What a host capture port returns: a stored cloud image, or a local PNG to upload. */
+export type RenderedCaptureResult = {
+    kind: "stored";
+    fileId: string;
+    width: number;
+    height: number;
+    url?: string | null;
+} | {
+    kind: "file";
+    file: File;
+};
+export interface AttachRenderedArtifactArgs {
+    source: RenderedArtifactSource;
+    representation: RenderedArtifactRepresentation;
+    /** Required for `screenshot`: produces the image now (at attach time). */
+    capture?: () => Promise<RenderedCaptureResult>;
+}
+export declare function useAttachRenderedArtifact(conversationId: string | null | undefined): (args: AttachRenderedArtifactArgs) => Promise<boolean>;

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

@@ -0,0 +1,107 @@
+"use client";
+import { toast } from "../../../../host/notify.js";
+import { useAppDispatch, useAppStore } from "../../../../store/hooks.js";
+import {
+  addResource,
+  removeResource,
+  setResourcePreview,
+  setResourceStatus
+} from "../../../redux/execution-system/instance-resources/instance-resources.slice.js";
+import { generateResourceId } from "../../../redux/execution-system/utils/ids.js";
+import {
+  RENDERED_ARTIFACT_BLOCK_TYPE
+} from "../../../utils/renderedArtifactContext.js";
+import { useAttachResource } from "./attach-resource.js";
+import { useUploadAgentResources } from "./usePasteImageResource.js";
+function screenshotName(title) {
+  const base = title.trim().replace(/[^\w\s.-]+/g, "").trim().slice(0, 60) || "page";
+  return `${base} screenshot.png`;
+}
+function useAttachRenderedArtifact(conversationId) {
+  const dispatch = useAppDispatch();
+  const store = useAppStore();
+  const attachResource = useAttachResource(conversationId ?? "");
+  const uploadResources = useUploadAgentResources(conversationId ?? "", {
+    uploadRoot: "attachments",
+    uploadPath: "screenshots"
+  });
+  return async ({ source, representation, capture }) => {
+    if (!conversationId) {
+      toast.error("Open a chat to attach this to.");
+      return false;
+    }
+    if (representation !== "screenshot") {
+      const resourceId = generateResourceId();
+      dispatch(
+        addResource({
+          conversationId,
+          blockType: RENDERED_ARTIFACT_BLOCK_TYPE,
+          resourceId,
+          source,
+          options: { representation }
+        })
+      );
+      dispatch(
+        setResourcePreview({
+          conversationId,
+          resourceId,
+          preview: `${source.title || "Page"} \xB7 ${representation === "code" ? "Code" : "Text"}`
+        })
+      );
+      return true;
+    }
+    if (!capture) {
+      toast.error("This item can't be captured as an image.");
+      return false;
+    }
+    const name = screenshotName(source.title);
+    const placeholderId = generateResourceId();
+    dispatch(
+      addResource({
+        conversationId,
+        blockType: "image",
+        resourceId: placeholderId,
+        source: { filename: name, mime_type: "image/png" }
+      })
+    );
+    try {
+      const result = await capture();
+      const stillAttached = store.getState().instanceResources.byConversationId[conversationId]?.[placeholderId] !== void 0;
+      if (!stillAttached) return false;
+      if (result.kind === "file") {
+        dispatch(removeResource({ conversationId, resourceId: placeholderId }));
+        await uploadResources([result.file]);
+        return true;
+      }
+      const attached = await attachResource({
+        type: "file",
+        data: {
+          id: result.fileId,
+          filename: name,
+          url: result.url ?? void 0,
+          type: "image/png",
+          mime_type: "image/png",
+          details: { filename: name }
+        }
+      });
+      if (!attached) throw new Error("The screenshot could not be attached");
+      dispatch(removeResource({ conversationId, resourceId: placeholderId }));
+      return true;
+    } catch (err) {
+      const reason = err instanceof Error ? err.message : "Capture failed";
+      dispatch(
+        setResourceStatus({
+          conversationId,
+          resourceId: placeholderId,
+          status: "error",
+          errorMessage: reason
+        })
+      );
+      toast.error(`Couldn't capture the page: ${reason}`);
+      return false;
+    }
+  };
+}
+export {
+  useAttachRenderedArtifact
+};