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

6 Likes
2

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

2 Likes
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 ?
1 Like
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
1 Like
5

Great !

1 Like
6

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

3 Likes
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

7 Likes
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

1 Like