@ray-js/t-agent-ui-ray 0.2.1-beta.2 → 0.2.2-beta-1

package/dist/MessageList/ScrollBottomView.js

@@ -0,0 +1,202 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useCallback, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
+import { useSleep } from '../hooks/useSleep';
+import { generateId } from '@ray-js/t-agent';
+import { useOnEvent, useTick } from '../hooks';
+import { ScrollView } from '@ray-js/ray';
+import { View } from '@ray-js/components';
+export function useScrollBottomView(params) {
+  const [scrollViewId] = useState(() => "ScrollView-".concat(generateId()));
+  const contentViewId = "".concat(scrollViewId, "-content");
+  const tickValue = useTick();
+  const [ready, setReady] = useState(false);
+  const [scrollIntoViewFlag, setScrollIntoViewIdFlag] = useState(() => "".concat(Date.now()));
+  const [scrollWithAnimation, setScrollWithAnimation] = useState(false);
+  const ref = useRef({
+    clientHeight: 0,
+    needFollow: true,
+    following: false,
+    lastScrollEvent: null,
+    startTimestamp: 0
+  });
+  const sleep = useSleep();
+  const makeScrollBottomEvent = useCallback(() => {
+    if (ref.current.lastScrollEvent) {
+      const {
+        detail,
+        currentTarget,
+        target
+      } = ref.current.lastScrollEvent;
+      const {
+        scrollTop,
+        scrollHeight
+      } = detail;
+      const newDetail = {
+        deltaX: 0,
+        scrollLeft: 0,
+        scrollTop: scrollHeight - ref.current.clientHeight,
+        scrollWidth: detail.scrollWidth,
+        scrollHeight,
+        deltaY: scrollTop - (scrollHeight - ref.current.clientHeight)
+      };
+      if (scrollTop === newDetail.scrollTop) {
+        // 如果滚动位置没有变化，则不触发事件
+        return null;
+      }
+      return {
+        type: 'scroll',
+        timeStamp: Date.now() - ref.current.startTimestamp,
+        currentTarget,
+        target,
+        stopPropagation: () => {},
+        detail: newDetail
+      };
+    }
+    return null;
+  }, []);
+  const scrollToBottom = useCallback(_ref => {
+    let {
+      animation,
+      follow
+    } = _ref;
+    if (follow) {
+      if (ref.current.needFollow) {
+        setScrollIntoViewIdFlag("".concat(Date.now()));
+        ref.current.needFollow = true;
+        const event = makeScrollBottomEvent();
+        if (event) {
+          sleep(10).then(() => {
+            var _params$onScroll;
+            params === null || params === void 0 || (_params$onScroll = params.onScroll) === null || _params$onScroll === void 0 || _params$onScroll.call(params, event);
+          });
+        }
+      }
+    } else {
+      if (animation) {
+        setScrollWithAnimation(true);
+      }
+      ref.current.needFollow = true;
+      setScrollIntoViewIdFlag("".concat(Date.now()));
+      const event = makeScrollBottomEvent();
+      if (event) {
+        sleep(100).then(() => {
+          var _params$onScroll2;
+          params === null || params === void 0 || (_params$onScroll2 = params.onScroll) === null || _params$onScroll2 === void 0 || _params$onScroll2.call(params, event);
+        });
+      }
+      if (animation) {
+        sleep(10).then(() => {
+          setScrollWithAnimation(false);
+        });
+      }
+    }
+  }, []);
+  useEffect(() => {
+    const getDomTick = () => {
+      return new Promise(resolve => {
+        // @ts-ignore
+        const query = ty.createSelectorQuery();
+        query.select("#".concat(scrollViewId)).fields({
+          dataset: true
+        }, res => {
+          resolve(res.dataset.renderTick);
+        }).exec();
+      });
+    };
+    const getClientHeight = () => {
+      return new Promise(resolve => {
+        // @ts-ignore
+        const query = ty.createSelectorQuery();
+        query.select("#".concat(scrollViewId)).fields({
+          size: true
+        }, res => {
+          resolve(res.height);
+        }).exec();
+      });
+    };
+    const scrollViewInterval = setInterval(() => {
+      // 外部容器高度变化不频繁，1 秒查一次
+      getClientHeight().then(height => {
+        ref.current.clientHeight = height;
+      });
+    }, 1000);
+
+    // 初始化好 clientHeight
+    (async () => {
+      let tick = await getDomTick();
+      while (tick <= 0) {
+        await sleep(1);
+        tick = await getDomTick();
+      }
+      return tick;
+    })().then(() => getClientHeight()).then(height => {
+      console.log('scrollView clientHeight', height);
+      ref.current.clientHeight = height;
+    })
+    // 渲染完毕后，开始滚动到最底部
+    .then(() => scrollToBottom({}))
+    // 展示列表
+    .then(() => setReady(true));
+    return () => {
+      clearInterval(scrollViewInterval);
+    };
+  }, [scrollViewId]);
+  let scrollIntoViewId = "".concat(scrollViewId, "-toView-").concat(tickValue, "-").concat(scrollIntoViewFlag);
+  if (!ref.current.needFollow) {
+    scrollIntoViewId = null;
+  }
+  return {
+    scrollToBottom,
+    scrollViewLoading: !ready,
+    scrollIntoViewId,
+    contentViewProps: {
+      contentViewId
+    },
+    scrollViewProps: {
+      'data-render-tick': tickValue,
+      id: scrollViewId,
+      scrollY: true,
+      onScroll: event => {
+        var _params$onScroll3;
+        ref.current.lastScrollEvent = event;
+        const {
+          scrollTop,
+          scrollHeight
+        } = event.detail;
+        ref.current.needFollow = scrollHeight - scrollTop <= ref.current.clientHeight + 25;
+        params === null || params === void 0 || (_params$onScroll3 = params.onScroll) === null || _params$onScroll3 === void 0 || _params$onScroll3.call(params, event);
+        if (!ref.current.startTimestamp) {
+          ref.current.startTimestamp = Date.now() - event.timeStamp;
+        }
+      },
+      scrollWithAnimation,
+      scrollIntoView: scrollIntoViewId
+    }
+  };
+}
+const ScrollBottomView = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    scrollToBottom,
+    scrollViewProps,
+    scrollIntoViewId,
+    contentViewProps,
+    scrollViewLoading
+  } = useScrollBottomView({
+    onScroll: props.onScroll
+  });
+  useOnEvent('scrollToBottom', scrollToBottom);
+  useImperativeHandle(ref, () => ({
+    scrollToBottom
+  }), [scrollToBottom]);
+  return /*#__PURE__*/React.createElement(ScrollView, _extends({
+    className: "".concat(props.className || '', " ").concat(scrollViewLoading ? 't-agent-message-list-hide' : ''),
+    style: props.style
+  }, scrollViewProps), /*#__PURE__*/React.createElement(View, _extends({}, contentViewProps, {
+    className: "".concat(props.contentClassName || '')
+  }), props.children, /*#__PURE__*/React.createElement(View, {
+    id: scrollIntoViewId
+  })));
+});
+export default /*#__PURE__*/React.memo(ScrollBottomView);

