@ray-js/t-agent-ui-ray 0.2.2-beta-1 → 0.2.3-beta-1

package/dist/MessageInput/MessageInputAIStream/Waveform/index.js

@@ -0,0 +1,52 @@
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.map.js";
+import { systemInfo } from '../../../utils';
+
+// eslint-disable-next-line no-undef
+Component({
+  options: {
+    styleIsolation: 'shared'
+  },
+  properties: {
+    amplitudeCount: {
+      type: Number,
+      value: 60
+    }
+  },
+  data: {
+    values: []
+  },
+  lifetimes: {
+    attached() {
+      // eslint-disable-next-line no-undef
+      ty.aistream.onRecordAmplitudes(this.update);
+    },
+    detached() {
+      // eslint-disable-next-line no-undef
+      ty.aistream.offRecordAmplitudes(this.update);
+    }
+  },
+  methods: {
+    update(body) {
+      this.setData({
+        // 将数值映射到高度范围（0-1）
+        values: body.amplitudes.map(item => item > 1 ? 1 : item * 100)
+      });
+    }
+  },
+  observers: {
+    amplitudeCount(value) {
+      if (systemInfo.brand !== 'devtools') {
+        // eslint-disable-next-line no-undef
+        ty.aistream.registerRecordAmplitudes({
+          count: value
+        });
+      }
+      this.setData({
+        values: Array.from({
+          length: value
+        }, () => 0)
+      });
+    }
+  }
+});

package/dist/MessageInput/MessageInputAIStream/Waveform/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/dist/MessageInput/MessageInputAIStream/Waveform/index.tyml

@@ -0,0 +1,9 @@
+<view
+  class="t-agent-message-input-waveform-container"
+>
+  <view
+    ty:for="{{values}}"
+    class="t-agent-message-input-waveform-bar"
+    style="height: {{item}}%; animation-delay: {{index * 10}}ms;"
+  ></view>
+</view>

package/dist/MessageInput/MessageInputAIStream/index.d.ts

