@ahggg/dsh-side-chat 0.7.1 → 0.7.3

package/lib/client/selection/SelectionActions.js

@@ -10,97 +10,115 @@ export function calculateSelectionActionsPosition(rect, size, touch, viewport =
     const edge = 8;
     const width = Math.max(0, size.width);
     const height = Math.max(0, size.height);
-    const left = clamp(rect.x + rect.width / 2 - width / 2, edge, viewport.width - width - edge);
+    // Range and fixed-position coordinates use the layout viewport origin. A
+    // visual viewport must therefore contribute both its size and its offset.
+    const viewportLeft = viewport.offsetLeft ?? 0;
+    const viewportTop = viewport.offsetTop ?? 0;
+    const viewportRight = viewportLeft + viewport.width;
+    const viewportBottom = viewportTop + viewport.height;
+    const left = clamp(rect.x + rect.width / 2 - width / 2, viewportLeft + edge, viewportRight - width - edge);
     const belowGap = touch ? 12 : 8;
     const aboveGap = touch ? 64 : 8;
     const below = rect.y + rect.height + belowGap;
     const above = rect.y - height - aboveGap;
-    const belowFits = below + height <= viewport.height - edge;
-    const aboveFits = above >= edge;
+    const belowFits = below + height <= viewportBottom - edge;
+    const aboveFits = above >= viewportTop + edge;
     let top;
-    if (touch && belowFits)
+    if (belowFits)
         top = below;
     else if (aboveFits)
         top = above;
-    else if (belowFits)
-        top = below;
     else {
-        const roomAbove = rect.y - aboveGap - edge;
-        const roomBelow = viewport.height - edge - rect.y - rect.height - belowGap;
+        const roomAbove = rect.y - aboveGap - viewportTop - edge;
+        const roomBelow = viewportBottom - edge - rect.y - rect.height - belowGap;
         top = roomAbove >= roomBelow ? above : below;
     }
     return {
         left,
-        top: clamp(top, edge, viewport.height - height - edge),
+        top: clamp(top, viewportTop + edge, viewportBottom - height - edge),
     };
 }
