@agentscope-ai/chat 1.1.71-beta.1782728583669 → 1.1.71

package/components/AgentScopeRuntimeWebUI/core/Chat/Input/index.tsx

@@ -1,21 +1,14 @@
-import { useCallback, type ReactNode } from "react";
+import { useCallback } from "react";
 import { useProviderContext, ChatInput, Disclaimer } from '@agentscope-ai/chat';
 import { useChatAnywhereOptions } from "../../Context/ChatAnywhereOptionsContext";
 import { useGetState } from 'ahooks';
 import { useChatAnywhereInput } from "../../Context/ChatAnywhereInputContext";
 import useAttachments from "./useAttachments";
 import { IAgentScopeRuntimeWebUIInputData } from "@agentscope-ai/chat";
-import type { QueueEnqueueResult, QueuedInputItem } from "../InputQueue";
 
 export interface InputProps {
   onCancel: () => void;
   onSubmit: (data: IAgentScopeRuntimeWebUIInputData) => void;
-  queue?: {
-    items: QueuedInputItem[];
-    isOwner: boolean;
-    panel?: ReactNode;
-    onEnqueue: (data: IAgentScopeRuntimeWebUIInputData) => QueueEnqueueResult | Promise<QueueEnqueueResult>;
-  };
 }
 
 export default function Input(props: InputProps) {
@@ -28,6 +21,9 @@ export default function Input(props: InputProps) {
     placeholder = '',
     disclaimer = '',
     maxLength,
+    showCharacterCount,
+    characterCountRender,
+    actionAffix,
     beforeSubmit = () => Promise.resolve(true),
     beforeUI,
     afterUI,
@@ -41,87 +37,29 @@ export default function Input(props: InputProps) {
     getFileList,
     setFileList,
     handlePasteFile,
+    handleDropFile,
     uploadIconButton,
     uploadFileListHeader
   } = useAttachments(attachments, { disabled: !!inputContext.disabled });
 
-  const getSubmittableData = useCallback(() => {
-    const fileList = (getFileList?.() || []).filter(i => i.response?.url);
-    const query = getContent();
-    if (!query.trim() && fileList.length === 0) return;
-
-    return {
-      query,
-      text: query,
-      fileList,
-      attachments: fileList,
-    };
-  }, [getContent, getFileList]);
-
-  const clearInput = useCallback(() => {
-    setContent('');
-    setFileList?.([]);
-  }, [setContent, setFileList]);
-
-  const handleEnqueue = useCallback(async () => {
-    const next = await beforeSubmit();
-    if (!next) return;
-
-    const data = getSubmittableData();
-    if (!data) return;
-    if (!props.queue) return;
-
-    const result = await props.queue.onEnqueue(data);
-    if (result.ok) {
-      clearInput();
-    }
-  }, [beforeSubmit, clearInput, getSubmittableData, props.queue]);
 
   const handleSubmit = useCallback(async () => {
     const next = await beforeSubmit();
     if (!next) return;
 
-    const data = getSubmittableData();
-    if (!data) return;
-
-    if (props.queue && (
-      inputContext.loading ||
-      props.queue.items.length ||
-      props.queue.isOwner === false
-    )) {
-      const result = await props.queue.onEnqueue(data);
-      if (result.ok) {
-        clearInput();
-      }
-    } else {
-      props.onSubmit(data);
-      clearInput();
-    }
-  }, [beforeSubmit, clearInput, getSubmittableData, inputContext.loading, props.onSubmit, props.queue]);
-
-  const handleKeyDownCapture = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (event.key !== 'Enter' || event.shiftKey) return;
-    if (event.nativeEvent?.isComposing) return;
-    if (!props.queue) return;
-    const forceEnqueue = event.ctrlKey || event.metaKey;
-    if (!forceEnqueue && !inputContext.loading && !props.queue?.items.length) return;
-
-    const data = getSubmittableData();
-    if (!data) return;
-
-    event.preventDefault();
-    event.stopPropagation();
-    void (forceEnqueue ? handleEnqueue() : handleSubmit());
-  }, [getSubmittableData, handleEnqueue, handleSubmit, inputContext.loading, props.queue, props.queue?.items.length]);
+    const fileList = (getFileList?.() || []).filter(i => i.response?.url);
+    props.onSubmit({ query: getContent(), fileList });
+    setContent('');
+    setFileList?.([]);
+  }, []);
 
   const handleCancel = useCallback(() => {
     props.onCancel();
-  }, [props.onCancel]);
+  }, []);
 
