{"id":123501,"date":"2026-11-07T14:49:39","date_gmt":"2026-11-07T06:49:39","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/123501.html"},"modified":"2026-11-07T14:49:39","modified_gmt":"2026-11-07T06:49:39","slug":"%e3%80%90ai%e5%a4%a7%e6%a8%a1%e5%9e%8b%e6%8e%a5%e5%85%a5sdk%e3%80%91%e5%89%8d%e7%ab%af%e9%a1%b5%e9%9d%a2%e6%8f%90%e7%a4%ba%e8%af%8d","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/123501.html","title":{"rendered":"\u3010AI\u5927\u6a21\u578b\u63a5\u5165SDK\u3011\u524d\u7aef\u9875\u9762\u63d0\u793a\u8bcd"},"content":{"rendered":"<p> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/11\/20261107064937-6aeeca0161a84.png\" width=\"200\" height=\"200\" alt=\"\u5934\u50cf\" \/> <\/p>\n<p> <font color=\"#c0392b\">&#x1f3ac; \u4e2a\u4eba\u4e3b\u9875&#xff1a;\u827e\u8389\u4e1d\u52aa\u529b\u7ec3\u5251<\/font><\/p>\n<p> <font color=\"#3498db\">\u2744\u4e13\u680f\u4f20\u9001\u95e8&#xff1a;\u300aC\u8bed\u8a00\u300b\u300a\u6570\u636e\u7ed3\u6784\u4e0e\u7b97\u6cd5\u300b\u300aC\/C&#043;&#043;\u5e72\u8d27\u5206\u4eab&amp;\u5b66\u4e60\u8fc7\u7a0b\u8bb0\u5f55\u300b \u300aLinux\u64cd\u4f5c\u7cfb\u7edf\u7f16\u7a0b\u8be6\u89e3\u300b\u300a\u7b14\u8bd5\/\u9762\u8bd5\u5e38\u89c1\u7b97\u6cd5&#xff1a;\u4ece\u57fa\u7840\u5230\u8fdb\u9636\u300b\u300aPython\u5e72\u8d27\u5206\u4eab\u300b<\/font><\/p>\n<p> <font color=\"7B68EE\" size=\"4\">\u2b50\ufe0f\u4e3a\u5929\u5730\u7acb\u5fc3&#xff0c;\u4e3a\u751f\u6c11\u7acb\u547d&#xff0c;\u4e3a\u5f80\u5723\u7ee7\u7edd\u5b66&#xff0c;\u4e3a\u4e07\u4e16\u5f00\u592a\u5e73 <\/font><\/p>\n<hr \/>\n<p><font color=\"#c0392b\" size=\"4\">&#x1f3ac; \u827e\u8389\u4e1d\u7684\u7b80\u4ecb&#xff1a;<\/font><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/11\/20261107064937-6aeeca01af204.gif\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><\/p>\n<hr \/>\n<h4>\u6587\u7ae0\u76ee\u5f55<\/h4>\n<ul>\n<li>1 ~&gt; AI \u804a\u5929\u52a9\u624b\u524d\u7aef\u5de5\u7a0b\u9700\u6c42\u4e0e\u5b9e\u73b0<\/li>\n<li>\n<ul>\n<li>1.1 \u9879\u76ee\u80cc\u666f<\/li>\n<li>1.2 \u540e\u7aef\u63a5\u53e3\u5b8c\u6574\u5b9a\u4e49<\/li>\n<li>\n<ul>\n<li>1.2.1 \u83b7\u53d6\u4f1a\u8bdd\u5217\u8868 &#096;GET \/api\/sessions&#096;<\/li>\n<li>1.2.2 \u83b7\u53d6\u53ef\u7528\u6a21\u578b &#096;GET \/api\/models&#096;<\/li>\n<li>1.2.3 \u521b\u5efa\u65b0\u4f1a\u8bdd &#096;POST \/api\/session&#096;<\/li>\n<li>1.2.4 \u83b7\u53d6\u4f1a\u8bdd\u5386\u53f2\u6d88\u606f &#096;GET \/api\/session\/${session_id}\/history&#096;<\/li>\n<li>1.2.5 \u53d1\u9001\u6d88\u606f &#8211; \u6d41\u5f0f SSE \u54cd\u5e94 &#096;POST \/api\/message\/async&#096;<\/li>\n<li>1.2.6 \u5220\u9664\u4f1a\u8bdd &#096;DELETE \/api\/session\/${session_id}&#096;<\/li>\n<\/ul>\n<\/li>\n<li>1.3 \u9875\u9762\u529f\u80fd\u9700\u6c42\u89c4\u7ea6<\/li>\n<li>\n<ul>\n<li>1.3.1 \u9875\u9762\u5e03\u5c40<\/li>\n<li>1.3.2 \u9875\u9762\u751f\u547d\u5468\u671f\u884c\u4e3a<\/li>\n<li>1.3.3 \u5feb\u6377\u952e<\/li>\n<\/ul>\n<\/li>\n<li>2 ~&gt; \u5b8c\u6574\u524d\u7aef\u5b9e\u73b0\u4ee3\u7801<\/li>\n<li>\n<ul>\n<li>2.1 index.html<\/li>\n<li>2.2 style.css<\/li>\n<li>2.3 app.js<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>3 ~&gt; Trae AI \u751f\u6210\u524d\u7aef\u9875\u9762\u63d0\u793a\u8bcd\u5de5\u7a0b<\/li>\n<li>\n<ul>\n<li>3.1 \u63d0\u793a\u8bcd\u7f16\u5199\u539f\u5219<\/li>\n<li>3.2 \u540e\u7aef C&#043;&#043; httplib \u9759\u6001\u8d44\u6e90\u6302\u8f7d\u5173\u952e\u4ee3\u7801\u7247\u6bb5<\/li>\n<\/ul>\n<\/li>\n<li>4 ~&gt; \u90e8\u7f72\u8c03\u8bd5\u6ce8\u610f\u4e8b\u9879<\/li>\n<li>\n<ul>\n<li>4.1 \u8de8\u57df\u95ee\u9898<\/li>\n<li>4.2 SSE \u6d41\u5f0f\u89e3\u6790<\/li>\n<li>4.3 XSS \u5b89\u5168\u9632\u62a4<\/li>\n<li>4.4 \u7b2c\u4e09\u65b9 CDN \u4f9d\u8d56<\/li>\n<li>4.5 \u8f93\u5165\u6821\u9a8c<\/li>\n<\/ul>\n<\/li>\n<li>\u7ed3\u5c3e<\/li>\n<\/ul>\n<hr \/>\n<p><img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/11\/20261107064938-6aeeca020f452.gif\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><\/p>\n<hr \/>\n<h2>1 ~&gt; AI \u804a\u5929\u52a9\u624b\u524d\u7aef\u5de5\u7a0b\u9700\u6c42\u4e0e\u5b9e\u73b0<\/h2>\n<h3>1.1 \u9879\u76ee\u80cc\u666f<\/h3>\n<ul>\n<li>\u540e\u7aef\u670d\u52a1\u5730\u5740&#xff1a;192.168.100.238:8080&#xff0c;C&#043;&#043; httplib \u5b9e\u73b0\u804a\u5929\u670d\u52a1<\/li>\n<li>\u9759\u6001\u8d44\u6e90\u6302\u8f7d&#xff1a;\u670d\u52a1\u5c06.\/www\u76ee\u5f55\u6302\u8f7d\u4e3a\/&#xff0c;\u8bbf\u95eeip:port \/ ip:port\/index.html\u52a0\u8f7d\u524d\u7aef\u9875\u9762<\/li>\n<li>\u6280\u672f\u9009\u578b&#xff1a;HTML &#043; CSS &#043; JavaScript&#xff1b;\u5f15\u5165 marked \u89e3\u6790 Markdown&#xff0c;highlight.js \u5b9e\u73b0\u4ee3\u7801\u8bed\u6cd5\u9ad8\u4eae<\/li>\n<li>\u4ee3\u7801\u5206\u79bb\u539f\u5219&#xff1a;HTML\u3001CSS\u3001JS \u62c6\u5206\u72ec\u7acb\u6587\u4ef6&#xff0c;\u964d\u4f4e\u5c40\u90e8\u4fee\u6539\u5e26\u6765\u7684\u7275\u4e00\u53d1\u800c\u52a8\u5168\u8eab\u7684\u526f\u4f5c\u7528&#xff0c;\u4fbf\u4e8e\u63a5\u53e3\u8c03\u8bd5\u3001\u529f\u80fd\u8fed\u4ee3\u7ef4\u62a4<\/li>\n<li>\u9875\u9762\u539f\u578b\u53c2\u8003&#xff1a;DeepSeek \u7f51\u9875\u7248\u804a\u5929\u754c\u9762<\/li>\n<\/ul>\n<h3>1.2 \u540e\u7aef\u63a5\u53e3\u5b8c\u6574\u5b9a\u4e49<\/h3>\n<h4>1.2.1 \u83b7\u53d6\u4f1a\u8bdd\u5217\u8868 GET \/api\/sessions<\/h4>\n<ul>\n<li>HTTP \u72b6\u6001\u7801&#xff1a;200 OK<\/li>\n<li>\u54cd\u5e94 JSON \u7ed3\u6784<\/li>\n<\/ul>\n<p><span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token string-property property\">&#034;success&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token string-property property\">&#034;message&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;string&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token string-property property\">&#034;data&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n    <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token string-property property\">&#034;id&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;string&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      <span class=\"token string-property property\">&#034;model&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;string&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      <span class=\"token string-property property\">&#034;created_at&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;int64_t&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      <span class=\"token string-property property\">&#034;updated_at&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;int64_t&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      <span class=\"token string-property property\">&#034;message_count&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;int&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      <span class=\"token string-property property\">&#034;first_user_message&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;string&#034;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">]<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>1.2.2 \u83b7\u53d6\u53ef\u7528\u6a21\u578b GET \/api\/models<\/h4>\n<ul>\n<li>HTTP \u72b6\u6001\u7801&#xff1a;200 OK<\/li>\n<li>\u54cd\u5e94 JSON \u7ed3\u6784<\/li>\n<\/ul>\n<p><span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token string-property property\">&#034;success&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token string-property property\">&#034;message&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;string&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token string-property property\">&#034;data&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n    <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token string-property property\">&#034;name&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;string&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      <span class=\"token string-property property\">&#034;desc&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;string&#034;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">]<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>1.2.3 \u521b\u5efa\u65b0\u4f1a\u8bdd POST \/api\/session<\/h4>\n<ul>\n<li>\u8bf7\u6c42\u4f53<\/li>\n<\/ul>\n<p><span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token string-property property\">&#034;model&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;string&#034;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<ul>\n<li>HTTP \u72b6\u6001\u7801&#xff1a;200 OK<\/li>\n<li>\u54cd\u5e94 JSON \u7ed3\u6784<\/li>\n<\/ul>\n<p><span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token string-property property\">&#034;success&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token string-property property\">&#034;message&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;string&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token string-property property\">&#034;data&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token string-property property\">&#034;sessionid&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;string&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token string-property property\">&#034;model&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;string&#034;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>1.2.4 \u83b7\u53d6\u4f1a\u8bdd\u5386\u53f2\u6d88\u606f GET \/api\/session\/${session_id}\/history<\/h4>\n<ul>\n<li>HTTP \u72b6\u6001\u7801&#xff1a;200 OK<\/li>\n<li>\u54cd\u5e94 JSON \u7ed3\u6784<\/li>\n<\/ul>\n<p><span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token string-property property\">&#034;success&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token string-property property\">&#034;message&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;string&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token string-property property\">&#034;data&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n    <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token string-property property\">&#034;id&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;string&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      <span class=\"token string-property property\">&#034;role&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;string&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      <span class=\"token string-property property\">&#034;content&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;string&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      <span class=\"token string-property property\">&#034;timestamp&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">]<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>1.2.5 \u53d1\u9001\u6d88\u606f &#8211; \u6d41\u5f0f SSE \u54cd\u5e94 POST \/api\/message\/async<\/h4>\n<ul>\n<li>\u8bf7\u6c42\u4f53<\/li>\n<\/ul>\n<p><span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token string-property property\">&#034;session_id&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;string&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token string-property property\">&#034;message&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;string&#034;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<ul>\n<li>HTTP \u72b6\u6001\u7801&#xff1a;200 OK<\/li>\n<li>SSE \u6d41\u5f0f\u8fd4\u56de\u683c\u5f0f&#xff1a;<\/li>\n<\/ul>\n<p>data: \u6587\u672c\u6570\u636e\\\\n\\\\n<br \/>\ndata: \u6587\u672c\u6570\u636e\\\\n\\\\n<br \/>\ndata: [DONE]\\\\n\\\\n<\/p>\n<ul>\n<li>[DONE]\u6807\u8bb0\u6d41\u5f0f\u8f93\u51fa\u7ed3\u675f<\/li>\n<\/ul>\n<h4>1.2.6 \u5220\u9664\u4f1a\u8bdd DELETE \/api\/session\/${session_id}<\/h4>\n<ul>\n<li>HTTP \u72b6\u6001\u7801&#xff1a;200 OK<\/li>\n<li>\u54cd\u5e94 JSON \u7ed3\u6784<\/li>\n<\/ul>\n<p><span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token string-property property\">&#034;success&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token string-property property\">&#034;message&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;string&#034;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h3>1.3 \u9875\u9762\u529f\u80fd\u9700\u6c42\u89c4\u7ea6<\/h3>\n<h4>1.3.1 \u9875\u9762\u5e03\u5c40<\/h4>\n<li>\u9875\u9762\u5de6\u4e0a\u89d2&#xff1a;AI Chat \u56fe\u6807 &#043; AI\u804a\u5929\u52a9\u624b\u6587\u5b57 &#043;\u3010\u65b0\u5efa\u5bf9\u8bdd\u3011\u6309\u94ae<\/li>\n<li>\u5de6\u4fa7\u4fa7\u8fb9\u680f&#xff1a;\u5386\u53f2\u4f1a\u8bdd\u5217\u8868\n<ul>\n<li>\u6bcf\u6761\u4f1a\u8bdd\u5c55\u793a&#xff1a;\u4f1a\u8bdd\u66f4\u65b0\u65f6\u95f4\u3001\u4f1a\u8bdd\u7b2c\u4e00\u6761\u6d88\u606f\u3001\u6a21\u578b\u540d\u79f0\u3001\u5220\u9664\u6309\u94ae&#xff08;\u6309\u94ae\u6587\u672c\u2026&#xff09;<\/li>\n<li>\u70b9\u51fb\u5220\u9664\u6309\u94ae\u8c03\u7528\u540e\u7aef\u63a5\u53e3\u5220\u9664\u670d\u52a1\u5668\u5bf9\u5e94 session \u4f1a\u8bdd<\/li>\n<\/ul>\n<\/li>\n<li>\u53f3\u4fa7\u4e3b\u533a\u57df\u9ed8\u8ba4\u6b22\u8fce\u9875\u9762\n<ul>\n<li>\u5c55\u793a\u56fe\u6807 &#043; \u63d0\u793a\u6587\u672c&#xff1a;\u9009\u62e9\u4e00\u4e2a\u5386\u53f2\u5bf9\u8bdd\u7ee7\u7eed&#xff0c;\u6216\u521b\u5efa\u65b0\u7684\u5bf9\u8bdd&#xff0c;\u5f00\u542f\u60a8\u7684AI\u4e4b\u65c5<\/li>\n<li>\u9644\u5e26\u3010\u65b0\u5efa\u5bf9\u8bdd\u3011\u6309\u94ae<\/li>\n<\/ul>\n<\/li>\n<li>\u4f1a\u8bdd\u521b\u5efa\u6210\u529f\u540e\u53f3\u4fa7\u4e3b\u533a\u57df\n<ul>\n<li>85% \u9ad8\u5ea6\u4e3a\u804a\u5929\u6d88\u606f\u663e\u793a\u533a\u57df&#xff1b;\u6a21\u578b\u6d88\u606f\u5c45\u5de6\u4fa7\u5c55\u793a&#xff0c;\u7528\u6237\u6d88\u606f\u5c45\u53f3\u4fa7\u5c55\u793a&#xff1b;\u6bcf\u6761\u6d88\u606f\u9644\u5e26\u6536\u53d1\u65f6\u95f4<\/li>\n<li>\u5e95\u90e8\u8f93\u5165\u7f16\u8f91\u6846&#xff1a;\u5360\u4f4d\u63d0\u793a\u8bf7\u8f93\u5165\u60a8\u7684\u6d88\u606f&#8230; (Enter\u53d1\u9001,Shift&#043;Enter\u6362\u884c)&#xff0c;\u6700\u5927\u8f93\u5165 2000 \u5b57\u7b26&#xff1b;\u53f3\u4fa7\u53d1\u9001\u6309\u94ae&#xff1b;\u4e0b\u65b9\u5c55\u793a\u5f53\u524d\u5b57\u6570\/2000\u5b57\u6570\u7edf\u8ba1<\/li>\n<\/ul>\n<\/li>\n<li>\u6a21\u578b\u9009\u62e9\u5f39\u7a97\n<ul>\n<li>\u70b9\u51fb\u65b0\u5efa\u5bf9\u8bdd\u89e6\u53d1\u5f39\u7a97&#xff0c;\u7f51\u683c\u5e03\u5c40\u6e32\u67d3\u5168\u90e8\u53ef\u7528\u6a21\u578b&#xff0c;\u5355\u9009\u9009\u62e9\u6a21\u578b&#xff0c;\u5c55\u793a\u6a21\u578b\u540d\u79f0 &#043; \u63cf\u8ff0<\/li>\n<li>\u3010\u786e\u8ba4\u521b\u5efa\u5bf9\u8bdd\u3011&#xff1a;\u5173\u95ed\u5f39\u7a97&#xff0c;\u5411\u540e\u7aef\u53d1\u8d77\u521b\u5efa\u4f1a\u8bdd\u8bf7\u6c42<\/li>\n<li>\u3010\u53d6\u6d88\u3011&#xff1a;\u76f4\u63a5\u5173\u95ed\u5f39\u7a97&#xff0c;\u4e0d\u521b\u5efa\u4f1a\u8bdd<\/li>\n<li>\u540c\u4e00\u65f6\u95f4\u4ec5\u5141\u8bb8\u9009\u4e2d\u4e00\u4e2a\u6a21\u578b<\/li>\n<\/ul>\n<\/li>\n<h4>1.3.2 \u9875\u9762\u751f\u547d\u5468\u671f\u884c\u4e3a<\/h4>\n<li>\u6d4f\u89c8\u5668\u52a0\u8f7dindex.html\u5b8c\u6210\u540e&#xff0c;\u81ea\u52a8\u8bf7\u6c42\u540e\u7aef\u83b7\u53d6\u4f1a\u8bdd\u5217\u8868&#xff0c;\u6e32\u67d3\u5de6\u4fa7\u4f1a\u8bdd\u680f<\/li>\n<li>\u4e24\u5904\u65b0\u5efa\u5bf9\u8bdd\u6309\u94ae&#xff08;\u5de6\u4e0a\u89d2\u3001\u6b22\u8fce\u9875&#xff09;&#xff1a;\u5148\u8bf7\u6c42\u540e\u7aef\u83b7\u53d6\u6a21\u578b\u5217\u8868&#xff0c;\u7528\u6237\u9009\u5b9a\u6a21\u578b\u786e\u8ba4\u540e\u521b\u5efa\u4f1a\u8bdd&#xff0c;\u4f1a\u8bdd\u52a0\u5165\u5de6\u4fa7\u4f1a\u8bdd\u5217\u8868&#xff0c;\u8fdb\u5165\u804a\u5929\u4f1a\u8bdd\u754c\u9762<\/li>\n<li>SSE \u6d41\u5f0f\u6d88\u606f\u5904\u7406\n<ul>\n<li>\u6d41\u5f0f\u8fd4\u56de\u5185\u5bb9\u505a Markdown \u89e3\u6790\u6e32\u67d3<\/li>\n<li>\u4ee3\u7801\u5757\u542f\u7528\u8bed\u6cd5\u9ad8\u4eae&#xff0c;\u4ee3\u7801\u5757\u652f\u6301\u4e00\u952e\u590d\u5236<\/li>\n<li>\u5904\u7406\u5927\u91cf\u6d41\u5f0f\u5206\u7247&#xff0c;\u9632\u6b62\u9875\u9762 DOM \u53d8\u5f62\u4e71\u7801<\/li>\n<\/ul>\n<\/li>\n<h4>1.3.3 \u5feb\u6377\u952e<\/h4>\n<ul>\n<li>Enter&#xff1a;\u53d1\u9001\u6d88\u606f<\/li>\n<li>Shift &#043; Enter&#xff1a;\u8f93\u5165\u6846\u5185\u6362\u884c<\/li>\n<\/ul>\n<hr \/>\n<h3>2 ~&gt; \u5b8c\u6574\u524d\u7aef\u5b9e\u73b0\u4ee3\u7801<\/h3>\n<p>\u6587\u4ef6\u76ee\u5f55&#xff1a;www\/\u76ee\u5f55\u4e0b\u5b58\u653e\u4e09\u4e2a\u6587\u4ef6&#xff1a;index.html\u3001style.css\u3001app.js&#xff1b;\u540e\u7aef httplib \u5c06.\/www\u6302\u8f7d\u4e3a web \u6839\u8def\u5f84<\/p>\n<h4>2.1 index.html<\/h4>\n<p><span class=\"token doctype\"><span class=\"token punctuation\">&lt;!<\/span><span class=\"token doctype-tag\">DOCTYPE<\/span> <span class=\"token name\">html<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>html<\/span> <span class=\"token attr-name\">lang<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>zh-CN<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>head<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>meta<\/span> <span class=\"token attr-name\">charset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>UTF-8<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>meta<\/span> <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>viewport<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">content<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>width&#061;device-width, initial-scale&#061;1.0<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>title<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>AI\u804a\u5929\u52a9\u624b<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>title<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>stylesheet<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>style.css<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n    <span class=\"token comment\">&lt;!&#8211; Markdown\u89e3\u6790\u5e93 marked &#8211;&gt;<\/span><br \/>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>https:\/\/cdn.jsdelivr.net\/npm\/marked\/marked.min.js<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script\"><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n    <span class=\"token comment\">&lt;!&#8211; highlight.js \u4ee3\u7801\u9ad8\u4eae &#8211;&gt;<\/span><br \/>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>stylesheet<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>https:\/\/cdn.jsdelivr.net\/npm\/highlight.js&#064;11.9.0\/styles\/github.min.css<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>https:\/\/cdn.jsdelivr.net\/npm\/highlight.js&#064;11.9.0\/lib\/core.min.js<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script\"><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>https:\/\/cdn.jsdelivr.net\/npm\/highlight.js&#064;11.9.0\/lib\/languages\/javascript.min.js<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script\"><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>https:\/\/cdn.jsdelivr.net\/npm\/highlight.js&#064;11.9.0\/lib\/languages\/python.min.js<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script\"><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>https:\/\/cdn.jsdelivr.net\/npm\/highlight.js&#064;11.9.0\/lib\/languages\/cpp.min.js<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script\"><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>https:\/\/cdn.jsdelivr.net\/npm\/highlight.js&#064;11.9.0\/lib\/languages\/css.min.js<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script\"><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>https:\/\/cdn.jsdelivr.net\/npm\/highlight.js&#064;11.9.0\/lib\/languages\/bash.min.js<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script\"><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>head<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>body<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>app<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n    <span class=\"token comment\">&lt;!&#8211; \u5de6\u4fa7\u4f1a\u8bdd\u4fa7\u8fb9\u680f &#8211;&gt;<\/span><br \/>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>aside<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>sidebar<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>sidebar-header<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>logo<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>svg<\/span> <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>24<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>24<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">viewBox<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>0 0 24 24<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">fill<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>none<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">stroke<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>currentColor<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">stroke-width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>2<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>path<\/span> <span class=\"token attr-name\">d<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>path<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>svg<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>span<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>title<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>AI\u804a\u5929\u52a9\u624b<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>span<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>newChatBtn<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>new-chat-btn<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">title<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>\u65b0\u5efa\u5bf9\u8bdd<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>svg<\/span> <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>16<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>16<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">viewBox<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>0 0 24 24<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">fill<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>none<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">stroke<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>currentColor<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">stroke-width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>2<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>line<\/span> <span class=\"token attr-name\">x1<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>12<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">y1<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>5<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">x2<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>12<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">y2<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>19<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>line<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>line<\/span> <span class=\"token attr-name\">x1<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>5<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">y1<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>12<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">x2<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>19<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">y2<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>12<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>line<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>svg<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                \u65b0\u5efa\u5bf9\u8bdd<br \/>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>sessionList<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>session-list<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>loading<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\u52a0\u8f7d\u4e2d&#8230;<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>aside<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/p>\n<p>    <span class=\"token comment\">&lt;!&#8211; \u4e3b\u5185\u5bb9\u533a\u57df &#8211;&gt;<\/span><br \/>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>main-content<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n        <span class=\"token comment\">&lt;!&#8211; \u6b22\u8fce\u9875\u9762 &#8211;&gt;<\/span><br \/>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>welcomeSection<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>welcome-section<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>welcome-icon<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>svg<\/span> <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>64<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>64<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">viewBox<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>0 0 24 24<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">fill<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>none<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">stroke<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>currentColor<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">stroke-width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>1.5<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>path<\/span> <span class=\"token attr-name\">d<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>path<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>svg<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>welcome-text<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\u9009\u62e9\u4e00\u4e2a\u5386\u53f2\u5bf9\u8bdd\u7ee7\u7eed,\u6216\u521b\u5efa\u65b0\u7684\u5bf9\u8bdd,\u5f00\u542f\u60a8\u7684AI\u4e4b\u65c5<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>welcomeNewChatBtn<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>primary-btn<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\u65b0\u5efa\u5bf9\u8bdd<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/p>\n<p>        <span class=\"token comment\">&lt;!&#8211; \u804a\u5929\u4f1a\u8bdd\u533a\u57df &#8211;&gt;<\/span><br \/>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>chatSection<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>chat-section<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token special-attr\"><span class=\"token attr-name\">style<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span><span class=\"token value css language-css\"><span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span><\/span><span class=\"token punctuation\">&#034;<\/span><\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>messagesContainer<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>messages-container<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>input-area<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>input-wrapper<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>textarea<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>messageInput<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>message-input<span class=\"token punctuation\">&#034;<\/span><\/span><br \/>\n                              <span class=\"token attr-name\">placeholder<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>\u8bf7\u8f93\u5165\u60a8\u7684\u6d88\u606f&#8230;(Enter\u53d1\u9001,Shift&#043;Enter\u6362\u884c)<span class=\"token punctuation\">&#034;<\/span><\/span><br \/>\n                              <span class=\"token attr-name\">maxlength<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>2000<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">rows<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>1<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>textarea<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>sendBtn<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>send-btn<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">disabled<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>svg<\/span> <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>18<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>18<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">viewBox<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>0 0 24 24<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">fill<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>none<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">stroke<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>currentColor<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">stroke-width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>2<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>line<\/span> <span class=\"token attr-name\">x1<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>22<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">y1<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>2<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">x2<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>11<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">y2<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>13<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>line<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>polygon<\/span> <span class=\"token attr-name\">points<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>22 2 15 22 11 13 2 9 22 2<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>polygon<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>svg<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>char-count<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n                    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>span<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>charCount<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>0<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>span<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\/2000<br \/>\n                <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>main<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/p>\n<p><span class=\"token comment\">&lt;!&#8211; \u6a21\u578b\u9009\u62e9\u5f39\u7a97 &#8211;&gt;<\/span><br \/>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>modelModal<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>modal-overlay<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token special-attr\"><span class=\"token attr-name\">style<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span><span class=\"token value css language-css\"><span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span><\/span><span class=\"token punctuation\">&#034;<\/span><\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>modal-content<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h3<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\u9009\u62e9\u6a21\u578b<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h3<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>modelGrid<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>model-grid<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>loading<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\u52a0\u8f7d\u4e2d&#8230;<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>modal-actions<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>cancelBtn<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>secondary-btn<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\u53d6\u6d88<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>confirmBtn<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>primary-btn<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">disabled<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\u786e\u8ba4\u521b\u5efa\u5bf9\u8bdd<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/p>\n<p><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>app.js<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script\"><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>body<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>html<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/p>\n<h4>2.2 style.css<\/h4>\n<p><span class=\"token selector\">*<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">margin<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">box-sizing<\/span><span class=\"token punctuation\">:<\/span> border-box<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">body<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">font-family<\/span><span class=\"token punctuation\">:<\/span> -apple-system<span class=\"token punctuation\">,<\/span> BlinkMacSystemFont<span class=\"token punctuation\">,<\/span> <span class=\"token string\">&#034;Segoe UI&#034;<\/span><span class=\"token punctuation\">,<\/span> Roboto<span class=\"token punctuation\">,<\/span> <span class=\"token string\">&#034;Helvetica Neue&#034;<\/span><span class=\"token punctuation\">,<\/span> Arial<span class=\"token punctuation\">,<\/span> sans-serif<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 14px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #333<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #f7f7f8<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> 100vh<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">overflow<\/span><span class=\"token punctuation\">:<\/span> hidden<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">#app<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> 100vh<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/* &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; \u4fa7\u8fb9\u680f\u6837\u5f0f &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; *\/<\/span><br \/>\n<span class=\"token selector\">.sidebar<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 260px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #202123<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #fff<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">flex-direction<\/span><span class=\"token punctuation\">:<\/span> column<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border-right<\/span><span class=\"token punctuation\">:<\/span> 1px solid #2d2d2d<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.sidebar-header<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 16px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">gap<\/span><span class=\"token punctuation\">:<\/span> 10px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border-bottom<\/span><span class=\"token punctuation\">:<\/span> 1px solid #2d2d2d<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.logo<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #10a37f<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.title<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 16px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">font-weight<\/span><span class=\"token punctuation\">:<\/span> 600<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">flex<\/span><span class=\"token punctuation\">:<\/span> 1<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.new-chat-btn<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> transparent<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> 1px solid #4d4d4f<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #fff<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 6px 10px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">cursor<\/span><span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">gap<\/span><span class=\"token punctuation\">:<\/span> 4px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 13px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> background-color 0.2s<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.new-chat-btn:hover<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #2d2d2d<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.session-list<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">flex<\/span><span class=\"token punctuation\">:<\/span> 1<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">overflow-y<\/span><span class=\"token punctuation\">:<\/span> auto<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.session-item<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">cursor<\/span><span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">margin-bottom<\/span><span class=\"token punctuation\">:<\/span> 4px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> relative<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> background-color 0.2s<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.session-item:hover<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #2d2d2d<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.session-item.active<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #343541<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.session-first-msg<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 14px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #ececf1<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">white-space<\/span><span class=\"token punctuation\">:<\/span> nowrap<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">overflow<\/span><span class=\"token punctuation\">:<\/span> hidden<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">text-overflow<\/span><span class=\"token punctuation\">:<\/span> ellipsis<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">margin-bottom<\/span><span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.session-meta<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #8e8ea0<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">justify-content<\/span><span class=\"token punctuation\">:<\/span> space-between<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.session-model<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #343541<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 2px 6px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 4px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 11px<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.delete-btn<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #8e8ea0<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">cursor<\/span><span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 16px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 0 4px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">opacity<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> opacity 0.2s<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.session-item:hover .delete-btn<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">opacity<\/span><span class=\"token punctuation\">:<\/span> 1<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.delete-btn:hover<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #fff<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.loading<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">text-align<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #8e8ea0<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 20px<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/* &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; \u4e3b\u533a\u57df &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; *\/<\/span><br \/>\n<span class=\"token selector\">.main-content<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">flex<\/span><span class=\"token punctuation\">:<\/span> 1<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">flex-direction<\/span><span class=\"token punctuation\">:<\/span> column<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #ffffff<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> relative<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.welcome-section<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">flex<\/span><span class=\"token punctuation\">:<\/span> 1<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">flex-direction<\/span><span class=\"token punctuation\">:<\/span> column<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">justify-content<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">gap<\/span><span class=\"token punctuation\">:<\/span> 20px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #6e6e80<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.welcome-icon<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #10a37f<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.welcome-text<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 16px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">text-align<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">max-width<\/span><span class=\"token punctuation\">:<\/span> 400px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">line-height<\/span><span class=\"token punctuation\">:<\/span> 1.6<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.primary-btn<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #10a37f<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #fff<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 10px 24px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">cursor<\/span><span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 14px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">font-weight<\/span><span class=\"token punctuation\">:<\/span> 500<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> background-color 0.2s<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.primary-btn:hover:not(:disabled)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #0d8a6c<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.primary-btn:disabled<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #a8d8cd<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">cursor<\/span><span class=\"token punctuation\">:<\/span> not-allowed<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.secondary-btn<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #f0f0f0<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #333<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 10px 24px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">cursor<\/span><span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 14px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> background-color 0.2s<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.secondary-btn:hover<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #e5e5e5<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.chat-section<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">flex<\/span><span class=\"token punctuation\">:<\/span> 1<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">flex-direction<\/span><span class=\"token punctuation\">:<\/span> column<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> 100%<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.messages-container<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">flex<\/span><span class=\"token punctuation\">:<\/span> 1<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">overflow-y<\/span><span class=\"token punctuation\">:<\/span> auto<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 20px 0<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">calc<\/span><span class=\"token punctuation\">(<\/span>85vh &#8211; 60px<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.message<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">max-width<\/span><span class=\"token punctuation\">:<\/span> 800px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">margin<\/span><span class=\"token punctuation\">:<\/span> 0 auto 24px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 0 20px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">gap<\/span><span class=\"token punctuation\">:<\/span> 16px<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.message.user<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">flex-direction<\/span><span class=\"token punctuation\">:<\/span> row-reverse<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.message-avatar<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 36px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> 36px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">flex-shrink<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">justify-content<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">font-weight<\/span><span class=\"token punctuation\">:<\/span> 600<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 14px<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.message.assistant .message-avatar<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #10a37f<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #fff<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.message.user .message-avatar<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #e5e5e5<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #333<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.message-content<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">flex<\/span><span class=\"token punctuation\">:<\/span> 1<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">min-width<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.message-text<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">line-height<\/span><span class=\"token punctuation\">:<\/span> 1.6<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">word-wrap<\/span><span class=\"token punctuation\">:<\/span> break-word<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.message-text p<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">margin-bottom<\/span><span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.message-text p:last-child<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">margin-bottom<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.message-text pre<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #f6f8fa<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">overflow-x<\/span><span class=\"token punctuation\">:<\/span> auto<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">margin<\/span><span class=\"token punctuation\">:<\/span> 12px 0<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> relative<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.message-text code<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">font-family<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">&#034;SFMono-Regular&#034;<\/span><span class=\"token punctuation\">,<\/span> Consolas<span class=\"token punctuation\">,<\/span> <span class=\"token string\">&#034;Liberation Mono&#034;<\/span><span class=\"token punctuation\">,<\/span> Menlo<span class=\"token punctuation\">,<\/span> monospace<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 13px<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.message-text pre code<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.message-text :not(pre) &gt; code<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #f0f2f5<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 2px 6px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 4px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 13px<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.copy-btn<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> absolute<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">top<\/span><span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">right<\/span><span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> #fff<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> 1px solid #d0d7de<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 4px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 4px 8px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">cursor<\/span><span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">opacity<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> opacity 0.2s<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.message-text pre:hover .copy-btn<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">opacity<\/span><span class=\"token punctuation\">:<\/span> 1<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.message-time<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #999<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">margin-top<\/span><span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.message.user .message-time<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">text-align<\/span><span class=\"token punctuation\">:<\/span> right<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/* &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; \u8f93\u5165\u533a\u57df &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; *\/<\/span><br \/>\n<span class=\"token selector\">.input-area<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">border-top<\/span><span class=\"token punctuation\">:<\/span> 1px solid #e5e5e5<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 16px 20px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #fff<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.input-wrapper<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">max-width<\/span><span class=\"token punctuation\">:<\/span> 800px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">margin<\/span><span class=\"token punctuation\">:<\/span> 0 auto<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> relative<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> 1px solid #d0d0d5<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #fff<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> border-color 0.2s<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.input-wrapper:focus-within<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">border-color<\/span><span class=\"token punctuation\">:<\/span> #10a37f<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">box-shadow<\/span><span class=\"token punctuation\">:<\/span> 0 0 0 2px <span class=\"token function\">rgba<\/span><span class=\"token punctuation\">(<\/span>16<span class=\"token punctuation\">,<\/span> 163<span class=\"token punctuation\">,<\/span> 127<span class=\"token punctuation\">,<\/span> 0.1<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.message-input<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 100%<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">outline<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">resize<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 12px 50px 12px 16px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 14px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">font-family<\/span><span class=\"token punctuation\">:<\/span> inherit<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">line-height<\/span><span class=\"token punctuation\">:<\/span> 1.5<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">max-height<\/span><span class=\"token punctuation\">:<\/span> 200px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> transparent<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.send-btn<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> absolute<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">right<\/span><span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">bottom<\/span><span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 32px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> 32px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #10a37f<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #fff<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">cursor<\/span><span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">justify-content<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> background-color 0.2s<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.send-btn:hover:not(:disabled)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #0d8a6c<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.send-btn:disabled<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #d0d0d5<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">cursor<\/span><span class=\"token punctuation\">:<\/span> not-allowed<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.char-count<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">max-width<\/span><span class=\"token punctuation\">:<\/span> 800px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">margin<\/span><span class=\"token punctuation\">:<\/span> 6px auto 0<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">text-align<\/span><span class=\"token punctuation\">:<\/span> right<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #999<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/* &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; \u6a21\u578b\u5f39\u7a97 &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; *\/<\/span><br \/>\n<span class=\"token selector\">.modal-overlay<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> fixed<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">top<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">left<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">right<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">bottom<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">rgba<\/span><span class=\"token punctuation\">(<\/span>0<span class=\"token punctuation\">,<\/span> 0<span class=\"token punctuation\">,<\/span> 0<span class=\"token punctuation\">,<\/span> 0.5<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">justify-content<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">z-index<\/span><span class=\"token punctuation\">:<\/span> 1000<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.modal-content<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #fff<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 600px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">max-height<\/span><span class=\"token punctuation\">:<\/span> 80vh<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">flex-direction<\/span><span class=\"token punctuation\">:<\/span> column<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">box-shadow<\/span><span class=\"token punctuation\">:<\/span> 0 20px 60px <span class=\"token function\">rgba<\/span><span class=\"token punctuation\">(<\/span>0<span class=\"token punctuation\">,<\/span> 0<span class=\"token punctuation\">,<\/span> 0<span class=\"token punctuation\">,<\/span> 0.3<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.modal-content h3<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 20px 24px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border-bottom<\/span><span class=\"token punctuation\">:<\/span> 1px solid #e5e5e5<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 18px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">font-weight<\/span><span class=\"token punctuation\">:<\/span> 600<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.model-grid<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">flex<\/span><span class=\"token punctuation\">:<\/span> 1<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">overflow-y<\/span><span class=\"token punctuation\">:<\/span> auto<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 20px 24px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> grid<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">grid-template-columns<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">repeat<\/span><span class=\"token punctuation\">(<\/span>2<span class=\"token punctuation\">,<\/span> 1fr<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">gap<\/span><span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.model-card<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> 1px solid #d0d0d5<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 16px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">cursor<\/span><span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> all 0.2s<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> relative<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.model-card:hover<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">border-color<\/span><span class=\"token punctuation\">:<\/span> #10a37f<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.model-card.selected<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">border-color<\/span><span class=\"token punctuation\">:<\/span> #10a37f<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">rgba<\/span><span class=\"token punctuation\">(<\/span>16<span class=\"token punctuation\">,<\/span> 163<span class=\"token punctuation\">,<\/span> 127<span class=\"token punctuation\">,<\/span> 0.05<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.model-card input[type&#061;&#034;radio&#034;]<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> absolute<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">top<\/span><span class=\"token punctuation\">:<\/span> 16px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">right<\/span><span class=\"token punctuation\">:<\/span> 16px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">accent-color<\/span><span class=\"token punctuation\">:<\/span> #10a37f<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.model-name<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">font-weight<\/span><span class=\"token punctuation\">:<\/span> 600<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">margin-bottom<\/span><span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">padding-right<\/span><span class=\"token punctuation\">:<\/span> 24px<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.model-desc<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 13px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #6e6e80<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">line-height<\/span><span class=\"token punctuation\">:<\/span> 1.5<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token selector\">.modal-actions<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 16px 24px<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border-top<\/span><span class=\"token punctuation\">:<\/span> 1px solid #e5e5e5<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">justify-content<\/span><span class=\"token punctuation\">:<\/span> flex-end<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">gap<\/span><span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/* \u6eda\u52a8\u6761\u7f8e\u5316 *\/<\/span><br \/>\n<span class=\"token selector\">::-webkit-scrollbar<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 6px<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token selector\">::-webkit-scrollbar-track<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> transparent<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token selector\">::-webkit-scrollbar-thumb<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #c1c1c1<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 3px<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token selector\">.sidebar ::-webkit-scrollbar-thumb<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #565869<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>2.3 app.js<\/h4>\n<p><span class=\"token comment\">\/\/ &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; \u540e\u7aef\u670d\u52a1\u57fa\u7840\u914d\u7f6e &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;<\/span><br \/>\n<span class=\"token keyword\">const<\/span> <span class=\"token constant\">BASE_URL<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;http:\/\/192.168.100.238:8080&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token keyword\">const<\/span> <span class=\"token constant\">MAX_CHARS<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">2000<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token comment\">\/\/ &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; \u5168\u5c40\u72b6\u6001\u53d8\u91cf &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;<\/span><br \/>\n<span class=\"token keyword\">let<\/span> currentSessionId <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">null<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token keyword\">let<\/span> selectedModel <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">null<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token keyword\">let<\/span> isSending <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token comment\">\/\/ &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; DOM\u8282\u70b9\u7f13\u5b58 &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;<\/span><br \/>\n<span class=\"token keyword\">const<\/span> elements <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token literal-property property\">sessionList<\/span><span class=\"token operator\">:<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;sessionList&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token literal-property property\">newChatBtn<\/span><span class=\"token operator\">:<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;newChatBtn&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token literal-property property\">welcomeNewChatBtn<\/span><span class=\"token operator\">:<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;welcomeNewChatBtn&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token literal-property property\">welcomeSection<\/span><span class=\"token operator\">:<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;welcomeSection&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token literal-property property\">chatSection<\/span><span class=\"token operator\">:<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;chatSection&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token literal-property property\">messagesContainer<\/span><span class=\"token operator\">:<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;messagesContainer&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token literal-property property\">messageInput<\/span><span class=\"token operator\">:<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;messageInput&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token literal-property property\">sendBtn<\/span><span class=\"token operator\">:<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;sendBtn&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token literal-property property\">charCount<\/span><span class=\"token operator\">:<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;charCount&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token literal-property property\">modelModal<\/span><span class=\"token operator\">:<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;modelModal&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token literal-property property\">modelGrid<\/span><span class=\"token operator\">:<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;modelGrid&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token literal-property property\">confirmBtn<\/span><span class=\"token operator\">:<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;confirmBtn&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token literal-property property\">cancelBtn<\/span><span class=\"token operator\">:<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;cancelBtn&#039;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token comment\">\/\/ &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; \u9875\u9762\u521d\u59cb\u5316\u5165\u53e3 &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;<\/span><br \/>\ndocument<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;DOMContentLoaded&#039;<\/span><span class=\"token punctuation\">,<\/span> init<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token keyword\">function<\/span> <span class=\"token function\">init<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token comment\">\/\/ marked Markdown\u89e3\u6790\u914d\u7f6e&#xff0c;\u5bf9\u63a5highlight.js\u505a\u4ee3\u7801\u9ad8\u4eae<\/span><br \/>\n    marked<span class=\"token punctuation\">.<\/span><span class=\"token function\">setOptions<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token function-variable function\">highlight<\/span><span class=\"token operator\">:<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">code<span class=\"token punctuation\">,<\/span> lang<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>lang <span class=\"token operator\">&amp;&amp;<\/span> hljs<span class=\"token punctuation\">.<\/span><span class=\"token function\">getLanguage<\/span><span class=\"token punctuation\">(<\/span>lang<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                    <span class=\"token keyword\">return<\/span> hljs<span class=\"token punctuation\">.<\/span><span class=\"token function\">highlight<\/span><span class=\"token punctuation\">(<\/span>code<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token literal-property property\">language<\/span><span class=\"token operator\">:<\/span> lang<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token keyword\">return<\/span> code<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token literal-property property\">breaks<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token function\">loadSessions<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token function\">bindEvents<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; \u4e8b\u4ef6\u7ed1\u5b9a &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;<\/span><br \/>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">bindEvents<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>newChatBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;click&#039;<\/span><span class=\"token punctuation\">,<\/span> openModelModal<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>welcomeNewChatBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;click&#039;<\/span><span class=\"token punctuation\">,<\/span> openModelModal<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    elements<span class=\"token punctuation\">.<\/span>cancelBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;click&#039;<\/span><span class=\"token punctuation\">,<\/span> closeModelModal<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>confirmBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;click&#039;<\/span><span class=\"token punctuation\">,<\/span> handleCreateSession<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    elements<span class=\"token punctuation\">.<\/span>sendBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;click&#039;<\/span><span class=\"token punctuation\">,<\/span> handleSendMessage<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>messageInput<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;keydown&#039;<\/span><span class=\"token punctuation\">,<\/span> handleInputKeydown<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>messageInput<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;input&#039;<\/span><span class=\"token punctuation\">,<\/span> handleInputChange<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u70b9\u51fb\u906e\u7f69\u5c42\u5173\u95ed\u5f39\u7a97<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>modelModal<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;click&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">e<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">.<\/span>target <span class=\"token operator\">&#061;&#061;&#061;<\/span> elements<span class=\"token punctuation\">.<\/span>modelModal<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token function\">closeModelModal<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; API\u8bf7\u6c42\u5c01\u88c5 &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;<\/span><br \/>\n<span class=\"token comment\">\/**<br \/>\n * \u83b7\u53d6\u5168\u90e8\u4f1a\u8bdd\u5217\u8868<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">fetchSessions<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> res <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token constant\">BASE_URL<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">\/api\/sessions<\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> data <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> res<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">.<\/span>success<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> data<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token keyword\">throw<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Error<\/span><span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">.<\/span>message <span class=\"token operator\">||<\/span> <span class=\"token string\">&#039;\u83b7\u53d6\u4f1a\u8bdd\u5217\u8868\u5931\u8d25&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u83b7\u53d6\u540e\u7aef\u652f\u6301\u6a21\u578b\u5217\u8868<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">fetchModels<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> res <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token constant\">BASE_URL<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">\/api\/models<\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> data <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> res<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">.<\/span>success<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> data<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token keyword\">throw<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Error<\/span><span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">.<\/span>message <span class=\"token operator\">||<\/span> <span class=\"token string\">&#039;\u83b7\u53d6\u6a21\u578b\u5217\u8868\u5931\u8d25&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u521b\u5efa\u4f1a\u8bdd<br \/>\n * &#064;param {string} model \u6a21\u578b\u540d\u79f0<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">createSession<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">model<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> res <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token constant\">BASE_URL<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">\/api\/session<\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token literal-property property\">method<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;POST&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token literal-property property\">headers<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token string-property property\">&#039;Content-Type&#039;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;application\/json&#039;<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token literal-property property\">body<\/span><span class=\"token operator\">:<\/span> <span class=\"token constant\">JSON<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">stringify<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>model<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> data <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> res<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">.<\/span>success<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> data<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token keyword\">throw<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Error<\/span><span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">.<\/span>message <span class=\"token operator\">||<\/span> <span class=\"token string\">&#039;\u521b\u5efa\u4f1a\u8bdd\u5931\u8d25&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u5220\u9664\u6307\u5b9a\u4f1a\u8bdd<br \/>\n * &#064;param {string} sessionId<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">deleteSession<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">sessionId<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> res <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token constant\">BASE_URL<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">\/api\/session\/<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>sessionId<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token literal-property property\">method<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;DELETE&#039;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> data <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> res<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>data<span class=\"token punctuation\">.<\/span>success<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">throw<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Error<\/span><span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">.<\/span>message <span class=\"token operator\">||<\/span> <span class=\"token string\">&#039;\u5220\u9664\u4f1a\u8bdd\u5931\u8d25&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u83b7\u53d6\u4f1a\u8bdd\u5386\u53f2\u6d88\u606f<br \/>\n * &#064;param {string} sessionId<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">fetchSessionHistory<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">sessionId<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> res <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token constant\">BASE_URL<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">\/api\/session\/<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>sessionId<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">\/history<\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> data <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> res<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">.<\/span>success<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> data<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token keyword\">throw<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Error<\/span><span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">.<\/span>message <span class=\"token operator\">||<\/span> <span class=\"token string\">&#039;\u83b7\u53d6\u4f1a\u8bdd\u5386\u53f2\u5931\u8d25&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * SSE\u6d41\u5f0f\u53d1\u9001\u6d88\u606f&#xff0c;XMLHttpRequest\u5b9e\u73b0SSE\u5206\u7247\u89e3\u6790<br \/>\n * &#064;param {string} sessionId<br \/>\n * &#064;param {string} message \u7528\u6237\u8f93\u5165\u6d88\u606f<br \/>\n * &#064;param {Function} onMessage \u5206\u7247\u56de\u8c03<br \/>\n * &#064;param {Function} onDone \u7ed3\u675f\/\u5f02\u5e38\u56de\u8c03<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">sendMessageStream<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">sessionId<span class=\"token punctuation\">,<\/span> message<span class=\"token punctuation\">,<\/span> onMessage<span class=\"token punctuation\">,<\/span> onDone<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> xhr <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">XMLHttpRequest<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    xhr<span class=\"token punctuation\">.<\/span><span class=\"token function\">open<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;POST&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token constant\">BASE_URL<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">\/api\/message\/async<\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    xhr<span class=\"token punctuation\">.<\/span><span class=\"token function\">setRequestHeader<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;Content-Type&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">&#039;application\/json&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token keyword\">let<\/span> received <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">let<\/span> lastPos <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    xhr<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onprogress<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        received <span class=\"token operator\">&#061;<\/span> xhr<span class=\"token punctuation\">.<\/span>responseText<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> newData <span class=\"token operator\">&#061;<\/span> received<span class=\"token punctuation\">.<\/span><span class=\"token function\">slice<\/span><span class=\"token punctuation\">(<\/span>lastPos<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        lastPos <span class=\"token operator\">&#061;<\/span> received<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> lines <span class=\"token operator\">&#061;<\/span> newData<span class=\"token punctuation\">.<\/span><span class=\"token function\">split<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;\\\\n\\\\n&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> line <span class=\"token keyword\">of<\/span> lines<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>line<span class=\"token punctuation\">.<\/span><span class=\"token function\">startsWith<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;data: &#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">const<\/span> content <span class=\"token operator\">&#061;<\/span> line<span class=\"token punctuation\">.<\/span><span class=\"token function\">slice<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">6<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>content <span class=\"token operator\">&#061;&#061;&#061;<\/span> <span class=\"token string\">&#039;[DONE]&#039;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                    onDone <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token function\">onDone<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">null<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                    <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span><br \/>\n                onMessage <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token function\">onMessage<\/span><span class=\"token punctuation\">(<\/span>content<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    xhr<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onload<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>xhr<span class=\"token punctuation\">.<\/span>status <span class=\"token operator\">!&#061;&#061;<\/span> <span class=\"token number\">200<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            onDone <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token function\">onDone<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Error<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">HTTP <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>xhr<span class=\"token punctuation\">.<\/span>status<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\"> \u8bf7\u6c42\u5931\u8d25<\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    xhr<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onerror<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        onDone <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token function\">onDone<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Error<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;\u7f51\u7edc\u8bf7\u6c42\u5f02\u5e38&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    xhr<span class=\"token punctuation\">.<\/span><span class=\"token function\">send<\/span><span class=\"token punctuation\">(<\/span><span class=\"token constant\">JSON<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">stringify<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><span class=\"token literal-property property\">session_id<\/span><span class=\"token operator\">:<\/span> sessionId<span class=\"token punctuation\">,<\/span> message<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; \u4e1a\u52a1\u903b\u8f91\u51fd\u6570 &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;<\/span><br \/>\n<span class=\"token comment\">\/**<br \/>\n * \u52a0\u8f7d\u4f1a\u8bdd\u5217\u8868\u5e76\u6e32\u67d3\u4fa7\u8fb9\u680f<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">loadSessions<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> sessions <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetchSessions<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token function\">renderSessions<\/span><span class=\"token punctuation\">(<\/span>sessions<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        elements<span class=\"token punctuation\">.<\/span>sessionList<span class=\"token punctuation\">.<\/span>innerHTML <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;&lt;div class&#061;&#034;loading&#034;&gt;\u52a0\u8f7d\u5931\u8d25&lt;\/div&gt;&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        console<span class=\"token punctuation\">.<\/span><span class=\"token function\">error<\/span><span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u6e32\u67d3\u4f1a\u8bdd\u4fa7\u8fb9\u680f<br \/>\n * &#064;param {Array} sessions<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">renderSessions<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">sessions<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>sessions<span class=\"token punctuation\">.<\/span>length <span class=\"token operator\">&#061;&#061;&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        elements<span class=\"token punctuation\">.<\/span>sessionList<span class=\"token punctuation\">.<\/span>innerHTML <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;&lt;div class&#061;&#034;loading&#034;&gt;\u6682\u65e0\u4f1a\u8bdd&lt;\/div&gt;&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token comment\">\/\/ \u66f4\u65b0\u65f6\u95f4\u5012\u5e8f\u6392\u5e8f<\/span><br \/>\n    sessions<span class=\"token punctuation\">.<\/span><span class=\"token function\">sort<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> b<span class=\"token punctuation\">.<\/span>updated_at <span class=\"token operator\">&#8211;<\/span> a<span class=\"token punctuation\">.<\/span>updated_at<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    elements<span class=\"token punctuation\">.<\/span>sessionList<span class=\"token punctuation\">.<\/span>innerHTML <span class=\"token operator\">&#061;<\/span> sessions<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">session<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\"><br \/>\n        &lt;div class&#061;&#034;session-item <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>session<span class=\"token punctuation\">.<\/span>id <span class=\"token operator\">&#061;&#061;&#061;<\/span> currentSessionId <span class=\"token operator\">?<\/span> <span class=\"token string\">&#039;active&#039;<\/span> <span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;&#039;<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">&#034; data-id&#061;&#034;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">escapeHtml<\/span><span class=\"token punctuation\">(<\/span>session<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">&#034;&gt;<br \/>\n            &lt;div class&#061;&#034;session-first-msg&#034;&gt;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">escapeHtml<\/span><span class=\"token punctuation\">(<\/span>session<span class=\"token punctuation\">.<\/span>first_user_message <span class=\"token operator\">||<\/span> <span class=\"token string\">&#039;\u65b0\u5bf9\u8bdd&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">&lt;\/div&gt;<br \/>\n            &lt;div class&#061;&#034;session-meta&#034;&gt;<br \/>\n                &lt;span class&#061;&#034;session-model&#034;&gt;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">escapeHtml<\/span><span class=\"token punctuation\">(<\/span>session<span class=\"token punctuation\">.<\/span>model<span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">&lt;\/span&gt;<br \/>\n                &lt;span&gt;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">formatTime<\/span><span class=\"token punctuation\">(<\/span>session<span class=\"token punctuation\">.<\/span>updated_at<span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">&lt;\/span&gt;<br \/>\n                &lt;button class&#061;&#034;delete-btn&#034; data-id&#061;&#034;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">escapeHtml<\/span><span class=\"token punctuation\">(<\/span>session<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">&#034; title&#061;&#034;\u5220\u9664&#034;&gt;\u2026&lt;\/button&gt;<br \/>\n            &lt;\/div&gt;<br \/>\n        &lt;\/div&gt;<br \/>\n    <\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">join<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u4f1a\u8bdd\u70b9\u51fb\u5207\u6362\u4e8b\u4ef6<\/span><br \/>\n    document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelectorAll<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;.session-item&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        item<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;click&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">e<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">.<\/span>target<span class=\"token punctuation\">.<\/span>classList<span class=\"token punctuation\">.<\/span><span class=\"token function\">contains<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;delete-btn&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> id <span class=\"token operator\">&#061;<\/span> item<span class=\"token punctuation\">.<\/span>dataset<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token function\">switchToSession<\/span><span class=\"token punctuation\">(<\/span>id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u5220\u9664\u4f1a\u8bdd\u6309\u94ae\u4e8b\u4ef6<\/span><br \/>\n    document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelectorAll<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;.delete-btn&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">btn<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        btn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;click&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">e<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            e<span class=\"token punctuation\">.<\/span><span class=\"token function\">stopPropagation<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> id <span class=\"token operator\">&#061;<\/span> btn<span class=\"token punctuation\">.<\/span>dataset<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token function\">confirm<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;\u786e\u5b9a\u8981\u5220\u9664\u8fd9\u4e2a\u4f1a\u8bdd\u5417?&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                    <span class=\"token keyword\">await<\/span> <span class=\"token function\">deleteSession<\/span><span class=\"token punctuation\">(<\/span>id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>currentSessionId <span class=\"token operator\">&#061;&#061;&#061;<\/span> id<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                        <span class=\"token function\">switchToWelcome<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                    <span class=\"token punctuation\">}<\/span><br \/>\n                    <span class=\"token function\">loadSessions<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">(<\/span>err<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                    <span class=\"token function\">alert<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;\u5220\u9664\u5931\u8d25:&#039;<\/span> <span class=\"token operator\">&#043;<\/span> err<span class=\"token punctuation\">.<\/span>message<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u6253\u5f00\u6a21\u578b\u9009\u62e9\u5f39\u7a97&#xff0c;\u52a0\u8f7d\u6a21\u578b\u5217\u8868<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">openModelModal<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>modelModal<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>display <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;flex&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>modelGrid<span class=\"token punctuation\">.<\/span>innerHTML <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;&lt;div class&#061;&#034;loading&#034;&gt;\u52a0\u8f7d\u4e2d&#8230;&lt;\/div&gt;&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>confirmBtn<span class=\"token punctuation\">.<\/span>disabled <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    selectedModel <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">null<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> models <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetchModels<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token function\">renderModels<\/span><span class=\"token punctuation\">(<\/span>models<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        elements<span class=\"token punctuation\">.<\/span>modelGrid<span class=\"token punctuation\">.<\/span>innerHTML <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;&lt;div class&#061;&#034;loading&#034;&gt;\u52a0\u8f7d\u5931\u8d25&lt;\/div&gt;&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        console<span class=\"token punctuation\">.<\/span><span class=\"token function\">error<\/span><span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u6e32\u67d3\u6a21\u578b\u5361\u7247\u7f51\u683c<br \/>\n * &#064;param {Array} models<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">renderModels<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">models<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>modelGrid<span class=\"token punctuation\">.<\/span>innerHTML <span class=\"token operator\">&#061;<\/span> models<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">model<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\"><br \/>\n        &lt;div class&#061;&#034;model-card&#034; data-name&#061;&#034;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">escapeHtml<\/span><span class=\"token punctuation\">(<\/span>model<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">&#034;&gt;<br \/>\n            &lt;input type&#061;&#034;radio&#034; name&#061;&#034;model&#034; value&#061;&#034;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">escapeHtml<\/span><span class=\"token punctuation\">(<\/span>model<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">&#034;&gt;<br \/>\n            &lt;div class&#061;&#034;model-name&#034;&gt;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">escapeHtml<\/span><span class=\"token punctuation\">(<\/span>model<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">&lt;\/div&gt;<br \/>\n            &lt;div class&#061;&#034;model-desc&#034;&gt;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">escapeHtml<\/span><span class=\"token punctuation\">(<\/span>model<span class=\"token punctuation\">.<\/span>desc<span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">&lt;\/div&gt;<br \/>\n        &lt;\/div&gt;<br \/>\n    <\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">join<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelectorAll<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;.model-card&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">card<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        card<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;click&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelectorAll<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;.model-card&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">c<\/span> <span class=\"token operator\">&#061;&gt;<\/span> c<span class=\"token punctuation\">.<\/span>classList<span class=\"token punctuation\">.<\/span><span class=\"token function\">remove<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;selected&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            card<span class=\"token punctuation\">.<\/span>classList<span class=\"token punctuation\">.<\/span><span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;selected&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            card<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;input&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span>checked <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            selectedModel <span class=\"token operator\">&#061;<\/span> card<span class=\"token punctuation\">.<\/span>dataset<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">;<\/span><br \/>\n            elements<span class=\"token punctuation\">.<\/span>confirmBtn<span class=\"token punctuation\">.<\/span>disabled <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u5173\u95ed\u6a21\u578b\u5f39\u7a97<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">closeModelModal<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>modelModal<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>display <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;none&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u786e\u8ba4\u521b\u5efa\u4f1a\u8bdd<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">handleCreateSession<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>selectedModel<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>confirmBtn<span class=\"token punctuation\">.<\/span>disabled <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>confirmBtn<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;\u521b\u5efa\u4e2d&#8230;&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> result <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">createSession<\/span><span class=\"token punctuation\">(<\/span>selectedModel<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        currentSessionId <span class=\"token operator\">&#061;<\/span> result<span class=\"token punctuation\">.<\/span>sessionid<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token function\">closeModelModal<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token function\">switchToChat<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token function\">loadSessions<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token function\">alert<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;\u521b\u5efa\u4f1a\u8bdd\u5931\u8d25:&#039;<\/span> <span class=\"token operator\">&#043;<\/span> e<span class=\"token punctuation\">.<\/span>message<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">finally<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        elements<span class=\"token punctuation\">.<\/span>confirmBtn<span class=\"token punctuation\">.<\/span>disabled <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        elements<span class=\"token punctuation\">.<\/span>confirmBtn<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;\u786e\u8ba4\u521b\u5efa\u5bf9\u8bdd&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u5207\u6362\u5230\u6307\u5b9a\u4f1a\u8bdd&#xff0c;\u52a0\u8f7d\u5386\u53f2\u6d88\u606f<br \/>\n * &#064;param {string} sessionId<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">switchToSession<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">sessionId<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    currentSessionId <span class=\"token operator\">&#061;<\/span> sessionId<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token function\">switchToChat<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token function\">loadSessions<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>messagesContainer<span class=\"token punctuation\">.<\/span>innerHTML <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;&lt;div class&#061;&#034;loading&#034;&gt;\u52a0\u8f7d\u4e2d&#8230;&lt;\/div&gt;&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> history <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetchSessionHistory<\/span><span class=\"token punctuation\">(<\/span>sessionId<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token function\">renderHistory<\/span><span class=\"token punctuation\">(<\/span>history<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        elements<span class=\"token punctuation\">.<\/span>messagesContainer<span class=\"token punctuation\">.<\/span>innerHTML <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;&lt;div class&#061;&#034;loading&#034;&gt;\u52a0\u8f7d\u5386\u53f2\u6d88\u606f\u5931\u8d25&lt;\/div&gt;&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        console<span class=\"token punctuation\">.<\/span><span class=\"token function\">error<\/span><span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u6e32\u67d3\u4f1a\u8bdd\u5168\u90e8\u5386\u53f2\u6d88\u606f<br \/>\n * &#064;param {Array} messages<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">renderHistory<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">messages<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>messagesContainer<span class=\"token punctuation\">.<\/span>innerHTML <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> msg <span class=\"token keyword\">of<\/span> messages<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token function\">addMessage<\/span><span class=\"token punctuation\">(<\/span>msg<span class=\"token punctuation\">.<\/span>role<span class=\"token punctuation\">,<\/span> msg<span class=\"token punctuation\">.<\/span>content<span class=\"token punctuation\">,<\/span> msg<span class=\"token punctuation\">.<\/span>timestamp<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token function\">scrollToBottom<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u5207\u6362\u804a\u5929\u754c\u9762<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">switchToChat<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>welcomeSection<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>display <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;none&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>chatSection<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>display <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;flex&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>messageInput<span class=\"token punctuation\">.<\/span><span class=\"token function\">focus<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u5207\u56de\u6b22\u8fce\u9996\u9875<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">switchToWelcome<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    currentSessionId <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">null<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>welcomeSection<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>display <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;flex&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>chatSection<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>display <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;none&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token function\">loadSessions<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u53d1\u9001\u6d88\u606f\u4e3b\u903b\u8f91<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">handleSendMessage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>isSending<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> message <span class=\"token operator\">&#061;<\/span> elements<span class=\"token punctuation\">.<\/span>messageInput<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">.<\/span><span class=\"token function\">trim<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>message <span class=\"token operator\">||<\/span> <span class=\"token operator\">!<\/span>currentSessionId<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    isSending <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>sendBtn<span class=\"token punctuation\">.<\/span>disabled <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>messageInput<span class=\"token punctuation\">.<\/span>disabled <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u6e32\u67d3\u7528\u6237\u6d88\u606f<\/span><br \/>\n    <span class=\"token function\">addMessage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;user&#039;<\/span><span class=\"token punctuation\">,<\/span> message<span class=\"token punctuation\">,<\/span> Date<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>messageInput<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token function\">updateCharCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ AI\u6d88\u606f\u5360\u4f4d\u5bb9\u5668<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> aiMsgElement <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">addMessage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;assistant&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">&#039;&#039;<\/span><span class=\"token punctuation\">,<\/span> Date<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> msgContentEl <span class=\"token operator\">&#061;<\/span> aiMsgElement<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;.message-text&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">let<\/span> fullContent <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;&#039;<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token function\">sendMessageStream<\/span><span class=\"token punctuation\">(<\/span><br \/>\n        currentSessionId<span class=\"token punctuation\">,<\/span><br \/>\n        message<span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">chunk<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            fullContent <span class=\"token operator\">&#043;&#061;<\/span> chunk<span class=\"token punctuation\">;<\/span><br \/>\n            msgContentEl<span class=\"token punctuation\">.<\/span>innerHTML <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">renderMarkdown<\/span><span class=\"token punctuation\">(<\/span>fullContent<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token function\">addCopyButtons<\/span><span class=\"token punctuation\">(<\/span>msgContentEl<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token function\">scrollToBottom<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">err<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            isSending <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            elements<span class=\"token punctuation\">.<\/span>sendBtn<span class=\"token punctuation\">.<\/span>disabled <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            elements<span class=\"token punctuation\">.<\/span>messageInput<span class=\"token punctuation\">.<\/span>disabled <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            elements<span class=\"token punctuation\">.<\/span>messageInput<span class=\"token punctuation\">.<\/span><span class=\"token function\">focus<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>err<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                msgContentEl<span class=\"token punctuation\">.<\/span>innerHTML <span class=\"token operator\">&#043;&#061;<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">&lt;p style&#061;&#034;color: red;&#034;&gt;\u51fa\u9519\u4e86:<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">escapeHtml<\/span><span class=\"token punctuation\">(<\/span>err<span class=\"token punctuation\">.<\/span>message<span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">&lt;\/p&gt;<\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> timeEl <span class=\"token operator\">&#061;<\/span> aiMsgElement<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;.message-time&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>timeEl<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                timeEl<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">formatTime<\/span><span class=\"token punctuation\">(<\/span>Date<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token function\">loadSessions<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token function\">scrollToBottom<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u6dfb\u52a0\u5355\u6761\u6d88\u606fDOM<br \/>\n * &#064;param {string} role user \/ assistant<br \/>\n * &#064;param {string} content<br \/>\n * &#064;param {number} timestamp<br \/>\n * &#064;returns {HTMLElement}<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">addMessage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">role<span class=\"token punctuation\">,<\/span> content<span class=\"token punctuation\">,<\/span> timestamp<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> msgDiv <span class=\"token operator\">&#061;<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">createElement<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;div&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    msgDiv<span class=\"token punctuation\">.<\/span>className <span class=\"token operator\">&#061;<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">message <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>role<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> avatar <span class=\"token operator\">&#061;<\/span> role <span class=\"token operator\">&#061;&#061;&#061;<\/span> <span class=\"token string\">&#039;assistant&#039;<\/span> <span class=\"token operator\">?<\/span> <span class=\"token string\">&#039;AI&#039;<\/span> <span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;\u6211&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    msgDiv<span class=\"token punctuation\">.<\/span>innerHTML <span class=\"token operator\">&#061;<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\"><br \/>\n        &lt;div class&#061;&#034;message-avatar&#034;&gt;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>avatar<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">&lt;\/div&gt;<br \/>\n        &lt;div class&#061;&#034;message-content&#034;&gt;<br \/>\n            &lt;div class&#061;&#034;message-text&#034;&gt;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">renderMarkdown<\/span><span class=\"token punctuation\">(<\/span>content<span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">&lt;\/div&gt;<br \/>\n            &lt;div class&#061;&#034;message-time&#034;&gt;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token function\">formatTime<\/span><span class=\"token punctuation\">(<\/span>timestamp<span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">&lt;\/div&gt;<br \/>\n        &lt;\/div&gt;<br \/>\n    <\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>messagesContainer<span class=\"token punctuation\">.<\/span><span class=\"token function\">appendChild<\/span><span class=\"token punctuation\">(<\/span>msgDiv<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token function\">addCopyButtons<\/span><span class=\"token punctuation\">(<\/span>msgDiv<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token function\">scrollToBottom<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> msgDiv<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * Markdown\u6e32\u67d3&#xff0c;\u5f02\u5e38\u964d\u7ea7\u8f6c\u4e49HTML<br \/>\n * &#064;param {string} text<br \/>\n * &#064;returns {string}<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">renderMarkdown<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">text<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>text<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token string\">&#039;&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> marked<span class=\"token punctuation\">.<\/span><span class=\"token function\">parse<\/span><span class=\"token punctuation\">(<\/span>text<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token function\">escapeHtml<\/span><span class=\"token punctuation\">(<\/span>text<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u7ed9pre\u4ee3\u7801\u5757\u9644\u52a0\u590d\u5236\u6309\u94ae<br \/>\n * &#064;param {HTMLElement} container<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">addCopyButtons<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">container<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> pres <span class=\"token operator\">&#061;<\/span> container<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelectorAll<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;pre&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    pres<span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">pre<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>pre<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;.copy-btn&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> btn <span class=\"token operator\">&#061;<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">createElement<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;button&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        btn<span class=\"token punctuation\">.<\/span>className <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;copy-btn&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        btn<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;\u590d\u5236&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        btn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;click&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> code <span class=\"token operator\">&#061;<\/span> pre<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;code&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>code<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                navigator<span class=\"token punctuation\">.<\/span>clipboard<span class=\"token punctuation\">.<\/span><span class=\"token function\">writeText<\/span><span class=\"token punctuation\">(<\/span>code<span class=\"token punctuation\">.<\/span>innerText<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                    btn<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;\u5df2\u590d\u5236&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                    <span class=\"token function\">setTimeout<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> btn<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;\u590d\u5236&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        pre<span class=\"token punctuation\">.<\/span><span class=\"token function\">appendChild<\/span><span class=\"token punctuation\">(<\/span>btn<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u8f93\u5165\u6846\u952e\u76d8\u4e8b\u4ef6 Enter\u53d1\u9001 Shift&#043;Enter\u6362\u884c<br \/>\n * &#064;param {KeyboardEvent} e<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">handleInputKeydown<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">e<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">.<\/span>key <span class=\"token operator\">&#061;&#061;&#061;<\/span> <span class=\"token string\">&#039;Enter&#039;<\/span> <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token operator\">!<\/span>e<span class=\"token punctuation\">.<\/span>shiftKey<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        e<span class=\"token punctuation\">.<\/span><span class=\"token function\">preventDefault<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token function\">handleSendMessage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u8f93\u5165\u6846\u5185\u5bb9\u53d8\u5316&#xff0c;\u66f4\u65b0\u5b57\u6570\u3001\u81ea\u52a8\u9ad8\u5ea6<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">handleInputChange<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">updateCharCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>sendBtn<span class=\"token punctuation\">.<\/span>disabled <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">!<\/span>elements<span class=\"token punctuation\">.<\/span>messageInput<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">.<\/span><span class=\"token function\">trim<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">||<\/span> isSending<span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>messageInput<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;auto&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>messageInput<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">min<\/span><span class=\"token punctuation\">(<\/span>elements<span class=\"token punctuation\">.<\/span>messageInput<span class=\"token punctuation\">.<\/span>scrollHeight<span class=\"token punctuation\">,<\/span> <span class=\"token number\">200<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token string\">&#039;px&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u66f4\u65b0\u8f93\u5165\u6846\u5b57\u6570\u7edf\u8ba1<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">updateCharCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> len <span class=\"token operator\">&#061;<\/span> elements<span class=\"token punctuation\">.<\/span>messageInput<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">;<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>charCount<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">&#061;<\/span> len<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * \u6d88\u606f\u5bb9\u5668\u6eda\u52a8\u5230\u5e95\u90e8<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">scrollToBottom<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    elements<span class=\"token punctuation\">.<\/span>messagesContainer<span class=\"token punctuation\">.<\/span>scrollTop <span class=\"token operator\">&#061;<\/span> elements<span class=\"token punctuation\">.<\/span>messagesContainer<span class=\"token punctuation\">.<\/span>scrollHeight<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061; \u901a\u7528\u5de5\u5177\u51fd\u6570 &#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;&#061;<\/span><br \/>\n<span class=\"token comment\">\/**<br \/>\n * \u65f6\u95f4\u683c\u5f0f\u5316&#xff0c;\u6beb\u79d2\u65f6\u95f4\u6233\u8f6c\u53cb\u597d\u4e2d\u6587\u65f6\u95f4<br \/>\n * &#064;param {number} timestamp<br \/>\n * &#064;returns {string}<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">formatTime<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">timestamp<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> date <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span>timestamp<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> now <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token comment\">\/\/ \u4eca\u5929<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>date<span class=\"token punctuation\">.<\/span><span class=\"token function\">toDateString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&#061;&#061;<\/span> now<span class=\"token punctuation\">.<\/span><span class=\"token function\">toDateString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> date<span class=\"token punctuation\">.<\/span><span class=\"token function\">toLocaleTimeString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;zh-CN&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token literal-property property\">hour<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;2-digit&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">minute<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;2-digit&#039;<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token comment\">\/\/ \u6628\u5929<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> yesterday <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span>now<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    yesterday<span class=\"token punctuation\">.<\/span><span class=\"token function\">setDate<\/span><span class=\"token punctuation\">(<\/span>yesterday<span class=\"token punctuation\">.<\/span><span class=\"token function\">getDate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>date<span class=\"token punctuation\">.<\/span><span class=\"token function\">toDateString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&#061;&#061;<\/span> yesterday<span class=\"token punctuation\">.<\/span><span class=\"token function\">toDateString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token string\">&#039;\u6628\u5929 &#039;<\/span> <span class=\"token operator\">&#043;<\/span> date<span class=\"token punctuation\">.<\/span><span class=\"token function\">toLocaleTimeString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;zh-CN&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token literal-property property\">hour<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;2-digit&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">minute<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;2-digit&#039;<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token comment\">\/\/ \u672c\u5e74\u5ea6<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>date<span class=\"token punctuation\">.<\/span><span class=\"token function\">getFullYear<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&#061;&#061;<\/span> now<span class=\"token punctuation\">.<\/span><span class=\"token function\">getFullYear<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> date<span class=\"token punctuation\">.<\/span><span class=\"token function\">toLocaleDateString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;zh-CN&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token literal-property property\">month<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;2-digit&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">day<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;2-digit&#039;<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token string\">&#039; &#039;<\/span> <span class=\"token operator\">&#043;<\/span><br \/>\n            date<span class=\"token punctuation\">.<\/span><span class=\"token function\">toLocaleTimeString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;zh-CN&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token literal-property property\">hour<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;2-digit&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">minute<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;2-digit&#039;<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> date<span class=\"token punctuation\">.<\/span><span class=\"token function\">toLocaleDateString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;zh-CN&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * HTML\u7279\u6b8a\u5b57\u7b26\u8f6c\u4e49&#xff0c;\u9632\u6b62XSS<br \/>\n * &#064;param {string} str<br \/>\n * &#064;returns {string}<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">escapeHtml<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">str<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> div <span class=\"token operator\">&#061;<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">createElement<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;div&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    div<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">&#061;<\/span> str<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> div<span class=\"token punctuation\">.<\/span>innerHTML<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<hr \/>\n<h2>3 ~&gt; Trae AI \u751f\u6210\u524d\u7aef\u9875\u9762\u63d0\u793a\u8bcd\u5de5\u7a0b<\/h2>\n<h3>3.1 \u63d0\u793a\u8bcd\u7f16\u5199\u539f\u5219<\/h3>\n<ul>\n<li>\u5c06\u5b8c\u6574\u63a5\u53e3\u5b9a\u4e49\u3001\u9875\u9762\u4ea4\u4e92\u9700\u6c42\u3001\u6837\u5f0f\u7ea6\u675f\u5168\u90e8\u5199\u5165\u6587\u672c\u6587\u4ef6Chat\u524d\u7aef\u9875\u9762\u9700\u6c42\u8bf4\u660e.txt<\/li>\n<li>\u5728 Trae Builder \u5bf9\u8bdd\u7a97\u53e3&#xff0c;\u4f7f\u7528#\u5f15\u7528 File \u7c7b\u578b\u7684\u9700\u6c42\u8bf4\u660e txt \u6587\u4ef6&#xff0c;\u9009\u62e9 DeepSeek \u6a21\u578b&#xff0c;Auto \u6a21\u5f0f\u751f\u6210\u4ee3\u7801<\/li>\n<li>\u4f18\u52bf&#xff1a;\u907f\u514d\u5bf9\u8bdd\u6846\u8f93\u5165\u5b57\u6570\u9650\u5236&#xff0c;\u5b8c\u6574\u4f20\u9012\u5168\u90e8\u9700\u6c42&#xff0c;\u4fbf\u4e8e\u4fee\u6539\u7ef4\u62a4\u9700\u6c42\u6587\u6863&#xff0c;\u65e0\u9700\u91cd\u590d\u7c98\u8d34\u5927\u6bb5\u63d0\u793a\u8bcd<\/li>\n<\/ul>\n<h3>3.2 \u540e\u7aef C&#043;&#043; httplib \u9759\u6001\u8d44\u6e90\u6302\u8f7d\u5173\u952e\u4ee3\u7801\u7247\u6bb5<\/h3>\n<p><span class=\"token comment\">\/\/ \u8bbe\u7f6ehttp\u8def\u7531<\/span><br \/>\n<span class=\"token function\">sethttpRoutes<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token comment\">\/\/ \u6302\u8f7dwww\u76ee\u5f55\u4e3aweb\u9759\u6001\u8d44\u6e90\u6839\u76ee\u5f55<\/span><br \/>\n<span class=\"token comment\">\/\/ \u8bbf\u95ee http:\/\/ip:port \u81ea\u52a8\u6620\u5c04 index.html<\/span><br \/>\n_chaterver<span class=\"token operator\">-&gt;<\/span><span class=\"token function\">set_mount_point<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;\/&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">&#034;.\/www&#034;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u540e\u53f0\u5b50\u7ebf\u7a0b\u8fd0\u884chttp\u670d\u52a1&#xff0c;\u4e0d\u963b\u585e\u4e3b\u7ebf\u7a0b<\/span><br \/>\nstd<span class=\"token double-colon punctuation\">::<\/span>thread <span class=\"token function\">serverThread<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">[<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    _chaterver<span class=\"token operator\">-&gt;<\/span><span class=\"token function\">listen<\/span><span class=\"token punctuation\">(<\/span>_config<span class=\"token punctuation\">.<\/span>host<span class=\"token punctuation\">,<\/span> _config<span class=\"token punctuation\">.<\/span>port<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token function\">INFO<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;ChatServer start on {}:{}&#034;<\/span><span class=\"token punctuation\">,<\/span>_config<span class=\"token punctuation\">.<\/span>host<span class=\"token punctuation\">,<\/span>_config<span class=\"token punctuation\">.<\/span>port<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\nserverThread<span class=\"token punctuation\">.<\/span><span class=\"token function\">detach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n_isRunning<span class=\"token punctuation\">.<\/span><span class=\"token function\">store<\/span><span class=\"token punctuation\">(<\/span><span class=\"token boolean\">true<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token function\">INFO<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;ChatServer start success!!!&#034;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<ul>\n<li>\u524d\u7aef\u4e09\u4e2a\u6587\u4ef6\u5168\u90e8\u653e\u7f6e\u670d\u52a1\u5668.\/www\u76ee\u5f55<\/li>\n<li>\u8bbf\u95ee\u8def\u5f84&#xff1a;http:\/\/192.168.100.238:8080\/index.html&#xff0c;\u7b80\u5199http:\/\/192.168.100.238:8080\u7b49\u4ef7\u8bbf\u95ee index.html<\/li>\n<\/ul>\n<hr \/>\n<h2>4 ~&gt; \u90e8\u7f72\u8c03\u8bd5\u6ce8\u610f\u4e8b\u9879<\/h2>\n<h3>4.1 \u8de8\u57df\u95ee\u9898<\/h3>\n<ul>\n<li>\u524d\u7aef\u76f4\u63a5\u6d4f\u89c8\u5668\u672c\u5730\u6253\u5f00 html \u6587\u4ef6\u4f1a\u89e6\u53d1 CORS \u8de8\u57df&#xff1b;\u4f18\u5148\u901a\u8fc7\u540e\u7aef httplib \u670d\u52a1\u8bbf\u95ee\u9875\u9762<\/li>\n<li>\u540e\u7aef\u670d\u52a1\u5fc5\u987b\u914d\u7f6e CORS \u54cd\u5e94\u5934&#xff0c;\u5141\u8bb8\u524d\u7aef\u9875\u9762\u53d1\u8d77 fetch \/ XMLHttpRequest \u8bf7\u6c42<\/li>\n<\/ul>\n<h3>4.2 SSE \u6d41\u5f0f\u89e3\u6790<\/h3>\n<ul>\n<li>\u4f7f\u7528XMLHttpRequest\u5904\u7406 SSE \u5206\u7247&#xff0c;\u6309\\\\n\\\\n\u5206\u5272\u4e8b\u4ef6\u5757&#xff0c;\u8bc6\u522bdata: \u524d\u7f00&#xff0c;\u9047\u5230[DONE]\u7ed3\u675f\u6d41\u5f0f\u4f1a\u8bdd<\/li>\n<li>\u4e0d\u8981\u4e00\u6b21\u6027\u7b49\u5f85 response \u5168\u90e8\u8fd4\u56de&#xff0c;\u4f9d\u9760onprogress\u4e8b\u4ef6\u9010\u5757\u5904\u7406\u8f93\u51fa<\/li>\n<\/ul>\n<h3>4.3 XSS \u5b89\u5168\u9632\u62a4<\/h3>\n<ul>\n<li>\u6240\u6709\u540e\u7aef\u8fd4\u56de\u7684\u539f\u59cb\u6587\u672c&#xff0c;\u6e32\u67d3 DOM \u524d\u4f7f\u7528escapeHtml()\u505a HTML \u8f6c\u4e49&#xff1b;Markdown \u6e32\u67d3\u7531 marked \u5e93\u5904\u7406\u3002<\/li>\n<\/ul>\n<h3>4.4 \u7b2c\u4e09\u65b9 CDN \u4f9d\u8d56<\/h3>\n<ul>\n<li>marked\u3001highlight.js \u4f7f\u7528\u516c\u5171 CDN&#xff1b;\u79bb\u7ebf\u90e8\u7f72\u573a\u666f\u9700\u8981\u5c06 js\/css \u4e0b\u8f7d\u653e\u5230 www \u76ee\u5f55&#xff0c;\u4fee\u6539 html \u4e2d\u5f15\u7528\u8def\u5f84\u3002<\/li>\n<\/ul>\n<h3>4.5 \u8f93\u5165\u6821\u9a8c<\/h3>\n<ul>\n<li>\u524d\u7aef\u9650\u5236\u6700\u5927\u8f93\u5165\u5b57\u7b26 2000&#xff1b;\u540e\u7aef\u63a5\u53e3\u540c\u6837\u8981\u505a\u5b57\u7b26\u957f\u5ea6\u6821\u9a8c&#xff0c;\u4e0d\u80fd\u53ea\u4f9d\u8d56\u524d\u7aef\u6821\u9a8c\u3002<\/li>\n<\/ul>\n<hr \/>\n<h2>\u7ed3\u5c3e<\/h2>\n<p><font color=\"#3498db\"> uu\u4eec&#xff0c;\u672c\u6587\u7684\u5185\u5bb9\u5230\u8fd9\u91cc\u5c31\u5168\u90e8\u7ed3\u675f\u4e86&#xff0c;\u827e\u8389\u4e1d\u5728\u8fd9\u91cc\u518d\u6b21\u611f\u8c22\u60a8\u7684\u9605\u8bfb&#xff01;<\/font><\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<h3>\n<p>      <font color=\"#CC0000\">\u827e\u8389\u4e1d\u52aa\u529b\u7ec3\u5251<\/font><br \/>\n     <\/h3>\n<p><b><\/b><\/p>\n<p>     <font color=\"7B68EE\" size=\"4\">C\/C&#043;&#043; &amp; Linux \u5e95\u5c42\u63a2\u7d22\u8005 | \u4e00\u4e2a\u6b63\u5728\u52aa\u529b\u7ec3\u5251\u7684\u6280\u672f\u535a\u4e3b<\/font><\/p>\n<hr \/>\n<p>      &#x1f440;<br \/>\n      <b>\u3010\u5173\u6ce8\u3011<\/b> \u8ddf\u968f\u6211\u4e00\u8d77\u6df1\u8015\u6280\u672f\u9886\u57df&#xff0c;\u89c1\u8bc1\u6bcf\u4e00\u6b21\u6210\u957f\u3002<\/p>\n<p>      \u2764\ufe0f<br \/>\n      <b>\u3010\u70b9\u8d5e\u3011<\/b> \u8ba9\u4f18\u8d28\u5185\u5bb9\u88ab\u66f4\u591a\u4eba\u770b\u89c1&#xff0c;\u8ba9\u77e5\u8bc6\u4f20\u9012\u66f4\u6709\u529b\u91cf\u3002<\/p>\n<p>      \u2b50<br \/>\n      <b>\u3010\u6536\u85cf\u3011<\/b> \u628a\u6838\u5fc3\u77e5\u8bc6\u70b9\u5b58\u597d&#xff0c;\u5728\u9700\u8981\u65f6\u968f\u65f6\u67e5\u3001\u968f\u65f6\u7528\u3002<\/p>\n<p>      &#x1f4ac;<br \/>\n      <b>\u3010\u8bc4\u8bba\u3011<\/b> \u5206\u4eab\u4f60\u7684\u7ecf\u9a8c\u6216\u7591\u95ee&#xff0c;\u8bc4\u8bba\u533a\u4e00\u8d77\u4ea4\u6d41\u907f\u5751&#xff01;<\/p>\n<p><b><font color=\"#3498db\">\u4e0d\u8981\u5fd8\u8bb0\u7ed9\u535a\u4e3b\u201c\u4e00\u952e\u56db\u8fde\u201d\u54e6&#xff01;<\/font><\/b><\/p>\n<p>       <font color=\"#CC0000\">\u201c\u4eca\u65e5\u7ec3\u5251\u8fbe\u6210&#xff01;\u201d<\/font><\/p>\n<p>     <img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/11\/20261107064938-6aeeca021bbc1.png\" width=\"200\" \/> <\/p>\n<p> <font color=\"#9b59b6\"> \u201c\u6280\u672f\u4e4b\u8def\u96be\u514d\u6709\u56f0\u60d1&#xff0c;\u4f46\u540c\u884c\u7684\u4eba\u4f1a\u8ba9\u524d\u8fdb\u66f4\u6709\u65b9\u5411\u3002\u201d <\/font><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><font color=\"#e74c3c\"> \u7ed3\u8bed&#xff1a;\u5e0c\u671b\u5bf9\u5b66\u4e60Linux\u76f8\u5173\u5185\u5bb9\u7684uu\u6709\u6240\u5e2e\u52a9&#xff0c;\u4e0d\u8981\u5fd8\u8bb0\u7ed9\u535a\u4e3b\u201c\u4e00\u952e\u56db\u8fde\u201d\u54e6&#xff01;<\/font><\/p>\n<p><font color=\"#9b59b6\">\u5f80\u671f\u56de\u987e&#xff1a;<\/font><\/p>\n<p>\u3010AI\u5927\u6a21\u578b\u63a5\u5165SDK\u3011ChatServer\u63a5\u53e3\u6d4b\u8bd5<\/p>\n<p>  <font color=\"#CC0000\">&#x1f5e1;\u535a\u4e3b\u5728\u8fd9\u91cc\u653e\u4e86\u4e00\u53ea\u5c0f\u72d7&#xff0c;\u5927\u5bb6\u770b\u5b8c\u4e86\u6478\u6478\u5c0f\u72d7\u653e\u677e\u4e00\u4e0b\u5427&#xff01;&#x1f5e1; <\/font><\/p>\n<p>  <font color=\"#CC0000\">\u0aee\u208d \u02f6 \u02ca \u1d25 \u02cb\u02f6\u208e\u10d0 <\/font><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/11\/20261107064938-6aeeca0298d25.gif\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#x1f3ac; \u4e2a\u4eba\u4e3b\u9875&#xff1a;\u827e\u8389\u4e1d\u52aa\u529b\u7ec3\u5251\u2744\u4e13\u680f\u4f20\u9001\u95e8&#xff1a;\u300aC\u8bed\u8a00\u300b\u300a\u6570\u636e\u7ed3\u6784\u4e0e\u7b97\u6cd5\u300b\u300aC\/C\u5e72\u8d27\u5206\u4eab&amp;\u5b66\u4e60\u8fc7\u7a0b\u8bb0\u5f55\u300b \u300aLinux\u64cd\u4f5c\u7cfb\u7edf\u7f16\u7a0b\u8be6\u89e3\u300b\u300a\u7b14\u8bd5\/\u9762\u8bd5\u5e38\u89c1\u7b97\u6cd5&#xff1a;\u4ece\u57fa\u7840\u5230\u8fdb\u9636\u300b\u300aPython\u5e72\u8d27\u5206\u4eab\u300b\u2b50\ufe0f\u4e3a\u5929\u5730\u7acb\u5fc3&#xff0c;\u4e3a\u751f\u6c11\u7acb\u547d&#xff0c;\u4e3a\u5f80\u5723\u7ee7\u7edd\u5b66&#xff0c;\u4e3a\u4e07\u4e16\u5f00\u592a\u5e73 &#x1f3ac; \u827e\u8389\u4e1d\u7684\u7b80\u4ecb&#xff1a; \u6587\u7ae0\u76ee\u5f551 ~&gt; AI \u804a\u5929\u52a9\u624b\u524d\u7aef\u5de5\u7a0b\u9700\u6c42\u4e0e\u5b9e\u73b01.1 \u9879\u76ee\u80cc\u666f1.2 \u540e\u7aef\u63a5<\/p>\n","protected":false},"author":2,"featured_media":123496,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[11820,66,55,87,132,371],"topic":[],"class_list":["post-123501","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-atomgit","tag-ai","tag-c","tag-87","tag-132","tag-371"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u3010AI\u5927\u6a21\u578b\u63a5\u5165SDK\u3011\u524d\u7aef\u9875\u9762\u63d0\u793a\u8bcd - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/123501.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u3010AI\u5927\u6a21\u578b\u63a5\u5165SDK\u3011\u524d\u7aef\u9875\u9762\u63d0\u793a\u8bcd - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"&#x1f3ac; \u4e2a\u4eba\u4e3b\u9875&#xff1a;\u827e\u8389\u4e1d\u52aa\u529b\u7ec3\u5251\u2744\u4e13\u680f\u4f20\u9001\u95e8&#xff1a;\u300aC\u8bed\u8a00\u300b\u300a\u6570\u636e\u7ed3\u6784\u4e0e\u7b97\u6cd5\u300b\u300aC\/C\u5e72\u8d27\u5206\u4eab&amp;\u5b66\u4e60\u8fc7\u7a0b\u8bb0\u5f55\u300b \u300aLinux\u64cd\u4f5c\u7cfb\u7edf\u7f16\u7a0b\u8be6\u89e3\u300b\u300a\u7b14\u8bd5\/\u9762\u8bd5\u5e38\u89c1\u7b97\u6cd5&#xff1a;\u4ece\u57fa\u7840\u5230\u8fdb\u9636\u300b\u300aPython\u5e72\u8d27\u5206\u4eab\u300b\u2b50\ufe0f\u4e3a\u5929\u5730\u7acb\u5fc3&#xff0c;\u4e3a\u751f\u6c11\u7acb\u547d&#xff0c;\u4e3a\u5f80\u5723\u7ee7\u7edd\u5b66&#xff0c;\u4e3a\u4e07\u4e16\u5f00\u592a\u5e73 &#x1f3ac; \u827e\u8389\u4e1d\u7684\u7b80\u4ecb&#xff1a; \u6587\u7ae0\u76ee\u5f551 ~&gt; AI \u804a\u5929\u52a9\u624b\u524d\u7aef\u5de5\u7a0b\u9700\u6c42\u4e0e\u5b9e\u73b01.1 \u9879\u76ee\u80cc\u666f1.2 \u540e\u7aef\u63a5\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/123501.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-07T06:49:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/11\/20261107064937-6aeeca0161a84.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/123501.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/123501.html\",\"name\":\"\u3010AI\u5927\u6a21\u578b\u63a5\u5165SDK\u3011\u524d\u7aef\u9875\u9762\u63d0\u793a\u8bcd - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-11-07T06:49:39+00:00\",\"dateModified\":\"2026-11-07T06:49:39+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/123501.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/123501.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/123501.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u3010AI\u5927\u6a21\u578b\u63a5\u5165SDK\u3011\u524d\u7aef\u9875\u9762\u63d0\u793a\u8bcd\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u3010AI\u5927\u6a21\u578b\u63a5\u5165SDK\u3011\u524d\u7aef\u9875\u9762\u63d0\u793a\u8bcd - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/123501.html","og_locale":"zh_CN","og_type":"article","og_title":"\u3010AI\u5927\u6a21\u578b\u63a5\u5165SDK\u3011\u524d\u7aef\u9875\u9762\u63d0\u793a\u8bcd - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"&#x1f3ac; \u4e2a\u4eba\u4e3b\u9875&#xff1a;\u827e\u8389\u4e1d\u52aa\u529b\u7ec3\u5251\u2744\u4e13\u680f\u4f20\u9001\u95e8&#xff1a;\u300aC\u8bed\u8a00\u300b\u300a\u6570\u636e\u7ed3\u6784\u4e0e\u7b97\u6cd5\u300b\u300aC\/C\u5e72\u8d27\u5206\u4eab&amp;\u5b66\u4e60\u8fc7\u7a0b\u8bb0\u5f55\u300b \u300aLinux\u64cd\u4f5c\u7cfb\u7edf\u7f16\u7a0b\u8be6\u89e3\u300b\u300a\u7b14\u8bd5\/\u9762\u8bd5\u5e38\u89c1\u7b97\u6cd5&#xff1a;\u4ece\u57fa\u7840\u5230\u8fdb\u9636\u300b\u300aPython\u5e72\u8d27\u5206\u4eab\u300b\u2b50\ufe0f\u4e3a\u5929\u5730\u7acb\u5fc3&#xff0c;\u4e3a\u751f\u6c11\u7acb\u547d&#xff0c;\u4e3a\u5f80\u5723\u7ee7\u7edd\u5b66&#xff0c;\u4e3a\u4e07\u4e16\u5f00\u592a\u5e73 &#x1f3ac; \u827e\u8389\u4e1d\u7684\u7b80\u4ecb&#xff1a; \u6587\u7ae0\u76ee\u5f551 ~&gt; AI \u804a\u5929\u52a9\u624b\u524d\u7aef\u5de5\u7a0b\u9700\u6c42\u4e0e\u5b9e\u73b01.1 \u9879\u76ee\u80cc\u666f1.2 \u540e\u7aef\u63a5","og_url":"https:\/\/www.wsisp.com\/helps\/123501.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-11-07T06:49:39+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/11\/20261107064937-6aeeca0161a84.png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"17 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/123501.html","url":"https:\/\/www.wsisp.com\/helps\/123501.html","name":"\u3010AI\u5927\u6a21\u578b\u63a5\u5165SDK\u3011\u524d\u7aef\u9875\u9762\u63d0\u793a\u8bcd - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-11-07T06:49:39+00:00","dateModified":"2026-11-07T06:49:39+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/123501.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/123501.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/123501.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"\u3010AI\u5927\u6a21\u578b\u63a5\u5165SDK\u3011\u524d\u7aef\u9875\u9762\u63d0\u793a\u8bcd"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/123501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=123501"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/123501\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/123496"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=123501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=123501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=123501"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=123501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}