From 54b5ebb2b8d612a5c490efbd2956dbccaee7c3c7 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Mon, 14 Jul 2025 12:24:55 +0200
Subject: [PATCH 01/24] feat: Init Tela drawer

---
 pages/app-layout/runtime-drawers.page.tsx     | 26 ++++++++++++++++
 src/app-layout/runtime-drawer/index.tsx       |  7 ++++-
 src/app-layout/utils/use-drawers.ts           | 26 ++++++++++++++--
 .../visual-refresh-toolbar/index.tsx          |  9 ++++++
 .../visual-refresh-toolbar/interfaces.ts      |  3 ++
 .../visual-refresh-toolbar/multi-layout.ts    |  8 +++++
 .../visual-refresh-toolbar/toolbar/index.tsx  | 30 +++++++++++++++++++
 .../toolbar/styles.scss                       | 13 +++++---
 src/internal/plugins/controllers/drawers.ts   |  2 +-
 9 files changed, 115 insertions(+), 9 deletions(-)

diff --git a/pages/app-layout/runtime-drawers.page.tsx b/pages/app-layout/runtime-drawers.page.tsx
index 68706db78c..dc813d9e28 100644
--- a/pages/app-layout/runtime-drawers.page.tsx
+++ b/pages/app-layout/runtime-drawers.page.tsx
@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useContext, useRef, useState } from 'react';
+import ReactDOM, { unmountComponentAtNode } from 'react-dom';
 
 import {
   AppLayout,
@@ -31,6 +32,31 @@ type DemoContext = React.Context<
   }>
 >;
 
