Shared UI components for Qwen Code packages
npm install @qwen-code/webuiA shared React component library for Qwen Code applications, providing cross-platform UI components with consistent styling and behavior.
- 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
``bash`
npm install @qwen-code/webui
You can also use this library directly in the browser via CDN:
`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"
/>
`
`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.
`tsx
import { Button, Input, Tooltip } from '@qwen-code/webui';
import { PlatformProvider } from '@qwen-code/webui/context';
function App() {
return (
);
}
`
#### Button
`tsx
import { Button } from '@qwen-code/webui';
;
`
Props:
- variant: 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline'size
- : 'sm' | 'md' | 'lg'loading
- : booleanleftIcon
- : ReactNoderightIcon
- : ReactNodefullWidth
- : 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
- : booleanerrorMessage
- : stringlabel
- : stringhelperText
- : stringleftElement
- : ReactNoderightElement
- : ReactNode
#### Tooltip
`tsx
import { Tooltip } from '@qwen-code/webui';
Hover me
`
`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
- Container: Main layout wrapperHeader
- : Application headerFooter
- : Application footerSidebar
- : Side navigationMain
- : Main content area
- Message: Chat message displayMessageList
- : List of messagesMessageInput
- : Message input fieldWaitingMessage
- : Loading/waiting stateInterruptedMessage
- : Interrupted state display
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
}
`
Use the shared Tailwind preset for consistent styling:
`js`
// tailwind.config.js
module.exports = {
presets: [require('@qwen-code/webui/tailwind.preset.cjs')],
// your customizations
};
`bash`
cd packages/webui
npm run storybook
`bash`
npm run build
`bash`
npm run typecheck
```
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
Apache-2.0