package/dist/MessageList/index.d.ts

@@ -6,6 +6,8 @@ interface Props {
     wrapperClassName?: string;
     wrapperStyle?: React.CSSProperties;
     renderTop?: React.ReactNode;
+    renderBottom?: React.ReactNode;
+    onScroll?: (event: any) => void;
     roleSide?: {
         user?: 'start' | 'end' | string;
         assistant?: 'start' | 'end' | string;
@@ -18,5 +20,5 @@ interface Props {
         tipText: string;
     };
 }
-export default function MessageList(props: Props): React.JSX.Element;
-export {};
+declare const MessageList: (props: Props) => React.JSX.Element;
+export default MessageList;

package/dist/MessageList/index.js

@@ -1,19 +1,14 @@
-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";
 import "core-js/modules/web.dom-collections.iterator.js";
 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 React from 'react';
 import MessageRender from '../MessageRender';
-import { useAgentMessage, useAgentSessionValue, useOnEvent } from '../hooks';
-import { useDebouncedFn } from '../hooks/useDebouncedFn';
-import { useSleep } from '../hooks/useSleep';
-import { systemInfo } from '../utils';
-export default function MessageList(props) {
+import { useAgentMessage, useAgentSessionValue } from '../hooks';
+import ScrollBottomView from './ScrollBottomView';
+import { useStableCallback } from '../hooks/useStableCallback';
+const MessageList = props => {
   const {
     className,
     roleSide,
@@ -22,97 +17,38 @@ export default function MessageList(props) {
     wrapperStyle,
     historyLimit
   } = 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 messages = useAgentMessage();
+  const onScroll = useStableCallback(props.onScroll);
   const [showSelect] = useAgentSessionValue('UIRay.multiSelect.show');
-  const canIUse = useMemo(() => {
-    // @ts-ignore
-    const {
-      containerVersion
-    } = systemInfo;
-    return {
-      // 在 2.27.2 版本之前，pageScrollTo 在某些场景不生效
-      scroll: false
-    };
-  }, []);
-  const scroll = useDebouncedFn(animation => {
-    // @ts-ignore
-    ty.pageScrollTo({
-      scrollTop: 0,
-      duration: animation ? 100 : 1,
-      selector: "#".concat(id)
-    });
-  }, 100);
-
-  // 强制滚动到底部
-  useOnEvent('scrollToBottom', _ref => {
-    let {
-      animation,
-      follow
-    } = _ref;
-    // 如果发送的跟随新消息的滚动，判断当前是不是滚动到了底部，如果没有滚动到底部，不执行滚动
-    if (follow && !followNewMessageRef.current) {
-      return;
-    }
-    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 ".concat(wrapperClassName || ''),
     "data-testid": "t-agent-message-list",
-    style: wrapperStyle
-  }, /*#__PURE__*/React.createElement(ScrollView, _extends({
+    style: wrapperStyle,
+    id: "message-list"
+  }, /*#__PURE__*/React.createElement(ScrollBottomView, {
     className: "".concat(className || '', " t-agent-message-list-scroll"),
+    contentClassName: "t-agent-message-list-scroll-content",
     style: style,
-    id: id
-  }, scrollProps, {
-    refresherTriggered: false,
-    enableFlex: true,
-    scrollY: true,
-    onScroll: event => {
-      // 使用了 flex-direction: column-reverse，所以滚动到顶部时，scrollTop = 0
-      followNewMessageRef.current = event.detail.scrollTop > -10;
-    }
-  }), /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-message-list-padding"
-  }), reversed.map((msg, index) => {
+    onScroll: onScroll
+  }, historyLimit && historyLimit.count < messages.length && /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-list-history-tip"
+  }, historyLimit.tipText), /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-list-padding-start"
+  }), props.renderTop, messages.map((msg, index) => {
     let side = roleSide === null || roleSide === void 0 ? void 0 : roleSide[msg.role];
     if (!side) {
       side = msg.role === 'user' ? 'end' : 'start';
     }
+    const isLatestMessage = index === messages.length - 1;
     return /*#__PURE__*/React.createElement(MessageRender, {
       showSelect: showSelect,
       key: msg.id,
       message: msg,
-      isLatestMessage: index === 0,
+      isLatestMessage: isLatestMessage,
       side: side
     });
-  }), historyLimit && historyLimit.count < reversed.length && /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-message-list-history-tip"
-  }, historyLimit.tipText), props.renderTop, /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-message-list-padding-start"
+  }), props.renderBottom, /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-list-padding"
   })));
