📣 OTP Input & Chat Elements + AI Improvements

This release introduces:

• Brand-new elements to help you ship faster
• Better image handling in AI chat
• AI bug fixes

Check out what’s new 👇

✔️ Build secure verification workflows with the OTP Input element

Before, building verification workflows required wrestling with custom inputs and logic.

Now, you can simply drop in a native OTP Input element:

‍

It’s fully customizable, AI-friendly, and designed to make both setup and user experience frustration-free:

• Design flexibility: customize typography, spacing, field dimensions, caret color, border, and background states (default, hover, invalid, success)

• Adaptable formatting: define any layout using separators like dashes, spaces, or icons

• Format and input type control: choose numeric-only or alphanumeric codes and their format

‍

• Smart user experience: auto-advance on typing, backspace navigation, and full-code pasting support

• Masking and placeholders: hide characters with a mask (like *) and provide placeholders for empty fields

• Form integration: mark codes as required and optionally auto-submit when it’s complete

‍

Perfect for use cases like two-factor authentication, passwordless sign-in via email, and phone number verification during onboarding!

Check out our docs to learn more.

💬 Deliver a polished and reliable chat experience

The native Chat element is here, with a ready-to-use messaging interface that’s fully customizable to match your design:

‍

It supports text and file attachments, user details, and flexible styling.

Drop in the element, customize the look and feel, and connect it to your workflows:

• Complete messaging layout: includes a header with user info, a message area for text and attachments, and an input area with file upload support

• User details: configure user name, avatar, location, and status (online, offline, away, busy)

‍

• Styling controls: customize colors, borders, and backgrounds for messages, inputs, and headers to match your brand

• Attachment support: allow or disable file uploads and handle attachment clicks with triggers

‍

• Triggers & actions:

• Triggers: on message sent, on attachment click, on close
• Actions: scroll to the bottom, clear messages, and add a message

• Chat history: load past conversation data

You can use the Chat element to power in-app customer support, community messaging spaces, or real-time collaboration features!

Check out our docs to learn more.

AI improvements

🖼️ Better image handling when working with AI

When you upload an image in the AI chat, it now:

• Displays above your prompt for easier navigation
• Expands on click, with a download option
• Stays tied only to the related message for accurate context
• Automatically cleans up in the background (images are removed when chats or messages are deleted)

That way, you can prompt with less clutter.

🪲 Bug fixes

• AI-generated animations no longer flash in preview mode.

• We’ve fixed a bug where AI-generated actions caused projects to get stuck at “Updating page.”

• Starting a prompt on a page element and asking AI to add a popup could fail or trigger errors like “Unable to send project data to AI.” This has been fixed.

• AI-generated icons now display at the correct width instead of appearing stretched.

• Chat context issues that caused errors have been resolved.

‍

That’s all for this time. As always, let us know what you think 🙂

‍