@agentscope-ai/chat 1.1.19 → 1.1.20

package/README.md

@@ -17,7 +17,40 @@ A free, open-source React chat framework based on **Alibaba Cloud Spark Design**
 
 ## 🚀 Quick Start
 
-### Installation
+### Method 1: Using CLI Tool (Recommended)
+
+The quickest way is to use our CLI tool:
+
+```bash
+# Start with default configuration (port 3000)
+npx agentscope-runtime-webui
+
+# Specify port
+npx agentscope-runtime-webui --port 8080
+
+# Specify backend API URL
+npx agentscope-runtime-webui --url http://api.example.com
+
+# Specify authentication token
+npx agentscope-runtime-webui --token your-auth-token
+
+# Combine options
+npx agentscope-runtime-webui -p 8080 -u http://api.example.com -t your-token
+```
+
+**CLI Options:**
+
+| Option | Short | Description | Default |
+|--------|-------|-------------|---------|
+| `--port` | `-p` | Specify server port | `3000` |
+| `--url` | `-u` | Specify backend API URL | - |
+| `--token` | `-t` | Specify authentication token | - |
+
+For more CLI usage details, see [CLI Documentation](./bin/README.md).
+
+### Method 2: Integrate into Project
+
+#### Installation
 
 ```bash
 # Install dependencies
@@ -32,7 +65,7 @@ npm install @agentscope-ai/chat --save
 > tnpm install @ali/agentscope-ai-chat @ali/agentscope-ai-design --save
 > ```
 
-### Basic Usage
+#### Basic Usage
 
 ```tsx
 import { ConfigProvider, carbonTheme } from '@agentscope-ai/design';

package/README.zh-CN.md

@@ -17,7 +17,40 @@
 
 ## 🚀 快速开始
 
-### 安装
+### 方式一：使用 CLI 工具（推荐）
+
+最快速的方式是使用我们提供的 CLI 工具：
+
+```bash
+# 使用默认配置启动（端口 3000）
+npx agentscope-runtime-webui
+
+# 指定端口
+npx agentscope-runtime-webui --port 8080
+
+# 指定后端 API 地址
+npx agentscope-runtime-webui --url http://api.example.com
+
+# 指定认证 token
+npx agentscope-runtime-webui --token your-auth-token
+
+# 组合使用
+npx agentscope-runtime-webui -p 8080 -u http://api.example.com -t your-token
+```
+
+**CLI 参数说明：**
+
+| 参数 | 缩写 | 说明 | 默认值 |
+|------|------|------|--------|
+| `--port` | `-p` | 指定服务端口 | `3000` |
+| `--url` | `-u` | 指定后端 API 地址 | 无 |
+| `--token` | `-t` | 指定认证 token | 无 |
+
+更多 CLI 使用说明请查看 [CLI 文档](./bin/README.md)。
+
+### 方式二：集成到项目
+
+#### 安装
 
 ```bash
 # 安装依赖
@@ -32,7 +65,7 @@ npm install @agentscope-ai/chat --save
 > tnpm install @ali/agentscope-ai-chat @ali/agentscope-ai-design --save
 > ```
 
-### 基础使用
+#### 基础使用
 
 ```tsx
 import { ConfigProvider, carbonTheme } from '@agentscope-ai/design';

package/bin/cli.js

@@ -0,0 +1,100 @@
+#!/usr/bin/env node
+
+const { program } = require('commander');
+const { createServer } = require('vite');
+const path = require('path');
+const fs = require('fs');
+
+program
+  .name('agentscope-runtime-webui')
+  .description('启动 AgentScope Runtime WebUI 服务')
+  .option('-p, --port <port>', '指定服务端口', '3000')
+  .option('-u, --url <url>', '指定后端 API 地址')
+  .option('-t, --token <token>', '指定认证 token')
+  .parse(process.argv);
+
+const options = program.opts();
+
+async function startServer() {
+  console.log('🚀 正在启动 AgentScope Runtime WebUI...');
+  console.log(`📦 端口: ${options.port}`);
+  if (options.url) {
+    console.log(`🔗 API 地址: ${options.url}`);
+  }
+  if (options.token) {
+    console.log(`🔑 Token: ${options.token.substring(0, 10)}...`);
+  }
+
+  const templatePath = path.join(__dirname, 'template.html');
+  let htmlContent = fs.readFileSync(templatePath, 'utf-8');
+
+  try {
+    // 找到项目根目录（包含 node_modules 的目录）
+    const projectRoot = path.resolve(__dirname, '..');
+    
+    const server = await createServer({
+      configFile: false,
+      root: projectRoot,
+      server: {
+        port: parseInt(options.port),
+        host: '127.0.0.1',
+      },
+      resolve: {
+        dedupe: ['react', 'react-dom'],
+        alias: {
+          '@ali/agentscope-ai-chat': path.resolve(projectRoot, 'components/index.ts'),
+          '@agentscope-ai/chat': path.resolve(projectRoot, 'components/index.ts'),
+          '@agentscope-ai/design': '@ali/agentscope-ai-design'
+        }
+      },
+      plugins: [
+        {
+          name: 'agentscope-runtime-webui',
+          configureServer(server) {
+            server.middlewares.use((req, res, next) => {
+              if (req.url === '/' || req.url === '/index.html') {
+                // 注入配置到 HTML
+                const configScript = `
+    <script>
+      window.__AGENTSCOPE_CONFIG__ = {
+        url: '${options.url || ''}',
+        token: '${options.token || ''}',
+      };
+    </script>`;
+                const html = htmlContent.replace('</head>', `${configScript}\n  </head>`);
+                res.setHeader('Content-Type', 'text/html');
+                res.end(html);
+              } else {
+                next();
+              }
+            });
+          },
+        },
+      ],
+    });
+
+    await server.listen();
+
+    console.log('\n✅ AgentScope Runtime WebUI 已启动!');
+    console.log(`\n🌐 访问地址: http://localhost:${options.port}\n`);
+    
+    process.on('SIGINT', () => {
+      console.log('\n\n👋 正在关闭服务器...');
+      server.close();
+      process.exit(0);
+    });
+
+    process.on('SIGTERM', () => {
+      console.log('\n\n👋 正在关闭服务器...');
+      server.close();
+      process.exit(0);
+    });
+
+  } catch (error) {
+    console.error('❌ 启动失败:', error);
+    process.exit(1);
+  }
+}
+
+startServer();
+