-export function SelectionActions({ selection, touchInteraction = false, askDisabledReason, annotationNumber = 1, annotationEditor, onAddToChat, onMoreDetails, onAskInSideChat, onAnnotationEditorChange, onDismiss, }) {
+export function SelectionActions({ selection, touchInteraction = false, askDisabledReason, annotationNumber = 1, annotationEditor, onAddToChat, onMoreDetails, onAskInSideChat, onAnnotationEditorChange, onRemoveAnnotation, onDismiss, }) {
     const [editingAnnotation, setEditingAnnotation] = useState(annotationEditor !== undefined);
     const [comment, setComment] = useState(annotationEditor?.initialComment ?? '');
-    const [toolbarGeometry, setToolbarGeometry] = useState(() => ({
+    const [toolbarSize, setToolbarSize] = useState(() => ({
         width: 0,
         height: 0,
-        viewportWidth: selection.rect.viewportWidth,
-        viewportHeight: selection.rect.viewportHeight,
+    }));
+    const [viewport, setViewport] = useState(() => ({
+        width: selection.rect.viewportWidth,
+        height: selection.rect.viewportHeight,
+        offsetLeft: 0,
+        offsetTop: 0,
     }));
     const commentRef = useRef(null);
     const toolbarRef = useRef(null);
     const touchActivationRef = useRef(null);
-    const toolbarPosition = calculateSelectionActionsPosition(selection.rect, toolbarGeometry, touchInteraction, { width: toolbarGeometry.viewportWidth, height: toolbarGeometry.viewportHeight });
+    const toolbarPosition = calculateSelectionActionsPosition(selection.rect, toolbarSize, touchInteraction, viewport);
     const style = {
         left: toolbarPosition.left,
         top: toolbarPosition.top,
     };
-    const editorWidth = Math.min(420, selection.rect.viewportWidth - 16);
-    const editorAbove = selection.rect.y - 118;
+    const viewportLeft = viewport.offsetLeft;
+    const viewportTop = viewport.offsetTop;
+    const viewportRight = viewportLeft + viewport.width;
+    const viewportBottom = viewportTop + viewport.height;
+    const editorEdge = 8;
+    const editorHeight = 118;
+    const editorWidth = Math.max(0, Math.min(420, viewport.width - editorEdge * 2));
+    const editorAbove = selection.rect.y - editorHeight;
+    const editorBelow = selection.rect.y + selection.rect.height + 12;
     const editorStyle = {
-        left: clamp(selection.rect.x + selection.rect.width + 28, 8, selection.rect.viewportWidth - editorWidth - 8),
-        top: editorAbove >= 8
-            ? editorAbove
-            : clamp(selection.rect.y + selection.rect.height + 12, 8, selection.rect.viewportHeight - 126),
+        left: clamp(selection.rect.x + selection.rect.width + 28, viewportLeft + editorEdge, viewportRight - editorWidth - editorEdge),
+        top: clamp(editorAbove >= viewportTop + editorEdge ? editorAbove : editorBelow, viewportTop + editorEdge, viewportBottom - editorHeight - editorEdge),
         width: editorWidth,
     };
+    const markerEdge = 4;
+    const markerSize = 22;
     const markerStyle = {
-        left: clamp(selection.rect.x + selection.rect.width + 3, 4, selection.rect.viewportWidth - 26),
-        top: clamp(selection.rect.y - 12, 4, selection.rect.viewportHeight - 26),
+        left: clamp(selection.rect.x + selection.rect.width + 3, viewportLeft + markerEdge, viewportRight - markerSize - markerEdge),
+        top: clamp(selection.rect.y - 12, viewportTop + markerEdge, viewportBottom - markerSize - markerEdge),
     };
     const markerNumber = annotationNumber > 99 ? '99+' : String(annotationNumber);
     const keepSelection = (event) => { event.preventDefault(); };
     useLayoutEffect(() => {
-        if (editingAnnotation)
-            return;
-        const toolbar = toolbarRef.current;
-        if (toolbar === null)
-            return;
+        const visualViewport = window.visualViewport;
         const measure = () => {
-            const bounds = toolbar.getBoundingClientRect();
-            const visualViewport = window.visualViewport;
-            const viewportWidth = visualViewport?.width ?? window.innerWidth ?? selection.rect.viewportWidth;
-            const viewportHeight = visualViewport?.height ?? window.innerHeight ?? selection.rect.viewportHeight;
-            const next = {
-                width: bounds.width,
-                height: bounds.height,
-                viewportWidth,
-                viewportHeight,
+            const nextViewport = {
+                width: visualViewport?.width ?? window.innerWidth ?? selection.rect.viewportWidth,
+                height: visualViewport?.height ?? window.innerHeight ?? selection.rect.viewportHeight,
+                offsetLeft: visualViewport?.offsetLeft ?? 0,
+                offsetTop: visualViewport?.offsetTop ?? 0,
             };
-            setToolbarGeometry(current => current.width === next.width
-                && current.height === next.height
-                && current.viewportWidth === next.viewportWidth
-                && current.viewportHeight === next.viewportHeight
+            setViewport(current => current.width === nextViewport.width
+                && current.height === nextViewport.height
+                && current.offsetLeft === nextViewport.offsetLeft
+                && current.offsetTop === nextViewport.offsetTop
+                ? current
+                : nextViewport);
+            const toolbar = toolbarRef.current;
+            if (toolbar === null)
+                return;
+            const bounds = toolbar.getBoundingClientRect();
+            const nextSize = { width: bounds.width, height: bounds.height };
+            setToolbarSize(current => current.width === nextSize.width
+                && current.height === nextSize.height
                 ? current
-                : next);
+                : nextSize);
         };
         measure();
+        const toolbar = toolbarRef.current;
         const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(measure);
-        observer?.observe(toolbar);
+        if (toolbar !== null)
+            observer?.observe(toolbar);
         window.addEventListener('resize', measure);
-        window.visualViewport?.addEventListener('resize', measure);
-        window.visualViewport?.addEventListener('scroll', measure);
+        visualViewport?.addEventListener('resize', measure);
+        visualViewport?.addEventListener('scroll', measure);
         return () => {
             observer?.disconnect();
             window.removeEventListener('resize', measure);
-            window.visualViewport?.removeEventListener('resize', measure);
-            window.visualViewport?.removeEventListener('scroll', measure);
+            visualViewport?.removeEventListener('resize', measure);
+            visualViewport?.removeEventListener('scroll', measure);
         };
     }, [editingAnnotation, selection, touchInteraction]);
     useEffect(() => {
@@ -111,8 +129,7 @@ export function SelectionActions({ selection, touchInteraction = false, askDisab
         setEditingAnnotation(false);
         setComment('');
         onAnnotationEditorChange?.(false);
-        if (annotationEditor !== undefined)
-            onDismiss();
+        onDismiss();
     };
     const saveAnnotation = () => {
         const trimmed = comment.trim();
@@ -172,7 +189,7 @@ export function SelectionActions({ selection, touchInteraction = false, askDisab
         action();
     };
     if (editingAnnotation) {
-        return (_jsxs(_Fragment, { children: [annotationEditor === undefined && (_jsx("span", { className: "dsh-side-chat-selection-marker", "aria-hidden": "true", "data-large": annotationNumber > 99 || undefined, style: markerStyle, children: markerNumber })), _jsxs("form", { className: "dsh-side-chat-selection-comment", role: "dialog", "aria-label": annotationEditor?.dialogLabel ?? 'Add annotation comment', style: editorStyle, onSubmit: submitAnnotation, onMouseDown: (event) => { event.stopPropagation(); }, onKeyUp: (event) => { event.stopPropagation(); }, children: [_jsx("textarea", { ref: commentRef, value: comment, rows: 2, "aria-label": "Optional annotation comment", placeholder: "Add an optional comment\u2026", onChange: (event) => { setComment(event.currentTarget.value); }, onKeyDown: annotationKeyDown }), _jsxs("div", { className: "dsh-side-chat-selection-comment-actions", children: [_jsx("button", { type: "button", onClick: closeEditor, children: "Cancel" }), _jsx("button", { type: "submit", className: "dsh-side-chat-selection-comment-save", children: "Save" })] })] })] }));
+        return (_jsxs(_Fragment, { children: [annotationEditor === undefined && (_jsx("span", { className: "dsh-side-chat-selection-marker", "aria-hidden": "true", "data-large": annotationNumber > 99 || undefined, style: markerStyle, children: markerNumber })), _jsxs("form", { className: "dsh-side-chat-selection-comment", role: "dialog", "aria-label": annotationEditor?.dialogLabel ?? 'Add annotation comment', style: editorStyle, onSubmit: submitAnnotation, onMouseDown: (event) => { event.stopPropagation(); }, onKeyUp: (event) => { event.stopPropagation(); }, children: [_jsx("textarea", { ref: commentRef, value: comment, rows: 2, "aria-label": "Optional annotation comment", placeholder: "Add an optional comment\u2026", onChange: (event) => { setComment(event.currentTarget.value); }, onKeyDown: annotationKeyDown }), _jsxs("div", { className: "dsh-side-chat-selection-comment-actions", children: [annotationEditor !== undefined && onRemoveAnnotation !== undefined && (_jsx("button", { type: "button", onClick: onRemoveAnnotation, children: "Remove" })), _jsx("button", { type: "button", onClick: closeEditor, children: "Cancel" }), _jsx("button", { type: "submit", className: "dsh-side-chat-selection-comment-save", children: "Save" })] })] })] }));
     }
     return (_jsxs("div", { ref: toolbarRef, className: "dsh-side-chat-selection-actions", role: "toolbar", "aria-label": "Selected conversation text actions", "data-touch": touchInteraction || undefined, style: style, onMouseDown: keepSelection, onPointerDown: (event) => {
             if (touchInteraction && event.pointerType === 'touch')
@@ -182,4 +199,3 @@ export function SelectionActions({ selection, touchInteraction = false, askDisab
                 onDismiss();
         }, children: [_jsx("button", { type: "button", onPointerDown: (event) => { activateOnTouch(event, openAnnotationEditor); }, onClick: (event) => { activateOnClick(event, openAnnotationEditor); }, children: "Add to chat" }), _jsx("button", { type: "button", disabled: askDisabledReason !== undefined, title: askDisabledReason, onPointerDown: (event) => { activateOnTouch(event, showMoreDetails); }, onClick: (event) => { activateOnClick(event, showMoreDetails); }, children: "More details" }), _jsx("button", { type: "button", disabled: askDisabledReason !== undefined, title: askDisabledReason, onPointerDown: (event) => { activateOnTouch(event, askInSideChat); }, onClick: (event) => { activateOnClick(event, askInSideChat); }, children: "Ask in side chat" })] }));
 }
-//# sourceMappingURL=SelectionActions.js.map

package/lib/client/selection/selection-controller.d.ts

@@ -34,4 +34,3 @@ export declare function restoreDomConversationSelection(input: {
     readonly selection: ConversationSelection;
     readonly conversationRoot: HTMLElement;
 }): RestoredConversationSelection | undefined;
-//# sourceMappingURL=selection-controller.d.ts.map

package/lib/client/selection/selection-controller.js

@@ -162,4 +162,3 @@ export function restoreDomConversationSelection(input) {
     browserRange.setEnd(last.endContainer, last.endOffset);
     return { ranges, browserRange };
 }
-//# sourceMappingURL=selection-controller.js.map

package/lib/client/selection/selection-limits.d.ts

@@ -4,4 +4,3 @@ export declare function utf8ByteLength(value: string): number;
 export declare function selectionFitsLimit(value: string): boolean;
 /** Code-point-safe preview that never cuts a surrogate pair. */
 export declare function summarizeSelection(value: string, maxCodePoints?: number): string;
-//# sourceMappingURL=selection-limits.d.ts.map

package/lib/client/selection/selection-limits.js

@@ -16,4 +16,3 @@ export function summarizeSelection(value, maxCodePoints = 240) {
     const tailLength = maxCodePoints - headLength;
     return `${points.slice(0, headLength).join('')}…${points.slice(-tailLength).join('')}`;
 }
-//# sourceMappingURL=selection-limits.js.map

package/lib/client/selection/selection-normalizer.d.ts

@@ -13,4 +13,3 @@ export interface ConversationSelectionInput {
 }
 export declare function finalizeConversationSelection(input: ConversationSelectionInput): ConversationSelection;
 export declare function assertSelectionCurrent(selection: ConversationSelection, currentSessionId: SessionId | undefined): void;
-//# sourceMappingURL=selection-normalizer.d.ts.map

package/lib/client/selection/selection-normalizer.js

@@ -45,4 +45,3 @@ export function assertSelectionCurrent(selection, currentSessionId) {
         throw new SelectionValidationError('selection_stale', 'The parent conversation changed after selection.');
     }
 }
-//# sourceMappingURL=selection-normalizer.js.map

package/lib/client/side-chat-controller.d.ts

@@ -54,4 +54,3 @@ export declare class SideChatController implements HostObservable<SideChatState>
     private reset;
     private publish;
 }
-//# sourceMappingURL=side-chat-controller.d.ts.map

package/lib/client/side-chat-controller.js

@@ -420,4 +420,3 @@ export class SideChatController {
         this.observable.publish(Object.freeze(state));
     }
 }
-//# sourceMappingURL=side-chat-controller.js.map