iblai-notification

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

/iblai-notification

Add notification features -- a compact bell icon with unread badge for your navbar and a full notification center page with Inbox and Alerts tabs.

AI Assistant: Do NOT add custom styles, colors, or CSS overrides to ibl.ai SDK components. They ship with their own styling. Keep the components as-is. Do NOT implement dark mode unless the user explicitly asks for it.

When building custom UI around SDK components, use the ibl.ai brand:
Primary:
#0058cc
, Gradient:
linear-gradient(135deg, #00b0ef, #0058cc)
Button:
bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white
Font: System sans-serif stack, Style: shadcn/ui new-york variant

Use shadcn components for custom UI -- they share the same Tailwind theme and render in ibl.ai brand colors automatically.
You MUST run
/iblai-test
before telling the user the work is ready.
After all work is complete, start a dev server (
pnpm dev
) so the user can see the result at http://localhost:3000.
iblai.env
is NOT a
.env.local
replacement — it only holds the 3 shorthand variables (
DOMAIN
,
PLATFORM
,
TOKEN
). Next.js still reads its runtime env vars from
.env.local
.
Use
pnpm
as the default package manager. Fall back to
npm
if pnpm is not installed. The generated app should live in the current directory, not in a subdirectory.

添加通知功能——导航栏上带未读角标的紧凑铃铛图标，以及包含收件箱和提醒选项卡的完整通知中心页面。

AI助手提示： 请勿为ibl.ai SDK组件添加自定义样式、颜色或CSS覆盖规则。它们自带预设样式，请保持组件原生状态。除非用户明确要求，否则不要实现深色模式。

在SDK组件外构建自定义UI时，请遵循ibl.ai品牌规范：
主色:
#0058cc
, 渐变:
linear-gradient(135deg, #00b0ef, #0058cc)
按钮:
bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white
字体: 系统无衬线字体栈, 样式: shadcn/ui new-york 变体

自定义UI请使用shadcn组件——它们共享相同的Tailwind主题，会自动渲染为ibl.ai品牌配色。
在告知用户工作完成前，你必须运行
/iblai-test
。
所有工作完成后，启动开发服务器（
pnpm dev
），用户即可在http://localhost:3000查看结果。
iblai.env
不是
.env.local
的替代品——它仅存储3个简写变量（
DOMAIN
、
PLATFORM
、
TOKEN
）。Next.js仍会从
.env.local
读取运行时环境变量。
请使用
pnpm
作为默认包管理器，若未安装pnpm则回退到
npm
。生成的应用应存放在当前目录，不要放在子目录中。

Prerequisites

前置要求

Auth must be set up first (
```
/iblai-auth
```
)
MCP and skills must be set up:
```
iblai add mcp
```

必须先完成身份验证配置（
```
/iblai-auth
```
）
必须完成MCP和skills配置：
```
iblai add mcp
```

Step 0: Check for CLI Updates

步骤0：检查CLI更新

Before running any

iblai

command, ensure the CLI is up to date. Run

iblai --version

to check the current version, then upgrade directly:

pip:
```
pip install --upgrade iblai-app-cli
```
npm:
```
npm install -g @iblai/cli@latest
```

This is safe to run even if already at the latest version.

运行任何

iblai

命令前，请确保CLI是最新版本。运行

iblai --version

查看当前版本，然后直接升级：

pip:
```
pip install --upgrade iblai-app-cli
```
npm:
```
npm install -g @iblai/cli@latest
```

即使已经是最新版本，运行该命令也是安全的。

Step 1: Check Environment

步骤1：检查环境

Before proceeding, check for a

iblai.env

in the project root. Look for

PLATFORM

DOMAIN

, and

TOKEN

variables. If the file does not exist or is missing these variables, tell the user: "You need an

iblai.env

with your platform configuration. Download the template and fill in your values:

curl -o iblai.env https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/iblai.env

继续操作前，请检查项目根目录是否存在

iblai.env

文件，确认其中包含

PLATFORM

、

DOMAIN

和

TOKEN

变量。如果文件不存在或缺少这些变量，请告知用户： "你需要一个包含平台配置的

iblai.env

文件。下载模板并填写你的配置值：

curl -o iblai.env https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/iblai.env

Step 2: Run the Generator

步骤2：运行生成器

bash

iblai add notification

bash

iblai add notification

What Was Generated

生成的文件内容

File	Purpose
`components/iblai/notification-bell.tsx`	Bell icon with unread badge for navbar

The bell reads

userData

and

tenant

from localStorage. Returns

null

gracefully if no user is authenticated.

文件	用途
`components/iblai/notification-bell.tsx`	用于导航栏的带未读角标铃铛图标

铃铛组件会从localStorage读取

userData

和

tenant

，如果没有已认证的用户会优雅地返回

null

。

Step 3: Use MCP Tools for Customization

步骤3：使用MCP工具自定义

get_component_info("NotificationDisplay")
get_component_info("NotificationDropdown")

get_component_info("NotificationDisplay")
get_component_info("NotificationDropdown")

<NotificationDropdown>

Props (Bell Icon)

<NotificationDropdown>

属性（铃铛图标）

Prop	Type	Description
`org`	`string`	Tenant/org key
`userId`	`string`	Username
`onViewNotifications`	`(id?) => void?`	"View all" callback
`className`	`string?`	Additional CSS class

属性	类型	描述
`org`	`string`	租户/组织key
`userId`	`string`	用户名
`onViewNotifications`	`(id?) => void?`	"查看全部"回调函数
`className`	`string?`	额外CSS类名

<NotificationDisplay>

Props (Full Page)

<NotificationDisplay>

属性（完整页面）

Prop	Type	Description
`org`	`string`	Tenant/org key
`userId`	`string`	Username
`isAdmin`	`boolean?`	Shows Alerts tab + Send button
`selectedNotificationId`	`string?`	Pre-select a notification
`enableRbac`	`boolean?`	Enable RBAC permission checks

属性	类型	描述
`org`	`string`	租户/组织key
`userId`	`string`	用户名
`isAdmin`	`boolean?`	显示提醒选项卡+发送按钮
`selectedNotificationId`	`string?`	预选中某条通知
`enableRbac`	`boolean?`	开启RBAC权限校验

Roles

角色权限

Feature	Everyone	Admin only
Inbox (unread/read)	Yes	Yes
Mark as read / all	Yes	Yes
Send notification		Yes
Alerts tab		Yes

功能	所有用户	仅管理员
收件箱（未读/已读）	是	是
标记为已读/全部已读	是	是
发送通知		是
提醒选项卡		是

Step 4: Verify

步骤4：验证

Run

/iblai-test

before telling the user the work is ready:

```
pnpm build
```
-- must pass with zero errors
```
pnpm test
```
-- vitest must pass

Start dev server and touch test:

bash

pnpm dev &
npx playwright screenshot http://localhost:3000/notifications /tmp/notifications.png

在告知用户工作完成前运行

/iblai-test

：

```
pnpm build
```
-- 必须零错误通过
```
pnpm test
```
-- vitest必须通过

启动开发服务器并进行触摸测试：

bash

pnpm dev &
npx playwright screenshot http://localhost:3000/notifications /tmp/notifications.png

Important Notes

重要说明

Import:
```
@iblai/iblai-js/web-containers
```
-- framework-agnostic
Redux store: Must include
```
mentorReducer
```
and
```
mentorMiddleware
```
initializeDataLayer()
: 5 args (v1.2+)
@reduxjs/toolkit
: Deduplicated via webpack aliases in
```
next.config.ts
```
Admin detection: Derive from
```
tenants
```
array in localStorage
Brand guidelines: BRAND.md

导入路径:
```
@iblai/iblai-js/web-containers
```
-- 与框架无关
Redux store: 必须包含
```
mentorReducer
```
和
```
mentorMiddleware
```
initializeDataLayer()
: 5个参数（v1.2及以上版本）
@reduxjs/toolkit
: 通过
```
next.config.ts
```
中的webpack别名去重
管理员身份识别: 从localStorage的
```
tenants
```
数组中推导
品牌规范: BRAND.md

iblai-notification

Original

Translation

/iblai-notification

/iblai-notification

Prerequisites

前置要求

Step 0: Check for CLI Updates

步骤0：检查CLI更新

Step 1: Check Environment

步骤1：检查环境

Step 2: Run the Generator

步骤2：运行生成器

What Was Generated

生成的文件内容

Step 3: Use MCP Tools for Customization

步骤3：使用MCP工具自定义

`<NotificationDropdown>`
Props (Bell Icon)

`<NotificationDropdown>`
属性（铃铛图标）

`<NotificationDisplay>`
Props (Full Page)

`<NotificationDisplay>`
属性（完整页面）

Roles

角色权限

Step 4: Verify

步骤4：验证

Important Notes

重要说明