en/searchurl/bingAI/js/bing.js

   1 var chat = document.getElementById('chat');
   2 var chatTypeDiv = document.getElementById('chatTypeDiv');
   3 var docTitle = document.getElementById('docTitle');
   4 var restart_button = document.getElementById('restart');
   5 var input_text = document.getElementById('input');
   6 var send_button = document.getElementById('send');
   7 let restartNewChat = document.getElementById('restartNewChat');
   8 var thisChatType = chatTypes.balance;
   9
  10 //全局变量
  11 var talk;
  12 var returnMessage;
  13 var isSpeaking = false;
  14
  15 reSetStartChatMessage();
  16
  17 //(string)
  18 function addMyChat(message) {
  19         let bobo = document.createElement('div');
  20         bobo.style.whiteSpace = 'pre-wrap';
  21         bobo.innerText = message;
  22         bobo.classList.add('bobo');
  23         bobo.classList.add('markdown-body');
  24         let go = document.createElement('div');
  25         go.classList.add('my');
  26         go.appendChild(bobo);
  27         chat.appendChild(go);
  28 }
  29
  30 //(string)
  31 function addError(message) {
  32         let go = document.createElement('div');
  33         go.classList.add('error');
  34         go.innerHTML = message;
  35         chat.appendChild(go);
  36 }
  37
  38 let onMessageIsOKClose = false;
  39 //(json)
  40 function onMessage(json, returnMessage) {
  41         if (json.type == "close") {
  42                 isSpeakingFinish();
  43                 if (!onMessageIsOKClose) {
  44                         addError("聊天异常中断了！可能是网络问题。");
  45                 }
  46                 return;
  47         }
  48         if (json.type == 'error') {
  49                 addError("连接发生错误：" + json.mess);
  50                 return;
  51         }
  52         onMessageIsOKClose = false
  53         if (json.type == 3) {
  54                 onMessageIsOKClose = true;
  55                 returnMessage.getCatWebSocket().close(1000, 'ok');
  56         } else {
  57           localStorage.removeItem('LastChatJson');
  58           if (json.type == 1) {
  59             porserArguments(json.arguments);
  60           } else if (json.type == 2) {
  61             porserType2Item(json.item);
  62           } else {
  63             console.log(JSON.stringify(json));
  64           }
  65         }
  66 }
  67
  68
  69 //页面逻辑
  70
  71
  72 //回车键发送 ctrl+回车换行
  73 input_text.addEventListener('keydown', (event) => {
  74         if (event.key === 'Enter' && !event.altKey) {
  75                 event.preventDefault();
  76                 //调用发送消息的函数
  77                 send_button.onclick();
  78         } else if (event.key === 'Enter' && event.altKey) {
  79                 event.preventDefault();
  80                 // 插入换行符
  81                 input_text.value += "\n";
  82         }
  83 });
  84
  85 /**重置聊天框和聊天建议到初始状态 */
  86 function reSetStartChatMessage(type) {
  87   createChat(thisChatType).then((r) => {
  88     if(r.ok) talk = r.obj;
  89   });
  90         getChatHubWithMagic().then(async a => {
  91                 let t = 0;
  92                 if (a == 'repeat') {
  93                         t = await getLastChatInvocationId();
  94                 }
  95                 chat.innerHTML = `
  96                 <div class="bing">
  97                         <div class="adaptiveCardsFatherDIV">
  98                                 <div class="textBlock markdown-body">
  99                                 </div>
 100                                 <div class="throttling">
 101                                         ${t} / 0
 102                                 </div>
 103                         </div>
 104                 </div>
 105                 `;
 106         });
 107 }
 108
 109 /**正在创建聊天 */
 110 function isAskingToMagic() {
 111         isSpeaking = true;
 112         send_button.value = '施法中.';
 113 }
 114
 115 /**bing正在回复 */
 116 function isSpeakingStart(chatWithMagic, sendText) {
 117         isSpeaking = true;
 118
 119         if (sendText) {
 120                 docTitle.innerText = sendText;
 121         }
 122         send_button.value = '响应中.';
 123 }
 124
 125 /**bing回复结束 */
 126 function isSpeakingFinish() {
 127         isSpeaking = false;
 128         send_button.value = 'submit';
 129 }
 130
 131 function send(text) {
 132         if (isSpeaking) {
 133                 return;
 134         }
 135         chatTypeDiv.style.opacity = 0;
 136         addMyChat(text);
 137         if (!talk) {
 138                 isAskingToMagic();
 139                 createChat(thisChatType).then((r) => {
 140                         if (!r.ok) {
 141                                 addError(r.message);
 142                                 isSpeakingFinish();
 143                                 return;
 144                         }
 145                         talk = r.obj;
 146                         isSpeakingStart();
 147                         r = talk.sendMessage(text, onMessage);
 148                         if (!r.ok) {
 149                                 isSpeakingFinish();
 150                                 addError(r.message);
 151                                 return;
 152                         }
 153                         returnMessage = r.obj;
 154                         isSpeakingStart(r.chatWithMagic, text);
 155                 });
 156                 return;
 157         } else {
 158                 isSpeakingStart();
 159                 let r = talk.sendMessage(text, onMessage)
 160                 if (!r.ok) {
 161                         isSpeakingFinish();
 162                         addError(r.message);
 163                         return;
 164                 }
 165                 returnMessage = r.obj;
 166                 isSpeakingStart(r.chatWithMagic, text);
 167         }
 168 }
 169
 170 send_button.onclick = () => {
 171         if (isSpeaking) {
 172                 return;
 173         }
 174         let text = input_text.value;
 175         input_text.value = '';
 176         input_update_input_text_sstyle_show_update({ target: input_text });
 177         if (!text) {
 178                 alert('什么都没有输入呀！');
 179                 return;
 180         }
 181         send(text);
 182 };
 183
 184 restart_button.onclick = () => {
 185         onMessageIsOKClose = true;
 186         if (returnMessage) {
 187                 returnMessage.getCatWebSocket().close(1000, 'ok');
 188                 returnMessage = undefined;
 189         }
 190         talk = undefined;
 191         isSpeakingFinish();
 192         reSetStartChatMessage();
 193         chatTypeDiv.style.opacity = 1;
 194 };
 195
 196
 197
 198 //滚动到底部显示收聊天建议
 199
 200 // 定义一个函数处理滚动事件
 201 function handleScroll() {
 202         // 获取文档的高度和滚动距离
 203         var docHeight = document.body.scrollHeight;
 204         var scrollPos = window.pageYOffset;
 205         // 如果滚动到底部，显示元素，否则隐藏元素
 206 }
 207 // 添加滚动事件监听器
 208 window.addEventListener("scroll", handleScroll);
 209
 210
 211
 212
 213 //选择聊天类型，创造力，平衡，精准
 214 let backgroundDIV = document.getElementById('background');
 215 let chatTypeChoseCreate = document.getElementById('chatTypeChoseCreate');
 216 let chatTypeChoseBalance = document.getElementById('chatTypeChoseBalance');
 217 let chatTypeChoseAccurate = document.getElementById('chatTypeChoseAccurate');
 218 //默认平衡
 219 thisChatType = chatTypes.balance;
 220 chatTypeChoseCreate.onclick = () => {
 221         if (chatTypeDiv.style.opacity == 0) {
 222                 return;
 223         }
 224         chatTypeChoseCreate.classList.add('Chose');
 225         chatTypeChoseBalance.classList.remove('Chose');
 226         chatTypeChoseAccurate.classList.remove('Chose');
 227         thisChatType = chatTypes.create;
 228         backgroundDIV.className = 'a';
 229         reSetStartChatMessage('create');
 230 }
 231 chatTypeChoseBalance.onclick = () => {
 232         if (chatTypeDiv.style.opacity == 0) {
 233                 return;
 234         }
 235         chatTypeChoseCreate.classList.remove('Chose');
 236         chatTypeChoseBalance.classList.add('Chose');
 237         chatTypeChoseAccurate.classList.remove('Chose');
 238         thisChatType = chatTypes.balance;
 239         backgroundDIV.className = 'b';
 240         reSetStartChatMessage('balance');
 241 }
 242 chatTypeChoseAccurate.onclick = () => {
 243         if (chatTypeDiv.style.opacity == 0) {
 244                 return;
 245         }
 246         chatTypeChoseCreate.classList.remove('Chose');
 247         chatTypeChoseBalance.classList.remove('Chose');
 248         chatTypeChoseAccurate.classList.add('Chose');
 249         thisChatType = chatTypes.accurate;
 250         backgroundDIV.className = 'c';
 251         reSetStartChatMessage('accurate');
 252 }
 253
 254
 255 // "resourceTypes": [
 256 //      "main_frame",
 257 //      "sub_frame",
 258 //      "stylesheet",
 259 //      "script",
 260 //      "image",
 261 //      "font",
 262 //      "object",
 263 //      "xmlhttprequest",
 264 //      "ping",
 265 //      "csp_report",
 266 //      "media",
 267 //      "websocket",
 268 //      "webtransport",
 269 //      "webbundle",
 270 //      "other"
 271 //   ]
 272
 273
 274 //发送按钮出现逻辑
 275 function input_update_input_text_sstyle_show_update(v) {
 276         if (v.target.value) {
 277                 send_button.style.opacity = 1;
 278         } else {
 279                 send_button.style.opacity = 0;
 280         }
 281 }
 282 input_text.addEventListener("input", input_update_input_text_sstyle_show_update);
 283 input_update_input_text_sstyle_show_update({ target: input_text });
 284
 285
 286 //开始新聊天按钮逻辑，仅在聊天复用
 287 restartNewChat.onclick = async () => {
 288         localStorage.removeItem('LastChatJson');
 289         await setLastInvocationId(1);
 290         restart_button.onclick();
 291 }
 292
 293
 294