pcm-agents 0.3.0 → 0.3.2

package/dist/components/pcm-video-chat-modal.js

@@ -1,6 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-CgDy4pJp.js';
-import { s as sendSSERequest, a as sendHttpRequest } from './index.js';
-import { d as defineCustomElement$2 } from './p-D0s1Q-3O.js';
+import { p as proxyCustomElement, H, c as createEvent, s as sendSSERequest, a as sendHttpRequest, u as uploadFileToBackend, A as API_DOMAIN, h } from './index.js';
+import { d as defineCustomElement$2 } from './p-LkDC0SN2.js';
 
 const pcmVideoChatModalCss = ":host{display:block}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0, 0, 0, 0.5);display:flex;justify-content:center;align-items:center;overflow-y:auto;padding:20px;z-index:1000}.fullscreen-overlay{padding:0}.modal-container{background:white;border-radius:8px;width:100%;max-width:800px;display:flex;flex-direction:column;position:relative;margin:auto}.modal-container.fullscreen{width:100vw;max-width:none;height:100%;border-radius:0;margin:0;display:flex;flex-direction:column;height:100vh;max-height:100vh}.modal-container.fullscreen>div:not(.modal-header):not(.initial-upload){display:flex;flex-direction:column;flex:1;overflow:hidden;height:100%}.pc-layout{width:80%;max-width:800px;min-width:320px;min-height:400px}.mobile-layout{width:100%;height:100%;border-radius:0}@media screen and (max-width: 768px){.pc-layout{width:95%;}.modal-overlay{padding:0}.modal-container.fullscreen{height:-webkit-fill-available;max-height:-webkit-fill-available;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}.modal-container.mobile-layout{width:100%;height:100vh;max-height:100vh;min-height:100vh;border-radius:0;margin:0;display:flex;flex-direction:column}}.video-preview.placeholder{display:flex;justify-content:center;align-items:center;background:#EAEAEA}.placeholder-status{color:#00000066}.waiting-message p{margin:0;font-size:16px;color:white;font-weight:500}.recording-container{width:100%;display:flex;flex-direction:column;align-items:center}.video-area{width:100%;display:flex;flex-direction:column;align-items:center}.stop-recording-button{width:100%;height:100%;font-size:16px;background:#f44336;border-radius:6px;color:white;border:none;cursor:pointer}.stop-recording-button:hover{background:#d32f2f}.play-audio-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:4px 16px;height:50px;border-bottom:1px solid #e8e8e8;flex-shrink:0;}.header-left{display:flex;align-items:center;gap:8px}.header-icon{width:24px;height:24px}.close-button{background:transparent;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:4px}.close-button:hover{background-color:rgba(0, 0, 0, 0.04)}.close-button span{font-size:24px;line-height:1;color:#999}.close-button:hover span{color:#666}.chat-history{position:relative;flex:1;overflow-y:auto;padding:20px;scroll-behavior:smooth;min-height:200px;background:url(https://pcm-resource-1312611446.cos.ap-guangzhou.myqcloud.com/web/sdk/chat_bg.png);background-size:100%}.fullscreen .chat-history{height:auto;flex:1 1 auto}.message-input{padding:16px;border-top:1px solid #eee;display:flex;gap:8px;align-items:center}.message-input input{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:4px;outline:none;transition:border-color 0.2s ease}.message-input input:focus{border-color:#bbb}.message{margin-bottom:16px;opacity:1;transition:opacity 0.3s ease}.message-content{max-width:70%;padding:8px 12px;border-radius:8px;word-break:break-word}.message-content p{margin:0;word-break:break-word}.user-message{display:flex;justify-content:flex-end}.agent-message{display:flex;justify-content:flex-start}.user-message .message-content{background-color:#007bff;color:white}.agent-message .message-content{background-color:#f1f1f1}.message-time{font-size:12px;color:#999;margin-top:4px;display:block}.send-button{background-color:#1890ff;color:white;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-weight:500}.send-button:disabled{background-color:#ccc;cursor:not-allowed}.empty-state{display:flex;justify-content:center;align-items:center;height:100%;color:#999;text-align:center}.loading-container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:rgba(255, 255, 255, 0.98);z-index:1;opacity:1;transition:opacity 0.3s ease}.loading-container p{margin-top:16px;color:#666;font-size:14px}.loading-spinner{width:40px;height:40px;border:3px solid #f3f3f3;border-top:3px solid #1890ff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.messages-wrapper{width:100%;min-height:100%;display:flex;flex-direction:column;justify-content:flex-end}.messages-wrapper.has-overflow{justify-content:flex-start}.suggested-questions{display:flex;flex-direction:column;gap:8px;padding:16px}.suggested-question{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background-color:#f3f4f6;border-radius:4px;cursor:pointer;font-size:14px;color:#374151;transition:background-color 0.2s}.suggested-question:hover{background-color:#e5e7eb}.arrow-right{margin-left:8px}.loading-suggestions{display:flex;justify-content:center;padding:16px}.loading-spinner-small{width:20px;height:20px;border:2px solid #e5e7eb;border-top-color:#6b7280;border-radius:50%;animation:spin 1s linear infinite}.upload-button{background:transparent;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;color:#666;border-radius:4px;transition:background-color 0.2s}.upload-button:hover{background-color:rgba(0, 0, 0, 0.04)}.upload-button svg{width:20px;height:20px}.selected-file{font-size:12px;color:#666;margin-left:8px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-wrapper{flex:1;display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;padding:0 4px;background:white}.input-wrapper input{border:none;flex:1;padding:8px;outline:none}.input-wrapper:focus-within{border-color:#bbb}.file-preview{padding:8px 16px;border-top:1px solid #eee;background-color:#f9f9f9}.function-select{margin-top:2rem}.function-options{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1rem}.function-button{padding:0.5rem 1rem;border:1px solid #ddd;border-radius:4px;background:white;cursor:pointer;transition:all 0.3s ease}.function-button:hover{border-color:#1890ff;color:#1890ff}.function-button.selected{background:#1890ff;color:white;border-color:#1890ff}.recording-section{border-top:1px solid #eee;display:flex;flex-direction:column;align-items:center;padding:20px;border-radius:14px 14px 0 0;flex:0 0 auto}.recording-section .video-preview{width:100%;height:200px;max-width:400px;position:relative;margin-bottom:10px;border:1px solid #ddd;border-radius:12px;overflow:hidden}.recording-section video{width:100%;height:100%;object-fit:cover}.recording-status{position:absolute;top:10px;left:10px;background-color:rgba(0, 0, 0, 0.6);color:white;padding:4px 8px;border-radius:4px;display:flex;align-items:center;gap:5px;font-size:0.8rem;z-index:2}.recording-status .recording-dot{display:inline-block;width:10px;height:10px;background-color:red;border-radius:50%;margin-right:5px;animation:blink 1s infinite}.recording-status.warning{color:#ff4d4f;animation:blink 1s infinite}@keyframes blink{0%{opacity:1}50%{opacity:0.5}100%{opacity:1}}.recording-section .stop-recording-button{background-color:#f44336;color:white;border:none;cursor:pointer;font-weight:bold}.recording-section .stop-recording-button:hover{background-color:#d32f2f}.fullscreen{width:100vw;border-radius:0;height:100vh;display:flex;flex-direction:column;overflow-y:auto}.recording-controls{margin-top:10px;height:53px;width:100%;max-width:400px;display:flex;justify-content:center}.recording-controls .waiting-message{text-align:center;color:white;font-size:1rem;background-image:linear-gradient(100deg, #4A9FFF 0%, #1058FF 100%);border-radius:6px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.15);width:95%;display:flex;justify-content:center;align-items:center;cursor:pointer}.recording-controls .waiting-message.loading{background:#faad14}.recording-controls .waiting-message p{margin:0;font-size:16px;color:white;font-weight:500}.recording-controls .stop-recording-button{background-color:#dc3545;color:white;border:none;cursor:pointer;font-size:1rem}.recording-controls .stop-recording-button:hover{background-color:#c82333}.recording-controls .stop-recording-button.disabled{background:#ccc;cursor:not-allowed}.recording-controls .stop-recording-button.disabled:hover{background:#ccc}.progress-container{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:400px;margin-top:10px;padding:0 5px}.progress-bar-container{height:4px;background-color:#E5E5E5;border-radius:2px;overflow:hidden;margin-right:10px;width:75px}.progress-bar{height:100%;background-image:linear-gradient(111deg, #4A9FFF 0%, #1058FF 100%);border-radius:2px;transition:width 0.3s ease}.progress-text{font-size:14px;color:#666;white-space:nowrap}";
 