+awsuiPlugins.appLayout.registerDrawer({
+  id: 'amazon-q',
+  type: 'global-ai',
+  resizable: true,
+
+  ariaLabels: {
+    closeButton: 'Close button',
+    content: 'Content',
+    triggerButton: 'Trigger button',
+    resizeHandle: 'Resize handle',
+  },
+
+  trigger: {
+    iconSvg: `<svg viewBox="0 0 16 16" focusable="false">
+      <circle stroke-width="2" stroke="currentColor" fill="none" cx="8" cy="8" r="7" />
+      <circle stroke-width="2" stroke="currentColor" fill="none" cx="8" cy="8" r="3" />
+    </svg>`,
+  },
+
+  mountContent: container => {
+    ReactDOM.render(<div>Tela</div>, container);
+  },
+  unmountContent: container => unmountComponentAtNode(container),
+});
+
 export default function WithDrawers() {
   const [activeDrawerId, setActiveDrawerId] = useState<string | null>(null);
   const [helpPathSlug, setHelpPathSlug] = useState<string>('default');
diff --git a/src/app-layout/runtime-drawer/index.tsx b/src/app-layout/runtime-drawer/index.tsx
index 14004148a6..a1657a88c0 100644
--- a/src/app-layout/runtime-drawer/index.tsx
+++ b/src/app-layout/runtime-drawer/index.tsx
@@ -21,6 +21,7 @@ export interface DrawersLayout {
   global: Array<RuntimeDrawer>;
   localBefore: Array<RuntimeDrawer>;
   localAfter: Array<RuntimeDrawer>;
+  aiDrawer?: RuntimeDrawer;
 }
 
 type VisibilityCallback = (isVisible: boolean) => void;
@@ -93,7 +94,8 @@ const mapRuntimeConfigToDrawer = (
 
 export function convertRuntimeDrawers(
   localDrawers: Array<RuntimeDrawerConfig>,
-  globalDrawers: Array<RuntimeDrawerConfig>
+  globalDrawers: Array<RuntimeDrawerConfig>,
+  aiDrawer?: RuntimeDrawerConfig
 ): DrawersLayout {
   const converted = localDrawers.map(mapRuntimeConfigToDrawer);
   const sorted = sortByPriority(converted);
@@ -101,5 +103,8 @@ export function convertRuntimeDrawers(
     global: sortByPriority(globalDrawers.map(mapRuntimeConfigToDrawer)),
     localBefore: sorted.filter(item => (item.orderPriority ?? 0) > 0),
     localAfter: sorted.filter(item => (item.orderPriority ?? 0) <= 0),
+    ...(aiDrawer && {
+      aiDrawer: mapRuntimeConfigToDrawer(aiDrawer),
+    }),
   };
 }
diff --git a/src/app-layout/utils/use-drawers.ts b/src/app-layout/utils/use-drawers.ts
index d5201cf6a8..3cbe22b453 100644
--- a/src/app-layout/utils/use-drawers.ts
+++ b/src/app-layout/utils/use-drawers.ts
@@ -79,9 +79,10 @@ function useRuntimeDrawers(
       return;
     }
     const unsubscribe = awsuiPluginsInternal.appLayout.onDrawersRegistered(drawers => {
-      const localDrawers = drawers.filter(drawer => drawer.type !== 'global');
+      const localDrawers = drawers.filter(drawer => !drawer.type?.includes('global'));
       const globalDrawers = drawers.filter(drawer => drawer.type === 'global');
-      setRuntimeDrawers(convertRuntimeDrawers(localDrawers, globalDrawers));
+      const aiDrawer = drawers.find(drawer => drawer.type === 'global-ai');
+      setRuntimeDrawers(convertRuntimeDrawers(localDrawers, globalDrawers, aiDrawer));
       if (!localDrawerWasOpenRef.current) {
         const defaultActiveLocalDrawer = sortByPriority(localDrawers).find(drawer => drawer.defaultActive);
         if (defaultActiveLocalDrawer) {
@@ -198,6 +199,7 @@ export function useDrawers(
     changeHandler: 'onChange',
   });
   const [activeGlobalDrawersIds, setActiveGlobalDrawersIds] = useState<Array<string>>([]);
+  const [activeAiDrawer, setActiveAiDrawer] = useState<string | null>(null);
   const [drawerSizes, setDrawerSizes] = useState<Record<string, number>>({});
   const [expandedDrawerId, setExpandedDrawerId] = useState<string | null>(null);
   // FIFO queue that keeps track of open drawers, where the first element is the most recently opened drawer
@@ -210,6 +212,21 @@ export function useDrawers(
     fireNonCancelableEvent(activeGlobalDrawer?.onResize, { id, size });
   }
 
+  function onActiveAiDrawerChange(
+    newDrawerId: string | null,
+    { initiatedByUserAction }: OnChangeParams = DEFAULT_ON_CHANGE_PARAMS
+  ) {
+    setActiveAiDrawer(newDrawerId);
+
+    if (newDrawerId) {
+      fireNonCancelableEvent(runtimeDrawers?.aiDrawer?.onToggle, { isOpen: true, initiatedByUserAction });
+    }
+
+    if (activeDrawerId) {
+      fireNonCancelableEvent(runtimeDrawers?.aiDrawer?.onToggle, { isOpen: false, initiatedByUserAction });
+    }
+  }
+
   function onActiveDrawerChange(
     newDrawerId: string | null,
     { initiatedByUserAction }: OnChangeParams = DEFAULT_ON_CHANGE_PARAMS
@@ -278,7 +295,7 @@ export function useDrawers(
     activeGlobalDrawersIds,
     onActiveGlobalDrawersChange
   );
-  const { localBefore, localAfter, global: runtimeGlobalDrawers } = runtimeDrawers;
+  const { localBefore, localAfter, global: runtimeGlobalDrawers, aiDrawer } = runtimeDrawers;
   const combinedLocalDrawers = drawers
     ? [...localBefore, ...drawers, ...localAfter]
     : applyToolsDrawer(toolsProps, runtimeDrawers);
@@ -341,5 +358,8 @@ export function useDrawers(
     onActiveGlobalDrawersChange,
     expandedDrawerId,
     setExpandedDrawerId,
+    aiDrawer,
+    onActiveAiDrawerChange,
+    activeAiDrawer,
   };
 }
diff --git a/src/app-layout/visual-refresh-toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/index.tsx
index b78bfa65b0..b6d7038b69 100644
--- a/src/app-layout/visual-refresh-toolbar/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/index.tsx
@@ -151,6 +151,9 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       onActiveGlobalDrawersChange,
       expandedDrawerId,
       setExpandedDrawerId,
+      aiDrawer,
+      onActiveAiDrawerChange,
+      activeAiDrawer,
     } = useDrawers({ ...rest, onGlobalDrawerFocus, onAddNewActiveDrawer }, ariaLabels, {
       ariaLabels,
       toolsHide,
@@ -298,6 +301,9 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
         onSplitPanelToggle: onSplitPanelToggleHandler,
         expandedDrawerId,
         setExpandedDrawerId,
+        aiDrawer,
+        onActiveAiDrawerChange,
+        activeAiDrawer,
       },
       isIntersecting
     );
@@ -356,6 +362,9 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       splitPanelAnimationDisabled,
       expandedDrawerId,
       setExpandedDrawerId,
+      aiDrawer,
+      onActiveAiDrawerChange,
+      activeAiDrawer,
     };
 
     const splitPanelInternals: SplitPanelProviderProps = {
diff --git a/src/app-layout/visual-refresh-toolbar/interfaces.ts b/src/app-layout/visual-refresh-toolbar/interfaces.ts
index 0de8881fed..9ae9677dd1 100644
--- a/src/app-layout/visual-refresh-toolbar/interfaces.ts
+++ b/src/app-layout/visual-refresh-toolbar/interfaces.ts
@@ -66,4 +66,7 @@ export interface AppLayoutInternals {
   splitPanelAnimationDisabled?: boolean;
   expandedDrawerId: string | null;
   setExpandedDrawerId: (value: string | null) => void;
+  aiDrawer?: InternalDrawer;
+  onActiveAiDrawerChange: (value: string | null) => void;
+  activeAiDrawer: string | null;
 }
diff --git a/src/app-layout/visual-refresh-toolbar/multi-layout.ts b/src/app-layout/visual-refresh-toolbar/multi-layout.ts
index 53e125765b..7e05133e33 100644
--- a/src/app-layout/visual-refresh-toolbar/multi-layout.ts
+++ b/src/app-layout/visual-refresh-toolbar/multi-layout.ts
@@ -34,6 +34,9 @@ export interface SharedProps {
   onSplitPanelToggle: () => void;
   expandedDrawerId?: string | null;
   setExpandedDrawerId: (value: string | null) => void;
+  aiDrawer: AppLayoutProps.Drawer | undefined;
+  onActiveAiDrawerChange: (value: string | null) => void;
+  activeAiDrawer?: string | null;
 }
 
 function checkAlreadyExists(value: boolean, propName: string) {
@@ -70,6 +73,11 @@ export function mergeProps(
       toolbar.activeGlobalDrawersIds = props.activeGlobalDrawersIds;
       toolbar.onActiveGlobalDrawersChange = props.onActiveGlobalDrawersChange;
     }
+    if (props.aiDrawer && !checkAlreadyExists(!!toolbar.aiDrawer, 'aiDrawer')) {
+      toolbar.aiDrawer = props.aiDrawer;
+      toolbar.onActiveAiDrawerChange = props.onActiveAiDrawerChange;
+      toolbar.activeAiDrawer = props.activeAiDrawer;
+    }
     if (props.navigation && !checkAlreadyExists(!!toolbar.hasNavigation, 'navigation')) {
       toolbar.hasNavigation = true;
       toolbar.navigationOpen = props.navigationOpen;
diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
index c8dc199153..b4b8207982 100644
--- a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
@@ -50,6 +50,10 @@ export interface ToolbarProps {
 
   expandedDrawerId?: string | null;
   setExpandedDrawerId?: (value: string | null) => void;
+
+  aiDrawer?: AppLayoutProps.Drawer;
+  onActiveAiDrawerChange?: (value: string | null) => void;
+  activeAiDrawer?: string | null;
 }
 
 export interface AppLayoutToolbarImplementationProps {
@@ -84,6 +88,9 @@ export function AppLayoutToolbarImplementation({
     onSplitPanelToggle,
     expandedDrawerId,
     setExpandedDrawerId,
+    aiDrawer,
+    activeAiDrawer,
+    onActiveAiDrawerChange,
   } = toolbarProps;
   const drawerExpandedMode = !!expandedDrawerId;
   const ref = useRef<HTMLElement>(null);
@@ -123,6 +130,29 @@ export function AppLayoutToolbarImplementation({
       }}
     >
       <div className={styles['toolbar-container']}>
+        {aiDrawer && !activeAiDrawer && (
+          <div className={styles['universal-toolbar-ai-drawer']}>
+            <TriggerButton
+              // ariaLabel={ariaLabels?.navigationToggle ?? undefined}
+              ariaExpanded={!!activeAiDrawer}
+              iconName="add-plus"
+              className={testutilStyles['ai-drawer-toggle']}
+              onClick={() => {
+                if (setExpandedDrawerId) {
+                  setExpandedDrawerId(null);
+                }
+                if (navigationOpen && activeAiDrawer) {
+                  return;
+                }
+                onActiveAiDrawerChange?.(aiDrawer?.id);
+              }}
+              // ref={navigationFocusRef}
+              selected={!drawerExpandedMode && !!activeAiDrawer}
+              disabled={anyPanelOpenInMobile}
+            />
+            <div className={styles['group-divider']} />
+          </div>
+        )}
         {hasNavigation && (
           <nav {...navLandmarkAttributes} className={clsx(styles['universal-toolbar-nav'])}>
             <TriggerButton
diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/styles.scss b/src/app-layout/visual-refresh-toolbar/toolbar/styles.scss
index b38c922786..dc10576a2d 100644
--- a/src/app-layout/visual-refresh-toolbar/toolbar/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/toolbar/styles.scss
@@ -32,22 +32,27 @@
     display: grid;
     column-gap: awsui.$space-static-xs;
     inline-size: 100%;
-    grid-template-columns: min-content minmax(0, 3fr) minmax(auto, 1fr);
+    grid-template-columns: min-content min-content minmax(0, 4fr) minmax(auto, 1fr);
     grid-template-rows: 1fr;
 
-    > .universal-toolbar-nav {
+    > .universal-toolbar-ai-drawer {
       grid-column: 1;
       padding-inline-end: awsui.$space-static-xxs;
     }
 
-    > .universal-toolbar-breadcrumbs {
+    > .universal-toolbar-nav {
       grid-column: 2;
+      padding-inline-end: awsui.$space-static-xxs;
+    }
+
+    > .universal-toolbar-breadcrumbs {
+      grid-column: 3;
       background-color: transparent;
       flex: 1 0;
     }
 
     > .universal-toolbar-drawers {
-      grid-column: 3;
+      grid-column: 4;
       column-gap: awsui.$space-static-xs;
       display: flex;
       justify-content: flex-end;
diff --git a/src/internal/plugins/controllers/drawers.ts b/src/internal/plugins/controllers/drawers.ts
index d30706d411..ac53125f46 100644
--- a/src/internal/plugins/controllers/drawers.ts
+++ b/src/internal/plugins/controllers/drawers.ts
@@ -17,7 +17,7 @@ export interface DrawerStateChangeParams {
 
 export interface DrawerConfig {
   id: string;
-  type?: 'local' | 'global';
+  type?: 'local' | 'global' | 'global-ai';
   ariaLabels: {
     content?: string;
     closeButton?: string;

From 5a98ffb932f608d032fdbc081f05b9a2206316b9 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Wed, 16 Jul 2025 10:20:14 +0200
Subject: [PATCH 02/24] feat: Introduce ai drawer component on the left

---
 src/app-layout/utils/use-drawers.ts           |  17 ++-
 .../visual-refresh-toolbar/compute-layout.ts  |   3 +
 .../drawer/global-ai-drawer.tsx               | 131 ++++++++++++++++++
 .../visual-refresh-toolbar/drawer/styles.scss |   8 ++
 .../visual-refresh-toolbar/index.tsx          |  13 +-
 .../visual-refresh-toolbar/interfaces.ts      |   8 +-
 .../visual-refresh-toolbar/internal.tsx       |   2 +
 .../visual-refresh-toolbar/multi-layout.ts    |   6 +-
 .../visual-refresh-toolbar/skeleton/index.tsx |   3 +
 .../skeleton/styles.scss                      |  12 +-
 .../visual-refresh-toolbar/toolbar/index.tsx  |  16 ++-
 11 files changed, 202 insertions(+), 17 deletions(-)
 create mode 100644 src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx

diff --git a/src/app-layout/utils/use-drawers.ts b/src/app-layout/utils/use-drawers.ts
index 3cbe22b453..a175e5ceed 100644
--- a/src/app-layout/utils/use-drawers.ts
+++ b/src/app-layout/utils/use-drawers.ts
@@ -174,6 +174,9 @@ function applyToolsDrawer(toolsProps: ToolsProps, runtimeDrawers: DrawersLayout)
 }
 
 export const MIN_DRAWER_SIZE = 290;
+// TODO replace with a real value
+const DEFAULT_AI_DRAWER_SIZE = 350;
+const MIN_AI_DRAWER_SIZE = 300;
 
 type UseDrawersProps = Pick<AppLayoutProps, 'drawers' | 'activeDrawerId' | 'onDrawerChange'> & {
   __disableRuntimeDrawers?: boolean;
@@ -199,7 +202,7 @@ export function useDrawers(
     changeHandler: 'onChange',
   });
   const [activeGlobalDrawersIds, setActiveGlobalDrawersIds] = useState<Array<string>>([]);
-  const [activeAiDrawer, setActiveAiDrawer] = useState<string | null>(null);
+  const [activeAiDrawerId, setActiveAiDrawerId] = useState<string | null>(null);
   const [drawerSizes, setDrawerSizes] = useState<Record<string, number>>({});
   const [expandedDrawerId, setExpandedDrawerId] = useState<string | null>(null);
   // FIFO queue that keeps track of open drawers, where the first element is the most recently opened drawer
@@ -216,7 +219,7 @@ export function useDrawers(
     newDrawerId: string | null,
     { initiatedByUserAction }: OnChangeParams = DEFAULT_ON_CHANGE_PARAMS
   ) {
-    setActiveAiDrawer(newDrawerId);
+    setActiveAiDrawerId(newDrawerId);
 
     if (newDrawerId) {
       fireNonCancelableEvent(runtimeDrawers?.aiDrawer?.onToggle, { isOpen: true, initiatedByUserAction });
@@ -328,6 +331,12 @@ export function useDrawers(
     },
     {}
   );
+  // sanity check
+  // const activeAiDrawer = aiDrawer?.id === activeAiDrawerId ? aiDrawer : null;
+  const activeAiDrawer = activeAiDrawerId ? aiDrawer : null;
+  const activeAiDrawerSize = activeAiDrawerId
+    ? (drawerSizes[activeAiDrawerId] ?? activeAiDrawer?.defaultSize ?? DEFAULT_AI_DRAWER_SIZE)
+    : 0;
   const minGlobalDrawersSizes: Record<string, number> = runtimeGlobalDrawers.reduce((acc, globalDrawer) => {
     return {
       ...acc,
@@ -338,6 +347,7 @@ export function useDrawers(
     toolsProps?.toolsOpen ? toolsProps.toolsWidth : (activeDrawer?.defaultSize ?? MIN_DRAWER_SIZE),
     MIN_DRAWER_SIZE
   );
+  const minAiDrawerSize = Math.min(activeAiDrawer?.defaultSize ?? MIN_AI_DRAWER_SIZE, MIN_AI_DRAWER_SIZE);
 
   return {
     ariaLabelsWithDrawers: ariaLabels,
@@ -361,5 +371,8 @@ export function useDrawers(
     aiDrawer,
     onActiveAiDrawerChange,
     activeAiDrawer,
+    activeAiDrawerId,
+    activeAiDrawerSize,
+    minAiDrawerSize,
   };
 }
diff --git a/src/app-layout/visual-refresh-toolbar/compute-layout.ts b/src/app-layout/visual-refresh-toolbar/compute-layout.ts
index 387bcf3f6e..93ad1dea11 100644
--- a/src/app-layout/visual-refresh-toolbar/compute-layout.ts
+++ b/src/app-layout/visual-refresh-toolbar/compute-layout.ts
@@ -49,6 +49,8 @@ export function computeHorizontalLayout({
   const maxSplitPanelSize = Math.max(resizableSpaceAvailable - totalActiveGlobalDrawersSize - activeDrawerSize, 0);
   resizableSpaceAvailable -= sideSplitPanelSize;
   const maxDrawerSize = resizableSpaceAvailable - totalActiveGlobalDrawersSize;
+  // TODO replace with a calculated value
+  const maxAiDrawerSize = 600;
   const maxGlobalDrawersSizes: Record<string, number> = Object.keys(activeGlobalDrawersSizes).reduce(
     (acc, drawerId) => {
       return {
@@ -72,6 +74,7 @@ export function computeHorizontalLayout({
     maxGlobalDrawersSizes,
     totalActiveGlobalDrawersSize,
     resizableSpaceAvailable,
+    maxAiDrawerSize,
   };
 }
 
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
new file mode 100644
index 0000000000..85ca4bf28d
--- /dev/null
+++ b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
@@ -0,0 +1,131 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useRef } from 'react';
+import { Transition } from 'react-transition-group';
+import clsx from 'clsx';
+
+import { InternalButton } from '../../../button/internal';
+import PanelResizeHandle from '../../../internal/components/panel-resize-handle';
+import customCssProps from '../../../internal/generated/custom-css-properties';
+import { createWidgetizedComponent } from '../../../internal/widgets';
+import { getLimitedValue } from '../../../split-panel/utils/size-utils';
+import { getDrawerStyles } from '../compute-layout';
+import { AppLayoutInternals } from '../interfaces';
+import { useResize } from './use-resize';
+
+import sharedStyles from '../../resize/styles.css.js';
+import testutilStyles from '../../test-classes/styles.css.js';
+import styles from './styles.css.js';
+
+interface AppLayoutGlobalAiDrawerImplementationProps {
+  appLayoutInternals: AppLayoutInternals;
+}
+
+export function AppLayoutGlobalAiDrawerImplementation({
+  appLayoutInternals,
+}: AppLayoutGlobalAiDrawerImplementationProps) {
+  const {
+    activeAiDrawer,
+    activeAiDrawerSize,
+    minAiDrawerSize,
+    maxAiDrawerSize,
+    ariaLabels,
+    aiDrawerFocusControl,
+    isMobile,
+    placement,
+    verticalOffsets,
+    drawersOpenQueue,
+    onActiveAiDrawerChange,
+    onActiveDrawerResize,
+  } = appLayoutInternals;
+  const drawerRef = useRef<HTMLDivElement>(null);
+  const activeDrawerId = activeAiDrawer?.id;
+
+  const computedAriaLabels = {
+    closeButton: activeAiDrawer ? activeAiDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,
+    content: activeAiDrawer ? activeAiDrawer.ariaLabels?.drawerName : ariaLabels?.tools,
+  };
+
+  const { drawerHeight, drawerTopOffset } = getDrawerStyles(verticalOffsets, isMobile, placement);
+  const resizeProps = useResize({
+    currentWidth: activeAiDrawerSize,
+    minWidth: minAiDrawerSize,
+    maxWidth: maxAiDrawerSize,
+    panelRef: drawerRef,
+    handleRef: aiDrawerFocusControl.refs.slider,
+    onResize: size => onActiveDrawerResize({ id: activeDrawerId!, size }),
+  });
+  const size = getLimitedValue(minAiDrawerSize, activeAiDrawerSize, maxAiDrawerSize);
+  const lastOpenedDrawerId = drawersOpenQueue?.length ? drawersOpenQueue[0] : activeDrawerId;
+  const animationDisabled = activeAiDrawer?.defaultActive && !drawersOpenQueue.includes(activeAiDrawer.id);
+
+  return (
+    <Transition nodeRef={drawerRef} in={!!activeAiDrawer} appear={true} timeout={0}>
+      {state => (
+        <aside
+          id={activeAiDrawer?.id}
+          aria-hidden={!activeAiDrawer}
+          aria-label={computedAriaLabels.content}
+          className={clsx(styles.drawer, styles['ai-drawer'], {
+            [sharedStyles['with-motion-horizontal']]: !animationDisabled,
+            [styles['last-opened']]: lastOpenedDrawerId === activeDrawerId,
+            [testutilStyles['active-drawer']]: activeDrawerId,
+            [styles['drawer-hidden']]: !activeAiDrawer,
+            [testutilStyles['drawer-closed']]: !activeAiDrawer,
+          })}
+          ref={drawerRef}
+          onBlur={e => {
+            if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
+              aiDrawerFocusControl.loseFocus();
+            }
+          }}
+          style={{
+            blockSize: drawerHeight,
+            insetBlockStart: drawerTopOffset,
+            ...(!isMobile && {
+              [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,
+            }),
+          }}
+          data-testid={activeDrawerId && `awsui-app-layout-drawer-${activeDrawerId}`}
+        >
+          <div className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}>
+            <div className={clsx(styles['drawer-close-button'])}>
+              <InternalButton
+                ariaLabel={computedAriaLabels.closeButton}
+                className={clsx({
+                  [testutilStyles['active-drawer-close-button']]: activeDrawerId,
+                })}
+                formAction="none"
+                iconName={isMobile ? 'close' : 'angle-right'}
+                onClick={() => onActiveAiDrawerChange(null, { initiatedByUserAction: true })}
+                ref={aiDrawerFocusControl.refs.close}
+                variant="icon"
+                analyticsAction="close"
+              />
+            </div>
+            <div className={styles['drawer-content']} style={{ blockSize: drawerHeight }}>
+              {activeAiDrawer?.content}
+            </div>
+          </div>
+          {!isMobile && activeAiDrawer?.resizable && (
+            <div className={styles['drawer-slider']}>
+              <PanelResizeHandle
+                ref={aiDrawerFocusControl.refs.slider}
+                position="side"
+                className={testutilStyles['drawers-slider']}
+                ariaLabel={activeAiDrawer?.ariaLabels?.resizeHandle}
+                tooltipText={activeAiDrawer?.ariaLabels?.resizeHandleTooltipText}
+                ariaValuenow={resizeProps.relativeSize}
+                onKeyDown={resizeProps.onKeyDown}
+                onPointerDown={resizeProps.onPointerDown}
+                onDirectionClick={resizeProps.onDirectionClick}
+              />
+            </div>
+          )}
+        </aside>
+      )}
+    </Transition>
+  );
+}
+
+export const createWidgetizedGlobalAppLayoutAiDrawer = createWidgetizedComponent(AppLayoutGlobalAiDrawerImplementation);
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/styles.scss b/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
index 7b6e89d191..58975d9c97 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
@@ -237,4 +237,12 @@ $drawer-resize-handle-size: awsui.$space-m;
       }
     }
   }
+
+  &.ai-drawer {
+    grid-template-columns: 1fr awsui.$space-m;
+
+    > .drawer-slider {
+      grid-column: 2;
+    }
+  }
 }
diff --git a/src/app-layout/visual-refresh-toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/index.tsx
index b6d7038b69..6352ea4bd5 100644
--- a/src/app-layout/visual-refresh-toolbar/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/index.tsx
@@ -29,6 +29,7 @@ import { AppLayoutVisibilityContext } from './contexts';
 import { AppLayoutInternalProps, AppLayoutInternals } from './interfaces';
 import {
   AppLayoutDrawer,
+  AppLayoutGlobalAiDrawer,
   AppLayoutGlobalDrawers,
   AppLayoutNavigation,
   AppLayoutNotifications,
@@ -139,6 +140,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       minDrawerSize,
       minGlobalDrawersSizes,
       activeDrawerSize,
+      activeAiDrawerSize,
       ariaLabelsWithDrawers,
       globalDrawers,
       activeGlobalDrawers,
@@ -154,6 +156,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       aiDrawer,
       onActiveAiDrawerChange,
       activeAiDrawer,
+      minAiDrawerSize,
     } = useDrawers({ ...rest, onGlobalDrawerFocus, onAddNewActiveDrawer }, ariaLabels, {
       ariaLabels,
       toolsHide,
@@ -228,6 +231,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
 
     const globalDrawersFocusControl = useMultipleFocusControl(true, activeGlobalDrawersIds);
     const drawersFocusControl = useFocusControl(!!activeDrawer?.id, true, activeDrawer?.id);
+    const aiDrawerFocusControl = useFocusControl(!!activeAiDrawer?.id, true, activeAiDrawer?.id);
     const navigationFocusControl = useFocusControl(navigationOpen, navigationTriggerHide);
     const splitPanelFocusControl = useSplitPanelFocusControl([splitPanelPreferences, splitPanelOpen]);
 
@@ -258,6 +262,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       splitPanelPosition,
       maxGlobalDrawersSizes,
       resizableSpaceAvailable,
+      maxAiDrawerSize,
     } = computeHorizontalLayout({
       activeDrawerSize: activeDrawer ? activeDrawerSize : 0,
       splitPanelSize,
@@ -303,7 +308,8 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
         setExpandedDrawerId,
         aiDrawer,
         onActiveAiDrawerChange,
-        activeAiDrawer,
+        activeAiDrawerId: activeAiDrawer?.id ?? null,
+        aiDrawerFocusRef: aiDrawerFocusControl.refs.toggle,
       },
       isIntersecting
     );
@@ -365,6 +371,10 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       aiDrawer,
       onActiveAiDrawerChange,
       activeAiDrawer,
+      activeAiDrawerSize,
+      minAiDrawerSize,
+      maxAiDrawerSize,
+      aiDrawerFocusControl,
     };
 
     const splitPanelInternals: SplitPanelProviderProps = {
@@ -562,6 +572,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
           contentType={contentType}
           maxContentWidth={maxContentWidth}
           disableContentPaddings={disableContentPaddings}
+          aiDrawer={activeAiDrawer && <AppLayoutGlobalAiDrawer appLayoutInternals={appLayoutInternals} />}
         />
       </AppLayoutVisibilityContext.Provider>
     );
diff --git a/src/app-layout/visual-refresh-toolbar/interfaces.ts b/src/app-layout/visual-refresh-toolbar/interfaces.ts
index 9ae9677dd1..0c62cb178d 100644
--- a/src/app-layout/visual-refresh-toolbar/interfaces.ts
+++ b/src/app-layout/visual-refresh-toolbar/interfaces.ts
@@ -67,6 +67,10 @@ export interface AppLayoutInternals {
   expandedDrawerId: string | null;
   setExpandedDrawerId: (value: string | null) => void;
   aiDrawer?: InternalDrawer;
-  onActiveAiDrawerChange: (value: string | null) => void;
-  activeAiDrawer: string | null;
+  onActiveAiDrawerChange: (newDrawerId: string | null, params: OnChangeParams) => void;
+  activeAiDrawer?: InternalDrawer | null;
+  activeAiDrawerSize: number;
+  minAiDrawerSize: number;
+  maxAiDrawerSize: number;
+  aiDrawerFocusControl: FocusControlState;
 }
diff --git a/src/app-layout/visual-refresh-toolbar/internal.tsx b/src/app-layout/visual-refresh-toolbar/internal.tsx
index 0f7e01ece4..edfec619ee 100644
--- a/src/app-layout/visual-refresh-toolbar/internal.tsx
+++ b/src/app-layout/visual-refresh-toolbar/internal.tsx
@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { createWidgetizedAppLayoutDrawer, createWidgetizedAppLayoutGlobalDrawers } from './drawer';
+import { createWidgetizedGlobalAppLayoutAiDrawer } from './drawer/global-ai-drawer';
 import { createWidgetizedAppLayoutNavigation } from './navigation';
 import { createWidgetizedAppLayoutNotifications } from './notifications';
 import {
@@ -12,6 +13,7 @@ import { createWidgetizedAppLayoutToolbar } from './toolbar';
 export const AppLayoutNavigation = createWidgetizedAppLayoutNavigation();
 export const AppLayoutDrawer = createWidgetizedAppLayoutDrawer();
 export const AppLayoutGlobalDrawers = createWidgetizedAppLayoutGlobalDrawers();
+export const AppLayoutGlobalAiDrawer = createWidgetizedGlobalAppLayoutAiDrawer();
 export const AppLayoutNotifications = createWidgetizedAppLayoutNotifications();
 export const AppLayoutToolbar = createWidgetizedAppLayoutToolbar();
 export const AppLayoutSplitPanelBottom = createWidgetizedAppLayoutSplitPanelDrawerBottom();
diff --git a/src/app-layout/visual-refresh-toolbar/multi-layout.ts b/src/app-layout/visual-refresh-toolbar/multi-layout.ts
index 7e05133e33..69ac6c8d6f 100644
--- a/src/app-layout/visual-refresh-toolbar/multi-layout.ts
+++ b/src/app-layout/visual-refresh-toolbar/multi-layout.ts
@@ -36,7 +36,8 @@ export interface SharedProps {
   setExpandedDrawerId: (value: string | null) => void;
   aiDrawer: AppLayoutProps.Drawer | undefined;
   onActiveAiDrawerChange: (value: string | null) => void;
-  activeAiDrawer?: string | null;
+  activeAiDrawerId?: string | null;
+  aiDrawerFocusRef: React.Ref<Focusable> | undefined;
 }
 
 function checkAlreadyExists(value: boolean, propName: string) {
@@ -76,7 +77,8 @@ export function mergeProps(
     if (props.aiDrawer && !checkAlreadyExists(!!toolbar.aiDrawer, 'aiDrawer')) {
       toolbar.aiDrawer = props.aiDrawer;
       toolbar.onActiveAiDrawerChange = props.onActiveAiDrawerChange;
-      toolbar.activeAiDrawer = props.activeAiDrawer;
+      toolbar.activeAiDrawerId = props.activeAiDrawerId;
+      toolbar.aiDrawerFocusRef = props.aiDrawerFocusRef;
     }
     if (props.navigation && !checkAlreadyExists(!!toolbar.hasNavigation, 'navigation')) {
       toolbar.hasNavigation = true;
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx b/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
index 921091e46a..25ba548a7b 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
@@ -47,6 +47,7 @@ interface SkeletonLayoutProps
   isNested?: boolean;
   drawerExpandedMode: boolean;
   drawerExpandedModeInChildLayout: boolean;
+  aiDrawer?: React.ReactNode;
 }
 
 const componentAnalyticsMetadata: GeneratedAnalyticsMetadataAppLayoutToolbarComponent = {
@@ -85,6 +86,7 @@ export const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutPro
       isNested,
       drawerExpandedMode,
       drawerExpandedModeInChildLayout,
+      aiDrawer,
     },
     ref
   ) => {
@@ -109,6 +111,7 @@ export const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutPro
           {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}
         >
           {toolbar}
+          <div className={styles['ai-drawer']}>{aiDrawer}</div>
           {navigation && (
             <div
               className={clsx(
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
index a2997c154c..c713a622dd 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
@@ -50,10 +50,11 @@
   // desktop grid
   @include desktop-only {
     grid-template-areas:
-      'toolbar    toolbar      toolbar       toolbar   toolbar         toolbar  toolbar'
-      'navigation .         notifications    .         sideSplitPanel  tools    global-tools'
-      'navigation .             main         .         sideSplitPanel  tools    global-tools';
+      'ai-drawer toolbar    toolbar      toolbar       toolbar   toolbar         toolbar  toolbar'
+      'ai-drawer navigation .         notifications    .         sideSplitPanel  tools    global-tools'
+      'ai-drawer navigation .             main         .         sideSplitPanel  tools    global-tools';
     grid-template-columns:
+      min-content
       min-content
       minmax(#{awsui.$space-layout-content-horizontal}, 1fr)
       minmax(0, var(#{custom-props.$maxContentWidth}))
@@ -82,6 +83,7 @@
         0
         0
         0
+        0
         auto;
     }
   }
@@ -100,6 +102,10 @@
   }
 }
 
+.ai-drawer {
+  grid-area: ai-drawer;
+}
+
 .navigation {
   z-index: constants.$drawer-z-index;
 
diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
index b4b8207982..f1bdebfd9c 100644
--- a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
@@ -53,7 +53,8 @@ export interface ToolbarProps {
 
   aiDrawer?: AppLayoutProps.Drawer;
   onActiveAiDrawerChange?: (value: string | null) => void;
-  activeAiDrawer?: string | null;
+  activeAiDrawerId?: string | null;
+  aiDrawerFocusRef?: React.Ref<Focusable>;
 }
 
 export interface AppLayoutToolbarImplementationProps {
@@ -89,8 +90,9 @@ export function AppLayoutToolbarImplementation({
     expandedDrawerId,
     setExpandedDrawerId,
     aiDrawer,
-    activeAiDrawer,
+    activeAiDrawerId,
     onActiveAiDrawerChange,
+    aiDrawerFocusRef,
   } = toolbarProps;
   const drawerExpandedMode = !!expandedDrawerId;
   const ref = useRef<HTMLElement>(null);
@@ -130,24 +132,24 @@ export function AppLayoutToolbarImplementation({
       }}
     >
       <div className={styles['toolbar-container']}>
-        {aiDrawer && !activeAiDrawer && (
+        {aiDrawer && !activeAiDrawerId && (
           <div className={styles['universal-toolbar-ai-drawer']}>
             <TriggerButton
               // ariaLabel={ariaLabels?.navigationToggle ?? undefined}
-              ariaExpanded={!!activeAiDrawer}
+              ariaExpanded={!!activeAiDrawerId}
               iconName="add-plus"
               className={testutilStyles['ai-drawer-toggle']}
               onClick={() => {
                 if (setExpandedDrawerId) {
                   setExpandedDrawerId(null);
                 }
-                if (navigationOpen && activeAiDrawer) {
+                if (expandedDrawerId && expandedDrawerId) {
                   return;
                 }
                 onActiveAiDrawerChange?.(aiDrawer?.id);
               }}
-              // ref={navigationFocusRef}
-              selected={!drawerExpandedMode && !!activeAiDrawer}
+              ref={aiDrawerFocusRef}
+              selected={!drawerExpandedMode && !!activeAiDrawerId}
               disabled={anyPanelOpenInMobile}
             />
             <div className={styles['group-divider']} />

From bcc0fc40cafab879c4fe6ebe6465ae1dc76a23ad Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Wed, 16 Jul 2025 10:30:25 +0200
Subject: [PATCH 03/24] chore: Amazon q icon

---
 pages/app-layout/runtime-drawers.page.tsx               | 5 +----
 src/app-layout/visual-refresh-toolbar/toolbar/index.tsx | 3 ++-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/pages/app-layout/runtime-drawers.page.tsx b/pages/app-layout/runtime-drawers.page.tsx
index dc813d9e28..36a96a9a4e 100644
--- a/pages/app-layout/runtime-drawers.page.tsx
+++ b/pages/app-layout/runtime-drawers.page.tsx
@@ -45,10 +45,7 @@ awsuiPlugins.appLayout.registerDrawer({
   },
 
   trigger: {
-    iconSvg: `<svg viewBox="0 0 16 16" focusable="false">
-      <circle stroke-width="2" stroke="currentColor" fill="none" cx="8" cy="8" r="7" />
-      <circle stroke-width="2" stroke="currentColor" fill="none" cx="8" cy="8" r="3" />
-    </svg>`,
+    iconSvg: `<svg viewBox="0 0 16 16" data-analytics-type="widgetDetail" data-analytics="ChatExperienceEntry" data-analytics-render="true" data-analytics-processed="true"><path d="m14.22,3.41L8.87.32c-.24-.14-.55-.21-.87-.21s-.63.07-.87.21L1.78,3.41c-.48.27-.87.95-.87,1.5v6.18c0,.55.39,1.22.87,1.5l5.36,3.09c.24.14.55.21.87.21s.63-.07.87-.21l5.36-3.09c.48-.28.87-.95.87-1.5v-6.18c0-.55-.39-1.23-.87-1.5Zm-6.22,10.47l-5.09-2.94v-5.88l5.09-2.94,5.09,2.94v4.72l-3.09-1.78v-.74c0-.26-.14-.49-.36-.62l-1.28-.74c-.11-.06-.24-.1-.36-.1s-.25.03-.36.1l-1.28.74c-.22.13-.36.37-.36.62v1.48c0,.26.14.49.36.62l1.28.74c.11.06.24.1.36.1s.25-.03.36-.1l.64-.37,3.09,1.78-4.09,2.36Z" fill="currentColor" stroke-width="0"></path></svg>`,
   },
 
   mountContent: container => {
diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
index f1bdebfd9c..4d6e3071b0 100644
--- a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
@@ -137,7 +137,8 @@ export function AppLayoutToolbarImplementation({
             <TriggerButton
               // ariaLabel={ariaLabels?.navigationToggle ?? undefined}
               ariaExpanded={!!activeAiDrawerId}
-              iconName="add-plus"
+              iconName={aiDrawer.trigger!.iconName}
+              iconSvg={aiDrawer.trigger!.iconSvg}
               className={testutilStyles['ai-drawer-toggle']}
               onClick={() => {
                 if (setExpandedDrawerId) {

From 1daeea9f1eb0b069c3267ae62af419b890fcafed Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Wed, 16 Jul 2025 10:48:58 +0200
Subject: [PATCH 04/24] chore: Focus control for the ai drawer

---
 src/app-layout/utils/use-drawers.ts             | 3 +++
 src/app-layout/visual-refresh-toolbar/index.tsx | 6 +++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/app-layout/utils/use-drawers.ts b/src/app-layout/utils/use-drawers.ts
index a175e5ceed..4c081d34df 100644
--- a/src/app-layout/utils/use-drawers.ts
+++ b/src/app-layout/utils/use-drawers.ts
@@ -182,6 +182,7 @@ type UseDrawersProps = Pick<AppLayoutProps, 'drawers' | 'activeDrawerId' | 'onDr
   __disableRuntimeDrawers?: boolean;
   onGlobalDrawerFocus?: (drawerId: string, open: boolean) => void;
   onAddNewActiveDrawer?: (drawerId: string) => void;
+  onAiDrawerFocus?: () => void;
 };
 
 export function useDrawers(
@@ -191,6 +192,7 @@ export function useDrawers(
     onDrawerChange,
     onGlobalDrawerFocus,
     onAddNewActiveDrawer,
+    onAiDrawerFocus,
     __disableRuntimeDrawers: disableRuntimeDrawers,
   }: UseDrawersProps,
   ariaLabels: AppLayoutProps['ariaLabels'],
@@ -223,6 +225,7 @@ export function useDrawers(
 
     if (newDrawerId) {
       fireNonCancelableEvent(runtimeDrawers?.aiDrawer?.onToggle, { isOpen: true, initiatedByUserAction });
+      onAiDrawerFocus?.();
     }
 
     if (activeDrawerId) {
diff --git a/src/app-layout/visual-refresh-toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/index.tsx
index 6352ea4bd5..d647490b1a 100644
--- a/src/app-layout/visual-refresh-toolbar/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/index.tsx
@@ -134,6 +134,10 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       closeFirstDrawer();
     };
 
+    const onAiDrawerFocus = () => {
+      aiDrawerFocusControl.setFocus(true);
+    };
+
     const {
       drawers,
       activeDrawer,
@@ -157,7 +161,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       onActiveAiDrawerChange,
       activeAiDrawer,
       minAiDrawerSize,
-    } = useDrawers({ ...rest, onGlobalDrawerFocus, onAddNewActiveDrawer }, ariaLabels, {
+    } = useDrawers({ ...rest, onGlobalDrawerFocus, onAddNewActiveDrawer, onAiDrawerFocus }, ariaLabels, {
       ariaLabels,
       toolsHide,
       toolsOpen,

From 4629c8eea83495febcef75ee2d8009c920bdbf18 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Wed, 16 Jul 2025 11:23:54 +0200
Subject: [PATCH 05/24] fix: Focus control

---
 src/app-layout/utils/use-drawers.ts           |  3 +-
 .../drawer/global-ai-drawer.tsx               | 30 +++++++++----------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/app-layout/utils/use-drawers.ts b/src/app-layout/utils/use-drawers.ts
index 4c081d34df..ca8f69ae76 100644
--- a/src/app-layout/utils/use-drawers.ts
+++ b/src/app-layout/utils/use-drawers.ts
@@ -225,12 +225,13 @@ export function useDrawers(
 
     if (newDrawerId) {
       fireNonCancelableEvent(runtimeDrawers?.aiDrawer?.onToggle, { isOpen: true, initiatedByUserAction });
-      onAiDrawerFocus?.();
     }
 
     if (activeDrawerId) {
       fireNonCancelableEvent(runtimeDrawers?.aiDrawer?.onToggle, { isOpen: false, initiatedByUserAction });
     }
+
+    onAiDrawerFocus?.();
   }
 
   function onActiveDrawerChange(
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
index 85ca4bf28d..e9d01652ca 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
+++ b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
@@ -88,6 +88,21 @@ export function AppLayoutGlobalAiDrawerImplementation({
           }}
           data-testid={activeDrawerId && `awsui-app-layout-drawer-${activeDrawerId}`}
         >
+          {!isMobile && activeAiDrawer?.resizable && (
+            <div className={styles['drawer-slider']}>
+              <PanelResizeHandle
+                ref={aiDrawerFocusControl.refs.slider}
+                position="side"
+                className={testutilStyles['drawers-slider']}
+                ariaLabel={activeAiDrawer?.ariaLabels?.resizeHandle}
+                tooltipText={activeAiDrawer?.ariaLabels?.resizeHandleTooltipText}
+                ariaValuenow={resizeProps.relativeSize}
+                onKeyDown={resizeProps.onKeyDown}
+                onPointerDown={resizeProps.onPointerDown}
+                onDirectionClick={resizeProps.onDirectionClick}
+              />
+            </div>
+          )}
           <div className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}>
             <div className={clsx(styles['drawer-close-button'])}>
               <InternalButton
@@ -107,21 +122,6 @@ export function AppLayoutGlobalAiDrawerImplementation({
               {activeAiDrawer?.content}
             </div>
           </div>
-          {!isMobile && activeAiDrawer?.resizable && (
-            <div className={styles['drawer-slider']}>
-              <PanelResizeHandle
-                ref={aiDrawerFocusControl.refs.slider}
-                position="side"
-                className={testutilStyles['drawers-slider']}
-                ariaLabel={activeAiDrawer?.ariaLabels?.resizeHandle}
-                tooltipText={activeAiDrawer?.ariaLabels?.resizeHandleTooltipText}
-                ariaValuenow={resizeProps.relativeSize}
-                onKeyDown={resizeProps.onKeyDown}
-                onPointerDown={resizeProps.onPointerDown}
-                onDirectionClick={resizeProps.onDirectionClick}
-              />
-            </div>
-          )}
         </aside>
       )}
     </Transition>

From 8bf24d44e8f94a8ff13faabc7aeb596f2d106636 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Wed, 16 Jul 2025 12:38:21 +0200
Subject: [PATCH 06/24] chore: Resizing for the ai drawer

---
 src/app-layout/utils/interfaces.ts              |  2 +-
 src/app-layout/utils/use-keyboard-events.ts     | 16 ++++++++--------
 src/app-layout/utils/use-pointer-events.ts      | 10 ++++++++++
 .../drawer/global-ai-drawer.tsx                 |  3 ++-
 .../visual-refresh-toolbar/drawer/use-resize.ts |  5 +++--
 .../components/panel-resize-handle/index.tsx    | 17 +++++++++++------
 .../components/panel-resize-handle/styles.scss  |  3 ++-
 7 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/app-layout/utils/interfaces.ts b/src/app-layout/utils/interfaces.ts
index eda4455828..3614773b44 100644
--- a/src/app-layout/utils/interfaces.ts
+++ b/src/app-layout/utils/interfaces.ts
@@ -3,7 +3,7 @@
 import React from 'react';
 
 export interface SizeControlProps {
-  position: 'side' | 'bottom';
+  position: 'side-start' | 'side' | 'bottom';
   panelRef?: React.RefObject<HTMLDivElement>;
   handleRef?: React.RefObject<HTMLDivElement>;
   onResize: (newSize: number) => void;
diff --git a/src/app-layout/utils/use-keyboard-events.ts b/src/app-layout/utils/use-keyboard-events.ts
index cc69da42b5..53faef55a4 100644
--- a/src/app-layout/utils/use-keyboard-events.ts
+++ b/src/app-layout/utils/use-keyboard-events.ts
@@ -30,7 +30,7 @@ export const useKeyboardEvents = ({ position, onResize, panelRef }: SizeControlP
 
       const { panelHeight, panelWidth } = getCurrentSize(panelRef);
 
-      if (position === 'side') {
+      if (['side', 'side-start'].includes(position)) {
         currentSize = panelWidth;
       } else {
         currentSize = panelHeight;
@@ -42,11 +42,11 @@ export const useKeyboardEvents = ({ position, onResize, panelRef }: SizeControlP
       switch (direction) {
         case 'block-start':
         case 'inline-start':
-          singleStepUp();
+          position === 'side-start' ? singleStepDown() : singleStepUp();
           break;
         case 'block-end':
         case 'inline-end':
-          singleStepDown();
+          position === 'side-start' ? singleStepUp() : singleStepDown();
           break;
       }
     },
@@ -57,7 +57,7 @@ export const useKeyboardEvents = ({ position, onResize, panelRef }: SizeControlP
 
       const { panelHeight, panelWidth } = getCurrentSize(panelRef);
 
-      if (position === 'side') {
+      if (['side', 'side-start'].includes(position)) {
         currentSize = panelWidth;
         // don't need the exact max size as it's constrained in the set size function
         maxSize = window.innerWidth;
@@ -76,16 +76,16 @@ export const useKeyboardEvents = ({ position, onResize, panelRef }: SizeControlP
 
       handleKey(event, {
         onBlockStart: () => {
-          position === 'bottom' ? singleStepUp() : singleStepDown();
+          ['bottom', 'side-start'].includes(position) ? singleStepUp() : singleStepDown();
         },
         onBlockEnd: () => {
-          position === 'bottom' ? singleStepDown() : singleStepUp();
+          ['bottom', 'side-start'].includes(position) ? singleStepDown() : singleStepUp();
         },
         onInlineEnd: () => {
-          position === 'bottom' ? singleStepUp() : singleStepDown();
+          ['bottom', 'side-start'].includes(position) ? singleStepUp() : singleStepDown();
         },
         onInlineStart: () => {
-          position === 'bottom' ? singleStepDown() : singleStepUp();
+          ['bottom', 'side-start'].includes(position) ? singleStepDown() : singleStepUp();
         },
         onPageDown: () => multipleStepDown(),
         onPageUp: () => multipleStepUp(),
diff --git a/src/app-layout/utils/use-pointer-events.ts b/src/app-layout/utils/use-pointer-events.ts
index f526125cb0..a7b134cbd8 100644
--- a/src/app-layout/utils/use-pointer-events.ts
+++ b/src/app-layout/utils/use-pointer-events.ts
@@ -26,6 +26,16 @@ export const usePointerEvents = ({ position, panelRef, handleRef, onResize }: Si
         const handleOffset = getLogicalBoundingClientRect(handleRef.current).inlineSize / 2;
         const width = getLogicalBoundingClientRect(panelRef.current).insetInlineEnd - mouseClientX + handleOffset;
 
+        onResize(width);
+      } else if (position === 'side-start') {
+        const mouseClientX = getLogicalClientX(event, getIsRtl(panelRef.current)) || 0;
+
+        // The handle offset aligns the cursor with the middle of the resize handle.
+        const handleOffset = getLogicalBoundingClientRect(handleRef.current).inlineSize / 2;
+        const panelBoundingClientRect = getLogicalBoundingClientRect(panelRef.current);
+        const width =
+          panelBoundingClientRect.insetInlineEnd + mouseClientX + handleOffset - panelBoundingClientRect.inlineSize;
+
         onResize(width);
       } else {
         const mouseClientY = event.clientY || 0;
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
index e9d01652ca..25bc2562d8 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
+++ b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
@@ -54,6 +54,7 @@ export function AppLayoutGlobalAiDrawerImplementation({
     panelRef: drawerRef,
     handleRef: aiDrawerFocusControl.refs.slider,
     onResize: size => onActiveDrawerResize({ id: activeDrawerId!, size }),
+    position: 'side-start',
   });
   const size = getLimitedValue(minAiDrawerSize, activeAiDrawerSize, maxAiDrawerSize);
   const lastOpenedDrawerId = drawersOpenQueue?.length ? drawersOpenQueue[0] : activeDrawerId;
@@ -92,7 +93,7 @@ export function AppLayoutGlobalAiDrawerImplementation({
             <div className={styles['drawer-slider']}>
               <PanelResizeHandle
                 ref={aiDrawerFocusControl.refs.slider}
-                position="side"
+                position="side-start"
                 className={testutilStyles['drawers-slider']}
                 ariaLabel={activeAiDrawer?.ariaLabels?.resizeHandle}
                 tooltipText={activeAiDrawer?.ariaLabels?.resizeHandleTooltipText}
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/use-resize.ts b/src/app-layout/visual-refresh-toolbar/drawer/use-resize.ts
index 04fa41012b..ce1dac7ea4 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/use-resize.ts
+++ b/src/app-layout/visual-refresh-toolbar/drawer/use-resize.ts
@@ -14,9 +14,10 @@ interface ResizeProps {
   panelRef: React.RefObject<HTMLDivElement>;
   handleRef: React.RefObject<HTMLDivElement>;
   onResize: (newWidth: number) => void;
+  position?: 'side-start' | 'side';
 }
 
-export function useResize({ currentWidth, minWidth, maxWidth, panelRef, handleRef, onResize }: ResizeProps) {
+export function useResize({ currentWidth, minWidth, maxWidth, panelRef, handleRef, onResize, position }: ResizeProps) {
   const onResizeHandler = (newWidth: number) => {
     const size = getLimitedValue(minWidth, newWidth, maxWidth);
 
@@ -26,7 +27,7 @@ export function useResize({ currentWidth, minWidth, maxWidth, panelRef, handleRe
   };
 
   const sizeControlProps: SizeControlProps = {
-    position: 'side',
+    position: position ?? 'side',
     panelRef,
     handleRef,
     onResize: onResizeHandler,
diff --git a/src/internal/components/panel-resize-handle/index.tsx b/src/internal/components/panel-resize-handle/index.tsx
index 9b8cb756cc..934d532a22 100644
--- a/src/internal/components/panel-resize-handle/index.tsx
+++ b/src/internal/components/panel-resize-handle/index.tsx
@@ -11,7 +11,7 @@ interface ResizeHandleProps {
   className?: string;
   ariaLabel: string | undefined;
   tooltipText?: string | undefined;
-  position: 'side' | 'bottom';
+  position: 'side-start' | 'side' | 'bottom';
   ariaValuenow: number;
   onDirectionClick: DragHandleProps['onDirectionClick'];
   onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
@@ -28,17 +28,22 @@ export default React.forwardRef<HTMLDivElement, ResizeHandleProps>(function Pane
       ariaLabel={ariaLabel}
       tooltipText={tooltipText}
       ariaValue={{ valueMin: 0, valueMax: 100, valueNow: ariaValuenow }}
-      variant={position === 'side' ? 'resize-horizontal' : 'resize-vertical'}
+      variant={['side', 'side-start'].includes(position) ? 'resize-horizontal' : 'resize-vertical'}
       directions={
         position === 'side'
           ? {
               'inline-end': ariaValuenow === 0 ? 'disabled' : 'active',
               'inline-start': ariaValuenow === 100 ? 'disabled' : 'active',
             }
-          : {
-              'block-end': ariaValuenow === 0 ? 'disabled' : 'active',
-              'block-start': ariaValuenow === 100 ? 'disabled' : 'active',
-            }
+          : position === 'side-start'
+            ? {
+                'inline-end': ariaValuenow === 100 ? 'disabled' : 'active',
+                'inline-start': ariaValuenow === 0 ? 'disabled' : 'active',
+              }
+            : {
+                'block-end': ariaValuenow === 0 ? 'disabled' : 'active',
+                'block-start': ariaValuenow === 100 ? 'disabled' : 'active',
+              }
       }
       onDirectionClick={onDirectionClick}
       onKeyDown={onKeyDown}
diff --git a/src/internal/components/panel-resize-handle/styles.scss b/src/internal/components/panel-resize-handle/styles.scss
index e4ebbdbef3..eac234f82f 100644
--- a/src/internal/components/panel-resize-handle/styles.scss
+++ b/src/internal/components/panel-resize-handle/styles.scss
@@ -27,7 +27,8 @@
   }
 }
 
-.slider-side {
+.slider-side,
+.slider-side-start {
   cursor: ew-resize;
   margin-block: 0;
   margin-inline-end: 0;

From 0dac664e3936ab060b159bf85ceb94e8f6c27b50 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Wed, 16 Jul 2025 12:41:00 +0200
Subject: [PATCH 07/24] chore: Adjust closing button for the ai drawer

---
 .../visual-refresh-toolbar/drawer/global-ai-drawer.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
index 25bc2562d8..f78d8f13c8 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
+++ b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
@@ -112,7 +112,7 @@ export function AppLayoutGlobalAiDrawerImplementation({
                   [testutilStyles['active-drawer-close-button']]: activeDrawerId,
                 })}
                 formAction="none"
-                iconName={isMobile ? 'close' : 'angle-right'}
+                iconName={isMobile ? 'close' : 'angle-left'}
                 onClick={() => onActiveAiDrawerChange(null, { initiatedByUserAction: true })}
                 ref={aiDrawerFocusControl.refs.close}
                 variant="icon"

From 18d8e704e7fbae5c7fa09e4436a2885eb08f6b77 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Thu, 17 Jul 2025 10:58:36 +0200
Subject: [PATCH 08/24] chore: AI drawer's header and styles

---
 pages/app-layout/runtime-drawers.page.tsx     | 16 +++-
 .../drawer/global-ai-drawer.tsx               | 93 +++++++++++++------
 .../visual-refresh-toolbar/drawer/styles.scss | 19 ++++
 3 files changed, 98 insertions(+), 30 deletions(-)

diff --git a/pages/app-layout/runtime-drawers.page.tsx b/pages/app-layout/runtime-drawers.page.tsx
index 36a96a9a4e..27ff6b4662 100644
--- a/pages/app-layout/runtime-drawers.page.tsx
+++ b/pages/app-layout/runtime-drawers.page.tsx
@@ -36,6 +36,8 @@ awsuiPlugins.appLayout.registerDrawer({
   id: 'amazon-q',
   type: 'global-ai',
   resizable: true,
+  isExpandable: true,
+  defaultSize: 500,
 
   ariaLabels: {
     closeButton: 'Close button',
@@ -49,7 +51,19 @@ awsuiPlugins.appLayout.registerDrawer({
   },
 
   mountContent: container => {
-    ReactDOM.render(<div>Tela</div>, container);
+    ReactDOM.render(
+      <div
+        style={{
+          blockSize: '100vh',
+          background: 'white',
+          marginInlineEnd: '16px',
+          borderStartEndRadius: '4px',
+        }}
+      >
+        Tela
+      </div>,
+      container
+    );
   },
   unmountContent: container => unmountComponentAtNode(container),
 });
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
index f78d8f13c8..99467d0a53 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
+++ b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
@@ -7,9 +7,10 @@ import clsx from 'clsx';
 import { InternalButton } from '../../../button/internal';
 import PanelResizeHandle from '../../../internal/components/panel-resize-handle';
 import customCssProps from '../../../internal/generated/custom-css-properties';
+import { usePrevious } from '../../../internal/hooks/use-previous';
 import { createWidgetizedComponent } from '../../../internal/widgets';
 import { getLimitedValue } from '../../../split-panel/utils/size-utils';
-import { getDrawerStyles } from '../compute-layout';
+// import { getDrawerStyles } from '../compute-layout';
 import { AppLayoutInternals } from '../interfaces';
 import { useResize } from './use-resize';
 
@@ -32,11 +33,12 @@ export function AppLayoutGlobalAiDrawerImplementation({
     ariaLabels,
     aiDrawerFocusControl,
     isMobile,
-    placement,
     verticalOffsets,
     drawersOpenQueue,
     onActiveAiDrawerChange,
     onActiveDrawerResize,
+    expandedDrawerId,
+    setExpandedDrawerId,
   } = appLayoutInternals;
   const drawerRef = useRef<HTMLDivElement>(null);
   const activeDrawerId = activeAiDrawer?.id;
@@ -46,7 +48,7 @@ export function AppLayoutGlobalAiDrawerImplementation({
     content: activeAiDrawer ? activeAiDrawer.ariaLabels?.drawerName : ariaLabels?.tools,
   };
 
-  const { drawerHeight, drawerTopOffset } = getDrawerStyles(verticalOffsets, isMobile, placement);
+  // const { drawerHeight, drawerTopOffset } = getDrawerStyles(verticalOffsets, isMobile, placement);
   const resizeProps = useResize({
     currentWidth: activeAiDrawerSize,
     minWidth: minAiDrawerSize,
@@ -58,22 +60,31 @@ export function AppLayoutGlobalAiDrawerImplementation({
   });
   const size = getLimitedValue(minAiDrawerSize, activeAiDrawerSize, maxAiDrawerSize);
   const lastOpenedDrawerId = drawersOpenQueue?.length ? drawersOpenQueue[0] : activeDrawerId;
-  const animationDisabled = activeAiDrawer?.defaultActive && !drawersOpenQueue.includes(activeAiDrawer.id);
+  const isExpanded = activeAiDrawer?.isExpandable && expandedDrawerId === activeDrawerId;
+  const wasExpanded = usePrevious(isExpanded);
+  const animationDisabled =
+    (activeAiDrawer?.defaultActive && !drawersOpenQueue.includes(activeAiDrawer.id)) || (wasExpanded && !isExpanded);
 
   return (
-    <Transition nodeRef={drawerRef} in={!!activeAiDrawer} appear={true} timeout={0}>
+    <Transition nodeRef={drawerRef} in={!!activeAiDrawer || isExpanded} appear={true} timeout={0}>
       {state => (
         <aside
           id={activeAiDrawer?.id}
           aria-hidden={!activeAiDrawer}
           aria-label={computedAriaLabels.content}
-          className={clsx(styles.drawer, styles['ai-drawer'], {
-            [sharedStyles['with-motion-horizontal']]: !animationDisabled,
-            [styles['last-opened']]: lastOpenedDrawerId === activeDrawerId,
-            [testutilStyles['active-drawer']]: activeDrawerId,
-            [styles['drawer-hidden']]: !activeAiDrawer,
-            [testutilStyles['drawer-closed']]: !activeAiDrawer,
-          })}
+          className={clsx(
+            styles.drawer,
+            styles['ai-drawer'],
+            !animationDisabled && isExpanded && styles['with-expanded-motion'],
+            {
+              [sharedStyles['with-motion-horizontal']]: !animationDisabled,
+              [styles['last-opened']]: lastOpenedDrawerId === activeDrawerId || isExpanded,
+              [testutilStyles['active-drawer']]: activeDrawerId,
+              [styles['drawer-hidden']]: !activeAiDrawer,
+              [testutilStyles['drawer-closed']]: !activeAiDrawer,
+              [styles['drawer-expanded']]: isExpanded,
+            }
+          )}
           ref={drawerRef}
           onBlur={e => {
             if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
@@ -81,8 +92,8 @@ export function AppLayoutGlobalAiDrawerImplementation({
             }
           }}
           style={{
-            blockSize: drawerHeight,
-            insetBlockStart: drawerTopOffset,
+            blockSize: '100vh',
+            insetBlockStart: verticalOffsets.toolbar,
             ...(!isMobile && {
               [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,
             }),
@@ -105,21 +116,45 @@ export function AppLayoutGlobalAiDrawerImplementation({
             </div>
           )}
           <div className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}>
-            <div className={clsx(styles['drawer-close-button'])}>
-              <InternalButton
-                ariaLabel={computedAriaLabels.closeButton}
-                className={clsx({
-                  [testutilStyles['active-drawer-close-button']]: activeDrawerId,
-                })}
-                formAction="none"
-                iconName={isMobile ? 'close' : 'angle-left'}
-                onClick={() => onActiveAiDrawerChange(null, { initiatedByUserAction: true })}
-                ref={aiDrawerFocusControl.refs.close}
-                variant="icon"
-                analyticsAction="close"
-              />
-            </div>
-            <div className={styles['drawer-content']} style={{ blockSize: drawerHeight }}>
+            <div
+              className={styles['drawer-content']}
+              style={{
+                blockSize: '100vh',
+              }}
+            >
+              <header className={styles['drawer-content-header']}>
+                <div>logo</div>
+                <div className={styles['drawer-actions']}>
+                  {!isMobile && activeAiDrawer?.isExpandable && (
+                    <div className={styles['drawer-expanded-mode-button']}>
+                      <InternalButton
+                        ariaLabel={activeAiDrawer?.ariaLabels?.expandedModeButton}
+                        className={testutilStyles['active-drawer-expanded-mode-button']}
+                        formAction="none"
+                        ariaExpanded={isExpanded}
+                        iconName={isExpanded ? 'shrink' : 'expand'}
+                        onClick={() => setExpandedDrawerId(isExpanded ? null : activeDrawerId!)}
+                        variant="icon"
+                        analyticsAction={isExpanded ? 'expand' : 'collapse'}
+                      />
+                    </div>
+                  )}
+                  <div className={clsx(styles['drawer-close-button'])}>
+                    <InternalButton
+                      ariaLabel={computedAriaLabels.closeButton}
+                      className={clsx({
+                        [testutilStyles['active-drawer-close-button']]: activeDrawerId,
+                      })}
+                      formAction="none"
+                      iconName={isMobile ? 'close' : 'angle-left'}
+                      onClick={() => onActiveAiDrawerChange(null, { initiatedByUserAction: true })}
+                      ref={aiDrawerFocusControl.refs.close}
+                      variant="icon"
+                      analyticsAction="close"
+                    />
+                  </div>
+                </div>
+              </header>
               {activeAiDrawer?.content}
             </div>
           </div>
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/styles.scss b/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
index 58975d9c97..a4cca4f4c1 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
@@ -240,9 +240,28 @@ $drawer-resize-handle-size: awsui.$space-m;
 
   &.ai-drawer {
     grid-template-columns: 1fr awsui.$space-m;
+    background: awsui.$color-gap-global-drawer;
 
     > .drawer-slider {
       grid-column: 2;
     }
+
+    > .drawer-content-container {
+      > .drawer-content {
+        > .drawer-content-header {
+          block-size: 42px;
+          position: sticky;
+          z-index: 1000;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding-inline: awsui.$space-m;
+
+          > .drawer-actions {
+            display: flex;
+          }
+        }
+      }
+    }
   }
 }

From 4c02e31566c1f173634fb8b833fd242dffa3da10 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Thu, 17 Jul 2025 13:38:59 +0200
Subject: [PATCH 09/24] chore: Adjust app layout horizontal layout calculation
 to include the ai drawer

---
 .../__tests__/multi-layout-props.test.tsx           |  4 ++++
 .../__tests__/runtime-drawers-layout.test.tsx       |  4 ++++
 .../visual-refresh-toolbar/compute-layout.ts        | 13 +++++++------
 src/app-layout/visual-refresh-toolbar/index.tsx     |  4 +++-
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/app-layout/__tests__/multi-layout-props.test.tsx b/src/app-layout/__tests__/multi-layout-props.test.tsx
index 2ebf951069..a00f96be4b 100644
--- a/src/app-layout/__tests__/multi-layout-props.test.tsx
+++ b/src/app-layout/__tests__/multi-layout-props.test.tsx
@@ -10,6 +10,7 @@ describe('mergeMultiAppLayoutProps', () => {
   const mockParentActiveGlobalDrawerChange = jest.fn();
   const mockParentSplitPanelToggle = jest.fn();
   const mockSetExpandedDrawerId = jest.fn();
+  const mockParentActiveAiDrawerChange = jest.fn();
   const ownProps: SharedProps = {
     forceDeduplicationType: 'primary',
     ariaLabels: {
@@ -45,6 +46,9 @@ describe('mergeMultiAppLayoutProps', () => {
     splitPanelFocusRef: React.createRef(),
     onSplitPanelToggle: mockParentSplitPanelToggle,
     setExpandedDrawerId: mockSetExpandedDrawerId,
+    aiDrawer: undefined,
+    onActiveAiDrawerChange: mockParentActiveAiDrawerChange,
+    aiDrawerFocusRef: React.createRef(),
   };
 
   const additionalPropsBase: Partial<SharedProps>[] = [
diff --git a/src/app-layout/__tests__/runtime-drawers-layout.test.tsx b/src/app-layout/__tests__/runtime-drawers-layout.test.tsx
index 5e4a3a82b8..34ea2b4523 100644
--- a/src/app-layout/__tests__/runtime-drawers-layout.test.tsx
+++ b/src/app-layout/__tests__/runtime-drawers-layout.test.tsx
@@ -48,6 +48,7 @@ jest.mock('../../../lib/components/app-layout/utils/use-app-layout-placement', (
         inlineSize: Infinity,
         insetBlockStart: 0,
         insetBlockEnd: 0,
+        maxAiDrawerSize: 0,
       },
     ]),
   };
@@ -89,6 +90,7 @@ describe('toolbar mode only features', () => {
         maxGlobalDrawersSizes: {},
         totalActiveGlobalDrawersSize: 0,
         resizableSpaceAvailable: 792,
+        maxAiDrawerSize: 0,
       });
       awsuiPlugins.appLayout.registerDrawer({
         ...drawerDefaults,
@@ -141,6 +143,7 @@ describe('toolbar mode only features', () => {
         maxGlobalDrawersSizes: {},
         totalActiveGlobalDrawersSize: 0,
         resizableSpaceAvailable: 792,
+        maxAiDrawerSize: 0,
       });
       const onToggle = jest.fn();
       awsuiPlugins.appLayout.registerDrawer({
@@ -198,6 +201,7 @@ describe('toolbar mode only features', () => {
         },
         totalActiveGlobalDrawersSize: 0,
         resizableSpaceAvailable: 792,
+        maxAiDrawerSize: 0,
       });
       const onDrawerItemResize = jest.fn();
       awsuiPlugins.appLayout.registerDrawer({
diff --git a/src/app-layout/visual-refresh-toolbar/compute-layout.ts b/src/app-layout/visual-refresh-toolbar/compute-layout.ts
index 93ad1dea11..c5d1bd30a4 100644
--- a/src/app-layout/visual-refresh-toolbar/compute-layout.ts
+++ b/src/app-layout/visual-refresh-toolbar/compute-layout.ts
@@ -15,9 +15,11 @@ interface HorizontalLayoutInput {
   splitPanelSize: number;
   isMobile: boolean;
   activeGlobalDrawersSizes: Record<string, number>;
+  activeAiDrawerSize: number;
 }
 
 export const CONTENT_PADDING = 2 * 24; // space-xl
+const MOBILE_BREAKPOINT = 688;
 
 export function computeHorizontalLayout({
   navigationOpen,
@@ -30,13 +32,12 @@ export function computeHorizontalLayout({
   splitPanelSize,
   isMobile,
   activeGlobalDrawersSizes,
+  activeAiDrawerSize,
 }: HorizontalLayoutInput) {
   const activeNavigationWidth = navigationOpen ? navigationWidth : 0;
 
-  let resizableSpaceAvailable = Math.max(
-    0,
-    placement.inlineSize - minContentWidth - CONTENT_PADDING - activeNavigationWidth
-  );
+  let resizableSpaceAvailable =
+    Math.max(0, placement.inlineSize - minContentWidth - CONTENT_PADDING - activeNavigationWidth) - activeAiDrawerSize;
   const totalActiveGlobalDrawersSize = Object.values(activeGlobalDrawersSizes).reduce((acc, size) => acc + size, 0);
 
   const availableWidthForSplitPanel = resizableSpaceAvailable - activeDrawerSize;
@@ -49,8 +50,8 @@ export function computeHorizontalLayout({
   const maxSplitPanelSize = Math.max(resizableSpaceAvailable - totalActiveGlobalDrawersSize - activeDrawerSize, 0);
   resizableSpaceAvailable -= sideSplitPanelSize;
   const maxDrawerSize = resizableSpaceAvailable - totalActiveGlobalDrawersSize;
-  // TODO replace with a calculated value
-  const maxAiDrawerSize = 600;
+  // let the ai drawer be resized until the "main screen" hits the mobile breakpoint to have consistent UX
+  const maxAiDrawerSize = placement.inlineSize - MOBILE_BREAKPOINT;
   const maxGlobalDrawersSizes: Record<string, number> = Object.keys(activeGlobalDrawersSizes).reduce(
     (acc, drawerId) => {
       return {
diff --git a/src/app-layout/visual-refresh-toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/index.tsx
index d647490b1a..4c9e1441df 100644
--- a/src/app-layout/visual-refresh-toolbar/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/index.tsx
@@ -278,6 +278,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       splitPanelPosition: splitPanelPreferences?.position,
       isMobile,
       activeGlobalDrawersSizes,
+      activeAiDrawerSize,
     });
 
     const { ref: intersectionObserverRef, isIntersecting } = useIntersectionObserver({ initialState: true });
@@ -450,7 +451,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
 
       const activeNavigationWidth = !navigationHide && navigationOpen ? navigationWidth : 0;
       const scrollWidth = activeNavigationWidth + CONTENT_PADDING + totalActiveDrawersMinSize;
-      const hasHorizontalScroll = scrollWidth > placement.inlineSize;
+      const hasHorizontalScroll = scrollWidth > placement.inlineSize - activeAiDrawerSize;
       if (hasHorizontalScroll) {
         if (!navigationHide && navigationOpen) {
           onNavigationToggle(false);
@@ -468,6 +469,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       navigationWidth,
       onNavigationToggle,
       placement.inlineSize,
+      activeAiDrawerSize,
     ]);
 
     /**

From ac24da4f8a56d64f8270046586f88362c66b0224 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Thu, 17 Jul 2025 13:39:19 +0200
Subject: [PATCH 10/24] chore: Update snapshot tests

---
 .../widget-contract-split-panel.test.tsx.snap | 210 +++++++++++
 .../widget-contract.test.tsx.snap             | 336 ++++++++++++++++++
 2 files changed, 546 insertions(+)

diff --git a/src/app-layout/__tests__/__snapshots__/widget-contract-split-panel.test.tsx.snap b/src/app-layout/__tests__/__snapshots__/widget-contract-split-panel.test.tsx.snap
index a5414f3640..109f0647a6 100644
--- a/src/app-layout/__tests__/__snapshots__/widget-contract-split-panel.test.tsx.snap
+++ b/src/app-layout/__tests__/__snapshots__/widget-contract-split-panel.test.tsx.snap
@@ -4,11 +4,29 @@ exports[`Theme=refresh-toolbar, Size=desktop contract with split panel (trigger
 Map {
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -65,8 +83,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -86,6 +106,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -136,11 +157,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -197,8 +236,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -218,6 +259,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -322,11 +364,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -383,8 +443,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -404,6 +466,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -454,11 +517,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -515,8 +596,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -536,6 +619,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -586,11 +670,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -647,8 +749,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -668,6 +772,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -761,11 +866,29 @@ exports[`Theme=refresh-toolbar, Size=desktop contract with split panel 1`] = `
 Map {
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -822,8 +945,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -845,6 +970,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -897,11 +1023,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -958,8 +1102,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -981,6 +1127,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1089,11 +1236,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1150,8 +1315,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -1173,6 +1340,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1225,11 +1393,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1286,8 +1472,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -1309,6 +1497,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1361,11 +1550,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1422,8 +1629,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -1445,6 +1654,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
diff --git a/src/app-layout/__tests__/__snapshots__/widget-contract.test.tsx.snap b/src/app-layout/__tests__/__snapshots__/widget-contract.test.tsx.snap
index 08b6cb4001..2cc318bf68 100644
--- a/src/app-layout/__tests__/__snapshots__/widget-contract.test.tsx.snap
+++ b/src/app-layout/__tests__/__snapshots__/widget-contract.test.tsx.snap
@@ -4,11 +4,29 @@ exports[`Theme=refresh-toolbar, Size=desktop contract for default use-case 1`] =
 Map {
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -63,8 +81,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -84,6 +104,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -134,11 +155,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -193,8 +232,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -214,6 +255,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -295,11 +337,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -354,8 +414,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -375,6 +437,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -425,11 +488,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -484,8 +565,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -505,6 +588,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -555,11 +639,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -614,8 +716,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -635,6 +739,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -730,11 +835,29 @@ exports[`Theme=refresh-toolbar, Size=desktop contract with all slots provided 1`
 Map {
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -793,8 +916,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <div>
@@ -816,6 +941,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -866,11 +992,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -929,8 +1073,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <div>
@@ -952,6 +1098,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1005,11 +1152,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1068,8 +1233,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <div>
@@ -1091,6 +1258,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1174,11 +1342,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1237,8 +1423,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <div>
@@ -1260,6 +1448,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1310,11 +1499,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1373,8 +1580,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <div>
@@ -1396,6 +1605,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1446,11 +1656,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1509,8 +1737,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <div>
@@ -1532,6 +1762,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1630,6 +1861,8 @@ exports[`Theme=refresh-toolbar, Size=desktop contract with drawers 1`] = `
 Map {
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": {
         "ariaLabels": {
           "closeButton": "Security close button",
@@ -1649,6 +1882,22 @@ Map {
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1705,8 +1954,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -1726,6 +1977,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1776,6 +2028,8 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": {
         "ariaLabels": {
           "closeButton": "Security close button",
@@ -1795,6 +2049,22 @@ Map {
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1851,8 +2121,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -1872,6 +2144,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1953,6 +2226,8 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": {
         "ariaLabels": {
           "closeButton": "Security close button",
@@ -1972,6 +2247,22 @@ Map {
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -2028,8 +2319,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -2049,6 +2342,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -2099,6 +2393,8 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": {
         "ariaLabels": {
           "closeButton": "Security close button",
@@ -2118,6 +2414,22 @@ Map {
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -2174,8 +2486,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -2195,6 +2509,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -2245,6 +2560,8 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": {
         "ariaLabels": {
           "closeButton": "Security close button",
@@ -2264,6 +2581,22 @@ Map {
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -2320,8 +2653,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -2341,6 +2676,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],

From c4c209a3c1f041d10d19aa35ceedfabd0fa0c9a6 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Thu, 17 Jul 2025 14:44:14 +0200
Subject: [PATCH 11/24] feat: AI drawer mobile styles

---
 src/app-layout/visual-refresh-toolbar/skeleton/styles.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
index c713a622dd..7b7d80bc93 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
@@ -89,6 +89,7 @@
   }
 }
 
+.ai-drawer,
 .navigation,
 .tools,
 .global-tools {
@@ -103,7 +104,9 @@
 }
 
 .ai-drawer {
-  grid-area: ai-drawer;
+  @include desktop-only {
+    grid-area: ai-drawer;
+  }
 }
 
 .navigation {

From 6a1d56a8713178ac8d0519dc8bc83499743cc0f5 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Thu, 17 Jul 2025 15:07:11 +0200
Subject: [PATCH 12/24] fix: Split panel inline size

---
 src/app-layout/visual-refresh-toolbar/skeleton/styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
index 7b7d80bc93..b1ae4e0357 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
@@ -24,7 +24,7 @@
   grid-column: 1 / -1;
 
   @include desktop-only {
-    grid-column: 2 / 5;
+    grid-column: 3 / 6;
   }
 }
 

From ffca2c711026658cc071dbf82bb2bdb6f47ffd2f Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Thu, 17 Jul 2025 15:08:20 +0200
Subject: [PATCH 13/24] chore: Small refactoring

---
 src/app-layout/visual-refresh-toolbar/compute-layout.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app-layout/visual-refresh-toolbar/compute-layout.ts b/src/app-layout/visual-refresh-toolbar/compute-layout.ts
index c5d1bd30a4..700197a512 100644
--- a/src/app-layout/visual-refresh-toolbar/compute-layout.ts
+++ b/src/app-layout/visual-refresh-toolbar/compute-layout.ts
@@ -36,8 +36,10 @@ export function computeHorizontalLayout({
 }: HorizontalLayoutInput) {
   const activeNavigationWidth = navigationOpen ? navigationWidth : 0;
 
-  let resizableSpaceAvailable =
-    Math.max(0, placement.inlineSize - minContentWidth - CONTENT_PADDING - activeNavigationWidth) - activeAiDrawerSize;
+  let resizableSpaceAvailable = Math.max(
+    0,
+    placement.inlineSize - minContentWidth - CONTENT_PADDING - activeNavigationWidth - activeAiDrawerSize
+  );
   const totalActiveGlobalDrawersSize = Object.values(activeGlobalDrawersSizes).reduce((acc, size) => acc + size, 0);
 
   const availableWidthForSplitPanel = resizableSpaceAvailable - activeDrawerSize;

From 77cd03dbd75154bff13a48dec95d81d139bbb3cb Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Fri, 18 Jul 2025 12:00:01 +0200
Subject: [PATCH 14/24] chore: Stick ai drawer to the left position

---
 pages/app-layout/runtime-drawers.page.tsx             |  5 +++--
 .../drawer/global-ai-drawer.tsx                       | 11 +++--------
 .../visual-refresh-toolbar/drawer/styles.scss         |  2 ++
 .../visual-refresh-toolbar/skeleton/index.tsx         | 11 ++++++++++-
 .../visual-refresh-toolbar/skeleton/styles.scss       |  1 +
 5 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/pages/app-layout/runtime-drawers.page.tsx b/pages/app-layout/runtime-drawers.page.tsx
index 27ff6b4662..27b53c076c 100644
--- a/pages/app-layout/runtime-drawers.page.tsx
+++ b/pages/app-layout/runtime-drawers.page.tsx
@@ -54,13 +54,14 @@ awsuiPlugins.appLayout.registerDrawer({
     ReactDOM.render(
       <div
         style={{
-          blockSize: '100vh',
           background: 'white',
           marginInlineEnd: '16px',
           borderStartEndRadius: '4px',
         }}
       >
-        Tela
+        {new Array(100).fill(null).map((_, index) => (
+          <div key={index}>Tela content</div>
+        ))}
       </div>,
       container
     );
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
index 99467d0a53..34c5cd44b6 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
+++ b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
@@ -48,7 +48,6 @@ export function AppLayoutGlobalAiDrawerImplementation({
     content: activeAiDrawer ? activeAiDrawer.ariaLabels?.drawerName : ariaLabels?.tools,
   };
 
-  // const { drawerHeight, drawerTopOffset } = getDrawerStyles(verticalOffsets, isMobile, placement);
   const resizeProps = useResize({
     currentWidth: activeAiDrawerSize,
     minWidth: minAiDrawerSize,
@@ -64,6 +63,7 @@ export function AppLayoutGlobalAiDrawerImplementation({
   const wasExpanded = usePrevious(isExpanded);
   const animationDisabled =
     (activeAiDrawer?.defaultActive && !drawersOpenQueue.includes(activeAiDrawer.id)) || (wasExpanded && !isExpanded);
+  const drawerHeight = `calc(100vh - ${verticalOffsets.toolbar}}px)`;
 
   return (
     <Transition nodeRef={drawerRef} in={!!activeAiDrawer || isExpanded} appear={true} timeout={0}>
@@ -92,7 +92,7 @@ export function AppLayoutGlobalAiDrawerImplementation({
             }
           }}
           style={{
-            blockSize: '100vh',
+            blockSize: drawerHeight,
             insetBlockStart: verticalOffsets.toolbar,
             ...(!isMobile && {
               [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,
@@ -116,12 +116,7 @@ export function AppLayoutGlobalAiDrawerImplementation({
             </div>
           )}
           <div className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}>
-            <div
-              className={styles['drawer-content']}
-              style={{
-                blockSize: '100vh',
-              }}
-            >
+            <div className={styles['drawer-content']}>
               <header className={styles['drawer-content-header']}>
                 <div>logo</div>
                 <div className={styles['drawer-actions']}>
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/styles.scss b/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
index a4cca4f4c1..7b0f832923 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
@@ -255,7 +255,9 @@ $drawer-resize-handle-size: awsui.$space-m;
           display: flex;
           justify-content: space-between;
           align-items: center;
+          inset-block-start: 0;
           padding-inline: awsui.$space-m;
+          background: awsui.$color-gap-global-drawer;
 
           > .drawer-actions {
             display: flex;
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx b/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
index 25ba548a7b..f89ef3e8e1 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
@@ -111,7 +111,16 @@ export const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutPro
           {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}
         >
           {toolbar}
-          <div className={styles['ai-drawer']}>{aiDrawer}</div>
+          <div
+            className={styles['ai-drawer']}
+            style={{
+              // TODO replace with a var
+              insetBlockStart: '41px',
+              blockSize: 'calc(100vh - 41px)',
+            }}
+          >
+            {aiDrawer}
+          </div>
           {navigation && (
             <div
               className={clsx(
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
index b1ae4e0357..198219ace1 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
@@ -106,6 +106,7 @@
 .ai-drawer {
   @include desktop-only {
     grid-area: ai-drawer;
+    position: sticky;
   }
 }
 

From c866866f4b418c8633b97fcd72642d16acc5d39d Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Fri, 18 Jul 2025 12:46:39 +0200
Subject: [PATCH 15/24] feat: Optional white header for ai drawer

---
 package.json                                        |  2 +-
 pages/app-layout/runtime-drawers.page.tsx           |  1 -
 .../drawer/global-ai-drawer.tsx                     | 13 +++++++++----
 .../visual-refresh-toolbar/drawer/styles.scss       |  9 ++++++++-
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 2e75b7eebb..bd729951cf 100644
--- a/package.json
+++ b/package.json
@@ -167,7 +167,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "800 kB",
+      "limit": "801 kB",
       "ignore": "react-dom"
     }
   ],
diff --git a/pages/app-layout/runtime-drawers.page.tsx b/pages/app-layout/runtime-drawers.page.tsx
index 27b53c076c..7264057a71 100644
--- a/pages/app-layout/runtime-drawers.page.tsx
+++ b/pages/app-layout/runtime-drawers.page.tsx
@@ -56,7 +56,6 @@ awsuiPlugins.appLayout.registerDrawer({
         style={{
           background: 'white',
           marginInlineEnd: '16px',
-          borderStartEndRadius: '4px',
         }}
       >
         {new Array(100).fill(null).map((_, index) => (
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
index 34c5cd44b6..a0bf7f8407 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
+++ b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { Transition } from 'react-transition-group';
 import clsx from 'clsx';
 
@@ -10,7 +10,7 @@ import customCssProps from '../../../internal/generated/custom-css-properties';
 import { usePrevious } from '../../../internal/hooks/use-previous';
 import { createWidgetizedComponent } from '../../../internal/widgets';
 import { getLimitedValue } from '../../../split-panel/utils/size-utils';
-// import { getDrawerStyles } from '../compute-layout';
+import Toggle from '../../../toggle/internal';
 import { AppLayoutInternals } from '../interfaces';
 import { useResize } from './use-resize';
 
@@ -42,6 +42,7 @@ export function AppLayoutGlobalAiDrawerImplementation({
   } = appLayoutInternals;
   const drawerRef = useRef<HTMLDivElement>(null);
   const activeDrawerId = activeAiDrawer?.id;
+  const [isWhiteHeader, setIsWhiteHeader] = useState(false);
 
   const computedAriaLabels = {
     closeButton: activeAiDrawer ? activeAiDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,
@@ -117,8 +118,12 @@ export function AppLayoutGlobalAiDrawerImplementation({
           )}
           <div className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}>
             <div className={styles['drawer-content']}>
-              <header className={styles['drawer-content-header']}>
-                <div>logo</div>
+              <header className={clsx(styles['drawer-content-header'], isWhiteHeader && styles['white-header'])}>
+                <div>
+                  <Toggle checked={isWhiteHeader} onChange={({ detail }) => setIsWhiteHeader(detail.checked)}>
+                    White header
+                  </Toggle>
+                </div>
                 <div className={styles['drawer-actions']}>
                   {!isMobile && activeAiDrawer?.isExpandable && (
                     <div className={styles['drawer-expanded-mode-button']}>
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/styles.scss b/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
index 7b0f832923..ef22f4c9a0 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
@@ -249,7 +249,8 @@ $drawer-resize-handle-size: awsui.$space-m;
     > .drawer-content-container {
       > .drawer-content {
         > .drawer-content-header {
-          block-size: 42px;
+          block-size: 41px;
+          box-sizing: border-box;
           position: sticky;
           z-index: 1000;
           display: flex;
@@ -258,6 +259,12 @@ $drawer-resize-handle-size: awsui.$space-m;
           inset-block-start: 0;
           padding-inline: awsui.$space-m;
           background: awsui.$color-gap-global-drawer;
+          border-block-end: awsui.$border-divider-section-width solid transparent;
+
+          &.white-header {
+            background-color: awsui.$color-background-layout-panel-content;
+            border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+          }
 
           > .drawer-actions {
             display: flex;

From b4c6dc69137fb67dec9ba9db2341442b1655709b Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Fri, 18 Jul 2025 16:29:43 +0200
Subject: [PATCH 16/24] feat: Focus mode for ai drawer

---
 src/app-layout/utils/use-drawers.ts                  |  6 +++++-
 src/app-layout/visual-refresh-toolbar/index.tsx      |  1 +
 .../visual-refresh-toolbar/skeleton/index.tsx        |  3 +++
 .../visual-refresh-toolbar/skeleton/styles.scss      | 12 ++++++++++++
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/app-layout/utils/use-drawers.ts b/src/app-layout/utils/use-drawers.ts
index ca8f69ae76..c9f5ee6a65 100644
--- a/src/app-layout/utils/use-drawers.ts
+++ b/src/app-layout/utils/use-drawers.ts
@@ -227,8 +227,12 @@ export function useDrawers(
       fireNonCancelableEvent(runtimeDrawers?.aiDrawer?.onToggle, { isOpen: true, initiatedByUserAction });
     }
 
-    if (activeDrawerId) {
+    if (activeAiDrawerId) {
       fireNonCancelableEvent(runtimeDrawers?.aiDrawer?.onToggle, { isOpen: false, initiatedByUserAction });
+
+      if (activeAiDrawerId === expandedDrawerId) {
+        setExpandedDrawerId(null);
+      }
     }
 
     onAiDrawerFocus?.();
diff --git a/src/app-layout/visual-refresh-toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/index.tsx
index 4c9e1441df..53f59c960e 100644
--- a/src/app-layout/visual-refresh-toolbar/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/index.tsx
@@ -518,6 +518,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
           // which means the child layout isn't rendered at all in that case
           drawerExpandedModeInChildLayout={!!toolbarProps?.expandedDrawerId}
           drawerExpandedMode={!!expandedDrawerId}
+          aiDrawerExpandedMode={expandedDrawerId === activeAiDrawer?.id}
           style={{
             paddingBlockEnd: splitPanelOffsets.mainContentPaddingBlockEnd,
             ...(hasToolbar || !isNested
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx b/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
index f89ef3e8e1..aa5bff817c 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
@@ -47,6 +47,7 @@ interface SkeletonLayoutProps
   isNested?: boolean;
   drawerExpandedMode: boolean;
   drawerExpandedModeInChildLayout: boolean;
+  aiDrawerExpandedMode: boolean;
   aiDrawer?: React.ReactNode;
 }
 
@@ -86,6 +87,7 @@ export const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutPro
       isNested,
       drawerExpandedMode,
       drawerExpandedModeInChildLayout,
+      aiDrawerExpandedMode,
       aiDrawer,
     },
     ref
@@ -101,6 +103,7 @@ export const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutPro
             [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),
             [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',
             [styles['drawer-expanded-mode']]: drawerExpandedMode,
+            [styles['ai-drawer-expanded-mode']]: aiDrawerExpandedMode,
           })}
           style={{
             minBlockSize: isNested ? '100%' : `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
index 198219ace1..80d2ca0a7c 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
@@ -85,6 +85,18 @@
         0
         0
         auto;
+
+      &.ai-drawer-expanded-mode {
+        grid-template-columns:
+          auto
+          0
+          0
+          0
+          0
+          0
+          0
+          0;
+      }
     }
   }
 }

From 5769d23f4854a27a0701bb856935b67c59374c45 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Fri, 18 Jul 2025 16:43:55 +0200
Subject: [PATCH 17/24] chore: Chat demo content

---
 pages/app-layout/runtime-drawers.page.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/pages/app-layout/runtime-drawers.page.tsx b/pages/app-layout/runtime-drawers.page.tsx
index 7264057a71..dd795a3255 100644
--- a/pages/app-layout/runtime-drawers.page.tsx
+++ b/pages/app-layout/runtime-drawers.page.tsx
@@ -5,6 +5,7 @@ import ReactDOM, { unmountComponentAtNode } from 'react-dom';
 
 import {
   AppLayout,
+  Box,
   Button,
   ContentLayout,
   Header,
@@ -58,6 +59,9 @@ awsuiPlugins.appLayout.registerDrawer({
           marginInlineEnd: '16px',
         }}
       >
+        <Box variant="h2" padding={{ bottom: 'm' }}>
+          Chat demo
+        </Box>
         {new Array(100).fill(null).map((_, index) => (
           <div key={index}>Tela content</div>
         ))}

From b173a07a01de0d577227561a6636feeca3aea5f7 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Fri, 18 Jul 2025 16:46:47 +0200
Subject: [PATCH 18/24] chore: Small refactoring

---
 src/app-layout/utils/use-drawers.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app-layout/utils/use-drawers.ts b/src/app-layout/utils/use-drawers.ts
index c9f5ee6a65..7cbb25c4df 100644
--- a/src/app-layout/utils/use-drawers.ts
+++ b/src/app-layout/utils/use-drawers.ts
@@ -339,8 +339,6 @@ export function useDrawers(
     },
     {}
   );
-  // sanity check
-  // const activeAiDrawer = aiDrawer?.id === activeAiDrawerId ? aiDrawer : null;
   const activeAiDrawer = activeAiDrawerId ? aiDrawer : null;
   const activeAiDrawerSize = activeAiDrawerId
     ? (drawerSizes[activeAiDrawerId] ?? activeAiDrawer?.defaultSize ?? DEFAULT_AI_DRAWER_SIZE)

From 67edaf4cac685b90f88e71934a28c0ea6e0293ba Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Mon, 21 Jul 2025 10:55:07 +0200
Subject: [PATCH 19/24] chore: Adjust ai drawer mobile styles

---
 pages/app-layout/runtime-drawers.page.tsx | 38 +++++++++++++----------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/pages/app-layout/runtime-drawers.page.tsx b/pages/app-layout/runtime-drawers.page.tsx
index dd795a3255..5c08296745 100644
--- a/pages/app-layout/runtime-drawers.page.tsx
+++ b/pages/app-layout/runtime-drawers.page.tsx
@@ -16,6 +16,7 @@ import {
   Toggle,
 } from '~components';
 import { AppLayoutProps } from '~components/app-layout';
+import { useMobile } from '~components/internal/hooks/use-mobile';
 import awsuiPlugins from '~components/internal/plugins';
 
 import './utils/external-widget';
@@ -33,6 +34,26 @@ type DemoContext = React.Context<
   }>
 >;
 
+const AIDrawer = () => {
+  const isMobile = useMobile();
+
+  return (
+    <div
+      style={{
+        background: 'white',
+        marginInlineEnd: isMobile ? undefined : '16px',
+      }}
+    >
+      <Box variant="h2" padding={{ bottom: 'm' }}>
+        Chat demo
+      </Box>
+      {new Array(100).fill(null).map((_, index) => (
+        <div key={index}>Tela content</div>
+      ))}
+    </div>
+  );
+};
+
 awsuiPlugins.appLayout.registerDrawer({
   id: 'amazon-q',
   type: 'global-ai',
@@ -52,22 +73,7 @@ awsuiPlugins.appLayout.registerDrawer({
   },
 
   mountContent: container => {
-    ReactDOM.render(
-      <div
-        style={{
-          background: 'white',
-          marginInlineEnd: '16px',
-        }}
-      >
-        <Box variant="h2" padding={{ bottom: 'm' }}>
-          Chat demo
-        </Box>
-        {new Array(100).fill(null).map((_, index) => (
-          <div key={index}>Tela content</div>
-        ))}
-      </div>,
-      container
-    );
+    ReactDOM.render(<AIDrawer />, container);
   },
   unmountContent: container => unmountComponentAtNode(container),
 });

From f765869c26a47a4bdaf350c73febd7b68b15808c Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Mon, 21 Jul 2025 14:46:14 +0200
Subject: [PATCH 20/24] feat: AI drawer demo with an AI chat content

---
 package-lock.json                             |  12 +
 package.json                                  |   3 +
 .../chat/additional-info/dialog.tsx           |  55 ++
 .../chat/additional-info/feedback-dialog.tsx  | 125 +++++
 pages/app-layout/chat/chat.scss               |  58 +++
 pages/app-layout/chat/chat.tsx                | 246 +++++++++
 pages/app-layout/chat/common-components.tsx   | 173 ++++++
 pages/app-layout/chat/config.tsx              | 492 ++++++++++++++++++
 pages/app-layout/chat/dialog.scss             |  37 ++
 pages/app-layout/chat/messages.tsx            | 119 +++++
 .../utils/external-sidecar-widget-demo.tsx    |  27 +
 11 files changed, 1347 insertions(+)
 create mode 100644 pages/app-layout/chat/additional-info/dialog.tsx
 create mode 100644 pages/app-layout/chat/additional-info/feedback-dialog.tsx
 create mode 100644 pages/app-layout/chat/chat.scss
 create mode 100644 pages/app-layout/chat/chat.tsx
 create mode 100644 pages/app-layout/chat/common-components.tsx
 create mode 100644 pages/app-layout/chat/config.tsx
 create mode 100644 pages/app-layout/chat/dialog.scss
 create mode 100644 pages/app-layout/chat/messages.tsx

diff --git a/package-lock.json b/package-lock.json
index 216dbcb54d..eb2634966f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,11 @@
       "name": "@cloudscape-design/components",
       "version": "3.0.0",
       "dependencies": {
+        "@cloudscape-design/chat-components": "^1.0.0",
+        "@cloudscape-design/code-view": "^3.0.0",
         "@cloudscape-design/collection-hooks": "^1.0.0",
         "@cloudscape-design/component-toolkit": "^1.0.0-beta",
+        "@cloudscape-design/design-tokens": "^3.0.0",
         "@cloudscape-design/test-utils-core": "^1.0.0",
         "@cloudscape-design/theming-runtime": "^1.0.0",
         "@dnd-kit/core": "^6.0.8",
@@ -4622,6 +4625,15 @@
       "version": "1.42.0",
       "license": "BSD-3-Clause"
     },
+    "node_modules/ace-code": {
+      "version": "1.43.2",
+      "resolved": "https://amazon-149122183214.d.codeartifact.us-west-2.amazonaws.com/npm/shared/ace-code/-/ace-code-1.43.2.tgz",
+      "integrity": "sha512-GJnT2CjEJ45Hu4ydAmaRXDRtaujcZTAA0rWW6m2sSpcdGRquaIxLcZwQq/xJ35Mz9gD0+wZbj9jZB0wJPAZJDw==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "dev": true,
diff --git a/package.json b/package.json
index bd729951cf..614cfc260a 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,9 @@
     "@cloudscape-design/component-toolkit": "^1.0.0-beta",
     "@cloudscape-design/test-utils-core": "^1.0.0",
     "@cloudscape-design/theming-runtime": "^1.0.0",
+    "@cloudscape-design/chat-components": "^1.0.0",
+    "@cloudscape-design/code-view": "^3.0.0",
+    "@cloudscape-design/design-tokens": "^3.0.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
diff --git a/pages/app-layout/chat/additional-info/dialog.tsx b/pages/app-layout/chat/additional-info/dialog.tsx
new file mode 100644
index 0000000000..a827d2ca2b
--- /dev/null
+++ b/pages/app-layout/chat/additional-info/dialog.tsx
@@ -0,0 +1,55 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Button from '~components/button';
+
+import '../dialog.scss';
+
+const Dialog = React.forwardRef(
+  (
+    {
+      children,
+      footer,
+      onDismiss,
+      ariaLabel,
+    }: {
+      children: React.ReactNode;
+      footer: React.ReactNode;
+      onDismiss: () => void;
+      ariaLabel: string;
+    },
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className="dialog"
+        role="dialog"
+        aria-label={ariaLabel}
+        aria-modal="false" // Maintains natural focus flow since it's an inline dialog
+        tabIndex={-1} // This allows the dialog to receive focus
+      >
+        <div className="content">
+          <div className="dismiss">
+            <Button
+              iconName="close"
+              variant="icon"
+              onClick={onDismiss}
+              ariaLabel="Close dialog"
+              data-testid="dialog-dismiss-button"
+            />
+          </div>
+
+          <div className="inner-content">{children}</div>
+        </div>
+
+        <div className="footer">{footer}</div>
+      </div>
+    );
+  }
+);
+
+Dialog.displayName = 'Dialog';
+
+export default Dialog;
diff --git a/pages/app-layout/chat/additional-info/feedback-dialog.tsx b/pages/app-layout/chat/additional-info/feedback-dialog.tsx
new file mode 100644
index 0000000000..e8beded947
--- /dev/null
+++ b/pages/app-layout/chat/additional-info/feedback-dialog.tsx
@@ -0,0 +1,125 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef } from 'react';
+
+import Box from '~components/box';
+import Button from '~components/button';
+import Checkbox from '~components/checkbox';
+import Form from '~components/form';
+import FormField from '~components/form-field';
+import SpaceBetween from '~components/space-between';
+import Textarea from '~components/textarea';
+
+import Dialog from './dialog';
+
+export default function FeedbackDialog({ onDismiss, onSubmit }: { onDismiss: () => void; onSubmit: () => void }) {
+  const [feedbackOptions, setFeedbackOptions] = React.useState({
+    harmful: false,
+    incomplete: false,
+    inaccurate: false,
+    other: false,
+  });
+  const [feedbackText, setFeedbackText] = React.useState('');
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    // Store the element that had focus before dialog opened
+    triggerRef.current = document.activeElement as HTMLElement;
+
+    // Focus the dialog container when it opens
+    dialogRef.current?.focus();
+
+    // Cleanup: Return focus to the trigger element when dialog closes
+    return () => {
+      triggerRef.current?.focus();
+    };
+  }, [dialogRef]);
+
+  const selectOption = (option: string, checked: boolean) =>
+    setFeedbackOptions({ ...feedbackOptions, [option]: checked });
+
+  const isFeedbackOptionSelected = Object.values(feedbackOptions).some(val => !!val);
+  const isSubmittable = isFeedbackOptionSelected || feedbackText.length > 0;
+
+  const submitFeedback = () => {
+    if (!isSubmittable) {
+      return;
+    }
+
+    onSubmit();
+  };
+
+  return (
+    <Dialog
+      ariaLabel="Feedback dialog"
+      ref={dialogRef}
+      onDismiss={onDismiss}
+      footer={
+        <div style={{ display: 'flex', flexDirection: 'row-reverse', gap: '4px' }}>
+          <Button
+            data-testid="feedback-submit-button"
+            onClick={submitFeedback}
+            ariaLabel="Submit form"
+            disabled={!isSubmittable}
+          >
+            Submit
+          </Button>
+
+          <Button variant="link" onClick={onDismiss} ariaLabel="Close dialog" data-testid="feedback-close-button">
+            Close
+          </Button>
+        </div>
+      }
+    >
+      <Form
+        header={
+          <Box variant="h4">
+            Tell us more - <i>optional</i>
+          </Box>
+        }
+      >
+        <SpaceBetween direction="vertical" size="l">
+          <FormField label="What did you dislike about the response?">
+            <SpaceBetween size="l" direction="horizontal">
+              <Checkbox
+                data-testid="feedback-checkbox-harmful"
+                checked={feedbackOptions.harmful}
+                onChange={({ detail }) => selectOption('harmful', detail.checked)}
+              >
+                Harmful
+              </Checkbox>
+              <Checkbox
+                checked={feedbackOptions.incomplete}
+                onChange={({ detail }) => selectOption('incomplete', detail.checked)}
+              >
+                Incomplete
+              </Checkbox>
+              <Checkbox
+                checked={feedbackOptions.inaccurate}
+                onChange={({ detail }) => selectOption('inaccurate', detail.checked)}
+              >
+                Inaccurate
+              </Checkbox>
+              <Checkbox
+                checked={feedbackOptions.other}
+                onChange={({ detail }) => selectOption('other', detail.checked)}
+              >
+                Other
+              </Checkbox>
+            </SpaceBetween>
+          </FormField>
+
+          <FormField label="Additional notes" stretch={true}>
+            <Textarea
+              rows={3}
+              onChange={({ detail }) => setFeedbackText(detail.value)}
+              value={feedbackText}
+              placeholder={'Additional feedback'}
+            />
+          </FormField>
+        </SpaceBetween>
+      </Form>
+    </Dialog>
+  );
+}
diff --git a/pages/app-layout/chat/chat.scss b/pages/app-layout/chat/chat.scss
new file mode 100644
index 0000000000..bdc31b82c4
--- /dev/null
+++ b/pages/app-layout/chat/chat.scss
@@ -0,0 +1,58 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: MIT-0
+
+@use '~design-tokens' as cs;
+
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  gap: cs.$space-static-l;
+
+  min-block-size: 100%;
+
+  &:not(.classic) {
+    @media only screen and (min-width: 688px) and (max-width: 1280px) {
+      padding-inline: 60px;
+    }
+  }
+
+  &.classic {
+    inline-size: 100%;
+    block-size: 1000px;
+  }
+}
+
+.chat-internal-container {
+  border-radius: 0 !important;
+  border: none !important;
+  margin-inline-end: 16px;
+}
+
+.messages {
+  display: flex;
+  flex-direction: column;
+  gap: cs.$space-scaled-xs;
+
+  padding-block-start: cs.$space-scaled-xxs;
+  padding-block-end: cs.$space-container-horizontal;
+  padding-inline: cs.$space-container-horizontal;
+}
+
+.access-denied-alert-wrapper {
+  display: flex;
+  gap: cs.$space-scaled-s;
+
+  &__box {
+    flex: 1;
+    overflow-x: auto;
+    padding-inline: cs.$space-scaled-m;
+    padding-block: cs.$space-scaled-s;
+    border: 2px solid cs.$color-border-input-default;
+    border-radius: cs.$border-radius-input;
+    background: cs.$color-background-input-default;
+  }
+}
+
+.other-content-vertically-align {
+  margin-inline-start: 36px;
+}
diff --git a/pages/app-layout/chat/chat.tsx b/pages/app-layout/chat/chat.tsx
new file mode 100644
index 0000000000..0b4fdd5b61
--- /dev/null
+++ b/pages/app-layout/chat/chat.tsx
@@ -0,0 +1,246 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef, useState } from 'react';
+
+import { SupportPromptGroupProps } from '@cloudscape-design/chat-components/support-prompt-group';
+
+import Box from '~components/box';
+import Container from '~components/container';
+import FileDropzone, { useFilesDragging } from '~components/file-dropzone';
+import FileInput from '~components/file-input';
+import FileTokenGroup from '~components/file-token-group';
+import Header from '~components/header';
+import Icon from '~components/icon';
+import Link from '~components/link';
+import PromptInput from '~components/prompt-input';
+import SpaceBetween from '~components/space-between';
+
+import { ScrollableContainer } from './common-components';
+import {
+  fileTokenGroupI18nStrings,
+  getInitialMessages,
+  getInvalidPromptResponse,
+  getLoadingMessage,
+  Message,
+  supportPromptItems,
+  supportPromptMessageOne,
+  supportPromptMessageTwo,
+  VALID_PROMPTS,
+  validLoadingPrompts,
+} from './config';
+import Messages from './messages';
+
+import styles from './chat.scss';
+
+export default function Chat() {
+  const waitTimeBeforeLoading = 300;
+  // The loading state will be shown for 4 seconds for loading prompt and 1.5 seconds for rest of the prompts
+  const waitTimeBeforeResponse = (isLoadingPrompt: boolean = false) => (isLoadingPrompt ? 4000 : 1500);
+
+  const [prompt, setPrompt] = useState('');
+  const [isGenAiResponseLoading, setIsGenAiResponseLoading] = useState(false);
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+
+  const [files, setFiles] = useState<File[]>([]);
+  const promptInputRef = useRef<HTMLTextAreaElement>(null);
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  const { areFilesDragging } = useFilesDragging();
+
+  const onSupportPromptClick = (detail: SupportPromptGroupProps.ItemClickDetail) => {
+    let newMessage: Message;
+
+    if (detail.id === 'typescript') {
+      newMessage = supportPromptMessageOne;
+    }
+
+    if (detail.id === 'expand') {
+      newMessage = supportPromptMessageTwo;
+    }
+
+    const supportPromptText = supportPromptItems.find(item => item.id === detail.id)?.text;
+
+    const newUserMessage: Message = {
+      type: 'chat-bubble',
+      authorId: 'user-jane-doe',
+      content: supportPromptText,
+      timestamp: new Date().toLocaleTimeString(),
+    };
+
+    setMessages(prevMessages => [...prevMessages, newUserMessage]);
+
+    promptInputRef.current?.focus();
+
+    setTimeout(() => {
+      setIsGenAiResponseLoading(true);
+      setMessages(prevMessages => [...prevMessages, getLoadingMessage()]);
+
+      setTimeout(() => {
+        setMessages(prevMessages => {
+          prevMessages.splice(prevMessages.length - 1, 1, newMessage);
+          return prevMessages;
+        });
+
+        setIsGenAiResponseLoading(false);
+      }, waitTimeBeforeResponse());
+    }, waitTimeBeforeLoading);
+  };
+
+  const setShowFeedbackDialog = (index: number, show: boolean) => {
+    setMessages(prevMessages => {
+      const updatedMessages = [...prevMessages];
+      const updatedMessage = { ...prevMessages[index], showFeedbackDialog: show };
+      updatedMessages.splice(index, 1, updatedMessage);
+      return updatedMessages;
+    });
+  };
+
+  const lastMessageContent = messages[messages.length - 1]?.content;
+
+  useEffect(() => {
+    setMessages(getInitialMessages(onSupportPromptClick));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    // Scroll to the bottom to show the new/latest message
+    setTimeout(() => {
+      if (messagesContainerRef.current) {
+        messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+      }
+    }, 0);
+  }, [lastMessageContent]);
+
+  const onPromptSend = ({ detail: { value } }: { detail: { value: string } }) => {
+    if ((!value && files.length === 0) || (value.length === 0 && files.length === 0) || isGenAiResponseLoading) {
+      return;
+    }
+
+    const newMessage: Message = {
+      type: 'chat-bubble',
+      authorId: 'user-jane-doe',
+      content: value,
+      timestamp: new Date().toLocaleTimeString(),
+      files,
+    };
+
+    let fileValue = files;
+
+    setMessages(prevMessages => [...prevMessages, newMessage]);
+    setPrompt('');
+    setFiles([]);
+
+    const lowerCasePrompt = value.toLowerCase();
+
+    const isLoadingPrompt = validLoadingPrompts.includes(lowerCasePrompt);
+
+    // Show loading state
+    setTimeout(() => {
+      setIsGenAiResponseLoading(true);
+      setMessages(prevMessages => [...prevMessages, getLoadingMessage()]);
+
+      setTimeout(() => {
+        const validPrompt =
+          fileValue.length > 0
+            ? VALID_PROMPTS.find(({ prompt }) => prompt.includes('file'))
+            : VALID_PROMPTS.find(({ prompt }) => prompt.includes(lowerCasePrompt));
+
+        // Send Gen-AI response, replacing the loading chat bubble
+        setMessages(prevMessages => {
+          const response = validPrompt ? validPrompt.getResponse(onSupportPromptClick) : getInvalidPromptResponse();
+
+          prevMessages.splice(prevMessages.length - 1, 1, response);
+          return prevMessages;
+        });
+        setIsGenAiResponseLoading(false);
+        fileValue = [];
+      }, waitTimeBeforeResponse(isLoadingPrompt));
+    }, waitTimeBeforeLoading);
+  };
+
+  const addMessage = (index: number, message: Message) => {
+    setMessages(prevMessages => {
+      const updatedMessages = [...prevMessages];
+      updatedMessages.splice(index, 0, message);
+      return updatedMessages;
+    });
+  };
+
+  return (
+    <div className={`chat-container`}>
+      <Container
+        className={styles['chat-internal-container']}
+        header={<Header variant="h3">Generative AI chat</Header>}
+        // fitHeight={true}
+        // disableContentPaddings={true}
+        footer={
+          <>
+            {/* During loading, action button looks enabled but functionality is disabled. */}
+            {/* This will be fixed once prompt input receives an update where the action button can receive focus while being disabled. */}
+            {/* In the meantime, changing aria labels of prompt input and action button to reflect this. */}
+            <PromptInput
+              ref={promptInputRef}
+              onChange={({ detail }) => setPrompt(detail.value)}
+              onAction={onPromptSend}
+              value={prompt}
+              actionButtonAriaLabel={isGenAiResponseLoading ? 'Send message button - suppressed' : 'Send message'}
+              actionButtonIconName="send"
+              ariaLabel={isGenAiResponseLoading ? 'Prompt input - suppressed' : 'Prompt input'}
+              placeholder="Ask a question"
+              autoFocus={true}
+              disableSecondaryActionsPaddings={true}
+              secondaryActions={
+                <Box padding={{ left: 'xxs', top: 'xs' }}>
+                  <FileInput
+                    ariaLabel="Chat demo file input"
+                    variant="icon"
+                    multiple={true}
+                    value={files}
+                    onChange={({ detail }) => setFiles(prev => [...prev, ...detail.value])}
+                  />
+                </Box>
+              }
+              secondaryContent={
+                areFilesDragging ? (
+                  <FileDropzone onChange={({ detail }) => setFiles(prev => [...prev, ...detail.value])}>
+                    <SpaceBetween size="xs" alignItems="center">
+                      <Icon name="upload" />
+                      <Box>Drop files here</Box>
+                    </SpaceBetween>
+                  </FileDropzone>
+                ) : (
+                  files.length > 0 && (
+                    <FileTokenGroup
+                      items={files.map(file => ({ file }))}
+                      onDismiss={({ detail }) => {
+                        setFiles(files => files.filter((_, index) => index !== detail.fileIndex));
+                        if (files.length === 1) {
+                          promptInputRef.current?.focus();
+                        }
+                      }}
+                      limit={3}
+                      alignment="horizontal"
+                      showFileThumbnail={true}
+                      i18nStrings={fileTokenGroupI18nStrings}
+                    />
+                  )
+                )
+              }
+            />
+            <Box color="text-body-secondary" margin={{ top: 'xs' }} fontSize="body-s">
+              Use of this service is subject to the{' '}
+              <Link href="#" external={true} variant="primary" fontSize="inherit">
+                AWS Responsible AI Policy
+              </Link>
+              .
+            </Box>
+          </>
+        }
+      >
+        <ScrollableContainer ref={messagesContainerRef}>
+          <Messages messages={messages} setShowFeedbackDialog={setShowFeedbackDialog} addMessage={addMessage} />
+        </ScrollableContainer>
+      </Container>
+    </div>
+  );
+}
diff --git a/pages/app-layout/chat/common-components.tsx b/pages/app-layout/chat/common-components.tsx
new file mode 100644
index 0000000000..38696bcbf9
--- /dev/null
+++ b/pages/app-layout/chat/common-components.tsx
@@ -0,0 +1,173 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { forwardRef, useState } from 'react';
+
+import Avatar from '@cloudscape-design/chat-components/avatar';
+
+import ButtonGroup, { ButtonGroupProps } from '~components/button-group';
+import StatusIndicator from '~components/status-indicator';
+
+import { AuthorAvatarProps } from './config';
+
+export function ChatBubbleAvatar({ type, name, initials, loading }: AuthorAvatarProps) {
+  if (type === 'gen-ai') {
+    return <Avatar color="gen-ai" iconName="gen-ai" tooltipText={name} ariaLabel={name} loading={loading} />;
+  }
+
+  return <Avatar initials={initials} tooltipText={name} ariaLabel={name} />;
+}
+
+export function CodeViewActions({ contentToCopy }: { contentToCopy: string }) {
+  return (
+    <ButtonGroup
+      ariaLabel="Code snippet actions"
+      variant="icon"
+      onItemClick={({ detail }) => {
+        if (detail.id !== 'copy' || !navigator.clipboard) {
+          return;
+        }
+
+        navigator.clipboard.writeText(contentToCopy).catch(error => console.log('Failed to copy', error.message));
+      }}
+      items={[
+        {
+          type: 'group',
+          text: 'Feedback',
+          items: [
+            {
+              type: 'icon-button',
+              id: 'run-command',
+              iconName: 'play',
+              text: 'Run command',
+            },
+            {
+              type: 'icon-button',
+              id: 'send-cloudshell',
+              iconName: 'script',
+              text: 'Send to IDE',
+            },
+          ],
+        },
+        {
+          type: 'icon-button',
+          id: 'copy',
+          iconName: 'copy',
+          text: 'Copy',
+          popoverFeedback: <StatusIndicator type="success">Message copied</StatusIndicator>,
+        },
+      ]}
+    />
+  );
+}
+
+export const FittedContainer = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div style={{ position: 'relative', flexGrow: 1 }}>
+      <div>{children}</div>
+    </div>
+  );
+};
+
+export const ScrollableContainer = forwardRef(function ScrollableContainer(
+  { children }: { children: React.ReactNode },
+  ref: React.Ref<HTMLDivElement>
+) {
+  return (
+    <div style={{ position: 'relative', blockSize: '100%' }}>
+      <div style={{ overflowY: 'auto' }} ref={ref} data-testid="chat-scroll-container">
+        {children}
+      </div>
+    </div>
+  );
+});
+
+export function FeedbackActions({
+  contentToCopy,
+  onNotHelpfulFeedback,
+}: {
+  contentToCopy: string;
+  onNotHelpfulFeedback: () => void;
+}) {
+  const [feedback, setFeedback] = useState<string>('');
+  const [feedbackSubmitting, setFeedbackSubmitting] = useState<string>('');
+
+  const items: ButtonGroupProps.ItemOrGroup[] = [
+    {
+      type: 'group',
+      text: 'Vote',
+      items: [
+        {
+          type: 'icon-button',
+          id: 'helpful',
+          iconName: feedback === 'helpful' ? 'thumbs-up-filled' : 'thumbs-up',
+          text: 'Helpful',
+          disabled: !!feedback.length || feedbackSubmitting === 'not-helpful',
+          disabledReason: feedbackSubmitting.length
+            ? ''
+            : feedback === 'helpful'
+              ? '"Helpful" feedback has been submitted.'
+              : '"Helpful" option is unavailable after "Not helpful" feedback submitted.',
+          loading: feedbackSubmitting === 'helpful',
+          popoverFeedback:
+            feedback === 'helpful' ? (
+              <StatusIndicator type="success">Feedback submitted</StatusIndicator>
+            ) : (
+              'Submitting feedback'
+            ),
+        },
+        {
+          type: 'icon-button',
+          id: 'not-helpful',
+          iconName: feedback === 'not-helpful' ? 'thumbs-down-filled' : 'thumbs-down',
+          text: 'Not helpful',
+          disabled: !!feedback.length || feedbackSubmitting === 'helpful',
+          disabledReason: feedbackSubmitting.length
+            ? ''
+            : feedback === 'not-helpful'
+              ? '"Not helpful" feedback has been submitted.'
+              : '"Not helpful" option is unavailable after "Helpful" feedback submitted.',
+          loading: feedbackSubmitting === 'not-helpful',
+          popoverFeedback:
+            feedback === 'helpful' ? (
+              <StatusIndicator type="success">Feedback submitted</StatusIndicator>
+            ) : (
+              'Submitting feedback'
+            ),
+        },
+      ],
+    },
+    {
+      type: 'icon-button',
+      id: 'copy',
+      iconName: 'copy',
+      text: 'Copy',
+      popoverFeedback: <StatusIndicator type="success">Message copied</StatusIndicator>,
+    },
+  ];
+
+  return (
+    <ButtonGroup
+      ariaLabel="Chat actions"
+      variant="icon"
+      items={items}
+      onItemClick={({ detail }) => {
+        if (detail.id === 'copy' && navigator.clipboard) {
+          return navigator.clipboard
+            .writeText(contentToCopy)
+
+            .catch(error => console.log('Failed to copy', error.message));
+        }
+
+        setFeedbackSubmitting(detail.id);
+
+        setTimeout(() => {
+          setFeedback(detail.id);
+          setFeedbackSubmitting('');
+          if (detail.id === 'not-helpful') {
+            onNotHelpfulFeedback();
+          }
+        }, 2000);
+      }}
+    />
+  );
+}
diff --git a/pages/app-layout/chat/config.tsx b/pages/app-layout/chat/config.tsx
new file mode 100644
index 0000000000..0304a0a9a2
--- /dev/null
+++ b/pages/app-layout/chat/config.tsx
@@ -0,0 +1,492 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import SupportPromptGroup, { SupportPromptGroupProps } from '@cloudscape-design/chat-components/support-prompt-group';
+import CodeView from '@cloudscape-design/code-view/code-view';
+// @ts-ignore
+import typescriptHighlight from '@cloudscape-design/code-view/highlight/typescript';
+
+import Box from '~components/box';
+import CopyToClipboard from '~components/copy-to-clipboard';
+import ExpandableSection from '~components/expandable-section';
+import { FileTokenGroupProps } from '~components/file-token-group';
+import Link from '~components/link';
+import Popover from '~components/popover';
+import SpaceBetween from '~components/space-between';
+import TextContent from '~components/text-content';
+
+export type Message = ChatBubbleMessage | AlertMessage;
+
+interface ChatBubbleMessage {
+  type: 'chat-bubble';
+  authorId: string;
+  content: React.ReactNode;
+  timestamp: string;
+  actions?: 'feedback' | 'code-view';
+  hideAvatar?: boolean;
+  avatarLoading?: boolean;
+  files?: File[];
+  supportPrompts?: React.ReactNode;
+  showFeedbackDialog?: boolean;
+  contentToCopy?: string;
+}
+
+interface AlertMessage {
+  type: 'alert';
+  content: React.ReactNode;
+  header?: string;
+}
+
+export const supportPromptItems = [
+  {
+    text: 'What else can I do with TypeScript?',
+    id: 'typescript',
+  },
+  {
+    text: 'How would I add parameters and type checking to this function?',
+    id: 'expand',
+  },
+];
+
+export const responseList = (
+  <TextContent>
+    <ol>
+      <li>To see how an incoming response from generative AI is displayed, ask "Show a loading state example".</li>
+      <li>To see an error alert that appears when something goes wrong, ask "Show an error state example".</li>
+      <li>To see a how a file upload is displayed, upload one or more files.</li>
+      <li>To see support prompts, ask "Show support prompts".</li>
+    </ol>
+  </TextContent>
+);
+
+// added as function so that timestamp is evaluated when function is called
+export const getInvalidPromptResponse = (): Message => ({
+  type: 'chat-bubble',
+  authorId: 'gen-ai',
+  content: (
+    <>
+      The interactions and functionality of this demo are limited.
+      {responseList}
+    </>
+  ),
+  timestamp: new Date().toLocaleTimeString(),
+  actions: 'feedback',
+  contentToCopy: `The interactions and functionality of this demo are limited.
+ 1. To see how an incoming response from generative AI is displayed, ask "Show a loading state example".
+ 2. To see an error alert that appears when something goes wrong, ask "Show an error state example".
+ 3. To see a how a file upload is displayed, upload one or more files.
+ 4. To see support prompts, ask "Show support prompts".`,
+});
+
+export const getLoadingMessage = (): Message => ({
+  type: 'chat-bubble',
+  authorId: 'gen-ai',
+  content: <Box color="text-status-inactive">Generating a response</Box>,
+  timestamp: new Date().toLocaleTimeString(),
+  avatarLoading: true,
+});
+
+const getFileResponseMessage = (): Message => ({
+  type: 'chat-bubble',
+  authorId: 'gen-ai',
+  content:
+    'I see you have uploaded one or more files. I cannot parse the files right now, but you can see what uploaded files look like.',
+  timestamp: new Date().toLocaleTimeString(),
+  avatarLoading: false,
+  actions: 'feedback',
+  contentToCopy:
+    'I see you have uploaded one or more files. I cannot parse the files right now, but you can see what uploaded files look like.',
+});
+
+const getLoadingStateResponseMessage = (): Message => ({
+  type: 'chat-bubble',
+  authorId: 'gen-ai',
+  content: 'That was the loading state. To see the loading state again, ask "Show a loading state example".',
+  timestamp: new Date().toLocaleTimeString(),
+  avatarLoading: false,
+  actions: 'feedback',
+  contentToCopy: 'That was the loading state. To see the loading state again, ask "Show a loading state example".',
+});
+
+const getErrorStateResponseMessage = (): Message => ({
+  type: 'alert',
+  header: 'Access denied',
+  content: (
+    <SpaceBetween size="s">
+      <span>
+        You don't have permission to [AWSS3:ListBuckets]. To request access, copy the following text and send it to your
+        AWS administrator.{' '}
+        <Link href="#" external={true} variant="primary">
+          Learn more about troubleshooting access denied errors.
+        </Link>
+      </span>
+      <div className="access-denied-alert-wrapper">
+        <div className="access-denied-alert-wrapper__box">
+          <SpaceBetween size="xxxs">
+            <Box variant="code">
+              <div>User: [arn:aws:iam::123456789000:user/awsgenericuser]</div>
+              <div>Service: [AWSS3]</div>
+              <div>Action: [ListBuckets]</div>
+              <div>On resource(s): [arn:aws:S3:us-east-1:09876543211234567890]</div>
+              <div>Context: [no identity-based policy allows the AWSS3:ListBuckets action.]</div>
+            </Box>
+          </SpaceBetween>
+        </div>
+        <div>
+          <CopyToClipboard
+            copyButtonText="Copy"
+            copyErrorText="Text failed to copy"
+            copySuccessText="Text copied"
+            textToCopy={`User: [arn:aws:iam::123456789000:user/awsgenericuser]
+Service: [AWSS3]
+Action: [ListBuckets]
+On resource(s): [arn:aws:S3:us-east-1:09876543211234567890]
+Context: [no identity-based policy allows the AWSS3:ListBuckets action.]
+`}
+          />
+        </div>
+      </div>
+    </SpaceBetween>
+  ),
+});
+
+const getSupportPromptResponseMessage = (
+  onSupportPromptClick?: (detail: SupportPromptGroupProps.ItemClickDetail) => void
+): Message => ({
+  type: 'chat-bubble',
+  authorId: 'gen-ai',
+  content: (
+    <CodeView
+      content={`// This is the main function that will be executed when the script runs
+function main(): void {
+// Use console.log to print "Hello, World!" to the console
+console.log("Hello, World!");
+}
+// Call the main function to execute the program
+main();`}
+      highlight={typescriptHighlight}
+    />
+  ),
+  actions: 'code-view',
+  contentToCopy: `// This is the main function that will be executed when the script runs
+function main(): void {
+  // Use console.log to print "Hello, World!" to the console
+  console.log("Hello, World!");
+}
+// Call the main function to execute the program
+main();`,
+  timestamp: new Date().toLocaleTimeString(),
+  supportPrompts: (
+    <SupportPromptGroup
+      ariaLabel="Proposed prompts"
+      items={supportPromptItems}
+      onItemClick={({ detail }) => {
+        onSupportPromptClick?.(detail);
+      }}
+    />
+  ),
+});
+
+interface ValidPromptType {
+  prompt: Array<string>;
+  getResponse: (onSupportPromptClick?: (detail: SupportPromptGroupProps.ItemClickDetail) => void) => Message;
+}
+
+export const validLoadingPrompts = ['show a loading state example', 'loading state', 'loading'];
+
+export const VALID_PROMPTS: Array<ValidPromptType> = [
+  {
+    prompt: validLoadingPrompts,
+    getResponse: getLoadingStateResponseMessage,
+  },
+  {
+    prompt: ['show an error state example', 'error state', 'error'],
+    getResponse: getErrorStateResponseMessage,
+  },
+  {
+    prompt: ['file'],
+    getResponse: getFileResponseMessage,
+  },
+  {
+    prompt: ['show support prompts', 'support prompts', 'support prompt'],
+    getResponse: onSupportPromptClick => getSupportPromptResponseMessage(onSupportPromptClick),
+  },
+];
+
+// Needed only for the existing messages upon page load.
+function getTimestampMinutesAgo(minutesAgo: number) {
+  const d = new Date();
+  d.setMinutes(d.getMinutes() - minutesAgo);
+
+  return d.toLocaleTimeString();
+}
+
+export interface AuthorAvatarProps {
+  type: 'user' | 'gen-ai';
+  name: string;
+  initials?: string;
+  loading?: boolean;
+}
+interface AuthorsType {
+  [key: string]: AuthorAvatarProps;
+}
+export const AUTHORS: AuthorsType = {
+  'user-jane-doe': { type: 'user', name: 'Jane Doe', initials: 'JD' },
+  'gen-ai': { type: 'gen-ai', name: 'Generative AI assistant' },
+};
+
+const CitationPopover = ({ count, href }: { count: number; href: string }) => (
+  <Box color="text-status-info" display="inline">
+    <Popover
+      header="Source"
+      content={
+        <Link href={href} external={true} variant="primary">
+          {href}
+        </Link>
+      }
+      position="right"
+    >
+      [{count}]
+    </Popover>
+  </Box>
+);
+
+export const getInitialMessages = (
+  onSupportPromptClick: (detail: SupportPromptGroupProps.ItemClickDetail) => void
+): Array<Message> => {
+  return [
+    {
+      type: 'chat-bubble',
+      authorId: 'user-jane-doe',
+      content: 'What can I do with Amazon S3?',
+      timestamp: getTimestampMinutesAgo(10),
+    },
+    {
+      type: 'chat-bubble',
+      authorId: 'gen-ai',
+      content:
+        'Amazon S3 provides a simple web service interface that you can use to store and retrieve any amount of data, at any time, from anywhere. Using this service, you can easily build applications that make use of cloud native storage. Since Amazon S3 is highly scalable and you only pay for what you use, you can start small and grow your application as you wish, with no compromise on performance or reliability.',
+      timestamp: getTimestampMinutesAgo(9),
+      actions: 'feedback',
+      contentToCopy:
+        'Amazon S3 provides a simple web service interface that you can use to store and retrieve any amount of data, at any time, from anywhere. Using this service, you can easily build applications that make use of cloud native storage. Since Amazon S3 is highly scalable and you only pay for what you use, you can start small and grow your application as you wish, with no compromise on performance or reliability.',
+    },
+    {
+      type: 'chat-bubble',
+      authorId: 'user-jane-doe',
+      content: 'How can I create an S3 bucket configuration?',
+      timestamp: getTimestampMinutesAgo(8),
+    },
+    {
+      type: 'chat-bubble',
+      authorId: 'gen-ai',
+      content: (
+        <TextContent>
+          Creating a configuration for Amazon S3 involves setting up a bucket and configuring its properties{' '}
+          <CitationPopover
+            count={1}
+            href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/GetStartedWithS3.html"
+          />
+          . Here's a step-by-step guide to help you create an S3 configuration:
+          <ol>
+            <li>Sign in to AWS Management Console</li>
+            <li>Access Amazon S3 console</li>
+            <li>Create a new S3 bucket</li>
+            <li>
+              Configure bucket settings{' '}
+              <CitationPopover
+                count={2}
+                href="https://docs.aws.amazon.com/appconfig/latest/userguide/appconfig-creating-configuration-and-profile-S3-source.html"
+              />
+            </li>
+            <li>Review and create</li>
+          </ol>
+          <Box padding={{ top: 'xs' }}>
+            <ExpandableSection headerText="Sources">
+              <div>
+                <Link
+                  href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/GetStartedWithS3.html"
+                  external={true}
+                  variant="primary"
+                >
+                  [1] Getting started with Amazon S3 - Amazon Simple Storage Service
+                </Link>
+              </div>
+              <div>
+                <Link
+                  href="https://docs.aws.amazon.com/appconfig/latest/userguide/appconfig-creating-configuration-and-profile-S3-source.html"
+                  external={true}
+                  variant="primary"
+                >
+                  [2] Understanding configurations stored in Amazon S3 - AWS AppConfig
+                </Link>
+              </div>
+              <div>
+                <Link
+                  href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html"
+                  external={true}
+                  variant="primary"
+                >
+                  [3] Tutorial: Configuring a static website on Amazon S3 - Amazon Simple Storage Service
+                </Link>
+              </div>
+            </ExpandableSection>
+          </Box>
+        </TextContent>
+      ),
+      timestamp: getTimestampMinutesAgo(7),
+      actions: 'feedback',
+      contentToCopy: `Creating a configuration for Amazon S3 involves setting up a bucket and configuring its properties. Here's a step-by-step guide to help you create an S3 configuration:
+1. Sign in to AWS Management Console
+2. Access Amazon S3 console
+3. Create a new S3 bucket
+4. Configure bucket settings
+5. Review and create`,
+    },
+    {
+      type: 'chat-bubble',
+      authorId: 'user-jane-doe',
+      content: 'Give me an example of a Typescript code block.',
+      timestamp: getTimestampMinutesAgo(6),
+    },
+    {
+      type: 'chat-bubble',
+      authorId: 'gen-ai',
+      content: "Here's a simple TypeScript code example that implements the 'Hello, World!' functionality:",
+      timestamp: getTimestampMinutesAgo(5),
+      actions: 'feedback',
+      contentToCopy: "Here's a simple TypeScript code example that implements the 'Hello, World!' functionality:",
+    },
+    {
+      type: 'chat-bubble',
+      authorId: 'gen-ai',
+      content: (
+        <CodeView
+          content={`// This is the main function that will be executed when the script runs
+function main(): void {
+  // Use console.log to print "Hello, World!" to the console
+  console.log("Hello, World!");
+}
+// Call the main function to execute the program
+main();`}
+          highlight={typescriptHighlight}
+        />
+      ),
+      actions: 'code-view',
+      contentToCopy: `// This is the main function that will be executed when the script runs
+function main(): void {
+  // Use console.log to print "Hello, World!" to the console
+  console.log("Hello, World!");
+}
+// Call the main function to execute the program
+main();`,
+      timestamp: getTimestampMinutesAgo(4),
+      hideAvatar: true,
+      supportPrompts: (
+        <SupportPromptGroup
+          ariaLabel="Typescript support prompt group"
+          items={supportPromptItems}
+          onItemClick={({ detail }) => {
+            onSupportPromptClick(detail);
+          }}
+        />
+      ),
+    },
+  ];
+};
+
+export const supportPromptMessageOne: Message = {
+  type: 'chat-bubble',
+  authorId: 'gen-ai',
+  content: (
+    <>
+      TypeScript is a powerful programming language that builds upon JavaScript by adding static typing and other
+      features. Here are key things you can do with TypeScript:
+      <ol>
+        <li>
+          Web developement
+          <ul>
+            <li>Build frontend applications using frameworks like Angular, React, or Vue.js</li>
+            <li>Create robust server-side applications with Node.js</li>
+            <li>Develop full-stack applications with enhanced type safety</li>
+          </ul>
+        </li>
+
+        <li>
+          Type safety features
+          <ul>
+            <li>Define explicit types for variables, functions, and objects</li>
+            <li>Catch errors during development before runtime</li>
+            <li>Use interfaces and type declarations for better code organization</li>
+          </ul>
+        </li>
+        <li>
+          Object-oriented programming
+          <ul>
+            <li>Create classes with proper inheritance</li>
+            <li>Implement interfaces</li>
+            <li>Use access modifiers (public, private, protected)</li>
+          </ul>
+        </li>
+      </ol>
+      TypeScript is particularly valuable for large projects where type safety and code maintainability are important
+      considerations.
+    </>
+  ),
+  timestamp: new Date().toLocaleTimeString(),
+  actions: 'feedback',
+  contentToCopy: `TypeScript is a powerful programming language that builds upon JavaScript by adding static typing and other features. Here are key things you can do with TypeScript:
+1. Web developement
+ - Build frontend applications using frameworks like Angular, React, or Vue.js
+ - Create robust server-side applications with Node.js
+ - Develop full-stack applications with enhanced type safety
+2. Type safety features
+ - Define explicit types for variables, functions, and objects
+ - Catch errors during development before runtime
+ - Use interfaces and type declarations for better code organization
+3. Object-oriented programming
+ - Create classes with proper inheritance
+ - Implement interfaces
+ - Use access modifiers (public, private, protected)
+TypeScript is particularly valuable for large projects where type safety and code maintainability are important considerations.`,
+};
+
+export const supportPromptMessageTwo: Message = {
+  type: 'chat-bubble',
+  authorId: 'gen-ai',
+  content: (
+    <CodeView
+      highlight={typescriptHighlight}
+      content={`// Here's how you might add input parameters and type checking
+function enhancedMain(name: string, greeting: string = "Hello"): void {
+  if (!name) {
+    throw new error('Name parameter is required.');
+  }
+  console.log(\`\${greeting}, \${name}!\`);
+}
+
+// Call the enhancedMain function to execute the program
+enhancedMain('Greetings', 'Earth');`}
+    />
+  ),
+  actions: 'code-view',
+  contentToCopy: `// Add input parameters and type checking
+function enhancedMain(name: string, greeting: string = "Hello"): void {
+  if (!name) {
+   throw new error('Name parameter is required.');
+  }
+  console.log("{greeting}, {name}!");
+}
+// Call the enhancedMain function to execute the program
+enhancedMain('Greetings', 'Earth');`,
+  timestamp: new Date().toLocaleTimeString(),
+};
+
+export const fileTokenGroupI18nStrings: FileTokenGroupProps.I18nStrings = {
+  removeFileAriaLabel: index => `Remove file ${index + 1}`,
+  limitShowFewer: 'Show fewer files',
+  limitShowMore: 'Show more files',
+  errorIconAriaLabel: 'Error',
+  warningIconAriaLabel: 'Warning',
+};
diff --git a/pages/app-layout/chat/dialog.scss b/pages/app-layout/chat/dialog.scss
new file mode 100644
index 0000000000..4ca981674f
--- /dev/null
+++ b/pages/app-layout/chat/dialog.scss
@@ -0,0 +1,37 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: MIT-0
+
+@use '~design-tokens' as cs;
+
+.dialog {
+  border: 1px solid cs.$color-border-dialog;
+  border-radius: cs.$border-radius-container;
+  background-color: cs.$color-background-dialog;
+  width: fit-content;
+
+  outline-offset: 5px;
+}
+
+.content {
+  display: flex;
+  align-items: baseline;
+}
+
+.dismiss {
+  order: 1;
+  padding-inline-end: cs.$space-container-horizontal;
+}
+
+.inner-content {
+  flex: 1;
+
+  padding-block-start: cs.$space-scaled-s;
+  padding-block-end: cs.$space-scaled-l;
+  padding-inline-start: cs.$space-container-horizontal;
+}
+
+.footer {
+  border-top: 1px solid cs.$color-border-divider-default;
+  padding-block: cs.$space-scaled-s;
+  padding-inline: cs.$space-container-horizontal;
+}
diff --git a/pages/app-layout/chat/messages.tsx b/pages/app-layout/chat/messages.tsx
new file mode 100644
index 0000000000..8550c56849
--- /dev/null
+++ b/pages/app-layout/chat/messages.tsx
@@ -0,0 +1,119 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import ChatBubble from '@cloudscape-design/chat-components/chat-bubble';
+import Alert from '@cloudscape-design/components/alert';
+import FileTokenGroup from '@cloudscape-design/components/file-token-group';
+import LiveRegion from '@cloudscape-design/components/live-region';
+import SpaceBetween from '@cloudscape-design/components/space-between';
+
+import FeedbackDialog from './additional-info/feedback-dialog';
+import { ChatBubbleAvatar, CodeViewActions, FeedbackActions } from './common-components';
+import { AUTHORS, fileTokenGroupI18nStrings, Message, supportPromptItems } from './config';
+
+import './chat.scss';
+
+export default function Messages({
+  messages = [],
+  setShowFeedbackDialog,
+  addMessage,
+}: {
+  messages: Array<Message>;
+  setShowFeedbackDialog: (index: number, show: boolean) => void;
+  addMessage: (index: number, message: Message) => void;
+}) {
+  const latestMessage: Message = messages[messages.length - 1];
+
+  const promptText = supportPromptItems.map(item => item.text);
+
+  return (
+    <div className="messages" role="region" aria-label="Chat">
+      <LiveRegion hidden={true} assertive={latestMessage?.type === 'alert'}>
+        {latestMessage?.type === 'alert' && latestMessage.header}
+        {latestMessage?.content}
+        {latestMessage?.type === 'chat-bubble' &&
+          latestMessage.supportPrompts &&
+          `There are ${promptText.length} support prompts accompanying this message. ${promptText}`}
+      </LiveRegion>
+
+      {messages.map((message, index) => {
+        if (message.type === 'alert') {
+          return (
+            <Alert
+              key={'error-alert' + index}
+              header={message.header}
+              type="error"
+              statusIconAriaLabel="Error"
+              data-testid={'error-alert' + index}
+            >
+              {message.content}
+            </Alert>
+          );
+        }
+
+        const author = AUTHORS[message.authorId];
+
+        return (
+          <SpaceBetween size="xs" key={message.authorId + message.timestamp}>
+            <ChatBubble
+              avatar={<ChatBubbleAvatar {...author} loading={message.avatarLoading} />}
+              ariaLabel={`${author.name} at ${message.timestamp}`}
+              type={author.type === 'gen-ai' ? 'incoming' : 'outgoing'}
+              hideAvatar={message.hideAvatar}
+              actions={
+                message.actions === 'code-view' ? (
+                  <CodeViewActions contentToCopy={message.contentToCopy || ''} />
+                ) : message.actions === 'feedback' ? (
+                  <FeedbackActions
+                    contentToCopy={message.contentToCopy || ''}
+                    onNotHelpfulFeedback={() => setShowFeedbackDialog(index, true)}
+                  />
+                ) : null
+              }
+            >
+              <SpaceBetween size="xs">
+                <div key={message.authorId + message.timestamp + 'content'}>{message.content}</div>
+                {message.files && message.files.length > 0 && (
+                  <FileTokenGroup
+                    readOnly={true}
+                    items={message.files.map(file => ({ file }))}
+                    limit={3}
+                    onDismiss={() => {
+                      /* empty function for read only token */
+                    }}
+                    alignment="horizontal"
+                    showFileThumbnail={true}
+                    i18nStrings={fileTokenGroupI18nStrings}
+                  />
+                )}
+              </SpaceBetween>
+            </ChatBubble>
+
+            {message.showFeedbackDialog && (
+              <div className="other-content-vertically-align">
+                <FeedbackDialog
+                  onDismiss={() => setShowFeedbackDialog(index, false)}
+                  onSubmit={() => {
+                    setShowFeedbackDialog(index, false);
+                    addMessage(index + 1, {
+                      type: 'chat-bubble',
+                      authorId: 'gen-ai',
+                      content: 'Your feedback has been submitted. Thank you for your additional feedback.',
+                      timestamp: new Date().toLocaleTimeString(),
+                      hideAvatar: true,
+                    });
+                  }}
+                />
+              </div>
+            )}
+
+            {latestMessage.type === 'chat-bubble' && latestMessage.supportPrompts && index === messages.length - 1 && (
+              <div className="other-content-vertically-align">{message.supportPrompts}</div>
+            )}
+          </SpaceBetween>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/pages/app-layout/utils/external-sidecar-widget-demo.tsx b/pages/app-layout/utils/external-sidecar-widget-demo.tsx
index 5c12162e38..5d799f35f4 100644
--- a/pages/app-layout/utils/external-sidecar-widget-demo.tsx
+++ b/pages/app-layout/utils/external-sidecar-widget-demo.tsx
@@ -16,8 +16,11 @@ import {
   Tiles,
 } from '~components';
 import ButtonDropdown from '~components/button-dropdown';
+import { useMobile } from '~components/internal/hooks/use-mobile';
 import awsuiPlugins from '~components/internal/plugins';
 
+import Chat from '../chat/chat';
+
 function Details() {
   const [value, setValue] = React.useState('item1');
   const [inputValue, setInputValue] = React.useState('');
@@ -239,3 +242,27 @@ awsuiPlugins.appLayout.registerDrawer({
   },
   unmountContent: container => unmountComponentAtNode(container),
 });
+
+awsuiPlugins.appLayout.registerDrawer({
+  id: 'amazon-q',
+  type: 'global-ai',
+  resizable: true,
+  isExpandable: true,
+  defaultSize: 500,
+
+  ariaLabels: {
+    closeButton: 'Close button',
+    content: 'Content',
+    triggerButton: 'Trigger button',
+    resizeHandle: 'Resize handle',
+  },
+
+  trigger: {
+    iconSvg: `<svg viewBox="0 0 16 16" data-analytics-type="widgetDetail" data-analytics="ChatExperienceEntry" data-analytics-render="true" data-analytics-processed="true"><path d="m14.22,3.41L8.87.32c-.24-.14-.55-.21-.87-.21s-.63.07-.87.21L1.78,3.41c-.48.27-.87.95-.87,1.5v6.18c0,.55.39,1.22.87,1.5l5.36,3.09c.24.14.55.21.87.21s.63-.07.87-.21l5.36-3.09c.48-.28.87-.95.87-1.5v-6.18c0-.55-.39-1.23-.87-1.5Zm-6.22,10.47l-5.09-2.94v-5.88l5.09-2.94,5.09,2.94v4.72l-3.09-1.78v-.74c0-.26-.14-.49-.36-.62l-1.28-.74c-.11-.06-.24-.1-.36-.1s-.25.03-.36.1l-1.28.74c-.22.13-.36.37-.36.62v1.48c0,.26.14.49.36.62l1.28.74c.11.06.24.1.36.1s.25-.03.36-.1l.64-.37,3.09,1.78-4.09,2.36Z" fill="currentColor" stroke-width="0"></path></svg>`,
+  },
+
+  mountContent: container => {
+    ReactDOM.render(<Chat />, container);
+  },
+  unmountContent: container => unmountComponentAtNode(container),
+});

From 6c90c46cffad934dd028fa56d2bbdbec483340f1 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Tue, 22 Jul 2025 11:59:19 +0200
Subject: [PATCH 21/24] feat: Divider for the ai drawer

---
 src/app-layout/visual-refresh-toolbar/toolbar/styles.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/styles.scss b/src/app-layout/visual-refresh-toolbar/toolbar/styles.scss
index dc10576a2d..eb9d28fa7b 100644
--- a/src/app-layout/visual-refresh-toolbar/toolbar/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/toolbar/styles.scss
@@ -37,7 +37,13 @@
 
     > .universal-toolbar-ai-drawer {
       grid-column: 1;
-      padding-inline-end: awsui.$space-static-xxs;
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      block-size: 100%;
+      align-items: center;
+      gap: awsui.$space-xs;
+      padding-inline-end: awsui.$space-static-xs;
     }
 
     > .universal-toolbar-nav {

From 311e3b801e99721ac7231a1761541f803ef8d080 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Tue, 22 Jul 2025 15:25:07 +0200
Subject: [PATCH 22/24] chore: Adjust drawer's gap styles

---
 .../drawer/global-ai-drawer.tsx                     |  1 +
 .../visual-refresh-toolbar/drawer/styles.scss       | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
index a0bf7f8407..bac8d26540 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
+++ b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
@@ -158,6 +158,7 @@ export function AppLayoutGlobalAiDrawerImplementation({
               {activeAiDrawer?.content}
             </div>
           </div>
+          {!isMobile && <div className={styles['drawer-gap']} />}
         </aside>
       )}
     </Transition>
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/styles.scss b/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
index ef22f4c9a0..da6fc3faa6 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
@@ -240,13 +240,24 @@ $drawer-resize-handle-size: awsui.$space-m;
 
   &.ai-drawer {
     grid-template-columns: 1fr awsui.$space-m;
-    background: awsui.$color-gap-global-drawer;
+
+    > .drawer-gap {
+      grid-column: 3;
+      grid-row: 1;
+      block-size: 100%;
+      inline-size: $global-drawer-gap-size;
+      background: awsui.$color-gap-global-drawer;
+      border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+      border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+    }
 
     > .drawer-slider {
       grid-column: 2;
     }
 
     > .drawer-content-container {
+      min-inline-size: auto;
+
       > .drawer-content {
         > .drawer-content-header {
           block-size: 41px;

From 09d2ecc2ef570a720768ebe5f023b28c97b1a17d Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Tue, 22 Jul 2025 16:12:05 +0200
Subject: [PATCH 23/24] chore: Ai drawer logo

---
 .../drawer/global-ai-drawer.tsx               | 33 +++++++++++++++++--
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
index bac8d26540..05894fa355 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
+++ b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
@@ -120,9 +120,33 @@ export function AppLayoutGlobalAiDrawerImplementation({
             <div className={styles['drawer-content']}>
               <header className={clsx(styles['drawer-content-header'], isWhiteHeader && styles['white-header'])}>
                 <div>
-                  <Toggle checked={isWhiteHeader} onChange={({ detail }) => setIsWhiteHeader(detail.checked)}>
-                    White header
-                  </Toggle>
+                  <svg width="113" height="30" viewBox="0 0 113 30" fill="none" focusable="true">
+                    <path
+                      d="M0 15C0 6.71573 6.71573 0 15 0C23.2843 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15Z"
+                      fill="url(#paint0_linear_562_24682)"
+                    />
+                    <path
+                      d="M21.2099 10.4099L15.8599 7.31986C15.6199 7.17986 15.3099 7.10986 14.9899 7.10986C14.6699 7.10986 14.3599 7.17986 14.1199 7.31986L8.7699 10.4099C8.2899 10.6799 7.8999 11.3599 7.8999 11.9099V18.0899C7.8999 18.6399 8.2899 19.3099 8.7699 19.5899L14.1299 22.6799C14.3699 22.8199 14.6799 22.8899 14.9999 22.8899C15.3199 22.8899 15.6299 22.8199 15.8699 22.6799L21.2299 19.5899C21.7099 19.3099 22.0999 18.6399 22.0999 18.0899V11.9099C22.0999 11.3599 21.7099 10.6799 21.2299 10.4099H21.2099ZM14.9899 20.8799L9.8999 17.9399V12.0599L14.9899 9.11986L20.0799 12.0599V16.7799L16.9899 14.9999V14.2599C16.9899 13.9999 16.8499 13.7699 16.6299 13.6399L15.3499 12.8999C15.2399 12.8399 15.1099 12.7999 14.9899 12.7999C14.8699 12.7999 14.7399 12.8299 14.6299 12.8999L13.3499 13.6399C13.1299 13.7699 12.9899 14.0099 12.9899 14.2599V15.7399C12.9899 15.9999 13.1299 16.2299 13.3499 16.3599L14.6299 17.0999C14.7399 17.1599 14.8699 17.1999 14.9899 17.1999C15.1099 17.1999 15.2399 17.1699 15.3499 17.0999L15.9899 16.7299L19.0799 18.5099L14.9899 20.8699V20.8799Z"
+                      fill="white"
+                    />
+                    <path
+                      d="M38.48 21C38.2987 21 38.208 20.9307 38.208 20.792C38.208 20.76 38.2133 20.7227 38.224 20.68C38.2347 20.6373 38.2613 20.5627 38.304 20.456L42.032 10.264C42.0853 10.1253 42.1493 10.0347 42.224 9.992C42.2987 9.93867 42.3947 9.912 42.512 9.912H43.92C44.0373 9.912 44.1333 9.93867 44.208 9.992C44.2933 10.0347 44.3573 10.1253 44.4 10.264L48.112 20.456C48.1547 20.5627 48.1813 20.6373 48.192 20.68C48.2027 20.7227 48.208 20.76 48.208 20.792C48.208 20.9307 48.1173 21 47.936 21H46.544C46.3413 21 46.2027 20.8933 46.128 20.68L45.296 18.216H41.04L40.224 20.68C40.1493 20.8933 40.0107 21 39.808 21H38.48ZM41.504 16.792H44.848L43.168 11.672L41.504 16.792ZM50.7899 21H49.6059C49.3712 21 49.2539 20.8827 49.2539 20.648V13.208C49.2539 12.9733 49.3712 12.856 49.6059 12.856H50.4539C50.6992 12.856 50.8432 12.968 50.8859 13.192L50.9979 13.672C52.0325 12.968 53.0139 12.616 53.9419 12.616C54.4539 12.616 54.8752 12.712 55.2059 12.904C55.5472 13.0853 55.8085 13.3573 55.9899 13.72C57.0565 12.984 58.0805 12.616 59.0619 12.616C59.4779 12.616 59.8672 12.6907 60.2299 12.84C60.5925 12.9787 60.8859 13.224 61.1099 13.576C61.3339 13.928 61.4459 14.408 61.4459 15.016V20.648C61.4459 20.8827 61.3285 21 61.0939 21H59.9099C59.6752 21 59.5579 20.8827 59.5579 20.648V15.48C59.5579 14.9893 59.4619 14.6373 59.2699 14.424C59.0779 14.2107 58.7632 14.104 58.3259 14.104C57.9739 14.104 57.6112 14.1627 57.2379 14.28C56.8645 14.3973 56.5499 14.536 56.2939 14.696V20.648C56.2939 20.8827 56.1765 21 55.9419 21H54.7579C54.5232 21 54.4059 20.8827 54.4059 20.648V15.48C54.4059 14.9893 54.3099 14.6373 54.1179 14.424C53.9259 14.2107 53.6112 14.104 53.1739 14.104C52.8965 14.104 52.5765 14.152 52.2139 14.248C51.8619 14.3333 51.5045 14.4827 51.1419 14.696V20.648C51.1419 20.8827 51.0245 21 50.7899 21ZM65.387 21.24C64.651 21.24 64.0483 21.016 63.579 20.568C63.1097 20.12 62.875 19.5387 62.875 18.824C62.875 18.0347 63.1577 17.4053 63.723 16.936C64.2883 16.4667 65.0563 16.232 66.027 16.232C66.5923 16.232 67.211 16.312 67.883 16.472V15.528C67.883 14.9947 67.7657 14.6213 67.531 14.408C67.307 14.184 66.8963 14.072 66.299 14.072C65.9363 14.072 65.5417 14.1093 65.115 14.184C64.6883 14.2587 64.2883 14.3547 63.915 14.472C63.8083 14.504 63.7177 14.52 63.643 14.52C63.5043 14.52 63.435 14.4187 63.435 14.216V13.624C63.435 13.4533 63.4617 13.3413 63.515 13.288C63.5683 13.224 63.675 13.16 63.835 13.096C64.251 12.936 64.699 12.8187 65.179 12.744C65.659 12.6587 66.1337 12.616 66.603 12.616C67.6483 12.616 68.4163 12.8293 68.907 13.256C69.4083 13.6827 69.659 14.3493 69.659 15.256V20.648C69.659 20.8827 69.5417 21 69.307 21H68.459C68.2243 21 68.091 20.8933 68.059 20.68L67.979 20.216C67.6163 20.536 67.2057 20.7867 66.747 20.968C66.299 21.1493 65.8457 21.24 65.387 21.24ZM65.915 19.896C66.2243 19.896 66.5497 19.8267 66.891 19.688C67.243 19.5493 67.5737 19.3627 67.883 19.128V17.592C67.6483 17.5387 67.3977 17.496 67.131 17.464C66.8643 17.432 66.6137 17.416 66.379 17.416C65.2697 17.416 64.715 17.848 64.715 18.712C64.715 19.0747 64.8163 19.3627 65.019 19.576C65.2323 19.7893 65.531 19.896 65.915 19.896ZM77.2623 21H71.3423C71.1076 21 70.9903 20.8827 70.9903 20.648V20.04C70.9903 19.848 71.0009 19.7147 71.0223 19.64C71.0543 19.5547 71.1396 19.432 71.2783 19.272L75.5343 14.296H71.5023C71.2676 14.296 71.1503 14.1787 71.1503 13.944V13.208C71.1503 12.9733 71.2676 12.856 71.5023 12.856H77.2143C77.4489 12.856 77.5663 12.9733 77.5663 13.208V13.816C77.5663 13.9973 77.5503 14.1307 77.5183 14.216C77.4969 14.3013 77.4169 14.424 77.2783 14.584L73.0223 19.56H77.2623C77.4969 19.56 77.6143 19.6773 77.6143 19.912V20.648C77.6143 20.8827 77.4969 21 77.2623 21ZM82.3608 21.24C81.1341 21.24 80.1688 20.8613 79.4648 20.104C78.7714 19.3467 78.4248 18.2853 78.4248 16.92C78.4248 15.5547 78.7714 14.4987 79.4648 13.752C80.1688 12.9947 81.1341 12.616 82.3608 12.616C83.5874 12.616 84.5474 12.9947 85.2408 13.752C85.9448 14.4987 86.2968 15.5547 86.2968 16.92C86.2968 18.2853 85.9448 19.3467 85.2408 20.104C84.5474 20.8613 83.5874 21.24 82.3608 21.24ZM82.3608 19.752C83.0221 19.752 83.5234 19.5227 83.8648 19.064C84.2061 18.6053 84.3768 17.8907 84.3768 16.92C84.3768 15.9493 84.2061 15.24 83.8648 14.792C83.5234 14.3333 83.0221 14.104 82.3608 14.104C81.7101 14.104 81.2088 14.3333 80.8568 14.792C80.5154 15.24 80.3448 15.9493 80.3448 16.92C80.3448 17.8907 80.5154 18.6053 80.8568 19.064C81.2088 19.5227 81.7101 19.752 82.3608 19.752ZM89.4005 21H88.2165C87.9818 21 87.8645 20.8827 87.8645 20.648V13.208C87.8645 12.9733 87.9818 12.856 88.2165 12.856H89.0645C89.2032 12.856 89.3045 12.8773 89.3685 12.92C89.4325 12.952 89.4752 13.032 89.4965 13.16L89.6245 13.752C90.6272 12.9947 91.6725 12.616 92.7605 12.616C93.5498 12.616 94.1418 12.824 94.5365 13.24C94.9418 13.6453 95.1445 14.2373 95.1445 15.016V20.648C95.1445 20.8827 95.0272 21 94.7925 21H93.6085C93.3738 21 93.2565 20.8827 93.2565 20.648V15.608C93.2565 15.0747 93.1498 14.6907 92.9365 14.456C92.7232 14.2213 92.3818 14.104 91.9125 14.104C91.5605 14.104 91.1978 14.168 90.8245 14.296C90.4618 14.4133 90.1045 14.584 89.7525 14.808V20.648C89.7525 20.8827 89.6352 21 89.4005 21ZM110.751 23.64C110.602 23.64 110.421 23.6133 110.207 23.56C109.333 23.336 108.522 23.032 107.775 22.648C107.039 22.2747 106.351 21.8107 105.711 21.256C104.666 21.224 103.759 20.9733 102.991 20.504C102.234 20.0347 101.647 19.3733 101.231 18.52C100.826 17.6667 100.623 16.648 100.623 15.464C100.623 14.2587 100.837 13.224 101.263 12.36C101.701 11.4853 102.314 10.8187 103.103 10.36C103.893 9.89067 104.831 9.656 105.919 9.656C107.007 9.656 107.946 9.89067 108.735 10.36C109.535 10.8187 110.149 11.4853 110.575 12.36C111.002 13.224 111.215 14.2587 111.215 15.464C111.215 16.9467 110.89 18.1733 110.239 19.144C109.599 20.1147 108.709 20.7547 107.567 21.064C108.037 21.3413 108.511 21.5493 108.991 21.688C109.471 21.8267 110.031 21.9227 110.671 21.976C110.917 21.9973 111.039 22.12 111.039 22.344V23.32C111.039 23.5333 110.943 23.64 110.751 23.64ZM105.919 19.64C106.997 19.64 107.818 19.2827 108.383 18.568C108.949 17.8533 109.231 16.8187 109.231 15.464C109.231 14.0987 108.949 13.064 108.383 12.36C107.818 11.6453 106.997 11.288 105.919 11.288C104.842 11.288 104.021 11.6453 103.455 12.36C102.89 13.064 102.607 14.0987 102.607 15.464C102.607 16.8187 102.89 17.8533 103.455 18.568C104.021 19.2827 104.842 19.64 105.919 19.64Z"
+                      fill="#0F141A"
+                    />
+                    <defs>
+                      <linearGradient
+                        id="paint0_linear_562_24682"
+                        x1="36.7021"
+                        y1="5"
+                        x2="2.58231"
+                        y2="24.2488"
+                        gradientUnits="userSpaceOnUse"
+                      >
+                        <stop stopColor="#77FFED" />
+                        <stop offset="1" stopColor="#9A28EC" />
+                      </linearGradient>
+                    </defs>
+                  </svg>
                 </div>
                 <div className={styles['drawer-actions']}>
                   {!isMobile && activeAiDrawer?.isExpandable && (
@@ -155,6 +179,9 @@ export function AppLayoutGlobalAiDrawerImplementation({
                   </div>
                 </div>
               </header>
+              <Toggle checked={isWhiteHeader} onChange={({ detail }) => setIsWhiteHeader(detail.checked)}>
+                White header
+              </Toggle>
               {activeAiDrawer?.content}
             </div>
           </div>

From a191f7e59a0f054c60da56d6a0a57e1004d04231 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Tue, 22 Jul 2025 16:17:59 +0200
Subject: [PATCH 24/24] chore: Remove amazon q from sidecar-demo.page.tsx

---
 pages/app-layout/sidecar-demo.page.tsx        | 26 ++++++-
 .../utils/external-sidecar-widget-demo.tsx    | 69 +------------------
 2 files changed, 26 insertions(+), 69 deletions(-)

diff --git a/pages/app-layout/sidecar-demo.page.tsx b/pages/app-layout/sidecar-demo.page.tsx
index 39fbac18e5..729bcf9330 100644
--- a/pages/app-layout/sidecar-demo.page.tsx
+++ b/pages/app-layout/sidecar-demo.page.tsx
@@ -24,7 +24,7 @@ import './utils/external-sidecar-widget-demo';
 import AppContext, { AppContextType } from '../app/app-context';
 import { generateItems, Instance } from '../table/generate-data';
 import { columnsConfig } from '../table/shared-configs';
-import { Breadcrumbs } from './utils/content-blocks';
+import { Breadcrumbs, CustomDrawerContent } from './utils/content-blocks';
 import { drawerLabels } from './utils/drawers';
 import appLayoutLabels from './utils/labels';
 import { splitPaneli18nStrings } from './utils/strings';
@@ -44,6 +44,7 @@ export default function WithDrawers() {
   const [activeHref, setActiveHref] = useState('#/');
   const [navigationOpen, setNavigationOpen] = useState(true);
   const [toolsOpen, setToolsOpen] = useState(false);
+  const [activeDrawerId, setActiveDrawerId] = useState<string | null>(null);
 
   const items = generateItems(20);
 
@@ -51,6 +52,28 @@ export default function WithDrawers() {
     setToolsOpen(true);
   }
 
+  const drawersProps: Pick<AppLayoutProps, 'activeDrawerId' | 'onDrawerChange' | 'drawers'> | null = {
+    activeDrawerId: activeDrawerId,
+    drawers: [
+      {
+        ariaLabels: {
+          closeButton: 'ProHelp close button',
+          drawerName: 'ProHelp drawer content',
+          triggerButton: 'ProHelp trigger button',
+          resizeHandle: 'ProHelp resize handle',
+        },
+        content: <CustomDrawerContent />,
+        id: 'pro-help',
+        trigger: {
+          iconName: 'contact',
+        },
+      },
+    ],
+    onDrawerChange: event => {
+      setActiveDrawerId(event.detail.activeDrawerId);
+    },
+  };
+
   return (
     <AppLayout
       ariaLabels={{ ...appLayoutLabels, ...drawerLabels }}
@@ -193,6 +216,7 @@ export default function WithDrawers() {
           </ul>
         </HelpPanel>
       }
+      {...drawersProps}
     />
   );
 }
diff --git a/pages/app-layout/utils/external-sidecar-widget-demo.tsx b/pages/app-layout/utils/external-sidecar-widget-demo.tsx
index 5d799f35f4..640a567ee4 100644
--- a/pages/app-layout/utils/external-sidecar-widget-demo.tsx
+++ b/pages/app-layout/utils/external-sidecar-widget-demo.tsx
@@ -3,20 +3,8 @@
 import React from 'react';
 import ReactDOM, { unmountComponentAtNode } from 'react-dom';
 
-import {
-  Alert,
-  BarChart,
-  Box,
-  ColumnLayout,
-  Drawer,
-  FormField,
-  Input,
-  SpaceBetween,
-  Textarea,
-  Tiles,
-} from '~components';
+import { BarChart, Box, ColumnLayout, Drawer, FormField, Input, SpaceBetween, Textarea, Tiles } from '~components';
 import ButtonDropdown from '~components/button-dropdown';
-import { useMobile } from '~components/internal/hooks/use-mobile';
 import awsuiPlugins from '~components/internal/plugins';
 
 import Chat from '../chat/chat';
@@ -141,15 +129,6 @@ function Details() {
   );
 }
 
-function Chats() {
-  return (
-    <SpaceBetween size="m">
-      <Alert header="Known issues/limitations">
-        Review the documentation to learn about potential compatibility issues with specific database versions.
-      </Alert>
-    </SpaceBetween>
-  );
-}
 awsuiPlugins.appLayout.registerDrawer({
   id: 'bolt-global',
   type: 'global',
@@ -197,52 +176,6 @@ awsuiPlugins.appLayout.registerDrawer({
   unmountContent: container => unmountComponentAtNode(container),
 });
 
-awsuiPlugins.appLayout.registerDrawer({
-  id: 'q-global',
-  type: 'global',
-  defaultActive: false,
-  resizable: true,
-  defaultSize: 350,
-  preserveInactiveContent: true,
-
-  isExpandable: true,
-
-  ariaLabels: {
-    closeButton: 'Close button',
-    content: 'Content',
-    triggerButton: 'Trigger button',
-    resizeHandle: 'Resize handle',
-    expandedModeButton: 'Expanded mode button',
-  },
-  onToggle: event => {
-    console.log('g-global drawer on toggle', event.detail);
-  },
-
-  trigger: {
-    iconSvg: `<svg viewBox="0 0 16 16" focusable="false" aria-hidden="true" role="presentation"><path d="m14.22,3.41L8.87.32c-.24-.14-.55-.21-.87-.21s-.63.07-.87.21L1.78,3.41c-.48.27-.87.95-.87,1.5v6.18c0,.55.39,1.22.87,1.5l5.36,3.09c.24.14.55.21.87.21s.63-.07.87-.21l5.36-3.09c.48-.28.87-.95.87-1.5v-6.18c0-.55-.39-1.23-.87-1.5Zm-6.22,10.47l-5.09-2.94v-5.88l5.09-2.94,5.09,2.94v4.72l-3.09-1.78v-.74c0-.26-.14-.49-.36-.62l-1.28-.74c-.11-.06-.24-.1-.36-.1s-.25.03-.36.1l-1.28.74c-.22.13-.36.37-.36.62v1.48c0,.26.14.49.36.62l1.28.74c.11.06.24.1.36.1s.25-.03.36-.1l.64-.37,3.09,1.78-4.09,2.36Z" fill="currentColor" stroke-width="0"></path></svg>
-`,
-  },
-
-  onResize: event => {
-    console.log('resize', event.detail);
-  },
-
-  mountContent: container => {
-    ReactDOM.render(
-      <SpaceBetween size="l">
-        <div style={{ paddingBlockStart: '15px', paddingInlineStart: '20px', margin: 0 }}>
-          <Box variant="h3">Amazon Q</Box>
-        </div>
-        <Box padding={{ left: 'l', right: 'l' }}>
-          <Chats />
-        </Box>
-      </SpaceBetween>,
-      container
-    );
-  },
-  unmountContent: container => unmountComponentAtNode(container),
-});
-
 awsuiPlugins.appLayout.registerDrawer({
   id: 'amazon-q',
   type: 'global-ai',