@@ -15,6 +15,7 @@ interface Props {
     maxTextLength?: number;
     maxAudioMs?: number;
     onStateChange?: (state: MessageInputState) => void;
+    amplitudeCount?: number;
 }
 export declare const enum MessageInputState {
     PENDING = "pending",

package/dist/MessageInput/MessageInputAIStream/index.js

@@ -19,7 +19,6 @@ import logger from '../../logger';
 import { systemInfo } from '../../utils';
 import { useSleep } from '../../hooks/useSleep';
 import { useStableCallback } from '../../hooks/useStableCallback';
-const AMPLITUDE_COUNT = 60;
 export let MessageInputState = /*#__PURE__*/function (MessageInputState) {
   MessageInputState["PENDING"] = "pending";
   MessageInputState["RECORDING"] = "recording";
@@ -320,7 +319,7 @@ export default function MessageInputAIStream(props) {
     container = /*#__PURE__*/React.createElement(AsrInput, {
       responding: canAbort,
       disabled: state.current === MessageInputState.ABORTING,
-      amplitudeCount: AMPLITUDE_COUNT,
+      amplitudeCount: props.amplitudeCount || 60,
       recording: state.current === MessageInputState.RECORDING,
       onRecord: async () => {
         logger.debug('MessageInputAIStream', 'AsrInput onRecord');
@@ -406,8 +405,7 @@ export default function MessageInputAIStream(props) {
         setText('');
         const inputBlocks = [...attachmentInput.blocks, {
           type: 'audio',
-          audio_emitter: emitter,
-          amplitude_count: AMPLITUDE_COUNT
+          audio_emitter: emitter
         }];
         try {
           logger.debug('MessageInputAIStream', 'pushInputBlocks start');

package/dist/MessageList/ScrollBottomView.d.ts

@@ -1,46 +1,47 @@
 import React from 'react';
-interface ScrollBottomViewParams {
-    onScroll?: (event: any) => void;
+import { ScrollEventDetail } from '../LazyScrollView';
+interface ScrollBottomViewOptions {
+    scrollViewId?: string;
+    onScroll?: (event: {
+        detail: ScrollEventDetail;
+    }) => void;
+    tick: string;
+    loadedPromise?: Promise<void>;
 }
-export declare function useScrollBottomView(params: ScrollBottomViewParams): {
+export declare function useScrollBottomView(options: ScrollBottomViewOptions): {
     scrollToBottom: ({ animation, follow }: {
         animation?: boolean | undefined;
         follow?: boolean | undefined;
-    }) => void;
+    }) => Promise<boolean>;
     scrollViewLoading: boolean;
     scrollIntoViewId: string;
-    contentViewProps: {
-        contentViewId: string;
-    };
     scrollViewProps: {
-        'data-render-tick': number;
-        id: string;
-        scrollY: boolean;
-        onScroll: (event: {
+        scrollViewId: string;
+        bindscroll: (event: {
+            detail: ScrollEventDetail;
+        }) => void;
+        binddone: (event: {
             detail: {
-                scrollTop: number;
-                scrollHeight: number;
-                deltaY: number;
+                scrollIntoView: string;
             };
-            currentTarget: any;
-            timeStamp: number;
         }) => void;
         scrollWithAnimation: boolean;
         scrollIntoView: string;
     };
 };
-interface Props {
+interface Props extends ScrollBottomViewOptions {
+    scrollViewId?: string;
     className?: string;
     contentClassName?: string;
     children: React.ReactNode;
     style?: React.CSSProperties;
-    onScroll?: (event: any) => void;
+    hideScrollbar?: boolean;
 }
-interface Ref {
+export interface ScrollBottomViewRef {
     scrollToBottom: (options?: {
         animation?: boolean;
         follow?: boolean;
     }) => void;
 }
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<Ref>>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<ScrollBottomViewRef>>>;
 export default _default;

package/dist/MessageList/ScrollBottomView.js

@@ -1,178 +1,95 @@
-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();
+import LazyScrollView from '../LazyScrollView';
+import { createResolvable } from '../utils/object';
+export function useScrollBottomView(options) {
+  const [scrollViewId] = useState(() => options.scrollViewId || "ScrollView-".concat(generateId()));
+  const {
+    tick,
+    loadedPromise
+  } = options;
   const [ready, setReady] = useState(false);
   const [scrollIntoViewFlag, setScrollIntoViewIdFlag] = useState(() => "".concat(Date.now()));
   const [scrollWithAnimation, setScrollWithAnimation] = useState(false);
+  const prefix = "".concat(scrollViewId, "-toView-").concat(tick, "-");
+  const scrollIntoViewId = "".concat(prefix).concat(scrollIntoViewFlag);
   const ref = useRef({
-    clientHeight: 0,
     needFollow: true,
     following: false,
-    lastScrollEvent: null,
-    startTimestamp: 0
+    resolvableMap: {},
+    prefix
   });
+  ref.current.prefix = prefix;
   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;
+    let promise = Promise.resolve(false);
+    const scroll = () => {
+      const flag = "".concat(Date.now());
+      const id = "".concat(ref.current.prefix).concat(flag);
+      setScrollIntoViewIdFlag(flag);
+      const r = createResolvable();
+      ref.current.resolvableMap[id] = r;
+      ref.current.needFollow = true;
+      promise = r.promise.then(() => true);
+    };
     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);
-          });
-        }
+        scroll();
       }
     } 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);
-        });
-      }
+      scroll();
       if (animation) {
         sleep(10).then(() => {
           setScrollWithAnimation(false);
         });
       }
     }
+    return promise;
+  }, []);
+  const onDone = useCallback(event => {
+    const id = event.detail.scrollIntoView;
+    if (id && ref.current.resolvableMap[id]) {
+      ref.current.resolvableMap[id].resolve();
+      delete ref.current.resolvableMap[id];
+    }
   }, []);
   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;
-    })
+    const promise = loadedPromise || Promise.resolve();
+    promise
     // 渲染完毕后，开始滚动到最底部
     .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;
+      scrollViewId,
+      bindscroll: event => {
+        var _options$onScroll;
         const {
           scrollTop,
-          scrollHeight
+          scrollHeight,
+          clientHeight
         } = 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;
-        }
+        ref.current.needFollow = scrollHeight - scrollTop <= clientHeight + 25;
+        options === null || options === void 0 || (_options$onScroll = options.onScroll) === null || _options$onScroll === void 0 || _options$onScroll.call(options, event);
       },
+      binddone: onDone,
       scrollWithAnimation,
-      scrollIntoView: scrollIntoViewId
+      scrollIntoView: ref.current.needFollow ? scrollIntoViewId : ''
     }
   };
 }
