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

package/dist/MessageRender/index.js

@@ -5,14 +5,23 @@ import "core-js/modules/web.dom-collections.iterator.js";
 import './index.less';
 import { View } from '@ray-js/components';
 import React, { useState } from 'react';
+import { ChatMessageStatus } from '@ray-js/t-agent';
 import TileRender from '../TileRender';
 import { useChatAgent, useOnEvent } from '../hooks';
+import LazyItem from '../LazyScrollView/LazyItem/index.js';
+import { objectsId } from '../utils/object';
+import { useStableCallback } from '../hooks/useStableCallback';
 export default function MessageRender(_ref) {
   let {
     message,
     isLatestMessage,
     side,
-    showSelect
+    showSelect,
+    notifyHeightChanged,
+    scrollViewId = '',
+    index,
+    onShowChange,
+    show = true
   } = _ref;
   const {
     id,
@@ -32,36 +41,59 @@ export default function MessageRender(_ref) {
       setIsSelected(!!(value !== null && value !== void 0 && value.includes(id)));
     }
   });
+  const [_tick, setTick] = useState(() => "".concat(Math.random()));
+  const _notifyHeightChanged = useStableCallback(() => {
+    notifyHeightChanged();
+    setTick("".concat(Math.random()));
+  });
+  const tick = objectsId(message, _tick);
   if (tiles.length === 0) {
-    return /*#__PURE__*/React.createElement(View, {
+    return /*#__PURE__*/React.createElement(LazyItem, {
+      scrollViewId: scrollViewId,
+      itemId: id,
       key: id,
+      update: tick,
+      index: index,
+      ready: message.status === ChatMessageStatus.FINISH,
       className: "t-agent-message-list-row-empty t-agent-message-list-row-".concat(side)
     });
   }
-  return /*#__PURE__*/React.createElement(View, {
-    key: id,
-    className: "t-agent-message-list-row-container",
-    onClick: () => {
-      if (showSelect) {
-        const prev = agent.session.get("UIRay.multiSelect.selected") || [];
-        isSelected ? agent.session.set("UIRay.multiSelect.selected", prev.filter(i => i !== id)) : agent.session.set("UIRay.multiSelect.selected", [...prev, id]);
-      }
-    }
-  }, showSelect && /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-message-list-row-check"
+  const children = [showSelect ? /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-list-row-check",
+    key: "checkbox"
   }, /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-list-checkbox-container ".concat(isSelected ? 't-agent-message-list-checkbox-selected' : '')
   }, /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-list-checkbox-check"
-  }))), /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-message-list-row t-agent-message-list-row-".concat(side)
+  }))) : null, /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-list-row t-agent-message-list-row-".concat(side),
+    key: "tiles"
   }, tiles.map(tile => {
     return /*#__PURE__*/React.createElement(TileRender, {
       tile: tile,
       message: message,
       side: side,
       key: tile.id,
-      isLatestMessage: isLatestMessage
+      isLatestMessage: isLatestMessage,
+      notifyHeightChanged: _notifyHeightChanged
     });
-  })));
+  }))];
+  return /*#__PURE__*/React.createElement(LazyItem, {
+    key: id,
+    itemId: id,
+    index: index,
+    className: "t-agent-message-list-row-container",
+    update: tick,
+    scrollViewId: scrollViewId,
+    bindshow: event => {
+      onShowChange === null || onShowChange === void 0 || onShowChange(event.detail.show);
+    },
+    ready: message.status === ChatMessageStatus.FINISH,
+    bindclick: () => {
+      if (showSelect) {
+        const prev = agent.session.get("UIRay.multiSelect.selected") || [];
+        isSelected ? agent.session.set("UIRay.multiSelect.selected", prev.filter(i => i !== id)) : agent.session.set("UIRay.multiSelect.selected", [...prev, id]);
+      }
+    }
+  }, show && children);
 }

package/dist/MessageRender/index.less