-  return <div className={prefixCls} onKeyDownCapture={handleKeyDownCapture}>
+  return <div className={prefixCls}>
     <div className={`${prefixCls}-wrapper`}>
       {beforeUI}
-      {props.queue?.panel}
       <ChatInput
         loading={inputContext.loading}
         disabled={inputContext.disabled}
@@ -134,11 +72,14 @@ export default function Input(props: InputProps) {
         header={uploadFileListHeader}
         onChange={setContent}
         maxLength={maxLength}
+        showCharacterCount={showCharacterCount}
+        characterCountRender={characterCountRender}
+        actionAffix={actionAffix}
         onSubmit={handleSubmit}
         onCancel={handleCancel}
-        allowSubmitWhenLoading={!!props.queue}
         allowSpeech={allowSpeech}
         onPasteFile={handlePasteFile}
+        onDropFile={handleDropFile}
         suggestions={suggestions}
       />
       {afterUI}

package/components/AgentScopeRuntimeWebUI/core/Chat/Input/useAttachments.tsx

@@ -6,6 +6,34 @@ import { SparkAttachmentLine } from "@agentscope-ai/icons";
 import { Sender, Attachments } from '@agentscope-ai/chat';
 import React, { useCallback, useRef, useState } from "react";
 
+function isAcceptedFile(file: File, accept?: string) {
+  if (!accept) return true;
+
+  const fileType = file.type || '';
+  const fileName = file.name || '';
+
+  return accept.split(',').some(pattern => {
+    const trimmed = pattern.trim();
+    if (!trimmed) return false;
+    if (trimmed.startsWith('.')) return fileName.toLowerCase().endsWith(trimmed.toLowerCase());
+    if (trimmed === '*/*') return true;
+    if (trimmed.includes('*')) {
+      const [acceptMain] = trimmed.split('/');
+      const [fileMain] = fileType.split('/');
+      return acceptMain === fileMain;
+    }
+    return fileType === trimmed;
+  });
+}
+
+function getFileExtension(fileName: string, fileType: string) {
+  const nameMatch = fileName.match(/\.([^.]+)$/);
+  if (nameMatch) return nameMatch[1].toLowerCase();
+
+  const typeMatch = fileType.match(/\/([^/+]+)/);
+  return typeMatch ? typeMatch[1].toLowerCase() : 'bin';
+}
+
 export default function useAttachments(
   attachments: IAgentScopeRuntimeWebUISenderAttachmentsOptions,
   options?: {
@@ -16,107 +44,142 @@ export default function useAttachments(
   const fileListRef = useRef<UploadFile[]>([]);
   fileListRef.current = fileList;
 
+  const setMergedFileList = useCallback((nextFileList: React.SetStateAction<UploadFile[]>) => {
+    const resolvedFileList = typeof nextFileList === 'function'
+      ? (nextFileList as (prev: UploadFile[]) => UploadFile[])(fileListRef.current)
+      : nextFileList;
+
+    fileListRef.current = resolvedFileList;
+    setFileList(resolvedFileList);
+  }, []);
+
   const getFileList = useCallback(() => fileListRef.current, []);
 
   const { trigger, ...rest } = attachments || {};
+  const {
+    accept,
+    beforeUpload,
+    customRequest,
+    maxCount,
+    onChange,
+  } = rest;
+  const disabled = !!options?.disabled;
   const uidCounter = useRef(0);
 
-  const handlePasteFile = useCallback((file: File) => {
-    if (!rest?.customRequest) return;
+  const handleManualFile = useCallback((file: File) => {
+    if (disabled || !customRequest || !isAcceptedFile(file, accept)) return;
+    if (maxCount && fileListRef.current.length >= maxCount) return;
 
     const fileType = file.type || '';
     const fileName = file.name || '';
 
-    if (rest.accept) {
-      const matched = rest.accept.split(',').some(pattern => {
-        const trimmed = pattern.trim();
-        if (!trimmed) return false;
-        if (trimmed.startsWith('.')) return fileName.toLowerCase().endsWith(trimmed.toLowerCase());
-        if (trimmed === '*/*') return true;
-        if (trimmed.includes('*')) {
-          const [acceptMain] = trimmed.split('/');
-          const [fileMain] = fileType.split('/');
-          return acceptMain === fileMain;
-        }
-        return fileType === trimmed;
-      });
-      if (!matched) return;
-    }
+    const startUpload = (fileToUpload: File | Blob) => {
+      if (maxCount && fileListRef.current.length >= maxCount) return;
+
+      const uploadType = fileToUpload.type || fileType;
+      const timestamp = Date.now();
+      const uid = `manual-${timestamp}-${uidCounter.current++}`;
+      const uploadFile: UploadFile = {
+        uid,
+        name: fileName || `file-${timestamp}.${getFileExtension(fileName, uploadType)}`,
+        size: fileToUpload.size,
+        type: uploadType,
+        status: 'uploading',
+        percent: 0,
+        originFileObj: fileToUpload as any,
+      };
 
-    if ((rest as any).maxCount && fileListRef.current.length >= (rest as any).maxCount) return;
+      setMergedFileList(prev => [...prev, uploadFile]);
+
+      if (uploadType.startsWith('image/')) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          const dataUrl = e.target?.result;
+          if (typeof dataUrl === 'string') {
+            setMergedFileList(prev => prev.map(f =>
+              f.uid === uid ? { ...f, thumbUrl: dataUrl } : f
+            ));
+          }
+        };
+        reader.readAsDataURL(fileToUpload);
+      }
 
-    const getExtension = () => {
-      const nameMatch = fileName.match(/\.([^.]+)$/);
-      if (nameMatch) return nameMatch[1].toLowerCase();
-      const typeMatch = fileType.match(/\/([^/+]+)/);
-      return typeMatch ? typeMatch[1].toLowerCase() : 'bin';
+      customRequest(
+        {
+          file: fileToUpload as any,
+          filename: 'file',
+          action: '',
+          method: 'POST',
+          onSuccess: (response: any) => {
+            setMergedFileList(prev => prev.map(f =>
+              f.uid === uid ? { ...f, status: 'done' as const, response, percent: 100 } : f
+            ));
+          },
+          onError: (error: any) => {
+            setMergedFileList(prev => prev.map(f =>
+              f.uid === uid ? { ...f, status: 'error' as const, error } : f
+            ));
+          },
+          onProgress: (event: any) => {
+            setMergedFileList(prev => prev.map(f =>
+              f.uid === uid ? { ...f, percent: event?.percent } : f
+            ));
+          },
+        },
+        { defaultRequest: () => undefined },
+      );
     };
 
-    const uid = `paste-${Date.now()}-${uidCounter.current++}`;
-    const uploadFile: UploadFile = {
-      uid,
-      name: fileName || `pasted-${Date.now()}.${getExtension()}`,
-      size: file.size,
-      type: fileType,
-      status: 'uploading',
-      percent: 0,
-      originFileObj: file as any,
-    };
+    try {
+      const beforeUploadResult = beforeUpload?.(file as any, [file as any]);
 
-    setFileList(prev => [...prev, uploadFile]);
-
-    if (fileType.startsWith('image/')) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const dataUrl = e.target?.result;
-        if (typeof dataUrl === 'string') {
-          setFileList(prev => prev.map(f =>
-            f.uid === uid ? { ...f, thumbUrl: dataUrl } : f
-          ));
-        }
-      };
-      reader.readAsDataURL(file);
-    }
+      if (beforeUploadResult === false || beforeUploadResult === Upload.LIST_IGNORE) {
+        return;
+      }
 
-    rest.customRequest(
-      {
-        file,
-        filename: 'file',
-        action: '',
-        method: 'POST',
-        onSuccess: (response: any) => {
-          setFileList(prev => prev.map(f =>
-            f.uid === uid ? { ...f, status: 'done' as const, response, percent: 100 } : f
-          ));
-        },
-        onError: (error: any) => {
-          setFileList(prev => prev.map(f =>
-            f.uid === uid ? { ...f, status: 'error' as const, error } : f
-          ));
-        },
-        onProgress: (event: any) => {
-          setFileList(prev => prev.map(f =>
-            f.uid === uid ? { ...f, percent: event?.percent } : f
-          ));
-        },
-      },
-      { defaultRequest: () => undefined },
-    );
-  }, [rest?.customRequest, rest?.accept]);
+      if (beforeUploadResult && typeof (beforeUploadResult as Promise<unknown>).then === 'function') {
+        (beforeUploadResult as Promise<File | Blob | boolean | string>).then((processedFile) => {
+          if (processedFile === false || processedFile === Upload.LIST_IGNORE) {
+            return;
+          }
+
+          if (processedFile && typeof processedFile === 'object') {
+            startUpload(processedFile as File | Blob);
+            return;
+          }
+
+          startUpload(file);
+        }).catch((error) => {
+          console.error('beforeUpload promise rejected:', error);
+        });
+        return;
+      }
+
+      if (beforeUploadResult && typeof beforeUploadResult === 'object') {
+        startUpload(beforeUploadResult as unknown as File | Blob);
+        return;
+      }
 
-  if (rest?.customRequest) {
+      startUpload(file);
+    } catch (error) {
+      console.error('beforeUpload rejected:', error);
+    }
+  }, [accept, beforeUpload, customRequest, disabled, maxCount, setMergedFileList]);
+
+  if (customRequest) {
     const uploadIconButton = <Upload
       fileList={fileList}
       showUploadList={false}
+      {...rest}
       onChange={(info) => {
-        setFileList(info.fileList);
+        setMergedFileList(info.fileList);
+        onChange?.(info);
       }}
-      {...rest}
-      disabled={options?.disabled}
+      disabled={disabled}
     >
       {
-        trigger ? React.createElement(trigger, { disabled: options?.disabled }) : <IconButton
-          disabled={options?.disabled}
+        trigger ? React.createElement(trigger, { disabled }) : <IconButton
+          disabled={disabled}
           icon={<SparkAttachmentLine />}
           bordered={false}
         />
@@ -130,7 +193,7 @@ export default function useAttachments(
     >
       <Attachments
         items={fileList}
-        onChange={(info) => setFileList(info.fileList)}
+        onChange={(info) => setMergedFileList(info.fileList)}
       />
     </Sender.Header>
 
@@ -138,8 +201,9 @@ export default function useAttachments(
     return {
       fileList,
       getFileList,
-      setFileList,
-      handlePasteFile,
+      setFileList: setMergedFileList,
+      handlePasteFile: handleManualFile,
+      handleDropFile: handleManualFile,
       uploadIconButton,
       uploadFileListHeader
     }
@@ -147,7 +211,11 @@ export default function useAttachments(
   } else {
     return {
       enabled: false,
+      fileList,
+      getFileList,
+      setFileList: setMergedFileList,
       handlePasteFile: undefined,
+      handleDropFile: undefined,
     };
   }
-}
+}

package/components/AgentScopeRuntimeWebUI/core/Chat/MessageList/UserMessageAnchors/helpers.ts

@@ -0,0 +1,224 @@
+import type { IAgentScopeRuntimeWebUIMessage } from "../../../types/IMessages";
+import {
+  AgentScopeRuntimeContentType,
+  IAgentScopeRuntimeRequest,
+  IContent,
+} from "../../../AgentScopeRuntime/types";
+import type { AttachmentPreview, UserMessageAnchor } from "./types";
+
+const DEFAULT_USER_MESSAGE_ANCHOR_MIN_COUNT = 3;
+const DEFAULT_USER_MESSAGE_ANCHOR_MIN_GAP = 6;
+const DEFAULT_USER_MESSAGE_ANCHOR_BADGE_MAX_COUNT = 99;
+const SCROLL_BOUNDARY_OFFSET = 4;
+const SCROLL_VISIBLE_TOP_GAP = 16;
+
+function normalizePreviewText(text: string) {
+  return text.replace(/\s+/g, ' ').trim();
+}
+
+function getFileSizeText(size?: number) {
+  if (!size) return '';
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+  return `${(size / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function getAttachmentPreview(content: IContent): AttachmentPreview | undefined {
+  switch (content.type) {
+    case AgentScopeRuntimeContentType.IMAGE:
+      return { type: 'Image', name: 'Image attachment' };
+    case AgentScopeRuntimeContentType.VIDEO:
+      return { type: 'Video', name: 'Video attachment' };
+    case AgentScopeRuntimeContentType.AUDIO:
+      return { type: 'Audio', name: 'Audio attachment' };
+    case AgentScopeRuntimeContentType.FILE:
+      return {
+        type: 'File',
+        name: [
+          content.file_name || content.fileName || content.file_url || content.file_id || 'File attachment',
+          getFileSizeText(content.file_size),
+        ].filter(Boolean).join(' · '),
+      };
+    case AgentScopeRuntimeContentType.DATA:
+      return { type: 'Data', name: 'Data payload' };
+    default:
+      return undefined;
+  }
+}
+
+function getContentText(content: IContent) {
+  if (content.type === AgentScopeRuntimeContentType.TEXT) return content.text;
+  if (content.type === AgentScopeRuntimeContentType.REFUSAL) return content.refusal;
+  return '';
+}
+
+export function getUserMessageAnchor(message: IAgentScopeRuntimeWebUIMessage): UserMessageAnchor | undefined {
+  if (message.role !== 'user' || !message.id) return undefined;
+
+  const request = message.cards?.find((card) => card.code === 'AgentScopeRuntimeRequestCard')?.data as
+    | IAgentScopeRuntimeRequest
+    | undefined;
+  const contentList = request?.input?.flatMap((item) => item.content || []) || [];
+  const text = normalizePreviewText(contentList.map(getContentText).filter(Boolean).join(' '));
+  const attachments = contentList.map(getAttachmentPreview).filter(Boolean) as AttachmentPreview[];
+  const attachmentPreview = attachments.map((item) => item.name).join(' ');
+  const preview = normalizePreviewText(text || attachmentPreview || '');
+
+  return {
+    createdAt: request?.created_at,
+    id: message.id,
+    attachments,
+    orderPercent: 0,
+    preview: preview || 'User message',
+  };
+}
+
+export function getAnchorTimeText(createdAt?: number) {
+  if (!createdAt) return '';
+
+  const timestamp = createdAt < 10000000000 ? createdAt * 1000 : createdAt;
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) return '';
+
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hour = String(date.getHours()).padStart(2, '0');
+  const minute = String(date.getMinutes()).padStart(2, '0');
+  return `${month}月${day}日 ${hour}:${minute}`;
+}
+
+export function getUserMessageAnchorMinCount(minCount?: number) {
+  if (typeof minCount !== 'number' || !Number.isFinite(minCount)) {
+    return DEFAULT_USER_MESSAGE_ANCHOR_MIN_COUNT;
+  }
+  return Math.max(0, Math.floor(minCount));
+}
+
+export function getUserMessageAnchorMinGap(minGap?: number) {
+  if (typeof minGap !== 'number' || !Number.isFinite(minGap)) {
+    return DEFAULT_USER_MESSAGE_ANCHOR_MIN_GAP;
+  }
+  return Math.max(0, minGap);
+}
+
+export function getUserMessageAnchorBadgeMaxCount(badgeMaxCount?: number) {
+  if (typeof badgeMaxCount !== 'number' || !Number.isFinite(badgeMaxCount)) {
+    return DEFAULT_USER_MESSAGE_ANCHOR_BADGE_MAX_COUNT;
+  }
+  return Math.max(1, Math.floor(badgeMaxCount));
+}
+
+export function getUserMessageAnchorBadgeText(count: number, badgeMaxCount?: number) {
+  const normalizedBadgeMaxCount = getUserMessageAnchorBadgeMaxCount(badgeMaxCount);
+  return count > normalizedBadgeMaxCount ? `${normalizedBadgeMaxCount}+` : String(count);
+}
+
+export function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function areAnchorPositionsEqual(prev: Record<string, number>, next: Record<string, number>) {
+  const prevKeys = Object.keys(prev);
+  const nextKeys = Object.keys(next);
+  if (prevKeys.length !== nextKeys.length) return false;
+  return nextKeys.every((key) => Math.abs((prev[key] ?? -1) - next[key]) < 0.1);
+}
+
+export function getMessageElementMapInScrollContainer(scrollEl: HTMLElement) {
+  const candidates = scrollEl.querySelectorAll<HTMLElement>('[data-role][id]');
+  const result = new Map<string, HTMLElement>();
+  candidates.forEach((candidate) => {
+    result.set(candidate.id, candidate);
+  });
+  return result;
+}
+
+export function getMessageElementInScrollContainer(scrollEl: HTMLElement, messageId: string) {
+  const target = typeof document === 'undefined' ? null : document.getElementById(messageId);
+  if (target instanceof HTMLElement && scrollEl.contains(target) && target.hasAttribute('data-role')) {
+    return target;
+  }
+
+  return getMessageElementMapInScrollContainer(scrollEl).get(messageId) || null;
+}
+
+function getScrollBoundaryAnchorId(scrollEl: HTMLElement, anchors: UserMessageAnchor[]) {
+  const maxScrollDistance = Math.max(scrollEl.scrollHeight - scrollEl.clientHeight, 0);
+  if (maxScrollDistance <= SCROLL_BOUNDARY_OFFSET) return undefined;
+
+  const firstAnchor = anchors[0];
+  const lastAnchor = anchors[anchors.length - 1];
+  if (!firstAnchor || !lastAnchor) return undefined;
+
+  const isDescOrder = scrollEl.className.includes('bubble-list-order-desc');
+  if (isDescOrder) {
+    const scrollDistance = Math.abs(scrollEl.scrollTop);
+    if (scrollDistance <= SCROLL_BOUNDARY_OFFSET) return lastAnchor.id;
+    if (maxScrollDistance - scrollDistance <= SCROLL_BOUNDARY_OFFSET) return firstAnchor.id;
+    return undefined;
+  }
+
+  if (scrollEl.scrollTop <= SCROLL_BOUNDARY_OFFSET) return firstAnchor.id;
+  if (maxScrollDistance - scrollEl.scrollTop <= SCROLL_BOUNDARY_OFFSET) return lastAnchor.id;
+  return undefined;
+}
+
+export function getScrollVisibleTopOffset(scrollEl: HTMLElement) {
+  const scrollRect = scrollEl.getBoundingClientRect();
+  const layoutRight = scrollEl.closest('[class*="chat-anywhere-layout-right"]') as HTMLElement | null;
+  const header = layoutRight?.querySelector('[class*="chat-anywhere-layout-right-header"]') as HTMLElement | null;
+  const headerRect = header?.getBoundingClientRect();
+  const headerOverlap = headerRect ? Math.max(0, headerRect.bottom - scrollRect.top) : 0;
+  const scrollPaddingTop = Number.parseFloat(window.getComputedStyle(scrollEl).scrollPaddingTop) || 0;
+
+  return Math.max(scrollPaddingTop, headerOverlap + (headerOverlap > 0 ? SCROLL_VISIBLE_TOP_GAP : 0));
+}
+
+export function getActiveAnchorId(scrollEl: HTMLElement, anchors: UserMessageAnchor[], topOffset = 0) {
+  const targetMap = getMessageElementMapInScrollContainer(scrollEl);
+  const renderedAnchors = anchors.filter((anchor) => targetMap.has(anchor.id));
+  const boundaryAnchorId = getScrollBoundaryAnchorId(scrollEl, renderedAnchors);
+  if (boundaryAnchorId) return boundaryAnchorId;
+
+  const scrollRect = scrollEl.getBoundingClientRect();
+  const activeLineTop = scrollRect.top + topOffset;
+  let activeAnchorId: string | undefined;
+  let minDistance = Number.POSITIVE_INFINITY;
+
+  renderedAnchors.forEach((anchor) => {
+    const target = targetMap.get(anchor.id);
+    if (!target) return;
+
+    const targetRect = target.getBoundingClientRect();
+    const distance = Math.abs(targetRect.top - activeLineTop);
+
+    if (distance < minDistance) {
+      minDistance = distance;
+      activeAnchorId = anchor.id;
+    }
+  });
+
+  return activeAnchorId;
+}
+
+export function getTargetTopOffset(scrollEl: HTMLElement, target: HTMLElement, topOffset = 0) {
+  const scrollRect = scrollEl.getBoundingClientRect();
+  const targetRect = target.getBoundingClientRect();
+
+  return targetRect.top - scrollRect.top - topOffset;
+}
+
+export function scrollTargetIntoContainerTop(
+  scrollEl: HTMLElement,
+  target: HTMLElement,
+  behavior: ScrollBehavior = 'smooth',
+  topOffset = 0,
+) {
+  const offset = getTargetTopOffset(scrollEl, target, topOffset);
+  if (Math.abs(offset) < 1) return;
+
+  scrollEl.scrollBy({
+    top: offset,
+    behavior,
+  });
+}