🔥 OTP Input & Chat Elements + AI Improvements

Announcements New Releases
1

Hey everyone :waving_hand:

This release brings you brand-new elements, better image handling in AI chat, and bug fixes!

Check out the details :backhand_index_pointing_down:

:check_mark: 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:

New_OTP

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.

:speech_balloon: 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:

New_Chat

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

:framed_picture: 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.

:beetle: 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 :slightly_smiling_face:

2

hooray! Finally we have a chat element! :tada:

3

The chat looks great

Questions please:

  1. I can’t see the avatars working in group chat is this by design or a bug?
    2.If there is a like a very long chat like 1000 messages for example, how can we load more? and most importantly can the chat window handles that ?
4

Hey YMA!

Avatars :

  • It’s by design, not a bug. Message bubbles don’t show small avatars next to each message.
  • You only see one avatar in the header. In group chats that can be a single “group” image (or initials if no image is set).
  • If you want per‑message avatars (e.g., first message in a sender’s block), we can add that as an enhancement.

Long Threads :

  • There’s no built‑in “load more” or infinite scroll today. The chat shows whatever messages you give it.
  • It auto‑scrolls to the latest message. That’s great for live chats but not ideal for loading older history at the top.
  • Performance: hundreds of messages are fine; showing thousands at once (especially with many images) can feel slow. Best practice is to load history in chunks.
  • We can add this functionality also later
5

Great !

6

Hi @Agustin_Carozo . Does this fature allow rich text inputs ? So people can @mention someone? Also does it have a typing indicator functionality?

7

Hi @tom12345 no unfortunately, currently it’s a simple textarea, any HTML is escaped and @username remains plain text. We’ll have to think more about it if we want to implement this feature.

Thank you for the feedback and the ideas :folded_hands:

8

+1 for this

9

Hey,
I’ve ended up forking the chat component to add mentions : GitHub - hugodevweb/ww-chat
this add a mentions array in the event.message on message sent trigger, you can then store those in your db and add them to the messages input array of to component.

Animation

10

love this, can’t weweb team take this and push it to the main component

11

I’m sure they have quite a bit of QA to handle before releasing a new component, so adding features like this can take some time. In the meantime, you can easily create a GitHub account and use my component directly in your WeWeb project.

12

Yup I agree am not saying to skip steps, just consider the update