@ant-design/agentic-ui 2.29.15 → 2.29.16

package/guidelines/design-tokens/colors.md

@@ -0,0 +1,51 @@
+# Color design tokens
+
+The project uses a comprehensive system of CSS variables for colors, following the pattern: `--color-{hue}-{role}-{state}`.
+
+## Naming pattern
+
+- **Hue**: `primary`, `gray`, `blue`, `red`, `green`, `gold`
+- **Role**: `bg-page`, `bg-card`, `control-fill`, `text`, `border`
+- **State** (optional): `hover`, `active`, `disabled`, `light`, `dark`
+
+## Common Tokens
+
+### Primary (Brand)
+Used for primary actions, active states, and brand elements.
+- `--color-primary-bg-page-light`
+- `--color-primary-control-fill-primary` (Primary button bg)
+- `--color-primary-text-default`
+- `--color-primary-border-light`
+
+### Gray (Neutral)
+Used for text, backgrounds, and borders.
+- `--color-gray-bg-page`
+- `--color-gray-bg-card-light`
+- `--color-gray-text-default` (Main text)
+- `--color-gray-text-secondary` (Secondary text)
+- `--color-gray-border-light`
+
+### Functional Colors
+- **Blue**: Info / Action (`--color-blue-text-default`)
+- **Red**: Error / Danger (`--color-red-text-default`, `--color-red-bg-tip`)
+- **Green**: Success (`--color-green-text-default`)
+
+## Usage Examples
+
+```css
+.my-card {
+  background: var(--color-gray-bg-card-light);
+  border: 1px solid var(--color-gray-border-light);
+  color: var(--color-gray-text-default);
+}
+
+.my-button {
+  background: var(--color-primary-control-fill-primary);
+  color: #fff;
+}
+```
+
+## Best Practices
+- Always use CSS variables instead of hex codes.
+- Use `text-default` for primary text and `text-secondary` for less important info.
+- Use `bg-card` for containers and `bg-page` for the main background.

package/guidelines/design-tokens/spacing.md

@@ -0,0 +1,29 @@
+# Spacing design tokens
+
+The spacing system is based on a 4px unit.
+
+## Tokens
+
+| Token | Value | Pixel |
+|-------|-------|-------|
+| `--padding-0-25x` | 0.25 unit | 1px |
+| `--padding-0-5x` | 0.5 unit | 2px |
+| `--padding-1x` | 1 unit | 4px |
+| `--padding-2x` | 2 units | 8px |
+| `--padding-3x` | 3 units | 12px |
+| `--padding-4x` | 4 units | 16px |
+| `--padding-5x` | 5 units | 20px |
+| `--padding-6x` | 6 units | 24px |
+| `--padding-8x` | 8 units | 32px |
+| `--padding-12x` | 12 units | 48px |
+
+## Usage
+
+Use these tokens for `padding`, `margin`, `gap`, and other spacing properties.
+
+```css
+.container {
+  padding: var(--padding-4x); /* 16px */
+  gap: var(--padding-2x); /* 8px */
+}
+```

package/guidelines/design-tokens/typography.md

@@ -0,0 +1,46 @@
+# Typography design tokens
+
+The project uses a comprehensive set of typography tokens that combine font-weight, font-size, and line-height.
+
+## Naming Pattern
+`--font-text-{category}-{variant}-{size}`
+
+- **Category**: `body`, `paragraph`, `h1`-`h6`, `code`, `number`
+- **Variant** (optional): `emphasized`
+- **Size**: `xs`, `sm`, `base`, `lg`, `xl`, ...
+
+## Usage
+
+```css
+.my-text {
+  font: var(--font-text-body-base);
+}
+
+.my-heading {
+  font: var(--font-text-h1-base);
+  color: var(--color-gray-text-default);
+}
+```
+
+## Available Tokens
+
+### Body
+Used for short text, UI labels.
+- `--font-text-body-sm`
+- `--font-text-body-base`
+- `--font-text-body-lg`
+- `--font-text-body-emphasized-base`
+
+### Paragraph
+Used for long-form text.
+- `--font-text-paragraph-base`
+- `--font-text-paragraph-lg`
+
+### Headings
+- `--font-text-h1-base`
+- `--font-text-h2-base`
+- ...
+- `--font-text-h6-base`
+
+### Code
+- `--font-text-code-base`