@@ -5,16 +5,17 @@
 .t-agent-message-list-row-check {
   display: flex;
   align-items: flex-end;
-  margin-bottom: calc(var(--t-agent-y-gap) + 24rpx);
+  padding-bottom: calc(var(--t-agent-y-gap) + 24rpx);
   margin-right: 28rpx;
 }
 
 .t-agent-message-list-row {
-  margin-bottom: var(--t-agent-y-gap);
+  padding-bottom: var(--t-agent-y-gap);
   display: flex;
   flex-direction: column;
-  flex: 1 0 auto;
+  flex: 1;
   width: 100%;
+  min-width: 0;
 }
 
 .t-agent-message-list-row-start {

package/dist/TileRender/index.d.ts

@@ -6,6 +6,7 @@ interface Props {
     message: ChatMessageObject;
     side: 'start' | 'end' | string;
     isLatestMessage?: boolean;
+    notifyHeightChanged: () => void;
 }
-declare const _default: React.MemoExoticComponent<({ tile, message, isLatestMessage, side }: Props) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ tile, message, isLatestMessage, side, notifyHeightChanged }: Props) => React.JSX.Element>;
 export default _default;

package/dist/TileRender/index.js

@@ -1,17 +1,17 @@
 import './index.less';
 import React, { useCallback, useMemo } from 'react';
-import { useChatAgent, useNotifyHeightChanged, useRenderOptions } from '../hooks';
+import { useChatAgent, useRenderOptions } from '../hooks';
 import { TilePropsContext } from '../contexts';
 const TileRender = _ref => {
   let {
     tile,
     message,
     isLatestMessage,
-    side
+    side,
+    notifyHeightChanged
   } = _ref;
   const agent = useChatAgent();
   const emitTileEvent = useCallback(async payload => agent.emitTileEvent(tile.id, payload), [agent, tile.id]);
-  const notifyHeightChanged = useNotifyHeightChanged();
   const {
     renderTileAs
   } = useRenderOptions();

package/dist/contexts.d.ts

@@ -13,15 +13,11 @@ declare const SharedProvider: ({ value, children }: import("react").PropsWithChi
         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) => {
+}>) => import("react").JSX.Element, useSharedState: <K extends "agent" | "messages" | "keyboardHeight" | "renderOptions">(key: K) => {
     agent: UIChatAgent;
     messages: ChatMessageObject[];
     keyboardHeight: number;
     renderOptions: RenderOptions;
-    notifyHeightChanged: () => void;
-    tickValue: number;
 }[K];
 export { SharedProvider, useSharedState };

package/dist/hooks/context.d.ts

@@ -1,8 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { TTTAction } from '../types';
 export declare const useChatAgent: () => import("../contexts").UIChatAgent;
-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;

package/dist/hooks/context.js

@@ -4,12 +4,6 @@ import { TilePropsContext, useSharedState } from '../contexts';
 export const useChatAgent = () => {
   return useSharedState('agent');
 };
-export const useTick = () => {
-  return useSharedState('tickValue');
-};
-export const useNotifyHeightChanged = () => {
-  return useSharedState('notifyHeightChanged');
-};
 export const useAgentMessage = () => {
   return useSharedState('messages');
 };

package/dist/tiles/BubbleTile/index.js

