add ErrorMessageAIO

[minhsueh]

ErrorMessageAIO

Motivation

We need a reusable notification component that:

• Provides a consistent error message UI across the app
• Can be used multiple times across pages and components
• Requires minimal setup from the parent component

---

Current usage problem

The existing pattern relies on instance-based callback registration:

• Callbacks are only registered if the component is instantiated early enough
• Components inside dynamic layouts may not be registered in time
• Parent components must explicitly manage IDs and callback wiring

This makes global reuse difficult, especially in multi-page or dynamic layouts.

---

Solution

Adopt the All-in-One (AIO) component pattern:

• Callbacks are defined once at import time
• Use pattern-matching IDs (MATCH) to route behavior per instance
• Internal logic (close button, visibility, timer) is fully encapsulated

Example Usage

# In the parent component, we just need:
# 1. Layout:
ErrorMessageAIO(
        message="Invalid composition input!",
        aio_id=self.id("invalid-comp-alarm"),
        msg_type="error",
).layout()

# 2. Callback:
Output(ErrorMessageAIO.ids.visible(self.id("invalid-comp-alarm")), "data")

No manual callback registration is required.

---

AIO Conventions Followed

• AIO suffix (ErrorMessageAIO)
• Structured IDs via <Component>.ids.<subcomponent>
• Use of module-level @callback instead of app.callback
• Pattern-matching IDs using MATCH
• Callbacks defined at import time

Benefits

• Reusable across pages and components
• No dependency on instantiation order
• Encapsulated internal behavior (no manual wiring of subcomponents)
• Cleaner and simpler parent component callbacks

Limitation

Quote:

Using All-in-One components that use 100+ components may slow down your app. This is a limitation of pattern-matching callbacks and we expect to fix this in the future.

Preview:

TODO:

• The current implementation does not support auto-dismiss, as it is focused on error messages, which should remain visible until explicitly dismissed by the user. However, for info, warning, and success messages, adding auto-dismiss functionality would be beneficial.

[minhsueh]

Hi @mkhorton , I think ErrorMessageAIO is a good fit for applying the AIO pattern we discussed earlier. When you have time, please let me know if this implementation aligns with your expectations.