Skip to main content

Tool overlay

Display functionalities of an AI Assistant tool.

The Tool Overlay comes in three variants: S––440px, M––600px, and L––760px.

note

This is not a standalone component. Please use these guidelines to implement it according to the WPP Design System.

Usage​

Use Tool Overlay––a part of the AI Assistant features, to display functionalities of an AI Assistant tool.

Size​

Width​

Tool Overlay comes in three standard widths:

  • 440px
  • 600px
  • 760px

Height​

  • Match the tool's height to the AI Assistant's height when the tool's content is long and needs scrolling.

  • Calculate the height using the formula:

    Viewport Height - 64px (OS bar) - 48px.

  • Place the overlay 24px below the OS bar.

  • Make the tool's height fit the content when the tool's content doesn't need to be scrolled, resulting in a height shorter than the AI Assistant's window.

  • Center the Tool Overlay relative to the AI Assistant's window.

Behavior​

  • Activating a tool from the AI Assistant toolbar triggers the Tool Overlay to appear on the left side of the window.
  • If the content doesn’t fit the AI Assistant's window height, the header sticks to the top edge of the window, and the content area becomes scrollable.