@zhin.js/adapter-sandbox 6.0.1 → 6.0.3

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @zhin.js/adapter-process
 
+## 6.0.3
+
+### Patch Changes
+
+- @zhin.js/core@1.4.2
+- @zhin.js/client@2.1.2
+
+## 6.0.2
+
+### Patch Changes
+
+- d5cd4aa: Publish Plugin Runtime entry points and convention modules as JavaScript so
+  installed npm plugins load on Node without TypeScript stripping. Workspace
+  development continues to prefer TypeScript sources for local HMR.
+
+  Remove the unconsumed legacy game hub APIs from game-kit; game navigation and
+  records now use ordinary convention commands owned by the game hub plugin.
+
+  - @zhin.js/page@1.0.4
+  - @zhin.js/adapter@1.1.2
+  - @zhin.js/core@1.4.2
+
 ## 6.0.1
 
 ### Patch Changes

package/adapters/sandbox.js

@@ -0,0 +1,26 @@
+// Generated by build-plugin-runtime-entries.mjs. Do not edit.
+/**
+ * Convention entry: discover `adapters/sandbox.ts` → defineAdapter.
+ */
+import { defineAdapter } from '@zhin.js/adapter';
+import { messageGatewayToken } from '@zhin.js/core/runtime';
+import { httpHostToken } from '@zhin.js/host-http';
+import { SandboxWsEndpoint } from "../lib/endpoint.js";
+import { resolveSandboxEndpoint, } from "../lib/protocol.js";
+export { SandboxWsEndpoint } from "../lib/endpoint.js";
+export default defineAdapter({
+    capabilities: ['inbound', 'outbound'],
+    // Console UI 直接渲染 base64 内联媒体；交互段由 Console 原生承载。
+    segments: {
+        outboundMedia: ['base64'],
+        interactive: 'native',
+    },
+    create(context) {
+        return new SandboxWsEndpoint({
+            id: context.id,
+            gateway: context.use(messageGatewayToken),
+            http: context.use(httpHostToken),
+            defaults: resolveSandboxEndpoint(context.config),
+        });
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhin.js/adapter-sandbox",
-  "version": "6.0.1",
+  "version": "6.0.3",
   "description": "Zhin.js Sandbox adapter for Plugin Runtime (WebSocket /sandbox)",
   "type": "module",
   "main": "./lib/index.js",
@@ -15,7 +15,7 @@
   "files": [
     "adapters",
     "pages",
-    "plugin.ts",
+    "plugin.js",
     "schema.json",
     "src",
     "lib",
@@ -48,13 +48,13 @@
   "dependencies": {
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",
-    "@zhin.js/adapter": "1.1.1",
-    "@zhin.js/client": "2.1.1",
+    "@zhin.js/adapter": "1.1.2",
+    "@zhin.js/client": "2.1.2",
     "@zhin.js/console-contract": "1.0.0",
-    "@zhin.js/core": "1.4.1",
+    "@zhin.js/core": "1.4.2",
     "@zhin.js/host-http": "1.0.3",
     "@zhin.js/logger": "1.0.75",
-    "@zhin.js/page": "1.0.3",
+    "@zhin.js/page": "1.0.4",
     "@zhin.js/plugin-runtime": "1.1.1"
   },
   "devDependencies": {
@@ -63,17 +63,17 @@
     "typescript": "^6.0.3",
     "vitest": "^4.1.10",
     "ws": "^8.21.0",
-    "@zhin.js/pagemanager": "2.0.6",
-    "@zhin.js/runtime": "1.0.3"
+    "@zhin.js/pagemanager": "2.0.8",
+    "@zhin.js/runtime": "1.0.4"
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "@zhin.js/adapter": "1.1.1",
-    "@zhin.js/client": "2.1.1",
+    "@zhin.js/adapter": "1.1.2",
+    "@zhin.js/client": "2.1.2",
     "@zhin.js/console-contract": "1.0.0",
-    "@zhin.js/core": "1.4.1",
+    "@zhin.js/core": "1.4.2",
     "@zhin.js/host-http": "1.0.3",
-    "@zhin.js/page": "1.0.3",
+    "@zhin.js/page": "1.0.4",
     "@zhin.js/plugin-runtime": "1.1.1"
   },
   "peerDependenciesMeta": {
@@ -94,7 +94,7 @@
   "zhin": {
     "protocol": 1,
     "type": "plugin",
-    "entry": "./plugin.ts",
+    "entry": "./plugin.js",
     "engine": "^1.0.0",
     "runtime": "trusted",
     "features": [

package/pages/RichTextEditor.js

@@ -0,0 +1,351 @@
+// Generated by build-plugin-runtime-entries.mjs. Do not edit.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
+const RichTextEditor = forwardRef(({ placeholder = '输入消息...', onSend, onChange, onAtTrigger, minHeight = '44px', maxHeight = '200px' }, ref) => {
+    const editorRef = useRef(null);
+    const atTriggerTextRef = useRef(null);
+    // 解析编辑器内容为文本和消息段
+    const parseEditorContent = () => {
+        if (!editorRef.current)
+            return { text: '', segments: [] };
+        let text = '';
+        const segments = [];
+        const nodes = Array.from(editorRef.current.childNodes);
+        for (const node of nodes) {
+            if (node.nodeType === Node.TEXT_NODE) {
+                const textContent = node.textContent || '';
+                if (textContent) {
+                    text += textContent;
+                    segments.push({ type: 'text', data: { text: textContent } });
+                }
+            }
+            else if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                if (el.classList.contains('editor-face')) {
+                    const faceId = el.dataset.id;
+                    text += `[face:${faceId}]`;
+                    segments.push({ type: 'face', data: { id: Number(faceId) } });
+                }
+                else if (el.classList.contains('editor-image')) {
+                    const imageUrl = el.dataset.url;
+                    text += `[image:${imageUrl}]`;
+                    segments.push({ type: 'image', data: { url: imageUrl } });
+                }
+                else if (el.classList.contains('editor-video')) {
+                    const u = el.dataset.url || '';
+                    text += `[video:${u}]`;
+                    segments.push({ type: 'video', data: { url: u } });
+                }
+                else if (el.classList.contains('editor-audio')) {
+                    const u = el.dataset.url || '';
+                    text += `[audio:${u}]`;
+                    segments.push({ type: 'audio', data: { url: u } });
+                }
+                else if (el.classList.contains('editor-at')) {
+                    const name = el.dataset.name;
+                    const id = el.dataset.id;
+                    text += `[@${name}]`;
+                    segments.push({
+                        type: 'mention',
+                        data: id ? { target: id, name } : { target: name, name },
+                    });
+                }
+                else if (el.tagName === 'BR') {
+                    text += '\n';
+                }
+            }
+        }
+        return { text, segments };
+    };
+    // 插入表情
+    const insertFace = (faceId) => {
+        if (!editorRef.current)
+            return;
+        const img = document.createElement('img');
+        img.src = `https://face.viki.moe/apng/${faceId}.png`;
+        img.alt = `[face:${faceId}]`;
+        img.dataset.type = 'face';
+        img.dataset.id = String(faceId);
+        img.className = 'editor-face';
+        insertNodeAtCursor(img);
+        handleChange();
+    };
+    // 插入图片
+    const insertImage = (url) => {
+        if (!editorRef.current || !url.trim())
+            return;
+        const img = document.createElement('img');
+        img.src = url.trim();
+        img.alt = `[image:${url.trim()}]`;
+        img.dataset.type = 'image';
+        img.dataset.url = url.trim();
+        img.className = 'editor-image';
+        insertNodeAtCursor(img);
+        handleChange();
+    };
+    const insertVideo = (url) => {
+        if (!editorRef.current || !url.trim())
+            return;
+        const u = url.trim();
+        const span = document.createElement('span');
+        span.className = 'editor-video';
+        span.dataset.url = u;
+        span.contentEditable = 'false';
+        span.textContent = '📹 视频';
+        insertNodeAtCursor(span);
+        handleChange();
+    };
+    const insertAudio = (url) => {
+        if (!editorRef.current || !url.trim())
+            return;
+        const u = url.trim();
+        const span = document.createElement('span');
+        span.className = 'editor-audio';
+        span.dataset.url = u;
+        span.contentEditable = 'false';
+        span.textContent = '🎵 音频';
+        insertNodeAtCursor(span);
+        handleChange();
+    };
+    // 插入 @ 提及
+    const insertAt = (name, id) => {
+        if (!editorRef.current || !name.trim())
+            return;
+        // 创建 @ 标签容器
+        const atBox = document.createElement('span');
+        atBox.dataset.type = 'at';
+        atBox.dataset.name = name;
+        if (id)
+            atBox.dataset.id = id;
+        atBox.className = 'editor-at';
+        atBox.contentEditable = 'false'; // 不可编辑
+        // 创建 @ 符号
+        const atSymbol = document.createElement('span');
+        atSymbol.textContent = '@';
+        atSymbol.className = 'editor-at-symbol';
+        // 创建名称
+        const nameText = document.createElement('span');
+        nameText.textContent = name;
+        nameText.className = 'editor-at-name';
+        atBox.appendChild(atSymbol);
+        atBox.appendChild(nameText);
+        insertNodeAtCursor(atBox);
+        handleChange();
+    };
+    // 在光标位置插入节点
+    const insertNodeAtCursor = (node) => {
+        if (!editorRef.current)
+            return;
+        // 先聚焦编辑器
+        editorRef.current.focus();
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0);
+            // 检查光标是否在编辑器内部
+            const isInsideEditor = editorRef.current.contains(range.commonAncestorContainer);
+            if (isInsideEditor) {
+                // 光标在编辑器内，插入到光标位置
+                range.deleteContents();
+                range.insertNode(node);
+                range.collapse(false);
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }
+            else {
+                // 光标不在编辑器内，追加到末尾
+                editorRef.current.appendChild(node);
+                // 移动光标到新插入的节点后面
+                const newRange = document.createRange();
+                newRange.setStartAfter(node);
+                newRange.collapse(true);
+                selection.removeAllRanges();
+                selection.addRange(newRange);
+            }
+        }
+        else {
+            // 没有选区，直接追加到末尾
+            editorRef.current.appendChild(node);
+            // 创建新选区并移动光标到末尾
+            const selection = window.getSelection();
+            if (selection) {
+                const newRange = document.createRange();
+                newRange.setStartAfter(node);
+                newRange.collapse(true);
+                selection.removeAllRanges();
+                selection.addRange(newRange);
+            }
+        }
+    };
+    // 清空编辑器
+    const clear = () => {
+        if (editorRef.current) {
+            editorRef.current.innerHTML = '';
+            handleChange();
+        }
+    };
+    // 聚焦编辑器
+    const focus = () => {
+        editorRef.current?.focus();
+    };
+    // 获取内容
+    const getContent = () => {
+        return parseEditorContent();
+    };
+    // 检测 @ 输入
+    const checkAtTrigger = () => {
+        if (!editorRef.current || !onAtTrigger)
+            return;
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            onAtTrigger(false, '');
+            atTriggerTextRef.current = null;
+            return;
+        }
+        const range = selection.getRangeAt(0);
+        // 检查光标是否在编辑器内
+        if (!editorRef.current.contains(range.commonAncestorContainer)) {
+            onAtTrigger(false, '');
+            atTriggerTextRef.current = null;
+            return;
+        }
+        // 获取光标前的文本节点
+        const node = range.startContainer;
+        if (node.nodeType !== Node.TEXT_NODE) {
+            onAtTrigger(false, '');
+            atTriggerTextRef.current = null;
+            return;
+        }
+        const textNode = node;
+        const textBeforeCursor = textNode.textContent?.substring(0, range.startOffset) || '';
+        // 查找最近的 @ 符号位置
+        const atIndex = textBeforeCursor.lastIndexOf('@');
+        // 检查是否找到 @ 且后面没有空格（表示仍在输入 @提及）
+        if (atIndex !== -1) {
+            const textAfterAt = textBeforeCursor.substring(atIndex + 1);
+            // 如果 @ 后面有空格，则不触发
+            if (textAfterAt.includes(' ') || textAfterAt.includes('\n')) {
+                onAtTrigger(false, '');
+                atTriggerTextRef.current = null;
+                return;
+            }
+            atTriggerTextRef.current = textNode;
+            // 计算 @ 位置
+            const tempRange = document.createRange();
+            tempRange.setStart(textNode, atIndex);
+            tempRange.setEnd(textNode, atIndex + 1);
+            const rect = tempRange.getBoundingClientRect();
+            const editorRect = editorRef.current.getBoundingClientRect();
+            // 传递搜索查询（@ 后面的文本）
+            onAtTrigger(true, textAfterAt, {
+                top: rect.bottom - editorRect.top,
+                left: rect.left - editorRect.left
+            });
+        }
+        else {
+            onAtTrigger(false, '');
+            atTriggerTextRef.current = null;
+        }
+    };
+    // 处理内容变化
+    const handleChange = () => {
+        checkAtTrigger();
+        if (onChange) {
+            const { text, segments } = parseEditorContent();
+            onChange(text, segments);
+        }
+    };
+    // 删除触发的 @ 符号和搜索文本并插入用户
+    const replaceAtTrigger = (name, id) => {
+        if (!atTriggerTextRef.current)
+            return;
+        const textNode = atTriggerTextRef.current;
+        const text = textNode.textContent || '';
+        const atIndex = text.lastIndexOf('@');
+        if (atIndex !== -1) {
+            // 找到 @ 后面的内容（搜索文本）
+            const textAfter = text.substring(atIndex + 1);
+            const endIndex = atIndex + 1 + textAfter.split(/[\s\n]/)[0].length;
+            // 删除 @ 符号和搜索文本
+            const beforeAt = text.substring(0, atIndex);
+            const afterSearch = text.substring(endIndex);
+            textNode.textContent = beforeAt + afterSearch;
+            // 移动光标到删除位置
+            const selection = window.getSelection();
+            if (selection) {
+                const range = document.createRange();
+                range.setStart(textNode, atIndex);
+                range.collapse(true);
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }
+        }
+        atTriggerTextRef.current = null;
+        insertAt(name, id);
+    };
+    // 处理粘贴事件
+    const handlePaste = (e) => {
+        e.preventDefault();
+        const clipboardData = e.clipboardData;
+        // 优先处理图片粘贴
+        const items = Array.from(clipboardData.items);
+        const imageItem = items.find((item) => item.type.startsWith('image/'));
+        if (imageItem) {
+            const file = imageItem.getAsFile();
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = () => {
+                    if (typeof reader.result === 'string') {
+                        insertImage(reader.result);
+                    }
+                };
+                reader.readAsDataURL(file);
+            }
+            return;
+        }
+        // 纯文本粘贴（去除富文本格式）
+        const text = clipboardData.getData('text/plain');
+        if (text) {
+            document.execCommand('insertText', false, text);
+            handleChange();
+        }
+    };
+    // 处理键盘事件
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            if (onSend) {
+                const { text, segments } = parseEditorContent();
+                onSend(text, segments);
+            }
+        }
+    };
+    // 暴露方法给父组件
+    useImperativeHandle(ref, () => ({
+        focus,
+        clear,
+        insertFace,
+        insertImage,
+        insertVideo,
+        insertAudio,
+        insertAt,
+        replaceAtTrigger,
+        getContent
+    }));
+    return (_jsx("div", { ref: editorRef, contentEditable: true, suppressContentEditableWarning: true, onInput: handleChange, onKeyDown: handleKeyDown, onPaste: handlePaste, "data-placeholder": placeholder, className: "rich-text-editor", style: {
+            width: '100%',
+            minHeight,
+            maxHeight,
+            padding: '0.5rem 0.75rem',
+            border: '1px solid var(--gray-6)',
+            borderRadius: '6px',
+            backgroundColor: 'var(--gray-1)',
+            fontSize: 'var(--font-size-2)',
+            outline: 'none',
+            overflowY: 'auto',
+            lineHeight: '1.5',
+            wordWrap: 'break-word',
+            color: 'var(--gray-12)'
+        } }));
+});
+RichTextEditor.displayName = 'RichTextEditor';
+export default RichTextEditor;

