@ray-js/t-agent-ui-ray 0.0.9 → 0.1.0-beta-2

package/dist/ChatContainer/index.js

@@ -46,7 +46,8 @@ export default function ChatContainer(props) {
       plugins: agent.plugins,
       pushInputBlocks: agent.pushInputBlocks,
       emitTileEvent: agent.emitTileEvent,
-      removeMessage: agent.removeMessage
+      removeMessage: agent.removeMessage,
+      removeMessageByChannel: agent.removeMessageByChannel
     };
   }, [agent]);
   useEffect(() => {

package/dist/LongPressActionMenu/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './index.less';
+import { LongPressActionMenuProps } from '../hooks/useLongPress';
+declare const LongPressActionMenu: React.FC<LongPressActionMenuProps>;
+export default LongPressActionMenu;

package/dist/LongPressActionMenu/index.js

@@ -0,0 +1,34 @@
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.map.js";
+import React from 'react';
+import { View } from '@ray-js/components';
+import './index.less';
+const LongPressActionMenu = _ref => {
+  let {
+    showActionMenu,
+    isClosing,
+    menuPosition,
+    handleCloseMenu,
+    handleMenuItemClick,
+    menuItems
+  } = _ref;
+  if (!showActionMenu) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-action-menu-container ".concat(isClosing ? 't-agent-action-menu-container-closing' : ''),
+    onClick: handleCloseMenu
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-action-menu ".concat(isClosing ? 't-agent-action-menu-closing' : ''),
+    style: {
+      left: "".concat(menuPosition.x, "px"),
+      top: "".concat(menuPosition.y, "px")
+    },
+    onClick: e => e.origin.stopPropagation()
+  }, menuItems.map(item => /*#__PURE__*/React.createElement(View, {
+    key: item.key,
+    className: "t-agent-action-menu-item",
+    onClick: () => handleMenuItemClick(item)
+  }, item.displayLabel))));
+};
+export default LongPressActionMenu;

package/dist/LongPressActionMenu/index.less

