tavern-harness 0.1.12 → 0.1.13

package/src/components/ChatView.tsx

@@ -9,6 +9,11 @@ import { effectiveDisplayQueue, speakerLabel, suggestMagicCommands } from '../co
 import { onChatScroll, onQueueScroll, onQueueScrollIntent, registerChatEl, registerQueueEl, scrollChatTo, scrollQueueToLoop } from '../core/linkedScroll';
 import { useT, translate } from '../core/i18n';
 import { escapeRegExp, prettyJson, trimEdgeNewlines } from '../core/strings';
+import { copyText } from '../core/clipboard';
+import { clearTextSelection, shouldSuppressContextMenuWhileTyping, useTouchLongPress } from '../core/longPress';
+import { fixedViewportPoint } from '../core/viewport';
+import { keepStickyBottom } from '../core/stickyBottom';
+import { PopoverMenu } from './PopoverMenu';
 
 const CharacterBookEditor = lazy(() => import('./CharacterBookEditor'));
 
@@ -137,6 +142,14 @@ export function ChatView({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [messages.length, updateStreaming, messages[messages.length - 1]?.content.length, isGroup]);
 
+  // 软键盘弹起/收起、输入框增高都会改变滚动容器高度；在绘制前同步贴底，
+  // 让内容与输入框在同一帧到位（实现见 core/stickyBottom.ts）。
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    return keepStickyBottom(el);
+  }, []);
+
   const npcId = session.associatedId;
   const npc = useStore((s) => s.npcs.find((n) => n.id === npcId));
   const userPersonaName = useStore((s) => {
@@ -202,6 +215,10 @@ export function ChatView({
                   className="sys-banner fade-up compression-banner"
                   onContextMenu={(e) => {
                     e.preventDefault();
+                    // 软键盘弹出期间不响应触摸长按，避免菜单打断输入；
+                    // 触摸可能先让输入框失焦并收起键盘，还要看手势开始时的状态。
+                    // 鼠标右键不受影响。
+                    if (shouldSuppressContextMenuWhileTyping(e.nativeEvent)) return;
                     const compression = compressionsByEndMessageId.get(m.id!);
                     if (compression) openCompressionMenu(e, compression.summary, compression, t('chat.contextCompressed'));
                   }}
@@ -225,6 +242,14 @@ function lastMsgId(messages: ChatMessage[]): number | undefined {
 // 单条消息气泡
 // ============================================================
 
+/** 消息气泡共用的长按 / 右键菜单手势。 */
+function useMessageLongPress(msg: ChatMessage, session: ChatSession) {
+  return useTouchLongPress(
+    (point) => openMsgMenuAt(point, msg, session),
+    (event) => openMsgMenu(event, msg, session),
+  );
+}
+
 function MessageBubble({
   msg,
   session,
@@ -250,6 +275,7 @@ function MessageBubble({
   const t = useT();
   const providers = useStore((s) => s.providers);
   const turnStreaming = useStore((s) => s.streaming.sessionId === session.id);
+  const longPressProps = useMessageLongPress(msg, session);
   // System 消息（/new 标记）
   if (msg.role === 'system') {
     const content = msg.content === '开始新话题' ? t('chat.newTopicMarker') : msg.content;
@@ -356,7 +382,7 @@ function MessageBubble({
       className={`msg-row fade-up ${streaming ? 'streaming' : ''}`}
       data-loop={loopIndex ?? undefined}
       data-speaker={speakerKey ?? undefined}
-      onContextMenu={(e) => { e.preventDefault(); openMsgMenu(e, msg, session); }}
+      {...longPressProps}
     >
       <Avatar name={speakerName} colorOrdinal={npcHue} imageUrl={npcAvatar} />
       <div className="msg-body">
@@ -396,14 +422,8 @@ function MessageBubble({
                 ))}
               </div>
             )}
-            <div className="bubble-content-row">
-              <div className="bubble-text">
-                {displayContent ? <Markdown text={displayContent} mentionNames={mentionNames} /> : streaming && <span className="stream-cursor" />}
-              </div>
-              {/* 编辑按钮：位于正文气泡内最右侧，铅笔图标 */}
-              <button className="msg-edit-btn" title={t('chat.editMsg')} onClick={() => startEditingMsg(msg.id!)}>
-                <Icon name="pencil" size={13} />
-              </button>
+            <div className="bubble-text">
+              {displayContent ? <Markdown text={displayContent} mentionNames={mentionNames} /> : streaming && <span className="stream-cursor" />}
             </div>
           </div>
         )}
@@ -497,7 +517,7 @@ function BubbleEditor({
         </div>
       )}
       <div className="bubble-editor-actions">
-        <div style={{ display: 'flex', gap: 8 }}>
+        <div className="bubble-editor-actions-start">
           <input
             ref={fileRef}
             type="file"
@@ -516,7 +536,7 @@ function BubbleEditor({
             <Icon name="image" size={12} /> {t('chat.addAttachment')}
           </button>
         </div>
-        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+        <div className="bubble-editor-actions-end">
           <span className="bubble-editor-hint">{t('chat.saveHint')}</span>
           <button className="btn btn-sm" onClick={onDone}>{t('common.cancel')}</button>
           <button className="btn btn-sm btn-primary" disabled={!text.trim() || streaming} onClick={primaryAction}>
@@ -531,13 +551,19 @@ function BubbleEditor({
 function UserBubble({ msg, session, userPersonaName, editing, loopIndex }: { msg: ChatMessage; session: ChatSession; userPersonaName: string | null; editing?: boolean; loopIndex?: number | null }) {
   const t = useT();
   const participants = useStore((s) => (session.id != null ? (s.participants[session.id] ?? []) : []));
+  const longPressProps = useMessageLongPress(msg, session);
   // 群聊中「用户消息」的 @角色名 也作为特殊指令高亮（点名）
   const mentionNames =
     session.mode === 'GROUP'
       ? participants.filter((p) => p.kind === 'NPC').map((p) => p.displayName)
       : [];
   return (
-    <div className="msg-row user-row fade-up" data-loop={loopIndex ?? undefined} data-speaker="player" onContextMenu={(e) => { e.preventDefault(); openMsgMenu(e, msg, session); }}>
+    <div
+      className="msg-row user-row fade-up"
+      data-loop={loopIndex ?? undefined}
+      data-speaker="player"
+      {...longPressProps}
+    >
       <div className="avatar sm user-avatar">{t('common.me')}</div>
       <div className="msg-body">
         <div className="msg-head right">
@@ -555,13 +581,8 @@ function UserBubble({ msg, session, userPersonaName, editing, loopIndex }: { msg
                 ))}
               </div>
             )}
-            <div className="bubble-content-row">
-              <div className="bubble-text">
-                {msg.content && <Markdown text={displayUserPersonaPlaceholder(msg.content, userPersonaName)} mentionNames={mentionNames} />}
-              </div>
-              <button className="msg-edit-btn" title={t('chat.editMsg')} onClick={() => startEditingMsg(msg.id!)}>
-                <Icon name="pencil" size={13} />
-              </button>
+            <div className="bubble-text">
+              {msg.content && <Markdown text={displayUserPersonaPlaceholder(msg.content, userPersonaName)} mentionNames={mentionNames} />}
             </div>
           </div>
         )}
@@ -646,6 +667,7 @@ export function ChatInput({ sessionId }: { sessionId: number }) {
   const providers = useStore((s) => s.providers);
   const defaultModel = useStore((s) => s.settings?.defaultModel?.trim() || '');
   const defaultProviderId = useStore((s) => s.settings?.defaultProviderId ?? null);
+  const composerPlaceholder = session?.mode === 'GROUP' ? t('chat.phGroup') : t('chat.phSingle');
 
   const canSend = text.trim().length > 0 || attachments.length > 0;
 
@@ -958,11 +980,8 @@ export function ChatInput({ sessionId }: { sessionId: number }) {
             }}
             onClick={(e) => detectMention(text, e.currentTarget.selectionStart ?? text.length)}
             onKeyUp={(e) => detectMention(text, e.currentTarget.selectionStart ?? text.length)}
-            placeholder={
-              session?.mode === 'GROUP'
-                ? t('chat.phGroup')
-                : t('chat.phSingle')
-            }
+            aria-label={composerPlaceholder}
+            placeholder={composerPlaceholder}
             rows={1}
             style={{ height: 'auto', minHeight: 38 }}
           />
@@ -1093,11 +1112,15 @@ function notifyMsgMenu() {
   msgMenuListeners.forEach((fn) => fn());
 }
 function openMsgMenu(e: React.MouseEvent, msg: ChatMessage, session: ChatSession) {
-  msgMenuState = { x: e.clientX, y: e.clientY, msg, session };
+  if (window.matchMedia('(pointer: coarse)').matches) clearTextSelection();
+  openMsgMenuAt({ x: e.clientX, y: e.clientY }, msg, session);
+}
+function openMsgMenuAt(point: { x: number; y: number }, msg: ChatMessage, session: ChatSession) {
+  msgMenuState = { ...fixedViewportPoint(point), msg, session };
   notifyMsgMenu();
 }
 function openCompressionMenu(e: React.MouseEvent, summary: string | undefined, rawLog: RawLogData | undefined, title: string) {
-  msgMenuState = { x: e.clientX, y: e.clientY, summary, rawLog, title };
+  msgMenuState = { ...fixedViewportPoint({ x: e.clientX, y: e.clientY }), summary, rawLog, title };
   notifyMsgMenu();
 }
 function closeMsgMenu() {
@@ -1174,36 +1197,45 @@ export function MessageMenu() {
   if (!('msg' in msgMenuState)) {
     const { x, y, summary, rawLog: compressionRawLog, title } = msgMenuState;
     return (
-      <>
-        <div className="overlay-msg" onClick={closeMsgMenu} />
-        <div className="msg-menu card" style={{ left: Math.min(x, window.innerWidth - 190), top: Math.min(y, window.innerHeight - 200) }}>
-          <button
-            className="msg-menu-item"
-            disabled={!summary}
-            onClick={() => {
-              if (summary) setCompressionSummary({ content: summary, title });
-              closeMsgMenu();
-            }}
-          >
-            <Icon name="eye" size={13} /> {t('chat.viewMemory')}
-          </button>
-          <button
-            className="msg-menu-item"
-            disabled={!compressionRawLog?.rawRequestBody && !compressionRawLog?.rawResponseBody}
-            onClick={() => {
-              if (compressionRawLog) setRawLog({ data: compressionRawLog, title, filename: 'raw-log-context-compression.txt' });
-              closeMsgMenu();
-            }}
-          >
-            <Icon name="file" size={13} /> {t('chat.viewRaw')}
-          </button>
-        </div>
-      </>
+      <PopoverMenu key={`${x}:${y}:compress`} point={{ x, y }} onClose={closeMsgMenu}>
+        <button
+          className="msg-menu-item"
+          disabled={!summary}
+          onClick={() => {
+            if (summary) setCompressionSummary({ content: summary, title });
+            closeMsgMenu();
+          }}
+        >
+          <Icon name="eye" size={13} /> {t('chat.viewMemory')}
+        </button>
+        <button
+          className="msg-menu-item"
+          disabled={!compressionRawLog?.rawRequestBody && !compressionRawLog?.rawResponseBody}
+          onClick={() => {
+            if (compressionRawLog) setRawLog({ data: compressionRawLog, title, filename: 'raw-log-context-compression.txt' });
+            closeMsgMenu();
+          }}
+        >
+          <Icon name="file" size={13} /> {t('chat.viewRaw')}
+        </button>
+      </PopoverMenu>
     );
   }
   const { x, y, msg } = msgMenuState;
 
   const actions: Array<{ label: string; icon: string; onClick: () => void; danger?: boolean }> = [];
+  if (msg.content.trim()) {
+    // 触屏下消息正文禁用了文本选择，复制必须走菜单
+    actions.push({
+      label: t('chat.copyMsg'),
+      icon: 'copy',
+      onClick: () => {
+        void copyText(msg.content).then((copied) => {
+          addToast(copied ? t('toast.copied') : t('toast.copyFailed'));
+        });
+      },
+    });
+  }
   if (msg.role === 'user' || msg.role === 'assistant') {
     actions.push({
       label: t('chat.editMsg'),
@@ -1252,24 +1284,21 @@ export function MessageMenu() {
   });
 
   return (
-    <>
-      <div className="overlay-msg" onClick={closeMsgMenu} />
-      <div className="msg-menu card" style={{ left: Math.min(x, window.innerWidth - 190), top: Math.min(y, window.innerHeight - 200) }}>
-        {actions.map((a) => (
-          <button
-            key={a.label}
-            className="msg-menu-item"
-            onClick={() => {
-              closeMsgMenu();
-              a.onClick();
-            }}
-          >
-            <Icon name={a.icon} size={13} /> {a.label}
-          </button>
-        ))}
-        {actions.length === 0 && <div style={{ padding: 10, fontSize: 12, color: 'var(--text-faint)' }}>{t('chat.noActions')}</div>}
-      </div>
-    </>
+    <PopoverMenu key={`${x}:${y}:${msg.id ?? ''}`} point={{ x, y }} onClose={closeMsgMenu}>
+      {actions.map((a) => (
+        <button
+          key={a.label}
+          className="msg-menu-item"
+          onClick={() => {
+            closeMsgMenu();
+            a.onClick();
+          }}
+        >
+          <Icon name={a.icon} size={13} /> {a.label}
+        </button>
+      ))}
+      {actions.length === 0 && <div style={{ padding: 10, fontSize: 12, color: 'var(--text-faint)' }}>{t('chat.noActions')}</div>}
+    </PopoverMenu>
   );
 }
 

package/src/components/FileDisplayModal.tsx

@@ -6,6 +6,7 @@ import { useT } from '../core/i18n';
 import { highlightCode } from '../core/markdown';
 import { readWorkspaceFileText } from '../core/tools/generatedSkillExecutor';
 import { applySessionWorkspace } from '../core/tools/toolExecutor';
+import { fixedViewportBounds, isMobileViewport } from '../core/viewport';
 import type { DisplayFileRef } from '../types/models';
 
 // ============================================================
@@ -41,11 +42,18 @@ interface PipRect {
 }
 
 function createPipRect(): PipRect {
-  const height = Math.max(0, window.innerHeight - PIP_EDGE_GAP * 2);
+  // 用 visualViewport 边界（而不是 innerWidth/innerHeight）：Edge Android 的
+  // 底部工具栏不在布局视口里，PiP 落到底部时会被工具栏盖住。
+  const bounds = fixedViewportBounds();
+  const availableWidth = Math.max(0, bounds.right - bounds.left - PIP_EDGE_GAP * 2);
+  const availableHeight = Math.max(0, bounds.bottom - bounds.top - PIP_EDGE_GAP * 2);
+  const isMobile = isMobileViewport();
+  const width = Math.min(isMobile ? 360 : 440, availableWidth);
+  const height = Math.min(isMobile ? 300 : 380, availableHeight);
   return {
-    x: PIP_EDGE_GAP,
-    y: PIP_EDGE_GAP,
-    width: Math.min(440, Math.max(0, window.innerWidth - PIP_EDGE_GAP * 2)),
+    x: Math.max(bounds.left + PIP_EDGE_GAP, bounds.right - width - PIP_EDGE_GAP),
+    y: Math.max(bounds.top + PIP_EDGE_GAP, bounds.bottom - height - PIP_EDGE_GAP),
+    width,
     height,
   };
 }
@@ -230,23 +238,26 @@ export function FileDisplayModal() {
         pipGestureRef.current = null;
         return;
       }
+      // 与 createPipRect 使用同一套视觉视口边界，避免拖到 Edge Android
+      // 底部工具栏下面（innerHeight 包含被工具栏覆盖的区域）。
+      const bounds = fixedViewportBounds();
       if (gesture.type === 'move') {
-        setPipRect((rect) => ({
-          ...rect,
-          x: Math.min(
-            Math.max(PIP_EDGE_GAP, window.innerWidth - rect.width - PIP_EDGE_GAP),
-            Math.max(PIP_EDGE_GAP, gesture.startX + e.clientX - gesture.pointerX),
-          ),
-          y: Math.min(
-            Math.max(PIP_EDGE_GAP, window.innerHeight - rect.height - PIP_EDGE_GAP),
-            Math.max(PIP_EDGE_GAP, gesture.startY + e.clientY - gesture.pointerY),
-          ),
-        }));
+        setPipRect((rect) => {
+          const minX = bounds.left + PIP_EDGE_GAP;
+          const maxX = Math.max(minX, bounds.right - rect.width - PIP_EDGE_GAP);
+          const minY = bounds.top + PIP_EDGE_GAP;
+          const maxY = Math.max(minY, bounds.bottom - rect.height - PIP_EDGE_GAP);
+          return {
+            ...rect,
+            x: Math.min(maxX, Math.max(minX, gesture.startX + e.clientX - gesture.pointerX)),
+            y: Math.min(maxY, Math.max(minY, gesture.startY + e.clientY - gesture.pointerY)),
+          };
+        });
         return;
       }
       setPipRect((rect) => {
-        const availableWidth = window.innerWidth - rect.x - PIP_EDGE_GAP;
-        const availableHeight = window.innerHeight - rect.y - PIP_EDGE_GAP;
+        const availableWidth = Math.max(0, bounds.right - rect.x - PIP_EDGE_GAP);
+        const availableHeight = Math.max(0, bounds.bottom - rect.y - PIP_EDGE_GAP);
         return {
           ...rect,
           width: Math.min(availableWidth, Math.max(Math.min(PIP_MIN_WIDTH, availableWidth), gesture.startWidth + e.clientX - gesture.pointerX)),

package/src/components/NewSessionMenu.tsx

@@ -1,22 +1,18 @@
 import { useEffect, useState } from 'react';
 import {
   DndContext,
-  PointerSensor,
-  KeyboardSensor,
   closestCenter,
-  useSensor,
-  useSensors,
   type Modifier,
   type DragEndEvent,
 } from '@dnd-kit/core';
 import {
   SortableContext,
   arrayMove,
-  sortableKeyboardCoordinates,
   verticalListSortingStrategy,
   useSortable,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { useSortableSensors } from '../core/sortableSensors';
 import { useStore, createSession } from '../store/store';
 import { Avatar, Icon, Modal } from './shared';
 import { useT } from '../core/i18n';
@@ -58,10 +54,7 @@ export function NewSessionMenu({ onClose, editingSession }: { onClose: () => voi
   const [enableGreeting, setEnableGreeting] = useState(editingSession?.enableGreeting !== false);
   const selectedNpcIds = participantOrder.filter((id) => id !== -1);
   const modeLabel = selectedNpcIds.length === 0 ? t('newSession.notSelected') : selectedNpcIds.length === 1 ? t('newSession.npcChat') : t('newSession.groupChat', { n: selectedNpcIds.length });
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
-  );
+  const sensors = useSortableSensors();
 
   useEffect(() => {
     if (!editingSession?.id) return;

package/src/components/PopoverMenu.tsx

@@ -0,0 +1,54 @@
+import { useLayoutEffect, useRef, useState, type ReactNode } from 'react';
+import { clampPopoverPosition, fixedViewportBounds, type ViewportPoint } from '../core/viewport';
+
+/**
+ * 浮动菜单（消息菜单 / 会话菜单共用）：遮罩 + 贴边钳制的卡片。
+ *
+ * 菜单项数量随上下文变化，用硬编码宽高去钳制会算错位置。这里先按触发点挂载，
+ * 再用 `useLayoutEffect` 在绘制前按实测尺寸重新钳制一次。测量完成前菜单保持
+ * `visibility: hidden`：即使个别 WebView 把布局副作用推迟到一帧之后，用户也
+ * 不会看到菜单从触发点跳到钳制位置。
+ * 切换菜单时由外层 `key` 触发重新挂载，保证每次打开都会重新测量。
+ */
+export function PopoverMenu({
+  point,
+  onClose,
+  children,
+}: {
+  point: ViewportPoint;
+  onClose: () => void;
+  children: ReactNode;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState<{ left: number; top: number } | null>(null);
+
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    setPosition(
+      clampPopoverPosition(
+        point,
+        { width: element.offsetWidth, height: element.offsetHeight },
+        fixedViewportBounds(),
+      ),
+    );
+    // 点到点之间不重复渲染：point 对象每次都是新引用，按坐标值比较。
+  }, [point.x, point.y]);
+
+  return (
+    <>
+      <div className="overlay-msg" onClick={onClose} />
+      <div
+        ref={ref}
+        className="msg-menu card"
+        style={{
+          left: position?.left ?? point.x,
+          top: position?.top ?? point.y,
+          visibility: position ? 'visible' : 'hidden',
+        }}
+      >
+        {children}
+      </div>
+    </>
+  );
+}

package/src/components/SettingsView.tsx

@@ -7,6 +7,8 @@ import { Icon, Modal } from './shared';
 import { DeleteConfirmDialog } from './DeleteConfirmDialog';
 import { isProxyUrl, isNetworkLikeError, toProxyUrl } from '../core/proxy';
 import { useT } from '../core/i18n';
+import { APP_VERSION, useHasUnseenVersion } from '../core/version';
+import { VersionHistoryModal } from './VersionHistoryModal';
 
 // ============================================================
 // 设置视图（模型服务 / 超参数 / 主题）
@@ -20,7 +22,9 @@ export function SettingsView() {
   const refreshProviders = useStore((s) => s.refreshProviders);
   const [showResetConfirm, setShowResetConfirm] = useState(false);
   const [resetting, setResetting] = useState(false);
+  const [showVersionHistory, setShowVersionHistory] = useState(false);
   const t = useT();
+  const hasUnseenVersion = useHasUnseenVersion();
 
   if (!settings) return null;
 
@@ -76,7 +80,7 @@ export function SettingsView() {
           <table className="table param-table">
             <tbody>
               <tr>
-                <td style={{ width: 170 }}>
+                <td className="param-label">
                   <div className="s-label">Temperature</div>
                   <div className="s-desc">{t('settings.tempDesc')}</div>
                 </td>
@@ -197,6 +201,20 @@ export function SettingsView() {
           </div>
         </div>
 
+        <div className="set-section settings-about-section">
+          <div>
+            <h3>{t('settings.aboutTitle')}</h3>
+            <p className="settings-reset-desc">{t('settings.aboutDesc', { version: APP_VERSION })}</p>
+          </div>
+          <button
+            className="btn settings-about-button"
+            onClick={() => setShowVersionHistory(true)}
+          >
+            <Icon name="book" size={14} /> {t('settings.viewChangelog')}
+            {hasUnseenVersion && <span className="unseen-dot" title={t('changelog.unseen')} />}
+          </button>
+        </div>
+
         <div className="set-section settings-reset-section">
           <div>
             <h3>{t('settings.resetTitle')}</h3>
@@ -208,6 +226,8 @@ export function SettingsView() {
         </div>
       </div>
 
+      {showVersionHistory && <VersionHistoryModal onClose={() => setShowVersionHistory(false)} />}
+
       {showResetConfirm && (
         <Modal onClose={() => !resetting && setShowResetConfirm(false)} width="min(420px, calc(100vw - 32px))">
           <div className="modal-head">