@ray-js/t-agent-ui-ray 0.0.8-beta-3 → 0.0.9-beta-1

package/dist/MarkdownRender/index.less

@@ -110,10 +110,6 @@
   white-space: nowrap;
 }
 
-.h2w__table .h2w__tr:nth-child(2n) {
-  background-color: red;
-}
-
 .h2w__colgroup {
   display: table-column-group;
 }

package/dist/MarkdownRender/theme/light.less

@@ -27,7 +27,8 @@
 
 
 /**代码块**/
-.h2w__light .h2w__pre {
+.h2w__light .h2w__pre,
+.h2w__light .h2w__pre .h2w__code {
     background-color: #f6f8fa;
     border-color: #eaedf0;
 }

package/dist/MessageInput/AsrInput.d.ts

@@ -12,6 +12,7 @@ interface Props {
     closeMore: () => void;
     moreOpen: boolean;
     hasMore: boolean;
+    onAbort: () => void;
 }
 export default function AsrInput(props: Props): React.JSX.Element;
 export {};

package/dist/MessageInput/AsrInput.js

@@ -12,7 +12,8 @@ export default function AsrInput(props) {
     closeMore,
     hasMore,
     text,
-    setText
+    setText,
+    onAbort
   } = props;
   const {
     state,
@@ -65,16 +66,19 @@ export default function AsrInput(props) {
     onTouchCancel: release,
     onTouchEnd: release
   }), /*#__PURE__*/React.createElement(Button, {
-    disabled: sendDisabled || responding,
+    disabled: sendDisabled,
     "data-testid": "t-agent-message-input-asr-button-right",
     className: cx('t-agent-message-input-button', {
       't-agent-message-input-button-voice-send': state === 'pending',
-      't-agent-message-input-button-hide': state === 'recording' || !hasMore && state !== 'pending',
+      't-agent-message-input-button-hide': (state === 'recording' || !hasMore && state !== 'pending') && !responding,
       't-agent-message-input-button-more': state === 'init' && hasMore,
-      't-agent-message-input-button-more-open': state === 'init' && moreOpen
+      't-agent-message-input-button-more-open': state === 'init' && moreOpen,
+      't-agent-message-input-button-stop': state === 'init' && responding
     }),
     onClick: () => {
-      if (state === 'init' && hasMore) {
+      if (responding) {
+        onAbort();
+      } else if (state === 'init' && hasMore) {
         onMoreClick();
       } else {
         props.onSend();

package/dist/MessageInput/icons/stop.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#7b7c7e" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square"><rect width="18" height="18" x="3" y="3" rx="2"/></svg>

package/dist/MessageInput/index.js

@@ -4,9 +4,9 @@ import "core-js/modules/esnext.iterator.map.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import './index.less';
 import { Button, View } from '@ray-js/components';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Image, Input, ScrollView } from '@ray-js/ray';
-import { Asr } from '@ray-js/t-agent-plugin-assistant';
+import { Asr, AbortController } from '@ray-js/t-agent-plugin-assistant';
 import cx from 'clsx';
 import PrivateImage from '../PrivateImage';
 import imageSvg from './icons/image.svg';
@@ -29,6 +29,7 @@ export default function MessageInput(props) {
     setUploaded,
     upload
   } = attachmentInput;
+  const acRef = useRef(null);
   const [responding, setResponding] = useState(false);
   const [mode, setMode] = useState('text');
   const agent = useChatAgent();
@@ -51,8 +52,16 @@ export default function MessageInput(props) {
     setUploaded([]);
     setText('');
     setResponding(true);
+    const ac = new AbortController();
+    acRef.current = ac;
+    ac.signal.addEventListener('abort', () => {
+      if (acRef.current === ac) {
+        acRef.current = null;
+      }
+      setResponding(false);
+    });
     try {
-      await agent.pushInputBlocks(inputBlocks);
+      await agent.pushInputBlocks(inputBlocks, ac.signal);
     } finally {
       if (!isUnmounted()) {
         setResponding(false);
@@ -70,8 +79,16 @@ export default function MessageInput(props) {
     setMoreOpen(false);
     setUploaded([]);
     setResponding(true);
+    const ac = new AbortController();
+    acRef.current = ac;
+    ac.signal.addEventListener('abort', () => {
+      if (acRef.current === ac) {
+        acRef.current = null;
+      }
+      setResponding(false);
+    });
     try {
-      await agent.pushInputBlocks(blocks);
+      await agent.pushInputBlocks(blocks, ac.signal);
     } finally {
       if (!isUnmounted()) {
         setResponding(false);
@@ -154,15 +171,20 @@ export default function MessageInput(props) {
       },
       className: "t-agent-message-input-button t-agent-message-input-button-voice"
     })), /*#__PURE__*/React.createElement(Button, {
-      disabled: !isMore && (responding || uploading),
+      disabled: !isMore && uploading,
       className: cx('t-agent-message-input-button', {
         't-agent-message-input-button-more': isMore,
         't-agent-message-input-button-more-open': moreOpen && isMore,
-        't-agent-message-input-button-send': !isMore
+        't-agent-message-input-button-send': !isMore && !responding,
+        't-agent-message-input-button-stop': responding
       }),
       "data-testid": "t-agent-message-input-button-main",
       onClick: async () => {
-        if (isMore) {
+        if (responding) {
+          if (acRef.current) {
+            acRef.current.abort('User abort');
+          }
+        } else if (isMore) {
           openMoreClick();
         } else if (text) {
           await send([...attachmentInput.blocks, {
@@ -180,6 +202,11 @@ export default function MessageInput(props) {
         setText('');
         setMode('text');
       },
+      onAbort: () => {
+        if (acRef.current) {
+          acRef.current.abort('User abort');
+        }
+      },
       moreOpen: moreOpen,
       closeMore: () => setMoreOpen(false),
       onMoreClick: openMoreClick,

package/dist/MessageInput/index.less

@@ -98,6 +98,7 @@
 .t-agent-message-input-button {
   --button-size: 68rpx;
   background: transparent;
+  transition: all ease-in-out 0.2s;
 
   border-radius: 50%;
   width: var(--button-size);
@@ -123,7 +124,6 @@
 .t-agent-message-input-button-more {
   background: transparent url('icons/plus.svg') no-repeat center;
   border: 2rpx solid var(--t-agent-input-border-color);
-  transition: all ease-in-out 0.2s;
 }
 
 .t-agent-message-input-button-more-open {
@@ -132,7 +132,6 @@
 
 .t-agent-message-input-button-send {
   background: var(--app-M1) url('icons/send.svg') no-repeat center;
-  transition: all ease-in-out 0.2s;
 }
 
 .t-agent-message-input-button-voice-send {
@@ -147,6 +146,11 @@
   right: 10rpx;
 }
 
+.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);
+}
+
 .t-agent-message-input-panel {
   overflow: hidden;
   height: 168rpx;

package/dist/tiles/BubbleTile/index.js

@@ -127,6 +127,8 @@ const BubbleTile = props => {
         icon: 'none'
       });
     }
-  })), side === 'start' && errorNode);
+  }), 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);

package/dist/tiles/BubbleTile/index.less

@@ -54,3 +54,11 @@
 
 .t-agent-bubble-tile-bubble-loader {
 }
+
+.t-agent-bubble-tile-aborted {
+  color: var(--app-B3-N3);
+  opacity: 0.75;
+  font-size: 28rpx;
+  padding-top: 8rpx;
+  text-align: center;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/t-agent-ui-ray",
-  "version": "0.0.8-beta-3",
+  "version": "0.0.9-beta-1",
   "author": "Tuya.inc",
   "license": "MIT",
   "private": false,
@@ -41,5 +41,5 @@
     "@types/echarts": "^4.9.22",
     "@types/markdown-it": "^14.1.1"
   },
-  "gitHead": "686e9d17bd1a96074d3ac16ac2a3d73e1aa17f8f"
+  "gitHead": "df6f4f35caa6e62408450f14d9dcdd26f068283c"
 }