@ray-js/t-agent-ui-ray 0.1.1 → 0.2.0-beta-1

package/dist/ChatContainer/index.js

@@ -6,7 +6,6 @@ import "core-js/modules/web.dom-collections.iterator.js";
 import './index.less';
 import React, { useEffect, useMemo, useState } from 'react';
 import { View } from '@ray-js/components';
-import { SocketStatus } from '@ray-js/t-agent-plugin-assistant';
 import cx from 'clsx';
 import { ChatAgentContext, MessageContext, RenderContext } from '../contexts';
 import { defaultRenderOptions } from '../renderOption';
@@ -26,9 +25,6 @@ export default function ChatContainer(props) {
     if (!agent.plugins.ui) {
       throw new Error('UI plugin not found');
     }
-    if (!agent.plugins.assistant) {
-      throw new Error('Assistant plugin not found');
-    }
     return agent;
   });
   if (props.agentRef) {
@@ -59,11 +55,6 @@ export default function ChatContainer(props) {
       onEvent,
       emitEvent
     } = agent.plugins.ui;
-    const offSocketStatusChange = agent.plugins.assistant.onSocketStatusChange(status => {
-      emitEvent('networkChange', {
-        online: status === SocketStatus.SUCCESS
-      });
-    });
     const offMessageListInit = onEvent('messageListInit', _ref => {
       let {
         messages
@@ -113,7 +104,6 @@ export default function ChatContainer(props) {
       }
     });
     return () => {
-      offSocketStatusChange();
       offMessageListInit();
       offMessageChange();
     };

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export declare const WaveformVisualizer: React.FC<{
+    data: number[];
+}>;
+interface IProps {
+    amplitudeCount: number;
+    recording: boolean;
+    disabled?: boolean;
+    onConfirm: () => void;
+    onRecord: () => void;
+    onCancel: () => void;
+    onBack: () => void;
+}
+declare const AsrInput: (props: IProps) => React.JSX.Element;
+export default AsrInput;

package/dist/MessageInput/MessageInputAIStream/AsrInput.js

@@ -0,0 +1,109 @@
+import "core-js/modules/es.regexp.exec.js";
+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, { useMemo, useState } from 'react';
+import { Button, View } from '@ray-js/ray';
+import cx from 'clsx';
+import { useOnEvent, useTranslate } from '../../hooks';
+export const WaveformVisualizer = /*#__PURE__*/React.memo(_ref => {
+  let {
+    data
+  } = _ref;
+  // 缓存计算后的波形条样式
+  const bars = useMemo(() => {
+    return data.map((value, index) => {
+      // 将数值映射到高度范围（0-100 → 2px-20px）
+
+      return {
+        height: "".concat(2 + value / 100 * 18, "px"),
+        // 添加渐变色偏移效果
+        animationDelay: "".concat(index * 10, "ms")
+      };
+    });
+  }, [data]);
+  return /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-input-waveform-container"
+  }, bars.map((barStyle, 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: barStyle
+    // role="progressbar"
+    ,
+    "aria-valuenow": data[index],
+    "aria-valuemin": 0,
+    "aria-valuemax": 100
+  })));
+});
+const AsrInput = props => {
+  const [asrElementBounds, setAsrElementBounds] = useState(null);
+  const t = useTranslate();
+  const [waveData, setWaveData] = React.useState(Array.from({
+    length: props.amplitudeCount
+  }, () => 0));
+  const [ptt, setPtt] = useState(false);
+  useOnEvent('amplitudes', val => {
+    const waveBase = val.body.amplitudes || [];
+    setWaveData(waveBase.map(item => item > 1 ? 1 : item * 100));
+  });
+  const onVoiceTouchEnd = e => {
+    const touch = e.origin.changedTouches[0];
+    const touchY = touch.clientY;
+    setPtt(false);
+    // 误触状态
+    if (!asrElementBounds) {
+      setTimeout(() => {
+        props.onCancel();
+      }, 200);
+      setAsrElementBounds(null);
+      return;
+    }
+    // 上滑取消
+    if (touchY < asrElementBounds.top - 100) {
+      setTimeout(() => {
+        props.onCancel();
+      }, 200);
+      setAsrElementBounds(null);
+      return;
+    }
+    setTimeout(() => {
+      props.onConfirm();
+    }, 200);
+    setAsrElementBounds(null);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    className: cx('t-agent-message-input-ptt', {
+      't-agent-message-input-ptt-handle': ptt
+    }),
+    onTouchStart: () => {
+      const query = ty.createSelectorQuery();
+      query.select('.t-agent-message-input-ptt').boundingClientRect(rect => {
+        if (!rect) return;
+        setAsrElementBounds(rect);
+      }).exec();
+      setPtt(true);
+      setTimeout(() => {
+        props.onRecord();
+      }, 200);
+    },
+    onTouchCancel: onVoiceTouchEnd,
+    onTouchEnd: onVoiceTouchEnd
+  }, props.recording ? /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-input-oninput"
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-input-oninput-text-top"
+  }, t('t-agent.input.asr.oninput.text.top')), /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-input-oninput-text-center"
+  }, t('t-agent.input.asr.oninput.text.center')), /*#__PURE__*/React.createElement(WaveformVisualizer, {
+    data: waveData
+  })) : /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-input-ptt-text"
+  }, " ", t('t-agent.input.asr.ptt'))), !props.recording && /*#__PURE__*/React.createElement(Button, {
+    className: "t-agent-message-input-button t-agent-message-input-button-keyboard",
+    "data-testid": "t-agent-message-input-button-asr",
+    onClick: props.onBack
+  }));
+};
+export default AsrInput;

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