package/guidelines/overview-components.md

@@ -0,0 +1,30 @@
+## Components
+
+Always prefer components from `@ant-design/agentic-ui` if they are available. This library is built on top of Ant Design (`antd`), so standard Ant Design components can also be used when no specific agentic component exists.
+
+Here are the guidelines files for the core Agentic UI components:
+
+| Component | Overview | Guidelines file | Source Path |
+|----------|----------|----------|----------|
+| Bubble | Chat message bubbles (User/AI) | [bubble.md](components/bubble.md) | `src/Bubble/index.tsx` |
+| ChatLayout | Main layout for chat interfaces | [chat-layout.md](components/chat-layout.md) | `src/ChatLayout/index.tsx` |
+| Loading | Loading indicator and spinner | [loading.md](components/loading.md) | `src/Components/Loading/index.tsx` |
+| MarkdownEditor | Rich text editor for chat input | [markdown-editor.md](components/markdown-editor.md) | `src/MarkdownEditor/index.tsx` |
+| MarkdownInputField | Chat input field | [input.md](components/input.md) | `src/MarkdownInputField/MarkdownInputField.tsx` |
+| Robot | Robot avatar with states | [robot.md](components/robot.md) | `src/Components/Robot/index.tsx` |
+| ThoughtChainList | Visualization for reasoning steps | [thought-chain.md](components/thought-chain.md) | `src/ThoughtChainList/index.tsx` |
+| ToolUseBar | Display for tool usage/calls | [tool-use-bar.md](components/tool-use-bar.md) | `src/ToolUseBar/index.tsx` |
+| TaskList | List of tasks/steps | [task-list.md](components/task-list.md) | `src/TaskList/index.tsx` |
+| WelcomeMessage | Initial welcome screen | [welcome-message.md](components/welcome-message.md) | `src/WelcomeMessage/index.tsx` |
+| Workspace | Multi-tab workspace (Browser, File, Task) | [workspace.md](components/workspace.md) | `src/Workspace/index.tsx` |
+
+## General Component Usage and Best Practices
+
+### Styling
+- The project uses `@ant-design/cssinjs` and `antd` tokens.
+- Avoid inline styles. Use `createStyles` or `style.ts` files.
+
+### Common Patterns
+- **Bubbles**: Used for the main conversation flow.
+- **ThoughtChain**: Used to show the "thinking" process of the agent.
+- **Markdown**: Both input and output often involve Markdown.

package/guidelines/overview-icons.md

@@ -0,0 +1,15 @@
+## Icon Library
+
+This project primarily uses icons from `@ant-design/icons`.
+It also contains some custom animated icons in `src/Icons`.
+
+### Ant Design Icons
+Import icons from `@ant-design/icons`.
+Example:
+```typescript
+import { UserOutlined, RobotOutlined } from '@ant-design/icons';
+```
+
+### Custom Icons & Lotties
+Some specific animated icons (Lotties) are available for voice or loading states.
+Check `src/Icons` and `src/Components/icons` for special cases.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/agentic-ui",
-  "version": "2.29.15",
+  "version": "2.29.16",
   "description": "面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力",
   "repository": "git@github.com:ant-design/agentic-ui.git",
   "license": "MIT",
@@ -8,7 +8,8 @@
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "guidelines"
   ],
   "scripts": {
     "build": "father build",
@@ -33,6 +34,7 @@
     "test:e2e:debug": "playwright test --debug",
     "test:e2e:skip-server": "cross-env SKIP_WEBSERVER=1 playwright test",
     "test:e2e:ui": "playwright test --ui",
+    "bench:parsemd": "vitest --run tests/editor/parseMd.benchmark.test.ts",
     "tsc": "tsc --noEmit"
   },
   "lint-staged": {
@@ -126,6 +128,7 @@
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
+    "@mlc-ai/web-llm": "^0.2.80",
     "@playwright/test": "^1.57.0",
     "@swc/core": "^1.15.8",
     "@testing-library/jest-dom": "^6.9.1",