@ray-js/t-agent-ui-ray 0.1.0-beta-10 → 0.1.0-beta-12

package/dist/ChatContainer/index.d.ts

@@ -6,5 +6,6 @@ export default function ChatContainer<T extends ChatAgent<any>>(props: PropsWith
     createAgent: () => T;
     renderOptions?: RenderOptions;
     className?: string;
+    style?: React.CSSProperties;
     agentRef?: React.MutableRefObject<T>;
 }>): React.JSX.Element;

package/dist/ChatContainer/index.js

@@ -1,3 +1,4 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.filter.js";
 import "core-js/modules/esnext.iterator.map.js";
@@ -16,7 +17,8 @@ export default function ChatContainer(props) {
     createAgent,
     renderOptions = defaultRenderOptions,
     children,
-    className
+    className,
+    style
   } = props;
   const [messages, setMessages] = useState([]);
   const [agent] = useState(() => {
@@ -153,10 +155,10 @@ export default function ChatContainer(props) {
     };
   }, []);
   return /*#__PURE__*/React.createElement(View, {
-    style: {
+    style: _objectSpread({
       // @ts-ignore
       '--t-agent-chat-container-keyboard-height': "".concat(keyboardHeight, "px")
-    },
+    }, style),
     className: cx('t-agent-chat-container', className, {
       't-agent-chat-container-keyboard-show': keyboardHeight > 0
     })

package/dist/MarkdownRender/index.d.ts

@@ -9,6 +9,8 @@ interface Props {
     text: string;
     customBlockTypes: string[];
     renderBlock: (block: MarkdownBlock) => React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
 }
 declare const _default: React.MemoExoticComponent<(props: Props) => React.JSX.Element>;
 export default _default;

package/dist/MarkdownRender/index.js

@@ -15,7 +15,9 @@ const MarkdownRender = props => {
     prefix,
     text,
     customBlockTypes,
-    renderBlock
+    renderBlock,
+    className,
+    style
   } = props;
   const [parser, setParser] = useState(() => {
     return new BlockParser(prefix, customBlockTypes, "h2w__main h2w__".concat(theme));
@@ -28,7 +30,8 @@ const MarkdownRender = props => {
   }, [text, parser]);
   const sendAction = useSendAction();
   return /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-markdown-render"
+    className: "t-agent-markdown-render ".concat(className || ''),
+    style: style
   }, blocks.map(block => {
     const {
       id,

package/dist/MessageInput/index.d.ts

@@ -4,6 +4,7 @@ interface Props {
     className?: string;
     renderTop?: React.ReactNode;
     placeholder?: string;
+    style?: React.CSSProperties;
 }
 export default function MessageInput(props: Props): React.JSX.Element;
 export {};

package/dist/MessageInput/index.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.string.trim.js";
 import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.filter.js";
 import "core-js/modules/esnext.iterator.map.js";
@@ -42,7 +43,7 @@ export default function MessageInput(props) {
     }
   });
   const hasMore = !!agent.plugins.assistant.options.multiModal;
-  const isMore = !text.length && hasMore;
+  const isMore = !text.trim().length && hasMore;
   const send = async inputBlocks => {
     if (!(inputBlocks !== null && inputBlocks !== void 0 && inputBlocks.length) || attachmentInput.uploading || responding) {
       return;
@@ -228,7 +229,8 @@ export default function MessageInput(props) {
     });
   }
   return /*#__PURE__*/React.createElement(View, {
-    className: "".concat(props.className || '', " t-agent-message-input")
+    className: "".concat(props.className || '', " t-agent-message-input"),
+    style: props.style
   }, /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-input-container"
   }, props.renderTop, !!uploaded.length && /*#__PURE__*/React.createElement(ScrollView, {

package/dist/MessageList/index.d.ts

@@ -2,6 +2,9 @@ import './index.less';
 import React from 'react';
 interface Props {
     className?: string;
+    style?: React.CSSProperties;
+    wrapperClassName?: string;
+    wrapperStyle?: React.CSSProperties;
     roleSide?: {
         user?: 'start' | 'end' | string;
         assistant?: 'start' | 'end' | string;

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,21 +7,47 @@ 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,
-    roleSide
+    roleSide,
+    style,
+    wrapperClassName,
+    wrapperStyle
   } = 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 +59,34 @@ 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, {
+    className: "t-agent-message-list ".concat(wrapperClassName || ''),
+    "data-testid": "t-agent-message-list",
+    style: wrapperStyle
+  }, /*#__PURE__*/React.createElement(ScrollView, _extends({
     className: "".concat(className || '', " t-agent-message-list-scroll"),
-    scrollWithAnimation: scrollAnimation,
-    scrollTop: scrollTop,
+    style: style,
+    id: id
+  }, scrollProps, {
     refresherTriggered: false,
     enableFlex: true,
     scrollY: true,
@@ -57,7 +94,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-10",
+  "version": "0.1.0-beta-12",
   "author": "Tuya.inc",
   "license": "MIT",
   "private": false,
@@ -41,5 +41,5 @@
     "@types/echarts": "^4.9.22",
     "@types/markdown-it": "^14.1.1"
   },
-  "gitHead": "5ce69dc93b2129369eb8ebfe409cf172b7ba379e"
+  "gitHead": "34434bfc256e79bdb1c33ef9f55fb705704264f6"
 }