# Chat with AI Steward

Component documentation for Chat with AI Steward — Overview.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.chat-with-ai-steward.overview"
  source="components/dist/registries/dskit.json#chat-with-ai-steward"
  schema={1}
/>

<ComponentTabs component={"chat-with-ai-steward"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="low" field="content" value="low" />
</div>

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Trigger","description":"the element that opens the overlay; retains focus return on close"},{"name":"Surface","description":"the overlay panel itself — modal dialog, drawer, popover, tooltip"},{"name":"Scrim (optional)","description":"dimmed backdrop used for modals + drawers; absent for popovers/tooltips"},{"name":"Header (optional)","description":"title + close affordance for dismissible overlays"},{"name":"Body","description":"the overlay's primary content"},{"name":"Footer (optional)","description":"action affordances — confirm/cancel/close"},{"name":"Arrow or pointer (optional)","description":"anchors popovers/tooltips to their trigger"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"size","values":["Default","Drawer"]},{"axis":"history","values":["Closed","Open"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"layered-overlays-modals","note":"modals fade + scale; scrim cross-fades"},"pattern":{"slug":"layered-overlays-modals","name":"Layered Overlays — Modals","phases":[{"Phase":"Open","Duration":"duration-slow","Easing":"ease-entrance","Behavior":"Modal scales 95%→100% while background scrim fades in. The slow duration communicates that the user has entered a new, temporary top-level context."},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-exit","Behavior":"Modal scales 100%→95% and fades 100%→0%. Scrim fades 100%→0%, synchronized. Slower on open to help users track context; dismisses quickly once the decision is made."}]}},{"ref":{"ref":"drawer-open-close","note":"drawer-side-panel slides on axis with easing per the drawer pattern"},"pattern":{"slug":"drawer-open-close","name":"Drawer (open/close)","phases":[{"Phase":"Open","Duration":"duration-slow","Easing":"ease-entrance","Behavior":"Slides in from the right"},{"Phase":"Close","Duration":"duration-base","Easing":"ease-exit","Behavior":"Slides out to the right"}]}},{"ref":{"ref":"anchor-motion","note":"popover/tooltip anchor open at the trigger with origin transform"},"pattern":{"slug":"anchor-motion","name":"The \"Anchor\" Motion — Dropdowns, Popovers, and Tooltips","phases":[{"Phase":"Open","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Fades in (0→100% opacity) over full duration; element scales up from its trigger point while fading in"},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Fades out (100→0% opacity) over full duration; element scales down and retracts back to its trigger point"}],"logic_and_accessibility":["Intentionality: Apply --zen-motion-delay-intent (300ms) for Tooltip opening on hover to prevent accidental triggers","Immediate Focus: Keyboard focus (Tab) ignores delays and triggers the open motion immediately","Reduced Motion: When prefers-reduced-motion: reduce is detected, fade transitions are disabled and elements toggle visibility instantly"]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=15464-24509)