@lobehub/lobehub 2.0.0-next.353 → 2.0.0-next.354

package/.cursor/rules/microcopy-en.mdc

@@ -1,148 +0,0 @@
----
-globs: src/locales/default/*
-alwaysApply: false
----
-
-You are **LobeHub’s English UI Copy & Microcopy Specialist**.
-
-LobeHub is an assistant workspace: users can create **Agents** and **Agent Teams** so people↔agents and agent↔agent can collaborate to improve productivity in work and life. Brand vibe: youthful, friendly, modern on the surface; professional, reliable, productivity- and controllability-first underneath. Overall style reference: Notion / Figma / Apple / Discord / OpenAI / Gemini — clear, restrained, trustworthy, human but not cheesy.
-
-Product slogan: **Where Agents Collaborate**. Your copy must continuously reinforce that LobeHub is not about “generation”, but about a **collaborative agent system**: shareable context, traceable outcomes, replayable runs, evolvable setup, and **human-in-the-loop**.
-
----
-
-## 1) Fixed Terminology (must follow)
-
-Use **exactly** these English terms across the product. Do not mix synonyms for the same concept.
-
-- 空间: **Workspace**
-- 助理: **Agent**
-- 群组: **Group**
-- 上下文: **Context**
-- 记忆: **Memory**
-- 连接器: **Integration**
-- 技能/tool/plugin: **Skill**
-- 助理档案: **Agent Profile**
-- 话题: **Topic**
-- 文稿: **Page**
-- 社区: **Community**
-- 资源: **Resource**
-- 库: **Library**
-- MCP: **MCP**
-- 模型服务商: **Provider**
-
-Terminology rule: one concept = one term site-wide. Never alternate with “bot/assistant/AI agent/team/workspace” variations.
-
----
-
-## 2) Your Responsibilities
-
-- Improve, rewrite, or create from scratch any **English UI copy**: titles, buttons, form labels/help text, placeholders, onboarding, empty states, toasts, modals, errors, permission prompts, settings, creation/run flows, collaboration and Agent Team pages, etc.
-- Copy must work for both:
-  - general users (immediately understandable)
-  - power users (not childish)
-- It must fit both playful and serious contexts.
-- Avoid overclaiming AI capabilities; add human warmth at the right moments.
-
----
-
-## 3) The Three Brand Principles (bake into structure & wording)
-
-- **Create**: create an Agent in one sentence; clear next step from idea → usable.
-- **Collaborate**: multi-agent collaboration; align info and outputs; share Context (controlled, manageable).
-- **Evolve**: Agents can remember preferences **only with user consent**; become more helpful over time; emphasize explainability, settings, and replay.
-
----
-
-## 4) Writing Rules (actionable)
-
-1. **Clarity first**: short sentences, strong verbs, minimal adjectives. Avoid hype (“revolutionary”, “epic”, “100%”).
-2. **Layered messaging (single version for everyone)**:
-   - Main line: simple and actionable
-   - Optional second line: more precise / technical / boundary-setting (subtitle, helper text, tooltip, collapsible)
-   - Do not produce “Pro vs Lite” variants; one main + optional detail
-3. **Use terms sparingly but correctly**: prefer plain words (“connect”, “run”, “context”) unless a technical term is necessary. When it is, add a plain-English explanation.
-4. **Consistency**: keep verbs consistent across similar actions (Create / Connect / Run / Pause / Retry / View details / Clear Memory).
-5. **Actionable**: every message tells the user what to do next. Avoid generic “OK/Cancel”; use specific actions.
-6. **English localization**: natural, product-native English; avoid translationese; keep punctuation and casing consistent.
-
----
-
-## 5) Human Warmth (balanced, controlled)
-
-Goal: reduce anxiety and restore control without being sentimental. Default ratio: **80% information, 20% warmth**. Key moments (first-time create, empty state, long waits, failures/retries, rollback/data-loss risk, collaboration conflicts): may go **70/30**.
-
-Hard cap: any on-screen message may include **at most half a sentence to one sentence** of warmth, and it must be followed by a clear next step.
-
-Required order:
-
-1. Acknowledge the situation (no judgment)
-2. Restore control (human-in-the-loop: pause/replay/edit/undo/clear Memory/view Context)
-3. Provide the next action (button/path)
-
-Avoid:
-
-- preachy encouragement (“don’t worry”, “stay positive”)
-- grand narratives
-- overly anthropomorphic claims (“I understand you”, “I’ll always remember you”)
-
-Core stance: Agents can accelerate output, but **you** own the judgment, trade-offs, and final decision. LobeHub gives you time back for what matters.
-
-Suggested patterns:
-
-- **Getting started / blank state**
-  - “Starting with one sentence is enough. Describe your goal and I’ll help you set up the first Agent.”
-  - “Not sure where to begin? Tell me the outcome—we’ll break it down together.”
-- **Long run / waiting**
-  - “Running… You can switch tasks—I'll notify you when it’s done.”
-  - “This may take a few minutes. To speed up: reduce Context / switch model / disable Auto-run.”
-- **Failure / retry**
-  - “That didn’t run through. Retry, or view details to fix the cause.”
-  - “Connection failed: permission not granted or network unstable. Re-authorize in Settings, or try again later.”
-- **Value anxiety (guidance, not error dialogs)**
-  - “Agents can speed up output, but direction and standards stay with you.”
-  - “Fast results are great—keeping the trail makes the next run steadier.”
-- **Collaboration / Agent Teams**
-  - “Align everyone to the same Context. Every Agent in the Agent Team works from the same page.”
-  - “Different opinions are fine. Write the goal first, then let Agents propose options and trade-offs.”
-
----
-
-## 6) Errors / Exceptions / Permissions / Billing: hard rules
-
-Every error must include:
-
-- **What happened**
-- (optional) **Why**
-- **What the user can do next**
-
-Provide actionable options as appropriate:
-
-- Retry / View details / Go to Settings / Contact support / Copy logs
-
-Never blame the user. Don’t show only an error code; put codes in “Details” if needed. For data/security/billing: be neutral, thorough, and respectful—warmth comes from clarity, not emotion.
-
----
-
-## 7) Your Special Task: CN i18n → EN (localized, length-aware)
-
-You translate **raw Chinese i18n strings into English** for LobeHub.
-
-Requirements:
-
-- Prefer **localized**, product-native English over literal translation.
-- Do **not** chase perfect one-to-one consistency if a more natural UI phrase reads better.
-- Keep the **character length difference small**; try to make the English string **roughly the same visual length** as the Chinese source (avoid overly long expansions).
-- Preserve meaning, tone, and actionability; keep verbs consistent with LobeHub’s UI patterns.
-- If space is tight (buttons, tabs, toasts), prioritize: **verb + object**, drop optional words first.
-- If the Chinese includes placeholders/variables, preserve them exactly (e.g., `{name}`, `{{count}}`, `%s`) and keep word order sensible.
-- Keep capitalization consistent with UI norms (buttons/title case only when appropriate).
-
-Output format when translating:
-
-- Provide **English only**, unless asked otherwise.
-- If multiple options are useful, give **one best option** + **one shorter fallback** (only when length constraints are likely).
-
----
-
-You always optimize for: **clarity, control, collaboration, replayability, and human-in-the-loop**—in a modern, restrained, trustworthy English voice.

package/.cursor/rules/modal-imperative.mdc

@@ -1,162 +0,0 @@
----
-description: Modal 命令式调用指南
-globs: "**/features/**/*.tsx"
-alwaysApply: false
----
-
-# Modal 命令式调用指南
-
-当需要创建可命令式调用的 Modal 组件时，使用 `@lobehub/ui` 提供的 `createModal` API。
-
-## 核心理念
-
-**命令式调用** vs **声明式调用**：
-
-| 模式 | 特点 | 适用场景 |
-|------|------|----------|
-| 声明式 | 需要维护 `open` state，渲染 `<Modal />` 组件 | ❌ 不推荐 |
-| 命令式 | 直接调用函数打开，无需 state 管理 | ✅ 推荐 |
-
-## 文件组织结构
-
-```
-features/
-└── MyFeatureModal/
-    ├── index.tsx           # 导出 createXxxModal 函数
-    ├── MyFeatureContent.tsx # Modal 内容组件
-    └── ...其他子组件
-```
-
-## createModal 用法（推荐）
-
-### 1. 定义 Content 组件 (`MyFeatureContent.tsx`)
-
-```tsx
-'use client';
-
-import { useModalContext } from '@lobehub/ui';
-import { useTranslation } from 'react-i18next';
-
-export const MyFeatureContent = () => {
-  const { t } = useTranslation('namespace');
-  const { close } = useModalContext(); // 可选：获取关闭方法
-
-  return (
-    <div>
-      {/* Modal 内容 */}
-    </div>
-  );
-};
-```
-
-### 2. 导出 createModal 函数 (`index.tsx`)
-
-```tsx
-'use client';
-
-import { createModal } from '@lobehub/ui';
-import { t } from 'i18next'; // 注意：使用 i18next 而非 react-i18next
-
-import { MyFeatureContent } from './MyFeatureContent';
-
-export const createMyFeatureModal = () =>
-  createModal({
-    allowFullscreen: true,
-    children: <MyFeatureContent />,
-    destroyOnHidden: false,
-    footer: null,
-    styles: {
-      body: { overflow: 'hidden', padding: 0 },
-    },
-    title: t('myFeature.title', { ns: 'setting' }),
-    width: 'min(80%, 800px)',
-  });
-```
-
-### 3. 调用方使用
-
-```tsx
-import { useCallback } from 'react';
-import { createMyFeatureModal } from '@/features/MyFeatureModal';
-
-const MyComponent = () => {
-  const handleOpenModal = useCallback(() => {
-    createMyFeatureModal();
-  }, []);
-
-  return <Button onClick={handleOpenModal}>打开</Button>;
-};
-```
-
-## 关键要点
-
-### i18n 处理
-
-- **Content 组件内**：使用 `useTranslation` hook（React 上下文）
-- **createModal 参数中**：使用 `import { t } from 'i18next'`（非 hook，支持命令式调用）
-
-```tsx
-// index.tsx - 命令式上下文
-import { t } from 'i18next';
-title: t('key', { ns: 'namespace' })
-
-// Content.tsx - React 组件上下文
-import { useTranslation } from 'react-i18next';
-const { t } = useTranslation('namespace');
-```
-
-### useModalContext Hook
-
-在 Content 组件内可使用 `useModalContext` 获取 Modal 控制方法：
-
-```tsx
-const { close, setCanDismissByClickOutside } = useModalContext();
-```
-
-### ModalHost
-
-`createModal` 依赖全局 `<ModalHost />` 组件。项目中已在 `src/layout/GlobalProvider/index.tsx` 配置，无需额外添加。
-
-## 常用配置项
-
-| 属性 | 类型 | 说明 |
-|------|------|------|
-| `allowFullscreen` | `boolean` | 允许全屏模式 |
-| `destroyOnHidden` | `boolean` | 关闭时是否销毁内容（`destroyOnClose` 已废弃） |
-| `footer` | `ReactNode \| null` | 底部内容，`null` 表示无底部 |
-| `width` | `string \| number` | Modal 宽度 |
-| `styles.body` | `CSSProperties` | body 区域样式 |
-
-## 迁移指南
-
-### Before（声明式）
-
-```tsx
-// 调用方需要维护 state
-const [open, setOpen] = useState(false);
-
-return (
-  <>
-    <Button onClick={() => setOpen(true)}>打开</Button>
-    <MyModal open={open} setOpen={setOpen} />
-  </>
-);
-```
-
-### After（命令式）
-
-```tsx
-// 调用方无需 state，直接调用函数
-const handleOpen = useCallback(() => {
-  createMyModal();
-}, []);
-
-return <Button onClick={handleOpen}>打开</Button>;
-```
-
-## 示例参考
-
-- `src/features/SkillStore/index.tsx` - createModal 标准用法
-- `src/features/SkillStore/SkillStoreContent.tsx` - Content 组件示例
-- `src/features/LibraryModal/CreateNew/index.tsx` - 带回调的 createModal 用法
-- `src/features/Electron/updater/UpdateModal.tsx` - 复杂 Modal 控制示例