@@ -0,0 +1,88 @@
+.t-agent-action-menu-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  // background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  animation: fade-in 0.2s ease-in-out;
+  
+  &-closing {
+    animation: fade-out 0.2s ease-in-out;
+  }
+  
+  .t-agent-action-menu {
+    position: absolute;
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+    min-width: 150px;
+    z-index: 1001;
+    animation: scale-in 0.2s ease-in-out;
+    
+    &-closing {
+      animation: scale-out 0.2s ease-in-out;
+    }
+    
+    &-item {
+      padding: 12px 16px;
+      font-size: 14px;
+      color: #333;
+      border-bottom: 1px solid #f0f0f0;
+      max-width: 150px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      
+      &:last-child {
+        border-bottom: none;
+      }
+      
+      &:active {
+        background-color: #f5f5f5;
+      }
+    }
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes scale-in {
+  from {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes scale-out {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+} 

package/dist/contexts.d.ts

@@ -9,7 +9,7 @@ export declare const MessageContext: import("react").Context<{
 }>;
 export declare const RenderContext: import("react").Context<RenderOptions>;
 export type UIChatSession = Pick<ChatSession, 'get' | 'getData' | 'set' | 'sessionId'>;
-export type UIChatAgent = Pick<ChatAgent<UIPlugin & AssistantPlugin>, 'pushInputBlocks' | 'plugins' | 'emitTileEvent' | 'removeMessage'> & {
+export type UIChatAgent = Pick<ChatAgent<UIPlugin & AssistantPlugin>, 'pushInputBlocks' | 'plugins' | 'emitTileEvent' | 'removeMessage' | 'removeMessageByChannel'> & {
     session: UIChatSession;
 };
 export declare const ChatAgentContext: import("react").Context<UIChatAgent>;

package/dist/hooks/index.d.ts

@@ -3,3 +3,4 @@ export * from './useAttachmentInput';
 export * from './useAsrInput';
 export * from './useSleep';
 export * from './useIsUnmounted';
+export * from './useLongPress';

package/dist/hooks/index.js

@@ -2,4 +2,5 @@ export * from './context';
 export * from './useAttachmentInput';
 export * from './useAsrInput';
 export * from './useSleep';
-export * from './useIsUnmounted';
+export * from './useIsUnmounted';
+export * from './useLongPress';

package/dist/hooks/useLongPress.d.ts

@@ -0,0 +1,38 @@
+import { ChatMessageObject } from '@ray-js/t-agent';
+/**
+ * 预定义动作类型
+ */
+export type ActionType = 'copy' | 'delete' | 'like' | 'unlike' | 'deleteByChannel';
+export interface ActionMenuItem {
+    key: string;
+    label: string;
+    action: () => void;
+}
+export interface LongPressActionMenuProps {
+    showActionMenu: boolean;
+    isClosing: boolean;
+    menuPosition: {
+        x: number;
+        y: number;
+    };
+    handleCloseMenu: () => void;
+    handleMenuItemClick: (item: ActionMenuItem) => void;
+    menuItems: Array<ActionMenuItem & {
+        displayLabel: string;
+    }>;
+}
+export interface UseLongPressOptions {
+    message?: ChatMessageObject;
+    actions?: ActionType | ActionType[];
+    getMessageContent?: () => string;
+    customActions?: ActionMenuItem[];
+    disabled?: boolean;
+}
+export interface LongPressResult {
+    longPressProps: LongPressProps;
+    menuProps: LongPressActionMenuProps;
+}
+export interface LongPressProps {
+    onLongPress: (e: any) => void;
+}
+export declare function useLongPress(options?: UseLongPressOptions): LongPressResult;

package/dist/hooks/useLongPress.js

@@ -0,0 +1,240 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/esnext.iterator.map.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import { useState, useEffect, useCallback } from 'react';
+import { getSystemInfoSync, setClipboardData, showModal, showToast, vibrateShort } from '@ray-js/ray';
+import logger from '../logger';
+import { useRenderOptions } from './context';
+import { useChatAgent } from '.';
+
+/**
+ * 预定义动作类型
+ */
+
+/**
+ * 长按状态接口
+ */
+
+export function useLongPress() {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    message,
+    actions = ['copy', 'delete'],
+    getMessageContent = () => '',
+    customActions = [],
+    disabled = false
+  } = options;
+  const [state, setState] = useState({
+    showActionMenu: false,
+    isClosing: false,
+    menuPosition: {
+      x: 0,
+      y: 0
+    }
+  });
+  const agent = useChatAgent();
+  const {
+    i18nTranslate: t
+  } = useRenderOptions();
+  const [screenSize, setScreenSize] = useState({
+    width: 0,
+    height: 0
+  });
+  useEffect(() => {
+    try {
+      const systemInfo = getSystemInfoSync();
+      setScreenSize({
+        width: systemInfo.windowWidth,
+        height: systemInfo.windowHeight
+      });
+    } catch (error) {
+      logger.error('获取屏幕尺寸失败', error);
+    }
+  }, []);
+  const getActionMenuItems = useCallback(() => {
+    if (!actions || !message) return [];
+    const actionTypes = Array.isArray(actions) ? actions : [actions];
+    const menuItems = [];
+    actionTypes.forEach(type => {
+      switch (type) {
+        case 'copy':
+          if (typeof getMessageContent === 'function') {
+            menuItems.push({
+              key: 'copy',
+              label: t('t-agent.message.action.copy'),
+              action: () => {
+                const content = getMessageContent();
+                if (content) {
+                  setClipboardData({
+                    data: content,
+                    success: () => {
+                      showToast({
+                        title: t('t-agent.message.copy.success'),
+                        icon: 'none'
+                      });
+                    }
+                  });
+                }
+              }
+            });
+          }
+          break;
+        case 'delete':
+          if (agent && message.id) {
+            menuItems.push({
+              key: 'delete',
+              label: t('t-agent.message.action.delete'),
+              action: () => {
+                if (typeof agent.removeMessage === 'function') {
+                  showModal({
+                    title: t('t-agent.message.delete.title'),
+                    content: t('t-agent.message.delete.content'),
+                    success: res => {
+                      if (res.confirm) {
+                        agent.removeMessage(message.id);
+                        showToast({
+                          title: t('t-agent.message.delete.success'),
+                          icon: 'none'
+                        });
+                      }
+                    }
+                  });
+                }
+              }
+            });
+          }
+          break;
+        case 'deleteByChannel':
+          menuItems.push({
+            key: 'deleteByChannel',
+            label: t('t-agent.message.action.deleteByChannel'),
+            action: () => {
+              const channel = agent.session.get('AIAssistant.channel');
+              if (typeof agent.removeMessageByChannel === 'function') {
+                agent.removeMessageByChannel(channel);
+              }
+            }
+          });
+          break;
+        case 'like':
+          menuItems.push({
+            key: 'like',
+            label: t('t-agent.message.action.like'),
+            action: () => {
+              showToast({
+                title: t('t-agent.message.like.success'),
+                icon: 'none'
+              });
+            }
+          });
+          break;
+        case 'unlike':
+          menuItems.push({
+            key: 'unlike',
+            label: t('t-agent.message.action.unlike'),
+            action: () => {
+              showToast({
+                title: t('t-agent.message.unlike.success'),
+                icon: 'none'
+              });
+            }
+          });
+          break;
+      }
+    });
+    return [...menuItems, ...customActions];
+  }, [actions, message, agent, getMessageContent, t, customActions]);
+  const menuItems = getActionMenuItems();
+
+  // 计算菜单位置，确保不超出屏幕
+  const calculateMenuPosition = useCallback((x, y) => {
+    const estimatedMenuWidth = 150;
+    // 头部高度先写死
+    const estimatedMenuHeight = menuItems.length * 44 + 100;
+    let adjustedX = x;
+    let adjustedY = y;
+
+    // 确保菜单不超出右边界
+    if (x + estimatedMenuWidth > screenSize.width) {
+      adjustedX = screenSize.width - estimatedMenuWidth - 10;
+    }
+
+    // 确保菜单不超出左边界
+    if (adjustedX < 10) {
+      adjustedX = 10;
+    }
+
+    // 确保菜单不超出底部边界
+    if (y + estimatedMenuHeight > screenSize.height) {
+      adjustedY = screenSize.height - estimatedMenuHeight - 10;
+    }
+
+    // 确保菜单不超出顶部边界
+    if (adjustedY < 10) {
+      adjustedY = 10;
+    }
+    return {
+      x: adjustedX,
+      y: adjustedY
+    };
+  }, [screenSize, menuItems.length]);
+  const handleLongPress = useCallback(e => {
+    var _e$detail$x, _e$detail, _e$detail$y, _e$detail2;
+    if (disabled || !menuItems.length || state.showActionMenu) return;
+
+    // 检查e.detail是否存在，如果不存在，使用屏幕中心点作为默认坐标
+    const x = (_e$detail$x = (_e$detail = e.detail) === null || _e$detail === void 0 ? void 0 : _e$detail.x) !== null && _e$detail$x !== void 0 ? _e$detail$x : screenSize.width / 2;
+    const y = (_e$detail$y = (_e$detail2 = e.detail) === null || _e$detail2 === void 0 ? void 0 : _e$detail2.y) !== null && _e$detail$y !== void 0 ? _e$detail$y : screenSize.height / 2;
+
+    // 计算并设置调整后的位置
+    const adjustedPosition = calculateMenuPosition(x, y);
+    setState({
+      showActionMenu: true,
+      isClosing: false,
+      menuPosition: adjustedPosition
+    });
+    vibrateShort({
+      type: 'light'
+    });
+    if (e.origin && e.origin.stopPropagation) {
+      e.origin.stopPropagation();
+    }
+  }, [disabled, menuItems.length, state.showActionMenu, screenSize, calculateMenuPosition]);
+  const handleCloseMenu = useCallback(() => {
+    setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+      isClosing: true
+    }));
+
+    // 等待动画完成后再隐藏菜单
+    setTimeout(() => {
+      setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+        showActionMenu: false,
+        isClosing: false
+      }));
+    }, 200);
+  }, []);
+  const handleMenuItemClick = useCallback(item => {
+    item.action();
+    handleCloseMenu();
+  }, [handleCloseMenu]);
+  const getMenuItemLabel = useCallback(item => {
+    return t("t-agent.message.action.".concat(item.key)) || item.label;
+  }, [t]);
+  return {
+    longPressProps: {
+      onLongPress: handleLongPress
+    },
+    menuProps: {
+      showActionMenu: state.showActionMenu,
+      isClosing: state.isClosing,
+      menuPosition: state.menuPosition,
+      handleCloseMenu,
+      handleMenuItemClick,
+      menuItems: menuItems.map(item => _objectSpread(_objectSpread({}, item), {}, {
+        displayLabel: getMenuItemLabel(item)
+      }))
+    }
+  };
+}

