@ray-js/t-agent-ui-ray 0.2.0-beta-3 → 0.2.0-beta-5

package/dist/ChatContainer/index.js

@@ -32,6 +32,13 @@ export default function ChatContainer(props) {
     if (!agent.plugins.ui) {
       throw new Error('UI plugin not found');
     }
+    agent.session.initValue('UIRay.multiSelect.show', false);
+    agent.session.initValue('UIRay.multiSelect.selected', []);
+    agent.session.onChange((key, value) => {
+      if (key === 'UIRay.multiSelect.show' && !value) {
+        agent.session.set('UIRay.multiSelect.selected', []);
+      }
+    });
     return agent;
   });
   if (props.agentRef) {

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

@@ -1,12 +1,14 @@
 import React from 'react';
 interface Props {
     amplitudeCount: number;
+    responding: boolean;
     recording: boolean;
     disabled?: boolean;
     onConfirm: () => void;
     onRecord: () => void;
     onCancel: () => void;
     onBack: () => void;
+    onAbort: () => void;
 }
 declare const AsrInput: (props: Props) => React.JSX.Element;
 export default AsrInput;

package/dist/MessageInput/MessageInputAIStream/AsrInput.js

@@ -4,13 +4,11 @@ import { Button, View } from '@ray-js/ray';
 import cx from 'clsx';
 import { useTranslate } from '../../hooks';
 import { WaveformVisualizer } from './WaveformVisualizer';
-import { useSleep } from '../../hooks/useSleep';
 const AsrInput = props => {
   const touchRef = useRef({
     startAt: 0,
     y: 0
   });
-  useSleep();
   const t = useTranslate();
   const [active, setActive] = useState(false);
   const [cancel, setCancel] = useState(false);
@@ -27,7 +25,7 @@ const AsrInput = props => {
       return;
     }
     if (Date.now() - touchRef.current.startAt < 500) {
-      // 这种情况是误触
+      // 这种情况是误触，直接取消
       touchRef.current = {
         startAt: 0,
         y: 0
@@ -74,9 +72,9 @@ const AsrInput = props => {
   }, t('t-agent.input.asr.oninput.text.center')), /*#__PURE__*/React.createElement(WaveformVisualizer, {
     amplitudeCount: props.amplitudeCount
   }))), !props.recording && /*#__PURE__*/React.createElement(Button, {
-    className: "t-agent-message-input-button t-agent-message-input-button-keyboard",
+    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'),
     "data-testid": "t-agent-message-input-button-asr",
-    onClick: props.onBack
+    onClick: props.responding ? props.onAbort : props.onBack
   }));
 };
 export default AsrInput;

package/dist/MessageInput/MessageInputAIStream/index.js

