@zhin.js/adapter-sandbox 5.0.4 → 5.0.6

package/src/protocol.ts

@@ -0,0 +1,200 @@
+/** Sandbox WebSocket wire protocol helpers (no legacy Adapter/Endpoint). */
+
+export type MessageType = 'private' | 'group' | 'guild' | 'direct' | 'channel';
+
+export interface MessageElement {
+  readonly type: string;
+  readonly data?: Record<string, unknown>;
+}
+
+export interface SandboxWsSocket {
+  send(data: string): void;
+  close(code?: number, reason?: string): void;
+  on?(event: 'message' | 'close' | 'error', listener: (...args: unknown[]) => void): void;
+  off?(
+    event: 'message' | 'close' | 'error',
+    listener: (...args: unknown[]) => void,
+  ): void;
+  addEventListener?(
+    type: 'message' | 'close' | 'error',
+    listener: (ev: Event | MessageEvent | CloseEvent) => void,
+  ): void;
+  removeEventListener?(
+    type: 'message' | 'close' | 'error',
+    listener: (ev: Event | MessageEvent | CloseEvent) => void,
+  ): void;
+}
+
+export type ResolvedSandboxBot = {
+  readonly context: 'sandbox';
+  readonly name: string;
+  readonly owner: string;
+  readonly randomNamePerConnection: boolean;
+};
+
+export interface SandboxAdapterConfig {
+  readonly endpoints?: ReadonlyArray<{
+    readonly context?: string;
+    readonly name?: string;
+    readonly owner?: string;
+  }>;
+}
+
+export function resolveSandboxEndpoint(
+  appConfig: SandboxAdapterConfig,
+): ResolvedSandboxBot {
+  const entry = appConfig.endpoints?.find((item) => item.context === 'sandbox');
+  const fixedName = typeof entry?.name === 'string' ? entry.name : undefined;
+  const name = fixedName || process.env.SANDBOX_BOT_NAME || 'sandbox-bot';
+  const owner = (typeof entry?.owner === 'string' && entry.owner)
+    || process.env.SANDBOX_BOT_OWNER
+    || 'sandbox-user';
+  return {
+    context: 'sandbox',
+    name,
+    owner,
+    randomNamePerConnection: !fixedName,
+  };
+}
+
+export function bindSandboxWsSocket(
+  ws: SandboxWsSocket,
+  handlers: {
+    onMessage: (raw: string) => void;
+    onClose: () => void;
+    onError?: (err: unknown) => void;
+  },
+): () => void {
+  if (typeof ws.on === 'function') {
+    const onMessage = (...args: unknown[]) => {
+      const data = args[0];
+      const raw = typeof data === 'string'
+        ? data
+        : data instanceof ArrayBuffer
+          ? new TextDecoder().decode(data)
+          : Buffer.isBuffer(data)
+            ? data.toString()
+            : String(data ?? '');
+      handlers.onMessage(raw);
+    };
+    ws.on('message', onMessage);
+    ws.on('close', handlers.onClose);
+    if (handlers.onError) ws.on('error', handlers.onError);
+    return () => {
+      ws.off?.('message', onMessage);
+      ws.off?.('close', handlers.onClose);
+      if (handlers.onError) ws.off?.('error', handlers.onError);
+    };
+  }
+  const onMessage = (ev: Event) => {
+    const data = (ev as MessageEvent).data;
+    handlers.onMessage(typeof data === 'string' ? data : '');
+  };
+  const onClose = () => handlers.onClose();
+  const onError = handlers.onError
+    ? () => handlers.onError?.(new Error('WebSocket error'))
+    : undefined;
+  ws.addEventListener!('message', onMessage);
+  ws.addEventListener!('close', onClose);
+  if (onError) ws.addEventListener!('error', onError);
+  return () => {
+    ws.removeEventListener!('message', onMessage);
+    ws.removeEventListener!('close', onClose);
+    if (onError) ws.removeEventListener!('error', onError);
+  };
+}
+
+export function parseSandboxWsPayload(raw: string): {
+  type: MessageType;
+  id: string;
+  content: MessageElement[];
+  timestamp: number;
+  text: string;
+  action?: { id: string; payload: string };
+} {
+  let payload: {
+    type?: MessageType;
+    id?: string;
+    content?: MessageElement[] | string;
+    text?: string;
+    timestamp?: number;
+  };
+  try {
+    payload = JSON.parse(raw) as typeof payload;
+  } catch {
+    payload = { text: raw };
+  }
+  const type = payload.type ?? 'private';
+  const id = payload.id ?? 'sandbox-user';
+  const content: MessageElement[] = typeof payload.content === 'string'
+    ? [{ type: 'text', data: { text: payload.content } }]
+    : Array.isArray(payload.content)
+      ? payload.content
+      : [{ type: 'text', data: { text: payload.text ?? raw } }];
+
+  const actionSegment = content.find((segment) => segment.type === 'action');
+  let action: { id: string; payload: string } | undefined;
+  if (actionSegment?.data) {
+    const actionPayload = typeof actionSegment.data.payload === 'string'
+      ? actionSegment.data.payload
+      : typeof actionSegment.data.id === 'string'
+        ? actionSegment.data.id
+        : '';
+    const actionId = typeof actionSegment.data.id === 'string'
+      ? actionSegment.data.id
+      : actionPayload;
+    if (actionId || actionPayload) {
+      action = { id: actionId || actionPayload, payload: actionPayload || actionId };
+    }
+  }
+
+  let text = content
+    .flatMap((segment) => (segment.type === 'text' && typeof segment.data?.text === 'string'
+      ? [segment.data.text]
+      : []))
+    .join('\n');
+  if (!text.trim()) {
+    text = (typeof payload.text === 'string' && payload.text.trim())
+      ? payload.text
+      : action?.payload ?? raw;
+  }
+  return { type, id, content, timestamp: payload.timestamp ?? Date.now(), text, action };
+}
+
+/**
+ * Wire-encode an already-rendered outbound payload.
+ * Canonical segment mapping (old `segment-mapper` re-export of `to/fromCanonicalSegments`
+ * from legacy `zhin.js`) is intentionally not done here — the gateway/core render path
+ * owns that before `endpoint.send`.
+ */
+export function formatSandboxOutbound(payload: unknown): string {
+  if (typeof payload === 'string') {
+    return JSON.stringify({
+      content: [{ type: 'text', data: { text: payload } }],
+      timestamp: Date.now(),
+    });
+  }
+  if (Array.isArray(payload)) {
+    return JSON.stringify({
+      content: payload,
+      timestamp: Date.now(),
+    });
+  }
+  return JSON.stringify({ content: payload, timestamp: Date.now() });
+}
+
+/** WebSocket.OPEN 常量值；Node <22 无全局 WebSocket，不能用 WebSocket.OPEN。 */
+const WS_OPEN = 1;
+
+export function whenWsOpen(ws: SandboxWsSocket, fn: () => void): void {
+  const std = ws as WebSocket;
+  if (typeof std.readyState === 'number') {
+    if (std.readyState === WS_OPEN) {
+      fn();
+      return;
+    }
+    std.addEventListener('open', fn, { once: true });
+    return;
+  }
+  fn();
+}

