feat(webui): migrate icons, Tooltip, WaitingMessage from vscode-ide-companion

- Move icon components (FileIcons, EditIcons, NavigationIcons, StatusIcons, SpecialIcons, StopIcon) from vscode-ide-companion to webui package - Migrate Tooltip component with CSS variable theming support - Migrate WaitingMessage and InterruptedMessage components - Enhance Button component with forwardRef, new variants (ghost, outline), loading state, and icon support - Enhance Input component with forwardRef, error state, label, and helper text - Update vscode-ide-companion to import components from @qwen-code/webui - Remove replaced local components from vscode-ide-companion - Add skipLibCheck to vscode-ide-companion tsconfig for type compatibility
2026-04-28 19:52:02 +00:00 · 2026-01-15 19:53:19 +08:00 · 2026-01-15 19:53:19 +08:00 · 71570540cc
commit 71570540cc
parent af76450dee
45 changed files with 1049 additions and 308 deletions
--- a/packages/webui/README.md
+++ b/packages/webui/README.md
@ -0,0 +1,210 @@
+# @anthropic/webui
+
+A shared React component library for Qwen Code applications, providing cross-platform UI components with consistent styling and behavior.
+
+## Features
+
+- **Cross-platform support**: Components work seamlessly across VS Code extension, web, and other platforms
+- **Platform Context**: Abstraction layer for platform-specific capabilities
+- **Tailwind CSS**: Shared styling preset for consistent design
+- **TypeScript**: Full type definitions for all components
+- **Storybook**: Interactive component documentation and development
+
+## Installation
+
+```bash
+npm install @anthropic/webui
+```
+
+## Quick Start
+
+```tsx
+import { Button, Input, Tooltip } from '@anthropic/webui';
+import { PlatformProvider } from '@anthropic/webui/context';
+
+function App() {
+  return (
+    <PlatformProvider value={platformContext}>
+      <Button variant="primary" onClick={handleClick}>
+        Click me
+      </Button>
+    </PlatformProvider>
+  );
+}
+```
+
+## Components
+
+### UI Components
+
+#### Button
+
+```tsx
+import { Button } from '@anthropic/webui';
+
+<Button variant="primary" size="md" loading={false}>
+  Submit
+</Button>;
+```
+
+**Props:**
+
+- `variant`: 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline'
+- `size`: 'sm' | 'md' | 'lg'
+- `loading`: boolean
+- `leftIcon`: ReactNode
+- `rightIcon`: ReactNode
+- `fullWidth`: boolean
+
+#### Input
+
+```tsx
+import { Input } from '@anthropic/webui';
+
+<Input
+  label="Email"
+  placeholder="Enter email"
+  error={hasError}
+  errorMessage="Invalid email"
+/>;
+```
+
+**Props:**
+
+- `size`: 'sm' | 'md' | 'lg'
+- `error`: boolean
+- `errorMessage`: string
+- `label`: string
+- `helperText`: string
+- `leftElement`: ReactNode
+- `rightElement`: ReactNode
+
+#### Tooltip
+
+```tsx
+import { Tooltip } from '@anthropic/webui';
+
+<Tooltip content="Helpful tip">
+  <span>Hover me</span>
+</Tooltip>;
+```
+
+### Icons
+
+```tsx
+import { FileIcon, FolderIcon, CheckIcon } from '@anthropic/webui/icons';
+
+<FileIcon size={16} className="text-gray-500" />;
+```
+
+Available icon categories:
+
+- **FileIcons**: FileIcon, FolderIcon, SaveDocumentIcon
+- **StatusIcons**: CheckIcon, ErrorIcon, WarningIcon, LoadingIcon
+- **NavigationIcons**: ArrowLeftIcon, ArrowRightIcon, ChevronIcon
+- **EditIcons**: EditIcon, DeleteIcon, CopyIcon
+- **SpecialIcons**: SendIcon, StopIcon, CloseIcon
+
+### Layout Components
+
+- `Container`: Main layout wrapper
+- `Header`: Application header
+- `Footer`: Application footer
+- `Sidebar`: Side navigation
+- `Main`: Main content area
+
+### Message Components
+
+- `Message`: Chat message display
+- `MessageList`: List of messages
+- `MessageInput`: Message input field
+- `WaitingMessage`: Loading/waiting state
+- `InterruptedMessage`: Interrupted state display
+
+## Platform Context
+
+The Platform Context provides an abstraction layer for platform-specific capabilities:
+
+```tsx
+import { PlatformProvider, usePlatform } from '@anthropic/webui/context';
+
+const platformContext = {
+  postMessage: (message) => vscode.postMessage(message),
+  onMessage: (handler) => {
+    window.addEventListener('message', handler);
+    return () => window.removeEventListener('message', handler);
+  },
+  openFile: (path) => {
+    /* platform-specific */
+  },
+  platform: 'vscode',
+};
+
+function App() {
+  return (
+    <PlatformProvider value={platformContext}>
+      <YourApp />
+    </PlatformProvider>
+  );
+}
+
+function Component() {
+  const { postMessage, platform } = usePlatform();
+  // Use platform capabilities
+}
+```
+
+## Tailwind Preset
+
+Use the shared Tailwind preset for consistent styling:
+
+```js
+// tailwind.config.js
+module.exports = {
+  presets: [require('@anthropic/webui/tailwind.preset.cjs')],
+  // your customizations
+};
+```
+
+## Development
+
+### Running Storybook
+
+```bash
+cd packages/webui
+npm run storybook
+```
+
+### Building
+
+```bash
+npm run build
+```
+
+### Type Checking
+
+```bash
+npm run typecheck
+```
+
+## Project Structure
+
+```
+packages/webui/
+├── src/
+│   ├── components/
+│   │   ├── icons/          # Icon components
+│   │   ├── layout/         # Layout components
+│   │   ├── messages/       # Message components
+│   │   └── ui/             # UI primitives
+│   ├── context/            # Platform context
+│   ├── hooks/              # Custom hooks
+│   └── types/              # Type definitions
+├── .storybook/             # Storybook config
+├── tailwind.preset.cjs     # Shared Tailwind preset
+└── vite.config.ts          # Build configuration
+```
+
+## License
+
+Apache-2.0