yt-chat-components 1.5.7 → 1.5.8

package/src/YtChatView/chatWidget/chatWindow/chatMessage/index.tsx

@@ -24,6 +24,7 @@ import {UrlCard} from "./urlCard"
 import {CustomThoughtChainItem, CustomThoughtChainProps} from "./CustomThoughtChain";
 import CustomThoughtChain from "./CustomThoughtChain";
 import {isFunction} from "lodash";
+import {AudioPlayer} from "../audioPlayer/AudioPlayer";
 let speechSynth = window.speechSynthesis;
 let utterance = null;
 
@@ -63,6 +64,7 @@ export default function ChatMessage({
   key,
   isShowReadIcon,
   renderInitNode,
+  voice
 }: ChatMessageType) {
   const parseFileName = (
     text: string,
@@ -135,24 +137,33 @@ export default function ChatMessage({
     }
   };
 
-  /**
-   * 播放文字
-   * @param text 文字
-   */
   const playVoice = (text)=>{
     if (isPlay) {
-      speechSynth.cancel();
       setIsPlay(false)
-    }else{
-      if (text) {
-        utterance = new SpeechSynthesisUtterance(text);
-        const voices = speechSynth.getVoices();
-        utterance.voice = voices[61];
-        utterance.rate = 1;
-        utterance.pitch = 1;
-        speechSynth.speak(utterance);
-        setIsPlay(true)
+      if (window.messageAudioPlayer){
+        window.messageAudioPlayer.stop();
+      }
+      return;
+    }
+
+    if (text) {
+      if (window.messageAudioPlayer){
+        window.messageAudioPlayer.stop();
+        window.messageAudioPlayer = null;
       }
+      console.log('voice = ' +  voice)
+      window.messageAudioPlayer = new AudioPlayer(voice);
+      window.messageAudioPlayer.onReady = () => {
+        console.log('已连接到语音合成服务');
+        window.messageAudioPlayer.sendRunSynthesis(text)// 尽快发送 StartSynthesis
+      };
+      window.messageAudioPlayer.onComplete = () => {
+        setIsPlay(false);
+      };
+      window.messageAudioPlayer.onError = (err) => {
+        // alert('发生错误：' + err);
+      };
+      setIsPlay(true)
     }
   }
 

package/src/YtChatView/chatWidget/chatWindow/index.tsx

@@ -29,7 +29,8 @@ import {isEmpty, isFunction} from 'lodash';
 import btn_answer from '../../../assets/aicenter/btn_answer.png';
 import {MethodContext} from "../../previewDialogV2";
 import TabSelector from "../../components/TabSelector";
-
+import {AudioRecorder} from "./audioRecorder";
+import InputMobile from "./inputMobile/inputMobile";
 
 let mediaRecorder = null; // 语音对象,用于录音
 let recognition = null; // 语音识别对象
@@ -92,6 +93,9 @@ export default function ChatWindow({
   isTagsHidden,
   isEnableForV1,
   questions,
+  voice,
+  onSmartRobotClick,
+  isShowMobileInputArea,
 }: {
   is_enable_call:boolean;
   tags: [];
@@ -143,12 +147,17 @@ export default function ChatWindow({
   isTagsHidden?: boolean;
   isEnableForV1?: boolean;
   questions?: any[];
+  voice?: string;
+  onSmartRobotClick?: Function;
+  isShowMobileInputArea?: boolean;
 }) {
   const ref = useRef<HTMLDivElement>(null);
   const lastMessage = useRef<HTMLDivElement>(null);
   const [showCallInterface, setShowCallInterface] = useState(false); // 添加通话界面状态
   const [aiStatus, setAiStatus] = useState(null);
+  const inputMobileRef = useRef(null);
   const inputRef = useRef<HTMLInputElement>(null); /* User input Ref */
+  const audioRecorder = useRef(null);
   /* Initial listener for loss of focus that refocuses User input after a small delay */
   const [nowAIContentList, setNowAIContentList] = useState<Array<MessageItem>>([]);
   const [receivingMessage, setReceivingMessage] = useState(false);
@@ -164,7 +173,7 @@ export default function ChatWindow({
   const isStream = true;//是否流式输出（手动开关）
   const [recordState, setRecordState] = useState(false); // 录音状态。true为正在录音，false为停止录音
   const [tagList, setTagList] = useState([]); // 问题标签列表
-  const {isTitleSideIcon, logoWidth, agentUrl, stopMessageUrl, sendMessageUrl, speakUrl} = baseConfig;
+  const {isTitleSideIcon, logoWidth, agentUrl, stopMessageUrl, sendMessageUrl, speakUrl, callUrl} = baseConfig;
   const [inputContainerHeight, setInputContainerHeight] = useState('120px')
   let content_id: string = null
   let content_ns: string = null
@@ -880,6 +889,39 @@ export default function ChatWindow({
     }
   };
 
+  const stopRecord = () =>{
+    audioRecorder.current.stopRecorder();
+    audioRecorder.current = undefined;
+    setRecordState(false)
+  }
+  const startConnectAndRecord = () => {
+    if (recordState){
+      stopRecord()
+    }else {
+      setRecordState(true)
+      audioRecorder.current = new AudioRecorder();
+      audioRecorder.current.startRecorder();
+      audioRecorder.current.onTextUpdate = (text: string) => {
+        setValue(text);
+        if (inputMobileRef.current){
+          inputMobileRef.current.handleSetInputText(text);
+        }
+        if (inputRef.current) {
+          inputRef.current.value = text;
+        }
+      };
+      audioRecorder.current.onRecordError = (error: string) => {
+        stopRecord()
+      };
+      audioRecorder.current.onRecordTimeout = () => {
+        stopRecord()
+        if (inputMobileRef.current){
+          inputMobileRef.current.stopRecording();
+        }
+      };
+    }
+  };
+
   /**
    * 输出消息时，滚动到底部
    */
@@ -968,9 +1010,20 @@ export default function ChatWindow({
                 </div>
             }
             <TabSelector
+                isMobile={isMobile}
+                isSimple={isMobile}
+                isShowByPages={true}
+                keyShowSize={4}
+                agentName={window_title}
+                agentUrl={agentUrl}
                 welcomeWords={`Hi，欢迎使用${window_title}，您可以这样问我:`}
                 handleRowClick={(word) => {
-                  handleSendMessage(word)
+                  if(!receivingMessageRef.current){
+                    handleSendMessage(word)
+                  }else{
+                    messageTip.destroy();
+                    messageTip.info("请等待回复结束后再发送")
+                  }
                 }}
                 dataList={questions}
             />
@@ -1150,7 +1203,40 @@ export default function ChatWindow({
     return <></>
   }
 
+  const renderInputAreaMobile = () => {
+    return (
+        <InputMobile
+            ref={inputMobileRef}
+            isShowVoiceButton={isShowVoiceButton}
+            inputRef={inputRef}
+            disabled={receivingMessage}
+            placeholder={
+              receivingMessage
+                  ? placeholder_sending || '思考中...'
+                  : placeholder || '请输入您的问题...'
+            }
+            onValueChange={ value => setValue(value)}
+            onSendClick={() => {
+              if (receivingMessage) {
+                addMessage({
+                  messageItemList: [...nowAIContentList],
+                  isSend: false,
+                });
+                abortControllerRef.current.abort('disconnect');
+                abortControllerRef.current = new AbortController();
+              } else {
+                handleSendMessage()
+              }
+            }}
+            onStartRecordClick={startConnectAndRecord}
+            onStopRecordClick={stopRecord}
+            onSmartRobotClick={onSmartRobotClick}
+        />
+    )
+  }
+
   const renderInputArea = () => {
+    if (isMobile && isShowMobileInputArea) renderInputAreaMobile();
     let isRender = messages.length === 0
     if (messages.length > 0) {
       const {messageItemList} = messages[messages.length - 1]
@@ -1260,7 +1346,7 @@ export default function ChatWindow({
               <div
                   className="w_send_voice_box"
                   style={receivingMessage ? {cursor: 'not-allowed'} : {}}
-                  onClick={startRecord}
+                  onClick={startConnectAndRecord}
               >
                 <img src={recordState ? soundWavePng : (speakUrl || luyinPng)} style={{width: 35}}
                      className={recordState ? "w_recordIng" : ''}></img>
@@ -1275,7 +1361,7 @@ export default function ChatWindow({
                   style={receivingMessage ? {cursor: 'not-allowed'} : {}}
                   onClick={handleCallButtonClick}
               >
-                <img src={phonePng} style={{width: 23}}></img>
+                <img src={(callUrl || phonePng)} style={{width: 35}}></img>
               </div>
             </Tooltip>
         }
@@ -1296,7 +1382,7 @@ export default function ChatWindow({
               style={{
                 ...(receivingMessage ? {cursor: 'pointer'} : {}),
                 height:'100%',
-                padding: '0 13px 16px',
+                padding: '0 13px 16px 0',
                 background: 'transparent',
                 display: 'flex',
                 alignItems: 'end',
@@ -1386,6 +1472,7 @@ export default function ChatWindow({
         </>
     )
   }
+
   return (
       <div
           style={{...chat_window_style, width: width, height: "100%"}}
@@ -1458,6 +1545,7 @@ export default function ChatWindow({
                           handleSendMessage={handleSendMessage}
                           isShowReadIcon={isShowReadIcon}
                           renderInitNode={message.renderInitNode}
+                          voice={voice}
                       />
                   ))
                 }
@@ -1476,13 +1564,14 @@ export default function ChatWindow({
                                 isSend={false}
                                 handleSendMessage={handleSendMessage}
                                 isShowReadIcon={isShowReadIcon}
+                                voice={voice}
                             /> : <ChatMessagePlaceholder bot_message_style={bot_message_style} aiStatus={aiStatus}/>
                     )
                 }
                 <div ref={lastMessage}></div>
               </div>
               {
-                renderInputArea()
+                renderInputAreaMobile()
               }
             </div>
         }

package/src/YtChatView/chatWidget/chatWindow/inputMobile/index.module.css

@@ -0,0 +1,134 @@
+.m_tool_box {
+    position: relative;
+    width: 100%;
+    height: fit-content;
+    display: flex;
+    background-color: white;
+
+    .m_avatar {
+        position: absolute;
+        left: 10px;
+        bottom: 60px;
+        /* 头像容器样式 */
+        img{
+            z-index: 10;
+            position: relative;
+        }
+    }
+
+    .m_input_box {
+        /* 输入框整体容器样式 */
+        display: flex;
+        align-items: center;
+        width: 100%;
+        padding: 8px 8px;
+        background-color: #f9f9f9;
+
+        /* 在移动设备上优化触摸体验 */
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    }
+
+    .m_voiceToggle {
+        /* 语音/键盘切换按钮样式 */
+        transition: background-color 0.3s ease;
+    }
+
+    .m_center_box {
+        margin-left: 8px;
+        /* 中间输入区域容器 */
+        flex: 1;
+        position: relative;
+        /* 优化移动端点击区域 */
+        -webkit-user-select: auto;
+        user-select: auto;
+    }
+
+    .m_clickToTalk {
+        /* 点击说话样式 */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 40px;
+        border-radius: 8px;
+        background-color: #f0f0f0;
+        font-size: 14px;
+        color: #666;
+    }
+
+    .m_inputBox-textarea {
+        /* 输入框样式 */
+        width: 100%;
+        font-size: 14px;
+        line-height: 20px;
+        border: none;
+        resize: none;
+        overflow-y: hidden;
+        background-color: transparent;
+
+        /* 设置输入法中文输入时的兼容样式 */
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+
+        /* 获得焦点时的样式 */
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .m_sendButton {
+        /* 发送按钮样式 */
+        padding: 0px 14px;
+        height: 34px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 10px;
+        border-radius: 8px;
+        background-color: #4a90e2;
+        transition: background-color 0.3s ease;
+
+        &:active {
+            background-color: #3a80d2;
+        }
+    }
+
+    .m_sendButton {
+        /* 发送按钮样式 */
+        padding: 0px 14px;
+        height: 34px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 10px;
+        border-radius: 8px;
+        background-color: #4a90e2;
+        transition: background-color 0.3s ease;
+
+        &:active {
+            background-color: #3a80d2;
+        }
+    }
+
+    /* 音波动画样式 */
+
+    .audioWave {
+        fill: #fff;
+        opacity: 1;
+
+        &.active {
+            animation: wavePulse 1s ease-out infinite;
+        }
+    }
+}
+
+/* 音波动画关键帧 */
+@keyframes wavePulse {
+    0%, 100% {
+        transform: scaleY(1);
+    }
+    50% {
+        transform: scaleY(1.5);
+    }
+}

package/src/YtChatView/chatWidget/chatWindow/inputMobile/inputMobile.js

@@ -0,0 +1,170 @@
+import React from "react";// 音波动画组件
+import styles from "./index.module.css";
+import {Input, message} from "antd";
+
+class InputMobile extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            isVoice: false,
+            inputText: '',
+            isRecording: false,
+            isAudioActive: false
+        };
+    }
+
+    handleSetInputText = (text) => {
+        this.setState({inputText: text});
+    };
+
+    // 处理输入变化
+    handleInputChange = (e) => {
+        const {onValueChange} = this.props;
+        onValueChange(e.target.value);
+        this.setState({inputText: e.target.value}, () => {
+            // this.autoResizeTextarea();
+        });
+    }
+
+    // 开始录音时激活音波动画
+    startRecording = () => {
+        if (this.props.disabled){
+            message.destroy();
+            message.warning('对话结束后重试');
+            return;
+        }
+        this.setState({
+            isRecording: true,
+            isAudioActive: true
+        });
+        // 可以在这里添加实际录音的初始化逻辑
+    }
+
+    // 停止录音时停止音波动画
+    stopRecording = () => {
+        const {onStopRecordClick} = this.props;
+        onStopRecordClick()
+        this.setState({ 
+            isRecording: false,
+            isAudioActive: false,
+            isVoice: false
+        });
+    }
+
+    handleRecordClick = () => {
+        const {onStartRecordClick} = this.props;
+        if (this.state.isVoice && !this.state.isRecording) {
+            this.startRecording();
+            onStartRecordClick()
+        } else {
+            this.stopRecording();
+        }
+    }
+
+    render() {
+        const {isShowVoiceButton, disabled, placeholder, onSendClick, inputRef, onSmartRobotClick = () => {} } = this.props;
+        return (
+            <div className={styles.m_tool_box}>
+                {/*智能体小人图形固定显示位置*/}
+                <div className={styles.m_avatar}>
+                    <img src={'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/kai_yuan/common/smartBoy.png'} width={'60px'} style={{zIndex:10}} onClick={onSmartRobotClick}/>
+                </div>
+                {/*输入框*/}
+                <div className={styles.m_input_box} style={{display: 'flex', alignItems: 'center', width: '100%'}}>
+                    {/*语音键盘切换按钮*/}
+                    {
+                        isShowVoiceButton &&
+                        <div
+                            onClick={() => this.setState({isVoice: !this.state.isVoice})}
+                            className={styles.m_voiceToggle}
+                        >
+                            <img
+                                src={this.state.isVoice ?
+                                    'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/kai_yuan/common/keyboard.png' :
+                                    'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/kai_yuan/common/voice.png'
+                                }
+                                width={'30px'}
+                                height={'30px'}
+                            />
+                        </div>
+                    }
+
+                    {/*输入框 或 点击说话*/}
+                    <div className={styles.m_center_box} style={{flex: 1, position: 'relative'}}>
+                        {this.state.isVoice ? (
+                            <div
+                                className={styles.m_clickToTalk}
+                                style={{background: this.state.isRecording ? '#1774FF' : '#f0f0f0'}}
+                                onClick={this.handleRecordClick}
+                            >
+                                {this.state.isRecording ? <AudioWaveAnimation isActive={true}/> : '点击说话'}
+                            </div>
+                        ) : (
+                            <Input
+                                size={'large'}
+                                ref={inputRef}
+                                value={this.state.inputText}
+                                disabled={disabled}
+                                onChange={this.handleInputChange}
+                                maxLength={500}
+                                placeholder={placeholder}
+                                className="m_inputBox-textarea"
+                                style={{overflowY: 'hidden'}} // 默认隐藏滚动条
+                            />
+                        )}
+                    </div>
+                    {/*发送按钮*/}
+                    {
+                        this.state.isVoice && this.state.isRecording ? (
+                            <div
+                                className={styles.m_sendButton}
+                                style={{backgroundColor: 'red'}}
+                                onClick={this.stopRecording}
+                            >
+                                <span style={{color: 'white', fontSize: 14}}>结束</span>
+                            </div>
+                        ) : (
+                            <div className={styles.m_sendButton} onClick={() => {
+                                onSendClick();
+                                this.setState({inputText: ''})
+                            }}>
+                                <span style={{color: 'white', fontSize: 14}}>{disabled ? '停止' : '开始'}</span>
+                            </div>
+                        )
+                    }
+                </div>
+            </div>
+        )
+    }
+}
+
+class AudioWaveAnimation extends React.Component {
+    render() {
+        const { isActive } = this.props;
+        return (
+            <svg className={`${styles.audioWave} ${isActive ? styles.active : ''}`} width="160" height="20"
+                 viewBox="0 0 60 20">
+                <rect x="1" y="9" width="4" height="2" rx="2" ry="2"/>
+                <rect x="7" y="7" width="4" height="4" rx="2" ry="2"/>
+                <rect x="13" y="5" width="4" height="6" rx="2" ry="2"/>
+                <rect x="19" y="7" width="4" height="4" rx="2" ry="2"/>
+                <rect x="25" y="9" width="4" height="2" rx="2" ry="2"/>
+                <rect x="31" y="7" width="4" height="4" rx="2" ry="2"/>
+                <rect x="37" y="5" width="4" height="6" rx="2" ry="2"/>
+                <rect x="43" y="7" width="4" height="4" rx="2" ry="2"/>
+                <rect x="49" y="9" width="4" height="2" rx="2" ry="2"/>
+                <rect x="1" y="9" width="4" height="2" rx="2" ry="2"/>
+                <rect x="7" y="7" width="4" height="4" rx="2" ry="2"/>
+                <rect x="13" y="5" width="4" height="6" rx="2" ry="2"/>
+                <rect x="19" y="7" width="4" height="4" rx="2" ry="2"/>
+                <rect x="25" y="9" width="4" height="2" rx="2" ry="2"/>
+                <rect x="31" y="7" width="4" height="4" rx="2" ry="2"/>
+                <rect x="37" y="5" width="4" height="6" rx="2" ry="2"/>
+                <rect x="43" y="7" width="4" height="4" rx="2" ry="2"/>
+                <rect x="49" y="9" width="4" height="2" rx="2" ry="2"/>
+            </svg>
+        );
+    }
+}
+
+export default InputMobile;

package/src/YtChatView/chatWidget/index.tsx

@@ -53,7 +53,10 @@ export default function ChatWidget({
   renderCustomDropDown,
   isTagsHidden,
   isEnableForV1 = true,
-  questions
+  questions,
+  voice,
+  onSmartRobotClick,
+  isShowMobileInputArea,
 }: {
   is_enable_call:boolean,
   tags: [];
@@ -101,6 +104,10 @@ export default function ChatWidget({
   isTagsHidden: boolean;
   isEnableForV1: boolean;
   questions: any[];
+  isTagsHidden: boolean,
+  voice?: string;
+  onSmartRobotClick?: Function;
+  isShowMobileInputArea?: boolean;
 }) {
   const [open, setOpen] = useState(start_open);
   const [messages, setMessages] = useState<ChatMessageType[]>([]);
@@ -178,6 +185,9 @@ export default function ChatWidget({
         isTagsHidden={isTagsHidden}
         isEnableForV1={isEnableForV1}
         questions={questions}
+        voice={voice}
+        onSmartRobotClick={onSmartRobotClick}
+        isShowMobileInputArea={isShowMobileInputArea}
       />
     </div>
   );