package/pages/SandboxChat.js

@@ -0,0 +1,363 @@
+// Generated by build-plugin-runtime-entries.mjs. Do not edit.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useEffect, useRef } from 'react';
+import { cn, resolveMediaSrc, pickMediaRawUrl, } from '@zhin.js/client';
+import { buildSandboxWebSocketUrl } from './sandboxTransport';
+import { User, Bot, Users, Trash2, Send, Hash, MessageSquare, Wifi, WifiOff, Smile, Image, X, Check, Info, Search, UserPlus, Bell, Video, Music, } from 'lucide-react';
+import RichTextEditor, {} from './RichTextEditor';
+export default function Sandbox() {
+    const [messages, setMessages] = useState([]);
+    const [channels, setChannels] = useState([
+        { id: 'user_1001', name: '测试用户', type: 'private', unread: 0 },
+        { id: 'group_2001', name: '测试群组', type: 'group', unread: 0 },
+        { id: 'channel_3001', name: '测试频道', type: 'channel', unread: 0 }
+    ]);
+    const [faceList, setFaceList] = useState([]);
+    const [activeChannel, setActiveChannel] = useState(channels[0]);
+    const [inputText, setInputText] = useState('');
+    const [endpointName, setBotName] = useState('ProcessEndpoint');
+    const [connected, setConnected] = useState(false);
+    const [showFacePicker, setShowFacePicker] = useState(false);
+    /** 输入区：插入图片 / 视频 / 音频 URL */
+    const [mediaPanel, setMediaPanel] = useState(null);
+    const [mediaUrl, setMediaUrl] = useState('');
+    const [showAtPicker, setShowAtPicker] = useState(false);
+    const [atPopoverPosition, setAtPopoverPosition] = useState(null);
+    const [atSearchQuery, setAtSearchQuery] = useState('');
+    const [faceSearchQuery, setFaceSearchQuery] = useState('');
+    const [atUserName, setAtUserName] = useState('');
+    const [atSuggestions] = useState([
+        { id: '10001', name: '张三' }, { id: '10002', name: '李四' }, { id: '10003', name: '王五' },
+        { id: '10004', name: '赵六' }, { id: '10005', name: '测试用户' }, { id: '10086', name: 'Admin' },
+        { id: '10010', name: 'Test User' }
+    ]);
+    const [previewSegments, setPreviewSegments] = useState([]);
+    const [showChannelList, setShowChannelList] = useState(false);
+    const [viewMode, setViewMode] = useState('chat');
+    const messagesEndRef = useRef(null);
+    const wsRef = useRef(null);
+    const editorRef = useRef(null);
+    const fetchFaceList = async () => {
+        try {
+            const res = await fetch('https://face.viki.moe/metadata.json');
+            setFaceList(await res.json());
+        }
+        catch (err) {
+            console.error('[Sandbox] Failed to fetch face list:', err);
+        }
+    };
+    useEffect(() => { fetchFaceList(); }, []);
+    const handleInboundPayload = (data) => {
+        if (data.type === 'edit' && data.messageId) {
+            const content = Array.isArray(data.content)
+                ? data.content
+                : parseTextToSegments(String(data.content ?? ''));
+            setMessages((prev) => prev.map((m) => (m.id === data.messageId ? { ...m, content } : m)));
+            return;
+        }
+        const content = typeof data.content === 'string'
+            ? parseTextToSegments(data.content)
+            : Array.isArray(data.content) ? data.content : parseTextToSegments(String(data.content ?? ''));
+        const channelName = data.type === 'private'
+            ? `私聊-${data.bot || endpointName}`
+            : data.type === 'group'
+                ? `群组-${data.id}`
+                : `频道-${data.id}`;
+        const channelType = data.type;
+        setChannels((prev) => {
+            if (prev.some((c) => c.id === data.id))
+                return prev;
+            const created = { id: data.id, name: channelName, type: channelType, unread: 0 };
+            setActiveChannel(created);
+            return [...prev, created];
+        });
+        setMessages((prev) => [...prev, {
+                id: data.messageId ?? `bot_${data.timestamp}`, type: 'received', channelType,
+                channelId: data.id, channelName, senderId: 'endpoint',
+                senderName: data.bot || endpointName, content, timestamp: data.timestamp,
+            }]);
+    };
+    const sendInteractiveAction = (payload) => {
+        const segments = [{ type: 'action', data: { id: payload, payload } }];
+        const payloadJson = JSON.stringify({ type: activeChannel.type, id: activeChannel.id, content: segments, timestamp: Date.now() });
+        wsRef.current?.send(payloadJson);
+    };
+    useEffect(() => {
+        let closed = false;
+        let retryTimer;
+        let attempt = 0;
+        /** Ignore close events from a socket we intentionally replaced (login/base change). */
+        let replaceInFlight = false;
+        const connect = () => {
+            if (closed)
+                return;
+            if (retryTimer) {
+                clearTimeout(retryTimer);
+                retryTimer = undefined;
+            }
+            const wsUrl = buildSandboxWebSocketUrl();
+            // Tear down previous socket before opening a new one so we don't
+            // leave two concurrent /sandbox sessions for fixed-name endpoints.
+            const previous = wsRef.current;
+            if (previous) {
+                replaceInFlight = true;
+                previous.onclose = null;
+                previous.onerror = null;
+                previous.onmessage = null;
+                previous.onopen = null;
+                try {
+                    previous.close();
+                }
+                catch { /* already closed */ }
+                replaceInFlight = false;
+            }
+            const ws = new WebSocket(wsUrl);
+            wsRef.current = ws;
+            ws.onopen = () => {
+                attempt = 0;
+                setConnected(true);
+            };
+            ws.onmessage = (event) => {
+                try {
+                    handleInboundPayload(JSON.parse(String(event.data)));
+                }
+                catch (err) {
+                    console.error('[Sandbox] Failed to parse message:', err);
+                }
+            };
+            ws.onclose = () => {
+                if (wsRef.current !== ws)
+                    return;
+                setConnected(false);
+                wsRef.current = null;
+                if (closed || replaceInFlight)
+                    return;
+                const delay = Math.min(8_000, 500 * 2 ** attempt);
+                attempt += 1;
+                retryTimer = setTimeout(connect, delay);
+            };
+            ws.onerror = () => {
+                /* close handler reconnects */
+            };
+        };
+        const onAuthOrStorage = (event) => {
+            // storage fires for other tabs; same-tab login sets localStorage then
+            // dispatches zhin:auth-required / custom login events.
+            if (event && event.type === 'storage') {
+                const key = event.key;
+                if (key != null
+                    && key !== 'zhin_api_token'
+                    && key !== 'zhin_api_base'
+                    && key !== 'HTTP_TOKEN'
+                    && key !== 'zhin_http_token') {
+                    return;
+                }
+            }
+            attempt = 0;
+            connect();
+        };
+        connect();
+        if (typeof window !== 'undefined') {
+            window.addEventListener('storage', onAuthOrStorage);
+            window.addEventListener('zhin:auth-required', onAuthOrStorage);
+            // Remote Console may fire this after successful login (token written).
+            window.addEventListener('zhin:auth-changed', onAuthOrStorage);
+            window.addEventListener('zhin:api-base-changed', onAuthOrStorage);
+        }
+        return () => {
+            closed = true;
+            if (retryTimer)
+                clearTimeout(retryTimer);
+            if (typeof window !== 'undefined') {
+                window.removeEventListener('storage', onAuthOrStorage);
+                window.removeEventListener('zhin:auth-required', onAuthOrStorage);
+                window.removeEventListener('zhin:auth-changed', onAuthOrStorage);
+                window.removeEventListener('zhin:api-base-changed', onAuthOrStorage);
+            }
+            wsRef.current?.close();
+            wsRef.current = null;
+            setConnected(false);
+        };
+    }, []);
+    useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]);
+    useEffect(() => { setPreviewSegments(inputText.trim() ? parseTextToSegments(inputText) : []); }, [inputText]);
+    const parseTextToSegments = (text) => {
+        const segments = [];
+        const regex = /\[@([^\]]+)\]|\[face:(\d+)\]|\[image:([^\]]+)\]|\[video:([^\]]+)\]|\[audio:([^\]]+)\]/g;
+        let lastIndex = 0;
+        let match;
+        while ((match = regex.exec(text)) !== null) {
+            if (match.index > lastIndex) {
+                const t = text.substring(lastIndex, match.index);
+                if (t)
+                    segments.push({ type: 'text', data: { text: t } });
+            }
+            if (match[1])
+                segments.push({ type: 'mention', data: { target: match[1], name: match[1] } });
+            else if (match[2])
+                segments.push({ type: 'face', data: { id: parseInt(match[2], 10) } });
+            else if (match[3])
+                segments.push({ type: 'image', data: { url: match[3] } });
+            else if (match[4])
+                segments.push({ type: 'video', data: { url: match[4] } });
+            else if (match[5])
+                segments.push({ type: 'audio', data: { url: match[5] } });
+            lastIndex = regex.lastIndex;
+        }
+        if (lastIndex < text.length) {
+            const r = text.substring(lastIndex);
+            if (r)
+                segments.push({ type: 'text', data: { text: r } });
+        }
+        return segments.length > 0 ? segments : [{ type: 'text', data: { text } }];
+    };
+    const hasRenderableSegments = (segments) => {
+        if (segments.length === 0)
+            return false;
+        return segments.some((s) => {
+            if (s.type === 'text')
+                return Boolean(String(s.data?.text ?? '').trim());
+            if (s.type === 'keyboard')
+                return true;
+            return true;
+        });
+    };
+    const renderMessageSegments = (segments, isSent) => {
+        const ring = isSent ? 'ring-1 ring-primary-foreground/25' : 'ring-1 ring-border/60';
+        return segments.map((segment, index) => {
+            if (typeof segment === 'string') {
+                return _jsx("span", { children: segment.split('\n').map((part, i) => _jsxs(React.Fragment, { children: [part, i < segment.split('\n').length - 1 && _jsx("br", {})] }, i)) }, index);
+            }
+            const d = segment.data;
+            switch (segment.type) {
+                case 'text':
+                    return _jsx("span", { children: String(d.text ?? '').split('\n').map((part, i) => _jsxs(React.Fragment, { children: [part, i < String(d.text ?? '').split('\n').length - 1 && _jsx("br", {})] }, i)) }, index);
+                case 'mention':
+                case 'at':
+                    return _jsxs("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded bg-accent text-accent-foreground text-xs mx-0.5", children: ["@", String(d.name ?? d.target ?? d.qq ?? '')] }, index);
+                case 'face':
+                    return _jsx("img", { src: `https://face.viki.moe/apng/${d.id}.png`, alt: String(d.name ?? ''), className: "w-6 h-6 inline-block align-middle mx-0.5", title: String(d.name ?? d.id ?? '') }, index);
+                case 'dice':
+                    return _jsxs("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded bg-secondary text-xs mx-0.5", children: ["\uD83C\uDFB2 ", d.result != null ? `点数 ${String(d.result)}` : '骰子'] }, index);
+                case 'rps':
+                    return _jsxs("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded bg-secondary text-xs mx-0.5", children: ["\u270A ", d.result != null ? `结果 ${String(d.result)}` : '猜拳'] }, index);
+                case 'image': {
+                    const raw = pickMediaRawUrl(d);
+                    const src = resolveMediaSrc(raw, 'image');
+                    if (!src)
+                        return _jsx("span", { className: "text-xs opacity-70", children: "[\u56FE\u7247]" }, index);
+                    return (_jsx("a", { href: src, target: "_blank", rel: "noreferrer", className: "block my-1", children: _jsx("img", { src: src, alt: "", className: cn('max-w-[min(320px,88vw)] rounded-lg block', ring, 'ring-offset-0'), onError: (e) => { e.target.style.display = 'none'; } }) }, index));
+                }
+                case 'video': {
+                    const raw = pickMediaRawUrl(d);
+                    const src = resolveMediaSrc(raw, 'video');
+                    if (!src)
+                        return _jsx("span", { className: "text-xs opacity-70", children: "[\u89C6\u9891\u65E0\u5730\u5740]" }, index);
+                    return (_jsx("video", { src: src, controls: true, playsInline: true, preload: "metadata", className: cn('max-w-[min(360px,92vw)] max-h-72 rounded-lg my-1 bg-black/10', ring) }, index));
+                }
+                case 'audio':
+                case 'record': {
+                    const raw = pickMediaRawUrl(d);
+                    const src = resolveMediaSrc(raw, 'audio');
+                    if (!src)
+                        return _jsx("span", { className: "text-xs opacity-70", children: "[\u97F3\u9891\u65E0\u5730\u5740]" }, index);
+                    return (_jsx("audio", { src: src, controls: true, preload: "metadata", className: cn('w-full max-w-sm my-2 h-10', isSent && 'opacity-95') }, index));
+                }
+                case 'reply':
+                    return (_jsxs("div", { className: "mb-1 rounded-md border border-dashed px-2 py-1 text-xs opacity-90", children: ["\u21A9 \u5F15\u7528\u6D88\u606F #", String(d.message_id ?? d.id ?? '')] }, index));
+                case 'forward': {
+                    const messages = d.messages;
+                    const title = String(d.title ?? '聊天记录');
+                    return (_jsxs("div", { className: "my-1 rounded-md border bg-background/40 px-2 py-2 text-xs space-y-1", children: [_jsxs("div", { className: "font-medium", children: ["\uD83D\uDCE8 ", title] }), Array.isArray(messages) && messages.length > 0 ? (_jsxs("div", { className: "space-y-1 pl-2 border-l-2 border-muted", children: [messages.slice(0, 3).map((batch, bi) => (_jsx("div", { className: "opacity-90", children: batch.map((s, si) => (_jsx("span", { children: s.type === 'text' ? String(s.data?.text ?? '') : `[${s.type ?? 'seg'}]` }, si))) }, bi))), messages.length > 3 && _jsxs("div", { className: "opacity-60", children: ["\u2026\u5171 ", messages.length, " \u6761"] })] })) : (_jsx("div", { className: "opacity-70", children: "[\u5408\u5E76\u8F6C\u53D1]" }))] }, index));
+                }
+                case 'keyboard': {
+                    const rows = d.rows ?? [];
+                    return (_jsx("div", { className: "inline-grid gap-1 my-1", children: rows.map((row, ri) => (_jsx("div", { className: "flex gap-1", children: row.map((btn) => (_jsx("button", { type: "button", disabled: btn.disabled || isSent, onClick: () => sendInteractiveAction(btn.payload), className: cn('min-w-9 h-9 rounded-md border text-sm font-medium transition-colors', btn.disabled
+                                    ? 'opacity-50 cursor-not-allowed'
+                                    : 'hover:bg-accent active:scale-95'), children: btn.label }, btn.payload))) }, ri))) }, index));
+                }
+                default:
+                    return _jsxs("span", { className: "text-xs opacity-70", children: ["[", segment.type, "]"] }, index);
+            }
+        });
+    };
+    const handleSendMessage = (text, segments) => {
+        if (!hasRenderableSegments(segments))
+            return;
+        const newMessage = { id: `msg_${Date.now()}`, type: 'sent', channelType: activeChannel.type, channelId: activeChannel.id, channelName: activeChannel.name, senderId: 'test_user', senderName: '测试用户', content: segments, timestamp: Date.now() };
+        setMessages((prev) => [...prev, newMessage]);
+        setInputText('');
+        setPreviewSegments([]);
+        editorRef.current?.clear();
+        // Stamp type+id so Host sandbox endpoint preserves channel context for outbound replies.
+        const payload = JSON.stringify({ type: activeChannel.type, id: activeChannel.id, content: segments, timestamp: Date.now() });
+        wsRef.current?.send(payload);
+    };
+    const clearMessages = () => { if (confirm('确定清空所有消息记录？'))
+        setMessages([]); };
+    const switchChannel = (channel) => { setViewMode('chat'); setActiveChannel(channel); setChannels((prev) => prev.map((c) => c.id === channel.id ? { ...c, unread: 0 } : c)); if (window.innerWidth < 768)
+        setShowChannelList(false); };
+    const addChannel = () => {
+        const types = ['private', 'group', 'channel'];
+        const type = types[Math.floor(Math.random() * types.length)];
+        const name = prompt(`请输入频道名称：`);
+        if (name) {
+            const nc = { id: `${type}_${Date.now()}`, name, type, unread: 0 };
+            setChannels((p) => [...p, nc]);
+            setActiveChannel(nc);
+        }
+    };
+    const getChannelIcon = (type) => { switch (type) {
+        case 'private': return _jsx(User, { size: 16 });
+        case 'group': return _jsx(Users, { size: 16 });
+        case 'channel': return _jsx(Hash, { size: 16 });
+        default: return _jsx(MessageSquare, { size: 16 });
+    } };
+    const insertFace = (faceId) => { editorRef.current?.insertFace(faceId); setShowFacePicker(false); };
+    const commitMediaUrl = () => {
+        const u = mediaUrl.trim();
+        if (!u || !mediaPanel)
+            return;
+        if (mediaPanel === 'image')
+            editorRef.current?.insertImage(u);
+        else if (mediaPanel === 'video')
+            editorRef.current?.insertVideo(u);
+        else
+            editorRef.current?.insertAudio(u);
+        setMediaUrl('');
+        setMediaPanel(null);
+    };
+    const insertAtUser = () => { if (!atUserName.trim())
+        return; editorRef.current?.insertAt(atUserName.trim()); setAtUserName(''); setShowAtPicker(false); };
+    const selectAtUser = (user) => { editorRef.current?.replaceAtTrigger(user.name, user.id); setAtPopoverPosition(null); setAtSearchQuery(''); };
+    const handleAtTrigger = (show, searchQuery, position) => {
+        if (activeChannel.type === 'private') {
+            setAtPopoverPosition(null);
+            setAtSearchQuery('');
+            return;
+        }
+        if (show && position) {
+            setAtPopoverPosition(position);
+            setAtSearchQuery(searchQuery);
+        }
+        else {
+            setAtPopoverPosition(null);
+            setAtSearchQuery('');
+        }
+    };
+    const filteredAtSuggestions = atSuggestions.filter((user) => { if (!atSearchQuery.trim())
+        return true; const q = atSearchQuery.toLowerCase(); return user.name.toLowerCase().includes(q) || user.id.toLowerCase().includes(q); });
+    const handleEditorChange = (text, segments) => { setInputText(text); setPreviewSegments(segments); };
+    const filteredFaces = faceList.filter(face => face.name.toLowerCase().includes(faceSearchQuery.toLowerCase()) || face.describe.toLowerCase().includes(faceSearchQuery.toLowerCase()));
+    const channelMessages = messages.filter((msg) => msg.channelId === activeChannel.id);
+    return (_jsxs("div", { className: "sandbox-container rounded-xl border border-border/70 bg-card/30 shadow-sm", children: [_jsxs("button", { className: "mobile-channel-toggle md:hidden", onClick: () => setShowChannelList(!showChannelList), children: [_jsx(MessageSquare, { size: 20 }), " \u9891\u9053\u5217\u8868"] }), _jsxs("div", { className: cn("channel-sidebar rounded-lg border bg-card", showChannelList && "show"), children: [_jsx("div", { className: "p-3 border-b", children: _jsxs("div", { className: "flex justify-between items-center", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "p-1 rounded-md bg-secondary", children: _jsx(MessageSquare, { size: 16, className: "text-muted-foreground" }) }), _jsx("h3", { className: "font-semibold", children: "\u9891\u9053\u5217\u8868" })] }), _jsxs("span", { className: cn("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border", connected ? "bg-emerald-100 text-emerald-800 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400 dark:border-emerald-800" : "bg-muted text-muted-foreground"), children: [connected ? _jsx(Wifi, { size: 12 }) : _jsx(WifiOff, { size: 12 }), connected ? '已连接' : '未连接'] })] }) }), _jsxs("div", { className: "flex-1 overflow-y-auto p-2 space-y-1", children: [channels.map((channel) => {
+                                const isActive = viewMode === 'chat' && activeChannel.id === channel.id;
+                                return (_jsxs("div", { className: cn("menu-item", isActive && "active"), onClick: () => switchChannel(channel), children: [_jsx("span", { className: "shrink-0", children: getChannelIcon(channel.type) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-sm font-medium truncate", children: channel.name }), _jsx("div", { className: "text-xs text-muted-foreground", children: channel.type === 'private' ? '私聊' : channel.type === 'group' ? '群聊' : '频道' })] }), channel.unread > 0 && _jsx("span", { className: "inline-flex items-center justify-center h-5 min-w-5 rounded-full bg-destructive text-destructive-foreground text-[10px] font-medium px-1", children: channel.unread })] }, channel.id));
+                            }), _jsxs("div", { className: "pt-2 mt-2 border-t space-y-1", children: [_jsxs("div", { className: cn("menu-item", viewMode === 'requests' && "active"), onClick: () => { setViewMode('requests'); if (window.innerWidth < 768)
+                                            setShowChannelList(false); }, children: [_jsx(UserPlus, { size: 16, className: "shrink-0" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-sm font-medium", children: "\u8BF7\u6C42" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "\u597D\u53CB/\u7FA4\u9080\u8BF7\u7B49" })] })] }), _jsxs("div", { className: cn("menu-item", viewMode === 'notices' && "active"), onClick: () => { setViewMode('notices'); if (window.innerWidth < 768)
+                                            setShowChannelList(false); }, children: [_jsx(Bell, { size: 16, className: "shrink-0" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-sm font-medium", children: "\u901A\u77E5" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "\u7FA4\u7BA1/\u64A4\u56DE\u7B49" })] })] })] })] }), _jsx("div", { className: "p-2 border-t", children: _jsx("button", { className: "w-full py-2 px-3 rounded-md border border-dashed text-sm text-muted-foreground hover:bg-accent transition-colors", onClick: addChannel, children: "+ \u6DFB\u52A0\u9891\u9053" }) })] }), showChannelList && _jsx("div", { className: "channel-overlay md:hidden", onClick: () => setShowChannelList(false) }), _jsxs("div", { className: "chat-area", children: [viewMode === 'requests' && (_jsxs("div", { className: "rounded-lg border bg-card flex-1 flex flex-col min-h-0 overflow-hidden", children: [_jsx("div", { className: "p-3 border-b flex-shrink-0", children: _jsxs("h2", { className: "text-lg font-bold flex items-center gap-2", children: [_jsx(UserPlus, { size: 20 }), " \u8BF7\u6C42"] }) }), _jsxs("div", { className: "flex-1 overflow-y-auto p-4 flex flex-col items-center justify-center gap-3 text-muted-foreground text-center", children: [_jsx(UserPlus, { size: 48, className: "opacity-30" }), _jsx("span", { children: "\u6C99\u76D2\u4E3A\u6A21\u62DF\u73AF\u5883\uFF0C\u6682\u65E0\u8BF7\u6C42\u6570\u636E" }), _jsxs("span", { className: "text-sm", children: ["\u5B9E\u9645\u597D\u53CB/\u7FA4\u9080\u8BF7\u7B49\u8BF7\u6C42\u8BF7\u5230\u4FA7\u8FB9\u680F ", _jsx("strong", { children: "\u673A\u5668\u4EBA" }), " \u9875\u9762\u8FDB\u5165\u5BF9\u5E94\u673A\u5668\u4EBA\u7BA1\u7406\u67E5\u770B"] })] })] })), viewMode === 'notices' && (_jsxs("div", { className: "rounded-lg border bg-card flex-1 flex flex-col min-h-0 overflow-hidden", children: [_jsx("div", { className: "p-3 border-b flex-shrink-0", children: _jsxs("h2", { className: "text-lg font-bold flex items-center gap-2", children: [_jsx(Bell, { size: 20 }), " \u901A\u77E5"] }) }), _jsxs("div", { className: "flex-1 overflow-y-auto p-4 flex flex-col items-center justify-center gap-3 text-muted-foreground text-center", children: [_jsx(Bell, { size: 48, className: "opacity-30" }), _jsx("span", { children: "\u6C99\u76D2\u4E3A\u6A21\u62DF\u73AF\u5883\uFF0C\u6682\u65E0\u901A\u77E5\u6570\u636E" }), _jsxs("span", { className: "text-sm", children: ["\u5B9E\u9645\u7FA4\u7BA1\u3001\u64A4\u56DE\u7B49\u901A\u77E5\u8BF7\u5230\u4FA7\u8FB9\u680F ", _jsx("strong", { children: "\u673A\u5668\u4EBA" }), " \u9875\u9762\u8FDB\u5165\u5BF9\u5E94\u673A\u5668\u4EBA\u7BA1\u7406\u67E5\u770B"] })] })] })), viewMode === 'chat' && (_jsxs(_Fragment, { children: [_jsx("div", { className: "rounded-lg border bg-card p-3 flex-shrink-0", children: _jsxs("div", { className: "flex justify-between items-center flex-wrap gap-2", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "p-2 rounded-lg bg-secondary", children: getChannelIcon(activeChannel.type) }), _jsxs("div", { children: [_jsx("h2", { className: "text-lg font-bold", children: activeChannel.name }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [_jsx("span", { children: activeChannel.id }), _jsx("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded border text-[10px]", children: channelMessages.length }), _jsx("span", { children: "\u6761\u6D88\u606F" })] })] }), _jsx("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-secondary text-secondary-foreground", children: activeChannel.type === 'private' ? '私聊' : activeChannel.type === 'group' ? '群聊' : '频道' })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { value: endpointName, onChange: (e) => setBotName(e.target.value), placeholder: "\u673A\u5668\u4EBA\u540D\u79F0", className: "h-8 w-28 rounded-md border bg-transparent px-2 text-sm" }), _jsxs("button", { className: "inline-flex items-center gap-1 h-8 px-3 rounded-md bg-secondary text-secondary-foreground text-sm hover:bg-secondary/80", onClick: clearMessages, children: [_jsx(Trash2, { size: 14 }), " \u6E05\u7A7A"] })] })] }) }), _jsx("div", { className: "rounded-lg border bg-card flex-1 flex flex-col min-h-0", children: _jsx("div", { className: "flex-1 overflow-y-auto p-4", children: channelMessages.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-3", children: [_jsx(MessageSquare, { size: 64, className: "text-muted-foreground/20" }), _jsx("span", { className: "text-muted-foreground", children: "\u6682\u65E0\u6D88\u606F\uFF0C\u5F00\u59CB\u5BF9\u8BDD\u5427\uFF01" })] })) : (_jsxs("div", { className: "space-y-2", children: [channelMessages.map((msg) => (_jsx("div", { className: cn("flex", msg.type === 'sent' ? "justify-end" : "justify-start"), children: _jsxs("div", { className: cn("max-w-[70%] p-3 rounded-2xl", msg.type === 'sent' ? "bg-primary text-primary-foreground" : "bg-muted"), children: [_jsxs("div", { className: "flex items-center gap-2 mb-1", children: [msg.type === 'received' && _jsx(Bot, { size: 14 }), msg.type === 'sent' && _jsx(User, { size: 14 }), _jsx("span", { className: "text-xs font-medium opacity-90", children: msg.senderName }), _jsx("span", { className: "text-xs opacity-70", children: new Date(msg.timestamp).toLocaleTimeString() })] }), _jsx("div", { className: "text-sm space-y-1", children: renderMessageSegments(msg.content, msg.type === 'sent') })] }) }, msg.id))), _jsx("div", { ref: messagesEndRef })] })) }) }), _jsxs("div", { className: "rounded-lg border bg-card p-3 flex-shrink-0 space-y-3", children: [_jsxs("div", { className: "flex gap-2 items-center flex-wrap", children: [_jsx("button", { type: "button", className: cn("h-8 w-8 rounded-md flex items-center justify-center border transition-colors", showFacePicker ? "bg-primary text-primary-foreground" : "hover:bg-accent"), onClick: () => { setShowFacePicker(!showFacePicker); setMediaPanel(null); }, title: "\u63D2\u5165\u8868\u60C5", children: _jsx(Smile, { size: 16 }) }), _jsx("button", { type: "button", className: cn("h-8 w-8 rounded-md flex items-center justify-center border transition-colors", mediaPanel === 'image' ? "bg-primary text-primary-foreground" : "hover:bg-accent"), onClick: () => { setMediaPanel((p) => (p === 'image' ? null : 'image')); setShowFacePicker(false); }, title: "\u63D2\u5165\u56FE\u7247 URL", children: _jsx(Image, { size: 16 }) }), _jsx("button", { type: "button", className: cn("h-8 w-8 rounded-md flex items-center justify-center border transition-colors", mediaPanel === 'video' ? "bg-primary text-primary-foreground" : "hover:bg-accent"), onClick: () => { setMediaPanel((p) => (p === 'video' ? null : 'video')); setShowFacePicker(false); }, title: "\u63D2\u5165\u89C6\u9891 URL", children: _jsx(Video, { size: 16 }) }), _jsx("button", { type: "button", className: cn("h-8 w-8 rounded-md flex items-center justify-center border transition-colors", mediaPanel === 'audio' ? "bg-primary text-primary-foreground" : "hover:bg-accent"), onClick: () => { setMediaPanel((p) => (p === 'audio' ? null : 'audio')); setShowFacePicker(false); }, title: "\u63D2\u5165\u97F3\u9891 URL", children: _jsx(Music, { size: 16 }) }), _jsx("div", { className: "flex-1 min-w-[1rem]" }), inputText && (_jsx("button", { className: "h-8 w-8 rounded-md flex items-center justify-center hover:bg-accent transition-colors", onClick: () => { setInputText(''); setPreviewSegments([]); }, children: _jsx(X, { size: 16 }) }))] }), showFacePicker && (_jsxs("div", { className: "p-3 rounded-md border bg-muted/30 max-h-64 overflow-y-auto space-y-2", children: [_jsx("input", { value: faceSearchQuery, onChange: (e) => setFaceSearchQuery(e.target.value), placeholder: "\u641C\u7D22\u8868\u60C5...", className: "w-full h-8 rounded-md border bg-transparent px-2 text-sm" }), _jsx("div", { className: "grid grid-cols-8 gap-1", children: filteredFaces.slice(0, 80).map((face) => (_jsx("button", { onClick: () => insertFace(face.id), title: face.name, className: "w-10 h-10 rounded-md border flex items-center justify-center hover:bg-accent transition-colors", children: _jsx("img", { src: `https://face.viki.moe/apng/${face.id}.png`, alt: face.name, className: "w-8 h-8" }) }, face.id))) }), filteredFaces.length === 0 && (_jsxs("div", { className: "flex flex-col items-center gap-2 py-4", children: [_jsx(Search, { size: 32, className: "text-muted-foreground/30" }), _jsx("span", { className: "text-sm text-muted-foreground", children: "\u672A\u627E\u5230\u5339\u914D\u7684\u8868\u60C5" })] }))] })), mediaPanel && (_jsxs("div", { className: "p-3 rounded-md border bg-muted/30 space-y-2", children: [_jsxs("p", { className: "text-xs text-muted-foreground", children: [mediaPanel === 'image' && '支持 http(s) 图片链接或 data URL', mediaPanel === 'video' && '支持浏览器可解码的视频直链（如 .mp4、.webm）', mediaPanel === 'audio' && '支持 .mp3、.ogg、.wav 等音频直链'] }), _jsx("input", { value: mediaUrl, onChange: (e) => setMediaUrl(e.target.value), placeholder: mediaPanel === 'image' ? '图片 URL…' : mediaPanel === 'video' ? '视频 URL…' : '音频 URL…', className: "w-full h-8 rounded-md border border-input bg-background px-2 text-sm", onKeyDown: (e) => { if (e.key === 'Enter') {
+                                                    e.preventDefault();
+                                                    commitMediaUrl();
+                                                } } }), _jsxs("button", { type: "button", className: "inline-flex items-center gap-1 h-8 px-3 rounded-md bg-primary text-primary-foreground text-sm disabled:opacity-50", onClick: commitMediaUrl, disabled: !mediaUrl.trim(), children: [_jsx(Check, { size: 14 }), " \u63D2\u5165\u5230\u8F93\u5165\u6846"] })] })), _jsxs("div", { className: "flex gap-2 items-start", children: [_jsxs("div", { className: "flex-1 relative", children: [_jsx(RichTextEditor, { ref: editorRef, placeholder: `向 ${activeChannel.name} 发送消息...`, onSend: handleSendMessage, onChange: handleEditorChange, onAtTrigger: handleAtTrigger, minHeight: "44px", maxHeight: "200px" }), atPopoverPosition && (_jsx("div", { className: "absolute z-50 rounded-lg border bg-popover shadow-md min-w-60 max-h-72 overflow-y-auto p-1", style: { top: `${atPopoverPosition.top}px`, left: `${atPopoverPosition.left}px` }, children: filteredAtSuggestions.length > 0 ? filteredAtSuggestions.map((user) => (_jsxs("div", { className: "flex items-center gap-2 p-2 rounded-md cursor-pointer hover:bg-accent transition-colors", onClick: () => selectAtUser(user), children: [_jsx(User, { size: 16, className: "text-muted-foreground" }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-sm font-medium", children: user.name }), _jsxs("div", { className: "text-xs text-muted-foreground", children: ["ID: ", user.id] })] })] }, user.id))) : (_jsxs("div", { className: "flex flex-col items-center gap-2 p-4", children: [_jsx(Search, { size: 20, className: "text-muted-foreground/50" }), _jsx("span", { className: "text-xs text-muted-foreground", children: "\u672A\u627E\u5230\u5339\u914D\u7684\u7528\u6237" })] })) }))] }), _jsxs("button", { className: "inline-flex items-center gap-1.5 h-10 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium disabled:opacity-50 transition-colors hover:bg-primary/90", onClick: () => { const c = editorRef.current?.getContent(); if (c)
+                                                    handleSendMessage(c.text, c.segments); }, disabled: !hasRenderableSegments(previewSegments), children: [_jsx(Send, { size: 16 }), " \u53D1\u9001"] })] }), _jsxs("div", { className: "flex items-center gap-2 flex-wrap text-xs text-muted-foreground", children: [_jsx(Info, { size: 12 }), " \u5FEB\u6377\u64CD\u4F5C:", _jsx("span", { className: "px-1 py-0.5 rounded border text-[10px]", children: "Enter" }), " \u53D1\u9001", _jsx("span", { className: "px-1 py-0.5 rounded border text-[10px]", children: "Shift+Enter" }), " \u6362\u884C", _jsx("span", { className: "px-1 py-0.5 rounded border text-[10px]", children: "[@\u540D\u79F0]" }), " @\u67D0\u4EBA", _jsx("span", { className: "px-1 py-0.5 rounded border text-[10px]", children: "[video:URL]" }), _jsx("span", { className: "px-1 py-0.5 rounded border text-[10px]", children: "[audio:URL]" })] })] })] }))] })] }));
+}

package/pages/index.js

@@ -0,0 +1,18 @@
+// Generated by build-plugin-runtime-entries.mjs. Do not edit.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { definePage } from '@zhin.js/console-contract';
+import SandboxChat from './SandboxChat';
+export const meta = definePage({
+    title: '沙盒',
+    icon: 'Box',
+    order: 10,
+});
+/**
+ * Convention page entry (ADR 0046).
+ * `pages/index.tsx` → `/sandbox` (plugin path; no `/p-` leaf).
+ * Restores the pre-runtime-migration Sandbox console UI (channels + rich text + faces).
+ * WebSocket targets Host `/sandbox` via zhin_api_base + token (see sandboxTransport.ts).
+ */
+export default function SandboxPage() {
+    return _jsx(SandboxChat, {});
+}

package/pages/sandboxTransport.js

@@ -0,0 +1,45 @@
+// Generated by build-plugin-runtime-entries.mjs. Do not edit.
+/** Same storage keys as `@zhin.js/client` remoteApi. */
+export function getSandboxApiBase() {
+    if (typeof localStorage === 'undefined') {
+        return typeof window !== 'undefined' ? window.location.origin : '';
+    }
+    const stored = localStorage.getItem('zhin_api_base')?.trim();
+    if (stored)
+        return stored.replace(/\/+$/u, '');
+    if (typeof window !== 'undefined')
+        return window.location.origin;
+    return '';
+}
+export function getSandboxBearerToken() {
+    if (typeof window !== 'undefined') {
+        const runtime = window.__ZHIN_API_TOKEN?.trim();
+        if (runtime)
+            return runtime;
+    }
+    if (typeof localStorage === 'undefined')
+        return '';
+    return (localStorage.getItem('zhin_api_token')?.trim()
+        || localStorage.getItem('HTTP_TOKEN')?.trim()
+        || localStorage.getItem('zhin_http_token')?.trim()
+        || (typeof sessionStorage !== 'undefined' ? sessionStorage.getItem('zhin_api_token')?.trim() : '')
+        || '');
+}
+export function getSandboxAuthHeaders() {
+    const token = getSandboxBearerToken();
+    return token ? { Authorization: `Bearer ${token}` } : {};
+}
+/**
+ * Browser WebSocket cannot set Authorization reliably; pass token in query when needed.
+ * Uses stored Console API base so Remote Console (different origin) still hits the bot Host.
+ */
+export function buildSandboxWebSocketUrl(base) {
+    const apiBase = (base ?? getSandboxApiBase()).replace(/\/+$/u, '');
+    const origin = apiBase || (typeof window !== 'undefined' ? window.location.origin : 'http://localhost');
+    const wsUrl = new URL('/sandbox', `${origin}/`);
+    wsUrl.protocol = wsUrl.protocol === 'https:' ? 'wss:' : 'ws:';
+    const token = getSandboxBearerToken();
+    if (token)
+        wsUrl.searchParams.set('token', token);
+    return wsUrl.href;
+}

package/plugin.js

@@ -0,0 +1,8 @@
+// Generated by build-plugin-runtime-entries.mjs. Do not edit.
+import { definePlugin } from '@zhin.js/plugin-runtime';
+export default definePlugin({
+    name: 'sandbox',
+    metadata: {
+        displayName: 'Sandbox Adapter',
+    },
+});

package/plugin.ts

@@ -1,8 +0,0 @@
-import { definePlugin } from '@zhin.js/plugin-runtime';
-
-export default definePlugin({
-  name: 'sandbox',
-  metadata: {
-    displayName: 'Sandbox Adapter',
-  },
-});