package/dist/tiles/BubbleTile/index.js

@@ -1,17 +1,22 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import "core-js/modules/es.json.stringify.js";
 import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.find.js";
 import "core-js/modules/esnext.iterator.map.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import './index.less';
-import { Text, View } from '@ray-js/components';
-import React, { useEffect, useState } from 'react';
+import { View } from '@ray-js/components';
+import React, { useEffect, useState, useCallback, memo } from 'react';
 import { Image } from '@ray-js/ray';
 import { BubbleTileStatus, ChatMessageStatus, safeParseJSON } from '@ray-js/t-agent';
 import { getCurrentHomeInfo, submitEvaluation } from '@ray-js/t-agent-plugin-assistant';
+import { setStorage, getStorage, showToast } from '@ray-js/api';
 import TileRender from '../../TileRender';
 import noticeSvg from './notice.svg';
 import noticeWarnSvg from './notice-warn.svg';
 import { useChatAgent, useRenderOptions } from '../../hooks';
+import LongPressActionMenu from '../../LongPressActionMenu';
+import { useLongPress } from '../../hooks/useLongPress';
 const BubbleTile = props => {
   var _message$meta$request;
   const agent = useChatAgent();
@@ -38,7 +43,7 @@ const BubbleTile = props => {
   const [feedbackLoaded, setFeedbackLoaded] = useState(false);
   const [feedbackValue, setFeedbackValue] = useState(null);
   useEffect(() => {
-    ty.getStorage({
+    getStorage({
       key: 'latestMessageFeedbackValue',
       success: res => {
         if (res.data) {
@@ -60,46 +65,116 @@ const BubbleTile = props => {
   }, []);
   const showInfo = () => {
     if (data.info) {
-      ty.showToast({
+      showToast({
         title: data.info,
         icon: 'none'
       });
     }
   };
-  let errorNode = null;
+
+  // 获取消息内容的函数
+  const getMessageContent = useCallback(() => {
+    let messageContent = '';
+    if (tile.children && tile.children.length > 0) {
+      // 查找文本类型的tile
+      const textTile = tile.children.find(child => child.type === 'text');
+      if (textTile && textTile.data && typeof textTile.data === 'object' && 'text' in textTile.data) {
+        messageContent = textTile.data.text;
+      }
+    }
+
+    // 如果是文本类型的tile，直接获取文本内容
+    if (tile.type === 'text' && tile.data && typeof tile.data === 'object' && 'text' in tile.data) {
+      messageContent = tile.data.text;
+    }
+    return messageContent;
+  }, [tile]);
+  const {
+    longPressProps,
+    menuProps
+  } = useLongPress({
+    message,
+    // actions: [
+    //   'copy',
+    //   'delete',
+    //   ...(isAssistantMessage ? ['like', 'unlike', 'deleteByChannel'] : []),
+    // ] as ActionType[],
+    actions: ['copy', 'delete'],
+    getMessageContent,
+    disabled: loading
+  });
+  const showAbortedMessage = bubbleStatus === BubbleTileStatus.ABORTED;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, _extends({
+    className: "t-agent-bubble-tile t-agent-bubble-tile-".concat(side),
+    "data-testid": "t-agent-bubble-tile"
+  }, longPressProps), side === 'end' && /*#__PURE__*/React.createElement(ErrorNotice, {
+    bubbleStatus: bubbleStatus,
+    showInfo: showInfo
+  }), /*#__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, {
+      side: side,
+      tile: t,
+      message: message,
+      key: t.id,
+      isLatestMessage: isLatestMessage
+    })));
+  })(), /*#__PURE__*/React.createElement(LoadingIndicator, {
+    status: status
+  }), showAbortedMessage && /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-bubble-tile-aborted"
+  }, t('t-agent.message.bubble.aborted'))), side === 'start' && /*#__PURE__*/React.createElement(ErrorNotice, {
+    bubbleStatus: bubbleStatus,
+    showInfo: showInfo
+  })), /*#__PURE__*/React.createElement(LongPressActionMenu, menuProps));
+};
+export default /*#__PURE__*/React.memo(BubbleTile);
+const ErrorNotice = /*#__PURE__*/memo(_ref => {
+  let {
+    bubbleStatus,
+    showInfo
+  } = _ref;
   if (bubbleStatus === BubbleTileStatus.ERROR) {
-    errorNode = /*#__PURE__*/React.createElement(Image, {
+    return /*#__PURE__*/React.createElement(Image, {
       onClick: showInfo,
       src: noticeSvg,
       className: "t-agent-bubble-tile-error",
       "data-testid": "t-agent-bubble-tile-error"
     });
-  } else if (bubbleStatus === BubbleTileStatus.WARNING) {
-    errorNode = /*#__PURE__*/React.createElement(Image, {
+  }
+  if (bubbleStatus === BubbleTileStatus.WARNING) {
+    return /*#__PURE__*/React.createElement(Image, {
       onClick: showInfo,
       src: noticeWarnSvg,
       className: "t-agent-bubble-tile-error",
       "data-testid": "t-agent-bubble-tile-warning"
     });
   }
-  return /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-bubble-tile t-agent-bubble-tile-".concat(side),
-    "data-testid": "t-agent-bubble-tile",
-    onLongPress: () => {}
-  }, side === 'end' && errorNode, /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-bubble-tile-bubble  ".concat(loading ? 't-agent-bubble-tile-bubble-loading' : '')
-  }, children.map(t => {
-    return /*#__PURE__*/React.createElement(TileRender, {
-      side: side,
-      tile: t,
-      message: message,
-      key: t.id,
-      isLatestMessage: isLatestMessage
-    });
-  }), status === ChatMessageStatus.START && /*#__PURE__*/React.createElement(Text, {
-    className: "t-agent-bubble-tile-bubble-loader"
-  }, "..."), bubbleStatus === BubbleTileStatus.ABORTED && /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-bubble-tile-aborted"
-  }, t('t-agent.message.bubble.aborted'))), side === 'start' && errorNode);
-};
-export default /*#__PURE__*/React.memo(BubbleTile);
+  return null;
+});
+const LoadingIndicator = /*#__PURE__*/memo(_ref2 => {
+  let {
+    status
+  } = _ref2;
+  if (status === ChatMessageStatus.START) {
+    return /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-bubble-tile-bubble-loader"
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-bubble-tile-bubble-loader-ball"
+    }), /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-bubble-tile-bubble-loader-ball"
+    }), /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-bubble-tile-bubble-loader-ball"
+    }));
+  }
+  if (status === ChatMessageStatus.UPDATING) {
+    return /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-bubble-tile-cursor-loader",
+      "data-testid": "t-agent-cursor-loader"
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-bubble-tile-bubble-loader-ball"
+    }));
+  }
+  return null;
+});

