feat(ui): submit canvas edit request

Signed-off-by: Petr Kadlec <petr@puradesign.cz>

Author: kapetr

apps/agentstack-sdk-py/examples/artifacts_test_agent.py

@@ -44,23 +44,52 @@ async def artifacts_agent(
 
     await context.store(input)
 
-    # canvas_edit_request = await canvas.parse_canvas_edit_request(message=input)
+    canvas_edit_request = await canvas.parse_canvas_edit_request(message=input)
 
-    # history = [message async for message in context.load_history() if isinstance(message, Message) and message.parts]
+    print(f"Canvas Edit Request: {canvas_edit_request}")
 
-    recipe_title = random.choice(RECIPE_TITLES)
+    if canvas_edit_request:
+        recipe_title = "Canvas Recipe EDITED"
 
-    response = f"""\
-Here's your recipe:
+        original_recipe = (
+            canvas_edit_request.artifact.parts[0].root.text
+            if isinstance(canvas_edit_request.artifact.parts[0].root, TextPart)
+            else ""
+        )
+        edited_part = original_recipe[canvas_edit_request.start_index : canvas_edit_request.end_index]
+        description = f"You requested to edit this part:\n\n*{edited_part}*\n\n"
+
+        response = f"""\
+{description}
 
 ```recipe
-# {recipe_title}
+# Canvas Recipe EDITED
 
 ## Ingredients
 - bread (1 slice)
 - butter (1 slice)
 
-![test image](agentstack://artifact-test-image)
+## Instructions
+1. Cut a slice of bread.
+2. Cut a slice of butter.
+3. Spread the slice of butter on the slice of bread.
+```
+
+Enjoy your edited meal!
+"""
+    else:
+        recipe_title = random.choice(RECIPE_TITLES)
+        description = "Here's your recipe:"
+
+        response = f"""\
+{description}
+
+```recipe
+# {recipe_title}
+
+## Ingredients
+- bread (1 slice)
+- butter (1 slice)
 
 ## Instructions
 1. Cut a slice of bread.

apps/agentstack-sdk-ts/src/client/a2a/extensions/handle-agent-card.ts

@@ -19,6 +19,7 @@ import { oauthProviderExtension } from './services/oauth-provider';
 import { platformApiExtension } from './services/platform';
 import type { SecretDemands, SecretFulfillments } from './services/secrets';
 import { secretsExtension } from './services/secrets';
+import type { CanvasFulfillments } from './ui/canvas';
 import { canvasExtension } from './ui/canvas';
 import { oauthRequestExtension } from './ui/oauth';
 import type { SettingsDemands, SettingsFulfillments } from './ui/settings';
@@ -29,10 +30,11 @@ export interface Fulfillments {
   llm: (demand: LLMDemands) => Promise<LLMFulfillments>;
   embedding: (demand: EmbeddingDemands) => Promise<EmbeddingFulfillments>;
   mcp: (demand: MCPDemands) => Promise<MCPFulfillments>;
-  oauth: (demand: OAuthDemands) => Promise<OAuthFulfillments>;
+  oauth: (demand: OAuthDemands) => OAuthFulfillments;
   settings: (demand: SettingsDemands) => Promise<SettingsFulfillments>;
   secrets: (demand: SecretDemands) => Promise<SecretFulfillments>;
   form: (demand: FormDemands) => Promise<FormFulfillments>;
+  canvasEditRequest: () => CanvasFulfillments | null;
   oauthRedirectUri: () => string | null;
   getContextToken: () => ContextToken;
 }
@@ -53,6 +55,7 @@ const fulfillOAuthDemand = fulfillServiceExtensionDemand(oauthProviderExtension)
 const fulfillSettingsDemand = fulfillServiceExtensionDemand(settingsExtension);
 const fulfillSecretDemand = fulfillServiceExtensionDemand(secretsExtension);
 const fulfillFormDemand = fulfillServiceExtensionDemand(formExtension);
+const fulfillCanvasDemand = fulfillServiceExtensionDemand(canvasExtension);
 
 export const handleAgentCard = (agentCard: { capabilities: AgentCapabilities }) => {
   const extensions = agentCard.capabilities.extensions ?? [];
@@ -99,6 +102,13 @@ export const handleAgentCard = (agentCard: { capabilities: AgentCapabilities })
       fulfilledMetadata = fulfillFormDemand(fulfilledMetadata, await fulfillments.form(formDemands));
     }
 
+    if (canvasDemands !== undefined) {
+      const canvasEditRequest = fulfillments.canvasEditRequest();
+      if (canvasEditRequest) {
+        fulfilledMetadata = fulfillCanvasDemand(fulfilledMetadata, canvasEditRequest);
+      }
+    }
+
     const oauthRedirectUri = fulfillments.oauthRedirectUri();
     if (oauthRedirectUri) {
       fulfilledMetadata = {

apps/agentstack-sdk-ts/src/client/a2a/extensions/ui/canvas.ts

@@ -20,7 +20,7 @@ const responseSchema = z.object({
   artifact_id: z.string(),
 });
 
-type CanvasFulfillments = z.infer<typeof responseSchema>;
+export type CanvasFulfillments = z.infer<typeof responseSchema>;
 
 export const canvasExtension: A2AServiceExtension<typeof URI, z.infer<typeof schema>, CanvasFulfillments> = {
   getDemandsSchema: () => schema,

apps/agentstack-sdk-ts/src/index.ts

@@ -21,6 +21,7 @@ export * from './client/a2a/extensions/services/platform';
 export * from './client/a2a/extensions/services/secrets';
 export * from './client/a2a/extensions/types';
 export * from './client/a2a/extensions/ui/agent-detail';
+export * from './client/a2a/extensions/ui/canvas';
 export * from './client/a2a/extensions/ui/citation';
 export * from './client/a2a/extensions/ui/form-request';
 export * from './client/a2a/extensions/ui/oauth';

apps/agentstack-ui/src/api/a2a/client.ts

@@ -124,8 +124,6 @@ export const buildA2AClient = async <UIGenericPart = never>({
           .with({ kind: 'artifact-update' }, (event) => {
             taskId = event.taskId;
 
-            console.log({ demands });
-
             const parts = handleArtifactUpdate(event, demands.canvasDemands !== undefined);
 
             messageSubject.next({ type: RunResultType.Parts, parts, taskId });

apps/agentstack-ui/src/components/MarkdownContent/MarkdownContent.tsx

@@ -25,6 +25,7 @@ export interface MarkdownContentProps {
   children?: string;
   className?: string;
   remarkPlugins?: PluggableList;
+  rehypePlugins?: PluggableList;
   components?: Components;
 }
 
@@ -33,6 +34,7 @@ export function MarkdownContent({
   showMermaidDiagrams,
   className,
   remarkPlugins: remarkPluginsProps,
+  rehypePlugins: rehypePluginsProps,
   components: componentsProps,
   children,
 }: MarkdownContentProps) {
@@ -49,11 +51,12 @@ export function MarkdownContent({
   );
 
   const extendedRemarkPlugins = useMemo(() => [...remarkPlugins, ...(remarkPluginsProps ?? [])], [remarkPluginsProps]);
+  const extendedRehypePlugins = useMemo(() => [...rehypePlugins, ...(rehypePluginsProps ?? [])], [rehypePluginsProps]);
 
   return (
     <div ref={containerRef} className={clsx(classes.root, className)}>
       <Markdown
-        rehypePlugins={rehypePlugins}
+        rehypePlugins={extendedRehypePlugins}
         remarkPlugins={extendedRemarkPlugins}
         components={extendedComponents}
         urlTransform={urlTransform}

apps/agentstack-ui/src/components/MarkdownContent/rehype/index.ts

@@ -7,7 +7,5 @@ import rehypeKatex from 'rehype-katex';
 import type { PluggableList } from 'unified';
 
 import { rehypeInlineCode } from './rehypeInlineCode';
-import { rehypeSourcePosition } from './rehypeSourcePosition';
 
-// TODO: remove rehypeSourcePosition from global plugins
-export const rehypePlugins = [rehypeKatex, rehypeInlineCode, rehypeSourcePosition] satisfies PluggableList;
+export const rehypePlugins = [rehypeKatex, rehypeInlineCode] satisfies PluggableList;

apps/agentstack-ui/src/modules/canvas/components/Canvas.tsx

@@ -6,7 +6,6 @@
 import { useMemo, useRef } from 'react';
 
 import { CopyButton } from '#components/CopyButton/CopyButton.tsx';
-import type { MarkdownSelection } from '#components/MarkdownContent/index.ts';
 import { UIMessagePartKind } from '#modules/messages/types.ts';
 
 import { useCanvas } from '../contexts';
@@ -26,16 +25,6 @@ export function Canvas() {
     return null;
   }
 
-  const handleTextSelected = (selection: MarkdownSelection) => {
-    console.log('Start index:', selection.start);
-    console.log('End index:', selection.end);
-    console.log('Selected text:', selection.text);
-    console.log('Selected markdown:', content?.slice(selection.start, selection.end));
-
-    // Do something with the selection indices
-    // e.g., send to backend, create annotation, etc.
-  };
-
   return (
     <div className={classes.root}>
       <div className={classes.container}>
@@ -48,7 +37,7 @@ export function Canvas() {
         </header>
 
         <div className={classes.body} ref={contentRef}>
-          <CanvasMarkdownContent className={classes.content} onTextSelected={handleTextSelected}>
+          <CanvasMarkdownContent className={classes.content} artifactId={activeArtifact.artifactId}>
             {content}
           </CanvasMarkdownContent>
         </div>

apps/agentstack-ui/src/modules/canvas/markdown/CanvasEditForm.module.scss

@@ -0,0 +1,53 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.form {
+  block-size: rem(64px);
+  display: flex;
+  align-items: center;
+  background-color: var(--cds-button-primary);
+  padding: $spacing-04;
+  border-radius: $border-radius;
+}
+
+.content {
+  border: 1px solid $border-subtle-inverse;
+  border-radius: $border-radius;
+  block-size: rem(40px);
+  display: flex;
+  align-items: center;
+  padding-inline-end: $spacing-03;
+
+  &:focus-within {
+    outline: 2px solid $focus;
+  }
+
+  :global(.cds--text-input) {
+    &,
+    &:focus-within {
+      border: none;
+      background-color: transparent;
+      inline-size: rem(250px);
+      color: $text-inverse;
+      outline: none;
+    }
+  }
+
+  button {
+    &,
+    &:not(:disabled) {
+      color: $background;
+      svg {
+        fill: currentColor;
+      }
+    }
+    &:hover {
+      color: $text-primary;
+    }
+    &:disabled {
+      color: $text-muted;
+    }
+  }
+}

apps/agentstack-ui/src/modules/canvas/markdown/CanvasEditForm.tsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Send } from '@carbon/icons-react';
+import { IconButton, TextInput } from '@carbon/react';
+import { useId } from 'react';
+import { useForm } from 'react-hook-form';
+
+import classes from './CanvasEditForm.module.scss';
+
+interface Props {
+  onSubmit: (description: string) => void;
+}
+
+export function CanvasEditForm({ onSubmit }: Props) {
+  const id = useId();
+
+  const {
+    handleSubmit,
+    register,
+    formState: { isValid },
+  } = useForm<{ input: string }>();
+
+  return (
+    <form className={classes.form} onSubmit={handleSubmit(({ input }) => onSubmit(input))}>
+      <div className={classes.content}>
+        <TextInput
+          placeholder="How do you want to change it?"
+          id={id}
+          labelText=""
+          autoFocus
+          size="sm"
+          className={classes.input}
+          {...register('input', { required: true })}
+        />
+        <IconButton label="Ask agent" kind="ghost" size="sm" type="submit" disabled={!isValid}>
+          <Send />
+        </IconButton>
+      </div>
+    </form>
+  );
+}