package/client/RichTextEditor.tsx

@@ -1,429 +0,0 @@
-import { useRef, useEffect, forwardRef, useImperativeHandle } from 'react'
-
-export interface MessageSegment {
-    type: 'text' | 'mention' | 'at' | 'face' | 'image' | 'video' | 'audio' | 'record' | 'file'
-    data: Record<string, any>
-}
-
-export interface RichTextEditorProps {
-    placeholder?: string
-    onSend?: (text: string, segments: MessageSegment[]) => void
-    onChange?: (text: string, segments: MessageSegment[]) => void
-    onAtTrigger?: (show: boolean, searchQuery: string, position?: { top: number; left: number }) => void
-    minHeight?: string
-    maxHeight?: string
-}
-
-export interface RichTextEditorRef {
-    focus: () => void
-    clear: () => void
-    insertFace: (faceId: number) => void
-    insertImage: (url: string) => void
-    insertVideo: (url: string) => void
-    insertAudio: (url: string) => void
-    insertAt: (name: string, id?: string) => void
-    replaceAtTrigger: (name: string, id?: string) => void
-    getContent: () => { text: string; segments: MessageSegment[] }
-}
-
-const RichTextEditor = forwardRef<RichTextEditorRef, RichTextEditorProps>(
-    ({ placeholder = '输入消息...', onSend, onChange, onAtTrigger, minHeight = '44px', maxHeight = '200px' }, ref) => {
-        const editorRef = useRef<HTMLDivElement>(null)
-        const atTriggerTextRef = useRef<Text | null>(null)
-
-        // 解析编辑器内容为文本和消息段
-        const parseEditorContent = (): { text: string; segments: MessageSegment[] } => {
-            if (!editorRef.current) return { text: '', segments: [] }
-
-            let text = ''
-            const segments: MessageSegment[] = []
-            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 as HTMLElement
-
-                    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: number) => {
-            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: string) => {
-            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: string) => {
-            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: string) => {
-            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: string, id?: string) => {
-            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: 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 as Text
-            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: string, id?: string) => {
-            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: React.ClipboardEvent<HTMLDivElement>) => {
-            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: React.KeyboardEvent<HTMLDivElement>) => {
-            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 (
-            <div
-                ref={editorRef}
-                contentEditable
-                suppressContentEditableWarning
-                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
-