Bildirimler
Bir yapay zeka ürününün ayarlarındaki Bildirimler bölümü. Satır, sütun ve tümü için anahtarları olan kanal ve olay ızgarası, canlı bir sonraki sessiz saat satırlı sessiz saatler, bir e-posta özeti, masaüstü, e-posta, push ve Slack için gerçek test gönderimleri, tarayıcı izni yönetimi ve bir Slack bağlama akışı. Herhangi bir Ayarlar bölümüne eklenebilir.
Her yapay zeka ürünü aynı bildirim sayfasına sahip olur: olabilecek şeylerin bir listesi, size ulaşabilecekleri yerlerin bir listesi ve geceleri durdurmanın bir yolu. NotificationSettings bu sayfanın tek bir bölüm halidir. Bir SettingsSection içine eklenir ve Settings'in geri kalanıyla aynı taslağı, kaydetme çubuğunu ve kaydedilmemiş değişiklik korumasını kullanır.
Çekirdek, olayların kanallara göre bir ızgarasıdır. Üst satır bir kanalı her olay için açıp kapatır, ilk sütun bir olayı her yerde açıp kapatır ve köşedeki onay kutusu hepsini yapar. Yalnızca bazıları açıkken her biri bir tire gösterir. Klavyeyle ızgara tek bir sekme durağıdır: ok tuşları onay kutuları arasında gezer, Home ve End satır boyunca atlar, Space açıp kapatır. Ekran okuyucular her birini "Email for Agent finished" olarak duyar. Telefonda ızgara, büyük kanal çipleriyle olay başına bir karta dönüşür.
Her kanalın gerçekten gönderen bir Send test'i vardır. Desktop ve push, sayfanın üzerinde bir bildirim banner'ı gösterir; desktop ayrıca tarayıcı izin verdikten sonra gerçek bir sistem bildirimi tetikler. Email, mesajın bir gelen kutusundaki önizlemesini açar; e-postalar toplandığında özet sürümünü. Slack, mesajı ekibinizin kanalda gördüğü şekilde gösterir.
Desktop, tarayıcının iznini okur. Henüz sorulmadıysa Allow sorar; engellenmişse nereden değiştirileceğini söyler; tarayıcı bildirim gösteremiyorsa bunu söyler. Slack bağlantısız başlar: sütunu kapalıdır ve Connect bir çalışma alanı ve kanal seçmek için bir iletişim kutusu açar. Bağlanma başarısız olursa neden iletişim kutusunda görünür ve hiçbir şey kaybolmaz.
Sessiz saatler, seçtiğiniz günlerde, seçtiğiniz saat diliminde iki saat arasında masaüstü ve push uyarılarını tutar; bir sonraki sessiz dönemin ne zaman başlayacağını ya da şu an sessiz olduğunu söyleyen bir satırla. Onaylar gibi acil olaylar yine de geçebilir.
Pro registry'yi components.json dosyasına ekleyin
components.json Token'ınızı ekleyin
Hesap sayfanızda bir token oluşturun ve
.env.localdosyasınaHEXTAUI_PRO_TOKENolarak ekleyin.Bloğu ekleyin
pnpm dlx shadcn@latest add @hextaui-pro/notifications
API'nize bağlayın
Kayıtlı tercihleri ve asenkron bir onSave iletin. Düzenlemeler, biri kaydetme çubuğundan ya da ⌘S ile kaydedene kadar taslakta kalır. Alan hatalarını alanın altında göstermek için döndürün ya da mesajı kaydetme çubuğunda göstermek için hata fırlatın. onSendTest, önizleme görünmeden önce gerçek bir test gönderir.
Kendi olaylarınız ve kanallarınız
Satır eklemek veya çıkarmak için events, sütun seçmek için channels iletin. Her olay, test önizlemeleri için bir sample ve sessiz saatlerden geçmesi için urgent taşıyabilir. onSlackConnect seçilen çalışma alanını ve kanalı alır; nedenini göstermek için hata fırlatın, iletişim kutusu açık kalır.
Yapı
Dıştan içe doğru birleştirdiğiniz parçalar.
| Parça | Açıklama |
|---|---|
NotificationSettings | Tüm bölüm: olay ızgarası, testli kanallar, sessiz saatler ve e-posta özeti. |
notificationEvents | Varsayılan olaylar: Agent finished, Needs approval, Run failed, Mentions, Weekly summary ve Billing. |
notificationChannels | Varsayılan kanallar: desktop, email, push ve slack. |
NotificationSettings
Bir SettingsSection içinde olmalıdır.
| Prop | Tür | Varsayılan |
|---|---|---|
preferencesŞu an kayıtlı olan: { matrix, quietHours, quietFrom, quietTo, quietDays, timeZone, quietUrgent, digest }. matrix her olay id'sini açık kanallara eşler. Değiştiğinde ve düzenleme yoksa taslak onu izler. | NotificationPreferences | – |
onSaveTaslağı kaydeder. Alan hatalarını göstermek için { quietDays: "…" } gibi değerler döndürün ya da mesajı kaydetme çubuğunda göstermek için hata fırlatın. | (preferences) => void | errors | Promise<void | errors> | – |
eventsIzgaranın satırları: { id, label, description?, urgent?, sample? }. sample, test önizlemeleri için { title, body, subject, action } biçimindedir. urgent olaylar sessiz saatlerden geçebilir. | NotificationEvent[] | notificationEvents |
channelsIzgaranın sütunları ve Channels altındaki satırlar, sırayla. "desktop", "email", "push" ve "slack" değerlerinden herhangi biri. | NotificationChannel[] | notificationChannels |
emailE-postanın gittiği yer. Email altında ve test e-postasında gösterilir. | string | "[email protected]" |
devicePush bildirimlerini alan telefon. | string | "your phone" |
slackBağlı Slack kanalı. null iken Slack sütunu kapalıdır. | { workspace, channel } | null | null |
slackWorkspacesBağlanırken seçilecek çalışma alanları: { id, name, channels: { id, name, private? }[] }. | SlackWorkspace[] | [] |
onSlackConnectSeçilen kanalı bağlar. Mesajı iletişim kutusunda göstermek için hata fırlatın. | ({ workspace, channel }) => void | Promise<void> | – |
onSlackDisconnectKişi onayladıktan sonra Slack bağlantısını keser. | () => void | Promise<void> | – |
onSendTestGerçek bir test gönderir. Önizleme resolve olunca görünür ve hata fırlatırsa düğme yeniden deneme sunar. event, o kanal için açık olan ilk olaydır. | ({ channel, event }) => void | Promise<void> | – |
| Tuş | Action |
|---|---|
| Tab | Izgaraya bir kez, kullandığınız son onay kutusuna girer, ardından kanallara geçer. |
| ↑↓←→ | Izgarada onay kutuları arasında gezinir. Sol ve sağ okuma yönünü izler. |
| HomeEnd | Izgarada satırın başına ya da sonuna atlar. Ctrl veya ⌘ ile ilk ya da son onay kutusuna. |
| Space | Odaktaki onay kutusunu açar veya kapatır. Bir satır, sütun veya köşe onay kutusunda hepsini açar; hepsi açıksa kapatır. |
| Esc | Odaktayken bir test bildirimi banner'ını kapatır. |
- Izgara, sütun ve satır başlıkları olan bir ARIA ızgarasıdır ve her onay kutusu kanalı ve olayıyla adlandırılır, örneğin "Mobile push for Run failed".
- Satır, sütun ve köşe onay kutuları yalnızca bazıları açıkken karışıktır; bu yüzden ekran okuyucular "partially checked" duyar.
- Test gönderimleri, izin sonuçları ve Slack değişiklikleri polite olarak duyurulur. Bir sonraki sessiz dönem, düzenledikçe güncellenen bir durum satırıdır.
- Test banner'ları üzerine gelindiğinde ya da odaktayken duraklar, bir kapatma düğmesi vardır ve azaltılmış harekette kaymak yerine solar.
- Telefonlarda her kanal çipi 44px'lik bir hedeftir.
Şunlarla geliştirildi
Notifications bloğunun yapıldığı ücretsiz HextaUI bileşenleri. Her biri tek başına yüklenir.
Kod
5 dosya, components/blocks/notifications konumuna eklendi.