@@ -22,7 +21,7 @@ const VideoChatModal = /*@__PURE__*/ proxyCustomElement(class VideoChatModal ext
     /**
      * API鉴权密钥
      */
-    apiKey = '';
+    token = '';
     /**
      * 是否显示聊天模态框
      */
@@ -52,7 +51,7 @@ const VideoChatModal = /*@__PURE__*/ proxyCustomElement(class VideoChatModal ext
      */
     isNeedClose = true;
     /**
-     * 会话ID
+     * 会话ID，传入继续对话，否则创建新会话
      */
     conversationId;
     /**
@@ -74,7 +73,7 @@ const VideoChatModal = /*@__PURE__*/ proxyCustomElement(class VideoChatModal ext
     // 添加新的 Event
     streamComplete;
     /**
-     * 默认查询文本
+     * 首次对话提问文本
      */
     defaultQuery = '';
     // 添加新的状态
@@ -122,7 +121,7 @@ const VideoChatModal = /*@__PURE__*/ proxyCustomElement(class VideoChatModal ext
     countdownWarningTime = 30;
     showCountdownWarning = false;
     /**
-     * 是否以全屏模式打开
+     * 是否以全屏模式打开，移动端建议设置为true
      */
     fullscreen = false;
     // 添加新的状态来跟踪视频上传
@@ -203,6 +202,7 @@ const VideoChatModal = /*@__PURE__*/ proxyCustomElement(class VideoChatModal ext
             response_mode: 'streaming',
             conversation_id: this.conversationId,
             query: queryText,
+            bot_id: "3022316191018903",
             inputs: {
                 id: this.resumeId
             }
@@ -212,10 +212,10 @@ const VideoChatModal = /*@__PURE__*/ proxyCustomElement(class VideoChatModal ext
             requestData.inputs.video_url = videoUrl;
         }
         await sendSSERequest({
-            url: `https://pcm_api.ylzhaopin.com/external/v1/chat/chat-messages`,
+            url: `/sdk/v1/chat/chat-messages`,
             method: 'POST',
             headers: {
-                'authorization': 'Bearer ' + this.apiKey
+                'authorization': 'Bearer ' + this.token
             },
             data: requestData,
             onMessage: (data) => {
@@ -339,57 +339,45 @@ const VideoChatModal = /*@__PURE__*/ proxyCustomElement(class VideoChatModal ext
         this.isLoadingHistory = true;
         console.log('加载历史消息...');
         try {
-            await sendHttpRequest({
-                url: `https://pcm_api.ylzhaopin.com/external/v1/chat/messages`,
+            const result = await sendHttpRequest({
+                url: '/sdk/v1/chat/messages',
                 method: 'GET',
                 headers: {
-                    'authorization': 'Bearer ' + this.apiKey
+                    'authorization': 'Bearer ' + this.token
                 },
                 data: {
                     conversation_id: this.conversationId,
+                    bot_id: "3022316191018903",
                     limit: 20
-                },
-                onMessage: (data) => {
-                    if (data.data) {
-                        const historyData = data.data || [];
-                        const formattedMessages = historyData.map(msg => {
-                            const time = new Date(msg.created_at * 1000);
-                            const hours = time.getHours().toString().padStart(2, '0');
-                            const minutes = time.getMinutes().toString().padStart(2, '0');
-                            const timeStr = `${hours}:${minutes}`;
-                            // 创建新的消息对象，不包含 inputs 字段
-                            const { inputs, ...msgWithoutInputs } = msg;
-                            return {
-                                ...msgWithoutInputs,
-                                time: timeStr,
-                                isStreaming: false,
-                                status: msg.status === 'error' ? 'error' : 'normal'
-                            };
-                        });
-                        this.messages = formattedMessages;
-                        this.isLoadingHistory = false;
-                        requestAnimationFrame(() => {
-                            this.shouldAutoScroll = true;
-                            this.scrollToBottom();
-                        });
-                    }
-                    else {
-                        this.isLoadingHistory = false;
-                    }
-                },
-                onError: (error) => {
-                    console.error('加载历史消息失败:', error);
-                    alert(error instanceof Error ? error.message : '加载历史消息失败，请刷新重试');
-                    this.isLoadingHistory = false;
-                },
-                onComplete: () => {
-                    this.isLoadingHistory = false;
                 }
             });
+            if (result.success && result.data) {
+                const historyData = result.data.data;
+                const formattedMessages = historyData.map(msg => {
+                    const time = new Date(msg.created_at * 1000);
+                    const hours = time.getHours().toString().padStart(2, '0');
+                    const minutes = time.getMinutes().toString().padStart(2, '0');
+                    const timeStr = `${hours}:${minutes}`;
+                    const { inputs, ...msgWithoutInputs } = msg;
+                    return {
+                        ...msgWithoutInputs,
+                        time: timeStr,
+                        isStreaming: false,
+                        status: msg.status === 'error' ? 'error' : 'normal'
+                    };
+                });
+                this.messages = formattedMessages;
+                requestAnimationFrame(() => {
+                    this.shouldAutoScroll = true;
+                    this.scrollToBottom();
+                });
+            }
         }
         catch (error) {
             console.error('加载历史消息失败:', error);
             alert(error instanceof Error ? error.message : '加载历史消息失败，请刷新重试');
+        }
+        finally {
             this.isLoadingHistory = false;
         }
     }
@@ -660,32 +648,29 @@ const VideoChatModal = /*@__PURE__*/ proxyCustomElement(class VideoChatModal ext
             this.videoRef = null;
         }
     }
-    // 上传录制的视频
+    // 修改上传录制的视频方法
     async uploadRecordedVideo() {
         if (!this.recordedBlob)
             return;
         try {
-            this.isUploadingVideo = true; // 开始上传时设置状态
-            this.showRecordingUI = false; // 隐藏视频预览
+            this.isUploadingVideo = true;
+            this.showRecordingUI = false;
             // 根据Blob类型确定文件扩展名
             const fileExtension = this.recordedBlob.type.includes('webm') ? 'webm' : 'mp4';
             const fileName = `answer.${fileExtension}`;
-            const formData = new FormData();
-            formData.append('file', this.recordedBlob, fileName);
-            const response = await fetch('https://pcm_api.ylzhaopin.com/external/v1/files/upload', {
-                method: 'POST',
-                headers: {
-                    'authorization': 'Bearer ' + this.apiKey
-                },
-                body: formData
+            // 创建File对象
+            const file = new File([this.recordedBlob], fileName, { type: this.recordedBlob.type });
+            // 使用uploadFileToBackend上传文件
+            const uploadResult = await uploadFileToBackend(file, {
+                'authorization': 'Bearer ' + this.token
             });
-            const result = await response.json();
-            console.log('视频上传结果:', result);
-            if (result && result.cos_key) {
+            console.log('视频上传结果:', uploadResult);
+            // 使用 cos_key 作为视频标识符
+            if (uploadResult.cos_key) {
                 // 调用音频转文字API
-                const transcriptionText = await this.convertAudioToText(result.cos_key);
+                const transcriptionText = await this.convertAudioToText(uploadResult.cos_key);
                 // 发送转换后的文本和视频URL到下一个请求
-                await this.sendMessageToAPI(transcriptionText || "下一题", result.cos_key);
+                await this.sendMessageToAPI(transcriptionText || "下一题", uploadResult.cos_key);
             }
             else {
                 throw new Error('视频上传失败');
@@ -700,43 +685,32 @@ const VideoChatModal = /*@__PURE__*/ proxyCustomElement(class VideoChatModal ext
             });
         }
         finally {
-            this.isUploadingVideo = false; // 上传完成后重置状态
+            this.isUploadingVideo = false;
             this.showRecordingUI = false;
             this.recordedBlob = null;
         }
     }
-    // 修改音频转文字方法
+    // 修改音频转文字方法，使用 cos_key
     async convertAudioToText(cosKey) {
         try {
-            // 创建一个Promise来处理响应
-            return new Promise((resolve, reject) => {
-                sendHttpRequest({
-                    url: `https://pcm_api.ylzhaopin.com/external/v1/tts/audio_to_text`,
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'authorization': 'Bearer ' + this.apiKey
-                    },
-                    data: {
-                        cos_key: cosKey
-                    },
-                    onMessage: (data) => {
-                        // 检查返回结果中是否包含转换后的文本
-                        if (data && data.text) {
-                            console.log('转换后的文本:', data.text);
-                            resolve(data.text);
-                        }
-                        else {
-                            console.warn('音频转文字返回结果格式不正确');
-                            resolve(null);
-                        }
-                    },
-                    onError: (error) => {
-                        console.error('音频转文字请求失败:', error);
-                        reject(error);
-                    }
-                });
+            const result = await sendHttpRequest({
+                url: '/sdk/v1/tts/audio_to_text',
+                method: 'POST',
+                headers: {
+                    'authorization': 'Bearer ' + this.token
+                },
+                data: {
+                    cos_key: cosKey
+                }
             });
+            if (result.success && result.data?.text) {
+                console.log('转换后的文本:', result.data.text);
+                return result.data.text;
+            }
+            else {
+                console.warn('音频转文字返回结果格式不正确');
+                return null;
+            }
         }
         catch (error) {
             console.error('音频转文字错误:', error);
@@ -753,6 +727,7 @@ const VideoChatModal = /*@__PURE__*/ proxyCustomElement(class VideoChatModal ext
             response_mode: 'streaming',
             conversation_id: this.conversationId,
             query: queryText,
+            bot_id: "3022316191018903",
             inputs: {
                 id: this.resumeId
             }
@@ -763,10 +738,10 @@ const VideoChatModal = /*@__PURE__*/ proxyCustomElement(class VideoChatModal ext
         }
         // 不使用 await，直接发送请求
         sendSSERequest({
-            url: `https://pcm_api.ylzhaopin.com/external/v1/chat/chat-messages`,
+            url: `/sdk/v1/chat/chat-messages`,
             method: 'POST',
             headers: {
-                'authorization': 'Bearer ' + this.apiKey
+                'authorization': 'Bearer ' + this.token
             },
             data: requestData,
         }).catch(error => {
@@ -776,11 +751,11 @@ const VideoChatModal = /*@__PURE__*/ proxyCustomElement(class VideoChatModal ext
     // 添加TTS合成音频的方法
     async synthesizeAudio(text) {
         try {
-            const response = await fetch('https://pcm_api.ylzhaopin.com/external/v1/tts/synthesize_audio', {
+            const response = await fetch(`${API_DOMAIN}/sdk/v1/tts/synthesize_audio`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
-                    'authorization': 'Bearer ' + this.apiKey
+                    'authorization': 'Bearer ' + this.token
                 },
                 body: JSON.stringify({ text })
             });
@@ -922,7 +897,7 @@ const VideoChatModal = /*@__PURE__*/ proxyCustomElement(class VideoChatModal ext
     static get style() { return pcmVideoChatModalCss; }
 }, [1, "pcm-video-chat-modal", {
         "modalTitle": [1, "modal-title"],
-        "apiKey": [1, "api-key"],
+        "token": [1],
         "isOpen": [1028, "is-open"],
         "icon": [1],
         "zIndex": [2, "z-index"],