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

package/dist/ChatContainer/index.js

@@ -4,7 +4,7 @@ import "core-js/modules/esnext.iterator.filter.js";
 import "core-js/modules/esnext.iterator.map.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import './index.less';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { View } from '@ray-js/components';
 import cx from 'clsx';
 import { SharedProvider } from '../contexts';
@@ -27,8 +27,6 @@ export default function ChatContainer(props) {
     style
   } = props;
   const [messages, setMessages] = useState([]);
-  const [tickValue, setRenderTick] = useState(0);
-  const notifyHeightChanged = useCallback(() => setRenderTick(t => t + 1), []);
   const [agent] = useState(() => {
     const agent = createAgent();
     if (!agent.plugins.ui) {
@@ -78,7 +76,6 @@ export default function ChatContainer(props) {
         messages
       } = _ref;
       setMessages(messages);
-      notifyHeightChanged();
       emitEvent('scrollToBottom', {
         animation: false
       });
@@ -92,7 +89,6 @@ export default function ChatContainer(props) {
         case 'show':
           {
             setMessages(prev => [...prev, message]);
-            notifyHeightChanged();
             emitEvent('scrollToBottom', {
               animation: false
             });
@@ -103,7 +99,6 @@ export default function ChatContainer(props) {
             setMessages(prev => {
               return prev.map(item => {
                 if (item.id === message.id) {
-                  notifyHeightChanged();
                   return message;
                 }
                 return item;
@@ -116,7 +111,6 @@ export default function ChatContainer(props) {
             setMessages(prev => {
               return prev.filter(item => item.id !== message.id);
             });
-            notifyHeightChanged();
             emitEvent('scrollToBottom', {
               animation: false,
               follow: true
@@ -187,9 +181,7 @@ export default function ChatContainer(props) {
     value: {
       agent: uiAgent,
       messages,
-      notifyHeightChanged,
       keyboardHeight,
-      tickValue,
       renderOptions
     }
   }, children));

package/dist/EchartsBlockRender/index.js

@@ -1,6 +1,4 @@
 import Render from './index.rjs';
-import logger from '../logger';
-
 // eslint-disable-next-line no-undef
 Component({
   properties: {
@@ -30,20 +28,16 @@ Component({
       this.rjs = new Render(this);
     },
     ready: function () {
-      logger.debug('EchartsBlockRender ready', {
-        canvasId: this.data.canvasId,
-        content: this.data.content
-      });
+      // logger.debug('EchartsBlockRender ready', {
+      //   canvasId: this.data.canvasId,
+      //   content: this.data.content,
+      // });
       this.updateContent(this.data.content);
     }
   },
   methods: {
     updateContent: function (content) {
       try {
-        logger.debug('EchartsBlockRender update', {
-          canvasId: this.data.canvasId,
-          content
-        });
         const data = JSON.parse(content);
         if (data.option) {
           if (!this.isInit) {
@@ -70,6 +64,10 @@ Component({
   },
   observers: {
     content: function (content) {
+      // logger.debug('EchartsBlockRender update', {
+      //   canvasId: this.data.canvasId,
+      //   content,
+      // });
       this.updateContent(content);
     }
   }

package/dist/LazyScrollView/LazyItem/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface Props {
+  className?: string;
+  children?: React.ReactNode;
+  update?: string;
+  bindclick?: () => void;
+  bindshow?: (event: { detail: { show: boolean } }) => void;
+  style?: React.CSSProperties;
+  ready?: boolean;
+  scrollViewId?: string;
+  itemId?: string;
+  index: number;
+}
+
+declare function SizeView(props: Props): React.JSX.Element;
+
+export default SizeView;

package/dist/LazyScrollView/LazyItem/index.js

@@ -0,0 +1,51 @@
+// eslint-disable-next-line no-undef
+Component({
+  options: {
+    styleIsolation: 'shared'
+  },
+  properties: {
+    className: {
+      type: String,
+      value: ''
+    },
+    scrollViewId: {
+      type: String,
+      value: ''
+    },
+    update: {
+      type: String,
+      value: ''
+    },
+    ready: {
+      type: Boolean,
+      value: false
+    },
+    itemId: {
+      type: String,
+      value: ''
+    },
+    index: {
+      type: Number
+    }
+  },
+  data: {
+    show: true
+  },
+  lifetimes: {},
+  methods: {
+    click() {
+      this.triggerEvent('click');
+    },
+    setShow(show) {
+      if (show !== this.data.show) {
+        this.setData({
+          show
+        });
+        this.triggerEvent('show', {
+          show
+        });
+      }
+    }
+  },
+  observers: {}
+});

package/dist/LazyScrollView/LazyItem/index.json

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

package/dist/LazyScrollView/LazyItem/index.tyml

@@ -0,0 +1,16 @@
+<sjs src="../lazy-scroll-view.sjs" module="lazyScrollView"></sjs>
+
+<view
+  change:update="{{lazyScrollView.itemUpdateObserver}}"
+  update="{{update}}"
+  change:ready="{{lazyScrollView.itemReadyObserver}}"
+  ready="{{ready}}"
+  change:index="{{lazyScrollView.itemIndexObserver}}"
+  index="{{index}}"
+  bind:tap="click"
+  data-scroll-view-id="{{scrollViewId}}"
+  data-item-id="{{itemId}}"
+  class="{{className || ''}}"
+>
+  <slot ty:if="{{show}}"></slot>
+</view>

package/dist/LazyScrollView/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+
+export interface ScrollEventDetail {
+  scrollTop: number;
+  scrollHeight: number;
+  deltaY: number;
+  deltaX: number;
+  clientHeight: number;
+  clientWidth: number;
+}
+
+interface Props {
+  className?: string;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  scrollViewId: string;
+  hideScrollbar?: boolean;
+  scrollWithAnimation?: boolean;
+  scrollIntoView?: string;
+  bindscroll?: (event: { detail: ScrollEventDetail }) => void;
+  binddone?: (event: { detail: { scrollIntoView: string } }) => void;
+}
+
+declare function LazyScrollView(props: Props): React.JSX.Element;
+
+export default LazyScrollView;

package/dist/LazyScrollView/index.js

@@ -0,0 +1,27 @@
+// eslint-disable-next-line no-undef
+Component({
+  options: {
+    styleIsolation: 'shared'
+  },
+  properties: {
+    scrollViewId: {
+      type: String
+    },
+    hideScrollbar: {
+      type: Boolean,
+      value: false
+    },
+    scrollWithAnimation: {
+      type: Boolean,
+      value: false
+    },
+    scrollIntoView: {
+      type: String,
+      value: ''
+    }
+  },
+  data: {},
+  lifetimes: {},
+  methods: {},
+  observers: {}
+});

package/dist/LazyScrollView/index.json

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

package/dist/LazyScrollView/index.tyml

@@ -0,0 +1,15 @@
+<sjs src="./lazy-scroll-view.sjs" module="lazyScrollView"></sjs>
+
+<scroll-view
+  scroll-y="{{true}}"
+  class="{{className}}"
+  id="{{scrollViewId}}"
+  hideScrollbar="{{hideScrollbar}}"
+  data-scroll-view-id="{{scrollViewId}}"
+  scrollWithAnimation="{{scrollWithAnimation}}"
+  change:scrollIntoView="{{lazyScrollView.scrollIntoViewObserver}}"
+  scrollIntoView="{{scrollIntoView}}"
+  bind:scroll="{{lazyScrollView.scroll}}"
+>
+  <slot></slot>
+</scroll-view>

package/dist/LazyScrollView/lazy-scroll-view.sjs

@@ -0,0 +1,317 @@
+// ownerInstance：表示的是触发事件的组件所在组件的 ComponentDescriptor 实例。如果触发事件的组件是在页面内的，ownerInstance 表示的是页面实例。
+// instance：表示触发事件的组件的 ComponentDescriptor 实例。
+
+const { createWeakRefPonyfill } = require('./weak-ref.sjs');
+
+const WeakRef = createWeakRefPonyfill();
+
+// scrollViewId -> WeakRef(ScrollViewContext)
+const map = new Map();
+
+function getVisibleItemIdsBinary(input) {
+  const {
+    sizes,
+    containerSize,
+    offset,
+    overscanCount,
+  } = input
+
+  if (!offset || !containerSize || !sizes.length) {
+    return null
+  }
+
+  const total = sizes.length;
+  const avgHeight = sizes.reduce((sum, s) => sum + s.height, 0) / total || 0;
+  const overscanHeight = overscanCount * avgHeight;
+
+  const visibleTop = offset;
+  const visibleBottom = offset + containerSize;
+  const overscanTop = visibleTop - overscanHeight;
+  const overscanBottom = visibleBottom + overscanHeight;
+
+  // Step 1: 构建 offsets（每个 item 的 top）
+  const offsets = [];
+  let currTop = 0;
+  for (let i = 0; i < total; i++) {
+    offsets.push(currTop);
+    currTop += sizes[i].height;
+  }
+
+  // Step 2: 二分查找第一个 bottom > overscanTop 的 item
+  let start = 0, end = total - 1, startIndex = total;
+  while (start <= end) {
+    const mid = Math.floor((start + end) / 2);
+    const bottom = offsets[mid] + sizes[mid].height;
+    if (bottom >= overscanTop) {
+      startIndex = mid;
+      end = mid - 1;
+    } else {
+      start = mid + 1;
+    }
+  }
+
+  // Step 3: 向后遍历直到 top > overscanBottom
+  const visibleMap = Object.create(null);
+
+  let i = 0;
+  while (i < startIndex) {
+    i++
+  }
+
+  while (i < total && offsets[i] <= overscanBottom) {
+    visibleMap[sizes[i].itemId] = true;
+    i++;
+  }
+
+  return visibleMap
+}
+
+const getScrollViewContext = function (ownerInstance, instance) {
+  const state = ownerInstance.getState()
+  let context = state.scrollViewContext
+  if (!context) {
+    const { scrollViewId } = instance.getDataset()
+    const rect = instance.getBoundingClientRect()
+
+    context = {
+      scrollViewId,
+      height: rect.height,
+      width: rect.width,
+      overscanCount: 5,
+      items: new Map(), // itemId -> WeakRef(ItemContext)
+      updateShowPending: false,
+      offset: 0,
+      lastScrollEventDetail: null,
+      lastScrollIntoView: null,
+      refresh() {
+        const rect = instance.getBoundingClientRect()
+        context.height = rect.height
+        context.width = rect.width
+      },
+      refreshSizes() {
+        const sizes = [];
+        context.items.forEach((ref) => {
+          const itemContext = ref.deref()
+          if (itemContext) {
+            sizes.push(itemContext.data)
+          }
+        })
+        sizes.sort((a, b) => a.index - b.index); // 按照 top 排序
+        context.sizes = sizes;
+      },
+      updateVisibleItems() {
+        if (context.updateShowPending) {
+          return
+        }
+        context.updateShowPending = true;
+        ownerInstance.requestAnimationFrame(() => {
+          const visibleMap = getVisibleItemIdsBinary({
+            sizes: context.sizes,
+            containerSize: context.height,
+            offset: context.offset,
+            overscanCount: context.overscanCount,
+          })
+          if (visibleMap) {
+            context.items.forEach((ref, itemId) => {
+              const itemContext = ref.deref()
+              if (itemContext) {
+                itemContext.setShow(!!visibleMap[itemId]);
+              }
+            })
+          }
+          context.updateShowPending = false;
+        })
+      }
+    }
+    state.scrollViewContext = context;
+     // 使用 WeakRef 来避免内存泄漏
+    map.set(scrollViewId, new WeakRef(context));
+  }
+  return context;
+}
+
+const getScrollViewContextById = function (scrollViewId) {
+  const ref = map.get(scrollViewId);
+  if (!ref) {
+    return null;
+  }
+  const context = ref.deref();
+  if (!context) {
+    console.warn(`ScrollViewContext for scrollViewId ${scrollViewId} has been garbage collected.`);
+    map.delete(scrollViewId);
+    return null;
+  }
+  return context;
+}
+
+const scroll = function (event, ownerInstance) {
+  const instance = event.instance
+  const context = getScrollViewContext(ownerInstance, instance)
+  context.offset = event.detail.scrollTop;
+  // 触发父组件的滚动事件
+  ownerInstance.triggerEvent('scroll', {
+    ...event.detail,
+    clientHeight: context.height,
+    clientWidth: context.width,
+  });
+  context.lastScrollEventDetail = event.detail;
+  context.updateVisibleItems();
+}
+
+const getItemContext = function (ownerInstance, instance) {
+  const state = ownerInstance.getState()
+  let itemContext = state.context
+  if (!itemContext) {
+    const { scrollViewId, itemId } = instance.getDataset()
+    const rect = instance.getBoundingClientRect()
+    itemContext = {
+      show: true,
+      scrollViewId,
+      data: {
+        itemId,
+        index: null,
+        height: rect.height,
+      },
+      ready: false,
+      setShow(show) {
+        if (show === itemContext.show || !itemContext.ready) {
+          return;
+        }
+        itemContext.show = show;
+        if (show) {
+          ownerInstance.requestAnimationFrame(() => {
+            itemContext.refreshSize();
+          })
+        }
+        ownerInstance.callMethod('setShow', show);
+      },
+      refreshSize(byUpdate = false) {
+        if (byUpdate && itemContext.ready && itemContext.show) {
+          // 为了测量真实的高度，先清除 minHeight
+          instance.setStyle({
+            minHeight: '',
+          });
+        }
+
+        const rect = instance.getBoundingClientRect()
+        itemContext.data.height = rect.height;
+        if (itemContext.ready) {
+          instance.setStyle({
+            minHeight: `${rect.height}px`,
+          });
+        }
+      }
+    }
+    const context = getScrollViewContextById(scrollViewId)
+    if (context) {
+      context.items.set(itemId, new WeakRef(itemContext));
+    } else {
+      console.warn(`ScrollViewContext not found for scrollViewId: ${scrollViewId}`);
+    }
+    state.context = itemContext;
+  }
+  return itemContext;
+}
+
+const itemUpdateObserver = function (newValue, oldValue, ownerInstance, instance) {
+  if (newValue === oldValue) {
+    return;
+  }
+
+  const itemContext = getItemContext(ownerInstance, instance)
+  itemContext.refreshSize(true);
+  if (itemContext.ready) {
+    ownerInstance.requestAnimationFrame(() => {
+      const context = getScrollViewContextById(itemContext.scrollViewId);
+      if (context) {
+        context.refreshSizes();
+        context.updateVisibleItems();
+      }
+    })
+  }
+
+};
+
+const itemReadyObserver = function (newValue, oldValue, ownerInstance, instance) {
+  if (newValue === oldValue) {
+    return;
+  }
+
+  const itemContext = getItemContext(ownerInstance, instance)
+
+  // ready 属性变化时，设置 ready 状态
+  if (newValue === true) {
+    itemContext.ready = true;
+  }
+
+  itemContext.refreshSize();
+};
+
+const itemIndexObserver = function (newValue, oldValue, ownerInstance, instance) {
+  if (newValue === oldValue || newValue == null) {
+    return;
+  }
+  const itemContext = getItemContext(ownerInstance, instance)
+  itemContext.data.index = newValue;
+  const context = getScrollViewContextById(itemContext.scrollViewId);
+  if (context) {
+    context.refreshSizes();
+    context.updateVisibleItems();
+  }
+}
+
+const scrollIntoViewObserver = function (newValue, oldValue, ownerInstance, instance) {
+  const context = getScrollViewContext(ownerInstance, instance)
+  if (newValue === oldValue) {
+    return;
+  }
+
+  ownerInstance.requestAnimationFrame(() => {
+    ownerInstance.triggerEvent('done', {
+      scrollIntoView: newValue,
+    })
+  })
+
+  if (!newValue) {
+    return
+  }
+
+  const last = context.lastScrollIntoView;
+
+  if (last && last === newValue) {
+    return;
+  }
+
+  context.lastScrollIntoView = newValue
+
+  const rect = instance.getBoundingClientRect()
+  if (context.lastScrollEventDetail == null) {
+    return
+  }
+
+  // 这个就是用来滚动到底部的，所以直接计算底部 offset 就行
+
+  const lastOffset = context.offset
+  context.offset = context.lastScrollEventDetail.scrollHeight - rect.height;
+  context.refresh()
+  context.updateVisibleItems();
+
+  ownerInstance.triggerEvent('scroll', {
+    scrollTop: context.offset,
+    deltaX: 0,
+    deltaY: context.offset - lastOffset,
+    scrollLeft: context.lastScrollEventDetail.scrollLeft,
+    scrollHeight: context.lastScrollEventDetail.scrollHeight,
+    scrollWidth: context.lastScrollEventDetail.scrollWidth,
+    clientHeight: context.height,
+    clientWidth: context.width,
+  });
+}
+
+export default {
+  itemIndexObserver,
+  itemUpdateObserver,
+  itemReadyObserver,
+  scrollIntoViewObserver,
+  scroll
+};

package/dist/LazyScrollView/weak-ref.sjs

@@ -0,0 +1,45 @@
+export function createWeakRefPonyfill() {
+  if (typeof globalThis.WeakRef === 'function') {
+    return globalThis.WeakRef; // 用原生的
+  }
+
+  console.warn('[ponyfill] WeakRef not supported. Using WeakMap + FinalizationRegistry fallback.');
+
+  const _refs = new WeakMap(); // WeakRef实例 -> target
+  const _reverse = new WeakMap(); // target -> WeakRef实例数组
+
+  const registry = typeof FinalizationRegistry !== 'undefined'
+    ? new FinalizationRegistry((heldValue) => {
+      const { targetKey } = heldValue;
+      const refs = _reverse.get(targetKey);
+      if (refs) {
+        for (const ref of refs) {
+          _refs.delete(ref);
+        }
+        _reverse.delete(targetKey);
+      }
+    })
+    : null;
+
+  return class WeakRefPonyfill {
+    constructor(target) {
+      if (typeof target !== 'object' || target === null) {
+        throw new TypeError('WeakRef target must be an object');
+      }
+
+      _refs.set(this, target);
+
+      if (registry) {
+        registry.register(target, { targetKey: target });
+
+        const existing = _reverse.get(target) || [];
+        existing.push(this);
+        _reverse.set(target, existing);
+      }
+    }
+
+    deref() {
+      return _refs.get(this);
+    }
+  };
+}

package/dist/MessageInput/MessageInputAIStream/AsrInput.js

@@ -3,7 +3,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { Button, View } from '@ray-js/ray';
 import cx from 'clsx';
 import { useTranslate } from '../../hooks';
-import { WaveformVisualizer } from './WaveformVisualizer';
+import Waveform from './Waveform';
 import logger from '../../logger';
 const AsrInput = props => {
   const touchRef = useRef({
@@ -92,7 +92,7 @@ const AsrInput = props => {
     className: "t-agent-message-input-ptt-active-text-top"
   }, t('t-agent.input.asr.oninput.text.top')), /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-input-ptt-active-text-center"
-  }, t('t-agent.input.asr.oninput.text.center')), /*#__PURE__*/React.createElement(WaveformVisualizer, {
+  }, t('t-agent.input.asr.oninput.text.center')), /*#__PURE__*/React.createElement(Waveform, {
     amplitudeCount: props.amplitudeCount
   }))), !props.recording && /*#__PURE__*/React.createElement(Button, {
     className: cx('t-agent-message-input-button', 't-agent-message-input-ptt-action-button', props.responding ? 't-agent-message-input-button-stop' : 't-agent-message-input-button-keyboard'),

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

@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface Props {
+  amplitudeCount: number;
+}
+
+declare function Waveform(props: Props): React.JSX.Element;
+
+export default Waveform;