package/dist/tiles/BubbleTile/index.less

@@ -3,12 +3,6 @@
   align-items: center;
 }
 
-.t-agent-bubble-tile-error {
-  width: 32rpx;
-  height: 32rpx;
-  margin: 0 18rpx;
-}
-
 .t-agent-bubble-tile-bubble {
   width: fit-content;
   max-width: 612rpx;
@@ -21,6 +15,64 @@
   padding: 24rpx;
   transition: all 0.2s ease-in-out;
   overflow: hidden;
+  position: relative;
+}
+
+.t-agent-bubble-tile-bubble-loader {
+  display: inline-flex;
+
+  .t-agent-bubble-tile-bubble-loader-ball {
+    width: 8px;
+    height: 8px;
+    background-color: var(--app-B1-N1);
+    border-radius: 50%;
+    animation: bounce 1.5s infinite ease-in-out;
+
+    & + .t-agent-bubble-tile-bubble-loader-ball {
+      margin-left: 5px;
+    }
+  }
+
+  .t-agent-bubble-tile-bubble-loader-ball:nth-child(2) {
+    animation-delay: 0.3s;
+  }
+
+  .t-agent-bubble-tile-bubble-loader-ball:nth-child(3) {
+    animation-delay: 0.6s;
+  }
+
+  @keyframes bounce {
+    0%,
+    100% {
+      // transform: scale(0.75);
+      opacity: 0.5;
+    }
+    50% {
+      // transform: scale(1);
+      opacity: 1;
+    }
+  }
+}
+
+.t-agent-bubble-tile-cursor-loader {
+  position: absolute;
+  right: 9px;
+  bottom: 19px;
+  z-index: 10;
+  width: 6px;
+  height: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  
+  .t-agent-bubble-tile-bubble-loader-ball {
+    width: 6px;
+    height: 6px;
+    background-color: var(--app-B3-N1);
+    opacity: 0.7;
+    border-radius: 50%;
+    animation: t-agent-cursor-bounce 1.2s infinite ease-in-out;
+  }
 }
 
 .t-agent-bubble-tile-start {
@@ -37,10 +89,18 @@
   }
 }
 