package/.cursor/rules/packages/react-layout-kit.mdc

@@ -1,122 +0,0 @@
----
-description: flex layout components from `@lobehub/ui` usage
-globs:
-alwaysApply: false
----
-
-# Flexbox 布局组件使用指南
-
-`@lobehub/ui` 提供了 `Flexbox` 和 `Center` 组件用于创建弹性布局。以下是重点组件的使用方法：
-
-## Flexbox 组件
-
-Flexbox 是最常用的布局组件，用于创建弹性布局，类似于 CSS 的 display: flex。
-
-### 基本用法
-
-```jsx
-import { Flexbox } from '@lobehub/ui';
-
-// 默认垂直布局
-<Flexbox>
-  <div>子元素1</div>
-  <div>子元素2</div>
-</Flexbox>
-
-// 水平布局
-<Flexbox horizontal>
-  <div>左侧元素</div>
-  <div>右侧元素</div>
-</Flexbox>
-```
-
-### 常用属性
-
-- horizontal: 布尔值，设置为水平方向布局
-- flex: 数值或字符串，控制 flex 属性
-- gap: 数值，设置子元素之间的间距
-- align: 对齐方式，如 'center', 'flex-start' 等
-- justify: 主轴对齐方式，如 'space-between', 'center' 等
-- padding: 内边距值
-- paddingInline: 水平内边距值
-- paddingBlock: 垂直内边距值
-- width/height: 设置宽高，通常用 '100%' 或具体像素值
-- style: 自定义样式对象
-
-### 实际应用示例
-
-```jsx
-// 经典三栏布局
-<Flexbox horizontal height={'100%'} width={'100%'}>
-  {/* 左侧边栏 */}
-  <Flexbox
-    width={260}
-    style={{
-      borderRight: `1px solid ${theme.colorBorderSecondary}`,
-      height: '100%',
-      overflowY: 'auto',
-    }}
-  >
-    <SidebarContent />
-  </Flexbox>
-
-  {/* 中间内容区 */}
-  <Flexbox flex={1} style={{ height: '100%' }}>
-    {/* 主要内容 */}
-    <Flexbox flex={1} padding={24} style={{ overflowY: 'auto' }}>
-      <MainContent />
-    </Flexbox>
-
-    {/* 底部区域 */}
-    <Flexbox
-      style={{
-        borderTop: `1px solid ${theme.colorBorderSecondary}`,
-        padding: '16px 24px',
-      }}
-    >
-      <Footer />
-    </Flexbox>
-  </Flexbox>
-</Flexbox>
-```
-
-## Center 组件
-
-Center 是对 Flexbox 的封装，使子元素水平和垂直居中。
-
-### 基本用法
-
-```jsx
-import { Center } from '@lobehub/ui';
-
-<Center width={'100%'} height={'100%'}>
-  <Content />
-</Center>;
-```
-
-Center 组件继承了 Flexbox 的所有属性，同时默认设置了居中对齐。主要用于快速创建居中布局。
-
-### 实际应用示例
-
-```jsx
-// 登录页面居中布局
-<Flexbox height={'100%'} width={'100%'}>
-  <Center height={'100%'} width={'100%'}>
-    <LoginForm />
-  </Center>
-</Flexbox>
-
-// 图标居中显示
-<Center className={styles.icon} flex={'none'} height={40} width={40}>
-  <Icon icon={icon} size={24} />
-</Center>
-```
-
-## 最佳实践
-
-- 使用 flex={1} 让组件填充可用空间
-- 使用 gap 代替传统的 margin 设置元素间距
-- 嵌套 Flexbox 创建复杂布局
-- 设置 overflow: 'auto' 使内容可滚动
-- 使用 horizontal 创建水平布局，默认为垂直布局
-- 与 antd-style 的 useTheme hook 配合使用创建主题响应式的布局

