[Agent Builder] Attachments canvas-mode

x-pack/platform/packages/shared/agent-builder/agent-builder-browser/attachments/contract.ts

@@ -34,6 +34,8 @@ export interface GetActionButtonsParams<TAttachment extends UnknownAttachment =
   isSidebar: boolean;
   /** Function to update the attachment's origin reference */
   updateOrigin: (originId: string) => Promise<void>;
+  /** Callback to open the attachment in canvas mode (expanded flyout view) */
+  openCanvas: () => void;
 }
 
 /**
@@ -72,7 +74,12 @@ export interface AttachmentUIDefinition<TAttachment extends UnknownAttachment =
    * When provided, attachments can be rendered inline in the conversation
    * using the <render_attachment> tag.
    */
-  renderContent?: (props: AttachmentRenderProps<TAttachment>) => ReactNode;
+  renderInlineContent?: (props: AttachmentRenderProps<TAttachment>) => ReactNode;
+  /**
+   * Optional custom content renderer for canvas mode (expanded flyout view).
+   * When provided, attachments can be opened in an expanded view via action buttons.
+   */
+  renderCanvasContent?: (props: AttachmentRenderProps<TAttachment>) => ReactNode;
   /**
    * Optional function to provide action buttons for inline-rendered attachments.
    * Buttons will appear alongside or below the rendered content.

x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_rounds/round_response/attachment_with_actions.tsx

@@ -5,12 +5,11 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import type { UnknownAttachment } from '@kbn/agent-builder-common/attachments';
 import { EuiButton } from '@elastic/eui';
-import { AGENT_BUILDER_EXPERIMENTAL_FEATURES_SETTING_ID } from '@kbn/management-settings-ids';
 import type { AttachmentsService } from '../../../../../services/attachments/attachements_service';
-import { useKibana } from '../../../../hooks/use_kibana';
+import { CanvasModeFlyout } from './canvas_mode_flyout';
 
 interface AttachmentWithActionsProps {
   attachment: UnknownAttachment;
@@ -28,17 +27,15 @@ export const AttachmentWithActions: React.FC<AttachmentWithActionsProps> = ({
   isSidebar,
   conversationId,
 }) => {
-  const {
-    services: { settings },
-  } = useKibana();
-  const isExperimentalFeaturesEnabled = settings?.client.get<boolean>(
-    AGENT_BUILDER_EXPERIMENTAL_FEATURES_SETTING_ID,
-    false
-  );
+  const [isCanvasFlyoutOpen, setIsCanvasFlyoutOpen] = useState(false);
 
-  if (isExperimentalFeaturesEnabled === false) {
-    return null;
-  }
+  const openCanvas = useCallback(() => {
+    setIsCanvasFlyoutOpen(true);
+  }, []);
+
+  const closeCanvas = useCallback(() => {
+    setIsCanvasFlyoutOpen(false);
+  }, []);
 
   const uiDefinition = attachmentsService.getAttachmentUiDefinition(attachment.type);
 
@@ -53,6 +50,7 @@ export const AttachmentWithActions: React.FC<AttachmentWithActionsProps> = ({
       // TODO: Implement updateOrigin
       //   attachmentsService.updateOrigin(conversationId, attachment.id, originId);
     },
+    openCanvas,
   });
 
   return (
@@ -62,7 +60,17 @@ export const AttachmentWithActions: React.FC<AttachmentWithActionsProps> = ({
           {button.label}
         </EuiButton>
       ))}
-      {uiDefinition?.renderContent?.({ attachment, isSidebar })}
+      {uiDefinition?.renderInlineContent?.({ attachment, isSidebar })}
+      {isCanvasFlyoutOpen && uiDefinition?.renderCanvasContent && (
+        <CanvasModeFlyout
+          isOpen={isCanvasFlyoutOpen}
+          onClose={closeCanvas}
+          title={attachment.type}
+          isSidebar={isSidebar}
+        >
+          {uiDefinition.renderCanvasContent({ attachment, isSidebar })}
+        </CanvasModeFlyout>
+      )}
     </>
   );
 };

x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_rounds/round_response/canvas_mode_flyout.tsx

@@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiFlyout, EuiFlyoutHeader, EuiFlyoutBody, EuiTitle } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+
+interface CanvasModeFlyoutProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  isSidebar?: boolean;
+}
+
+/**
+ * Flyout component for displaying attachments in canvas mode (expanded view).
+ * In full-screen context, renders at 50% screen width. In sidebar context, uses default flyout width.
+ */
+export const CanvasModeFlyout: React.FC<CanvasModeFlyoutProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  isSidebar,
+}) => {
+  // Only apply custom width in full-screen context (not sidebar)
+  const flyoutStyles = !isSidebar
+    ? css`
+        width: 50vw;
+      `
+    : undefined;
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <EuiFlyout
+      onClose={onClose}
+      aria-labelledby="canvasModeFlyoutTitle"
+      ownFocus={false}
+      outsideClickCloses={true}
+      css={flyoutStyles}
+      type={isSidebar ? 'overlay' : 'push'}
+    >
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle size="m">
+          <h2 id="canvasModeFlyoutTitle">
+            {title ||
+              i18n.translate('xpack.agentBuilder.canvasMode.defaultTitle', {
+                defaultMessage: 'Canvas Mode',
+              })}
+          </h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>{children}</EuiFlyoutBody>
+    </EuiFlyout>
+  );
+};