mirror of
https://github.com/QwenLM/qwen-code.git
synced 2026-04-28 11:41:04 +00:00
142 lines
4.2 KiB
HTML
142 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>@qwen-code/webui CDN Usage Example</title>
|
|
<!-- Load React and ReactDOM from CDN -->
|
|
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
|
|
<!-- Manually create the jsxRuntime object to satisfy the dependency -->
|
|
<script>
|
|
// Provide a minimal JSX runtime for builds that expect react/jsx-runtime globals.
|
|
const withKey = (props, key) =>
|
|
key == null ? props : Object.assign({}, props, { key });
|
|
const jsx = (type, props, key) => React.createElement(type, withKey(props, key));
|
|
const jsxRuntime = {
|
|
Fragment: React.Fragment,
|
|
jsx,
|
|
jsxs: jsx,
|
|
jsxDEV: jsx
|
|
};
|
|
|
|
window.ReactJSXRuntime = jsxRuntime;
|
|
window['react/jsx-runtime'] = jsxRuntime;
|
|
window['react/jsx-dev-runtime'] = jsxRuntime;
|
|
</script>
|
|
|
|
<!-- Load the webui library from CDN -->
|
|
<script src="https://unpkg.com/@qwen-code/webui@0.1.0-beta.2/dist/index.umd.js"></script>
|
|
|
|
<!-- Load the CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/@qwen-code/webui@0.1.0-beta.2/dist/styles.css">
|
|
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
color: #333;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.chat-container {
|
|
height: 500px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<h1>@qwen-code/webui CDN Usage Example</h1>
|
|
<h2>ChatViewer Component Demo</h2>
|
|
<div id="chat-root-no-babel" class="chat-container"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// Same sample messages
|
|
const sampleMessages = [
|
|
{
|
|
uuid: '1',
|
|
type: 'user',
|
|
timestamp: new Date().toISOString(),
|
|
message: {
|
|
role: 'user',
|
|
parts: [{ text: 'Hello, how can I use the ChatViewer component without Babel?' }]
|
|
}
|
|
},
|
|
{
|
|
uuid: '2',
|
|
type: 'assistant',
|
|
timestamp: new Date(Date.now() + 1000).toISOString(),
|
|
message: {
|
|
role: 'assistant',
|
|
parts: [{ text: 'You can use React.createElement directly, without needing Babel.' }]
|
|
}
|
|
}
|
|
];
|
|
|
|
// Get the ChatViewer and Platform components from the global object
|
|
const { ChatViewer, PlatformProvider } = QwenCodeWebUI;
|
|
|
|
// Define a minimal platform context for web usage
|
|
const platformContext = {
|
|
platform: 'web',
|
|
postMessage: (message) => {
|
|
// In a web context, you might want to handle messages differently
|
|
console.log('Posted message:', message);
|
|
},
|
|
onMessage: (handler) => {
|
|
// In a web context, you might listen for custom events
|
|
window.addEventListener('message', handler);
|
|
return () => window.removeEventListener('message', handler);
|
|
},
|
|
openFile: (path) => {
|
|
console.log('Opening file:', path);
|
|
},
|
|
getResourceUrl: (resource) => {
|
|
// Return URLs for platform-specific resources
|
|
return null; // Use default resources
|
|
},
|
|
features: {
|
|
canOpenFile: false,
|
|
canCopy: true
|
|
}
|
|
};
|
|
|
|
// Render the ChatViewer component without Babel
|
|
const rootElementNoBabel = document.getElementById('chat-root-no-babel');
|
|
|
|
// Create the ChatViewer element wrapped with PlatformProvider using React.createElement (no JSX)
|
|
const ChatAppNoBabel = React.createElement(PlatformProvider, { value: platformContext },
|
|
React.createElement(ChatViewer, {
|
|
messages: sampleMessages,
|
|
autoScroll: true,
|
|
theme: 'light'
|
|
})
|
|
);
|
|
|
|
ReactDOM.render(ChatAppNoBabel, rootElementNoBabel);
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|