package/.cursor/rules/project-introduce.mdc

@@ -1,36 +0,0 @@
----
-alwaysApply: true
----
-
-## Project Description
-
-You are developing an open-source, modern-design AI Agent Workspace: LobeHub(previous LobeChat).
-
-Supported platforms:
-
-- web desktop/mobile
-- desktop(electron)
-- mobile app(react native), coming soon
-
-logo emoji: 🤯
-
-## Project Technologies Stack
-
-- Next.js 16
-- implement spa inside nextjs with `react-router-dom`
-- react 19
-- TypeScript
-- `@lobehub/ui`, antd for component framework
-- antd-style for css-in-js framework
-- lucide-react, `@ant-design/icons` for icons
-- react-i18next for i18n
-- zustand for state management
-- nuqs for search params management
-- SWR for data fetch
-- aHooks for react hooks library
-- dayjs for time library
-- es-toolkit for utility library
-- TRPC for type safe backend
-- Neon PostgreSQL for backend DB
-- Drizzle ORM
-- Vitest for testing

package/.cursor/rules/react.mdc

@@ -1,169 +0,0 @@
----
-description:
-globs: *.tsx
-alwaysApply: false
----
-
-# React Component Writing Guide
-
-- Use antd-style for complex styles; for simple cases, use the `style` attribute for inline styles
-- Use `Flexbox` and `Center` components from `@lobehub/ui` for flex and centered layouts
-- Component selection priority: src/components > installed component packages > lobe-ui > antd
-- Use selectors to access zustand store data instead of accessing the store directly
-
-## Lobe UI Components
-
-- If unsure how to use `@lobehub/ui` components or what props they accept, search for existing usage in this project instead of guessing. Most components extend antd components with additional props
-- For specific usage, search online. For example, for ActionIcon visit <https://ui.lobehub.com/components/action-icon>
-- Read `node_modules/@lobehub/ui/es/index.mjs` to see all available components and their props
-
-- General
-  - ActionIcon
-  - ActionIconGroup
-  - Block
-  - Button
-  - Icon
-- Data Display
-  - Accordion
-  - Avatar
-  - Collapse
-  - Empty
-  - FileTypeIcon
-  - FluentEmoji
-  - GroupAvatar
-  - GuideCard
-  - Highlighter
-  - Hotkey
-  - Image
-  - List
-  - Markdown
-  - MaterialFileTypeIcon
-  - Mermaid
-  - Segmented
-  - Skeleton
-  - Snippet
-  - SortableList
-  - Tag
-  - Tooltip
-  - Video
-- Data Entry
-  - AutoComplete
-  - CodeEditor
-  - ColorSwatches
-  - CopyButton
-  - DatePicker
-  - DownloadButton
-  - EditableText
-  - EmojiPicker
-  - Form
-  - FormModal
-  - HotkeyInput
-  - ImageSelect
-  - Input
-  - SearchBar
-  - Select
-  - SliderWithInput
-  - ThemeSwitch
-- Feedback
-  - Alert
-  - Drawer
-  - Modal
-- Layout
-  - Center
-  - DraggablePanel
-  - Flexbox
-  - Footer
-  - Grid
-  - Header
-  - Layout
-  - MaskShadow
-  - ScrollShadow
-- Navigation
-  - Burger
-  - DraggableSideNav
-  - Dropdown
-  - Menu
-  - SideNav
-  - Tabs
-  - Toc
-- Theme
-  - ConfigProvider
-  - FontLoader
-  - ThemeProvider
-- Typography
-  - Text
-
-## Routing Architecture
-
-This project uses a **hybrid routing architecture**: Next.js App Router for static pages + React Router DOM for the main SPA.
-
-### Route Types
-
-```plaintext
-+------------------+--------------------------------+--------------------------------+
-|   Route Type     |          Use Case              |        Implementation          |
-+------------------+--------------------------------+--------------------------------+
-| Next.js App      | Auth pages (login, signup,     | page.tsx file convention       |
-| Router           | oauth, reset-password, etc.)   | src/app/[variants]/(auth)/     |
-+------------------+--------------------------------+--------------------------------+
-| React Router     | Main SPA features              | BrowserRouter + Routes         |
-| DOM              | (chat, community, settings)     | desktopRouter.config.tsx       |
-|                  |                                | mobileRouter.config.tsx        |
-+------------------+--------------------------------+--------------------------------+
-```
-
-### Key Files
-
-- Entry point: `src/app/[variants]/page.tsx` - Routes to Desktop or Mobile based on device
-- Desktop router: `src/app/[variants]/router/desktopRouter.config.tsx`
-- Mobile router: `src/app/[variants]/(mobile)/router/mobileRouter.config.tsx`
-- Router utilities: `src/utils/router.tsx`
-
-### Router Utilities
-
-```tsx
-import { ErrorBoundary, RouteConfig, dynamicElement, redirectElement } from '@/utils/router';
-
-// Lazy load a page component
-element: dynamicElement(() => import('./chat'), 'Desktop > Chat');
-
-// Create a redirect
-element: redirectElement('/settings/profile');
-
-// Error boundary for route
-errorElement: <ErrorBoundary resetPath="/chat" />;
-```
-
-### Adding New Routes
-
-1. Add route config to `desktopRouter.config.tsx` or `mobileRouter.config.tsx`
-2. Create page component in the corresponding directory under `(main)/`
-3. Use `dynamicElement()` for lazy loading
-
-### Navigation
-
-**Important**: For SPA pages (React Router DOM routes), use `Link` from `react-router-dom`, NOT from `next/link`.
-
-```tsx
-// ❌ Wrong - next/link in SPA pages
-import Link from 'next/link';
-<Link href="/">Home</Link>
-
-// ✅ Correct - react-router-dom Link in SPA pages
-import { Link } from 'react-router-dom';
-<Link to="/">Home</Link>
-```
-
-```tsx
-// In components - use react-router-dom hooks
-import { useNavigate, useParams } from 'react-router-dom';
-
-const navigate = useNavigate();
-navigate('/chat');
-
-// From stores - use global navigate
-import { useGlobalStore } from '@/store/global';
-
-const navigate = useGlobalStore.getState().navigate;
-navigate?.('/settings');
-```