Use skeleton screens over generic spinners for chat loading states. Skeleton screens focus the user's attention on progress rather than waiting time, creating the perception of faster load times. They also provide structural context for what is about to appear, reducing disorientation when content arrives.

Don't

Chat bubble alignment

Align sent and received messages consistently. Place outgoing messages on the right and incoming messages on the left. This creates a clear visual hierarchy and a natural conversational flow that users expect. ²

Don't

Coming soon

Badge

A compact label that communicates AI provenance, helping people quickly understand when content, decisions, or outputs were generated or supported by AI.

Coming soon

Button

An action button that clearly signals when a task is powered by Basis AI, helping people understand when AI will assist, generate, or take action on their behalf.

In Progress

Contextual Assist

The Contextual Assist will be displayed throughout Basis to surface available AI capabilities, such as smart suggestions, relevant insights, and guided assistance.

Coming soon

Message Card

A prominent message card for communicating AI provenance with added context, helping people understand how AI contributed to a result, recommendation, or action.

Additional Reading

Skeleton Screens 101 — Nielsen Norman Group https://www.nngroup.com/articles/skeleton-screens/
Chat UI Design: How to Build Effective Chat Interfaces in 2026 — https://www.uxpin.com/studio/blog/chat-user-interface-design/

Button

Contextual Assist

Button

Contextual Assist

Button

Contextual Assist

Chat

AI chat components allow users to communicate with the Compass AI assistant.

Details

User Chat Bubble

Compass Chat Bubble

Best Practices

Skeleton Loaders

Chat bubble alignment

More

Related Pages

Badge

Button

Contextual Assist

Message Card

Additional Reading