@@ -0,0 +1,10 @@
+import '../index.less';
+import React from 'react';
+interface Props {
+    className?: string;
+    renderTop?: React.ReactNode;
+    placeholder?: string;
+    style?: React.CSSProperties;
+}
+export default function MessageInputAIStream(props: Props): React.JSX.Element;
+export {};

package/dist/MessageInput/MessageInputAIStream/index.js

@@ -0,0 +1,359 @@
+import "core-js/modules/es.string.trim.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+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, { useRef, useState } from 'react';
+import { Image, Input, ScrollView } from '@ray-js/ray';
+import { AbortController, authorize } from '@ray-js/t-agent-plugin-aistream';
+import { Emitter, EmitterEvent } from '@ray-js/t-agent';
+import cx from 'clsx';
+import imageSvg from '../icons/image.svg';
+import videoSvg from '../icons/video.svg';
+import loadingSvg from '../icons/loading.svg';
+import closeCircleSvg from '../icons/close-circle.svg';
+import { useAttachmentInput, useChatAgent, useEmitEvent, useIsUnmounted, useOnEvent, useTranslate } from '../../hooks';
+import AsrInput from './AsrInput';
+const AMPLITUDE_COUNT = 60;
+export default function MessageInputAIStream(props) {
+  const [moreOpen, setMoreOpen] = useState(false);
+  const t = useTranslate();
+  const [text, setText] = useState('');
+  const [record, setRecord] = useState({
+    startAt: 0,
+    recording: false,
+    confirm: null,
+    cancel: null
+  });
+  const attachmentInput = useAttachmentInput({
+    local: true
+  });
+  const {
+    uploading,
+    uploaded,
+    setUploaded,
+    upload
+  } = attachmentInput;
+  const acRef = useRef(null);
+  const [responding, setResponding] = useState(false);
+  const [mode, setMode] = useState('text');
+  const agent = useChatAgent();
+  const emitEvent = useEmitEvent();
+  const isUnmounted = useIsUnmounted();
+  useOnEvent('networkChange', _ref => {
+    let {
+      online
+    } = _ref;
+    if (!online && responding) {
+      setResponding(false);
+    }
+  });
+  const isMore = !text.trim().length && true;
+  const send = async inputBlocks => {
+    if (!(inputBlocks !== null && inputBlocks !== void 0 && inputBlocks.length) || attachmentInput.uploading || responding) {
+      return;
+    }
+    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, ac.signal);
+    } finally {
+      if (!isUnmounted()) {
+        setResponding(false);
+      }
+    }
+  };
+  useOnEvent('sendMessage', async _ref2 => {
+    let {
+      blocks
+    } = _ref2;
+    if (uploading || responding) {
+      return;
+    }
+    setText('');
+    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, ac.signal);
+    } finally {
+      if (!isUnmounted()) {
+        setResponding(false);
+      }
+    }
+  });
+  useOnEvent('setInputBlocks', async _ref3 => {
+    let {
+      blocks
+    } = _ref3;
+    if (uploading || responding) {
+      return;
+    }
+    if (mode !== 'text') {
+      setMode('text');
+    }
+    attachmentInput.loadBlocks(blocks);
+    let t = '';
+    for (const block of blocks) {
+      if (block.type === 'text') {
+        t = block.text;
+      }
+    }
+    if (t) {
+      setText(t);
+    }
+    setMoreOpen(false);
+  });
+  const openMoreClick = () => {
+    setMoreOpen(!moreOpen);
+    if (!moreOpen) {
+      emitEvent('scrollToBottom', {
+        animation: true
+      });
+    }
+  };
+  let container;
+  if (mode === 'text') {
+    container = /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-message-input-text-bar"
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-message-input-text-group"
+    }, /*#__PURE__*/React.createElement(Input, {
+      confirmType: "send",
+      value: text,
+      onInput: event => setText(event.detail.value),
+      placeholder: props.placeholder,
+      "data-testid": "t-agent-message-input-text-inner",
+      className: "t-agent-message-input-text-inner",
+      onConfirm: () => {
+        if (text.trim().length) {
+          send([...attachmentInput.blocks, {
+            type: 'text',
+            text
+          }]);
+        }
+      },
+      maxLength: 200,
+      placeholderStyle: "color: var(--app-B1-N4)",
+      onFocus: () => {
+        setMoreOpen(false);
+        emitEvent('scrollToBottom', {
+          animation: true
+        });
+      }
+    }), /*#__PURE__*/React.createElement(Button, {
+      "data-testid": "t-agent-message-input-button-asr",
+      onClick: async () => {
+        const auth = await authorize({
+          scope: 'scope.record'
+        }).then(() => true, () => false);
+        if (!auth) {
+          ty.showToast({
+            icon: 'none',
+            title: t('t-agent.input.voice.require-permission')
+          });
+          return;
+        }
+        setText('');
+        setMode('voice');
+      },
+      className: "t-agent-message-input-button t-agent-message-input-button-voice"
+    })), /*#__PURE__*/React.createElement(Button, {
+      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 && !responding,
+        't-agent-message-input-button-stop': responding
+      }),
+      "data-testid": "t-agent-message-input-button-main",
+      onClick: async () => {
+        if (responding) {
+          if (acRef.current) {
+            acRef.current.abort('User abort');
+          }
+        } else if (isMore) {
+          openMoreClick();
+        } else if (text.trim().length) {
+          await send([...attachmentInput.blocks, {
+            type: 'text',
+            text
+          }]);
+        }
+      }
+    }));
+  } else {
+    container = /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-message-input-text-bar"
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-message-input-text-group"
+    }, /*#__PURE__*/React.createElement(AsrInput, {
+      disabled: responding,
+      amplitudeCount: AMPLITUDE_COUNT,
+      recording: record.recording,
+      onRecord: async () => {
+        const emitter = new Emitter();
+        setRecord({
+          startAt: Date.now(),
+          recording: true,
+          confirm: () => {
+            console.log('setRecord confirm');
+            emitter.dispatchEvent(new EmitterEvent('confirm'));
+            setRecord({
+              startAt: 0,
+              recording: false,
+              confirm: null,
+              cancel: null
+            });
+          },
+          cancel: () => {
+            console.log('setRecord cancel');
+            emitter.dispatchEvent(new EmitterEvent('cancel'));
+            setRecord({
+              startAt: 0,
+              recording: false,
+              confirm: null,
+              cancel: null
+            });
+          }
+        });
+        emitter.addEventListener('error', event => {
+          console.log('setRecord error');
+          ty.showToast({
+            icon: 'error',
+            title: t('t-agent.input.voice.recording-failed')
+          });
+          console.error(event);
+          setRecord({
+            recording: false,
+            confirm: null,
+            cancel: null
+          });
+        });
+        console.log('setRecord send');
+        await send([...attachmentInput.blocks, {
+          type: 'audio',
+          audio_emitter: emitter,
+          amplitude_count: AMPLITUDE_COUNT
+        }]);
+      },
+      onConfirm: () => {
+        var _record$confirm;
+        console.log('test onConfirm');
+        (_record$confirm = record.confirm) === null || _record$confirm === void 0 || _record$confirm.call(record);
+      },
+      onCancel: () => {
+        var _record$cancel;
+        console.log('test onCancel');
+        (_record$cancel = record.cancel) === null || _record$cancel === void 0 || _record$cancel.call(record);
+      },
+      onBack: () => setMode('text')
+    })));
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    className: "".concat(props.className || '', " t-agent-message-input"),
+    style: props.style
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-input-container"
+  }, props.renderTop, !!uploaded.length && /*#__PURE__*/React.createElement(ScrollView, {
+    scrollX: true,
+    scrollY: false,
+    enableFlex: true,
+    className: "t-agent-message-input-uploaded-files",
+    refresherTriggered: false
+  }, uploaded.map(file => {
+    let content;
+    switch (file.type) {
+      case 'image':
+        content = /*#__PURE__*/React.createElement(Image, {
+          className: "t-agent-message-input-uploaded-file-image",
+          mode: "aspectFill",
+          src: file.url
+        });
+        break;
+      case 'video':
+        content = /*#__PURE__*/React.createElement(Image, {
+          className: "t-agent-message-input-uploaded-file-image",
+          mode: "aspectFill",
+          src: file.thumbUrl
+        });
+        break;
+      case 'loading':
+        content = /*#__PURE__*/React.createElement(View, {
+          className: "t-agent-message-input-uploaded-file-loading",
+          key: file.id
+        }, /*#__PURE__*/React.createElement(Image, {
+          src: loadingSvg,
+          className: "t-agent-message-input-uploaded-file-loading-icon"
+        }));
+        break;
+      default:
+        content = null;
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      key: file.id,
+      className: "t-agent-message-input-uploaded-file"
+    }, /*#__PURE__*/React.createElement(Image, {
+      onClick: () => {
+        setUploaded(prev => prev.filter(f => f.id !== file.id));
+      },
+      className: "t-agent-message-input-uploaded-file-delete",
+      src: closeCircleSvg
+    }), content);
+  })), container), /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-input-panel ".concat(moreOpen ? '' : 't-agent-message-input-panel-close')
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-input-panel-content"
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "t-agent-message-input-panel-button",
+    onClick: async () => {
+      try {
+        await upload('image', 1);
+      } catch (e) {
+        ty.showToast({
+          icon: 'error',
+          title: t('t-agent.input.upload.failed')
+        });
+      }
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-input-panel-button-icon"
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: imageSvg
+  }))), /*#__PURE__*/React.createElement(Button, {
+    className: "t-agent-message-input-panel-button",
+    onClick: async () => {
+      try {
+        await upload('video', 1);
+      } catch (e) {
+        ty.showToast({
+          icon: 'error',
+          title: t('t-agent.input.upload.failed')
+        });
+      }
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-input-panel-button-icon"
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: videoSvg
+  }))))));
+}

package/dist/MessageInput/{AsrInput.d.ts → MessageInputAssistant/AsrInput.d.ts}

@@ -1,4 +1,4 @@
-import './index.less';
+import '../index.less';
 import React from 'react';
 interface Props {
     text: string;

package/dist/MessageInput/{AsrInput.js → MessageInputAssistant/AsrInput.js}

@@ -1,8 +1,8 @@
-import './index.less';
+import '../index.less';
 import { Button, Text, View, Textarea } from '@ray-js/components';
 import React from 'react';
 import cx from 'clsx';
-import { useAsrInput } from '../hooks';
+import { useAsrInput } from '../../hooks';
 export default function AsrInput(props) {
   const {
     responding,

package/dist/MessageInput/MessageInputAssistant/index.d.ts

@@ -0,0 +1,11 @@
+import '../index.less';
+import React from 'react';
+interface Props {
+    className?: string;
+    renderTop?: React.ReactNode;
+    placeholder?: string;
+    style?: React.CSSProperties;
+    multiModal?: boolean;
+}
+export default function MessageInputAssistant(props: Props): React.JSX.Element;
+export {};