@@ -113,7 +113,8 @@ const BubbleTile = props => {
       tile: t,
       message: message,
       key: t.id,
-      isLatestMessage: isLatestMessage
+      isLatestMessage: isLatestMessage,
+      notifyHeightChanged: props.notifyHeightChanged
     }));
   })(), /*#__PURE__*/React.createElement(LoadingIndicator, {
     status: status

package/dist/tiles/CardTile/index.less

@@ -1,3 +1,3 @@
 .t-agent-card-tile {
-
+  width: 100%;
 }

package/dist/tiles/ExecuteCardTile/index.js

@@ -161,9 +161,10 @@ export default function ExecuteCardTile(props) {
   return /*#__PURE__*/React.createElement(View, {
     className: "t-agent-execute-card-tile"
   }, cards.map(card => {
+    const key = "".concat(card.displayType, "-").concat(card.deviceId || card.sceneId);
     return /*#__PURE__*/React.createElement(View, {
       className: "t-agent-execute-card-tile-card",
-      key: card.deviceId || card.sceneId
+      key: key
     }, card.displayType === 'device' && /*#__PURE__*/React.createElement(View, {
       className: "t-agent-execute-card-tile-device",
       onClick: () => handleTap(card)

package/dist/tiles/OperateCardTile/Expand.d.ts

@@ -18,6 +18,7 @@ interface ExpandProps {
     operations?: IOperations;
     tapDevice?: (e: any) => void;
     tapScene?: (e: any) => void;
+    onChangeTab?: (key: string) => void;
 }
-export default function Expand({ operations, tapDevice, tapScene, }: ExpandProps): React.JSX.Element;
+export default function Expand({ operations, tapDevice, tapScene, onChangeTab, }: ExpandProps): React.JSX.Element;
 export {};

package/dist/tiles/OperateCardTile/Expand.js

@@ -30,7 +30,8 @@ export default function Expand(_ref) {
       more: []
     },
     tapDevice,
-    tapScene
+    tapScene,
+    onChangeTab
   } = _ref;
   const t = useTranslate();
   const deviceCount = (((_operations$device = operations.device) === null || _operations$device === void 0 ? void 0 : _operations$device.length) || 0) + (((_operations$moreDevic = operations.moreDevice) === null || _operations$moreDevic === void 0 ? void 0 : _operations$moreDevic.length) || 0);
@@ -170,7 +171,8 @@ export default function Expand(_ref) {
     className: "t-agent-expand-container"
   }, tabs.length > 0 ? /*#__PURE__*/React.createElement(Tabs, {
     tabs: tabs,
-    defaultActiveKey: tabs[0].key
+    defaultActiveKey: tabs[0].key,
+    onChange: onChangeTab
   }) : /*#__PURE__*/React.createElement(View, {
     className: "t-agent-expand-empty"
   }, /*#__PURE__*/React.createElement(Text, null, t('t-agent.expand.no.details'))));

package/dist/tiles/OperateCardTile/index.js

@@ -5,7 +5,7 @@ import "core-js/modules/web.dom-collections.iterator.js";
 import { Text, View } from '@ray-js/components';
 import React, { useMemo, useState } from 'react';
 import './index.less';
-import { useTileProps, useTranslate } from '../../hooks';
+import { useTranslate } from '../../hooks';
 import Expand from './Expand';
 import { formatMessage } from '../../utils';
 const handleDesc = (detail, t) => {
@@ -74,7 +74,8 @@ const handleDesc = (detail, t) => {
 export default function OperateCardTile(props) {
   const {
     tile,
-    renderDetail
+    renderDetail,
+    notifyHeightChanged
   } = props;
   const {
     deviceInfo = [],
@@ -195,9 +196,6 @@ 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;
   }
@@ -219,6 +217,7 @@ export default function OperateCardTile(props) {
   }), showDetail && !renderDetail && /*#__PURE__*/React.createElement(Expand, {
     operations: operations,
     tapDevice: tapDevice,
-    tapScene: tapScene
+    tapScene: tapScene,
+    onChangeTab: () => notifyHeightChanged()
   }));
 }

package/dist/utils/object.d.ts

@@ -0,0 +1,8 @@
+export declare const objectsId: (...objects: any[]) => string;
+export interface Resolvable<T = void> {
+    resolve: (value?: T) => void;
+    reject: (reason?: any) => void;
+    promise: Promise<T>;
+    state: 'pending' | 'fulfilled' | 'rejected';
+}
+export declare const createResolvable: <T = void>() => Resolvable<T>;

package/dist/utils/object.js

@@ -0,0 +1,57 @@
+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 { generateId } from '@ray-js/t-agent';
+const wm = new WeakMap();
+export const objectsId = function () {
+  for (var _len = arguments.length, objects = new Array(_len), _key = 0; _key < _len; _key++) {
+    objects[_key] = arguments[_key];
+  }
+  if (objects.length === 0) {
+    return '0@';
+  }
+  const keys = objects.map((v, i) => {
+    if (v === null) {
+      return "".concat(i, "-null");
+    }
+    if (v === undefined) {
+      return "".concat(i, "-undefined");
+    }
+    const type = typeof v;
+    if (type === 'object' || type === 'function') {
+      if (wm.has(v)) {
+        return wm.get(v);
+      }
+      const id = generateId(16);
+      wm.set(v, id);
+      return "".concat(i, "-").concat(id);
+    }
+    return "".concat(i, "-").concat(v);
+  });
+  return "".concat(objects.length, "@").concat(keys.join('|'));
+};
+export const createResolvable = () => {
+  const ret = {
+    resolve: null,
+    reject: null,
+    promise: null,
+    state: 'pending'
+  };
+  ret.promise = new Promise((resolve, reject) => {
+    ret.resolve = value => {
+      if (ret.state !== 'pending') {
+        return;
+      }
+      ret.state = 'fulfilled';
+      resolve(value);
+    };
+    ret.reject = reason => {
+      if (ret.state !== 'pending') {
+        return;
+      }
+      ret.state = 'rejected';
+      reject(reason);
+    };
+  });
+  return ret;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/t-agent-ui-ray",
-  "version": "0.2.2-beta-2",
+  "version": "0.2.3-beta-1",
   "author": "Tuya.inc",
   "license": "MIT",
   "private": false,
@@ -40,5 +40,5 @@
     "@types/echarts": "^4.9.22",
     "@types/markdown-it": "^14.1.1"
   },
-  "gitHead": "33a1985d3a14487fe5f354411b0c46c8a8af19c7"
+  "gitHead": "ed9810075246e1261af2fdaa41550070313a98dc"
 }

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

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const WaveformVisualizer: React.MemoExoticComponent<({ amplitudeCount }: {
-    amplitudeCount: number;
-}) => React.JSX.Element>;

package/dist/MessageInput/MessageInputAIStream/WaveformVisualizer.js

@@ -1,54 +0,0 @@
-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 React, { useEffect, useState } from 'react';
-import { View } from '@ray-js/ray';
-export const WaveformVisualizer = /*#__PURE__*/React.memo(_ref => {
-  let {
-    amplitudeCount
-  } = _ref;
-  const [bars, setBars] = useState(() => Array.from({
-    length: amplitudeCount
-  }, (_, index) => /*#__PURE__*/React.createElement(View
-  // eslint-disable-next-line react/no-array-index-key
-  , {
-    key: "asr_wave_".concat(index),
-    className: "t-agent-message-input-waveform-bar",
-    style: {
-      height: 0,
-      // 添加渐变色偏移效果
-      animationDelay: "".concat(index * 10, "ms")
-    }
-  })));
-  useEffect(() => {
-    const handle = _ref2 => {
-      let {
-        amplitudes
-      } = _ref2;
-      const bars = (amplitudes || []).map((item, index) => {
-        const value = item > 1 ? 1 : item * 100;
-        // 将数值映射到高度范围（0-100 → 2px-20px）
-        // const height = 2 + (value / 100) * 18;
-        return /*#__PURE__*/React.createElement(View
-        // eslint-disable-next-line react/no-array-index-key
-        , {
-          key: "asr_wave_".concat(index),
-          className: "t-agent-message-input-waveform-bar",
-          style: {
-            height: "".concat(value, "%"),
-            // 添加渐变色偏移效果
-            animationDelay: "".concat(index * 10, "ms")
-          }
-        });
-      });
-      setBars(bars);
-    };
-    ty.aistream.onRecordAmplitudes(handle);
-    return () => {
-      ty.aistream.offRecordAmplitudes(handle);
-    };
-  }, []);
-  return /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-message-input-waveform-container"
-  }, bars);
-});

package/dist/MessageList/LazyView.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-interface Props {
-    id: string;
-    className?: string;
-    children?: React.ReactNode;
-    containerId: string;
-}
-export default function LazyView(props: Props): React.JSX.Element;
-export {};

package/dist/MessageList/LazyView.js

@@ -1,57 +0,0 @@
-import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/web.dom-collections.iterator.js";
-import { View } from '@ray-js/components';
-import React, { useEffect, useRef, useState } from 'react';
-import { usePageInstance } from '@ray-js/ray';
-const queryHeight = id => {
-  return new Promise(resolve => {
-    // @ts-ignore
-    const query = ty.createSelectorQuery();
-    query.select("#".concat(id)).boundingClientRect(res => {
-      resolve(res.height);
-    }).exec();
-  });
-};
-export default function LazyView(props) {
-  const {
-    id,
-    className,
-    children,
-    containerId
-  } = props;
-  const [visible, setVisible] = useState(true);
-  const heightRef = useRef(0);
-  const valid = heightRef.current > 0;
-  console.log();
-  const page = usePageInstance();
-  useEffect(() => {
-    // @ts-ignore
-    const observer = ty.createIntersectionObserver(page, {
-      thresholds: [0, 1],
-      initialRatio: 0
-    });
-    observer.relativeTo("#".concat(containerId), {
-      top: 50,
-      bottom: 50
-    }).observe("#".concat(id), res => {
-      setVisible(res.intersectionRatio > 0);
-      console.log(id, res);
-    });
-    return () => {
-      observer.disconnect();
-    };
-  }, [id, containerId]);
-  useEffect(() => {
-    queryHeight(id).then(height => {
-      console.log('queryHeight', id, height);
-      heightRef.current = height;
-    });
-  }, [id]);
-  console.log('rerender', id);
-  return /*#__PURE__*/React.createElement(View, {
-    className: className,
-    "data-hide": !visible && valid,
-    id: id
-    // style={hide ? { visibility: 'hidden' } : null}
-  }, children);
-}