@qwen-code/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
- Multiple Build Formats: Supports ESM, CJS, and UMD formats for different environments
- CDN Usage: Can be loaded directly in browsers via CDN

Installation

``bash
npm install @qwen-code/webui
`

CDN Usage

You can also use this library directly in the browser via CDN:

$3

`html




crossorigin
src="https://unpkg.com/react@18/umd/react.production.min.js"
>
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
>


rel="stylesheet"
href="https://unpkg.com/@qwen-code/webui@0.1.0-beta.2/dist/styles.css"
/>







`

$3

`html




crossorigin
src="https://unpkg.com/react@18/umd/react.production.min.js"
>
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
>


rel="stylesheet"
href="https://unpkg.com/@qwen-code/webui@0.1.0-beta.2/dist/styles.css"
/>







`

For a complete working example, see examples/cdn-usage-demo.html.

Quick Start

`tsx
import { Button, Input, Tooltip } from '@qwen-code/webui';
import { PlatformProvider } from '@qwen-code/webui/context';

function App() {
return (


Click me


);
}
`

Components

$3

#### Button

`tsx
import { Button } from '@qwen-code/webui';


Submit
;
`

Props:

- variant: 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline'
- size: 'sm' | 'md' | 'lg'
- loading: boolean
- leftIcon: ReactNode
- rightIcon: ReactNode
- fullWidth: boolean

#### Input

`tsx
import { Input } from '@qwen-code/webui';

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 '@qwen-code/webui';


Hover me
;
`

$3

`tsx
import { FileIcon, FolderIcon, CheckIcon } from '@qwen-code/webui/icons';

;
`

Available icon categories:

- FileIcons: FileIcon, FolderIcon, SaveDocumentIcon
- StatusIcons: CheckIcon, ErrorIcon, WarningIcon, LoadingIcon
- NavigationIcons: ArrowLeftIcon, ArrowRightIcon, ChevronIcon
- EditIcons: EditIcon, DeleteIcon, CopyIcon
- SpecialIcons: SendIcon, StopIcon, CloseIcon

$3

- Container: Main layout wrapper
- Header: Application header
- Footer: Application footer
- Sidebar: Side navigation
- Main: Main content area

$3

- 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 '@qwen-code/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 (



);
}

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('@qwen-code/webui/tailwind.preset.cjs')],
// your customizations
};
`

Development

$3

`bash
cd packages/webui
npm run storybook
`

$3

`bash
npm run build
`

$3

`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