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

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

@@ -10,11 +10,6 @@ interface Props {
         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,

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/t-agent-ui-ray",
-  "version": "0.2.0-beta-3",
+  "version": "0.2.0-beta-4",
   "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": "1728f8a1cac6b2ca53e506e06171808fbf38efdc"
 }