-}
+};
+export default MessageList;

package/dist/MessageList/index.less

@@ -4,21 +4,32 @@
   overflow-x: hidden;
   position: relative;
   background: var(--app-B1);
-  padding: 16rpx 32rpx 0;
 }
 
 .t-agent-message-list-scroll {
-  display: flex;
   width: 100%;
   height: 100%;
-  flex-direction: column-reverse;
+}
+
+.t-agent-message-list-scroll-content {
+  padding: 0 32rpx;
+}
+
+.t-agent-message-list-block {
+  border: 2rpx solid green;
+}
+
+.t-agent-message-list-padding-start {
+  height: 16rpx;
 }
 
 .t-agent-message-list-padding {
   flex: 1
 }
 
-.t-agent-message-list-padding-start {}
+.t-agent-message-list-hide {
+  opacity: 0;
+}
 
 .t-agent-message-list-history-tip {
   width: 100%;

package/dist/TileRender/index.js

@@ -1,6 +1,6 @@
 import './index.less';
 import React, { useCallback, useMemo } from 'react';
-import { useChatAgent, useRenderOptions } from '../hooks';
+import { useChatAgent, useNotifyHeightChanged, useRenderOptions } from '../hooks';
 import { TilePropsContext } from '../contexts';
 const TileRender = _ref => {
   let {
@@ -11,6 +11,7 @@ const TileRender = _ref => {
   } = _ref;
   const agent = useChatAgent();
   const emitTileEvent = useCallback(async payload => agent.emitTileEvent(tile.id, payload), [agent, tile.id]);
+  const notifyHeightChanged = useNotifyHeightChanged();
   const {
     renderTileAs
   } = useRenderOptions();
@@ -22,9 +23,10 @@ const TileRender = _ref => {
       side,
       isLatestMessage,
       emitEvent: emitTileEvent,
-      emitTileEvent
+      emitTileEvent,
+      notifyHeightChanged
     };
-  }, [agent, tile, message, side, isLatestMessage, emitTileEvent]);
+  }, [agent, tile, message, side, isLatestMessage, emitTileEvent, notifyHeightChanged]);
   const node = renderTileAs(props);
   return /*#__PURE__*/React.createElement(TilePropsContext.Provider, {
     value: props

package/dist/contexts.d.ts

@@ -2,14 +2,26 @@
 import { ChatAgent, ChatMessageObject, UIPlugin } from '@ray-js/t-agent';
 import { RenderOptions, TileProps } from './types';
 import { ChatSession } from '@ray-js/t-agent';
-export declare const MessageContext: import("react").Context<{
-    messages: ChatMessageObject[];
-    keyboardHeight: number;
-}>;
-export declare const RenderContext: import("react").Context<RenderOptions>;
 export type UIChatSession = Pick<ChatSession, 'get' | 'getData' | 'set' | 'sessionId'>;
 export type UIChatAgent = Pick<ChatAgent<UIPlugin>, 'pushInputBlocks' | 'plugins' | 'emitTileEvent' | 'removeMessage'> & {
     session: UIChatSession;
 };
-export declare const ChatAgentContext: import("react").Context<UIChatAgent>;
 export declare const TilePropsContext: import("react").Context<TileProps<any, any>>;
+declare const SharedProvider: ({ value, children }: import("react").PropsWithChildren<{
+    value: {
+        agent: UIChatAgent;
+        messages: ChatMessageObject[];
+        keyboardHeight: number;
+        renderOptions: RenderOptions;
+        notifyHeightChanged: () => void;
+        tickValue: number;
+    };
+}>) => import("react").JSX.Element, useSharedState: <K extends "agent" | "messages" | "keyboardHeight" | "renderOptions" | "notifyHeightChanged" | "tickValue">(key: K) => {
+    agent: UIChatAgent;
+    messages: ChatMessageObject[];
+    keyboardHeight: number;
+    renderOptions: RenderOptions;
+    notifyHeightChanged: () => void;
+    tickValue: number;
+}[K];
+export { SharedProvider, useSharedState };

package/dist/contexts.js

@@ -1,18 +1,6 @@
+import "core-js/modules/web.dom-collections.iterator.js";
 import { createContext } from 'react';
-export const MessageContext = /*#__PURE__*/createContext({
-  messages: [],
-  keyboardHeight: 0
-});
-export const RenderContext = /*#__PURE__*/createContext({
-  formatErrorMessageAs: message => message,
-  renderTileAs: () => null,
-  renderCustomBlockAs: () => null,
-  renderCardAs: () => null,
-  renderLongPressAs: () => null,
-  customBlockTypes: [],
-  customCardMap: {},
-  getStaticResourceBizType: () => '',
-  i18nTranslate: key => key
-});
-export const ChatAgentContext = /*#__PURE__*/createContext({});
-export const TilePropsContext = /*#__PURE__*/createContext({});
+import { createSharedStore } from './utils/createSharedStore';
+export const TilePropsContext = /*#__PURE__*/createContext({});
+const [SharedProvider, useSharedState] = createSharedStore();
+export { SharedProvider, useSharedState };

package/dist/hooks/context.d.ts

@@ -1,11 +1,11 @@
 import { Dispatch, SetStateAction } from 'react';
 import { TTTAction } from '../types';
 export declare const useChatAgent: () => import("../contexts").UIChatAgent;
-export declare const useAgentMessage: () => {
-    messages: import("@ray-js/t-agent").ChatMessageObject[];
-    keyboardHeight: number;
-};
+export declare const useTick: () => number;
+export declare const useNotifyHeightChanged: () => () => void;
+export declare const useAgentMessage: () => import("@ray-js/t-agent").ChatMessageObject[];
 export declare const useRenderOptions: () => import("../types").RenderOptions;
+export declare const useKeyboardHeight: () => number;
 export declare const useOnEvent: (eventName: string, callback: (details: any) => void) => void;
 export declare const useEmitEvent: () => <T extends keyof import("@ray-js/t-agent").UIEventMap>(eventName: T, detail: import("@ray-js/t-agent").UIEventMap[T]) => void;
 export declare const useTileProps: () => import("../types").TileProps<any, any>;

package/dist/hooks/context.js

@@ -1,14 +1,23 @@
 import "core-js/modules/web.dom-collections.iterator.js";
 import { useEffect, useContext, useCallback, useRef, useState } from 'react';
-import { TilePropsContext, ChatAgentContext, MessageContext, RenderContext } from '../contexts';
+import { TilePropsContext, useSharedState } from '../contexts';
 export const useChatAgent = () => {
-  return useContext(ChatAgentContext);
+  return useSharedState('agent');
+};
+export const useTick = () => {
+  return useSharedState('tickValue');
+};
+export const useNotifyHeightChanged = () => {
+  return useSharedState('notifyHeightChanged');
 };
 export const useAgentMessage = () => {
-  return useContext(MessageContext);
+  return useSharedState('messages');
 };
 export const useRenderOptions = () => {
-  return useContext(RenderContext);
+  return useSharedState('renderOptions');
+};
+export const useKeyboardHeight = () => {
+  return useSharedState('keyboardHeight');
 };
 export const useOnEvent = (eventName, callback) => {
   const callbackRef = useRef(callback);

package/dist/hooks/useStableCallback.d.ts

@@ -0,0 +1 @@
+export declare const useStableCallback: <T extends (...args: any[]) => any>(fn: T) => T;

package/dist/hooks/useStableCallback.js

@@ -0,0 +1,13 @@
+import "core-js/modules/web.dom-collections.iterator.js";
+import { useCallback, useRef } from 'react';
+export const useStableCallback = fn => {
+  const ref = useRef(fn);
+  ref.current = fn;
+  const cb = useCallback(function () {
+    return ref.current(...arguments);
+  }, []);
+  if (!fn) {
+    return fn;
+  }
+  return cb;
+};

package/dist/tiles/BubbleTile/index.js

@@ -108,13 +108,13 @@ const BubbleTile = props => {
   }), /*#__PURE__*/React.createElement(View, {
     className: "t-agent-bubble-tile-bubble ".concat(loading ? 't-agent-bubble-tile-bubble-loading' : '')
   }, (() => {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children.map(t => /*#__PURE__*/React.createElement(TileRender, {
+    return children.map(t => /*#__PURE__*/React.createElement(TileRender, {
       side: side,
       tile: t,
       message: message,
       key: t.id,
       isLatestMessage: isLatestMessage
-    })));
+    }));
   })(), /*#__PURE__*/React.createElement(LoadingIndicator, {
     status: status
   }), showAbortedMessage && /*#__PURE__*/React.createElement(View, {
@@ -126,7 +126,6 @@ const BubbleTile = props => {
     nodeId: workflowNode
   }));
 };
-export default /*#__PURE__*/React.memo(BubbleTile);
 const ErrorNotice = /*#__PURE__*/memo(_ref => {
   let {
     bubbleStatus,
@@ -172,4 +171,5 @@ const LoadingIndicator = /*#__PURE__*/memo(_ref2 => {
     }));
   }
   return null;
-});
+});
+export default /*#__PURE__*/React.memo(BubbleTile);

