iblai-analytics

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

/iblai-analytics

Add an analytics dashboard page with usage metrics, conversation stats, and user activity. Supports a simple overview or a full tabbed layout with Users, Topics, Financial, Transcripts, and Reports.

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.

添加一个包含使用指标、会话统计和用户活动的分析仪表板页面。支持简单概览，或包含用户、主题、财务、对话记录、报告的完整标签页布局。

AI Assistant: 请勿为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
。

Prerequisites

前置条件

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

必须先完成认证配置（
```
/iblai-auth
```
）
必须完成MCP和技能配置：
```
iblai add mcp
```

Step 0: Check for CLI Updates

步骤0：检查CLI更新

AI Assistant: Before running any
iblai
command, check for updates. Run
iblai --version
to get the current version, then check the latest:
PyPI:
curl -sf https://pypi.org/pypi/iblai-app-cli/json | python3 -c "import sys,json; print(json.load(sys.stdin)['info']['version'])"
npm:
npm view @iblai/cli version 2>/dev/null
GitHub (binary installs):
curl -sf https://api.github.com/repos/iblai/iblai-app-cli/releases/latest | python3 -c "import sys,json; print(json.load(sys.stdin)['tag_name'].lstrip('v'))"
If a newer version exists, update:
pip:
pip install --upgrade iblai-app-cli
npm:
npm install -g @iblai/cli@latest
Binary: download the latest release from
https://github.com/iblai/iblai-app-cli/releases/latest
for the current platform and replace the binary

AI Assistant: 运行任何
iblai
命令前，请先检查更新。运行
iblai --version
获取当前版本，然后查询最新版本：
PyPI:
curl -sf https://pypi.org/pypi/iblai-app-cli/json | python3 -c "import sys,json; print(json.load(sys.stdin)['info']['version'])"
npm:
npm view @iblai/cli version 2>/dev/null
GitHub（二进制安装）:
curl -sf https://api.github.com/repos/iblai/iblai-app-cli/releases/latest | python3 -c "import sys,json; print(json.load(sys.stdin)['tag_name'].lstrip('v'))"
如果存在更新版本，请升级：
pip:
pip install --upgrade iblai-app-cli
npm:
npm install -g @iblai/cli@latest
二进制版本：从
https://github.com/iblai/iblai-app-cli/releases/latest
下载对应平台的最新版本，替换原有二进制文件即可

Step 1: Run the Generator

步骤1：运行生成器

bash

iblai add analytics

bash

iblai add analytics

What Was Generated

生成的文件内容

File	Purpose
`app/(app)/analytics/page.tsx`	Analytics dashboard page with `AnalyticsOverview`

The page reads

tenant

current_tenant

from localStorage and renders the analytics overview for the current tenant.

文件	用途
`app/(app)/analytics/page.tsx`	包含 `AnalyticsOverview` 的分析仪表板页面

该页面会从localStorage读取

tenant

current_tenant

，并渲染当前租户的分析概览。

Step 2: Use MCP Tools for Customization

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

get_component_info("AnalyticsOverview")

get_component_info("AnalyticsOverview")

<AnalyticsOverview>

Props

<AnalyticsOverview>

属性

Prop	Type	Description
`tenantKey`	`string`	Tenant/org key
`mentorId`	`string`	Mentor UUID. Pass `""` for org-wide analytics.
`selectedMentorId`	`string?`	Filter analytics to a specific mentor
`usergroupIds`	`string[]?`	Filter analytics to specific user groups

属性	类型	说明
`tenantKey`	`string`	租户/组织密钥
`mentorId`	`string`	Mentor UUID。传入 `""` 可查看全组织分析数据。
`selectedMentorId`	`string?`	按指定mentor筛选分析数据
`usergroupIds`	`string[]?`	按指定用户组筛选分析数据

Step 3: Verify

步骤3：验证

Run

/iblai-test

before telling the user the work is ready:

```
npm run build
```
-- must pass with zero errors
```
npm run test
```
-- vitest must pass

Start dev server and touch test:

bash

npm run dev &
npx playwright screenshot http://localhost:3000/analytics /tmp/analytics.png

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

/iblai-test

：

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

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

bash

npm run dev &
npx playwright screenshot http://localhost:3000/analytics /tmp/analytics.png

Important Notes

重要注意事项

Import:
```
@iblai/iblai-js/web-containers
```
-- analytics components are framework-agnostic
Redux store: Must include
```
mentorReducer
```
and
```
mentorMiddleware
```
initializeDataLayer()
: 5 args (v1.2+)
@reduxjs/toolkit
: Deduplicated via webpack aliases in
```
next.config.ts
```
mentorId
empty string: For org-wide analytics pass
```
""
```
not
```
undefined
```
Brand guidelines: BRAND.md

导入路径:
```
@iblai/iblai-js/web-containers
```
-- 分析组件是框架无关的
Redux store: 必须包含
```
mentorReducer
```
和
```
mentorMiddleware
```
initializeDataLayer()
: 需传入5个参数（v1.2+版本）
@reduxjs/toolkit
: 通过
```
next.config.ts
```
中的webpack别名实现去重
mentorId
空字符串: 查看全组织分析数据时请传入
```
""
```
而非
```
undefined
```
品牌规范: BRAND.md

iblai-analytics

Original

Translation

/iblai-analytics

/iblai-analytics

Prerequisites

前置条件

Step 0: Check for CLI Updates

步骤0：检查CLI更新

Step 1: Run the Generator

步骤1：运行生成器

What Was Generated

生成的文件内容

Step 2: Use MCP Tools for Customization

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

`<AnalyticsOverview>`
Props

`<AnalyticsOverview>`
属性

Step 3: Verify

步骤3：验证

Important Notes

重要注意事项