@@ -181,21 +98,28 @@ const ScrollBottomView = /*#__PURE__*/forwardRef((props, ref) => {
     scrollToBottom,
     scrollViewProps,
     scrollIntoViewId,
-    contentViewProps,
     scrollViewLoading
   } = useScrollBottomView({
-    onScroll: props.onScroll
+    scrollViewId: props.scrollViewId,
+    onScroll: props.onScroll,
+    tick: props.tick,
+    loadedPromise: props.loadedPromise
   });
-  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, {
+  return /*#__PURE__*/React.createElement(LazyScrollView, {
+    className: "".concat(props.className || '', " ").concat(scrollViewLoading ? 't-agent-message-list-loading' : ''),
+    style: props.style,
+    hideScrollbar: props.hideScrollbar || false,
+    bindscroll: scrollViewProps.bindscroll,
+    binddone: scrollViewProps.binddone,
+    scrollViewId: scrollViewProps.scrollViewId,
+    scrollWithAnimation: scrollViewProps.scrollWithAnimation,
+    scrollIntoView: scrollViewProps.scrollIntoView
+  }, /*#__PURE__*/React.createElement(View, {
     className: "".concat(props.contentClassName || '')
-  }), props.children, /*#__PURE__*/React.createElement(View, {
+  }, props.children, /*#__PURE__*/React.createElement(View, {
     id: scrollIntoViewId
   })));
 });

package/dist/MessageList/index.d.ts

@@ -1,24 +1,22 @@
 import './index.less';
 import React from 'react';
+interface RenderPartOptions {
+    notifyHeightChanged: () => void;
+}
 interface Props {
     className?: string;
     style?: React.CSSProperties;
     wrapperClassName?: string;
     wrapperStyle?: React.CSSProperties;
-    renderTop?: React.ReactNode;
-    renderBottom?: React.ReactNode;
+    renderTop?: React.ReactNode | ((options: RenderPartOptions) => React.ReactNode);
+    renderBottom?: React.ReactNode | ((options: RenderPartOptions) => React.ReactNode);
     onScroll?: (event: any) => void;
+    hideScrollbar?: boolean;
     roleSide?: {
         user?: 'start' | 'end' | string;
         assistant?: 'start' | 'end' | string;
         [key: string]: 'start' | 'end' | string;
     };
-    historyLimit?: {
-        /** 历史消息数量限制 */
-        count: number;
-        /** 超过限制时显示的提示文本 */
-        tipText: string;
-    };
 }
 declare const MessageList: (props: Props) => React.JSX.Element;
 export default MessageList;

package/dist/MessageList/index.js

@@ -3,11 +3,15 @@ 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 from 'react';
+import React, { useRef, useState } from 'react';
 import MessageRender from '../MessageRender';
-import { useAgentMessage, useAgentSessionValue } from '../hooks';
+import { useAgentMessage, useAgentSessionValue, useKeyboardHeight, useOnEvent } from '../hooks';
 import ScrollBottomView from './ScrollBottomView';
 import { useStableCallback } from '../hooks/useStableCallback';