@@ -207,6 +207,7 @@ export default function MessageInputAIStream(props) {
     }));
   } else {
     container = /*#__PURE__*/React.createElement(AsrInput, {
+      responding: responding,
       disabled: responding,
       amplitudeCount: AMPLITUDE_COUNT,
       recording: record.recording,
@@ -269,7 +270,12 @@ export default function MessageInputAIStream(props) {
         var _record$cancel;
         (_record$cancel = record.cancel) === null || _record$cancel === void 0 || _record$cancel.call(record);
       },
-      onBack: () => setMode('text')
+      onBack: () => setMode('text'),
+      onAbort: () => {
+        if (responding && acRef.current) {
+          acRef.current.abort('User abort');
+        }
+      }
     });
   }
   return /*#__PURE__*/React.createElement(View, {

package/dist/MessageInput/index.less

@@ -146,15 +146,18 @@
   right: 10rpx;
 }
 
-.t-agent-message-input-button-keyboard {
-  border: 2rpx solid var(--t-agent-input-border-color);
-  background: transparent url('icons/text.svg') no-repeat center;
+.t-agent-message-input-ptt-action-button {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: 32rpx;
 }
 
+.t-agent-message-input-button-keyboard {
+  border: 2rpx solid var(--t-agent-input-border-color);
+  background: transparent url('icons/text.svg') no-repeat center;
+}
+
 .t-agent-message-input-button-stop {
   background: rgba(0, 0, 0, 0) url('icons/stop.svg') no-repeat center;
   border: 2rpx solid var(--t-agent-input-border-color);

package/dist/MessageList/index.d.ts

@@ -5,16 +5,12 @@ interface Props {
     style?: React.CSSProperties;
     wrapperClassName?: string;
     wrapperStyle?: React.CSSProperties;
+    renderTop?: React.ReactNode;
     roleSide?: {
         user?: 'start' | 'end' | string;
         assistant?: 'start' | 'end' | string;
         [key: string]: 'start' | 'end' | string;
     };
-    multiSelect?: {
-        show: boolean;
-        select: string[];
-        onSelect: (msgs: string[]) => void;
-    };
     historyLimit?: {
         /** 历史消息数量限制 */
         count: number;

package/dist/MessageList/index.js

@@ -10,7 +10,7 @@ import { ScrollView } from '@ray-js/ray';
 import { generateId } from '@ray-js/t-agent';
 import { isVersionMatch } from '@ray-js/t-agent-plugin-aistream';
 import MessageRender from '../MessageRender';
-import { useAgentMessage, useOnEvent } from '../hooks';
+import { useAgentMessage, useAgentSessionValue, useOnEvent } from '../hooks';
 import { useDebouncedFn } from '../hooks/useDebouncedFn';
 import { useSleep } from '../hooks/useSleep';
 export default function MessageList(props) {
@@ -20,8 +20,7 @@ export default function MessageList(props) {
     style,
     wrapperClassName,
     wrapperStyle,
-    historyLimit,
-    multiSelect
+    historyLimit
   } = props;
   const {
     messages
@@ -32,6 +31,7 @@ export default function MessageList(props) {
   const [scrollTop, setScrollTop] = useState(() => 1000000000000000 + Math.floor(Date.now() / 10));
   const followNewMessageRef = useRef(true);
   const sleep = useSleep();
+  const [showSelect] = useAgentSessionValue('UIRay.multiSelect.show');
   const canIUse = useMemo(() => {
     // @ts-ignore
     const {
@@ -104,7 +104,7 @@ export default function MessageList(props) {
       side = msg.role === 'user' ? 'end' : 'start';
     }
     return /*#__PURE__*/React.createElement(MessageRender, {
-      multiSelect: multiSelect,
+      showSelect: showSelect,
       key: msg.id,
       message: msg,
       isLatestMessage: index === 0,
@@ -112,7 +112,7 @@ export default function MessageList(props) {
     });
   }), historyLimit && historyLimit.count < reversed.length && /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-list-history-tip"
-  }, historyLimit.tipText), /*#__PURE__*/React.createElement(View, {
+  }, historyLimit.tipText), props.renderTop, /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-list-padding-start"
   })));
 }

package/dist/MessageRender/index.d.ts

@@ -5,11 +5,7 @@ interface Props {
     message: ChatMessageObject;
     isLatestMessage: boolean;
     side: 'start' | 'end' | string;
-    multiSelect?: {
-        show: boolean;
-        select: string[];
-        onSelect: (msgs: string[]) => void;
-    };
+    showSelect?: boolean;
 }
-export default function MessageRender({ message, isLatestMessage, side, multiSelect }: Props): React.JSX.Element;
+export default function MessageRender({ message, isLatestMessage, side, showSelect }: Props): React.JSX.Element;
 export {};

package/dist/MessageRender/index.js

@@ -4,24 +4,34 @@ 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, { useState } from 'react';
 import TileRender from '../TileRender';
+import { useChatAgent, useOnEvent } from '../hooks';
 export default function MessageRender(_ref) {
   let {
     message,
     isLatestMessage,
     side,
-    multiSelect
+    showSelect
   } = _ref;
   const {
     id,
     tiles
   } = message;
-  const {
-    select = [],
-    onSelect = () => {},
-    show: showMultiSelect = false
-  } = multiSelect || {};
+  const agent = useChatAgent();
+  const [isSelected, setIsSelected] = useState(() => {
+    var _agent$session$get;
+    return !!((_agent$session$get = agent.session.get("UIRay.multiSelect.selected")) !== null && _agent$session$get !== void 0 && _agent$session$get.includes(id));
+  });
+  useOnEvent('sessionChange', _ref2 => {
+    let {
+      key,
+      value
+    } = _ref2;
+    if (key === 'UIRay.multiSelect.selected') {
+      setIsSelected(!!(value !== null && value !== void 0 && value.includes(id)));
+    }
+  });
   if (tiles.length === 0) {
     return /*#__PURE__*/React.createElement(View, {
       key: id,
@@ -30,14 +40,19 @@ export default function MessageRender(_ref) {
   }
   return /*#__PURE__*/React.createElement(View, {
     key: id,
-    className: "t-agent-message-list-row-container "
-  }, showMultiSelect && /*#__PURE__*/React.createElement(View, {
+    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"
   }, /*#__PURE__*/React.createElement(View, {
-    className: "checkbox-container ".concat(select.includes(id) ? 'selected' : ''),
-    onClick: () => select.includes(id) ? onSelect([...select.filter(v => v !== id)]) : onSelect([...select, id])
+    className: "t-agent-message-list-checkbox-container ".concat(isSelected ? 't-agent-message-list-checkbox-selected' : '')
   }, /*#__PURE__*/React.createElement(View, {
-    className: "checkbox-check"
+    className: "t-agent-message-list-checkbox-check"
   }))), /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-list-row t-agent-message-list-row-".concat(side)
   }, tiles.map(tile => {

package/dist/MessageRender/index.less

@@ -28,7 +28,7 @@
 @border-color: rgba(0, 0, 0, 0.3);
 @active-color: #3678E3;
 
-.checkbox-container {
+.t-agent-message-list-checkbox-container {
   position: relative;
   width: @checkbox-size;
   height: @checkbox-size;
@@ -38,17 +38,17 @@
   cursor: pointer;
   transition: all 0.2s ease-in-out;
 
-  &.selected {
+  &.t-agent-message-list-checkbox-selected {
     background: @active-color;
     border-color: transparent;
 
-    .checkbox-check {
+    .t-agent-message-list-checkbox-check {
       opacity: 1;
     }
   }
 }
 
-.checkbox-check {
+.t-agent-message-list-checkbox-check {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -58,4 +58,4 @@
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0xIDRsMy43NSA0TDEwLjMgMSIvPjwvc3ZnPg==");
   opacity: 0;
   transition: opacity 0.2s ease-in-out;
-}
+}

package/dist/hooks/index.d.ts

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

package/dist/hooks/index.js

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

package/dist/hooks/useLongPress.js

@@ -84,7 +84,7 @@ export function useLongPress() {
             key: 'multiSelect',
             label: t('t-agent.message.action.multiSelect'),
             action: () => {
-              emitEvent('multiSelect', {});
+              agent.session.set('UIRay.multiSelect.show', !agent.session.get('UIRay.multiSelect.show'));
             }
           });
           break;

package/dist/tiles/BubbleTile/index.js

@@ -3,15 +3,16 @@ 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/esnext.iterator.some.js";
+import "core-js/modules/web.dom-collections.iterator.js";
 import './index.less';
 import { View } from '@ray-js/components';
-import React, { useCallback, memo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import { Image } from '@ray-js/ray';
 import { BubbleTileStatus, ChatMessageStatus } from '@ray-js/t-agent';
 import TileRender from '../../TileRender';
 import noticeSvg from './notice.svg';
 import noticeWarnSvg from './notice-warn.svg';
-import { useChatAgent, useTranslate, useLongPress, useRenderOptions } from '../../hooks';
+import { useChatAgent, useLongPress, useRenderOptions, useTranslate } from '../../hooks';
 import RollBack from '../WorkflowTile/RollBack';
 const BubbleTile = props => {
   var _workflowTile$data;
@@ -73,7 +74,36 @@ const BubbleTile = props => {
   const showRollBack = side === 'start' && children.some(child => child.type === 'workflow');
   const workflowTile = children.find(child => child.type === 'workflow');
   const workflowNode = workflowTile === null || workflowTile === void 0 || (_workflowTile$data = workflowTile.data) === null || _workflowTile$data === void 0 ? void 0 : _workflowTile$data.nodeId;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, _extends({
+  const isErrorBubble = useMemo(() => {
+    let empty = true;
+    for (const child of children) {
+      // 如果子元素是文本类型，并且文本不为空，则不是空消息
+      if (child.type === 'text') {
+        if (child.data.text !== '') {
+          empty = false;
+          break;
+        }
+      } else {
+        // 如果子元素是其他类型，则不是空消息
+        empty = false;
+        break;
+      }
+    }
+    return empty && role === 'assistant' && bubbleStatus === BubbleTileStatus.ERROR && status === ChatMessageStatus.FINISH;
+  }, [status, role, bubbleStatus, children]);
+  if (isErrorBubble) {
+    return /*#__PURE__*/React.createElement(View, _extends({
+      className: "t-agent-bubble-tile t-agent-bubble-tile-error-alert",
+      "data-testid": "t-agent-bubble-tile"
+    }, longPressRes.longPressProps), /*#__PURE__*/React.createElement(Image, {
+      src: noticeSvg,
+      className: "t-agent-bubble-tile-error",
+      "data-testid": "t-agent-bubble-tile-error"
+    }), /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-bubble-tile-error-alert-text"
+    }, data.info || t('t-agent.unknown-error')), longPressBlock);
+  }
+  return /*#__PURE__*/React.createElement(View, _extends({
     className: "t-agent-bubble-tile t-agent-bubble-tile-".concat(side),
     "data-testid": "t-agent-bubble-tile"
   }, longPressRes.longPressProps), side === 'end' && /*#__PURE__*/React.createElement(ErrorNotice, {
@@ -96,7 +126,7 @@ const BubbleTile = props => {
   }, t('t-agent.message.bubble.aborted'))), side === 'start' && /*#__PURE__*/React.createElement(ErrorNotice, {
     bubbleStatus: bubbleStatus,
     showInfo: showInfo
-  })), longPressBlock, showRollBack && !isLatestMessage && workflowNode && /*#__PURE__*/React.createElement(RollBack, {
+  }), longPressBlock, showRollBack && !isLatestMessage && workflowNode && /*#__PURE__*/React.createElement(RollBack, {
     nodeId: workflowNode
   }));
 };

package/dist/tiles/BubbleTile/index.less

@@ -18,6 +18,24 @@
   position: relative;
 }
 
+.t-agent-bubble-tile-error-alert {
+  background: var(--app-M2_1);
+  border-radius: 32rpx;
+  padding: 24rpx;
+
+  .t-agent-bubble-tile-error {
+    margin: 0 12rpx 0 0;
+  }
+
+  .t-agent-bubble-tile-error-alert-text {
+    flex: 0 1 auto;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
 .t-agent-bubble-tile-bubble-loader {
   display: inline-flex;
 
@@ -64,7 +82,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  
+
   .t-agent-bubble-tile-bubble-loader-ball {
     width: 6px;
     height: 6px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/t-agent-ui-ray",
-  "version": "0.2.0-beta-3",
+  "version": "0.2.0-beta-5",
   "author": "Tuya.inc",
   "license": "MIT",
   "private": false,
@@ -40,5 +40,5 @@
     "@types/echarts": "^4.9.22",
     "@types/markdown-it": "^14.1.1"
   },
-  "gitHead": "03c4af7fe4cfe27069db83d99a61042c8053399e"
+  "gitHead": "a0beda17c8e1c3ef81c718300c02a23d88a3ee4a"
 }

package/dist/hooks/useMultiSelect.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export declare const useMultiSelectMessage: () => {
-    show: boolean;
-    select: string[];
-    onSelect: import("react").Dispatch<import("react").SetStateAction<string[]>>;
-    setShow: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-};

package/dist/hooks/useMultiSelect.js

@@ -1,12 +0,0 @@
-import "core-js/modules/web.dom-collections.iterator.js";
-import { useState } from 'react';
-export const useMultiSelectMessage = () => {
-  const [select, setSelect] = useState([]);
-  const [show, setShow] = useState(false);
-  return {
-    show,
-    select,
-    onSelect: setSelect,
-    setShow
-  };
-};