bing.js 6.7 KB

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