yt-chat-components 1.7.2 → 1.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-chat-components",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "main": "build/static/js/bundle.min.js",
   "module": "build/static/js/bundle.min.js",
   "types": "build/static/js/index.d.ts",

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

@@ -1,86 +1,91 @@
-.msg_userMessageBox {
-  width: fit-content;
-  max-width: 90%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.msg_userMessageBox .msg_messageImgBox {
-  width: 850px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-}
-
-.msg_userMessageBox .msg_messageImgBox .msg_messageImg {
-  border-radius: 5px;
-}
-
-.msg_userMessageBox .msg_messageImgBox .msg_fileBox {
-  flex-shrink: 0;
-  pointer-events: auto;
-  position: relative;
-  width: 137px;
-  background-color: #f0f0f0;
-  border-radius: 10px;
-  margin: 3px 5px;
-  padding: 5px;
-  display: flex;
-}
-
-.msg_userMessageBox .msg_messageImgBox .msg_fileBox:hover .msg_fileRemove {
-  display: block;
-}
-
-.msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileInfoBox {
-  margin-left: 10px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-}
-
-.msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileInfoBox .msg_fileInfoFileName {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 72px;
-  color: #242424;
-  user-select: none;
-}
-
-.msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileInfoBox .msg_fileInfoMeta {
-  user-select: none;
-  color: #a8a8a8;
-}
-
-.msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileRemove {
-  display: none;
-  position: absolute;
-  cursor: pointer;
-  top: -2px;
-  right: 0;
-  z-index: 99999;
-}
-
-.msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileRemove img {
-  width: 20px;
-}
-
-.msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_upImg {
-  border-radius: 3px;
-  z-index: 510;
-}
-
-.msg_operateBox {
-  display: flex;
-  margin-top: 5px;
-  user-select: none;
-}
-
-.msg_operateBox img {
-  -webkit-user-drag: none;
-  margin-right: 3px;
-  cursor: pointer;
-  width: 16px;
+.msg_userMessageBox {
+  width: fit-content;
+  max-width: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.msg_userMessageBox .msg_messageImgBox {
+  width: 850px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.msg_userMessageBox .msg_messageImgBox .msg_messageImg {
+  border-radius: 5px;
+}
+
+.msg_userMessageBox .msg_messageImgBox .msg_fileBox {
+  flex-shrink: 0;
+  pointer-events: auto;
+  position: relative;
+  width: 137px;
+  background-color: #f0f0f0;
+  border-radius: 10px;
+  margin: 3px 5px;
+  padding: 5px;
+  display: flex;
+}
+
+.msg_userMessageBox .msg_messageImgBox .msg_fileBox:hover .msg_fileRemove {
+  display: block;
+}
+
+.msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileInfoBox {
+  margin-left: 10px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileInfoBox .msg_fileInfoFileName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 72px;
+  color: #242424;
+  user-select: none;
+}
+
+.msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileInfoBox .msg_fileInfoMeta {
+  user-select: none;
+  color: #a8a8a8;
+}
+
+.msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileRemove {
+  display: none;
+  position: absolute;
+  cursor: pointer;
+  top: -2px;
+  right: 0;
+  z-index: 99999;
+}
+
+.msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_fileRemove img {
+  width: 20px;
+}
+
+.msg_userMessageBox .msg_messageImgBox .msg_fileBox .msg_upImg {
+  border-radius: 3px;
+  z-index: 510;
+}
+
+.msg_operateBox {
+  max-width:780px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 5px;
+  user-select: none;
+}
+
+.msg_operateBox img {
+  -webkit-user-drag: none;
+  margin-right: 3px;
+  cursor: pointer;
+  width: 26px;
 }

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

@@ -474,15 +474,20 @@ export default function ChatMessage({
           }
         </div>,
         footer: <div key={id} className="msg_operateBox">
-          {isShowReadIcon && <img src={isPlay ? playRunGif : playPng} onClick={() => playVoice(message)}/>}
-          <img src={copyPng} onClick={() => copyText(message)}/>
           <div style={{
             fontSize: 10,
             color: '#a3a3a3',
             bottom: 6,
-            width: '100%',
-            marginLeft:'4px',
-          }}>内容由AI生成，无法保证真实准确，仅供参考
+            marginLeft: '4px',
+          }}>
+            内容由AI生成，无法保证真实准确，仅供参考
+          </div>
+          <div style={{display: 'flex', flexDirection: 'row',}}>
+            {isShowReadIcon && <img
+                src={isPlay ? 'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/kai_yuan/common/playing.gif' : 'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/kai_yuan/common/play.png'}
+                onClick={() => playVoice(message)}/>}
+            <img src={'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/kai_yuan/common/copy.png'}
+                 onClick={() => copyText(message)}/>
           </div>
         </div>
       };

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

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import {extractMessageFromOutput} from './utils';
-import React, {Context, useCallback, useEffect, useRef, useState} from 'react';
+import React, {Context, forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import {ChatMessageType, embedAppExtend, InputValueType, MessageItem, MessageType} from './types/chatWidget';
 import ChatMessage from './chatMessage';
 import {fetchUploadFile, getChatHistory, sendMessage} from './controllers';
@@ -41,7 +41,70 @@ const setValue = (value) => {
   inputValue = value
 };
 
-export default function ChatWindow({
+// 定义通过 ref 可以调用的方法
+export interface ChatWindowRef {
+  handleCallButtonClick: () => void;
+}
+
+// props 类型定义（为了简洁这里只保留关键部分，其余和你原来一致）
+interface ChatWindowProps {
+  is_enable_call:boolean;
+  tags: [];
+  getHistoryList: Function;
+  userInfo: object;
+  clearMessage: Function;
+  api_key?: string;
+  output_type: string;
+  input_type: string;
+  output_component?: string;
+  bot_message_style?: React.CSSProperties;
+  send_icon_style?: React.CSSProperties;
+  user_message_style?: React.CSSProperties;
+  chat_window_style?: React.CSSProperties;
+  error_message_style?: React.CSSProperties;
+  send_button_style?: React.CSSProperties;
+  online?: boolean;
+  open: boolean;
+  online_message?: string;
+  placeholder_sending?: string;
+  offline_message?: string;
+  window_title?: string;
+  placeholder?: string;
+  input_style?: React.CSSProperties;
+  input_container_style?: React.CSSProperties;
+  tweaks?: { [key: string]: any };
+  flowId: string;
+  hostUrl: string;
+  updateLastMessage: Function;
+  messages: ChatMessageType[];
+  addMessage: Function;
+  position?: string;
+  triggerRef: React.RefObject<HTMLButtonElement>;
+  width?: number;
+  height?: string;
+  sessionId: string;
+  additional_headers?: { [key: string]: string };
+  baseConfig: object;
+  isShowVoiceButton: boolean;
+  isShowUploadButton: boolean;
+  dropManUrl: string;
+  modalWidth: number;
+  isMobile: boolean;
+  isShowChatHeader: boolean;
+  tipTitle?: string;
+  tipContent?: string;
+  isShowReadIcon?:boolean;
+  renderCustomDropDown?: Function;
+  isTagsHidden?: boolean;
+  isEnableForV1?: boolean;
+  questions?: any[];
+  voice?: string;
+  onSmartRobotClick?: Function;
+  isShowMobileInputArea?: boolean;
+  isInH5Page: boolean;
+}
+
+const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
   is_enable_call,
   tags,
   getHistoryList,
@@ -98,63 +161,8 @@ export default function ChatWindow({
   onSmartRobotClick,
   isShowMobileInputArea,
   isInH5Page
-}: {
-  is_enable_call:boolean;
-  tags: [];
-  getHistoryList: Function;
-  userInfo: object;
-  clearMessage: Function;
-  api_key?: string;
-  output_type: string;
-  input_type: string;
-  output_component?: string;
-  bot_message_style?: React.CSSProperties;
-  send_icon_style?: React.CSSProperties;
-  user_message_style?: React.CSSProperties;
-  chat_window_style?: React.CSSProperties;
-  error_message_style?: React.CSSProperties;
-  send_button_style?: React.CSSProperties;
-  online?: boolean;
-  open: boolean;
-  online_message?: string;
-  placeholder_sending?: string;
-  offline_message?: string;
-  window_title?: string;
-  placeholder?: string;
-  input_style?: React.CSSProperties;
-  input_container_style?: React.CSSProperties;
-  tweaks?: { [key: string]: any };
-  flowId: string;
-  hostUrl: string;
-  updateLastMessage: Function;
-  messages: ChatMessageType[];
-  addMessage: Function;
-  position?: string;
-  triggerRef: React.RefObject<HTMLButtonElement>;
-  width?: number;
-  height?: string;
-  sessionId: string;
-  additional_headers?: { [key: string]: string };
-  baseConfig: object;
-  isShowVoiceButton: boolean;
-  isShowUploadButton: boolean;
-  dropManUrl: string;
-  modalWidth: number;
-  isMobile: boolean;
-  isShowChatHeader: boolean;
-  tipTitle?: string;
-  tipContent?: string;
-  isShowReadIcon?:boolean;
-  renderCustomDropDown?: Function;
-  isTagsHidden?: boolean;
-  isEnableForV1?: boolean;
-  questions?: any[];
-  voice?: string;
-  onSmartRobotClick?: Function;
-  isShowMobileInputArea?: boolean;
-  isInH5Page: boolean;
-}) {
-  const ref = useRef<HTMLDivElement>(null);
+}, ref) => {
+  const rootRef = useRef<HTMLDivElement>(null);
   const lastMessage = useRef<HTMLDivElement>(null);
   const [showCallInterface, setShowCallInterface] = useState(false); // 添加通话界面状态
   const [aiStatus, setAiStatus] = useState(null);
@@ -185,6 +193,12 @@ export default function ChatWindow({
   const {registerChatMethods} = React.useContext(MethodContext) || {};
   let voiceChunks = []; // 临时存储录制的语音片段
   // 滚动事件处理，选择文件时，文件内容超出显示框时，显示左右箭头
+  const messageContainerRef = useRef<HTMLDivElement>(null);
+
+  useImperativeHandle(ref, () => ({
+    handleCallButtonClick:handleCallButtonClick
+  }))
+
   const handleScroll = () => {
     if (scrollContainerRef.current) {
       const { scrollLeft, clientWidth, scrollWidth } = scrollContainerRef.current;
@@ -1235,6 +1249,10 @@ export default function ChatWindow({
               } else {
                 handleSendMessage()
               }
+              setTimeout(() => {
+                const container = messageContainerRef.current;
+                messageContainerRef.current.scrollTop = container.scrollHeight + 72;
+              }, 200);
             }}
             onStartRecordClick={startConnectAndRecord}
             onStopRecordClick={stopRecord}
@@ -1485,7 +1503,7 @@ export default function ChatWindow({
   return (
       <div
           style={{...chat_window_style, width: width, height: "100%"}}
-          ref={ref}
+          ref={rootRef}
           className="cl-window"
       >
         {/* 添加通话界面 */}
@@ -1535,6 +1553,7 @@ export default function ChatWindow({
               <div
                   className="cl-messages_container"
                   style={isMobile ? {paddingLeft: '0', paddingRight: '0'} : {}}
+                  ref={messageContainerRef}
                   // style={{ maxWidth: '100%', minHeight:'300px', height:'700px', paddingBottom: '56px' }}
               >
                 {
@@ -1588,4 +1607,6 @@ export default function ChatWindow({
         }
       </div>
   );
-}
+})
+
+export default ChatWindow;

package/src/YtChatView/chatWidget/index.tsx

@@ -57,7 +57,8 @@ export default function ChatWidget({
   voice,
   onSmartRobotClick,
   isShowMobileInputArea,
-  isInH5Page
+  isInH5Page,
+  chatWindowRef,
 }: {
   is_enable_call:boolean,
   tags: [];
@@ -109,6 +110,7 @@ export default function ChatWidget({
   onSmartRobotClick?: Function;
   isShowMobileInputArea?: boolean;
   isInH5Page: boolean;
+  chatWindowRef?: object;
 }) {
   const [open, setOpen] = useState(start_open);
   const [messages, setMessages] = useState<ChatMessageType[]>([]);
@@ -134,6 +136,7 @@ export default function ChatWidget({
     <div style={{ position: 'relative',height:'100%' }}>
       <style dangerouslySetInnerHTML={{ __html: styles + markdownBody + yt_style + customThoughtChainStyle +  cardStyle }}></style>
       <ChatWindow
+        ref={chatWindowRef}
         is_enable_call={is_enable_call}
         tags={tags}
         getHistoryList={getHistoryList}

package/src/YtChatView/chatWidget/style.js

@@ -2186,16 +2186,21 @@ export const yt_style = `
 }
 
 .msg_operateBox {
+  max-width:750px;
+  width: 100%;
   display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
   margin-top: 5px;
   user-select: none;
 }
 
 .msg_operateBox img {
   -webkit-user-drag: none;
-  margin-right: 3px;
+  margin-right: 10px;
   cursor: pointer;
-  width: 16px;
+  width: 26px;
 }
 
 .plh_textBox {

package/src/YtChatView/mobileChatV2/index.jsx

@@ -344,6 +344,7 @@ export const MethodContext = React.createContext();
 
 export class MobileChatPageV2 extends React.Component {
   sessionUserInfo = {};
+  chatWindowRef = React.createRef();
   state = {
     historyList: [], // 历史对话列表
     sessionId: uuidv4(), // 当前激活的对话对应的sessionId
@@ -667,11 +668,24 @@ export class MobileChatPageV2 extends React.Component {
             {/*对话上边的学校标志，定位到左上角header上端*/}
             <div className={styles.mobile_nav}>
               <div className={styles.title}>{headerName}</div>
-              <div></div>
+              <div className={styles.call}>
+                {
+                    currentFlow?.is_enable_call &&
+                    <img src={"https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/kai_yuan/common/call.png"}
+                         alt="call"
+                         onClick={() => {
+                           console.log(this.chatWindowRef);
+
+                           this.chatWindowRef.current.handleCallButtonClick()
+                         }}
+                    />
+                }
+              </div>
             </div>
 
             <div className="p_toolRight">
               <ChatWidget
+                  chatWindowRef={this.chatWindowRef}
                   window_title={currentFlow?.name || title}
                   flow_id={currentFlow?.id || flowId}
                   tags={currentFlow?.keywords || tags}

package/src/YtChatView/mobileChatV2/index.module.css

@@ -264,6 +264,12 @@
   .title{
     color: #000;
     font-size: 19px;
+    line-height: 20px;
     font-weight: bold;
   }
+  .call{
+    width: 40px;
+    height: 40px;
+    margin-right: -10px;
+  }
 }