package/bin/client.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Chat from '../components/AgentScopeRuntimeWebUI/demo';
+
+
+// 从 window 对象获取配置
+const config = window.__AGENTSCOPE_CONFIG__ || {};
+
+const App = () => {
+  return React.createElement(Chat);
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  React.createElement(App)
+);
+

package/bin/template.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AgentScope Runtime WebUI</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html, body {
+        height: 100%;
+        width: 100%;
+      }
+      #root {
+        height: 100vh;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/bin/client.js"></script>
+  </body>
+</html>
+

package/lib/AgentScopeRuntimeWebUI/lib/Chat/Input/index.js

@@ -70,7 +70,7 @@ export default function Input(props) {
             fileList: (getFileList === null || getFileList === void 0 ? void 0 : getFileList()) || []
           });
           setContent('');
-          setFileList([]);
+          setFileList && setFileList([]);
         case 8:
         case "end":
           return _context.stop();

package/lib/AgentScopeRuntimeWebUI/lib/ChatAnywhere/ComposedProvider.js

@@ -10,7 +10,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { CustomCardsProvider } from "../../../Provider";
+import { CustomCardsProvider } from "../../..";
 import { ChatAnywhereInputContextProvider } from "../Context/ChatAnywhereInputContext";
 import { ChatAnywhereOptionsContextProvider } from "../Context/ChatAnywhereOptionsContext";
 import { ChatAnywhereSessionsContextProvider } from "../Context/ChatAnywhereSessionsContext";

package/lib/Bubble/Cards.js

@@ -8,10 +8,13 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useMemo } from 'react';
-import { useCustomCardsContext } from "./..";
+import { useChatAnywhere, useCustomCardsContext } from "./..";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Card = /*#__PURE__*/React.memo(function (props) {
   var cardConfig = useCustomCardsContext();
+  var onInput = useChatAnywhere(function (v) {
+    return v.onInput;
+  });
   var Component = useMemo(function () {
     if (props.component) return props.component;
     var cardConfigMap = cardConfig;
@@ -22,7 +25,11 @@ var Card = /*#__PURE__*/React.memo(function (props) {
   if (typeof Component === 'function') {
     var component = props.component,
       rest = _objectWithoutProperties(props, _excluded);
-    return /*#__PURE__*/_jsx(Component, _objectSpread({}, rest));
+    return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
+      context: {
+        onInput: onInput
+      }
+    }));
   } else {
     return Component;
   }

package/lib/Markdown/Markdown/index.js

@@ -35,6 +35,24 @@ var Null = function Null() {
 var EMPTY_DOMPURIFY_CONFIG = {
   ALLOWED_TAGS: []
 };
+
+/**
+ * 检测浏览器是否支持正则表达式的 lookbehind assertions
+ * iOS Safari < 16.4 不支持此特性
+ */
+function supportsLookbehindAssertions() {
+  try {
+    // 尝试创建包含正向后行断言的正则表达式
+    new RegExp('(?<=a)b');
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+var isSupportsLookbehindAssertions = supportsLookbehindAssertions();
+console.log({
+  isSupportsLookbehindAssertions: isSupportsLookbehindAssertions
+});
 export default /*#__PURE__*/memo(function (props) {
   var baseFontSize = props.baseFontSize || 14;
   var baseLineHeight = props.baseLineHeight || 1.7;
@@ -68,7 +86,7 @@ export default /*#__PURE__*/memo(function (props) {
     citationsData = _useCitationsData.citationsData,
     citationsDataCount = _useCitationsData.citationsDataCount,
     CitationComponent = _useCitationsData.CitationComponent;
-  if (props.raw) return /*#__PURE__*/_jsx("div", {
+  if (props.raw || !isSupportsLookbehindAssertions) return /*#__PURE__*/_jsx("div", {
     className: prefixCls,
     style: {
       fontSize: baseFontSize,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentscope-ai/chat",
-  "version": "1.1.19",
+  "version": "1.1.20",
   "description": "a free and open-source chat framework for building excellent LLM-powered chat experiences",
   "license": "Apache-2.0",
   "sideEffects": [
@@ -10,8 +10,12 @@
   ],
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
+  "bin": {
+    "agentscope-runtime-webui": "./bin/cli.js"
+  },
   "files": [
-    "lib"
+    "lib",
+    "bin"
   ],
   "scripts": {
     "build": "npm run src:build && npm run docs:build",
@@ -54,6 +58,8 @@
   },
   "dependencies": {
     "@agentscope-ai/icons": "^1.0.32",
+    "commander": "^12.1.0",
+    "vite": "^5.4.11",
     "@agentscope-ai/icons-override-antd": "^6.0.0",
     "@agentscope-ai/icons-svg-override-antd": "^4.4.2",
     "@ant-design/cssinjs-utils": "^1.1.3",