package/dist/tiles/OperateCardTile/index.js

@@ -7,7 +7,7 @@ import React, { useMemo, useState } from 'react';
 import './index.less';
 // import { ChangeInfoItem, DeviceInfoItem, SceneInfoItem } from '@ray-js/t-agent-plugin-assistant';
 
-import { useTranslate } from '../../hooks';
+import { useTileProps, useTranslate } from '../../hooks';
 import Expand from './Expand';
 import { formatMessage } from '../../utils';
 const handleDesc = (detail, t) => {
@@ -197,6 +197,9 @@ export default function OperateCardTile(props) {
     };
   }, [deviceInfo, sceneInfo, changeInfo, t]);
   const desc = useMemo(() => handleDesc(operations, t), [operations, t]);
+  const {
+    notifyHeightChanged
+  } = useTileProps();
   if (!operations.device.length && !operations.scene.length && !operations.moreDevice.length && !operations.moreScene.length) {
     return null;
   }
@@ -208,6 +211,7 @@ export default function OperateCardTile(props) {
     className: "t-agent-scene-control-tile-summary-detail",
     onClick: () => {
       setShowDetail(!showDetail);
+      notifyHeightChanged();
     }
   }, showDetail ? t('t-agent.operate-card-tile.hide.details') : t('t-agent.operate-card-tile.view.details'))), renderDetail && renderDetail({
     operations,

package/dist/types.d.ts

@@ -52,6 +52,7 @@ export interface TileProps<T = any, P = any> {
     emitTileEvent: (payload: P) => void;
     isLatestMessage?: boolean;
     agent: UIChatAgent;
+    notifyHeightChanged: () => void;
 }
 export interface MarkdownBlock {
     id: string;

package/dist/utils/createSharedStore.d.ts

@@ -0,0 +1,4 @@
+import React, { PropsWithChildren } from 'react';
+export declare function createSharedStore<T>(): readonly [({ value, children }: React.PropsWithChildren<{
+    value: T;
+}>) => React.JSX.Element, <K extends keyof T>(key: K) => T[K], <K_1 extends keyof T>(key: K_1) => [T[K_1], (v: T[K_1]) => void]];