feat(webui): Add UMD build format and CDN usage support

2026-04-28 19:52:02 +00:00 · 2026-01-22 15:47:56 +08:00 · 2026-01-22 15:47:56 +08:00 · 8d2d29a422
commit 8d2d29a422
parent 1f9311d3ca
13 changed files with 796 additions and 189 deletions
--- a/packages/webui/examples/cdn-usage-demo.html
+++ b/packages/webui/examples/cdn-usage-demo.html
@ -0,0 +1,142 @@
+<!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>