-.t-agent-bubble-tile-start {
-  .t-agent-bubble-tile-bubble {
-    border-bottom-left-radius: 4rpx;
-  }
+.t-agent-bubble-tile-aborted {
+  color: var(--app-B3-N3);
+  opacity: 0.75;
+  font-size: 28rpx;
+  padding-top: 8rpx;
+  text-align: center;
+}
+
+.t-agent-bubble-tile-error {
+  width: 32rpx;
+  height: 32rpx;
+  margin: 0 18rpx;
 }
 
 @keyframes t-agent-bubble-tile-blink {
@@ -52,13 +112,24 @@
   }
 }
 
-.t-agent-bubble-tile-bubble-loader {
+@keyframes t-agent-inline-bounce {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(0.75);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1);
+  }
 }
 
-.t-agent-bubble-tile-aborted {
-  color: var(--app-B3-N3);
-  opacity: 0.75;
-  font-size: 28rpx;
-  padding-top: 8rpx;
-  text-align: center;
+@keyframes t-agent-cursor-bounce {
+  0%, 100% {
+    opacity: 0.4;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 0.9;
+    transform: scale(1.1);
+  }
 }

package/dist/tiles/CardTile/index.js

@@ -1,21 +1,34 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import { View } from '@ray-js/components';
 import './index.less';
 import { useRenderOptions } from '../../hooks';
+import LongPressActionMenu from '../../LongPressActionMenu';
+import { useLongPress } from '../../hooks/useLongPress';
 const CardTile = props => {
   const {
     card
   } = props.tile.data;
+  const {
+    message
+  } = props;
   const {
     renderCardAs
   } = useRenderOptions();
+  const {
+    longPressProps,
+    menuProps
+  } = useLongPress({
+    message,
+    actions: ['delete']
+  });
   const node = renderCardAs(card);
   if (!node) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, _extends({
     className: "t-agent-card-tile",
     "data-testid": "t-agent-bubble-tile"
-  }, node);
+  }, longPressProps), node), /*#__PURE__*/React.createElement(LongPressActionMenu, menuProps));
 };
 export default /*#__PURE__*/React.memo(CardTile);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/t-agent-ui-ray",
-  "version": "0.0.9",
+  "version": "0.1.0-beta-2",
   "author": "Tuya.inc",
   "license": "MIT",
   "private": false,
@@ -41,5 +41,5 @@
     "@types/echarts": "^4.9.22",
     "@types/markdown-it": "^14.1.1"
   },
-  "gitHead": "328a8616b0356cbaef02d7a4ad46ee0c077d04be"
+  "gitHead": "e5fe943c9f582704342687e11f76fa3b9b0802b1"
 }