qwen-code/packages/webui/README.md

@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

npm install @anthropic/webui

Quick Start

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

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

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

import { Tooltip } from '@anthropic/webui';

<Tooltip content="Helpful tip">
  <span>Hover me</span>
</Tooltip>;

Icons

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:

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:

// tailwind.config.js
module.exports = {
  presets: [require('@anthropic/webui/tailwind.preset.cjs')],
  // your customizations
};

Development

Running Storybook

cd packages/webui
npm run storybook

Building

npm run build

Type Checking

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