+import { createResolvable, objectsId } from '../utils/object';
+import { generateId } from '@ray-js/t-agent';
+import LazyItem from '../LazyScrollView/LazyItem';
+import { useSleep } from '../hooks/useSleep';
 const MessageList = props => {
   const {
     className,
@@ -15,26 +19,80 @@ const MessageList = props => {
     style,
     wrapperClassName,
     wrapperStyle,
-    historyLimit
+    hideScrollbar
   } = props;
+  const [scrollViewId] = useState(() => "message-list-scroll-".concat(generateId()));
   const messages = useAgentMessage();
   const onScroll = useStableCallback(props.onScroll);
   const [showSelect] = useAgentSessionValue('UIRay.multiSelect.show');
+  const keyboardHeight = useKeyboardHeight();
+  const ref = useRef();
+  if (!ref.current) {
+    ref.current = {
+      loaded: createResolvable()
+    };
+  }
+  const scrollRef = useRef(null);
+  useOnEvent('scrollToBottom', payload => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollToBottom(payload);
+    }
+  });
+  useOnEvent('messageListInit', () => {
+    ref.current.loaded.resolve();
+  });
+  const [_tick, setTick] = useState(() => "".concat(Math.random()));
+  const tick = objectsId(messages, _tick, keyboardHeight);
+  const notifyHeightChanged = useStableCallback(() => {
+    setTick("".concat(Math.random()));
+  });
+  const [tickTop, setTickTop] = useState(() => "".concat(Math.random()));
+  const notifyHeightChangedTop = useStableCallback(() => {
+    notifyHeightChanged();
+    setTickTop("".concat(Math.random()));
+  });
+  const [tickBottom, setTickBottom] = useState(() => "".concat(Math.random()));
+  const notifyHeightChangedEnd = useStableCallback(() => {
+    notifyHeightChanged();
+    setTickBottom("".concat(Math.random()));
+  });
+  const showMapRef = useRef({
+    map: {},
+    pending: false
+  });
+  const [, forceUpdate] = useState(0);
+  const sleep = useSleep();
+  const top = typeof props.renderTop === 'function' ? props.renderTop({
+    notifyHeightChanged: notifyHeightChangedTop
+  }) : props.renderTop;
+  const bottom = typeof props.renderBottom === 'function' ? props.renderBottom({
+    notifyHeightChanged: notifyHeightChangedEnd
+  }) : props.renderBottom;
   return /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-list ".concat(wrapperClassName || ''),
     "data-testid": "t-agent-message-list",
     style: wrapperStyle,
     id: "message-list"
   }, /*#__PURE__*/React.createElement(ScrollBottomView, {
+    tick: tick,
+    scrollViewId: scrollViewId,
+    ref: scrollRef,
     className: "".concat(className || '', " t-agent-message-list-scroll"),
     contentClassName: "t-agent-message-list-scroll-content",
     style: style,
-    onScroll: onScroll
-  }, historyLimit && historyLimit.count < messages.length && /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-message-list-history-tip"
-  }, historyLimit.tipText), /*#__PURE__*/React.createElement(View, {
+    onScroll: onScroll,
+    hideScrollbar: hideScrollbar,
+    loadedPromise: ref.current.loaded.promise
+  }, /*#__PURE__*/React.createElement(LazyItem, {
+    scrollViewId: scrollViewId,
+    itemId: "".concat(scrollViewId, "-top"),
+    key: "".concat(scrollViewId, "-top"),
+    update: tickTop,
+    ready: true,
+    index: 0
+  }, /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-list-padding-start"
-  }), props.renderTop, messages.map((msg, index) => {
+  }), top), messages.map((msg, index) => {
     let side = roleSide === null || roleSide === void 0 ? void 0 : roleSide[msg.role];
     if (!side) {
       side = msg.role === 'user' ? 'end' : 'start';
@@ -45,10 +103,32 @@ const MessageList = props => {
       key: msg.id,
       message: msg,
       isLatestMessage: isLatestMessage,
-      side: side
+      side: side,
+      notifyHeightChanged: notifyHeightChanged,
+      scrollViewId: scrollViewId,
+      index: index + 1,
+      show: showMapRef.current.map[msg.id] == null ? true : showMapRef.current.map[msg.id],
+      onShowChange: show => {
+        showMapRef.current.map[msg.id] = show;
+        if (showMapRef.current.pending) {
+          return;
+        }
+        showMapRef.current.pending = true;
+        sleep(100).then(() => {
+          showMapRef.current.pending = false;
+          forceUpdate(Math.random());
+        });
+      }
     });
-  }), props.renderBottom, /*#__PURE__*/React.createElement(View, {
+  }), /*#__PURE__*/React.createElement(LazyItem, {
+    scrollViewId: scrollViewId,
+    itemId: "".concat(scrollViewId, "-bottom"),
+    key: "".concat(scrollViewId, "-bottom"),
+    update: tickBottom,
+    ready: true,
+    index: messages.length + 1
+  }, bottom, /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-list-padding"
-  })));
+  }))));
 };
 export default MessageList;

package/dist/MessageList/index.less

@@ -24,10 +24,9 @@
 }
 
 .t-agent-message-list-padding {
-  flex: 1
 }
 
-.t-agent-message-list-hide {
+.t-agent-message-list-loading {
   opacity: 0;
 }
 

package/dist/MessageRender/index.d.ts

@@ -6,6 +6,11 @@ interface Props {
     isLatestMessage: boolean;
     side: 'start' | 'end' | string;
     showSelect?: boolean;
+    notifyHeightChanged: () => void;
+    scrollViewId?: string;
+    index: number;
+    onShowChange?: (show: boolean) => void;
+    show?: boolean;
 }
-export default function MessageRender({ message, isLatestMessage, side, showSelect }: Props): React.JSX.Element;
+export default function MessageRender({ message, isLatestMessage, side, showSelect, notifyHeightChanged, scrollViewId, index, onShowChange, show, }: Props): React.JSX.Element;
 export {};