-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
11666 lines (10333 loc) · 781 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!-- :::Support Chinese-Simplified and English. Change Language in the web page: "Settings" > "Language" -->
<!-- :::You can search for "Editable" in the code to find the most frequently modified code. -->
<!-- :::Modifying the default language in the code (change to English): Please search for "Default language" in the code for quick location. (* Modify 'settingsLanguage' to 'en' primarily in 'userVariables_default'.) -->
<!-- :::How to add a new language in the code: Please search for "settingsLanguage" and "settingsLanguageOptions" in the code, and then modify them. -->
<!-- ::: 搜索“可修改” search for "Editable" -->
<!-- :::网页显示报错：打开网页/网站后，对话框和部分按钮显示为{{x.msg}}、{{x.msg}}、{{sentext}}... ::: -->
<!-- 1. 4月23日之前的版本不排除CDN挂掉导致无法加载Vue.js的可能，之后的版本备有国内外3条CDN线路（如果Vue加载失败会弹出提醒） -->
<!-- 2. 未提示Vue.js加载失败，说明Vue已成功加载，这种情况还出现错误，说明是因为使用淘汰的浏览器/设备老旧/浏览器多年未更新，不支持当前版本的Vue，请换浏览器或更新浏览器版本。淘汰的浏览器：比如IE11(Internet Explorer 11)。设备老旧：如十年前旧款iPad因无法更新浏览器而导致无法支持新协议、新版Vue -->
<!-- :::如何改代码？ ::: -->
<!-- 在编辑代码时搜索“可修改”来快速定位最常修改的部分。-->
<!-- :::Mac复制网页源码后如何粘贴代码？::: -->
<!-- 1.打开“文本编辑”App，菜单选“文件”>“新建”，然后菜单选“格式”>“制作纯文本”。 -->
<!-- 2.粘贴全部HTML代码。 -->
<!-- 3.菜单选“文件”>“存储”，文件名为“index.html”，下拉框“纯文本编码”选“Unicode(UTF-8)”，然后点击存储（保存）。 -->
<!-- :::Mac如何修改扩展名为html的文件？::: -->
<!-- 1.打开“文本编辑”App，菜单选“文件”>“打开”，找到html文件，单击选中，先别打开。 -->
<!-- 2.点击对话框底部的“显示选项”/“选项”，然后打勾选中“忽略多信息文本命令”，现在可以点击“打开”，即可编辑html文件。 -->
<!-- :::Mac电脑::: -->
<!-- 使用[文本编辑APP]修改网页的，保存时有个[纯文本编码]下拉框，选[Unicode(UTF-8)] -->
<!-- :::Windows电脑::: -->
<!-- 使用[记事本]来修改网页的，保存时在[编码]下拉框中选[UTF-8]。扩展名如果是.txt，需要改为.html 另外，编辑代码时，建议在菜单栏的“格式”里关闭掉“自动换行” -->
<!-- :::关于文件名::: -->
<!-- 1.电脑上使用，文件名随意，但扩展名必须是.html 2.如需上传至虚拟主机、服务器、GitHub、Gitee，文件名改为英文，默认主页的文件名为：index.html -->
<!-- :::欢迎来以下评论区留言交流::: -->
<!-- 抖音：@林同学不姓林 B站：@林同学不姓林 https://space.bilibili.com/3493262545389917 小站 http://lin2025.gitee.io -->
<!-- 当前版本 v8.28 新增记忆模式(上下文模式) Added [Contextual mode]. 最新更新 https://github.com/lin2025/gpt3.5/ 国内线路：https://gitee.com/lin2025/gpt3.5/ -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 可修改 Editable - 默认不屏蔽搜索引擎机器人，想屏蔽的请去除注释。 Default allow search engine robots. -->
<!-- <meta name="ROBOTS" content="noindex,nofllow"> -->
<!-- 可修改 Editable - 网页标题 -->
<title>LinGPT - ChatGPT / GPT-4</title>
<meta name="description" content="LinGPT - A ChatGPT (GPT-3.5 / GPT-4) Webpage with Just a Single HTML File." />
<!-- 网页在手机/平板上的显示比例 默认缩放80%（ initial-scale=0.8 ） -->
<meta name="viewport" content="width=device-width,initial-scale=0.8,minimum-scale=0.5,maximum-scale=2,user-scalable=yes,viewport-fit=cover">
<link rel="shortcut icon" href="https://openai.com/favicon.ico">
<!-- 可修改 Editable - iPhone/iPad将网页添加到主屏幕后显示的Logo 默认为ChatGPT的Logo *小白不需要改。需要传网页到Github/Gitee/静态网页托管平台/主机/服务器的同学，才需要设置。 简单点快速设置：任意格式的正方形图片。 推荐参考设置：png格式 180x180 -->
<link rel="apple-touch-icon" href="https://openai.com/favicon.ico">
<!-- Vue首选CDN(线路1) Vue是一款用于构建用户界面的JavaScript框架，网页常用技术 -->
<!-- 20230520 tips: 不要使用3.2.47的prod版本，会偶尔产生错误，影响使用。 Do not use the prod version of 3.2.47, as I have found it to occasionally produce errors with unknown causes. -->
<!-- 20230603 tips: 使用3.3.4的prod版本两周了，非常稳定，没有再报错，很棒的版本。 I've been using the prod version of 3.3.4 for two weeks now and it has been very stable, without any errors. It's a great version. -->
<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<!-- Vue备选CDN(线路2) 首选CDN失效后，自动加载备选CDN，确保vue的正确加载。 unescape()括号里的是一种编码，转义尖括号(<>)，非乱码。在线解码工具 https://tool.ip138.com/escape/ -->
<script> !window.Vue && document.write(unescape('%3Cscript src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.prod.js"%3E%3C/script%3E') ) </script>
<!-- 以下为css样式 已压缩，可使用工具格式化 -->
<!-- CSS格式化工具1: https://tool.ip138.com/css/ -->
<!-- CSS格式化工具2: http://www.ab173.com/gongju/format/css.php -->
<style>
#loading-mask{background-color:#ededed;z-index:900999}
#loading-mask div{text-align:center;font-size:12px;color:#b4b4b4}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-thumb{background-color:#e1e1e1;border-radius:10px}
::-webkit-scrollbar-thumb:hover{background-color:#cdcdcd}
body::-webkit-scrollbar-thumb{background-color:#e1e1e1;border-radius:10px}
body::-webkit-scrollbar-thumb:hover{background-color:#cdcdcd}
body::-webkit-scrollbar-track{background-color:#ededed}
body::-webkit-scrollbar-track:hover{background-color:#ededed}
body::-webkit-scrollbar-corner{background-color:#ededed}
.dialog-wrapper .dialog-scroll::-webkit-scrollbar-thumb{background-color:#d2d2d2;border-radius:10px}
.dialog-wrapper .dialog-scroll::-webkit-scrollbar-thumb:hover{background-color:#c3c3c3}
.dialog-wrapper .dialog-scroll::-webkit-scrollbar-track{background-color:#ededed;border-radius:10px}
.dialog-wrapper .dialog-scroll::-webkit-scrollbar-track:hover{background-color:#ededed}
.dialog-wrapper .dialog-scroll::-webkit-scrollbar-corner{background-color:#ededed}
.notification-wrapper .dialog-scroll::-webkit-scrollbar-thumb{background-color:#e8eb95;border-radius:10px}
.notification-wrapper .dialog-scroll::-webkit-scrollbar-thumb:hover{background-color:#dadd8b}
.notification-wrapper .dialog-scroll::-webkit-scrollbar-track{background-color:#fdffb4}
.notification-wrapper .dialog-scroll::-webkit-scrollbar-track:hover{background-color:#fdffb4}
.notification-wrapper .dialog-scroll::-webkit-scrollbar-corner{background-color:#fdffb4}
body{margin-bottom:0px;margin-top:8px;overflow-y:scroll;background-color:#ededed;font-family:Helvetica Neue,Helvetica,Hiragino Sans GB,"SF Pro SC",Microsoft YaHei,"PingFang SC",Arial,sans-serif}
.bottom-position{height:95px}
.newcontext-hr{height:1px;background-color:#cfcfcf;border:none;width:92%;margin-top:16px;margin-bottom:20px}
.wechatstyle-datetime{display:block;font-size:13px;text-align:center;color:#bbbbbb;margin-top:20px;margin-bottom:17px;-webkit-text-size-adjust:100%;}
.msgdatetimediv{position:relative;-webkit-text-size-adjust:100%;}
.usermsg-datetime{font-size:12px;color:#bbbbbb;bottom:auto;left:auto;right:54px;top:-14px;position:absolute}
.aimsg-datetime{font-size:12px;color:#bbbbbb;bottom:auto;left:57px;right:auto;top:-14px;position:absolute}
.userinfo{display:flex;flex-direction:row-reverse;align-items:flex-start;padding-right:2px;margin-top:17px;animation:oneshow 0.8s ease 1}
.usermsg{color:#191919;display:flex;flex-direction:column;justify-content:center;padding:9px 13px;border-radius:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;margin-right:11px;background-color:#95eb6c}
.aiinfo{display:flex;flex-direction:row;align-items:flex-start;margin-left:7px;margin-top:17px;animation:oneshow 0.8s ease 1}
.aimsg{color:#191919;display:flex;flex-direction:column;justify-content:center;padding:9px 13px;border-radius:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;margin-left:11px;background-color:#ffffff}
.aiinfo .msgdiv::before{content:"";display:block;position:absolute;border:12px solid transparent;border-right-color:rgba(255,255,255,1);left:-7px;top:8px}
.userinfo .msgdiv::before{content:"";display:block;position:absolute;border:12px solid transparent;border-left-color:#95eb6c;right:-7px;top:8px}
.msgcopydiv{width:auto;max-width:76%}
.chat-img{border-radius:6px;height:2.3rem;width:2.3rem;color:rgba(255,255,255);background-color:#f5f5f5;display:flex;flex-direction:row;justify-content:center;align-items:center}
.chat-img img{height:100%;width:100%;object-fit:cover;border-radius:6px}
.chat-green-svg{background: linear-gradient(to bottom, #17c882, #14b482);}
.chat-img-border{box-shadow:0 0 2px 1px rgba(56,82,56,0.3);-webkit-box-shadow:0 0 2px 1px rgba(56,82,56,0.3);-moz-box-shadow:0 0 2px 1px rgba(56,82,56,0.3)}
.chat-img-bg{background-image:radial-gradient(#fff,rgb(245,245,245) 40%,#e6e6e6);background-image:-webkit-radial-gradient(#fff,rgb(245,245,245) 40%,#e6e6e6);background-image:-moz-radial-gradient(#fff,rgb(245,245,245) 40%,#e6e6e6)}
.update-img-size{margin-right:4px !important;height:33px;width:33px}
.flex-column-center{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;position:fixed;bottom:0px;width:100%;left:0px;background-color:#f6f6f6;border-top:0.8px solid #dddddd}
.justify-end{display:flex;flex-direction:row;justify-content:flex-start;align-items:right;bottom:0px}
.panelrow{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;width:100%;height:30px}
.dh-input{font-size:14px;color:#191919;width:100%;height:25px;border-radius:6px;padding-left:10px;padding-right:10px;margin-left:10px;margin-right:4px;border:1px solid #DDD;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;scrollbar-width: thin;}
.dh-input:disabled{border:1px solid #DDD;color:#cccccc !important}
.dh-input:read-only{border:1px solid #DDD;color:#cccccc !important}
.textareaSPReadOnly:read-only{color:#555555 !important;background-color:#ededed !important;overflow:scroll}
input[type=text],input[type=password],textarea{outline:none}
input[type=text]:focus,input[type=password]:focus,textarea:focus{border:1px solid #17a316 !important;box-shadow:inset 0 1px 2px rgba(0,0,0,.075),0 0 5px rgba(81,167,232,.5)}
input:focus{z-index:2}
.dropdown{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex-shrink:0;width:auto;height:25px;align-items:center;justify-content:center;margin:0;padding:0 10px;border-radius:6px;border:none;font-weight:400;font-size:12px;overflow:hidden;outline:none;cursor:pointer;color:#FFF;background:#1aad19;background: linear-gradient(to bottom, #1ac83c, #1aa819);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.btn{display:flex;flex-shrink:0;width:auto;height:25px;align-items:center;justify-content:center;padding:0 10px;margin-right:7px;background-color:#1aad19;border-color:#1aad19;background: linear-gradient(to bottom, #1ac83c, #1aa819);color:#FFF;border-radius:6px;border:none;outline:none;font-weight:400;font-size:12px;text-decoration:none;text-align:center;line-height:25px;cursor:pointer;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s}
.btn *,.copybtn *{align-items:center;justify-content:center;display:flex}
.btn:visited,.dropdown:visited{color:#FFF}
.btn:hover,.btn:focus,.dropdown:hover{background-color:#25c524;border-color:#25c524;background: linear-gradient(to bottom, #24dc46, #24b423);color:#FFF}
.dropdown:active, .dropdown:focus{background:#0fb9af;background-color:#0fb9af;border-color:#0fb9af;color:#f5feff}
.dropdown option:disabled {color: #0c8b6e;}
.bluedropdown option:disabled {color: #008398;}
.orangereddropdown option:disabled {color: #a23300;}
.btn:active{background-color:#17a316;border-color:#17a316;background: linear-gradient(to bottom, #17be39, #179616);color:#f9fff5;}
.btn:disabled,.dropdown:disabled,.bluebtn:disabled{border:1px solid #DDD !important;background-color:#F5F5F5 !important;background: linear-gradient(to bottom, #fcfcfc, #f0f0f0) !important;color:#1aad19 !important}
.minibtn{width:14px;height:14px;line-height:12px;padding:1px;font-size:12px;flex-shrink:0;display:inline-block;vertical-align:middle;border-radius:50%;margin-bottom:1px !important;transform:scale(0.85);-ms-transform:scale(0.85);-webkit-transform:scale(0.85);-moz-transform:scale(0.85);-o-transform:scale(0.85)}
.minibtn-default{width:auto;height:16px;padding:2px 7px;border-radius:4px}
.bluebtn,.bluedropdown{background-color:#1ca5c2;border-color:#1ca5c2;background: linear-gradient(to bottom, #1cbec8, #1c9bc3);}
.bluebtn:hover,.bluebtn:focus{background-color:#22b9d9;border-color:#22b9d9;background: linear-gradient(to bottom, #26d2d2, #26afcd);color:#FFF}
.bluebtn:active{background-color:#1ca5c2;border-color:#1ca5c2;background: linear-gradient(to bottom, #19b4c5, #1991c0);color:#effcff}
.bluedropdown:hover,.bluedropdown:focus{background-color:#22b9d9;border-color:#22b9d9;background:#22b9d9;color:#FFF}
.redbtn{background-color:#dd3838;border-color:#dd3838;background: linear-gradient(to bottom, #f34d2d, #eb0505);box-shadow:0 0 3px 0 rgba(221,56,56,0.55)}
.redbtn:hover,.redbtn:focus{background-color:#ff4040;border-color:#ff4040;background: linear-gradient(to bottom, #fd5f4b, #eb1919);color:#FFF}
.redbtn:active{background-color:#c73737;border-color:#c73737;background: linear-gradient(to bottom, #ea4607, #ea0002);color:#fff5f0}
.orangeredbtn,.orangereddropdown{background-color:#f44400;border-color:#f44400;background: linear-gradient(to bottom, #ff7800, #f74900);box-shadow:0 0 2px 0 rgba(241,64,14,0.55)}
.orangeredbtn:hover,.orangeredbtn:focus{background-color:#ff4f00;border-color:#ff4f00;background: linear-gradient(to bottom, #ff8c0a, #fe580a);color:#FFF}
.orangeredbtn:active{background-color:#da3600;border-color:#da3600;background: linear-gradient(to bottom, #fc6e00, #f13a00);color:#fff9f6}
.orangereddropdown:hover,.orangereddropdown:focus{background-color:#ff4f00;border-color:#ff4f00;background:#ff4f00;color:#FFF}
.btnzoom-a{transition:all 0.5s;cursor:pointer}
.btnzoom-a:hover{transform: scale(1.18)}
.btnzoom-b{transition:all 0.2s}
.btnzoom-b:hover{transform: scale(1)}
.btnzoom-c{transition:all 0.2s}
.btnzoom-c:hover{transform: scale(1.1)}
.btnzoom-d{transition:all 0.2s}
.btnzoom-d:hover{transform: scale(0.95)}
.usermsg *,.aimsg *{margin:0;word-wrap:break-word}
/* white-space:normal去除上下空行（高度）（ blockquote 单独写）+ 列表后排除换行的可能 */
.usermsg ul,.usermsg ol,.aimsg ul,.aimsg ol{white-space:normal;margin:5px 0;padding-left:28px}
.usermsg p,.usermsg span,.aimsg p,.aimsg span{line-height:1.6;margin-top:3px}
/* li: break-all 截断 */
.usermsg li,.aimsg li{word-break:break-all}
/* code 字体 */
.usermsg code,.aimsg code{font-size:12px;font-family:Consolas,Monaco,monospace}
/* 行内代码 除了pre>code之外的代码块 */
.aimsg code:not(pre code){color:#27282c;white-space:pre-wrap;word-break:break-word;margin:0;border-radius:6px;padding:1px 5px;background-color:#efefef}
.usermsg code:not(pre code){color:#27282c;white-space:pre-wrap;word-break:break-word;margin:0;border-radius:6px;padding:1px 5px;background-color:#a9f289}
/* 表格 table code */
.usermsg table code:not(pre code),.aimsg table code:not(pre code){color:#27282c;white-space:pre-wrap;word-break:break-word;margin:0;border-radius:6px;padding:1px 5px;background-color:#e3e3d4}
/* 代码块 */
/* tokyo-night-dark color:#9aa5ce ; */
/* tokyo-night-dark background: #1a1b26; */
/* panda-syntax-dark color:#e6e6e6 ; */
/* panda-syntax-dark background: #2a2c2d; */
.usermsg pre,.aimsg pre{margin:5px 0;width:100%;min-width:100px;white-space:pre;border-radius:6px;box-sizing:border-box;color:#e6e6e6;background:#2a2c2d}
.usermsg pre > code,.aimsg pre > code{display:block;padding:1em;-moz-tab-size:4;tab-size:4;overflow-x:auto;white-space:pre;word-break:normal;scrollbar-width:thin}
.usermsg img:not(.clippy),.aimsg img:not(.clippy){margin:5px 0;max-width:100%}
.usermsg table img,.aimsg table img{max-width:300px}
/* white-space:normal 去除上下空行（高度）*/
.usermsg blockquote{white-space:normal;margin:8px 14px;max-width:100%;color:#373737;border-left:1px solid #6eac4e;padding:0 0 0 8px}
.aimsg blockquote{white-space:normal;margin:8px 14px;max-width:100%;color:#57606a;border-left:1px solid #c8c8c8;padding:0 0 0 8px}
.usermsg blockquote *,.aimsg blockquote *{margin-top:0px;margin-bottom:0px}
.usermsg h1,.usermsg h2,.usermsg h3,.usermsg h4,.usermsg h5,.usermsg h6,.usermsg ul,.usermsg ol,.usermsg blockquote,.usermsg ul p,.usermsg ol p,.usermsg blockquote p,.aimsg h1,.aimsg h2,.aimsg h3,.aimsg h4,.aimsg h5,.aimsg h6,.aimsg ul,.aimsg ol,.aimsg blockquote,.aimsg ul p,.aimsg ol p,.aimsg blockquote p{line-height:1.5}
.usermsg h1,.usermsg h2,.usermsg h3,.usermsg h4,.usermsg h5,.usermsg h6,.aimsg h1,.aimsg h2,.aimsg h3,.aimsg h4,.aimsg h5,.aimsg h6{margin-top:5px}
.usermsg h1,.aimsg h1{font-size:1.4em;margin:0 0 0.5em 0;padding:1em 0 0.5em;border-bottom:1px solid #7dc35a}
.usermsg h2,.aimsg h2{font-size:1.25em;margin:0.5em 0;padding:0.2em 0 0.3em;border-bottom:1px solid #7dc35a}
.aimsg h1{border-bottom:1px solid #b4b4b4}
.aimsg h2{border-bottom:1px solid #b4b4b4}
.usermsg h3,.aimsg h3{font-size:1.125em}
.usermsg h4,.aimsg h4{font-size:1em}
.usermsg h5,.aimsg h5{font-size:.875em}
.usermsg h6{font-size:.85em;color:#373737}
.aimsg h6{font-size:.85em;color:#57606a}
.usermsg hr{height:1px;border:none;background-color:#7dc35a;margin:0.6em 0 0.7em 0}
.aimsg hr{height:1px;border:none;background-color:#b4b4b4;margin:0.6em 0 0.7em 0}
.usermsg table,.aimsg table{margin:5px 0;border-spacing:0;border-collapse:collapse;display:table;max-width:100%;overflow:auto;color:rgb(40,40,40);word-break:break-all}
.usermsg td,.usermsg th,.aimsg td,.aimsg th{padding:0}
.usermsg table th,.aimsg table th{font-weight:600}
.usermsg table th,.usermsg table td,.aimsg table th,.aimsg table td{padding:5px 8px;border:1px solid #e4e6d0}
.usermsg table tr,.aimsg table tr{background-color:#f6f9f1;border-top:1px solid}
.usermsg table tr:nth-child(2n),.aimsg table tr:nth-child(2n){background-color:#edf1e5}
.usermsg table img,.aimsg table img{background-color:transparent}
/* 以下 一键复制相关 pre=snippet, button=copybtn ,svg/img(svg)=clippy */
.clippy{margin:4px;position:relative}
.copybtn[disabled] .clippy{opacity:.3}
.snippet,.msgcopydiv{position:relative;overflow:visible}
.snippet .copybtn,.msgcopydiv .copybtn,.msgcopydiv .copybtn,.panelrow .copybtn,.notification-content .copybtn{-webkit-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out;opacity:0;padding:0;position:absolute;right:4px;top:4px;display:inline-block;font-size:13px;font-weight:700;line-height:20px;color:#333;white-space:nowrap;vertical-align:middle;cursor:pointer;background-color:#eee;background-image:linear-gradient(#fcfcfc,#eee);border:1px solid #d5d5d5;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none}
.snippet:hover > .copybtn,.snippet > .copybtn:focus,.msgcopydiv:hover > .copybtn,.msgcopydiv > .copybtn:focus{opacity:1}
@media screen and (max-width:768px){
.snippet > .copybtn{opacity:0.4}
.msgcopydiv > .copybtn{}
}
.userinfo > .msgcopydiv{margin-left:30px}
.aiinfo > .msgcopydiv{margin-right:30px}
.userinfo > .msgcopydiv > .copybtn{top:auto;bottom:4px;left:-30px;right:auto}
.aiinfo > .msgcopydiv > .copybtn{top:auto;bottom:4px;left:auto;right:-30px}
/* 以下copybtn (btn) by https://primer.style/css/components/tooltips https://clipboardjs.com/bower_components/primer-css/css/primer.css */
.copybtn:focus{text-decoration:none;border-color:#51a7e8;outline:none;box-shadow:0 0 5px rgba(81,167,232,.5)}
.copybtn:focus:hover,.copybtn.selected:focus{border-color:#51a7e8}
.copybtn:hover,.copybtn:active{text-decoration:none;background-color:#ddd;background-image:linear-gradient(#eee,#ddd);border-color:#ccc}
.copybtn:active,.copybtn.selected{background-color:#dcdcdc;background-image:none;border-color:#b5b5b5;box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}
.copybtn.selected:hover{background-color:#cfcfcf}
.copybtn:disabled,.copybtn:disabled:hover,.copybtn.disabled,.copybtn.disabled:hover{color:rgba(102,102,102,.5);cursor:default;background-color:rgba(229,229,229,.5);background-image:none;border-color:rgba(197,197,197,.5);box-shadow:none}
/* 以上 copybtn (btn) */
.snippet .tooltipped-w:after{background:#6e7681}
.snippet .tooltipped-w:before{border-left-color:#6e7681}
/* 以下 Tooltips by https://primer.style/css/components/tooltips https://clipboardjs.com/bower_components/primer-css/css/primer.css */
.tooltipped{position:relative}
.tooltipped:after{position:absolute;z-index:1000000;display:none;padding:5px 8px;font:normal normal 11px/1.5 Helvetica,arial,nimbussansl,liberationsans,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";color:#fff;text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:rgba(0,0,0,.8);border-radius:3px;-webkit-font-smoothing:subpixel-antialiased}
.tooltipped:before{position:absolute;z-index:1000001;display:none;width:0;height:0;color:rgba(0,0,0,.8);pointer-events:none;content:"";border:5px solid transparent}
.tooltipped:hover:before,.tooltipped:hover:after,.tooltipped:active:before,.tooltipped:active:after,.tooltipped:focus:before,.tooltipped:focus:after{display:inline-block;text-decoration:none}
.tooltipped-n:after,.tooltipped-ne:after,.tooltipped-nw:after{right:50%;bottom:100%;margin-bottom:5px}
.tooltipped-n:before,.tooltipped-ne:before,.tooltipped-nw:before{top:-5px;right:50%;bottom:auto;margin-right:-5px;border-top-color:rgba(0,0,0,.8)}
.tooltipped-ne:after{right:auto;left:50%;margin-left:-15px}
.tooltipped-nw:after{margin-right:-15px}
.tooltipped-n:after{-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%)}
.tooltipped-w:after{right:100%;bottom:50%;margin-right:5px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%)}
.tooltipped-w:before{top:50%;bottom:50%;left:-5px;margin-top:-5px;border-left-color:rgba(0,0,0,.8)}
.tooltipped-e:after{bottom:50%;left:100%;margin-left:5px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%)}
.tooltipped-e:before{top:50%;right:-5px;bottom:50%;margin-top:-5px;border-right-color:rgba(0,0,0,.8)}
/* 以上 Tooltips */
/* 以上 一键复制相关 */
#app{display:flex;flex-flow:column;margin:1;white-space:pre-wrap}
/* 以下 弹窗 */
.dialog-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:900100}
.dialog-wrapper-hide{display:none}
/* .dialog{width:95%;max-width:800px;height:auto;max-height:82%;overflow:scroll;border-radius:10px;z-index:900101;position:fixed;top:calc(50% - 14.5px);left:calc(50% - 0.5px);transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px));background-color:#ededed;box-shadow:0px 0px 10px rgba(0,0,0,0.3)} */
.dialog{width:95%;max-width:800px;height:78%;max-height:1000px;overflow:hidden;border-radius:10px;z-index:900101;position:fixed;background-color:#ededed;box-shadow:0px 0px 10px rgba(0,0,0,0.3)}
.dialog-header{position:relative;height:40px;line-height:40px;padding:0 20px;background-color:#f5f5f5;border-top-left-radius:10px;border-top-right-radius:10px}
.dialog-bottom{position:relative;height:15px;line-height:15px;border-bottom-left-radius:10px;border-bottom-right-radius:10px}
.dialog-close{line-height:20px;color:#333333;position:absolute;top:10px;right:10px;width:20px;height:20px;cursor:pointer}
.dialog-title{font-size:14px;line-height:20px;color:#333333;position:absolute;top:10px;align-items:center;justify-content:center;display:flex;-webkit-text-size-adjust:100%;}
.dialog-scroll{position: relative; width: 100%; height: calc(100% - 54.5px); overflow: auto;scrollbar-width:thin;}
.dialog-content{padding:20px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}
.dialog-content .btn,.dialog-content .dh-input{margin:0 2px}
.dialog-content .panelrow{height:26px;margin-bottom:4px}
.dialog-content .panelrow >:last-child{margin-right:2px}
/*.panelgroup- box-shadow> 1px 2px 9px 2.5px rgba(201, 201, 201, 0.6); .panelgroup-shadow> box-shadow: 1px 1.5px 7.5px 2.5px rgba(201, 201, 201, 0.66); */
.dialog-content .panelgroup{width:100%;box-shadow: 0 3px 8px 0 rgba(20,20,20,0.16),0 0 1px 1px rgba(20,20,20,0.07) ;padding:5px 6px 4px 8px;border-radius:5px;margin-bottom:12px}
.dialog-content .panelgroup-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;padding-bottom:1px;border-bottom:1px solid rgb(220,220,220,0.5)}
.dialog-content .panelgroup-head > span{color:#666666;font-size:12px}
.dialog-content .panelgroup-shadow{box-shadow: 0 3px 8px 2px rgba(20,20,20,0.14),0 0 1px 1px rgba(20,20,20,0.065);}
.dialog-content span{font-size:12px;color:#333333;margin-left:4px;line-height:18px;-webkit-text-size-adjust:100%;}
.dialog-mask{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:-1}
.panelgroup-chatdata-selected{box-shadow: 0 0 0.5px 1px rgba(26, 168, 50, 0.8 ) !important;background: linear-gradient(rgba(26, 168, 50, 0.015), rgba(26, 168, 50, 0.15));}
.panelgroup-chatdata-selected-transparent{box-shadow: 0 0 0.5px 2px rgba(26, 168, 50, 1 ) !important;background: linear-gradient(rgba(26, 168, 50, 0.005), rgba(26, 168, 50, 0.05));}
.control-container{width:auto;margin-right:6px}
.control-bg{padding:2px 5px;width:auto;height:auto;background:#fcfcfc;border-radius:5px;display:flex}
.slider{-webkit-appearance:none !important;-moz-appearance:none;appearance:none;width:100%;height:2px;margin:9px 4px;padding:0px 2px;background: linear-gradient(to bottom, #17d51e, #179e16);border:none;border-radius:2px;outline:none;-webkit-transition:.2s;transition:opacity .2s}
.slider::-webkit-slider-thumb{-webkit-appearance:none !important;appearance:none;width:12px;height:17px;border:none;background: linear-gradient(to bottom, #17d51e, #179e16);border-radius:4px;cursor:pointer}
.slider::-moz-range-thumb{-webkit-appearance:none !important;-moz-appearance:none !important;appearance:none;width:12px;height:17px;border:none;background: linear-gradient(to bottom, #17d51e, #179e16);border-radius:4px;cursor:pointer}
.slider::-ms-thumb{-webkit-appearance:none !important;appearance:none;width:12px;height:17px;border:none;background: linear-gradient(to bottom, #17d51e, #179e16);border-radius:4px;cursor:pointer}
.slider::-webkit-slider-thumb:hover,.slider::-webkit-slider-thumb:focus{background: linear-gradient(to bottom, #1ac83c, #179b16);outline:none}
.slider::-moz-range-thumb:hover,.slider::-moz-range-thumb:focus{background: linear-gradient(to bottom, #1ac83c, #179b16);outline:none}
.slider::-ms-thumb:hover,.slider::-ms-thumb:focus{background: linear-gradient(to bottom, #1ac83c, #179b16);outline:none}
.slider::-webkit-slider-thumb:active{background: linear-gradient(to bottom, #1ac83c, #179b16);}
.slider::-moz-range-thumb:active{background: linear-gradient(to bottom, #1ac83c, #179b16);}
.slider::-ms-thumb:active{background: linear-gradient(to bottom, #1ac83c, #179b16);}
@media only screen and (max-width:768px){.slider::-webkit-slider-thumb{width:25px;height:18px}
.slider::-moz-range-thumb{width:25px;height:18px}
.slider::-ms-thumb{width:25px;height:18px}
}
.slider:disabled::-webkit-slider-thumb{background: linear-gradient(to bottom, #d7ebd7, #c3d6c2);cursor:not-allowed}
.slider:disabled::-moz-range-thumb{background: linear-gradient(to bottom, #d7ebd7, #c3d6c2);cursor:not-allowed}
.slider:disabled::-ms-thumb{background: linear-gradient(to bottom, #d7ebd7, #c3d6c2);cursor:not-allowed}
.slider:disabled{background: linear-gradient(to bottom, #d7ebd7, #c3d6c2);cursor:not-allowed}
#dialog-settings .dh-input,#dialog-promptgenerator .dh-input{font-size:12px;color:#333333;background-color:#fcfcfc}
#dialog-promptgenerator .dh-input{font-size:13px}
#loading-mask button{margin:30px;display:inline-block;padding:8px 16px;font-size:14px;text-align:center;color:#333;background-color:#fdffb4;border:3px solid #555;border-radius:10px;cursor:pointer}
/* 以上 弹窗 */
/* 以下 消息通知 tooltips */
.notification{position:relative;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:900900}
.notification-wrapper{max-width:600px;overflow:hidden;position:fixed;transform:translate(-50%, -50%);background-color:#fdffb4;box-shadow:0 0 8px rgba(191,169,16,0.3);border:1px solid rgba(166,152,27,0.45);z-index:900902}
.notification-content{color:#664909;font-size:13px;line-height:1.6;-webkit-text-size-adjust:100%;}
.notification-content-center{display:block;text-align:start;padding-left:6px;margin:5px 10px 0px 10px;word-break:break-word}
.notification-content-bottom{display:flex;text-align:center;padding-left:0;margin:5px 11px 5px 11px;word-break:break-word}
.notification-center{width:82%;min-width:160px;bottom:auto;left:50%;top:50%;right:auto;border-radius:10px}
.notification-bottom{width:auto;min-width:45px;bottom:calc(0% + 4.5px);left:50%;top:auto;right:auto;border-radius:6px;animation:slideIn 0.4s ease-out forwards}
.notification-mask{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.65);z-index:900901}
@keyframes slideIn{from{transform:translate(-50%,-3px);opacity:0}
to{transform:translate(-50%,-18px);opacity:1}
}
/* 以上 消息通知 tooltips */
</style>
<!-- 以上为css样式 -->
</head>
<body>
<!-- #app -->
<div id="app">
<!-- 加载网页时的遮罩 Page Loading - Mask -->
<div id="loading-mask" class="dialog-wrapper" style="z-index: 999999;">
<div>加载中<br>Loading</div>
</div>
<!-- 主界面-聊天对话 Main interface - Chat -->
<div style="width:100%;">
<div>
<div v-for="(x,i) in msgList" :key="i">
<!-- Me / User WechatStyleDatetime -->
<span v-if="x.my" class="wechatstyle-datetime" :style="{ display: (settingsTime_WechatStyle && x.wechatstyledatetime != null) ? 'block' : 'none', marginBottom: settingsTime_Message == 3 ? '27px' : '17px', fontSize: settingsFontSize * 0.9 + 'px' }">{{x.wechatstyledatetime}}</span>
<!-- Me / User Message Datetime -->
<div v-if="x.my" :data-hr="x.hr" class="msgdatetimediv" :style="{ display: settingsTime_Message == 1 ? 'none' : 'block' }" ><span class="usermsg-datetime">{{x.datetime}}</span></div>
<!-- AI Message Datetime -->
<div v-if="!x.my" :data-hr="x.hr" class="msgdatetimediv" :style="{ display: settingsTime_Message == 1 ? 'none' : 'block' }" ><span class="aimsg-datetime">{{x.datetime}}</span></div>
<!-- Me / User Message -->
<div v-if="x.my" class="userinfo" :style="{ marginTop : settingsTime_Message == 3 ? '27px' : '17px' }" >
<div class="chat-img btnzoom-a" @click="isShowDialog_ChatList = true" :title="settingsLanguage == 'cn' ? '打开对话列表' : 'Open Chat List'">
<img :src="userAvatarURL">
</div>
<div class="justify-end msgcopydiv msgdiv">
<div v-html="x.msg" class="usermsg" :style="{ fontSize: settingsFontSize + 'px' }">
</div>
</div>
</div>
<!-- AI Message -->
<div v-if="!x.my" class="aiinfo" :style="{ marginTop : settingsTime_Message == 3 ? '27px' : '17px' }" >
<div class="chat-img btnzoom-a" :style="{ display: isgptGreenSvgShow ? 'none' : 'flex' }" @click="isShowDialog_ChatList = true" :title="settingsLanguage == 'cn' ? '打开对话列表' : 'Open Chat List'">
<img :src="gptAvatarURL">
</div>
<div class="chat-img chat-green-svg btnzoom-a" :style="{ display: isgptGreenSvgShow ? 'flex' : 'none'}" @click="isShowDialog_ChatList = true" :title="settingsLanguage == 'cn' ? '打开对话列表' : 'Open Chat List'">
<svg width="27" height="27" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" role="img">
<path d="M37.5324 16.8707C37.9808 15.5241 38.1363 14.0974 37.9886 12.6859C37.8409 11.2744 37.3934 9.91076 36.676 8.68622C35.6126 6.83404 33.9882 5.3676 32.0373 4.4985C30.0864 3.62941 27.9098 3.40259 25.8215 3.85078C24.8796 2.7893 23.7219 1.94125 22.4257 1.36341C21.1295 0.785575 19.7249 0.491269 18.3058 0.500197C16.1708 0.495044 14.0893 1.16803 12.3614 2.42214C10.6335 3.67624 9.34853 5.44666 8.6917 7.47815C7.30085 7.76286 5.98686 8.3414 4.8377 9.17505C3.68854 10.0087 2.73073 11.0782 2.02839 12.312C0.956464 14.1591 0.498905 16.2988 0.721698 18.4228C0.944492 20.5467 1.83612 22.5449 3.268 24.1293C2.81966 25.4759 2.66413 26.9026 2.81182 28.3141C2.95951 29.7256 3.40701 31.0892 4.12437 32.3138C5.18791 34.1659 6.8123 35.6322 8.76321 36.5013C10.7141 37.3704 12.8907 37.5973 14.9789 37.1492C15.9208 38.2107 17.0786 39.0587 18.3747 39.6366C19.6709 40.2144 21.0755 40.5087 22.4946 40.4998C24.6307 40.5054 26.7133 39.8321 28.4418 38.5772C30.1704 37.3223 31.4556 35.5506 32.1119 33.5179C33.5027 33.2332 34.8167 32.6547 35.9659 31.821C37.115 30.9874 38.0728 29.9178 38.7752 28.684C39.8458 26.8371 40.3023 24.6979 40.0789 22.5748C39.8556 20.4517 38.9639 18.4544 37.5324 16.8707ZM22.4978 37.8849C20.7443 37.8874 19.0459 37.2733 17.6994 36.1501C17.7601 36.117 17.8666 36.0586 17.936 36.0161L25.9004 31.4156C26.1003 31.3019 26.2663 31.137 26.3813 30.9378C26.4964 30.7386 26.5563 30.5124 26.5549 30.2825V19.0542L29.9213 20.998C29.9389 21.0068 29.9541 21.0198 29.9656 21.0359C29.977 21.052 29.9842 21.0707 29.9867 21.0902V30.3889C29.9842 32.375 29.1946 34.2791 27.7909 35.6841C26.3872 37.0892 24.4838 37.8806 22.4978 37.8849ZM6.39227 31.0064C5.51397 29.4888 5.19742 27.7107 5.49804 25.9832C5.55718 26.0187 5.66048 26.0818 5.73461 26.1244L13.699 30.7248C13.8975 30.8408 14.1233 30.902 14.3532 30.902C14.583 30.902 14.8088 30.8408 15.0073 30.7248L24.731 25.1103V28.9979C24.7321 29.0177 24.7283 29.0376 24.7199 29.0556C24.7115 29.0736 24.6988 29.0893 24.6829 29.1012L16.6317 33.7497C14.9096 34.7416 12.8643 35.0097 10.9447 34.4954C9.02506 33.9811 7.38785 32.7263 6.39227 31.0064ZM4.29707 13.6194C5.17156 12.0998 6.55279 10.9364 8.19885 10.3327C8.19885 10.4013 8.19491 10.5228 8.19491 10.6071V19.808C8.19351 20.0378 8.25334 20.2638 8.36823 20.4629C8.48312 20.6619 8.64893 20.8267 8.84863 20.9404L18.5723 26.5542L15.206 28.4979C15.1894 28.5089 15.1703 28.5155 15.1505 28.5173C15.1307 28.5191 15.1107 28.516 15.0924 28.5082L7.04046 23.8557C5.32135 22.8601 4.06716 21.2235 3.55289 19.3046C3.03862 17.3858 3.30624 15.3413 4.29707 13.6194ZM31.955 20.0556L22.2312 14.4411L25.5976 12.4981C25.6142 12.4872 25.6333 12.4805 25.6531 12.4787C25.6729 12.4769 25.6928 12.4801 25.7111 12.4879L33.7631 17.1364C34.9967 17.849 36.0017 18.8982 36.6606 20.1613C37.3194 21.4244 37.6047 22.849 37.4832 24.2684C37.3617 25.6878 36.8382 27.0432 35.9743 28.1759C35.1103 29.3086 33.9415 30.1717 32.6047 30.6641C32.6047 30.5947 32.6047 30.4733 32.6047 30.3889V21.188C32.6066 20.9586 32.5474 20.7328 32.4332 20.5338C32.319 20.3348 32.154 20.1698 31.955 20.0556ZM35.3055 15.0128C35.2464 14.9765 35.1431 14.9142 35.069 14.8717L27.1045 10.2712C26.906 10.1554 26.6803 10.0943 26.4504 10.0943C26.2206 10.0943 25.9948 10.1554 25.7963 10.2712L16.0726 15.8858V11.9982C16.0715 11.9783 16.0753 11.9585 16.0837 11.9405C16.0921 11.9225 16.1048 11.9068 16.1207 11.8949L24.1719 7.25025C25.4053 6.53903 26.8158 6.19376 28.2383 6.25482C29.6608 6.31589 31.0364 6.78077 32.2044 7.59508C33.3723 8.40939 34.2842 9.53945 34.8334 10.8531C35.3826 12.1667 35.5464 13.6095 35.3055 15.0128ZM14.2424 21.9419L10.8752 19.9981C10.8576 19.9893 10.8423 19.9763 10.8309 19.9602C10.8195 19.9441 10.8122 19.9254 10.8098 19.9058V10.6071C10.8107 9.18295 11.2173 7.78848 11.9819 6.58696C12.7466 5.38544 13.8377 4.42659 15.1275 3.82264C16.4173 3.21869 17.8524 2.99464 19.2649 3.1767C20.6775 3.35876 22.0089 3.93941 23.1034 4.85067C23.0427 4.88379 22.937 4.94215 22.8668 4.98473L14.9024 9.58517C14.7025 9.69878 14.5366 9.86356 14.4215 10.0626C14.3065 10.2616 14.2466 10.4877 14.2479 10.7175L14.2424 21.9419ZM16.071 17.9991L20.4018 15.4978L24.7325 17.9975V22.9985L20.4018 25.4983L16.071 22.9985V17.9991Z" fill="currentColor">
</path>
</svg>
</div>
<div class="msgcopydiv msgdiv">
<div v-html="x.msg" class="aimsg" :style="{ fontSize: settingsFontSize + 'px' }">
</div>
</div>
</div>
</div>
<!-- 空白块 布局/定位用 For position -->
<div class="bottom-position"></div>
</div>
</div>
<!-- End: 主界面-聊天对话 Main interface - Chat -->
<!-- 主界面-底部 Main interface - Bottom -->
<div class="flex-column-center">
<!-- First row -->
<div class="panelrow" style="margin-top: 6px;height: 40px;">
<button @click="isShowDialog_PromptGenerator = true" class="btn" :class="{ 'orangeredbtn': !(gptSystemPromptReadOnly.trim() == '') }" :disabled="(gptSystemPrompt_hidden.trim() != '')" :title="gptSystemPrompt_hidden.trim() == '' ? (settingsLanguage == 'cn' ? '打开提示词窗口' : 'Open Prompt Generator') : (settingsLanguage == 'cn' ? '功能已被禁用' : 'The feature has been disabled') " style="margin-left:12px;margin-right:-1px;border-radius: 6px 0px 0px 6px;line-height: 38px; width: 27px;height: 38px;padding: 0 8px;z-index: 900001;">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path clip-rule="evenodd" d="M14.526 6.10576C15.0265 6.33917 15.2667 6.88343 15.0625 7.3214L9.88541 18.4237C9.68118 18.8616 9.10985 19.0275 8.60931 18.7941C8.10877 18.5607 7.86857 18.0164 8.0728 17.5784L13.2499 6.47616C13.4541 6.03819 14.0254 5.87235 14.526 6.10576Z" fill="currentColor" fill-rule="evenodd" /></svg>
</svg>
</div>
</button>
<textarea @click="scrollToBottomViewClick" @blur="textareaChatInputBox_blur" @focus="textareaChatInputBox_focus" @keydown="textareaMobileInputCompatibility" @keydown.enter.exact="textareaEnter" @keydown.ctrl.enter.exact="newLine" @keydown.meta.enter.exact="newLine" v-model="msg" type="text" class="dh-input textareachatinputbox" style="margin-left:0px;height: 38px;min-height: 38px;max-height: 38px;border-radius: 0px 6px 6px 0px; z-index:900000" placeholder="" enterkeyhint="send" ></textarea>
<button @click="sendMsg();" :disabled="btnDisabledState_Sending" class="btn" :title="settingsLanguage == 'cn' ? '发送' : 'Send'" style="line-height: 38px; height: 38px;font-size: 14px;padding: 0 15px;" >{{sentext}}</button>
</div>
<!-- Second row - Left -->
<div class="panelrow" style="margin-bottom: 7px;">
<!-- new - orangered : -3 ~ -2 -->
<!-- new - red : -1 ~ 0 ~ 达到... -1 ~ 0 ~ have reached... -->
<button @click="clearContext" :disabled="btnDisabledState_Clear" class="btn" style="margin-left:12px;margin-right: 4px;"
:class="{'orangeredbtn': !Number.isInteger(settingsContextualMode) ? false : ( !btnDisabledState_Clear && ( (settingsContextualMode > 100 && succQA_Count >= settingsContextualMode - 103 && succQA_Count < settingsContextualMode - 101) || (settingsContextualMode > 0 && settingsContextualMode < 100 && succQA_Count >= settingsContextualMode - 3 && succQA_Count < settingsContextualMode - 1) ) ) ? true : false ,
'redbtn': !Number.isInteger(settingsContextualMode) ? false : ( !btnDisabledState_Clear && ( (settingsContextualMode > 100 && succQA_Count >= settingsContextualMode - 101) || (settingsContextualMode > 0 && settingsContextualMode < 100 && succQA_Count >= settingsContextualMode - 1) ) ) ? true : false }"
:title="settingsLanguage == 'cn' ? '清除记忆' : 'Clear Context'">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</div>
<span v-if="settingsLanguage == 'cn' " :style="{ display: isShowQACountLabel ? 'flex' : 'none' }" > 记忆</span>
<span v-else :style="{ display: isShowQACountLabel ? 'flex' : 'none' }" > Context</span>
<span>: {{succQA_Count}}</span>
</button>
<!-- orangered : >= 2000 && < model.maxtokens * 0.9 -->
<!-- red : >= model.maxtokens * 0.9 -->
<button disabled class="btn" style="margin-left: 0px;margin-right: 4px;cursor: auto;"
:style="{ color: totaltokens < 2000 ? '#1aad19 !important' : ( totaltokens < ( gptModelList.find(model => model.modelname === apiGPTModel) ? gptModelList.find(model => model.modelname === apiGPTModel).maxtokens : 4096 ) * 0.9 ? '#f94000 !important' : '#fa1e0a !important' ),
fontWeight: totaltokens < ( gptModelList.find(model => model.modelname === apiGPTModel) ? gptModelList.find(model => model.modelname === apiGPTModel).maxtokens : 4096 ) * 0.9 ? 'normal' : 'bold' }"
:title="settingsLanguage == 'cn' ? 'Token用量' : 'Tokens Usage'">
<div :style="{ display: isShowTotaltokensSVG ? 'flex' : 'none' }" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="25" height="18" viewBox="0 0 25 19" fill="currentColor" stroke-width="0.02" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
<path d="m10.62109,1.66441c-1.05095,-0.60518 -2.43437,-0.9385 -3.89526,-0.9385c-1.46093,0 -2.84426,0.33332 -3.89526,0.9385c-1.12359,0.64701 -1.74652,1.53053 -1.75767,2.49024l-0.00051,0l0,10.75701c0,1.91873 2.48327,3.42172 5.65344,3.42172c3.17018,0 5.65349,-1.50299 5.65349,-3.42172l0,-10.74381l-0.00023,0c-0.00557,-0.96482 -0.62926,-1.85344 -1.758,-2.50345zm0.77473,6.82194c0,1.32648 -2.13857,2.44712 -4.66998,2.44712c-2.53136,0 -4.66994,-1.12064 -4.66994,-2.44712l0,-0.18096c1.01002,0.8957 2.70835,1.47278 4.66994,1.47278c1.96163,0 3.65992,-0.57714 4.66998,-1.47278l0,0.18096zm0,2.13876c0,1.32652 -2.13857,2.44716 -4.66998,2.44716c-2.53136,0 -4.66994,-1.12068 -4.66994,-2.44716l0,-0.18092c1.01002,0.89565 2.70835,1.47278 4.66994,1.47278c1.96163,0 3.65992,-0.57713 4.66998,-1.47278l0,0.18092zm-9.33992,1.95788c1.01002,0.8957 2.70835,1.47278 4.66993,1.47278c1.96164,0 3.65992,-0.57713 4.66998,-1.47283l0,0.18102c0,1.32647 -2.13857,2.44711 -4.66998,2.44711c-2.53136,0 -4.66993,-1.12064 -4.66993,-2.44711l0,-0.18097zm9.33992,-6.23549c0,1.32647 -2.13857,2.44711 -4.66998,2.44711c-2.53137,0.00005 -4.66994,-1.12063 -4.66994,-2.44711l0,-0.22269c1.01002,0.88937 2.70835,1.46238 4.66993,1.46238c1.96164,0 3.65992,-0.57306 4.66998,-1.46238l0,0.22269l0,0zm-8.07442,-3.83077c0.90403,-0.52061 2.11309,-0.80727 3.40444,-0.80727c1.29139,0 2.50046,0.28671 3.40449,0.80727c0.80423,0.46309 1.2655,1.06963 1.2655,1.66405c0,1.31336 -2.13857,2.4229 -4.66998,2.4229c-2.53136,0 -4.66994,-1.10954 -4.66994,-2.4229c0,-0.59441 0.46127,-1.20095 1.26549,-1.66405zm3.40444,14.83319c-2.53136,0 -4.66993,-1.11656 -4.66993,-2.43826l0,-0.18982c1.01002,0.89566 2.70835,1.47279 4.66993,1.47279c1.96164,0 3.65992,-0.57713 4.66998,-1.47279l0,0.18987c0,1.32166 -2.13862,2.43822 -4.66998,2.43822z"/>
<path d="m24.01826,10.37334c-0.00347,-0.9667 -0.62739,-1.85725 -1.75804,-2.50833c-1.05095,-0.60519 -2.43437,-0.9385 -3.89531,-0.9385c-1.46088,0 -2.84426,0.33332 -3.89526,0.9385c-1.1338,0.65286 -1.75818,1.54655 -1.75818,2.51633c0,0.00023 0,0.00047 0,0.00075l0,0l0,4.32772c0,1.91086 2.48326,3.40772 5.65344,3.40772c3.17018,0 5.65349,-1.49686 5.65349,-3.40772l0,-4.33653l-0.00014,0l0,0.00005zm-0.98337,2.17477c0,1.32648 -2.13857,2.44717 -4.66999,2.44717c-2.53137,0 -4.66993,-1.12065 -4.66993,-2.44717l0,-0.22269c1.01002,0.88937 2.7083,1.46238 4.66993,1.46238s3.65992,-0.57301 4.66999,-1.46238l0,0.22269zm-8.07442,-3.83077c0.90403,-0.52061 2.11309,-0.80727 3.40444,-0.80727c1.29135,0 2.50046,0.28672 3.40449,0.80727c0.80423,0.46309 1.2655,1.06964 1.2655,1.66405c0,1.31336 -2.13857,2.4229 -4.66999,2.4229c-2.53137,0 -4.66993,-1.10954 -4.66993,-2.4229c0.00005,-0.59441 0.46127,-1.20096 1.2655,-1.66405zm3.40444,8.41673c-2.53137,0 -4.66993,-1.11014 -4.66993,-2.42421l0,-0.20386c1.01002,0.89565 2.7083,1.47277 4.66993,1.47277s3.65992,-0.57708 4.66998,-1.47277l0,0.20386c0,1.31407 -2.13857,2.42421 -4.66998,2.42421z" />
</svg>
</div>
<span v-if="settingsLanguage == 'cn' " :style="{ display: isShowTotaltokensLabel ? 'flex' : 'none' }" > Token用量</span>
<span v-else :style="{ display: isShowTotaltokensLabel ? 'flex' : 'none' }" > Tokens</span>
<span>: {{totaltokens}}</span>
</button>
<!-- green : gpt-3.5 -->
<!-- blue : gpt-3.5 >=16k -->
<!-- orangered : gpt-4 -->
<!-- red : gpt-4 && ( 32k | SmartMaxTokens | AutoRetry | max_tokens >= 4000 | Used tokens >= 4000 ) -->
<button @click="showStatus" class="btn" style="width:30px;padding: 0 5px;"
:class="{'bluebtn': (apiGPTModel.includes('gpt-3.5') && (apiGPTModel.includes('16k') || totaltokens > 9999 )),
'orangeredbtn': (!apiGPTModel.includes('gpt-3.5') && !(apiGPTModel.includes('32k') || openSmartMaxTokens || apiMaxTokens > 3999 || totaltokens > 3999)),
'redbtn': (!apiGPTModel.includes('gpt-3.5') && (apiGPTModel.includes('32k') || openSmartMaxTokens || apiMaxTokens > 3999 || totaltokens > 3999)) }"
:title="settingsLanguage == 'cn' ? '状态' : 'Status'">
<div>
<svg fill="currentColor" stroke="none" width="18" height="18" viewBox="0 -0.028 0.4 0.4" xmlns="http://www.w3.org/2000/svg"><path d="M.246.171.334.083A.012.012 0 0 0 .317.066L.229.154a.013.013 0 0 0-.004.004A.05.05 0 0 0 .2.15.05.05 0 1 0 .25.2.05.05 0 0 0 .243.175.013.013 0 0 0 .247.171ZM.2.225A.025.025 0 1 1 .225.2.025.025 0 0 1 .2.225ZM.4.192a.2.2 0 0 1-.057.15.013.013 0 0 1-.018 0L.292.309A.012.012 0 0 1 .309.292l.024.023A.175.175 0 0 0 .375.2H.337a.013.013 0 0 1 0-.025h.035a.181.181 0 0 0-.014-.05.013.013 0 1 1 .023-.011.196.196 0 0 1 .017.067.011.011 0 0 1 0 .01Zm-.29.1a.012.012 0 0 1 0 .017L.077.342a.013.013 0 0 1-.018 0A.2.2 0 0 1 0 .2V.19a.011.011 0 0 1 0-.003.01.01 0 0 1 0-.004A.199.199 0 0 1 .198 0H.2a.01.01 0 0 1 .004 0 .196.196 0 0 1 .081.018.012.012 0 0 1 .006.017.012.012 0 0 1-.017.006.178.178 0 0 0-.061-.014v.036a.013.013 0 0 1-.025 0V.025a.175.175 0 0 0-.111.05.173.173 0 0 0-.05.1h.036a.013.013 0 0 1 0 .025H.025a.173.173 0 0 0 .043.115L.092.292a.012.012 0 0 1 .017 0Z"/>
</svg>
</div>
</button>
<!-- Second row - Right -->
<button @click="undo" :disabled="btnDisabledState_Undo" class="btn" style="margin-left:auto;margin-right:4px;width:45px;" :title="settingsLanguage == 'cn' ? '撤销' : 'Undo'" >
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="23px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" >
<path d="M5 9.5C8.5 9.5 11.5 9.5 15 9.5C15.1615 9.5 19 9.5 19 13.5C19 18 15.2976 18 15 18C12 18 10 18 7 18"/>
<path d="M8.5 13C7.13317 11.6332 6.36683 10.8668 5 9.5C6.36683 8.13317 7.13317 7.36683 8.5 6" />
</svg>
</div>
</button>
<button @click="retry" :disabled="btnDisabledState_Undo" class="btn" style="margin-right:4px;width:45px;" :title="settingsLanguage == 'cn' ? '重问' : 'Retry'">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 2.1l4 4-4 4"/>
<path d="M3 12.2v-2a4 4 0 0 1 4-4h12.8M7 21.9l-4-4 4-4"/>
<path d="M21 11.8v2a4 4 0 0 1-4 4H4.2"/>
</svg>
</div>
</button>
<button @click="openDialogTodo_Settings" class="btn" :class="{ 'redbtn': !btnDisabledState_CheckAPI }" style="margin-right:4px;width:45px;" :title="settingsLanguage == 'cn' ? '设置' : 'Settings'">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="3"></circle>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>
</div>
</button>
<button @click="openDialog_Help" class="btn bluebtn" style="width:45px;" :title="settingsLanguage == 'cn' ? '帮助' : 'Help'">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg>
</div>
</button>
</div>
</div>
<!-- End: 主界面-底部 Main interface - Bottom -->
<!-- dialog-wrapper A: 设置 Settings -->
<div id="dialog-settings" class="dialog-wrapper" v-show="isShowDialog_Settings">
<!-- A: dialog -->
<div class="dialog" style="max-height: 800px;">
<!-- A: 标题 header -->
<div class="dialog-header">
<div class="dialog-title" style="justify-content: space-between;width: calc(95% - 27px);" >
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>
{{ settingsLanguage == 'cn' ? ' 设置' : ' Settings' }}
<select @change="changeSimpleMode(true)" class="dropdown minibtn minibtn-default bluedropdown btnzoom-b" v-model="isSimpleMode" :style="{ marginLeft: settingsLanguage == 'cn' ? '5px' : '5px',marginTop: settingsLanguage == 'cn' ? '0.5px' : '1.5px', width: settingsLanguage == 'cn' ? ( isSimpleMode ? '64px' : '77px' ) : ( isSimpleMode ? '91px' : '111px' )}" :title="settingsLanguage == 'cn' ? '当前LinGPT模式' : 'Current LinGPT Mode'">
<option v-if="settingsLanguage == 'cn'" v-for="option in simpleModeOptions_cn" :value="option.state">{{ option.label }}</option>
<option v-else v-for="option in simpleModeOptions_en" :value="option.state">{{ option.label }}</option>
</select>
<span style="margin-left:auto" :title="settingsLanguage == 'cn' ? '当前版本' : 'Current Version'">v8.28 </span>
<button class="btn btnzoom-a" style="margin: 0px; padding: 0 3px;background: linear-gradient(to bottom, #fff, #fff);background-color: #fff;height: 20px;width: 20px; box-shadow: 0 0 0px 0.5px rgba(80, 80, 80, 0.08);" :title="settingsLanguage == 'cn' ? '在GitHub上查看最新版本' : 'View the latest version on GitHub'">
<a href="https://github.com/lin2025/gpt3.5/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="14" viewBox="0 0 16 16" fill="#1f2328">
<path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
</svg>
</a>
</button>
<button class="btn btnzoom-a" style="margin-left: 5px; padding: 0 3px;background: linear-gradient(to bottom, #fff, #fff);background-color: #fff;height: 20px;width: 20px; box-shadow: 0 0 0px 0.5px rgba(80, 80, 80, 0.08);" :title="settingsLanguage == 'cn' ? '在Gitee上查看最新版本' : 'View the latest version on Gitee'">
<a href="https://gitee.com/lin2025/gpt3.5/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="14" viewBox="0 0 24 24" fill="#c61d22">
<path d="m11.984,0a12,12 0 0 0 -11.984,12a12,12 0 0 0 12,12a12,12 0 0 0 12,-12a12,12 0 0 0 -12,-12a12,12 0 0 0 -0.016,0zm6.09,5.333c0.328,0 0.593,0.266 0.592,0.593l0,1.482a0.594,0.594 0 0 1 -0.593,0.592l-8.296,0c-0.982,0 -1.778,0.796 -1.778,1.778l0,5.63c0,0.327 0.266,0.592 0.593,0.592l5.63,0c0.982,0 1.778,-0.796 1.778,-1.778l0,-0.296a0.593,0.593 0 0 0 -0.592,-0.593l-4.15,0a0.592,0.592 0 0 1 -0.592,-0.592l0,-1.482a0.593,0.593 0 0 1 0.593,-0.592l6.815,0c0.327,0 0.593,0.265 0.593,0.592l0,3.408a4,4 0 0 1 -4,4l-8.741,0a0.593,0.593 0 0 1 -0.593,-0.593l0,-8.296a4.444,4.444 0 0 1 4.445,-4.444l8.296,0l0,-0.001z"/>
</svg>
</a>
</button>
</div>
<div class="dialog-close" @click="isShowDialog_Settings = false" :title="settingsLanguage == 'cn' ? '关闭' : 'Close'">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill: none; stroke: #333; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;">
<path d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
</div>
<!-- A: 滚动框架 scroll -->
<div class="dialog-scroll">
<!-- A: 主体内容 content -->
<div class="dialog-content">
<!-- panelgroup: 接口密钥 API Key -->
<div class="panelgroup panelgroup-shadow">
<div class="panelgroup-head">
<span>{{ settingsLanguage == 'cn' ? 'API Key (OpenAI / 第三方) ' : 'API Key (OpenAI / Third-party) ' }}</span>
<button @click="showMiniHelp('A-CheckAPIKey')" class="btn minibtn bluebtn btnzoom-b" :style="{ marginRight: btnDisabledState_CheckAPI ? 'auto' : '2px' }" :title="settingsLanguage == 'cn' ? '功能说明' : 'Help'" >?</button>
<span :style="{ display: btnDisabledState_CheckAPI ? 'none' : 'block' }" style="margin-right: auto;color: #fa1e0a;font-size: 11px;">{{ settingsLanguage == 'cn' ? '*必填' : '*Required' }}</span>
<!-- 轮询 / 自动轮换API Key / Auto Key Rotation -->
<button @click="clickOpenAutoKeyRotation" class="btn minibtn minibtn-default btnzoom-b" :class="{ 'orangereddropdown': btnDisabledState_CheckAPI && ( (!isThirdPartyAPIKeyEnabled && apiCheckedData.filter(data => data.vpn !== 'third-party').length > 0) || (isThirdPartyAPIKeyEnabled && apiCheckedData.filter(data => data.vpn === 'third-party').length > 0) ) }" :style="{ marginRight: settingsLanguage == 'cn' ? '-11px' : '-11px'}" style="display: flex;" :title="settingsLanguage == 'cn' ? '管理自动轮换API Key' : 'Auto Key Rotation Management'">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/>
</svg>
</div>
{{ !isThirdPartyAPIKeyEnabled ? (settingsLanguage == 'cn' ? 'Key模式: 自动轮换API Key' : 'Key Mode: Auto Key Rotation') : (settingsLanguage == 'cn' ? 'Key模式: 第三方单Key模式' : 'Key Mode: 3rd party Key Mode') }}
</button>
<!-- 该功能已被隐藏 The feature has been hidden: Session Key不是固定的，每次登录退出都会变化。 The Session Key is not static and changes with each login and logout. -->
<button style="display: none;" @click="sendRequest_usingSessionKey" class="btn minibtn minibtn-default btnzoom-b" :style="{ marginRight: settingsLanguage == 'cn' ? '-4px' : '-5px'}" :title="settingsLanguage == 'cn' ? '查询OpenAI API余额 (via Session Key)' : 'Check OpenAI API balances (via Session Key)'">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="13px" height="13px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-miterlimit="10">
<circle cx="9.5106" cy="9.42613" r="7.64"/>
<path d="m6.6506,12.28613l3.34,0a1.43,1.43 0 0 0 1.43,-1.43l0,0a1.43,1.43 0 0 0 -1.43,-1.43l-0.95,0a1.44,1.44 0 0 1 -1.39,-1.44l0,0a1.44,1.44 0 0 1 1.44,-1.43l3.34,0"/>
<line x1="9.5106" x2="9.5106" y1="4.64613" y2="6.55613"/><line x1="9.5106" x2="9.5106" y1="12.28613" y2="14.19613"/><line transform="rotate(90 18.2202 18.6877)" x1="14.70164" x2="21.73886" y1="22.20633" y2="15.16912"/>
</svg>
</div>
{{ settingsLanguage == 'cn' ? 'Session Key' : 'Session Key' }}
</button>
</div>
<div class="panelrow">
<!-- 一键复制API Key Cpoy API Key -->
<button class="copybtn btncopyapikey" data-clipboard-nextelementsibling="" style="opacity:1;position:relative;flex-shrink: 0;height: 25px;top:0;right:0;margin-right:-4px;border-radius: 6px 0px 0px 6px;border: 1px solid #DDD;width: 25px" :title="settingsLanguage == 'cn' ? '一键复制' : 'One-Click Copy'">
<div>
<svg width="14" height="17" class="clippy" fill="currentColor">
<path d="m2.36373,12.61912l4.12233,0l0,1.03058l-4.12233,0l0,-1.03058zm5.15291,-6.18349l-5.15291,0l0,1.03058l5.15291,0l0,-1.03058zm2.06116,3.09174l0,-2.06116l-3.09174,3.09174l3.09174,3.09174l0,-2.06116l5.15291,0l0,-2.06116l-5.15291,0zm-4.63761,-1.03058l-2.57645,0l0,1.03058l2.57645,0l0,-1.03058zm-2.57645,3.09174l2.57645,0l0,-1.03058l-2.57645,0l0,1.03058zm9.27523,1.03058l1.03058,0l0,2.06116c-0.0161,0.28985 -0.11272,0.53139 -0.30595,0.72463s-0.43478,0.28985 -0.72463,0.30595l-10.30581,0c-0.5636,0 -1.03058,-0.46698 -1.03058,-1.03058l0,-11.33639c0,-0.5636 0.46698,-1.03058 1.03058,-1.03058l3.09175,0c0,-1.1433 0.91786,-2.06116 2.06116,-2.06116s2.06116,0.91786 2.06116,2.06116l3.09174,0c0.5636,0 1.03058,0.46698 1.03058,1.03058l0,5.15291l-1.03058,0l0,-3.09174l-10.30581,0l0,9.27523l10.30581,0l0,-2.06116zm-9.27523,-8.24465l8.24465,0c0,-0.5636 -0.46698,-1.03058 -1.03058,-1.03058l-1.03058,0c-0.5636,0 -1.03058,-0.46698 -1.03058,-1.03058s-0.46698,-1.03058 -1.03058,-1.03058s-1.03058,0.46698 -1.03058,1.03058s-0.46698,1.03058 -1.03058,1.03058l-1.03058,0c-0.5636,0 -1.03058,0.46698 -1.03058,1.03058z">
</path>
</svg>
</div>
</button>
<!-- 隐藏的API Key，这个可被复制内容 hide : Function: Data can be read by "Copy Btn" -->
<input class="inputghostforcopyapikey" type="text" v-model="api" style="opacity:0;height:1px;width:1px;overflow:hidden;margin:0;padding:0;border:none;" />
<!-- API Key输入框。 因为type="password" ，不可被复制。 Because type="password", it cannot be copied by "Copy Btn". -->
<input @blur="inputapiblur" @focus="inputapifocus" @input="inputapichange(false)" :style="{ color: btnDisabledState_CheckAPI ? '#cccccc' : '#191919' }" v-model="api" type="password" class="dh-input inputapikey" style="border-radius: 0px;" :placeholder="settingsLanguage == 'cn' ? 'API Key 粘贴到这里，支持第三方Key' : 'Paste API Key here, support Third-party Key.' " />
<!-- 验证API Key Check API Key -->
<button @click="checkAPIbtn" :disabled="btnDisabledState_CheckAPI" class="btn" :class="{ 'redbtn': !btnDisabledState_CheckAPI }" style="border-radius: 0px 6px 6px 0px;margin-left:-3px;" >{{apibtntext}}</button>
<!-- 1.查询OpenAI API余额 2.恢复API Key 1.Check OpenAI API balances 2.Restore Api Key-->
<button @click="sendRequest_or_restoreApiKeyInput" class="btn" :class="{ 'redbtn': !btnDisabledState_CheckAPI }" :style="{ padding: !btnDisabledState_CheckAPI ? '0 4px' : '0 8px' }" :title="settingsLanguage == 'cn' ? (btnDisabledState_CheckAPI ? '查询OpenAI API余额' : '取消修改 并恢复API Key') : (btnDisabledState_CheckAPI ? 'Check OpenAI API balances' : 'Cancel and Restore API Key')">
<div :style="{ display: btnDisabledState_CheckAPI ? 'flex' : 'none' }">
<svg xmlns="http://www.w3.org/2000/svg" width="21px" height="20px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-miterlimit="10">
<circle cx="9.5106" cy="9.42613" r="7.64"/>
<path d="m6.6506,12.28613l3.34,0a1.43,1.43 0 0 0 1.43,-1.43l0,0a1.43,1.43 0 0 0 -1.43,-1.43l-0.95,0a1.44,1.44 0 0 1 -1.39,-1.44l0,0a1.44,1.44 0 0 1 1.44,-1.43l3.34,0"/>
<line x1="9.5106" x2="9.5106" y1="4.64613" y2="6.55613"/><line x1="9.5106" x2="9.5106" y1="12.28613" y2="14.19613"/><line transform="rotate(90 18.2202 18.6877)" x1="14.70164" x2="21.73886" y1="22.20633" y2="15.16912"/>
</svg>
</div>
<div :style="{ display: btnDisabledState_CheckAPI ? 'none' : 'flex' }">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" y1="9" x2="9" y2="15"></line>
<line x1="9" y1="9" x2="15" y2="15"></line>
</svg>
</div>
</button>
</div>
</div>
<!-- panelgroup: API设置 API Settings -->
<div class="panelgroup panelgroup-shadow">
<div class="panelgroup-head">
<span>{{ settingsLanguage == 'cn' ? 'API设置' : 'API Settings' }}</span>
<button @click="showMiniHelp('A-APISettings')" class="btn minibtn bluebtn btnzoom-b" style="margin-right: auto;" :title="settingsLanguage == 'cn' ? '功能说明' : 'Help'">?</button>
<button @click="showMiniHelp('A-SmartMaxTokens')" class="btn minibtn orangeredbtn btnzoom-c" style="width: 12px; height: 12px;" :style="{ display: openSmartMaxTokens ? 'block' : 'none', marginRight: settingsLanguage == 'cn' ? '-7px' : '-9px'}" :title="settingsLanguage == 'cn' ? '功能说明' : 'Help'">?</button>
<select @change="changeSmartMaxTokens" class="dropdown minibtn minibtn-default btnzoom-d" :class="{ 'orangereddropdown': openSmartMaxTokens }" v-model="openSmartMaxTokens" :style="{ marginRight: settingsLanguage == 'cn' ? '-9px' : '-13px'}" :title="settingsLanguage == 'cn' ? '当前[Smart max_tokens]状态' : 'Current [Smart max_tokens] Status'">
<option v-if="settingsLanguage == 'cn'" v-for="option in smartMaxTokensOptions_cn" :value="option.state">{{ option.label }}</option>
<option v-else v-for="option in smartMaxTokensOptions_en" :value="option.state">{{ option.label }}</option>
</select>
<button @click="restoreDefault_APISettings" class="btn minibtn minibtn-default bluebtn btnzoom-b" :style="{ marginRight: settingsLanguage == 'cn' ? '-2px' : '-4px'}" :title="settingsLanguage == 'cn' ? '恢复默认' : 'Restore Default'">{{ settingsLanguage == 'cn' ? '恢复默认' : 'Restore Default' }}</button>
</div>
<div class="panelrow" style="align-items: start; height:auto;">
<!--温度/随机性/创造力 temperature -->
<div class="control-container" style="width:108px;flex-shrink: 0;">
<div>
<span>temperature: {{apitemperature}}</span>
</div>
<div class="control-bg" >
<input @change="changeTemperature" type="range" class="slider" v-model.number="apitemperature" min="0.0" max="2.0" step="0.1" value="0.7" >
</div>
</div>
<!-- 单次 最大令牌数量 max_tokens (4095 4096 4097 16384 16385 gpt-3.5 gpt-4 gpt3.5 gpt4) -->
<div class="control-container" style="flex: 1 1 0%;">
<div>
<span>max_tokens(</span><span style="margin-left: 0px;font-weight:500;">1~{{ gptModelList.find(model => model.modelname === apiGPTModel) ? gptModelList.find(model => model.modelname === apiGPTModel).maxtokens : 4096 }}</span><span style="margin-left: 0px;">): {{apiMaxTokens}}</span>
</div>
<div class="control-bg">
<input @change="changeMaxTokens" type="range" :disabled="openSmartMaxTokens" class="slider" v-model.number="apiMaxTokens" min="1" :max=" gptModelList.find(model => model.modelname === apiGPTModel) ? gptModelList.find(model => model.modelname === apiGPTModel).maxtokens : 4096 " step="1" value="2048" >
</div>
</div>
</div>
<div class="panelrow" style="align-items: start; height:auto;">
<!-- GPT模型 GPT Model -->
<div class="control-container" style="flex-shrink: 0;" :style="{ width: apiGPTModel === 'gpt-3.5-turbo-16k-0613' ? '178px' : '156px'}">
<div>
<span>model: {{apiGPTModel}}</span>
</div>
<select @change="changeGPTModel" class="dropdown" v-model="apiGPTModel" style="width: 100%;height: 24px;">
<option v-for="model in gptModelList" :value="model.modelname">{{ model.alias ? model.alias : model.modelname }}</option>
</select>
</div>
<!-- 单次最大令牌数量（精细调节 1～300） max_tokens（Fine 1～300） -->
<div class="control-container" style="flex: 1 1 0%;">
<div>
<span :title="settingsLanguage == 'cn' ? 'max_tokens (1~300)' : 'max_tokens (1~300)'">{{ settingsLanguage == 'cn' ? 'max_tokens(微调)' : 'max_tokens(Fine)' }}</span>
</div>
<div class="control-bg">
<input @change="changeMaxTokens" type="range" :disabled="openSmartMaxTokens" class="slider" v-model.number="apiMaxTokens" min="1" max="600" step="1" value="2048" >
</div>
</div>
<!-- 显示专业设置 Show more settings (Professional API Settings) -->
<div class="control-container">
<div>
<span>{{ settingsLanguage == 'cn' ? ' 更多' : ' More' }}</span>
</div>
<button @click="showProConfig" class="btn bluebtn btnzoom-c" :class="{ 'orangereddropdown': ( inputApiURL.toLowerCase().trim() !== OpenAI_API_URL ) }" style="margin: 0;padding: 0 4px;" :title="settingsLanguage == 'cn' ? '显示更多专业设置' : 'Show more Pro settings'">
<div>
PRO
</div>
</button>
</div>
</div>
</div>
<!-- panelgroup: API专业设置 Professional API Settings -->
<div class="panelgroup panelgroup-shadow" :style="{ display: isShowProConfig ? 'block' : 'none'}">
<div class="panelgroup-head">
<span>{{ settingsLanguage == 'cn' ? 'API专业设置' : 'Professional API Settings' }}</span>
<button @click="showMiniHelp('A-ProfessionalAPISettings')" class="btn minibtn bluebtn btnzoom-b" style="margin-right: auto;" :title="settingsLanguage == 'cn' ? '功能说明' : 'Help'">?</button>
<!-- 显示第三方代理平台 Show 3rd-party APIs * display: settingsLanguage == 'cn' ? 'block' : 'none' -->
<button @click="loadThirdPartyPaidAPIs" class="btn minibtn minibtn-default btnzoom-b" :style="{ marginRight: settingsLanguage == 'cn' ? '-7.5px' : '-10px', display: settingsLanguage == 'cn' ? 'block' : 'none' }" :title="isLoadThirdPartyPaidAPIs ? (settingsLanguage == 'cn' ? '隐藏第三方代理平台' : 'Hide 3rd-party APIs') : (settingsLanguage == 'cn' ? '显示第三方代理平台' : 'Show 3rd-party APIs')">
{{ isLoadThirdPartyPaidAPIs ? (settingsLanguage == 'cn' ? '隐藏第三方代理平台' : 'Hide 3rd-party APIs') : (settingsLanguage == 'cn' ? '显示第三方代理平台' : 'Show 3rd-party APIs') }}
</button>
<button @click="restoreDefault_ProfessionalAPISettings" class="btn minibtn minibtn-default bluebtn btnzoom-b" :style="{ marginRight: settingsLanguage == 'cn' ? '-2px' : '-4px'}" :title="settingsLanguage == 'cn' ? '恢复默认' : 'Restore Default'">{{ settingsLanguage == 'cn' ? '恢复默认' : 'Restore Default' }}</button>
</div>
<!-- 接口网址 API URL / API Endpoint -->
<div class="panelrow" style="align-items: start; height:auto;">
<span style="line-height: 25px;font-size: 12px;flex-shrink: 0;" :title="settingsLanguage == 'cn' ? 'API URL (API Endpoint)' : 'API Endpoint'">
{{ settingsLanguage == 'cn' ? '接口网址 :' : 'API URL :' }}
</span>
<input type="text" @input="inputApiURLChange" v-model="inputApiURL" class="dh-input" style="border-radius:6px 0px 0px 6px;" :placeholder="settingsLanguage == 'cn' ? '清空后保存 可重置为OpenAI官方接口' : 'Clear and save, can be reset to OpenAI API endpoint.' " />
<button @click="saveApiURL" :disabled="btnDisabledState_SaveApiURL" class="btn" style="border-radius: 0px 6px 6px 0px;margin-left:-3px;" >
{{ settingsLanguage == 'cn' ? '保存' : 'Save' }}
</button>
<select @change="updateInputApiURL" :disabled="btnDisabledState_ApiURL" class="dropdown" v-model="selectedApiURL" :class="{ 'orangereddropdown': ( !btnDisabledState_ApiURL && inputApiURL.toLowerCase().trim() !== OpenAI_API_URL ) }" :style="{ width: selectedApiURL === '' ? '31px' : ( settingsLanguage == 'cn' ? (selectedApiURL === apiURLOptions_en[0]['url'] ? '46px' : '57px') : (selectedApiURL === apiURLOptions_en[0]['url'] ? '63px' : '71px') ) }" :title="settingsLanguage == 'cn' ? '接口URL选项 (可选)' : 'Endpoint Options (Optional)'">
<option disabled value="">▼ {{ settingsLanguage == 'cn' ? '预设选项：GPT官方接口 和 第三方接口(来源于网络)' : 'Pre-set options: OpenAI API and Third-party APIs (Internet resources)' }}</option>
<option v-if="settingsLanguage == 'cn'" v-for="option in apiURLOptions_cn" :value="option.url">{{ option.label }}</option>
<option v-else v-for="option in apiURLOptions_en" :value="option.url">{{ option.label }}</option>
<option v-if=" !isLoadThirdPartyPaidAPIs" disabled value="help1">{{ settingsLanguage == 'cn' ? ' - 第三方接口来源网络，无法保证隐私安全和实效性' : ' - Third-party APIs can be unsafe or unreliable' }}</option>
<option v-if="!isSimpleMode" disabled value="help2">{{ settingsLanguage == 'cn' ? ' - 使用第三方接口时，颜色会出现变化' : ' - The colors will change when using third-party APIs' }}</option>
<option v-if="isLoadThirdPartyPaidAPIs" disabled value="help4">{{ settingsLanguage == 'cn' ? '***以下为收集自网络的付费代理API资源，需在各平台注册，涉及支付' : '***以下为收集自网络的付费代理API资源，需在各平台注册，涉及支付' }}</option>
<option v-if="isLoadThirdPartyPaidAPIs" disabled value="help5">{{ settingsLanguage == 'cn' ? '***请注意保护隐私和增强反诈意识，预防信息泄露和平台倒闭等情况' : '***请注意保护隐私和增强反诈意识，预防信息泄露和平台倒闭等情况' }}</option>
<option v-if="isLoadThirdPartyPaidAPIs" v-for="option in apiURLOptions_LoadThirdPartyPaidAPIs" :value="option.url">{{ option.label }}</option>
</select>
</div>
<div class="panelrow" style="align-items: start; height:auto;">
<!-- top_p -->
<div class="control-container" style="flex: 1 1 0%;">
<div>
<span style="font-size: 11px;">top_p: {{apiTopP}}</span>
</div>
<div class="control-bg" >
<input @change="changeTopP" type="range" class="slider" v-model.number="apiTopP" min="0.0" max="1" step="0.1" value="1" >
</div>
</div>
<!-- presence_penalty -->
<div class="control-container" style="width: 48%;flex: 1 1 15%;">
<div>
<span style="font-size: 11px;">presence_penalty: {{apiPresencePenalty}}</span>
</div>
<div class="control-bg" >
<input @change="changePresencePenalty" type="range" class="slider" v-model.number="apiPresencePenalty" min="-2.0" max="2.0" step="0.1" value="0" >
</div>
</div>
<!-- frequency_penalty -->
<div class="control-container" style="width: 48%;flex: 1 1 15%;">
<div>
<span style="font-size: 11px;">frequency_penalty: {{apiFrequencyPenalty}}</span>
</div>
<div class="control-bg" >
<input @change="changeFrequencyPenalty" type="range" class="slider" v-model.number="apiFrequencyPenalty" min="-2.0" max="2.0" step="0.1" value="0" >
</div>
</div>
</div>
</div>
<!-- panelgroup: 常规设置 General Settings -->
<div class="panelgroup panelgroup-shadow">
<div class="panelgroup-head">
<span>{{ settingsLanguage == 'cn' ? '常规设置' : 'General Settings' }}</span>
<button @click="showMiniHelp('A-GeneralSettings')" class="btn minibtn bluebtn btnzoom-b" style="margin-right: auto;" :title="settingsLanguage == 'cn' ? '功能说明' : 'Help'">?</button>
<div style="margin-right: -7px;">
<svg width="22" height="22" :fill="(pageScaling === '0.8' || pageScaling === '0.80') ? '#25ad24' : '#f44400'" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com">
<path d="m22,29l-12,0a3,3 0 0 1 -3,-3l0,-20a3,3 0 0 1 3,-3l12,0a3,3 0 0 1 3,3l0,20a3,3 0 0 1 -3,3zm-12,-24a1,1 0 0 0 -1,1l0,20a1,1 0 0 0 1,1l12,0a1,1 0 0 0 1,-1l0,-20a1,1 0 0 0 -1,-1l-12,0z" id="svg_1"/>
<path d="m18,7l-4,0a2,2 0 0 1 -2,-2l0,-1a1,1 0 0 1 1,-1l6,0a1,1 0 0 1 1,1l0,1a2,2 0 0 1 -2,2zm-4,-2l0,0z" />
</svg>
</div>
<select @change="changePageScaling(true)" class="dropdown minibtn minibtn-default btnzoom-b" v-model="selectedPageScaling" :class="{ 'orangereddropdown': !(pageScaling === '0.8' || pageScaling === '0.80') }" :style="{ marginRight: settingsLanguage == 'cn' ? '-4px' : '-7px', width: settingsLanguage == 'cn' ? '64px' : '90px' }" :title="settingsLanguage == 'cn' ? '更改页面缩放比例 (移动端)' : 'Change Page Scaling (Mobile)'">
<option disabled value="">{{ settingsLanguage == 'cn' ? '页面缩放' : 'Page Scaling' }}</option>
<option disabled value="help1">{{ settingsLanguage == 'cn' ? ' - 当前缩放为 ' + (parseFloat(this.pageScaling) * 100).toFixed(0) + '%，默认的缩放设置是 80%' : ' - Current scaling is ' + (parseFloat(this.pageScaling) * 100).toFixed(0) + '%, and default scaling is 80%' }}</option>
<option disabled value="help2">{{ settingsLanguage == 'cn' ? ' - 仅支持移动设备，电脑端不会进行缩放' : ' - Only mobile devices are supported, and there will be no scaling on desktop' }}</option>
<option v-for="option in selectedPageScalingOptions" :value="option">{{ option }}</option>
</select>
<button @click="restoreDefault_GeneralSettings" class="btn minibtn minibtn-default bluebtn btnzoom-b" :style="{ marginRight: settingsLanguage == 'cn' ? '-2px' : '-4px'}" :title="settingsLanguage == 'cn' ? '恢复默认' : 'Restore Default'">{{ settingsLanguage == 'cn' ? '恢复默认' : 'Restore Default' }}</button>
</div>
<div class="panelrow" style="align-items: start; height:auto;flex-wrap: wrap;justify-content: stretch;">
<!-- 记忆模式 / 上下文模式 Contextual Mode *部分功能[保留最后xx条记忆]/[Keep Last] 待开发 To be developed-->
<div class="control-container" style="min-width: 110px;max-width: 210px;flex: 1 1 0%;margin: 0px 3px;">
<div>
<span>{{ settingsLanguage == 'cn' ? '记忆模式' : 'Contextual Mode' }}</span>
</div>
<select @change="changeContextualMode" :disabled="btnDisabledState_ContextualMode" class="dropdown" v-model="settingsContextualMode" style="width: 100%;height: 24px;"
:class="{ 'orangereddropdown': !Number.isInteger(settingsContextualMode) ? false : settingsContextualMode === 0 ? false : btnDisabledState_ContextualMode ? false : true }">
<option v-if="!isSimpleMode" disabled value="help1">{{ settingsLanguage == 'cn' ? ' - 记忆: 即"上下文"。每次一问一答会产生 2 条记忆' : " - Every 2 context messages correspond to each Q&A session." }}</option>
<option disabled value="help2">{{ settingsLanguage == 'cn' ? ' - 设置[记忆上限]，达到后，会在发送新消息时自动清除之前全部记忆' : " - [Limit]: The context will be automatically cleared after reaching the limit." }}</option>
<option disabled value="help3">{{ settingsLanguage == 'cn' ? ' - 设置[保留最后xx条记忆]，会始终保持记忆为最新的xx条历史消息 *待开发' : " - [Keep Last]: Always keep the last ** number of messages as the context. *To be developed" }}</option>
<option v-if="settingsLanguage == 'cn'" v-for="option in settingsContextualModeOptions_cn" :value="option.mode">{{ option.label }}</option>
<option v-else v-for="option in settingsContextualModeOptions_en" :value="option.mode">{{ option.label }}</option>
</select>
</div>
<!-- 语言切换 中/英 Language -->
<div class="control-container" style="min-width: 80px;max-width: 180px;flex: 1 1 0%;margin: 0px 3px;">
<div>
<span>{{ settingsLanguage == 'cn' ? 'Language 🇨🇳' : '语言 🇬🇧' }}</span>
</div>
<select @change="changeLanguage" :disabled="btnDisabledState_Language" class="dropdown" v-model="settingsLanguage" style="width: 100%;height: 24px;">
<option v-for="option in settingsLanguageOptions" :value="option.lang">{{ option.label }}</option>
</select>
</div>
<!-- 字体大小 Font Size -->
<div class="control-container" style="min-width: 65px;max-width: 165px;flex: 1 1 0%;margin: 0px 3px;">
<div>
<span>{{ settingsLanguage == 'cn' ? '字体大小' : 'Font Size' }}</span>
</div>
<select @change="changeStyle_FontSize" class="dropdown" v-model="settingsFontSize" style="width: 100%;height: 24px;">
<option disabled value="">{{ settingsLanguage == 'cn' ? ' - 避免在文本过多的对话中进行更改，以免导致网页崩溃' : " - To avoid crashes, don't make changes in chats with excessive content" }}</option>
<option v-for="option in settingsFontSizeOptions" :value="option.fontsize">{{ option.label }}</option>
</select>
</div>
<!-- 显示时间(微信样式) Display time (WeChat style) -->
<div class="control-container" style="min-width: 125px;max-width: 225px;flex: 1 1 0%;margin: 0px 3px;">
<div>
<span>{{ settingsLanguage == 'cn' ? '仿微信时间' : 'Time (WeChat style)' }}</span>
</div>
<select @change="changeStyle_Time_WechatStyle" class="dropdown" v-model="settingsTime_WechatStyle" style="width: 100%;height: 24px;">
<option v-if="settingsLanguage == 'cn'" v-for="option in settingsTimeWechatStyleOptions_cn" :value="option.displaytime">{{ option.label }}</option>
<option v-else v-for="option in settingsTimeWechatStyleOptions_en" :value="option.displaytime">{{ option.label }}</option>
</select>
</div>
<!-- 显示消息时间 Display message time. -->
<div class="control-container" style="min-width: 105px;max-width: 205px;flex: 1 1 0%;margin: 0px 3px;">
<div>
<span>{{ settingsLanguage == 'cn' ? '消息时间' : 'Time (Message)' }}</span>
</div>
<select @change="changeStyle_Time" class="dropdown" v-model="settingsTime_Message" style="width: 100%;height: 24px;">
<option v-if="settingsLanguage == 'cn'" v-for="option in settingsTimeMessageOptions_cn" :value="option.displaytime">{{ option.label }}</option>
<option v-else v-for="option in settingsTimeMessageOptions_en" :value="option.displaytime">{{ option.label }}</option>
</select>
</div>
<!-- 显示分割线 记忆分割线/上下文分割线 Display divider line -->
<div class="control-container" style="min-width: 125px;max-width: 225px;flex: 1 1 0%;margin: 0px 3px;">
<div>
<span>{{ settingsLanguage == 'cn' ? '记忆分割线' : 'Context Divider Line' }}</span>
</div>
<select @change="changeStyle_DividerLine" class="dropdown" v-model="settingsDividerLine" style="width: 100%;height: 24px;">
<option v-if="settingsLanguage == 'cn'" v-for="option in settingsDividerLineOptions_cn" :value="option.displaydividerline">{{ option.label }}</option>
<option v-else v-for="option in settingsDividerLineOptions_en" :value="option.displaydividerline">{{ option.label }}</option>
</select>
</div>
<!-- 验证API Key 快捷键 Check API Key Shortcut ***v8.27 改用途 改成"打开Key模式窗口"的快捷键 Change the original purpose to "Open Key Mode window". -->
<div class="control-container" style="min-width: 150px;max-width: 260px;flex: 1 1 0%;margin: 0px 3px;">
<div>
<span>{{ settingsLanguage == 'cn' ? '[Key 模式] 快捷键' : '[Key Mode] Shortcut' }}</span>
</div>
<select class="dropdown" v-model="settingsShortcut_CheckApiKey" style="width: 100%;height: 24px;">
<option v-if="settingsLanguage == 'cn'" v-for="option in settingsShortcutCheckApiKeyOptions_cn" :value="option.shortcut">{{ option.label }}</option>
<option v-else v-for="option in settingsShortcutCheckApiKeyOptions_en" :value="option.shortcut">{{ option.label }}</option>
</select>
</div>
<!-- 清除记忆快捷键 Clear Context Shortcut-->
<div class="control-container" style="min-width: 140px;max-width: 250px;flex: 1 1 0%;margin: 0px 3px;">
<div>
<span>{{ settingsLanguage == 'cn' ? '[清除记忆] 快捷键' : '[Clear Context] Shortcut' }}</span>
</div>
<select class="dropdown" v-model="settingsShortcut_Clear" style="width: 100%;height: 24px;">
<option v-if="settingsLanguage == 'cn'" v-for="option in settingsShortcutClearOptions_cn" :value="option.shortcut">{{ option.label }}</option>
<option v-else v-for="option in settingsShortcutClearOptions_en" :value="option.shortcut">{{ option.label }}</option>
</select>
</div>
<!-- 撤销快捷键 Undo Shortcut -->
<div class="control-container" style="min-width: 95px;max-width: 195px;flex: 1 1 0%;margin: 0px 3px;">
<div>
<span>{{ settingsLanguage == 'cn' ? '[撤销] 快捷键' : '[Undo] Shortcut' }}</span>
</div>
<select class="dropdown" v-model="settingsShortcut_Undo" style="width: 100%;height: 24px;">
<option v-if="settingsLanguage == 'cn'" v-for="option in settingsShortcutUndoOptions_cn" :value="option.shortcut">{{ option.label }}</option>
<option v-else v-for="option in settingsShortcutUndoOptions_en" :value="option.shortcut">{{ option.label }}</option>
</select>
</div>
<!-- 重问快捷键 Retry Shortcut -->
<div class="control-container" style="min-width: 95px;max-width: 195px;flex: 1 1 0%;margin: 0px 3px;">
<div>
<span>{{ settingsLanguage == 'cn' ? '[重问] 快捷键' : '[Retry] Shortcut' }}</span>
</div>
<select class="dropdown" v-model="settingsShortcut_Retry" style="width: 100%;height: 24px;">
<option v-if="settingsLanguage == 'cn'" v-for="option in settingsShortcutRetryOptions_cn" :value="option.shortcut">{{ option.label }}</option>
<option v-else v-for="option in settingsShortcutRetryOptions_en" :value="option.shortcut">{{ option.label }}</option>
</select>
</div>
</div>
<!-- 用户头像 user Avatar -->
<div class="panelrow" style="height:36px;">
<select class="dropdown" v-model="selectedImageUrl" @change="updateSelectedImage('user')" :style="{ width: settingsLanguage == 'cn' ? '72px' : '87px' }" style="flex-shrink: 0;height: 24px;margin-right: 4px;margin-left: 3px;" :title="settingsLanguage == 'cn' ? '用户头像选项 (可选)' : 'User Avatar Options (Optional)'">
<option value="">{{ settingsLanguage == 'cn' ? '用户头像' : 'User Avatar' }}</option>
<option v-if="!isSimpleMode" disabled value="help1">{{ settingsLanguage == 'cn' ? ' - 支持多种方式更改头像，点击面板[?]了解更多' : ' - Offering multiple options to change avatars. Click the panel [?] to learn more' }}</option>
<option value="uploadimage">{{ settingsLanguage == 'cn' ? ' - 点击右侧头像 可上传图片' : ' - Click the Avatar on the right to upload an image' }}</option>
<option :value="userAvatarUp_blobUrl">{{ settingsLanguage == 'cn' ? (userAvatarUp_blobUrl == '' ? '1) 最近上传的用户头像 (您还没上传小于350KB的头像)' : '1) 最近上传的用户头像 (可用)') : (userAvatarUp_blobUrl == '' ? '1) Uploaded User Avatar (No uploaded avatar within 350KB)' : '1) Uploaded User Avatar (Available)') }}</option>
<option v-if="settingsLanguage == 'cn'" v-for="image in userpresetImages_cn" :value="image.url">{{ image.name }}</option>
<option v-else v-for="image in userpresetImages_en" :value="image.url">{{ image.name }}</option>
</select>
<span style="line-height: 25px; font-size: 12px; flex-shrink: 0;" :title="settingsLanguage == 'cn' ? '或手动输入网络图片网址/本地图片路径' : 'or Manually Enter Image URL / Local Image Path'">{{ settingsLanguage == 'cn' ? '或 URL:' : 'or URL' }}</span>
<input type="text" v-model="inputUserImageUrl" @input="inputImageUrlChange('user')" class="dh-input" style="flex: 1 1 0%;border-radius:6px 0px 0px 6px;" :placeholder="settingsLanguage == 'cn' ? '输入图片的网址（本地运行.html网页时支持电脑中图片的本地路径）' : 'Image URL. (Local image paths are supported when running *.html from PC/Mac.)' " >
<button @click="updateAvatar('user')" :disabled="btnDisabledState_updateUserImageUrl" class="btn" :style="{ width: settingsLanguage == 'cn' ? '68px' : '85px' }" style="flex-shrink: 0;border-radius: 0px 6px 6px 0px;margin-left:-3px;margin-right: 4px;" :title="settingsLanguage == 'cn' ? '可选: 在修改图片网址后 点击更换' : 'Optional: Click Update after modifying the image URL'">{{ settingsLanguage == 'cn' ? '更换 >>' : 'Update >>' }}</button>
<div id="div-upload-userAvataror" class="chat-img chat-img-bg chat-img-border update-img-size btnzoom-a" :title="settingsLanguage == 'cn' ? '可选: 点击上传我的头像' : 'Optional: Click to upload my avatar'">
<img :src="userAvatarURL">
</div>
</div>
<!-- GPT头像 gpt Avatar -->
<div class="panelrow" style="height:35px;">
<select class="dropdown" v-model="selectedImageUrl" @change="updateSelectedImage('gpt')" :style="{ width: settingsLanguage == 'cn' ? '72px' : '87px' }" style="flex-shrink: 0;height: 24px;margin-right: 4px;margin-left: 3px;" :title="settingsLanguage == 'cn' ? 'GPT头像选项 (可选)' : 'GPT Avatar Options (Optional)'">
<option value="">{{ settingsLanguage == 'cn' ? 'GPT头像' : 'GPT Avatar' }}</option>
<option v-if="!isSimpleMode" disabled value="help1">{{ settingsLanguage == 'cn' ? ' - 支持多种方式更改头像，点击面板[?]了解更多' : ' - Offering multiple options to change avatars. Click the panel [?] to learn more' }}</option>
<option value="uploadimage">{{ settingsLanguage == 'cn' ? ' - 点击右侧头像 可上传图片' : ' - Click the Avatar on the right to upload an image' }}</option>
<option v-if="settingsLanguage == 'cn'" v-for="image in gptpresetImages_cn" :value="image.url">{{ image.name }}</option>
<option v-else v-for="image in gptpresetImages_en" :value="image.url">{{ image.name }}</option>
</select>
<span style="line-height: 25px; font-size: 12px; flex-shrink: 0;" :title="settingsLanguage == 'cn' ? '或手动输入网络图片网址/本地图片路径' : 'or Manually Enter Image URL / Local Image Path'">{{ settingsLanguage == 'cn' ? '或 URL:' : 'or URL' }}</span>
<input type="text" v-model="inputGPTImageUrl" @input="inputImageUrlChange('gpt')" class="dh-input" style="flex: 1 1 0%;border-radius:6px 0px 0px 6px;" :placeholder="settingsLanguage == 'cn' ? '输入图片的网址（本地运行.html网页时支持电脑中图片的本地路径）' : 'Image URL. (Local image paths are supported when running *.html from PC/Mac.)' ">
<button @click="updateAvatar('gpt')" :disabled="btnDisabledState_updateGPTImageUrl" class="btn" :style="{ width: settingsLanguage == 'cn' ? '68px' : '85px' }" style="flex-shrink: 0;border-radius: 0px 6px 6px 0px;margin-left:-3px;margin-right: 4px;" :title="settingsLanguage == 'cn' ? '可选: 在修改图片网址后 点击更换' : 'Optional: Click Update after modifying the image URL'">{{ settingsLanguage == 'cn' ? '更换 >>' : 'Update >>' }}</button>
<div id="div-upload-gptAvataror" class="chat-img chat-img-bg chat-img-border update-img-size btnzoom-a" :style="{ display: isgptGreenSvgShow ? 'none' : 'flex' }" :title="settingsLanguage == 'cn' ? '可选: 点击上传GPT头像' : 'Optional: Click to upload GPT avatar'">
<img :src="gptAvatarURL">
</div>
<div id="div-upload-gptAvataror-SVG" class="chat-img chat-img-border chat-green-svg update-img-size btnzoom-a" :style="{ display: isgptGreenSvgShow ? 'flex' : 'none' }" :title="settingsLanguage == 'cn' ? '可选: 点击上传GPT头像' : 'Optional: Click to upload GPT avatar'">
<svg width="27" height="27" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" role="img">
<path d="M37.5324 16.8707C37.9808 15.5241 38.1363 14.0974 37.9886 12.6859C37.8409 11.2744 37.3934 9.91076 36.676 8.68622C35.6126 6.83404 33.9882 5.3676 32.0373 4.4985C30.0864 3.62941 27.9098 3.40259 25.8215 3.85078C24.8796 2.7893 23.7219 1.94125 22.4257 1.36341C21.1295 0.785575 19.7249 0.491269 18.3058 0.500197C16.1708 0.495044 14.0893 1.16803 12.3614 2.42214C10.6335 3.67624 9.34853 5.44666 8.6917 7.47815C7.30085 7.76286 5.98686 8.3414 4.8377 9.17505C3.68854 10.0087 2.73073 11.0782 2.02839 12.312C0.956464 14.1591 0.498905 16.2988 0.721698 18.4228C0.944492 20.5467 1.83612 22.5449 3.268 24.1293C2.81966 25.4759 2.66413 26.9026 2.81182 28.3141C2.95951 29.7256 3.40701 31.0892 4.12437 32.3138C5.18791 34.1659 6.8123 35.6322 8.76321 36.5013C10.7141 37.3704 12.8907 37.5973 14.9789 37.1492C15.9208 38.2107 17.0786 39.0587 18.3747 39.6366C19.6709 40.2144 21.0755 40.5087 22.4946 40.4998C24.6307 40.5054 26.7133 39.8321 28.4418 38.5772C30.1704 37.3223 31.4556 35.5506 32.1119 33.5179C33.5027 33.2332 34.8167 32.6547 35.9659 31.821C37.115 30.9874 38.0728 29.9178 38.7752 28.684C39.8458 26.8371 40.3023 24.6979 40.0789 22.5748C39.8556 20.4517 38.9639 18.4544 37.5324 16.8707ZM22.4978 37.8849C20.7443 37.8874 19.0459 37.2733 17.6994 36.1501C17.7601 36.117 17.8666 36.0586 17.936 36.0161L25.9004 31.4156C26.1003 31.3019 26.2663 31.137 26.3813 30.9378C26.4964 30.7386 26.5563 30.5124 26.5549 30.2825V19.0542L29.9213 20.998C29.9389 21.0068 29.9541 21.0198 29.9656 21.0359C29.977 21.052 29.9842 21.0707 29.9867 21.0902V30.3889C29.9842 32.375 29.1946 34.2791 27.7909 35.6841C26.3872 37.0892 24.4838 37.8806 22.4978 37.8849ZM6.39227 31.0064C5.51397 29.4888 5.19742 27.7107 5.49804 25.9832C5.55718 26.0187 5.66048 26.0818 5.73461 26.1244L13.699 30.7248C13.8975 30.8408 14.1233 30.902 14.3532 30.902C14.583 30.902 14.8088 30.8408 15.0073 30.7248L24.731 25.1103V28.9979C24.7321 29.0177 24.7283 29.0376 24.7199 29.0556C24.7115 29.0736 24.6988 29.0893 24.6829 29.1012L16.6317 33.7497C14.9096 34.7416 12.8643 35.0097 10.9447 34.4954C9.02506 33.9811 7.38785 32.7263 6.39227 31.0064ZM4.29707 13.6194C5.17156 12.0998 6.55279 10.9364 8.19885 10.3327C8.19885 10.4013 8.19491 10.5228 8.19491 10.6071V19.808C8.19351 20.0378 8.25334 20.2638 8.36823 20.4629C8.48312 20.6619 8.64893 20.8267 8.84863 20.9404L18.5723 26.5542L15.206 28.4979C15.1894 28.5089 15.1703 28.5155 15.1505 28.5173C15.1307 28.5191 15.1107 28.516 15.0924 28.5082L7.04046 23.8557C5.32135 22.8601 4.06716 21.2235 3.55289 19.3046C3.03862 17.3858 3.30624 15.3413 4.29707 13.6194ZM31.955 20.0556L22.2312 14.4411L25.5976 12.4981C25.6142 12.4872 25.6333 12.4805 25.6531 12.4787C25.6729 12.4769 25.6928 12.4801 25.7111 12.4879L33.7631 17.1364C34.9967 17.849 36.0017 18.8982 36.6606 20.1613C37.3194 21.4244 37.6047 22.849 37.4832 24.2684C37.3617 25.6878 36.8382 27.0432 35.9743 28.1759C35.1103 29.3086 33.9415 30.1717 32.6047 30.6641C32.6047 30.5947 32.6047 30.4733 32.6047 30.3889V21.188C32.6066 20.9586 32.5474 20.7328 32.4332 20.5338C32.319 20.3348 32.154 20.1698 31.955 20.0556ZM35.3055 15.0128C35.2464 14.9765 35.1431 14.9142 35.069 14.8717L27.1045 10.2712C26.906 10.1554 26.6803 10.0943 26.4504 10.0943C26.2206 10.0943 25.9948 10.1554 25.7963 10.2712L16.0726 15.8858V11.9982C16.0715 11.9783 16.0753 11.9585 16.0837 11.9405C16.0921 11.9225 16.1048 11.9068 16.1207 11.8949L24.1719 7.25025C25.4053 6.53903 26.8158 6.19376 28.2383 6.25482C29.6608 6.31589 31.0364 6.78077 32.2044 7.59508C33.3723 8.40939 34.2842 9.53945 34.8334 10.8531C35.3826 12.1667 35.5464 13.6095 35.3055 15.0128ZM14.2424 21.9419L10.8752 19.9981C10.8576 19.9893 10.8423 19.9763 10.8309 19.9602C10.8195 19.9441 10.8122 19.9254 10.8098 19.9058V10.6071C10.8107 9.18295 11.2173 7.78848 11.9819 6.58696C12.7466 5.38544 13.8377 4.42659 15.1275 3.82264C16.4173 3.21869 17.8524 2.99464 19.2649 3.1767C20.6775 3.35876 22.0089 3.93941 23.1034 4.85067C23.0427 4.88379 22.937 4.94215 22.8668 4.98473L14.9024 9.58517C14.7025 9.69878 14.5366 9.86356 14.4215 10.0626C14.3065 10.2616 14.2466 10.4877 14.2479 10.7175L14.2424 21.9419ZM16.071 17.9991L20.4018 15.4978L24.7325 17.9975V22.9985L20.4018 25.4983L16.071 22.9985V17.9991Z" fill="currentColor">
</svg>
</div>
</div>
</div>
<!-- panelgroup: 打开对话列表 open Chat List 打开提示词窗口 open Prompt Generator 下载聊天记录 Export chat history. -->
<div class="panelgroup panelgroup-shadow">
<div class="panelrow" style="align-items: center; height:auto;flex-wrap: wrap;justify-content: stretch;">
<div class="control-container" style=" flex: 1 1 0%;" :style="{ minWidth: settingsLanguage == 'cn' ? '119px' : '129px',maxWidth: settingsLanguage == 'cn' ? '179px' : '199px' }">
<div>
<span>{{ settingsLanguage == 'cn' ? '对话列表' : 'Chat List' }}</span>
<button @click="showMiniHelp('C-ChatList')" class="btn minibtn bluebtn btnzoom-b" :title="settingsLanguage == 'cn' ? '功能说明' : 'Help'">?</button>
</div>
<button @click="clickOpenChatList" class="btn bluebtn" style="width:100%;margin: 2px 0px 4px 0px;justify-content: start;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg> {{ settingsLanguage == 'cn' ? '打开对话列表' : 'Open Chat List' }}
</button>
</div>
<div class="control-container" style=" flex: 1 1 0%;" :style="{ minWidth: settingsLanguage == 'cn' ? '130px' : '179px',maxWidth: settingsLanguage == 'cn' ? '190px' : '239px' }">
<div>
<span>{{ settingsLanguage == 'cn' ? '提示词窗口' : 'Prompt Generator' }}</span>
</div>
<button @click="clickOpenPromptGenerator" class="btn bluebtn" style="width:100%;margin: 2px 0px 4px 0px;justify-content: start;">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M19.7,23.5H4.3c-2.1,0-3.8-1.7-3.8-3.8V4.3c0-2.1,1.7-3.8,3.8-3.8h15.3c2.1,0,3.8,1.7,3.8,3.8v15.3 C23.5,21.8,21.8,23.5,19.7,23.5z M4.3,1.5c-1.6,0-2.8,1.3-2.8,2.8v15.3c0,1.6,1.3,2.8,2.8,2.8h15.3c1.6,0,2.8-1.3,2.8-2.8V4.3 c0-1.6-1.3-2.8-2.8-2.8H4.3z"/>
<path d="M10.4,19.2H7.3c-0.3,0-0.5-0.2-0.5-0.5V5.3c0-0.3,0.2-0.5,0.5-0.5h9.3c0.3,0,0.5,0.2,0.5,0.5v8.5c0,0.3-0.2,0.5-0.5,0.5 h-5.7v4.4C10.9,19,10.7,19.2,10.4,19.2z M7.8,18.2h2.1v-4.4c0-0.3,0.2-0.5,0.5-0.5h5.7V5.8H7.8V18.2z M13.6,11.2h-3.2 c-0.3,0-0.5-0.2-0.5-0.5V8.4c0-0.3,0.2-0.5,0.5-0.5h3.2c0.3,0,0.5,0.2,0.5,0.5v2.3C14.1,11,13.9,11.2,13.6,11.2z M10.9,10.2h2.2 V8.9h-2.2V10.2z"/>
</svg> {{ settingsLanguage == 'cn' ? '打开提示词窗口' : 'Open Prompt Generator' }}
</button>
</div>
<div class="control-container" style=" flex: 1 1 0%;" :style="{ minWidth: settingsLanguage == 'cn' ? '130px' : '179px' }">
<div>
<span>{{ settingsLanguage == 'cn' ? '导出聊天记录/日志' : 'Export Chat History / Logs' }}</span>
<button @click="showMiniHelp('A-ExportChatHistory')" class="btn minibtn bluebtn btnzoom-b" style="margin-right: auto;" :title="settingsLanguage == 'cn' ? '功能说明' : 'Help'">?</button>
</div>
<select @change="changeSelectedExportChatHistory" :disabled="btnDisabledState_Export" class="dropdown" v-model="selectedExportChatHistory" style="width: 100%; height: 25px; margin: 2px 0px 4px;">
<option value="">{{ settingsLanguage == 'cn' ? '当前对话ID: #' + ( this.chatid == null ? '' : (this.chatid.toString().length > 18 ? (this.chatid.toString().slice(0, 18) + " ...") : this.chatid.toString().slice(0, 18)) ) : 'Current Chat ID: #' + ( this.chatid == null ? '' : (this.chatid.toString().length > 18 ? (this.chatid.toString().slice(0, 18) + " ...") : this.chatid.toString().slice(0, 18)) ) }}</option>
<option disabled value="help1">{{ settingsLanguage == 'cn' ? ' - 导出当前对话的文本内容' : ' - Export the text content of the current chat' }}</option>
<option v-if="settingsLanguage == 'cn'" v-for="option in selectedExportChatHistoryOptions_cn" :value="option.type">{{ option.label }}</option>
<option v-else v-for="option in selectedExportChatHistoryOptions_en" :value="option.type">{{ option.label }}</option>
<option v-if="!isSimpleMode" disabled value="help2">{{ settingsLanguage == 'cn' ? ' - 导出为纯文本，不可用于导入' : ' - Export to Plain Text, Not available for import' }}</option>
<option v-if="!isSimpleMode" disabled value="help3">{{ settingsLanguage == 'cn' ? ' - 文本内容使用Markdown格式' : ' - Plain text is formatted using Markdown syntax' }}</option>
</select>
</div>
</div>
</div>
<!-- panelgroup: 数据管理与隐私 Data Privacy and Management. -->
<div class="panelgroup panelgroup-shadow">
<div class="panelgroup-head">
<span>{{ settingsLanguage == 'cn' ? '数据管理与隐私 ' : 'Data Privacy and Management ' }}</span>
<button @click="showMiniHelp('A-DataPrivacyAndManagement')" class="btn minibtn bluebtn btnzoom-b" :class="{ 'orangeredbtn': (isLocalStorageSupported && !isSimpleMode) ,'redbtn': !isLocalStorageSupported }" :style="{ marginRight: isLocalStorageSupported ? '2px' : '2px' }" :title="settingsLanguage == 'cn' ? '功能说明' : 'Help'">?</button>
<span :style="{ color: isLocalStorageSupported ? '#f94000' : '#fa1e0a'}" style="display:block; margin-right: auto;font-size: 12px;">{{ isLocalStorageSupported ? ( isSimpleMode ? '' : (settingsLanguage == 'cn' ? '已启用自动保存，用户数据仅存储在浏览器的缓存中' : "Autosave has been enabled. User data is stored solely in the browser's local storage.") ) : (settingsLanguage == 'cn' ? '自动保存不可用，当前浏览器或浏览器模式不支持"浏览器本地存储"' : 'Autosave is not available. LocalStorage is not supported in this browser or browser mode.') }}</span>
</div>
<div class="panelrow" style="align-items: start; height:auto;flex-wrap: wrap;justify-content: stretch;">
<select @change="changeSelectedDeleteLocalStorageData" class="dropdown" v-model="selectedDeleteLocalStorageData" style="width: auto;height: 24px; flex: 1 1 0%; margin: 4px 3px 1px 0px;" :style="{ minWidth: settingsLanguage == 'cn' ? '71px' : '85px' }">
<option value="">{{ settingsLanguage == 'cn' ? '删除数据' : 'Delete Data' }}</option>
<option v-if="!isSimpleMode" disabled value="help">{{ settingsLanguage == 'cn' ? ' - 谨慎操作，数据删除不可逆' : ' - The deletion of data is irreversible' }}</option>
<option v-if="settingsLanguage == 'cn'" v-for="option in selectedDeleteLocalStorageDataOptions_cn" :value="option.type">{{ option.label }}</option>
<option v-else v-for="option in selectedDeleteLocalStorageDataOptions_en" :value="option.type">{{ option.label }}</option>
</select>
<select @change="changeSelectedExportLocalStorageData" :disabled="!isLocalStorageSupported" class="dropdown" v-model="selectedExportLocalStorageData" style="width: auto;height: 24px; flex: 1 1 0%; margin: 4px 3px 1px 3px;" :style="{ minWidth: settingsLanguage == 'cn' ? '86px' : '95px' }">
<option value="">{{ settingsLanguage == 'cn' ? '导出 (.json)' : 'Export (.json)' }}</option>
<option v-if="!isSimpleMode" disabled value="help1">{{ settingsLanguage == 'cn' ? ' - 导出的JSON文件，可再次导入到LinGPT' : ' - Export as JSON File for Re-import into LinGPT' }}</option>
<option v-if="!isSimpleMode" disabled value="help2">{{ settingsLanguage == 'cn' ? ' - 用途：迁移数据、分享给他人、备份数据' : ' - Use: Data Transfer, Share with Others, Backup' }}</option>
<option v-if="settingsLanguage == 'cn'" v-for="option in selectedExportLocalStorageDataOptions_cn" :value="option.type">{{ option.label }}</option>
<option v-else v-for="option in selectedExportLocalStorageDataOptions_en" :value="option.type">{{ option.label }}</option>
<option v-if="!isSimpleMode" disabled value="help3">{{ settingsLanguage == 'cn' ? ' - 只想导出单个对话，请在[对话列表]中点击[•••]' : ' - To export a single chat, click [•••] in [Chat List]' }}</option>
<option v-if="!isSimpleMode" disabled value="help4">{{ settingsLanguage == 'cn' ? ' - 浏览器兼容性问题会导致失败' : ' - Browser compatibility issues may cause failure' }}</option>
</select>
<button @click="importLocalStorageData" :disabled="!isLocalStorageSupported" class="btn" style="justify-content: start;width: auto;height: 24px; flex: 1 1 0%; margin: 4px 3px 1px 3px;" :style="{ minWidth: settingsLanguage == 'cn' ? '87px' : '98px' }">
{{ settingsLanguage == 'cn' ? '导入 (.json)' : 'Import (.json)' }}
</button>
<button @click="getLocalStorageSize" :disabled="!isLocalStorageSupported" class="btn" style="padding: 0px 4px; height: 24px; line-height: 24px; margin: 4px 2px 1px 3px;min-width: 23px;" :title="settingsLanguage == 'cn' ? '用量统计' : 'Usage statistics'">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.2 7.8l-7.7 7.7-4-4-5.7 5.7"/><path d="M15 7h6v6"/>
</svg>
</button>
</div>
</div>
<!-- End: A: 主体内容 content -->
</div>
<!-- End: A: 滚动框架 scroll -->
</div>
<!-- dialog-bottom -->
<div class="dialog-bottom">
</div>
<!-- End: A: dialog -->
</div>
<!-- dialog-mask -->
<div class="dialog-mask" @click="isShowDialog_Settings = false">
</div>
<!-- End: dialog-wrapper A: 设置 Settings -->
</div>
<!-- dialog-wrapper B: 提示词 Prompt Generator -->
<div id="dialog-promptgenerator" class="dialog-wrapper" v-show="isShowDialog_PromptGenerator">
<!-- B: dialog -->
<div class="dialog" style="width: 95%;max-width: 800px; max-height: 680px;">
<!-- B: 标题 header -->
<div class="dialog-header">
<div class="dialog-title" >
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M19.7,23.5H4.3c-2.1,0-3.8-1.7-3.8-3.8V4.3c0-2.1,1.7-3.8,3.8-3.8h15.3c2.1,0,3.8,1.7,3.8,3.8v15.3 C23.5,21.8,21.8,23.5,19.7,23.5z M4.3,1.5c-1.6,0-2.8,1.3-2.8,2.8v15.3c0,1.6,1.3,2.8,2.8,2.8h15.3c1.6,0,2.8-1.3,2.8-2.8V4.3 c0-1.6-1.3-2.8-2.8-2.8H4.3z"/>
<path d="M10.4,19.2H7.3c-0.3,0-0.5-0.2-0.5-0.5V5.3c0-0.3,0.2-0.5,0.5-0.5h9.3c0.3,0,0.5,0.2,0.5,0.5v8.5c0,0.3-0.2,0.5-0.5,0.5 h-5.7v4.4C10.9,19,10.7,19.2,10.4,19.2z M7.8,18.2h2.1v-4.4c0-0.3,0.2-0.5,0.5-0.5h5.7V5.8H7.8V18.2z M13.6,11.2h-3.2 c-0.3,0-0.5-0.2-0.5-0.5V8.4c0-0.3,0.2-0.5,0.5-0.5h3.2c0.3,0,0.5,0.2,0.5,0.5v2.3C14.1,11,13.9,11.2,13.6,11.2z M10.9,10.2h2.2 V8.9h-2.2V10.2z"/>
</svg>
{{ settingsLanguage == 'cn' ? ' 提示词 ' : ' Prompt Generator ' }}
<button @click="changePromptGeneratorMaxWidth" class="btn bluebtn" style="margin-right: 7px;width: 22px; padding: 0px 1px; height: 20px;" :title="settingsLanguage == 'cn' ? '更改最大宽度' : 'Change Maximum Width'">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
</div>
</button>
<button @click="changePromptGeneratorLayout" class="btn bluebtn" style="margin-right: auto;margin-left: 1px;width: 22px; padding: 0px 1px; height: 20px;" :title="settingsLanguage == 'cn' ? '更改布局 (适用于移动设备)' : 'Change Layout (For Mobile)'">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/></svg>
</div>
</button>
</div>
<div class="dialog-close" @click="isShowDialog_PromptGenerator = false" :title="settingsLanguage == 'cn' ? '关闭' : 'Close'">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill: none; stroke: #333; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;">
<path d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>