添加小窗模式

extension.json

@@ -8,7 +8,10 @@
     "license-name": "GPL-2.0-or-later",
     "type": "api",
     "requires": {
-        "MediaWiki": ">= 1.39.0"
+        "MediaWiki": ">= 1.39.0",
+        "extensions": {
+            "IsekaiWidgets": ">= 1.0.4"
+        }
     },
     "MessagesDirs": {
         "IsekaiAIToolbox": [
@@ -79,15 +82,18 @@
                 "ext.isekai.ai-toolbox.launcher.less"
             ],
             "dependencies": [
-                "ext.isekai.baseWidgets"
+                "ext.isekai.baseWidgets",
+                "ext.isekai.jsframe"
             ],
             "targets": [
                 "desktop",
                 "mobile"
             ],
             "messages": [
+                "isekai-ai-toolbox-title",
                 "isekai-ai-toolbox-menubutton",
-                "isekai-ai-toolbox-loading"
+                "isekai-ai-toolbox-loading",
+                "isekai-ai-toolbox-minimized"
             ]
         }
     },

i18n/zh-hans.json

@@ -2,6 +2,7 @@
     "isekai-ai-toolbox": "异世界百科 AI工具箱",
     "isekai-ai-toolbox-desc": "使用AI工具箱为Wiki站点添加更多智能服务。",
 
+    "isekai-ai-toolbox-title": "AI工具箱",
     "isekai-ai-toolbox-menubutton": "启动AI工具箱",
     "isekai-ai-toolbox-loading": "正在加载AI工具箱",
 
@@ -9,6 +10,7 @@
     "special-isekai-ai-toolbox": "AI工具箱",
     "isekai-ai-toolbox-enter-toolbox": "进入AI工具箱",
     "isekai-ai-toolbox-label-continue-curaccount": "你要以此帐号继续吗？",
+    "isekai-ai-toolbox-minimized": "AI工具箱已最小化，再次点击“AI”键以打开",
 
 	"action-chatcomplete": "使用 Chat Complete 功能",
 	"right-chatcomplete": "使用 Chat Complete 功能",

modules/ext.isekai.ai-toolbox.launcher.js

@@ -1,5 +1,13 @@
 var authToken = '';
 var tokenRefreshTime = 0;
+var jsFrame = new JSFrame();
+var frame = null;
+
+try {
+    jsFrame.windowManager.parentElement.style.zIndex = 1000; // 设置jsFrame的z-index
+} catch (e) {
+    console.error('Cannot set z-index for jsFrame', e);
+}
 
 function createToken() {
     var api = new mw.Api();
@@ -9,29 +17,112 @@ function createToken() {
     });
 }
 
+function onFrameOpened() {
+    $('body').addClass('isekai-aitoolbox-visible');
+}
+
+function onFrameClosed() {
+    $('body').removeClass('isekai-aitoolbox-visible');
+}
+
 function openAIToolboxPage(token) {
     var urlTemplate = mw.config.get('wgIsekaiAIToolboxFrontendUrl');
     var title = mw.config.get('wgTitle');
     var url = urlTemplate.replace(/\{title\}/g, encodeURIComponent(title)).replace(/\{token\}/g, token);
-    window.open(url, '_blank');
-}
 
-function launchAIToolbox() {
-    var currentTime = new Date().getTime();
-    if (currentTime - tokenRefreshTime > 3600000) {
-        mw.notify(mw.msg('isekai-ai-toolbox-loading'), {
-            id: "loading-ai-toolbox-notify"
+    if ($(window).width() < 768) { // 手机端，直接打开新窗口
+        window.open(url, '_blank');
+    } else { // PC端，使用jsFrame打开
+        var frameWidth = 450;
+        var frameHeight = $(window).height() - 100;
+        var frameRight = 40;
+        var frameLeft = $(window).width() - frameWidth - frameRight;
+
+        frame = jsFrame.create({
+            name: `isekai-ai-toolbox`,
+            title: mw.msg('isekai-ai-toolbox-title'),
+            left: frameLeft, top: 40, width: frameWidth, height: frameHeight, minWidth: 350, minHeight: 550,
+            appearanceName: 'material',
+            appearanceParam: {
+                border: {
+                    shadow: '2px 2px 10px rgba(0, 0, 0, 0.5)',
+                    width: 0,
+                    radius: 6,
+                },
+                titleBar: {
+                    color: 'white',
+                    background: '#333333',
+                    leftMargin: 40,
+                    buttonsOnLeft: [
+                        {
+                            fa: 'fas fa-external-link-alt',
+                            name: 'openInNewTab',
+                            visible: true,
+                        },
+                    ],
+                }
+            },
+            style: {
+                backgroundColor: 'rgba(249,250,251,0.95)',
+                overflow: 'auto'
+            },
+            url: url,
+        }).show();
+
+        onFrameOpened();
+
+        frame.setControl({
+            maximizeButton: 'maximizeButton',
+            demaximizeButton: 'restoreButton',
+            hideButton: 'closeButton',
+            animation: true,
+            animationDuration: 150,
         });
-        createToken().done(function(data) {
-            if (data.aitoolbox && data.aitoolbox.createtoken) {
-                authToken = data.aitoolbox.createtoken.token;
-                tokenRefreshTime = new Date().getTime();
-                openAIToolboxPage(authToken);
-                $('#loading-ai-toolbox-notify').trigger('click');
-            }
+
+        frame.control.on('hid', (frame, info) => {
+            frame.closeFrame();
+            frame = null;
+            onFrameClosed();
+        });
+
+        frame.on('minimizeButton', 'click', () => {
+            frame.hide();
+            onFrameClosed();
+
+            mw.notify(mw.msg('isekai-ai-toolbox-minimized'));
         });
+
+        frame.on('openInNewTab', 'click', () => {
+            window.open(url, '_blank');
+            frame.closeFrame();
+            frame = null;
+            onFrameClosed();
+        });
+    }
+}
+
+function launchAIToolbox() {
+    if (frame) {
+        // 恢复已经打开的窗口
+        frame.show();
+        onFrameOpened();
     } else {
-        openAIToolboxPage(authToken);
+        var currentTime = new Date().getTime();
+        if (currentTime - tokenRefreshTime > 3600000) {
+            mw.notify(mw.msg('isekai-ai-toolbox-loading'), {
+                id: "loading-ai-toolbox-notify"
+            });
+            createToken().done(function(data) {
+                if (data.aitoolbox && data.aitoolbox.createtoken) {
+                    authToken = data.aitoolbox.createtoken.token;
+                    tokenRefreshTime = new Date().getTime();
+                    openAIToolboxPage(authToken);
+                    $('#loading-ai-toolbox-notify').trigger('click');
+                }
+            });
+        } else {
+            openAIToolboxPage(authToken);
+        }
     }
 }
 

modules/ext.isekai.ai-toolbox.launcher.less

@@ -1,3 +1,11 @@
 .oo-ui-icon-isekai-aitoolbox-iconAI {
     background-image: /* @embed */ url(isekai-aitoolbox-ai.svg);
+}
+
+.skin-citizen {
+    &.isekai-aitoolbox-visible {
+        #content {
+            padding-right: 400px;
+        }
+    }
 }