如何重新定义GCP - Vertex AI - Freeform的键盘行为？

要实现这个需求，你可以通过浏览器用户脚本来覆盖默认的键盘事件行为，具体步骤如下：

• 首先安装一款用户脚本管理器（比如Tampermonkey），这类工具能让你在指定网页上运行自定义JavaScript代码。
• 创建一个新的用户脚本，粘贴以下代码：

// ==UserScript==
// @name         Vertex AI Freeform: Enter换行，Ctrl+Enter发送
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  重新定义Vertex AI Freeform的键盘交互：Enter换行，Ctrl+Enter发送
// @author       You
// @match        https://console.cloud.google.com/vertex-ai/*/freeform*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 监听输入框的键盘事件
    document.addEventListener('keydown', function(event) {
        // 定位到Freeform的输入框，选择器可能随GCP界面更新变化，需要验证
        const inputBox = document.querySelector('div[contenteditable="true"][role="textbox"]');
        if (!inputBox || !inputBox.contains(document.activeElement)) return;

        if (event.key === 'Enter') {
            // 按下Ctrl+Enter时触发发送
            if (event.ctrlKey) {
                event.preventDefault();
                // 定位发送按钮并点击
                const sendBtn = document.querySelector('button[aria-label="Send prompt"]');
                if (sendBtn) sendBtn.click();
            } else {
                // 仅按下Enter时执行换行，阻止默认的发送行为
                event.preventDefault();
                // 插入换行符
                document.execCommand('insertHTML', false, '<br><br>');
                // 将光标移到换行后的位置
                const range = document.createRange();
                const selection = window.getSelection();
                range.setStartAfter(inputBox.lastChild);
                range.collapse(true);
                selection.removeAllRanges();
                selection.addRange(range);
            }
        }
    });
})();

• 保存脚本后，刷新GCP Vertex AI Freeform页面，键盘交互逻辑就会生效：
  • 按下Enter：仅在输入框内换行
  • 按下Ctrl+Enter：提交当前输入的提示内容

注意事项 #

• 输入框和发送按钮的CSS选择器可能会因为GCP界面的更新而失效，如果脚本不工作，需要打开浏览器开发者工具重新定位元素的选择器并替换代码中的对应部分。
• 确保用户脚本管理器已启用该脚本，并且匹配的URL与你访问的Vertex AI Freeform页面地址一致。

内容的提问来源于stack exchange，提问作者Elad Ben-David