@ray-js/t-agent-ui-ray 0.1.0-beta-9 → 0.1.0-beta-11

package/dist/MessageList/index.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import "core-js/modules/es.array.reverse.js";
 import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.map.js";
@@ -6,8 +7,12 @@ import './index.less';
 import { View } from '@ray-js/components';
 import React, { useMemo, useRef, useState } from 'react';
 import { ScrollView } from '@ray-js/ray';
+import { generateId } from '@ray-js/t-agent';
+import { isVersionMatch } from '@ray-js/t-agent-plugin-assistant';
 import MessageRender from '../MessageRender';
-import { useAgentMessage, useOnEvent, useSleep } from '../hooks';
+import { useAgentMessage, useOnEvent } from '../hooks';
+import { useDebouncedFn } from '../hooks/useDebouncedFn';
+import { useSleep } from '../hooks/useSleep';
 export default function MessageList(props) {
   const {
     className,
@@ -16,11 +21,30 @@ export default function MessageList(props) {
   const {
     messages
   } = useAgentMessage();
+  const [id] = useState(() => "ScrollView-".concat(generateId()));
   const [scrollAnimation, setScrollAnimation] = useState(false);
   // 最大整数位数，用于强制滚动到底部，收到连续 scrollToBottom 时，每 10 毫秒更新一次
   const [scrollTop, setScrollTop] = useState(() => 1000000000000000 + Math.floor(Date.now() / 10));
   const followNewMessageRef = useRef(true);
   const sleep = useSleep();
+  const canIUse = useMemo(() => {
+    // @ts-ignore
+    const {
+      containerVersion
+    } = ty.getSystemInfoSync();
+    return {
+      // 在 2.27.2 版本之前，pageScrollTo 在某些场景不生效
+      scroll: containerVersion && isVersionMatch('>=2.27.2', containerVersion)
+    };
+  }, []);
+  const scroll = useDebouncedFn(animation => {
+    // @ts-ignore
+    ty.pageScrollTo({
+      scrollTop: 0,
+      duration: animation ? 100 : 1,
+      selector: "#".concat(id)
+    });
+  }, 100);
 
   // 强制滚动到底部
   useOnEvent('scrollToBottom', _ref => {
@@ -32,24 +56,32 @@ export default function MessageList(props) {
     if (follow && !followNewMessageRef.current) {
       return;
     }
-    sleep(100).then(() => {
-      setScrollAnimation(!!animation);
-      const top = 1000000000000000 + Math.floor(Date.now() / 10);
-      if (top !== scrollTop) {
-        setScrollTop(top);
-      }
-    });
+    if (canIUse.scroll) {
+      scroll(animation);
+    } else {
+      sleep(100).then(() => {
+        setScrollAnimation(!!animation);
+        const top = 1000000000000000 + Math.floor(Date.now() / 10);
+        if (top !== scrollTop) {
+          setScrollTop(top);
+        }
+      });
+    }
   });
 
   // 使用翻转列表，让滚动和新消息出现在第一条，这样可以避免滚动到底部时的闪烁
   const reversed = useMemo(() => [...messages].reverse(), [messages]);
+  const scrollProps = canIUse.scroll ? {} : {
+    scrollWithAnimation: scrollAnimation,
+    scrollTop
+  };
   return /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-list",
     "data-testid": "t-agent-message-list"
-  }, /*#__PURE__*/React.createElement(ScrollView, {
+  }, /*#__PURE__*/React.createElement(ScrollView, _extends({
     className: "".concat(className || '', " t-agent-message-list-scroll"),
-    scrollWithAnimation: scrollAnimation,
-    scrollTop: scrollTop,
+    id: id
+  }, scrollProps, {
     refresherTriggered: false,
     enableFlex: true,
     scrollY: true,
@@ -57,7 +89,7 @@ export default function MessageList(props) {
       // 使用了 flex-direction: column-reverse，所以滚动到顶部时，scrollTop = 0
       followNewMessageRef.current = event.detail.scrollTop > -10;
     }
-  }, /*#__PURE__*/React.createElement(View, {
+  }), /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-list-padding"
   }), reversed.map((msg, index) => {
     let side = roleSide === null || roleSide === void 0 ? void 0 : roleSide[msg.role];

package/dist/hooks/index.d.ts

@@ -1,7 +1,6 @@
 export * from './context';
 export * from './useAttachmentInput';
 export * from './useAsrInput';
-export * from './useSleep';
 export * from './useIsUnmounted';
 export * from './useLongPress';
 export * from './useTranslate';

package/dist/hooks/index.js

@@ -1,7 +1,6 @@
 export * from './context';
 export * from './useAttachmentInput';
 export * from './useAsrInput';
-export * from './useSleep';
 export * from './useIsUnmounted';
 export * from './useLongPress';
 export * from './useTranslate';

package/dist/hooks/useDebouncedFn.d.ts

@@ -0,0 +1 @@
+export declare function useDebouncedFn<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: Parameters<T>) => void;

package/dist/hooks/useDebouncedFn.js

@@ -0,0 +1,32 @@
+import "core-js/modules/web.dom-collections.iterator.js";
+import { useRef, useEffect, useCallback } from 'react';
+export function useDebouncedFn(fn, delay) {
+  const timer = useRef();
+  const fnRef = useRef(fn);
+
+  // 保证引用是最新的
+  useEffect(() => {
+    fnRef.current = fn;
+  });
+  const debounced = useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    timer.current = setTimeout(() => {
+      fnRef.current(...args);
+    }, delay);
+  }, [delay]);
+
+  // 卸载时清理
+  useEffect(() => {
+    return () => {
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
+    };
+  }, []);
+  return debounced;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/t-agent-ui-ray",
-  "version": "0.1.0-beta-9",
+  "version": "0.1.0-beta-11",
   "author": "Tuya.inc",
   "license": "MIT",
   "private": false,
@@ -41,5 +41,5 @@
     "@types/echarts": "^4.9.22",
     "@types/markdown-it": "^14.1.1"
   },
-  "gitHead": "1cebc0a6223565deb09fc16d17c5ff6c59e3e008"
+  "gitHead": "aaa1b649b8773de00e74693b1fcbd584431323e4"
 }