qqsl-agent 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/images/floating/arrow-down.png +0 -0
- package/assets/images/floating/history-menu.png +0 -0
- package/assets/images/floating/new-chat.png +0 -0
- package/assets/styles/index.css +6 -1
- package/chat/chat-input/chat-input.component.d.ts +18 -4
- package/chat/chat-sidebar/chat-sidebar.component.d.ts +2 -1
- package/chat/chat.module.d.ts +21 -17
- package/chat/floating-chat/floating-chat.component.d.ts +43 -0
- package/chat/models/knowledge-list.model.d.ts +14 -0
- package/chat/models/send-message.model.d.ts +15 -6
- package/chat/public-api.d.ts +1 -0
- package/esm2020/chat/chat-input/chat-input.component.mjs +92 -22
- package/esm2020/chat/chat-messages/chat-messages.component.mjs +3 -3
- package/esm2020/chat/chat-sidebar/chat-sidebar.component.mjs +8 -5
- package/esm2020/chat/chat.component.mjs +3 -3
- package/esm2020/chat/chat.module.mjs +19 -4
- package/esm2020/chat/floating-chat/floating-chat.component.mjs +228 -0
- package/esm2020/chat/models/knowledge-list.model.mjs +1 -1
- package/esm2020/chat/models/send-message.model.mjs +1 -1
- package/esm2020/chat/public-api.mjs +2 -1
- package/fesm2015/qqsl-agent-chat.mjs +432 -130
- package/fesm2015/qqsl-agent-chat.mjs.map +1 -1
- package/fesm2020/qqsl-agent-chat.mjs +432 -130
- package/fesm2020/qqsl-agent-chat.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -16,11 +16,15 @@ import * as i3 from 'ng-zorro-antd/popover';
|
|
|
16
16
|
import { NzPopoverModule } from 'ng-zorro-antd/popover';
|
|
17
17
|
import * as i4 from 'ng-zorro-antd/radio';
|
|
18
18
|
import { NzRadioModule } from 'ng-zorro-antd/radio';
|
|
19
|
-
import * as i5 from 'ng-zorro-antd/
|
|
20
|
-
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
|
|
21
|
-
import * as i6 from 'ng-zorro-antd/icon';
|
|
19
|
+
import * as i5 from 'ng-zorro-antd/icon';
|
|
22
20
|
import { NzIconModule } from 'ng-zorro-antd/icon';
|
|
23
|
-
import * as
|
|
21
|
+
import * as i6 from 'ng-zorro-antd/steps';
|
|
22
|
+
import { NzStepsModule } from 'ng-zorro-antd/steps';
|
|
23
|
+
import * as i7 from 'ng-zorro-antd/select';
|
|
24
|
+
import { NzSelectModule } from 'ng-zorro-antd/select';
|
|
25
|
+
import * as i8 from 'ng-zorro-antd/tree-select';
|
|
26
|
+
import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
|
|
27
|
+
import * as i9 from '@angular/forms';
|
|
24
28
|
import { FormsModule } from '@angular/forms';
|
|
25
29
|
import { NzMessageService } from 'ng-zorro-antd/message';
|
|
26
30
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
@@ -33,6 +37,7 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
|
|
|
33
37
|
import { NzListModule } from 'ng-zorro-antd/list';
|
|
34
38
|
import { NzSliderModule } from 'ng-zorro-antd/slider';
|
|
35
39
|
import { NzLayoutModule } from 'ng-zorro-antd/layout';
|
|
40
|
+
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
|
|
36
41
|
import { NzPaginationModule } from 'ng-zorro-antd/pagination';
|
|
37
42
|
|
|
38
43
|
// markdown-stream.service.ts
|
|
@@ -368,50 +373,207 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
368
373
|
}]
|
|
369
374
|
}] });
|
|
370
375
|
|
|
376
|
+
class HttpService {
|
|
377
|
+
constructor() {
|
|
378
|
+
this.http = inject(HttpClient);
|
|
379
|
+
this.storeService = inject(StoreService);
|
|
380
|
+
this.BASE_URL = '/api'; // 或者完整域名
|
|
381
|
+
}
|
|
382
|
+
/**
|
|
383
|
+
* 统一获取 Headers
|
|
384
|
+
*/
|
|
385
|
+
getHeaders() {
|
|
386
|
+
return new HttpHeaders({
|
|
387
|
+
'Content-Type': 'application/json',
|
|
388
|
+
Authorization: `${this.storeService.getToken()}`,
|
|
389
|
+
});
|
|
390
|
+
}
|
|
391
|
+
/**
|
|
392
|
+
* GET 请求
|
|
393
|
+
*/
|
|
394
|
+
get(url, params) {
|
|
395
|
+
return this.http.get(this.formatUrl(url), {
|
|
396
|
+
headers: this.getHeaders(),
|
|
397
|
+
params: this.resolveParams(params),
|
|
398
|
+
});
|
|
399
|
+
}
|
|
400
|
+
/**
|
|
401
|
+
* POST 请求
|
|
402
|
+
*/
|
|
403
|
+
post(url, body) {
|
|
404
|
+
return this.http.post(this.formatUrl(url), body, {
|
|
405
|
+
headers: this.getHeaders(),
|
|
406
|
+
});
|
|
407
|
+
}
|
|
408
|
+
/**
|
|
409
|
+
* PUT 请求
|
|
410
|
+
*/
|
|
411
|
+
put(url, body) {
|
|
412
|
+
return this.http.put(this.formatUrl(url), body, {
|
|
413
|
+
headers: this.getHeaders(),
|
|
414
|
+
});
|
|
415
|
+
}
|
|
416
|
+
/**
|
|
417
|
+
* DELETE 请求
|
|
418
|
+
* 兼容支持:既支持 URL 参数,也支持 Body
|
|
419
|
+
*/
|
|
420
|
+
delete(url, params, body) {
|
|
421
|
+
return this.http.request('DELETE', this.formatUrl(url), {
|
|
422
|
+
headers: this.getHeaders(),
|
|
423
|
+
params: this.resolveParams(params),
|
|
424
|
+
body: body, // HttpClient 的 delete() 方法默认不支持 body,需用 request() 通用方法
|
|
425
|
+
});
|
|
426
|
+
}
|
|
427
|
+
// ================= 私有辅助方法 =================
|
|
428
|
+
/**
|
|
429
|
+
* 统一处理 URL
|
|
430
|
+
* 比如自动拼接 BaseUrl,或者处理斜杠
|
|
431
|
+
*/
|
|
432
|
+
formatUrl(url) {
|
|
433
|
+
if (url.startsWith('http'))
|
|
434
|
+
return url;
|
|
435
|
+
// 确保拼接顺滑
|
|
436
|
+
const baseUrl = this.storeService.getBaseUrl();
|
|
437
|
+
const cleanBase = baseUrl.replace(/\/$/, '');
|
|
438
|
+
const cleanUrl = url.startsWith('/') ? url : `/${url}`;
|
|
439
|
+
return `${cleanBase}${cleanUrl}`;
|
|
440
|
+
}
|
|
441
|
+
/**
|
|
442
|
+
* 统一清洗参数
|
|
443
|
+
* 过滤掉 null 和 undefined,防止传给后端 "null" 字符串
|
|
444
|
+
*/
|
|
445
|
+
resolveParams(params) {
|
|
446
|
+
let httpParams = new HttpParams();
|
|
447
|
+
if (params) {
|
|
448
|
+
Object.keys(params).forEach(key => {
|
|
449
|
+
const value = params[key];
|
|
450
|
+
if (value !== null && value !== undefined) {
|
|
451
|
+
if (Array.isArray(value)) {
|
|
452
|
+
// 支持数组参数 ids: [1, 2] => ids=1&ids=2
|
|
453
|
+
value.forEach(val => (httpParams = httpParams.append(key, val)));
|
|
454
|
+
}
|
|
455
|
+
else {
|
|
456
|
+
httpParams = httpParams.set(key, value);
|
|
457
|
+
}
|
|
458
|
+
}
|
|
459
|
+
});
|
|
460
|
+
}
|
|
461
|
+
return httpParams;
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
HttpService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HttpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
465
|
+
HttpService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HttpService, providedIn: 'root' });
|
|
466
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HttpService, decorators: [{
|
|
467
|
+
type: Injectable,
|
|
468
|
+
args: [{
|
|
469
|
+
providedIn: 'root',
|
|
470
|
+
}]
|
|
471
|
+
}] });
|
|
472
|
+
|
|
371
473
|
// chat-input.component.ts
|
|
372
474
|
class ChatInputComponent {
|
|
373
475
|
constructor() {
|
|
374
476
|
this.messages = [];
|
|
477
|
+
this.mode = 'full';
|
|
375
478
|
this.sendMessage = new EventEmitter();
|
|
376
479
|
this.messageChange = new EventEmitter();
|
|
377
480
|
this.enter = new EventEmitter();
|
|
378
481
|
this.paste = new EventEmitter();
|
|
379
|
-
this.httpService = inject(HttpService
|
|
482
|
+
this.httpService = inject(HttpService);
|
|
380
483
|
this.storeService = inject(StoreService);
|
|
381
484
|
this.sseService = inject(SseService);
|
|
382
485
|
this.isEmpty = true;
|
|
383
486
|
this.currentModel = null;
|
|
384
487
|
this.currentKnowledge = [];
|
|
385
488
|
this.modelList = [];
|
|
386
|
-
this.knowledgeList = [];
|
|
387
489
|
this.modelPopoverVisible = false;
|
|
388
490
|
this.knowledgePopoverVisible = false;
|
|
389
491
|
this.deepThink = true;
|
|
492
|
+
this.knowledgeStepIndex = 0;
|
|
493
|
+
this.typesData = [];
|
|
494
|
+
this.categoriesData = [];
|
|
495
|
+
this.tagsData = [];
|
|
496
|
+
this.selectedTypes = [];
|
|
497
|
+
this.selectedCategories = [];
|
|
498
|
+
this.selectedTags = [];
|
|
390
499
|
}
|
|
391
500
|
ngOnInit() {
|
|
392
501
|
this.getModelList();
|
|
393
|
-
this.
|
|
502
|
+
this.loadTypes();
|
|
394
503
|
}
|
|
395
504
|
// 可供交互的模型
|
|
396
505
|
getModelList() {
|
|
397
|
-
this.httpService.get(`${this.storeService.getBaseUrl()}/api/ChatModel/models`).subscribe(
|
|
506
|
+
this.httpService.get(`${this.storeService.getBaseUrl()}/api/ChatModel/models`).subscribe(res => {
|
|
398
507
|
this.modelList = res;
|
|
399
508
|
if (res.length) {
|
|
400
509
|
this.currentModel = res[0];
|
|
401
510
|
}
|
|
402
511
|
});
|
|
403
512
|
}
|
|
404
|
-
|
|
405
|
-
|
|
513
|
+
onTypeChange(types) {
|
|
514
|
+
this.selectedTypes = types;
|
|
515
|
+
this.loadCategories(types);
|
|
516
|
+
this.selectedCategories = [];
|
|
517
|
+
this.selectedTags = [];
|
|
518
|
+
this.tagsData = [];
|
|
519
|
+
this.knowledgeStepIndex = types.length ? 1 : 0;
|
|
520
|
+
}
|
|
521
|
+
onCategoryChange(categories) {
|
|
522
|
+
this.selectedCategories = categories;
|
|
523
|
+
this.loadTags(categories);
|
|
524
|
+
this.selectedTags = [];
|
|
525
|
+
this.knowledgeStepIndex = categories.length ? 2 : 1;
|
|
526
|
+
}
|
|
527
|
+
onTagChange(tags) {
|
|
528
|
+
this.knowledgeStepIndex = tags.length ? 2 : 1;
|
|
529
|
+
}
|
|
530
|
+
// 获取分类
|
|
531
|
+
loadTypes() {
|
|
406
532
|
this.httpService
|
|
407
|
-
.get(`${this.storeService.getBaseUrl()}/api/ChatModel/
|
|
408
|
-
.subscribe(
|
|
409
|
-
this.
|
|
410
|
-
item.checked = false;
|
|
411
|
-
return item;
|
|
412
|
-
});
|
|
533
|
+
.get(`${this.storeService.getBaseUrl()}/api/ChatModel/knowledgeTypes`)
|
|
534
|
+
.subscribe(res => {
|
|
535
|
+
this.typesData = res;
|
|
413
536
|
});
|
|
414
537
|
}
|
|
538
|
+
// 获取目录
|
|
539
|
+
loadCategories(types) {
|
|
540
|
+
this.httpService
|
|
541
|
+
.post(`${this.storeService.getBaseUrl()}/api/ChatModel/knowledge/catalogs`, {
|
|
542
|
+
types: this.selectedTypes,
|
|
543
|
+
})
|
|
544
|
+
.subscribe(res => {
|
|
545
|
+
this.categoriesData = this.convertToTree(res);
|
|
546
|
+
});
|
|
547
|
+
}
|
|
548
|
+
loadTags(categories) {
|
|
549
|
+
this.httpService
|
|
550
|
+
.post(`${this.storeService.getBaseUrl()}/api/ChatModel/knowledge/tags`, {
|
|
551
|
+
catalog: categories,
|
|
552
|
+
})
|
|
553
|
+
.subscribe(res => {
|
|
554
|
+
this.tagsData = res;
|
|
555
|
+
});
|
|
556
|
+
}
|
|
557
|
+
convertToTree(data) {
|
|
558
|
+
if (Array.isArray(data)) {
|
|
559
|
+
return data.map(item => convertNode(item));
|
|
560
|
+
}
|
|
561
|
+
function convertNode(node) {
|
|
562
|
+
let result = {
|
|
563
|
+
title: node.name || '',
|
|
564
|
+
value: node.iCode,
|
|
565
|
+
key: node.iCode,
|
|
566
|
+
};
|
|
567
|
+
if (node.children && node.children.length > 0) {
|
|
568
|
+
result.children = node.children.map((child) => convertNode(child));
|
|
569
|
+
}
|
|
570
|
+
else {
|
|
571
|
+
result.children = [];
|
|
572
|
+
}
|
|
573
|
+
return result;
|
|
574
|
+
}
|
|
575
|
+
return convertNode(data); // 如果是单个对象
|
|
576
|
+
}
|
|
415
577
|
modelVisibleChange(value) {
|
|
416
578
|
this.modelPopoverVisible = value;
|
|
417
579
|
}
|
|
@@ -465,8 +627,11 @@ class ChatInputComponent {
|
|
|
465
627
|
model: (_b = (_a = this.currentModel) === null || _a === void 0 ? void 0 : _a.iCode) !== null && _b !== void 0 ? _b : '',
|
|
466
628
|
think: this.deepThink,
|
|
467
629
|
question: msg.question,
|
|
468
|
-
|
|
469
|
-
|
|
630
|
+
parameter: {
|
|
631
|
+
type: this.selectedTypes,
|
|
632
|
+
catalogs: this.selectedCategories,
|
|
633
|
+
tags: this.selectedTags,
|
|
634
|
+
},
|
|
470
635
|
};
|
|
471
636
|
this.sendMessage.emit({ message, isRegenerate: true });
|
|
472
637
|
}
|
|
@@ -483,18 +648,21 @@ class ChatInputComponent {
|
|
|
483
648
|
model: (_b = (_a = this.currentModel) === null || _a === void 0 ? void 0 : _a.iCode) !== null && _b !== void 0 ? _b : '',
|
|
484
649
|
think: this.deepThink,
|
|
485
650
|
question: text,
|
|
486
|
-
|
|
487
|
-
|
|
651
|
+
parameter: {
|
|
652
|
+
type: this.selectedTypes,
|
|
653
|
+
catalogs: this.selectedCategories,
|
|
654
|
+
tags: this.selectedTags,
|
|
655
|
+
},
|
|
488
656
|
};
|
|
489
657
|
this.clearInput();
|
|
490
658
|
this.sendMessage.emit({ message, isRegenerate: false });
|
|
491
659
|
}
|
|
492
660
|
}
|
|
493
661
|
ChatInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
494
|
-
ChatInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChatInputComponent, selector: "ngx-chat-input", inputs: { messages: "messages" }, outputs: { sendMessage: "sendMessage", messageChange: "messageChange", enter: "enter", paste: "paste" }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editorRef"], descendants: true }, { propertyName: "chatInputWrapper", first: true, predicate: ["chatInputWrapper"], descendants: true }], ngImport: i0, template: "<!-- \u65B0\u804A\u5929\u4F4D\u4E8E\u5C4F\u5E55\u4E2D\u95F4\uFF0C\u53D1\u9001\u6D88\u606F\u4E4B\u540E\u4F4D\u4E8E\u5E95\u90E8 -->\n<div class=\"chat-input-wrapper\" #chatInputWrapper [class.center]=\"!messages.length\">\n <div class=\"new-chat-title\" *ngIf=\"!messages.length\">\n <img src=\"/assets/images/logo.png\" />\n <span>\u4F60\u597D\uFF0C\u6709\u4EC0\u4E48\u53EF\u4EE5\u5E2E\u5230\u4F60\uFF1F\u5F00\u59CB\u5BF9\u8BDD\u5427</span>\n </div>\n <div class=\"chat-input\">\n <div\n #editorRef\n class=\"input-creative-editor\"\n contenteditable=\"true\"\n spellcheck=\"false\"\n data-placeholder=\"\u8BF7\u8F93\u5165\u5E76\u53D1\u9001\u6D88\u606F\"\n [attr.data-empty]=\"isEmpty\"\n (input)=\"handleInput()\"\n (keydown.enter)=\"handleEnter($event)\"\n (paste)=\"handlePaste($event)\"\n ></div>\n <div class=\"input-bottom\">\n <div class=\"input-tools\">\n <div class=\"select-tool\" [ngClass]=\"{ 'select-tool-active': deepThink }\" (click)=\"toggleDeepThink()\">\n <svg\n t=\"1764131026949\"\n style=\"width: 14px; height: 14px\"\n class=\"icon\"\n viewBox=\"0 0 1024 1024\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n p-id=\"5012\"\n width=\"64\"\n height=\"64\"\n >\n <path\n d=\"M903.36 512a795.52 795.52 0 0 1 65.536 136.704c48 132.16 39.616 230.528-25.024 295.168-64.64 64.64-163.008 72.96-295.168 24.96A795.52 795.52 0 0 1 512 903.424a795.52 795.52 0 0 1-136.704 65.536c-132.096 48-230.528 39.616-295.168-25.024-64.64-64.64-72.96-163.008-24.96-295.104 16.64-46.016 38.528-91.52 65.536-136.768A795.52 795.52 0 0 1 55.04 375.232C7.04 243.2 15.36 144.768 80 80.128 144.768 15.488 243.2 7.168 375.296 55.04c46.016 16.64 91.584 38.528 136.768 65.536A795.52 795.52 0 0 1 648.768 55.104c132.096-48 230.464-39.616 295.104 25.024 64.64 64.64 72.96 163.008 25.024 295.104A795.52 795.52 0 0 1 903.36 512z m-53.12-79.424c15.168-28.736 27.968-57.536 38.464-86.4 35.584-98.112 33.92-166.656-5.12-205.696-39.04-39.04-107.648-40.768-205.696-5.12a685.44 685.44 0 0 0-86.4 38.4 1240.96 1240.96 0 0 1 138.432 120.32 1240.832 1240.832 0 0 1 120.32 138.496zM432.576 173.824a685.44 685.44 0 0 0-86.4-38.528c-98.112-35.584-166.656-33.92-205.696 5.12-39.04 39.04-40.768 107.648-5.12 205.696 10.432 28.928 23.296 57.728 38.4 86.4a1240.896 1240.896 0 0 1 120.32-138.432 1240.832 1240.832 0 0 1 138.496-120.32zM173.824 591.488a685.44 685.44 0 0 0-38.464 86.4c-35.648 98.048-33.92 166.592 5.12 205.632 39.04 39.04 107.584 40.768 205.696 5.12a685.44 685.44 0 0 0 86.4-38.4 1240.768 1240.768 0 0 1-138.496-120.32 1240.96 1240.96 0 0 1-120.256-138.432z m495.744 78.08A1112.064 1112.064 0 0 0 802.048 512a1112.064 1112.064 0 0 0-132.48-157.568A1112.128 1112.128 0 0 0 512 221.952a1112.128 1112.128 0 0 0-157.504 132.48A1112.064 1112.064 0 0 0 222.016 512a1112.192 1112.192 0 0 0 132.416 157.568A1112.064 1112.064 0 0 0 512 802.048a1112.128 1112.128 0 0 0 157.568-132.48z m-78.08 180.608c28.672 15.168 57.472 28.032 86.4 38.464 98.048 35.648 166.592 33.92 205.632-5.12 39.04-39.04 40.768-107.584 5.12-205.696a685.504 685.504 0 0 0-38.4-86.4 1240.832 1240.832 0 0 1-120.32 138.496 1240.96 1240.96 0 0 1-138.432 120.32zM585.088 512a73.152 73.152 0 1 1-146.24 0 73.152 73.152 0 0 1 146.304 0z\"\n fill=\"currentColor\"\n p-id=\"5013\"\n ></path>\n </svg>\n \u6DF1\u5EA6\u601D\u8003\n </div>\n <div\n class=\"select-tool\"\n nz-popover\n [nzPopoverContent]=\"modelListContent\"\n nzPopoverTrigger=\"click\"\n nzPopoverOverlayClassName=\"params-select-popover\"\n [nzPopoverVisible]=\"modelPopoverVisible\"\n (nzPopoverVisibleChange)=\"modelVisibleChange($event)\"\n >\n <img src=\"/assets/images/input/toggle-model.png\" style=\"width: 12px; height: 12px\" />\n {{ currentModel ? currentModel?.name : '\u9009\u62E9\u6A21\u578B' }}\n </div>\n <div\n class=\"select-tool\"\n nz-popover\n [nzPopoverContent]=\"knowledgeListContent\"\n nzPopoverTrigger=\"click\"\n nzPopoverOverlayClassName=\"params-select-popover\"\n [nzPopoverVisible]=\"knowledgePopoverVisible\"\n (nzPopoverVisibleChange)=\"knowledgeVisibleChange($event)\"\n >\n <img src=\"/assets/images/input/relate.png\" style=\"width: 14px; height: 8px\" />\n \u5173\u8054\u77E5\u8BC6\u5E93\n </div>\n </div>\n <img class=\"send\" src=\"/assets/images/input/send.png\" (click)=\"send()\" [hidden]=\"sseService.loading$ | async\" />\n <div class=\"send-loading\" *ngIf=\"sseService.loading$ | async\">\n <div class=\"send-loading-inner\">\n <svg viewBox=\"0 0 36 36\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" data-icon=\"spin\">\n <defs>\n <linearGradient x1=\"0%\" y1=\"100%\" x2=\"100%\" y2=\"100%\" id=\"linearGradient-1\">\n <stop stop-color=\"currentColor\" stop-opacity=\"0\" offset=\"0%\"></stop>\n <stop stop-color=\"currentColor\" stop-opacity=\"0.50\" offset=\"39.9430698%\"></stop>\n <stop stop-color=\"currentColor\" offset=\"100%\"></stop>\n </linearGradient>\n </defs>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <rect fill-opacity=\"0.01\" fill=\"none\" x=\"0\" y=\"0\" width=\"36\" height=\"36\"></rect>\n <path\n d=\"M34,18 C34,9.163444 26.836556,2 18,2 C11.6597233,2 6.18078805,5.68784135 3.59122325,11.0354951\"\n stroke=\"url(#linearGradient-1)\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n ></path>\n </g>\n </svg>\n </div>\n </div>\n <!-- <img class=\"send\" src=\"/assets/images/input/send-gray.png\" /> -->\n </div>\n </div>\n <div class=\"chat-input-backdrop\"></div>\n</div>\n\n<ng-template #modelListContent>\n <div style=\"width: 200px\">\n <div class=\"select-title\">\n \u5207\u6362\u6A21\u578B\n <i nz-icon nzType=\"close\" style=\"color: #999\" (click)=\"modelVisibleChange(false)\"></i>\n </div>\n <div class=\"select-content\">\n <nz-radio-group [(ngModel)]=\"currentModel\">\n <label\n nz-radio\n [nzValue]=\"item\"\n [style.margin-top.px]=\"i === 0 ? 0 : 10\"\n *ngFor=\"let item of modelList; let i = index\"\n >\n {{ item.name }}\n </label>\n </nz-radio-group>\n </div>\n </div>\n</ng-template>\n\n<ng-template #knowledgeListContent>\n <div style=\"width: 150px\">\n <div class=\"select-title\">\n \u5173\u8054\u77E5\u8BC6\u5E93\n <i nz-icon nzType=\"close\" style=\"color: #999\" (click)=\"knowledgeVisibleChange(false)\"></i>\n </div>\n <div class=\"select-content\">\n <nz-checkbox-wrapper style=\"width: 100%\" (nzOnChange)=\"knowledgeSelectChange($event)\">\n <div *ngFor=\"let item of knowledgeList\">\n <label nz-checkbox [nzValue]=\"item.iCode\" [(ngModel)]=\"item.checked\">{{ item.name }}</label>\n </div>\n </nz-checkbox-wrapper>\n </div>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.chat-input-wrapper{position:absolute;bottom:0;left:0;right:0;max-width:800px;min-width:350px;margin:0 auto;padding-bottom:40px}.chat-input-wrapper.center{bottom:50%;transform:translateY(50%)}.new-chat-title{display:flex;align-items:center;justify-content:center;padding-bottom:40px;text-align:center;font-weight:500;font-size:24px;color:#000}.new-chat-title img{width:40px;height:32px;margin-right:12px;margin-top:-6px}.chat-input{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:20px 18px;margin:0 auto;background:#FFFFFF;box-shadow:0 2px 8px #0000001a;border-radius:20px;border:1px solid #D9DADB;z-index:30}.chat-input .input-creative-editor{min-height:60px;max-height:300px;overflow-y:auto;outline:none;box-shadow:none;border:none}.chat-input .input-creative-editor[data-empty=true]:before{content:attr(data-placeholder);color:#9a9b9b}.chat-input .input-bottom{padding-top:16px;display:flex;align-items:center;justify-content:space-between;-webkit-user-select:none;user-select:none}.chat-input .input-bottom .input-tools{display:flex;align-items:center;gap:10px}.chat-input .input-bottom .select-tool{display:flex;align-items:center;justify-content:center;height:36px;padding:0 12px;gap:12px;background:#FFFFFF;border-radius:12px;border:1px solid #DBDCE0;cursor:pointer}.chat-input .input-bottom .select-tool-active{border-color:#b7c8fe;color:#3964fe;background:#edf3fe}.chat-input .input-bottom .send{width:32px;height:32px}::ng-deep .params-select-popover .ant-popover-inner{border-radius:10px}::ng-deep .params-select-popover .select-title{display:flex;align-items:center;justify-content:center;position:relative}::ng-deep .params-select-popover .select-title i{position:absolute;right:0;top:3px;cursor:pointer}::ng-deep .params-select-popover .select-content{max-height:200px;padding:16px 0;overflow-y:auto}.chat-input-backdrop{position:absolute;bottom:0;left:0;width:100%;height:100px;z-index:10;background-image:linear-gradient(to bottom,hsl(0,0%,99%),hsla(0,0%,99%,.8))}.send-loading{min-width:34px;height:34px;border-radius:50%;margin-top:auto;display:flex;flex-shrink:0;align-items:center;flex-direction:column;justify-content:center;cursor:not-allowed;white-space:nowrap;color:#fff;background:#3964fe;transition:background .2s;opacity:.4}.send-loading-inner{width:16px;height:16px}.send-loading svg{will-change:transform;animation:.6s linear infinite send-loading}@keyframes send-loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i3.NzPopoverDirective, selector: "[nz-popover]", inputs: ["nzPopoverArrowPointAtCenter", "nzPopoverTitle", "nzPopoverContent", "nz-popover", "nzPopoverTrigger", "nzPopoverPlacement", "nzPopoverOrigin", "nzPopoverVisible", "nzPopoverMouseEnterDelay", "nzPopoverMouseLeaveDelay", "nzPopoverOverlayClassName", "nzPopoverOverlayStyle", "nzPopoverBackdrop"], outputs: ["nzPopoverVisibleChange"], exportAs: ["nzPopover"] }, { kind: "component", type: i4.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus"], exportAs: ["nzRadio"] }, { kind: "component", type: i4.NzRadioGroupComponent, selector: "nz-radio-group", inputs: ["nzDisabled", "nzButtonStyle", "nzSize", "nzName"], exportAs: ["nzRadioGroup"] }, { kind: "component", type: i5.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "component", type: i5.NzCheckboxWrapperComponent, selector: "nz-checkbox-wrapper", outputs: ["nzOnChange"], exportAs: ["nzCheckboxWrapper"] }, { kind: "directive", type: i6.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
|
|
662
|
+
ChatInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChatInputComponent, selector: "ngx-chat-input", inputs: { messages: "messages", mode: "mode" }, outputs: { sendMessage: "sendMessage", messageChange: "messageChange", enter: "enter", paste: "paste" }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editorRef"], descendants: true }, { propertyName: "chatInputWrapper", first: true, predicate: ["chatInputWrapper"], descendants: true }], ngImport: i0, template: "<!-- \u65B0\u804A\u5929\u4F4D\u4E8E\u5C4F\u5E55\u4E2D\u95F4\uFF0C\u53D1\u9001\u6D88\u606F\u4E4B\u540E\u4F4D\u4E8E\u5E95\u90E8 -->\n<div\n class=\"chat-input-wrapper\"\n #chatInputWrapper\n [class.center]=\"!messages.length\"\n [ngStyle]=\"{ 'padding-bottom': mode === 'full' ? '40px' : '10px' }\"\n>\n <div class=\"new-chat-title\" *ngIf=\"!messages.length\">\n <img src=\"/assets/images/logo.png\" />\n <span>\u4F60\u597D\uFF0C\u6709\u4EC0\u4E48\u53EF\u4EE5\u5E2E\u5230\u4F60\uFF1F\u5F00\u59CB\u5BF9\u8BDD\u5427</span>\n </div>\n <div class=\"chat-input\">\n <div\n #editorRef\n class=\"input-creative-editor\"\n contenteditable=\"true\"\n spellcheck=\"false\"\n data-placeholder=\"\u8BF7\u8F93\u5165\u5E76\u53D1\u9001\u6D88\u606F\"\n [attr.data-empty]=\"isEmpty\"\n (input)=\"handleInput()\"\n (keydown.enter)=\"handleEnter($event)\"\n (paste)=\"handlePaste($event)\"\n ></div>\n <div class=\"input-bottom\">\n <div class=\"input-tools\">\n <div class=\"select-tool\" [ngClass]=\"{ 'select-tool-active': deepThink }\" (click)=\"toggleDeepThink()\">\n <svg\n t=\"1764131026949\"\n style=\"width: 14px; height: 14px\"\n class=\"icon\"\n viewBox=\"0 0 1024 1024\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n p-id=\"5012\"\n width=\"64\"\n height=\"64\"\n >\n <path\n d=\"M903.36 512a795.52 795.52 0 0 1 65.536 136.704c48 132.16 39.616 230.528-25.024 295.168-64.64 64.64-163.008 72.96-295.168 24.96A795.52 795.52 0 0 1 512 903.424a795.52 795.52 0 0 1-136.704 65.536c-132.096 48-230.528 39.616-295.168-25.024-64.64-64.64-72.96-163.008-24.96-295.104 16.64-46.016 38.528-91.52 65.536-136.768A795.52 795.52 0 0 1 55.04 375.232C7.04 243.2 15.36 144.768 80 80.128 144.768 15.488 243.2 7.168 375.296 55.04c46.016 16.64 91.584 38.528 136.768 65.536A795.52 795.52 0 0 1 648.768 55.104c132.096-48 230.464-39.616 295.104 25.024 64.64 64.64 72.96 163.008 25.024 295.104A795.52 795.52 0 0 1 903.36 512z m-53.12-79.424c15.168-28.736 27.968-57.536 38.464-86.4 35.584-98.112 33.92-166.656-5.12-205.696-39.04-39.04-107.648-40.768-205.696-5.12a685.44 685.44 0 0 0-86.4 38.4 1240.96 1240.96 0 0 1 138.432 120.32 1240.832 1240.832 0 0 1 120.32 138.496zM432.576 173.824a685.44 685.44 0 0 0-86.4-38.528c-98.112-35.584-166.656-33.92-205.696 5.12-39.04 39.04-40.768 107.648-5.12 205.696 10.432 28.928 23.296 57.728 38.4 86.4a1240.896 1240.896 0 0 1 120.32-138.432 1240.832 1240.832 0 0 1 138.496-120.32zM173.824 591.488a685.44 685.44 0 0 0-38.464 86.4c-35.648 98.048-33.92 166.592 5.12 205.632 39.04 39.04 107.584 40.768 205.696 5.12a685.44 685.44 0 0 0 86.4-38.4 1240.768 1240.768 0 0 1-138.496-120.32 1240.96 1240.96 0 0 1-120.256-138.432z m495.744 78.08A1112.064 1112.064 0 0 0 802.048 512a1112.064 1112.064 0 0 0-132.48-157.568A1112.128 1112.128 0 0 0 512 221.952a1112.128 1112.128 0 0 0-157.504 132.48A1112.064 1112.064 0 0 0 222.016 512a1112.192 1112.192 0 0 0 132.416 157.568A1112.064 1112.064 0 0 0 512 802.048a1112.128 1112.128 0 0 0 157.568-132.48z m-78.08 180.608c28.672 15.168 57.472 28.032 86.4 38.464 98.048 35.648 166.592 33.92 205.632-5.12 39.04-39.04 40.768-107.584 5.12-205.696a685.504 685.504 0 0 0-38.4-86.4 1240.832 1240.832 0 0 1-120.32 138.496 1240.96 1240.96 0 0 1-138.432 120.32zM585.088 512a73.152 73.152 0 1 1-146.24 0 73.152 73.152 0 0 1 146.304 0z\"\n fill=\"currentColor\"\n p-id=\"5013\"\n ></path>\n </svg>\n \u6DF1\u5EA6\u601D\u8003\n </div>\n <div\n class=\"select-tool\"\n nz-popover\n [nzPopoverContent]=\"modelListContent\"\n nzPopoverTrigger=\"click\"\n nzPopoverOverlayClassName=\"params-select-popover\"\n [nzPopoverVisible]=\"modelPopoverVisible\"\n (nzPopoverVisibleChange)=\"modelVisibleChange($event)\"\n >\n <img src=\"/assets/images/input/toggle-model.png\" style=\"width: 12px; height: 12px\" />\n {{ currentModel ? currentModel?.name : '\u9009\u62E9\u6A21\u578B' }}\n </div>\n <div\n class=\"select-tool\"\n nz-popover\n [nzPopoverContent]=\"knowledgeListContent\"\n nzPopoverTrigger=\"click\"\n nzPopoverOverlayClassName=\"params-select-popover\"\n [nzPopoverVisible]=\"knowledgePopoverVisible\"\n (nzPopoverVisibleChange)=\"knowledgeVisibleChange($event)\"\n >\n <img src=\"/assets/images/input/relate.png\" style=\"width: 14px; height: 8px\" />\n \u5173\u8054\u77E5\u8BC6\u5E93\n </div>\n </div>\n <img class=\"send\" src=\"/assets/images/input/send.png\" (click)=\"send()\" [hidden]=\"sseService.loading$ | async\" />\n <div class=\"send-loading\" *ngIf=\"sseService.loading$ | async\">\n <div class=\"send-loading-inner\">\n <svg viewBox=\"0 0 36 36\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" data-icon=\"spin\">\n <defs>\n <linearGradient x1=\"0%\" y1=\"100%\" x2=\"100%\" y2=\"100%\" id=\"linearGradient-1\">\n <stop stop-color=\"currentColor\" stop-opacity=\"0\" offset=\"0%\"></stop>\n <stop stop-color=\"currentColor\" stop-opacity=\"0.50\" offset=\"39.9430698%\"></stop>\n <stop stop-color=\"currentColor\" offset=\"100%\"></stop>\n </linearGradient>\n </defs>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <rect fill-opacity=\"0.01\" fill=\"none\" x=\"0\" y=\"0\" width=\"36\" height=\"36\"></rect>\n <path\n d=\"M34,18 C34,9.163444 26.836556,2 18,2 C11.6597233,2 6.18078805,5.68784135 3.59122325,11.0354951\"\n stroke=\"url(#linearGradient-1)\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n ></path>\n </g>\n </svg>\n </div>\n </div>\n <!-- <img class=\"send\" src=\"/assets/images/input/send-gray.png\" /> -->\n </div>\n </div>\n <div class=\"chat-input-backdrop\"></div>\n</div>\n\n<ng-template #modelListContent>\n <div style=\"width: 200px\">\n <div class=\"select-title\">\n \u5207\u6362\u6A21\u578B\n <i nz-icon nzType=\"close\" style=\"color: #999\" (click)=\"modelVisibleChange(false)\"></i>\n </div>\n <div class=\"select-content\">\n <nz-radio-group [(ngModel)]=\"currentModel\">\n <label\n nz-radio\n [nzValue]=\"item\"\n [style.margin-top.px]=\"i === 0 ? 0 : 10\"\n *ngFor=\"let item of modelList; let i = index\"\n >\n {{ item.name }}\n </label>\n </nz-radio-group>\n </div>\n </div>\n</ng-template>\n\n<ng-template #knowledgeListContent>\n <div style=\"width: 250px\">\n <div class=\"select-title\">\n \u5173\u8054\u77E5\u8BC6\u5E93\n <i nz-icon nzType=\"close\" style=\"color: #999\" (click)=\"knowledgeVisibleChange(false)\"></i>\n </div>\n <div class=\"select-content\">\n <nz-steps [nzCurrent]=\"knowledgeStepIndex\" nzProgressDot nzDirection=\"vertical\" nzSize=\"small\">\n <nz-step nzTitle=\"\u9009\u62E9\u5206\u7C7B\" [nzDescription]=\"typeSelectTpl\">\n <ng-template #typeSelectTpl>\n <nz-select\n [(ngModel)]=\"selectedTypes\"\n nzMode=\"multiple\"\n style=\"width: 100%\"\n (ngModelChange)=\"onTypeChange($event)\"\n nzPlaceHolder=\"\u8BF7\u9009\u62E9\u5206\u7C7B\"\n >\n <nz-option [nzValue]=\"item.type\" [nzLabel]=\"item.typeC\" *ngFor=\"let item of typesData\"></nz-option>\n </nz-select>\n </ng-template>\n </nz-step>\n <nz-step nzTitle=\"\u641C\u7D22\u9009\u62E9\u76EE\u5F55\" [nzDescription]=\"categorySelectTpl\">\n <ng-template #categorySelectTpl>\n <nz-tree-select\n style=\"width: 100%\"\n [(ngModel)]=\"selectedCategories\"\n [nzNodes]=\"categoriesData\"\n (ngModelChange)=\"onCategoryChange($event)\"\n nzCheckStrictly\n nzShowSearch\n nzCheckable\n nzPlaceHolder=\"\u8BF7\u9009\u62E9\u76EE\u5F55\"\n ></nz-tree-select>\n </ng-template>\n </nz-step>\n <nz-step nzTitle=\"\u9009\u62E9\u6807\u7B7E\" [nzDescription]=\"tagSelectTpl\">\n <ng-template #tagSelectTpl>\n <nz-select\n [(ngModel)]=\"selectedTags\"\n nzMode=\"multiple\"\n nzPlaceHolder=\"\u8BF7\u9009\u62E9\u6807\u7B7E\"\n style=\"width: 100%\"\n (ngModelChange)=\"onTagChange($event)\"\n >\n <nz-option-group [nzLabel]=\"item.name\" *ngFor=\"let item of tagsData\">\n <nz-option\n [nzValue]=\"child.iCode\"\n [nzLabel]=\"child.name\"\n *ngFor=\"let child of item.children\"\n ></nz-option>\n </nz-option-group>\n </nz-select>\n </ng-template>\n </nz-step>\n </nz-steps>\n </div>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{width:100%;container-type:inline-size;container-name:chat-container}.chat-input-wrapper{position:absolute;bottom:0;left:0;right:0;max-width:800px;min-width:350px;margin:0 auto;padding-bottom:40px}@container chat-container (max-width: 1000px){.chat-input-wrapper{max-width:90%}}.chat-input-wrapper.center{bottom:50%;transform:translateY(50%)}.new-chat-title{display:flex;align-items:center;justify-content:center;padding-bottom:40px;text-align:center;font-weight:500;font-size:24px;color:#000}.new-chat-title img{width:40px;height:32px;margin-right:12px;margin-top:-6px}.chat-input{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:20px 18px;margin:0 auto;background:#FFFFFF;box-shadow:0 2px 8px #0000001a;border-radius:20px;border:1px solid #D9DADB;z-index:30}.chat-input .input-creative-editor{min-height:60px;max-height:300px;overflow-y:auto;outline:none;box-shadow:none;border:none}.chat-input .input-creative-editor[data-empty=true]:before{content:attr(data-placeholder);color:#9a9b9b}.chat-input .input-bottom{padding-top:16px;display:flex;align-items:center;justify-content:space-between;-webkit-user-select:none;user-select:none}.chat-input .input-bottom .input-tools{display:flex;align-items:center;gap:10px}.chat-input .input-bottom .select-tool{display:flex;align-items:center;justify-content:center;height:36px;padding:0 12px;gap:12px;background:#FFFFFF;border-radius:12px;border:1px solid #DBDCE0;cursor:pointer}.chat-input .input-bottom .select-tool-active{border-color:#b7c8fe;color:#3964fe;background:#edf3fe}.chat-input .input-bottom .send{width:32px;height:32px}::ng-deep .params-select-popover .ant-popover-inner{border-radius:10px}::ng-deep .params-select-popover .select-title{display:flex;align-items:center;justify-content:center;position:relative}::ng-deep .params-select-popover .select-title i{position:absolute;right:0;top:3px;cursor:pointer}::ng-deep .params-select-popover .select-content{max-height:400px;padding:16px 0 16px 1px;overflow-y:auto}.chat-input-backdrop{position:absolute;bottom:0;left:0;width:100%;height:100px;z-index:10;background-image:linear-gradient(to bottom,hsl(0,0%,99%),hsla(0,0%,99%,.8))}.send-loading{min-width:34px;height:34px;border-radius:50%;margin-top:auto;display:flex;flex-shrink:0;align-items:center;flex-direction:column;justify-content:center;cursor:not-allowed;white-space:nowrap;color:#fff;background:#3964fe;transition:background .2s;opacity:.4}.send-loading-inner{width:16px;height:16px}.send-loading svg{will-change:transform;animation:.6s linear infinite send-loading}@keyframes send-loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i3.NzPopoverDirective, selector: "[nz-popover]", inputs: ["nzPopoverArrowPointAtCenter", "nzPopoverTitle", "nzPopoverContent", "nz-popover", "nzPopoverTrigger", "nzPopoverPlacement", "nzPopoverOrigin", "nzPopoverVisible", "nzPopoverMouseEnterDelay", "nzPopoverMouseLeaveDelay", "nzPopoverOverlayClassName", "nzPopoverOverlayStyle", "nzPopoverBackdrop"], outputs: ["nzPopoverVisibleChange"], exportAs: ["nzPopover"] }, { kind: "component", type: i4.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus"], exportAs: ["nzRadio"] }, { kind: "component", type: i4.NzRadioGroupComponent, selector: "nz-radio-group", inputs: ["nzDisabled", "nzButtonStyle", "nzSize", "nzName"], exportAs: ["nzRadioGroup"] }, { kind: "directive", type: i5.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: i6.NzStepsComponent, selector: "nz-steps", inputs: ["nzCurrent", "nzDirection", "nzLabelPlacement", "nzType", "nzSize", "nzStartIndex", "nzStatus", "nzProgressDot"], outputs: ["nzIndexChange"], exportAs: ["nzSteps"] }, { kind: "component", type: i6.NzStepComponent, selector: "nz-step", inputs: ["nzTitle", "nzSubtitle", "nzDescription", "nzDisabled", "nzPercentage", "nzSize", "nzStatus", "nzIcon"], exportAs: ["nzStep"] }, { kind: "component", type: i7.NzOptionComponent, selector: "nz-option", inputs: ["nzLabel", "nzValue", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i7.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "component", type: i7.NzOptionGroupComponent, selector: "nz-option-group", inputs: ["nzLabel"], exportAs: ["nzOptionGroup"] }, { kind: "component", type: i8.NzTreeSelectComponent, selector: "nz-tree-select", inputs: ["nzId", "nzAllowClear", "nzShowExpand", "nzShowLine", "nzDropdownMatchSelectWidth", "nzCheckable", "nzHideUnMatched", "nzShowIcon", "nzShowSearch", "nzDisabled", "nzAsyncData", "nzMultiple", "nzDefaultExpandAll", "nzCheckStrictly", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzExpandedIcon", "nzNotFoundContent", "nzNodes", "nzOpen", "nzSize", "nzPlaceHolder", "nzDropdownStyle", "nzDropdownClassName", "nzBackdrop", "nzStatus", "nzPlacement", "nzExpandedKeys", "nzDisplayWith", "nzMaxTagCount", "nzMaxTagPlaceholder", "nzTreeTemplate"], outputs: ["nzOpenChange", "nzCleared", "nzRemoved", "nzExpandChange", "nzTreeClick", "nzTreeCheckBoxChange"], exportAs: ["nzTreeSelect"] }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
|
|
495
663
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatInputComponent, decorators: [{
|
|
496
664
|
type: Component,
|
|
497
|
-
args: [{ selector: 'ngx-chat-input', template: "<!-- \u65B0\u804A\u5929\u4F4D\u4E8E\u5C4F\u5E55\u4E2D\u95F4\uFF0C\u53D1\u9001\u6D88\u606F\u4E4B\u540E\u4F4D\u4E8E\u5E95\u90E8 -->\n<div class=\"chat-input-wrapper\" #chatInputWrapper [class.center]=\"!messages.length\">\n <div class=\"new-chat-title\" *ngIf=\"!messages.length\">\n <img src=\"/assets/images/logo.png\" />\n <span>\u4F60\u597D\uFF0C\u6709\u4EC0\u4E48\u53EF\u4EE5\u5E2E\u5230\u4F60\uFF1F\u5F00\u59CB\u5BF9\u8BDD\u5427</span>\n </div>\n <div class=\"chat-input\">\n <div\n #editorRef\n class=\"input-creative-editor\"\n contenteditable=\"true\"\n spellcheck=\"false\"\n data-placeholder=\"\u8BF7\u8F93\u5165\u5E76\u53D1\u9001\u6D88\u606F\"\n [attr.data-empty]=\"isEmpty\"\n (input)=\"handleInput()\"\n (keydown.enter)=\"handleEnter($event)\"\n (paste)=\"handlePaste($event)\"\n ></div>\n <div class=\"input-bottom\">\n <div class=\"input-tools\">\n <div class=\"select-tool\" [ngClass]=\"{ 'select-tool-active': deepThink }\" (click)=\"toggleDeepThink()\">\n <svg\n t=\"1764131026949\"\n style=\"width: 14px; height: 14px\"\n class=\"icon\"\n viewBox=\"0 0 1024 1024\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n p-id=\"5012\"\n width=\"64\"\n height=\"64\"\n >\n <path\n d=\"M903.36 512a795.52 795.52 0 0 1 65.536 136.704c48 132.16 39.616 230.528-25.024 295.168-64.64 64.64-163.008 72.96-295.168 24.96A795.52 795.52 0 0 1 512 903.424a795.52 795.52 0 0 1-136.704 65.536c-132.096 48-230.528 39.616-295.168-25.024-64.64-64.64-72.96-163.008-24.96-295.104 16.64-46.016 38.528-91.52 65.536-136.768A795.52 795.52 0 0 1 55.04 375.232C7.04 243.2 15.36 144.768 80 80.128 144.768 15.488 243.2 7.168 375.296 55.04c46.016 16.64 91.584 38.528 136.768 65.536A795.52 795.52 0 0 1 648.768 55.104c132.096-48 230.464-39.616 295.104 25.024 64.64 64.64 72.96 163.008 25.024 295.104A795.52 795.52 0 0 1 903.36 512z m-53.12-79.424c15.168-28.736 27.968-57.536 38.464-86.4 35.584-98.112 33.92-166.656-5.12-205.696-39.04-39.04-107.648-40.768-205.696-5.12a685.44 685.44 0 0 0-86.4 38.4 1240.96 1240.96 0 0 1 138.432 120.32 1240.832 1240.832 0 0 1 120.32 138.496zM432.576 173.824a685.44 685.44 0 0 0-86.4-38.528c-98.112-35.584-166.656-33.92-205.696 5.12-39.04 39.04-40.768 107.648-5.12 205.696 10.432 28.928 23.296 57.728 38.4 86.4a1240.896 1240.896 0 0 1 120.32-138.432 1240.832 1240.832 0 0 1 138.496-120.32zM173.824 591.488a685.44 685.44 0 0 0-38.464 86.4c-35.648 98.048-33.92 166.592 5.12 205.632 39.04 39.04 107.584 40.768 205.696 5.12a685.44 685.44 0 0 0 86.4-38.4 1240.768 1240.768 0 0 1-138.496-120.32 1240.96 1240.96 0 0 1-120.256-138.432z m495.744 78.08A1112.064 1112.064 0 0 0 802.048 512a1112.064 1112.064 0 0 0-132.48-157.568A1112.128 1112.128 0 0 0 512 221.952a1112.128 1112.128 0 0 0-157.504 132.48A1112.064 1112.064 0 0 0 222.016 512a1112.192 1112.192 0 0 0 132.416 157.568A1112.064 1112.064 0 0 0 512 802.048a1112.128 1112.128 0 0 0 157.568-132.48z m-78.08 180.608c28.672 15.168 57.472 28.032 86.4 38.464 98.048 35.648 166.592 33.92 205.632-5.12 39.04-39.04 40.768-107.584 5.12-205.696a685.504 685.504 0 0 0-38.4-86.4 1240.832 1240.832 0 0 1-120.32 138.496 1240.96 1240.96 0 0 1-138.432 120.32zM585.088 512a73.152 73.152 0 1 1-146.24 0 73.152 73.152 0 0 1 146.304 0z\"\n fill=\"currentColor\"\n p-id=\"5013\"\n ></path>\n </svg>\n \u6DF1\u5EA6\u601D\u8003\n </div>\n <div\n class=\"select-tool\"\n nz-popover\n [nzPopoverContent]=\"modelListContent\"\n nzPopoverTrigger=\"click\"\n nzPopoverOverlayClassName=\"params-select-popover\"\n [nzPopoverVisible]=\"modelPopoverVisible\"\n (nzPopoverVisibleChange)=\"modelVisibleChange($event)\"\n >\n <img src=\"/assets/images/input/toggle-model.png\" style=\"width: 12px; height: 12px\" />\n {{ currentModel ? currentModel?.name : '\u9009\u62E9\u6A21\u578B' }}\n </div>\n <div\n class=\"select-tool\"\n nz-popover\n [nzPopoverContent]=\"knowledgeListContent\"\n nzPopoverTrigger=\"click\"\n nzPopoverOverlayClassName=\"params-select-popover\"\n [nzPopoverVisible]=\"knowledgePopoverVisible\"\n (nzPopoverVisibleChange)=\"knowledgeVisibleChange($event)\"\n >\n <img src=\"/assets/images/input/relate.png\" style=\"width: 14px; height: 8px\" />\n \u5173\u8054\u77E5\u8BC6\u5E93\n </div>\n </div>\n <img class=\"send\" src=\"/assets/images/input/send.png\" (click)=\"send()\" [hidden]=\"sseService.loading$ | async\" />\n <div class=\"send-loading\" *ngIf=\"sseService.loading$ | async\">\n <div class=\"send-loading-inner\">\n <svg viewBox=\"0 0 36 36\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" data-icon=\"spin\">\n <defs>\n <linearGradient x1=\"0%\" y1=\"100%\" x2=\"100%\" y2=\"100%\" id=\"linearGradient-1\">\n <stop stop-color=\"currentColor\" stop-opacity=\"0\" offset=\"0%\"></stop>\n <stop stop-color=\"currentColor\" stop-opacity=\"0.50\" offset=\"39.9430698%\"></stop>\n <stop stop-color=\"currentColor\" offset=\"100%\"></stop>\n </linearGradient>\n </defs>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <rect fill-opacity=\"0.01\" fill=\"none\" x=\"0\" y=\"0\" width=\"36\" height=\"36\"></rect>\n <path\n d=\"M34,18 C34,9.163444 26.836556,2 18,2 C11.6597233,2 6.18078805,5.68784135 3.59122325,11.0354951\"\n stroke=\"url(#linearGradient-1)\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n ></path>\n </g>\n </svg>\n </div>\n </div>\n <!-- <img class=\"send\" src=\"/assets/images/input/send-gray.png\" /> -->\n </div>\n </div>\n <div class=\"chat-input-backdrop\"></div>\n</div>\n\n<ng-template #modelListContent>\n <div style=\"width: 200px\">\n <div class=\"select-title\">\n \u5207\u6362\u6A21\u578B\n <i nz-icon nzType=\"close\" style=\"color: #999\" (click)=\"modelVisibleChange(false)\"></i>\n </div>\n <div class=\"select-content\">\n <nz-radio-group [(ngModel)]=\"currentModel\">\n <label\n nz-radio\n [nzValue]=\"item\"\n [style.margin-top.px]=\"i === 0 ? 0 : 10\"\n *ngFor=\"let item of modelList; let i = index\"\n >\n {{ item.name }}\n </label>\n </nz-radio-group>\n </div>\n </div>\n</ng-template>\n\n<ng-template #knowledgeListContent>\n <div style=\"width: 150px\">\n <div class=\"select-title\">\n \u5173\u8054\u77E5\u8BC6\u5E93\n <i nz-icon nzType=\"close\" style=\"color: #999\" (click)=\"knowledgeVisibleChange(false)\"></i>\n </div>\n <div class=\"select-content\">\n <nz-checkbox-wrapper style=\"width: 100%\" (nzOnChange)=\"knowledgeSelectChange($event)\">\n <div *ngFor=\"let item of knowledgeList\">\n <label nz-checkbox [nzValue]=\"item.iCode\" [(ngModel)]=\"item.checked\">{{ item.name }}</label>\n </div>\n </nz-checkbox-wrapper>\n </div>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.chat-input-wrapper{position:absolute;bottom:0;left:0;right:0;max-width:800px;min-width:350px;margin:0 auto;padding-bottom:40px}.chat-input-wrapper.center{bottom:50%;transform:translateY(50%)}.new-chat-title{display:flex;align-items:center;justify-content:center;padding-bottom:40px;text-align:center;font-weight:500;font-size:24px;color:#000}.new-chat-title img{width:40px;height:32px;margin-right:12px;margin-top:-6px}.chat-input{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:20px 18px;margin:0 auto;background:#FFFFFF;box-shadow:0 2px 8px #0000001a;border-radius:20px;border:1px solid #D9DADB;z-index:30}.chat-input .input-creative-editor{min-height:60px;max-height:300px;overflow-y:auto;outline:none;box-shadow:none;border:none}.chat-input .input-creative-editor[data-empty=true]:before{content:attr(data-placeholder);color:#9a9b9b}.chat-input .input-bottom{padding-top:16px;display:flex;align-items:center;justify-content:space-between;-webkit-user-select:none;user-select:none}.chat-input .input-bottom .input-tools{display:flex;align-items:center;gap:10px}.chat-input .input-bottom .select-tool{display:flex;align-items:center;justify-content:center;height:36px;padding:0 12px;gap:12px;background:#FFFFFF;border-radius:12px;border:1px solid #DBDCE0;cursor:pointer}.chat-input .input-bottom .select-tool-active{border-color:#b7c8fe;color:#3964fe;background:#edf3fe}.chat-input .input-bottom .send{width:32px;height:32px}::ng-deep .params-select-popover .ant-popover-inner{border-radius:10px}::ng-deep .params-select-popover .select-title{display:flex;align-items:center;justify-content:center;position:relative}::ng-deep .params-select-popover .select-title i{position:absolute;right:0;top:3px;cursor:pointer}::ng-deep .params-select-popover .select-content{max-height:200px;padding:16px 0;overflow-y:auto}.chat-input-backdrop{position:absolute;bottom:0;left:0;width:100%;height:100px;z-index:10;background-image:linear-gradient(to bottom,hsl(0,0%,99%),hsla(0,0%,99%,.8))}.send-loading{min-width:34px;height:34px;border-radius:50%;margin-top:auto;display:flex;flex-shrink:0;align-items:center;flex-direction:column;justify-content:center;cursor:not-allowed;white-space:nowrap;color:#fff;background:#3964fe;transition:background .2s;opacity:.4}.send-loading-inner{width:16px;height:16px}.send-loading svg{will-change:transform;animation:.6s linear infinite send-loading}@keyframes send-loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
665
|
+
args: [{ selector: 'ngx-chat-input', template: "<!-- \u65B0\u804A\u5929\u4F4D\u4E8E\u5C4F\u5E55\u4E2D\u95F4\uFF0C\u53D1\u9001\u6D88\u606F\u4E4B\u540E\u4F4D\u4E8E\u5E95\u90E8 -->\n<div\n class=\"chat-input-wrapper\"\n #chatInputWrapper\n [class.center]=\"!messages.length\"\n [ngStyle]=\"{ 'padding-bottom': mode === 'full' ? '40px' : '10px' }\"\n>\n <div class=\"new-chat-title\" *ngIf=\"!messages.length\">\n <img src=\"/assets/images/logo.png\" />\n <span>\u4F60\u597D\uFF0C\u6709\u4EC0\u4E48\u53EF\u4EE5\u5E2E\u5230\u4F60\uFF1F\u5F00\u59CB\u5BF9\u8BDD\u5427</span>\n </div>\n <div class=\"chat-input\">\n <div\n #editorRef\n class=\"input-creative-editor\"\n contenteditable=\"true\"\n spellcheck=\"false\"\n data-placeholder=\"\u8BF7\u8F93\u5165\u5E76\u53D1\u9001\u6D88\u606F\"\n [attr.data-empty]=\"isEmpty\"\n (input)=\"handleInput()\"\n (keydown.enter)=\"handleEnter($event)\"\n (paste)=\"handlePaste($event)\"\n ></div>\n <div class=\"input-bottom\">\n <div class=\"input-tools\">\n <div class=\"select-tool\" [ngClass]=\"{ 'select-tool-active': deepThink }\" (click)=\"toggleDeepThink()\">\n <svg\n t=\"1764131026949\"\n style=\"width: 14px; height: 14px\"\n class=\"icon\"\n viewBox=\"0 0 1024 1024\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n p-id=\"5012\"\n width=\"64\"\n height=\"64\"\n >\n <path\n d=\"M903.36 512a795.52 795.52 0 0 1 65.536 136.704c48 132.16 39.616 230.528-25.024 295.168-64.64 64.64-163.008 72.96-295.168 24.96A795.52 795.52 0 0 1 512 903.424a795.52 795.52 0 0 1-136.704 65.536c-132.096 48-230.528 39.616-295.168-25.024-64.64-64.64-72.96-163.008-24.96-295.104 16.64-46.016 38.528-91.52 65.536-136.768A795.52 795.52 0 0 1 55.04 375.232C7.04 243.2 15.36 144.768 80 80.128 144.768 15.488 243.2 7.168 375.296 55.04c46.016 16.64 91.584 38.528 136.768 65.536A795.52 795.52 0 0 1 648.768 55.104c132.096-48 230.464-39.616 295.104 25.024 64.64 64.64 72.96 163.008 25.024 295.104A795.52 795.52 0 0 1 903.36 512z m-53.12-79.424c15.168-28.736 27.968-57.536 38.464-86.4 35.584-98.112 33.92-166.656-5.12-205.696-39.04-39.04-107.648-40.768-205.696-5.12a685.44 685.44 0 0 0-86.4 38.4 1240.96 1240.96 0 0 1 138.432 120.32 1240.832 1240.832 0 0 1 120.32 138.496zM432.576 173.824a685.44 685.44 0 0 0-86.4-38.528c-98.112-35.584-166.656-33.92-205.696 5.12-39.04 39.04-40.768 107.648-5.12 205.696 10.432 28.928 23.296 57.728 38.4 86.4a1240.896 1240.896 0 0 1 120.32-138.432 1240.832 1240.832 0 0 1 138.496-120.32zM173.824 591.488a685.44 685.44 0 0 0-38.464 86.4c-35.648 98.048-33.92 166.592 5.12 205.632 39.04 39.04 107.584 40.768 205.696 5.12a685.44 685.44 0 0 0 86.4-38.4 1240.768 1240.768 0 0 1-138.496-120.32 1240.96 1240.96 0 0 1-120.256-138.432z m495.744 78.08A1112.064 1112.064 0 0 0 802.048 512a1112.064 1112.064 0 0 0-132.48-157.568A1112.128 1112.128 0 0 0 512 221.952a1112.128 1112.128 0 0 0-157.504 132.48A1112.064 1112.064 0 0 0 222.016 512a1112.192 1112.192 0 0 0 132.416 157.568A1112.064 1112.064 0 0 0 512 802.048a1112.128 1112.128 0 0 0 157.568-132.48z m-78.08 180.608c28.672 15.168 57.472 28.032 86.4 38.464 98.048 35.648 166.592 33.92 205.632-5.12 39.04-39.04 40.768-107.584 5.12-205.696a685.504 685.504 0 0 0-38.4-86.4 1240.832 1240.832 0 0 1-120.32 138.496 1240.96 1240.96 0 0 1-138.432 120.32zM585.088 512a73.152 73.152 0 1 1-146.24 0 73.152 73.152 0 0 1 146.304 0z\"\n fill=\"currentColor\"\n p-id=\"5013\"\n ></path>\n </svg>\n \u6DF1\u5EA6\u601D\u8003\n </div>\n <div\n class=\"select-tool\"\n nz-popover\n [nzPopoverContent]=\"modelListContent\"\n nzPopoverTrigger=\"click\"\n nzPopoverOverlayClassName=\"params-select-popover\"\n [nzPopoverVisible]=\"modelPopoverVisible\"\n (nzPopoverVisibleChange)=\"modelVisibleChange($event)\"\n >\n <img src=\"/assets/images/input/toggle-model.png\" style=\"width: 12px; height: 12px\" />\n {{ currentModel ? currentModel?.name : '\u9009\u62E9\u6A21\u578B' }}\n </div>\n <div\n class=\"select-tool\"\n nz-popover\n [nzPopoverContent]=\"knowledgeListContent\"\n nzPopoverTrigger=\"click\"\n nzPopoverOverlayClassName=\"params-select-popover\"\n [nzPopoverVisible]=\"knowledgePopoverVisible\"\n (nzPopoverVisibleChange)=\"knowledgeVisibleChange($event)\"\n >\n <img src=\"/assets/images/input/relate.png\" style=\"width: 14px; height: 8px\" />\n \u5173\u8054\u77E5\u8BC6\u5E93\n </div>\n </div>\n <img class=\"send\" src=\"/assets/images/input/send.png\" (click)=\"send()\" [hidden]=\"sseService.loading$ | async\" />\n <div class=\"send-loading\" *ngIf=\"sseService.loading$ | async\">\n <div class=\"send-loading-inner\">\n <svg viewBox=\"0 0 36 36\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" data-icon=\"spin\">\n <defs>\n <linearGradient x1=\"0%\" y1=\"100%\" x2=\"100%\" y2=\"100%\" id=\"linearGradient-1\">\n <stop stop-color=\"currentColor\" stop-opacity=\"0\" offset=\"0%\"></stop>\n <stop stop-color=\"currentColor\" stop-opacity=\"0.50\" offset=\"39.9430698%\"></stop>\n <stop stop-color=\"currentColor\" offset=\"100%\"></stop>\n </linearGradient>\n </defs>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <rect fill-opacity=\"0.01\" fill=\"none\" x=\"0\" y=\"0\" width=\"36\" height=\"36\"></rect>\n <path\n d=\"M34,18 C34,9.163444 26.836556,2 18,2 C11.6597233,2 6.18078805,5.68784135 3.59122325,11.0354951\"\n stroke=\"url(#linearGradient-1)\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n ></path>\n </g>\n </svg>\n </div>\n </div>\n <!-- <img class=\"send\" src=\"/assets/images/input/send-gray.png\" /> -->\n </div>\n </div>\n <div class=\"chat-input-backdrop\"></div>\n</div>\n\n<ng-template #modelListContent>\n <div style=\"width: 200px\">\n <div class=\"select-title\">\n \u5207\u6362\u6A21\u578B\n <i nz-icon nzType=\"close\" style=\"color: #999\" (click)=\"modelVisibleChange(false)\"></i>\n </div>\n <div class=\"select-content\">\n <nz-radio-group [(ngModel)]=\"currentModel\">\n <label\n nz-radio\n [nzValue]=\"item\"\n [style.margin-top.px]=\"i === 0 ? 0 : 10\"\n *ngFor=\"let item of modelList; let i = index\"\n >\n {{ item.name }}\n </label>\n </nz-radio-group>\n </div>\n </div>\n</ng-template>\n\n<ng-template #knowledgeListContent>\n <div style=\"width: 250px\">\n <div class=\"select-title\">\n \u5173\u8054\u77E5\u8BC6\u5E93\n <i nz-icon nzType=\"close\" style=\"color: #999\" (click)=\"knowledgeVisibleChange(false)\"></i>\n </div>\n <div class=\"select-content\">\n <nz-steps [nzCurrent]=\"knowledgeStepIndex\" nzProgressDot nzDirection=\"vertical\" nzSize=\"small\">\n <nz-step nzTitle=\"\u9009\u62E9\u5206\u7C7B\" [nzDescription]=\"typeSelectTpl\">\n <ng-template #typeSelectTpl>\n <nz-select\n [(ngModel)]=\"selectedTypes\"\n nzMode=\"multiple\"\n style=\"width: 100%\"\n (ngModelChange)=\"onTypeChange($event)\"\n nzPlaceHolder=\"\u8BF7\u9009\u62E9\u5206\u7C7B\"\n >\n <nz-option [nzValue]=\"item.type\" [nzLabel]=\"item.typeC\" *ngFor=\"let item of typesData\"></nz-option>\n </nz-select>\n </ng-template>\n </nz-step>\n <nz-step nzTitle=\"\u641C\u7D22\u9009\u62E9\u76EE\u5F55\" [nzDescription]=\"categorySelectTpl\">\n <ng-template #categorySelectTpl>\n <nz-tree-select\n style=\"width: 100%\"\n [(ngModel)]=\"selectedCategories\"\n [nzNodes]=\"categoriesData\"\n (ngModelChange)=\"onCategoryChange($event)\"\n nzCheckStrictly\n nzShowSearch\n nzCheckable\n nzPlaceHolder=\"\u8BF7\u9009\u62E9\u76EE\u5F55\"\n ></nz-tree-select>\n </ng-template>\n </nz-step>\n <nz-step nzTitle=\"\u9009\u62E9\u6807\u7B7E\" [nzDescription]=\"tagSelectTpl\">\n <ng-template #tagSelectTpl>\n <nz-select\n [(ngModel)]=\"selectedTags\"\n nzMode=\"multiple\"\n nzPlaceHolder=\"\u8BF7\u9009\u62E9\u6807\u7B7E\"\n style=\"width: 100%\"\n (ngModelChange)=\"onTagChange($event)\"\n >\n <nz-option-group [nzLabel]=\"item.name\" *ngFor=\"let item of tagsData\">\n <nz-option\n [nzValue]=\"child.iCode\"\n [nzLabel]=\"child.name\"\n *ngFor=\"let child of item.children\"\n ></nz-option>\n </nz-option-group>\n </nz-select>\n </ng-template>\n </nz-step>\n </nz-steps>\n </div>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{width:100%;container-type:inline-size;container-name:chat-container}.chat-input-wrapper{position:absolute;bottom:0;left:0;right:0;max-width:800px;min-width:350px;margin:0 auto;padding-bottom:40px}@container chat-container (max-width: 1000px){.chat-input-wrapper{max-width:90%}}.chat-input-wrapper.center{bottom:50%;transform:translateY(50%)}.new-chat-title{display:flex;align-items:center;justify-content:center;padding-bottom:40px;text-align:center;font-weight:500;font-size:24px;color:#000}.new-chat-title img{width:40px;height:32px;margin-right:12px;margin-top:-6px}.chat-input{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:20px 18px;margin:0 auto;background:#FFFFFF;box-shadow:0 2px 8px #0000001a;border-radius:20px;border:1px solid #D9DADB;z-index:30}.chat-input .input-creative-editor{min-height:60px;max-height:300px;overflow-y:auto;outline:none;box-shadow:none;border:none}.chat-input .input-creative-editor[data-empty=true]:before{content:attr(data-placeholder);color:#9a9b9b}.chat-input .input-bottom{padding-top:16px;display:flex;align-items:center;justify-content:space-between;-webkit-user-select:none;user-select:none}.chat-input .input-bottom .input-tools{display:flex;align-items:center;gap:10px}.chat-input .input-bottom .select-tool{display:flex;align-items:center;justify-content:center;height:36px;padding:0 12px;gap:12px;background:#FFFFFF;border-radius:12px;border:1px solid #DBDCE0;cursor:pointer}.chat-input .input-bottom .select-tool-active{border-color:#b7c8fe;color:#3964fe;background:#edf3fe}.chat-input .input-bottom .send{width:32px;height:32px}::ng-deep .params-select-popover .ant-popover-inner{border-radius:10px}::ng-deep .params-select-popover .select-title{display:flex;align-items:center;justify-content:center;position:relative}::ng-deep .params-select-popover .select-title i{position:absolute;right:0;top:3px;cursor:pointer}::ng-deep .params-select-popover .select-content{max-height:400px;padding:16px 0 16px 1px;overflow-y:auto}.chat-input-backdrop{position:absolute;bottom:0;left:0;width:100%;height:100px;z-index:10;background-image:linear-gradient(to bottom,hsl(0,0%,99%),hsla(0,0%,99%,.8))}.send-loading{min-width:34px;height:34px;border-radius:50%;margin-top:auto;display:flex;flex-shrink:0;align-items:center;flex-direction:column;justify-content:center;cursor:not-allowed;white-space:nowrap;color:#fff;background:#3964fe;transition:background .2s;opacity:.4}.send-loading-inner{width:16px;height:16px}.send-loading svg{will-change:transform;animation:.6s linear infinite send-loading}@keyframes send-loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
498
666
|
}], propDecorators: { editor: [{
|
|
499
667
|
type: ViewChild,
|
|
500
668
|
args: ['editorRef']
|
|
@@ -503,6 +671,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
503
671
|
args: ['chatInputWrapper']
|
|
504
672
|
}], messages: [{
|
|
505
673
|
type: Input
|
|
674
|
+
}], mode: [{
|
|
675
|
+
type: Input
|
|
506
676
|
}], sendMessage: [{
|
|
507
677
|
type: Output
|
|
508
678
|
}], messageChange: [{
|
|
@@ -711,7 +881,7 @@ class ChatMessagesComponent {
|
|
|
711
881
|
}
|
|
712
882
|
}
|
|
713
883
|
ChatMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatMessagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
714
|
-
ChatMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChatMessagesComponent, selector: "ngx-chat-messages", inputs: { messages: "messages" }, outputs: { regenerateAnswer: "regenerateAnswer" }, viewQueries: [{ propertyName: "messagesContainer", first: true, predicate: ["messagesContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- chat-messages.component.html -->\n<script src=\"chat-messages.component.ts\"></script>\n<div class=\"messages-container\" #messagesContainer>\n <div class=\"message-list\" [style.--input-height.px]=\"inputHeight\">\n <div class=\"question message-wrapper\" *ngFor=\"let msg of messages; let i = index\">\n <!-- Q -->\n <div class=\"bubble-wrapper user-msg\">\n <div class=\"message-bubble\">\n <div class=\"message-content message-human\">\n {{ msg.question }}\n </div>\n </div>\n </div>\n <!-- A -->\n <div class=\"bubble-wrapper ai-msg\" *ngIf=\"msg.answers[msg.answerIndex]\">\n <div\n class=\"bubble-loading\"\n *ngIf=\"!msg.answers[msg.answerIndex].think && !msg.answers[msg.answerIndex].content\"\n >\n <div class=\"bubble-loading-dot\" *ngFor=\"let item of [1, 2, 3]\"></div>\n </div>\n <div class=\"message-bubble\">\n <!-- \u601D\u8003 -->\n <div class=\"message-think\" *ngIf=\"msg.answers[msg.answerIndex].think\">\n <div\n class=\"message-think-header\"\n (click)=\"msg.answers[msg.answerIndex].thinkExpand = !msg.answers[msg.answerIndex].thinkExpand\"\n >\n <div class=\"message-think-header-title\">\n <img src=\"/assets/images/card/think-finish.png\" />\n {{ msg.answers[msg.answerIndex].content ? '\u5DF2\u5B8C\u6210\u601D\u8003' : '\u6B63\u5728\u601D\u8003\u4E2D...' }}\n </div>\n <div class=\"arrow-icon\" [class.rotated]=\"msg.answers[msg.answerIndex].thinkExpand\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n </div>\n </div>\n <div\n class=\"message-content message-assistant message-markdown\"\n [@expandCollapse]=\"msg.answers[msg.answerIndex].thinkExpand ? 'expanded' : 'collapsed'\"\n [innerHTML]=\"msg.answers[msg.answerIndex].think | markdown\"\n [hidden]=\"!msg.answers[msg.answerIndex].thinkExpand\"\n ></div>\n </div>\n <!-- \u56DE\u7B54 -->\n <div\n class=\"message-content message-assistant message-markdown\"\n [innerHTML]=\"msg.answers[msg.answerIndex].content | markdown\"\n ></div>\n <!-- \u56DE\u7B54\u5DE5\u5177\u680F -->\n <div class=\"assistant-tools\" *ngIf=\"msg.answers[msg.answerIndex].content\">\n <ngx-simple-pagination\n [current]=\"msg.answerIndex + 1\"\n [total]=\"msg.answers.length\"\n (pageChange)=\"onPageChange($event, msg)\"\n *ngIf=\"msg.answers.length > 1\"\n ></ngx-simple-pagination>\n <img\n src=\"assets/images/card/copy.png\"\n alt=\"\u590D\u5236\"\n (click)=\"copyContent(msg.answers[msg.answerIndex].content)\"\n />\n <img\n src=\"assets/images/card/refresh.png\"\n alt=\"\u91CD\u65B0\u751F\u6210\"\n (click)=\"regenerate(msg)\"\n *ngIf=\"i === messages.length - 1\"\n />\n </div>\n </div>\n </div>\n </div>\n\n <!-- <div style=\"padding-bottom: 160px\"></div> -->\n </div>\n</div>\n", styles: [":host{width:100%;height:100%}.messages-container{width:100%;height:100%;overflow-y:auto;scrollbar-gutter:stable both-edges}.message-list{height:auto;padding-top:16px;padding-bottom:var(--input-height, 210px);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:16px}.message-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;width:100%;margin-bottom:16px;max-width:800px;min-width:350px}.bubble-wrapper{width:100%;display:flex;flex-direction:column;justify-content:center}.bubble-wrapper.user-msg{align-items:end}.bubble-wrapper.ai-msg{align-items:start}.bubble-loading{display:flex;align-items:center;justify-content:flex-start;height:24px;margin-top:4px;margin-bottom:16px}.bubble-loading-dot{width:6px;height:6px;border-radius:50%;margin-right:6px;background-color:#bbb;animation:.9s linear infinite loading-dot}.bubble-loading-dot:first-child{animation-delay:0s}.bubble-loading-dot:nth-child(2){animation-delay:.1s}.bubble-loading-dot:nth-child(3){animation-delay:.2s}@keyframes loading-dot{0%,to{opacity:.3}33%,66%{opacity:1}}.message-bubble{width:100%;display:flex;align-items:flex-end;flex-direction:column;gap:8px}.message-bubble .message-content.message-human{padding:8px 16px;margin-left:auto;border-radius:12px;background:#E4EDFD;color:#004ad3}.message-bubble .message-content.message-assistant{padding:0;width:100%;background:#fff}.message-bubble .message-markdown{background:#fff}.message-bubble .message-think{width:100%;padding:12px;background:#FFFFFF;border-radius:10px;border:1px solid #D9DADB;font-size:14px}.message-bubble .message-think-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#000;font-size:16px}.message-bubble .message-think-header-title{display:flex;align-items:center;gap:10px}.message-bubble .message-think-header-title img{width:14px;height:14px}.message-bubble .message-think .message-content{padding-top:12px;color:#61666b}.message-bubble .arrow-icon{transition:transform .3s ease}.message-bubble .arrow-icon.rotated{transform:rotate(0)}.message-bubble .arrow-icon:not(.rotated){transform:rotate(-90deg)}.assistant-tools{width:100%;display:flex;align-items:center;gap:24px}.assistant-tools img{width:14px;height:14px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SimplePaginationComponent, selector: "ngx-simple-pagination", inputs: ["current", "total"], outputs: ["pageChange"] }, { kind: "pipe", type: MarkdownPipe, name: "markdown" }], animations: [
|
|
884
|
+
ChatMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChatMessagesComponent, selector: "ngx-chat-messages", inputs: { messages: "messages" }, outputs: { regenerateAnswer: "regenerateAnswer" }, viewQueries: [{ propertyName: "messagesContainer", first: true, predicate: ["messagesContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- chat-messages.component.html -->\n<script src=\"chat-messages.component.ts\"></script>\n<div class=\"messages-container\" #messagesContainer>\n <div class=\"message-list\" [style.--input-height.px]=\"inputHeight\">\n <div class=\"question message-wrapper\" *ngFor=\"let msg of messages; let i = index\">\n <!-- Q -->\n <div class=\"bubble-wrapper user-msg\">\n <div class=\"message-bubble\">\n <div class=\"message-content message-human\">\n {{ msg.question }}\n </div>\n </div>\n </div>\n <!-- A -->\n <div class=\"bubble-wrapper ai-msg\" *ngIf=\"msg.answers[msg.answerIndex]\">\n <div\n class=\"bubble-loading\"\n *ngIf=\"!msg.answers[msg.answerIndex].think && !msg.answers[msg.answerIndex].content\"\n >\n <div class=\"bubble-loading-dot\" *ngFor=\"let item of [1, 2, 3]\"></div>\n </div>\n <div class=\"message-bubble\">\n <!-- \u601D\u8003 -->\n <div class=\"message-think\" *ngIf=\"msg.answers[msg.answerIndex].think\">\n <div\n class=\"message-think-header\"\n (click)=\"msg.answers[msg.answerIndex].thinkExpand = !msg.answers[msg.answerIndex].thinkExpand\"\n >\n <div class=\"message-think-header-title\">\n <img src=\"/assets/images/card/think-finish.png\" />\n {{ msg.answers[msg.answerIndex].content ? '\u5DF2\u5B8C\u6210\u601D\u8003' : '\u6B63\u5728\u601D\u8003\u4E2D...' }}\n </div>\n <div class=\"arrow-icon\" [class.rotated]=\"msg.answers[msg.answerIndex].thinkExpand\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n </div>\n </div>\n <div\n class=\"message-content message-assistant message-markdown\"\n [@expandCollapse]=\"msg.answers[msg.answerIndex].thinkExpand ? 'expanded' : 'collapsed'\"\n [innerHTML]=\"msg.answers[msg.answerIndex].think | markdown\"\n [hidden]=\"!msg.answers[msg.answerIndex].thinkExpand\"\n ></div>\n </div>\n <!-- \u56DE\u7B54 -->\n <div\n class=\"message-content message-assistant message-markdown\"\n [innerHTML]=\"msg.answers[msg.answerIndex].content | markdown\"\n ></div>\n <!-- \u56DE\u7B54\u5DE5\u5177\u680F -->\n <div class=\"assistant-tools\" *ngIf=\"msg.answers[msg.answerIndex].content\">\n <ngx-simple-pagination\n [current]=\"msg.answerIndex + 1\"\n [total]=\"msg.answers.length\"\n (pageChange)=\"onPageChange($event, msg)\"\n *ngIf=\"msg.answers.length > 1\"\n ></ngx-simple-pagination>\n <img\n src=\"assets/images/card/copy.png\"\n alt=\"\u590D\u5236\"\n (click)=\"copyContent(msg.answers[msg.answerIndex].content)\"\n />\n <img\n src=\"assets/images/card/refresh.png\"\n alt=\"\u91CD\u65B0\u751F\u6210\"\n (click)=\"regenerate(msg)\"\n *ngIf=\"i === messages.length - 1\"\n />\n </div>\n </div>\n </div>\n </div>\n\n <!-- <div style=\"padding-bottom: 160px\"></div> -->\n </div>\n</div>\n", styles: [":host{width:100%;height:100%}.messages-container{width:100%;height:100%;overflow-y:auto;scrollbar-gutter:stable both-edges;container-type:inline-size;container-name:chat-container}.message-list{height:auto;padding-top:16px;padding-bottom:var(--input-height, 210px);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:16px}.message-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;width:100%;margin-bottom:16px;max-width:800px;min-width:350px}@container chat-container (max-width: 1000px){.message-wrapper{max-width:90%}}.bubble-wrapper{width:100%;display:flex;flex-direction:column;justify-content:center}.bubble-wrapper.user-msg{align-items:end}.bubble-wrapper.ai-msg{align-items:start}.bubble-loading{display:flex;align-items:center;justify-content:flex-start;height:24px;margin-top:4px;margin-bottom:16px}.bubble-loading-dot{width:6px;height:6px;border-radius:50%;margin-right:6px;background-color:#bbb;animation:.9s linear infinite loading-dot}.bubble-loading-dot:first-child{animation-delay:0s}.bubble-loading-dot:nth-child(2){animation-delay:.1s}.bubble-loading-dot:nth-child(3){animation-delay:.2s}@keyframes loading-dot{0%,to{opacity:.3}33%,66%{opacity:1}}.message-bubble{width:100%;display:flex;align-items:flex-end;flex-direction:column;gap:8px}.message-bubble .message-content.message-human{padding:8px 16px;margin-left:auto;border-radius:12px;background:#E4EDFD;color:#004ad3}.message-bubble .message-content.message-assistant{padding:0;width:100%;background:#fff}.message-bubble .message-markdown{background:#fff}.message-bubble .message-think{width:100%;padding:12px;background:#FFFFFF;border-radius:10px;border:1px solid #D9DADB;font-size:14px}.message-bubble .message-think-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#000;font-size:16px}.message-bubble .message-think-header-title{display:flex;align-items:center;gap:10px}.message-bubble .message-think-header-title img{width:14px;height:14px}.message-bubble .message-think .message-content{padding-top:12px;color:#61666b}.message-bubble .arrow-icon{transition:transform .3s ease}.message-bubble .arrow-icon.rotated{transform:rotate(0)}.message-bubble .arrow-icon:not(.rotated){transform:rotate(-90deg)}.assistant-tools{width:100%;display:flex;align-items:center;gap:24px}.assistant-tools img{width:14px;height:14px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SimplePaginationComponent, selector: "ngx-simple-pagination", inputs: ["current", "total"], outputs: ["pageChange"] }, { kind: "pipe", type: MarkdownPipe, name: "markdown" }], animations: [
|
|
715
885
|
trigger('expandCollapse', [
|
|
716
886
|
state('collapsed', style({ height: '0px', opacity: 0 })),
|
|
717
887
|
state('expanded', style({ height: '*', opacity: 1 })),
|
|
@@ -726,7 +896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
726
896
|
state('expanded', style({ height: '*', opacity: 1 })),
|
|
727
897
|
transition('expanded <=> collapsed', animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
728
898
|
]),
|
|
729
|
-
], template: "<!-- chat-messages.component.html -->\n<script src=\"chat-messages.component.ts\"></script>\n<div class=\"messages-container\" #messagesContainer>\n <div class=\"message-list\" [style.--input-height.px]=\"inputHeight\">\n <div class=\"question message-wrapper\" *ngFor=\"let msg of messages; let i = index\">\n <!-- Q -->\n <div class=\"bubble-wrapper user-msg\">\n <div class=\"message-bubble\">\n <div class=\"message-content message-human\">\n {{ msg.question }}\n </div>\n </div>\n </div>\n <!-- A -->\n <div class=\"bubble-wrapper ai-msg\" *ngIf=\"msg.answers[msg.answerIndex]\">\n <div\n class=\"bubble-loading\"\n *ngIf=\"!msg.answers[msg.answerIndex].think && !msg.answers[msg.answerIndex].content\"\n >\n <div class=\"bubble-loading-dot\" *ngFor=\"let item of [1, 2, 3]\"></div>\n </div>\n <div class=\"message-bubble\">\n <!-- \u601D\u8003 -->\n <div class=\"message-think\" *ngIf=\"msg.answers[msg.answerIndex].think\">\n <div\n class=\"message-think-header\"\n (click)=\"msg.answers[msg.answerIndex].thinkExpand = !msg.answers[msg.answerIndex].thinkExpand\"\n >\n <div class=\"message-think-header-title\">\n <img src=\"/assets/images/card/think-finish.png\" />\n {{ msg.answers[msg.answerIndex].content ? '\u5DF2\u5B8C\u6210\u601D\u8003' : '\u6B63\u5728\u601D\u8003\u4E2D...' }}\n </div>\n <div class=\"arrow-icon\" [class.rotated]=\"msg.answers[msg.answerIndex].thinkExpand\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n </div>\n </div>\n <div\n class=\"message-content message-assistant message-markdown\"\n [@expandCollapse]=\"msg.answers[msg.answerIndex].thinkExpand ? 'expanded' : 'collapsed'\"\n [innerHTML]=\"msg.answers[msg.answerIndex].think | markdown\"\n [hidden]=\"!msg.answers[msg.answerIndex].thinkExpand\"\n ></div>\n </div>\n <!-- \u56DE\u7B54 -->\n <div\n class=\"message-content message-assistant message-markdown\"\n [innerHTML]=\"msg.answers[msg.answerIndex].content | markdown\"\n ></div>\n <!-- \u56DE\u7B54\u5DE5\u5177\u680F -->\n <div class=\"assistant-tools\" *ngIf=\"msg.answers[msg.answerIndex].content\">\n <ngx-simple-pagination\n [current]=\"msg.answerIndex + 1\"\n [total]=\"msg.answers.length\"\n (pageChange)=\"onPageChange($event, msg)\"\n *ngIf=\"msg.answers.length > 1\"\n ></ngx-simple-pagination>\n <img\n src=\"assets/images/card/copy.png\"\n alt=\"\u590D\u5236\"\n (click)=\"copyContent(msg.answers[msg.answerIndex].content)\"\n />\n <img\n src=\"assets/images/card/refresh.png\"\n alt=\"\u91CD\u65B0\u751F\u6210\"\n (click)=\"regenerate(msg)\"\n *ngIf=\"i === messages.length - 1\"\n />\n </div>\n </div>\n </div>\n </div>\n\n <!-- <div style=\"padding-bottom: 160px\"></div> -->\n </div>\n</div>\n", styles: [":host{width:100%;height:100%}.messages-container{width:100%;height:100%;overflow-y:auto;scrollbar-gutter:stable both-edges}.message-list{height:auto;padding-top:16px;padding-bottom:var(--input-height, 210px);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:16px}.message-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;width:100%;margin-bottom:16px;max-width:800px;min-width:350px}.bubble-wrapper{width:100%;display:flex;flex-direction:column;justify-content:center}.bubble-wrapper.user-msg{align-items:end}.bubble-wrapper.ai-msg{align-items:start}.bubble-loading{display:flex;align-items:center;justify-content:flex-start;height:24px;margin-top:4px;margin-bottom:16px}.bubble-loading-dot{width:6px;height:6px;border-radius:50%;margin-right:6px;background-color:#bbb;animation:.9s linear infinite loading-dot}.bubble-loading-dot:first-child{animation-delay:0s}.bubble-loading-dot:nth-child(2){animation-delay:.1s}.bubble-loading-dot:nth-child(3){animation-delay:.2s}@keyframes loading-dot{0%,to{opacity:.3}33%,66%{opacity:1}}.message-bubble{width:100%;display:flex;align-items:flex-end;flex-direction:column;gap:8px}.message-bubble .message-content.message-human{padding:8px 16px;margin-left:auto;border-radius:12px;background:#E4EDFD;color:#004ad3}.message-bubble .message-content.message-assistant{padding:0;width:100%;background:#fff}.message-bubble .message-markdown{background:#fff}.message-bubble .message-think{width:100%;padding:12px;background:#FFFFFF;border-radius:10px;border:1px solid #D9DADB;font-size:14px}.message-bubble .message-think-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#000;font-size:16px}.message-bubble .message-think-header-title{display:flex;align-items:center;gap:10px}.message-bubble .message-think-header-title img{width:14px;height:14px}.message-bubble .message-think .message-content{padding-top:12px;color:#61666b}.message-bubble .arrow-icon{transition:transform .3s ease}.message-bubble .arrow-icon.rotated{transform:rotate(0)}.message-bubble .arrow-icon:not(.rotated){transform:rotate(-90deg)}.assistant-tools{width:100%;display:flex;align-items:center;gap:24px}.assistant-tools img{width:14px;height:14px;cursor:pointer}\n"] }]
|
|
899
|
+
], template: "<!-- chat-messages.component.html -->\n<script src=\"chat-messages.component.ts\"></script>\n<div class=\"messages-container\" #messagesContainer>\n <div class=\"message-list\" [style.--input-height.px]=\"inputHeight\">\n <div class=\"question message-wrapper\" *ngFor=\"let msg of messages; let i = index\">\n <!-- Q -->\n <div class=\"bubble-wrapper user-msg\">\n <div class=\"message-bubble\">\n <div class=\"message-content message-human\">\n {{ msg.question }}\n </div>\n </div>\n </div>\n <!-- A -->\n <div class=\"bubble-wrapper ai-msg\" *ngIf=\"msg.answers[msg.answerIndex]\">\n <div\n class=\"bubble-loading\"\n *ngIf=\"!msg.answers[msg.answerIndex].think && !msg.answers[msg.answerIndex].content\"\n >\n <div class=\"bubble-loading-dot\" *ngFor=\"let item of [1, 2, 3]\"></div>\n </div>\n <div class=\"message-bubble\">\n <!-- \u601D\u8003 -->\n <div class=\"message-think\" *ngIf=\"msg.answers[msg.answerIndex].think\">\n <div\n class=\"message-think-header\"\n (click)=\"msg.answers[msg.answerIndex].thinkExpand = !msg.answers[msg.answerIndex].thinkExpand\"\n >\n <div class=\"message-think-header-title\">\n <img src=\"/assets/images/card/think-finish.png\" />\n {{ msg.answers[msg.answerIndex].content ? '\u5DF2\u5B8C\u6210\u601D\u8003' : '\u6B63\u5728\u601D\u8003\u4E2D...' }}\n </div>\n <div class=\"arrow-icon\" [class.rotated]=\"msg.answers[msg.answerIndex].thinkExpand\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n </div>\n </div>\n <div\n class=\"message-content message-assistant message-markdown\"\n [@expandCollapse]=\"msg.answers[msg.answerIndex].thinkExpand ? 'expanded' : 'collapsed'\"\n [innerHTML]=\"msg.answers[msg.answerIndex].think | markdown\"\n [hidden]=\"!msg.answers[msg.answerIndex].thinkExpand\"\n ></div>\n </div>\n <!-- \u56DE\u7B54 -->\n <div\n class=\"message-content message-assistant message-markdown\"\n [innerHTML]=\"msg.answers[msg.answerIndex].content | markdown\"\n ></div>\n <!-- \u56DE\u7B54\u5DE5\u5177\u680F -->\n <div class=\"assistant-tools\" *ngIf=\"msg.answers[msg.answerIndex].content\">\n <ngx-simple-pagination\n [current]=\"msg.answerIndex + 1\"\n [total]=\"msg.answers.length\"\n (pageChange)=\"onPageChange($event, msg)\"\n *ngIf=\"msg.answers.length > 1\"\n ></ngx-simple-pagination>\n <img\n src=\"assets/images/card/copy.png\"\n alt=\"\u590D\u5236\"\n (click)=\"copyContent(msg.answers[msg.answerIndex].content)\"\n />\n <img\n src=\"assets/images/card/refresh.png\"\n alt=\"\u91CD\u65B0\u751F\u6210\"\n (click)=\"regenerate(msg)\"\n *ngIf=\"i === messages.length - 1\"\n />\n </div>\n </div>\n </div>\n </div>\n\n <!-- <div style=\"padding-bottom: 160px\"></div> -->\n </div>\n</div>\n", styles: [":host{width:100%;height:100%}.messages-container{width:100%;height:100%;overflow-y:auto;scrollbar-gutter:stable both-edges;container-type:inline-size;container-name:chat-container}.message-list{height:auto;padding-top:16px;padding-bottom:var(--input-height, 210px);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:16px}.message-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;width:100%;margin-bottom:16px;max-width:800px;min-width:350px}@container chat-container (max-width: 1000px){.message-wrapper{max-width:90%}}.bubble-wrapper{width:100%;display:flex;flex-direction:column;justify-content:center}.bubble-wrapper.user-msg{align-items:end}.bubble-wrapper.ai-msg{align-items:start}.bubble-loading{display:flex;align-items:center;justify-content:flex-start;height:24px;margin-top:4px;margin-bottom:16px}.bubble-loading-dot{width:6px;height:6px;border-radius:50%;margin-right:6px;background-color:#bbb;animation:.9s linear infinite loading-dot}.bubble-loading-dot:first-child{animation-delay:0s}.bubble-loading-dot:nth-child(2){animation-delay:.1s}.bubble-loading-dot:nth-child(3){animation-delay:.2s}@keyframes loading-dot{0%,to{opacity:.3}33%,66%{opacity:1}}.message-bubble{width:100%;display:flex;align-items:flex-end;flex-direction:column;gap:8px}.message-bubble .message-content.message-human{padding:8px 16px;margin-left:auto;border-radius:12px;background:#E4EDFD;color:#004ad3}.message-bubble .message-content.message-assistant{padding:0;width:100%;background:#fff}.message-bubble .message-markdown{background:#fff}.message-bubble .message-think{width:100%;padding:12px;background:#FFFFFF;border-radius:10px;border:1px solid #D9DADB;font-size:14px}.message-bubble .message-think-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#000;font-size:16px}.message-bubble .message-think-header-title{display:flex;align-items:center;gap:10px}.message-bubble .message-think-header-title img{width:14px;height:14px}.message-bubble .message-think .message-content{padding-top:12px;color:#61666b}.message-bubble .arrow-icon{transition:transform .3s ease}.message-bubble .arrow-icon.rotated{transform:rotate(0)}.message-bubble .arrow-icon:not(.rotated){transform:rotate(-90deg)}.assistant-tools{width:100%;display:flex;align-items:center;gap:24px}.assistant-tools img{width:14px;height:14px;cursor:pointer}\n"] }]
|
|
730
900
|
}], propDecorators: { messages: [{
|
|
731
901
|
type: Input
|
|
732
902
|
}], messagesContainer: [{
|
|
@@ -736,103 +906,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
736
906
|
type: Output
|
|
737
907
|
}] } });
|
|
738
908
|
|
|
739
|
-
class HttpService {
|
|
740
|
-
constructor() {
|
|
741
|
-
this.http = inject(HttpClient);
|
|
742
|
-
this.storeService = inject(StoreService);
|
|
743
|
-
this.BASE_URL = '/api'; // 或者完整域名
|
|
744
|
-
}
|
|
745
|
-
/**
|
|
746
|
-
* 统一获取 Headers
|
|
747
|
-
*/
|
|
748
|
-
getHeaders() {
|
|
749
|
-
return new HttpHeaders({
|
|
750
|
-
'Content-Type': 'application/json',
|
|
751
|
-
Authorization: `${this.storeService.getToken()}`,
|
|
752
|
-
});
|
|
753
|
-
}
|
|
754
|
-
/**
|
|
755
|
-
* GET 请求
|
|
756
|
-
*/
|
|
757
|
-
get(url, params) {
|
|
758
|
-
return this.http.get(this.formatUrl(url), {
|
|
759
|
-
headers: this.getHeaders(),
|
|
760
|
-
params: this.resolveParams(params),
|
|
761
|
-
});
|
|
762
|
-
}
|
|
763
|
-
/**
|
|
764
|
-
* POST 请求
|
|
765
|
-
*/
|
|
766
|
-
post(url, body) {
|
|
767
|
-
return this.http.post(this.formatUrl(url), body, {
|
|
768
|
-
headers: this.getHeaders(),
|
|
769
|
-
});
|
|
770
|
-
}
|
|
771
|
-
/**
|
|
772
|
-
* PUT 请求
|
|
773
|
-
*/
|
|
774
|
-
put(url, body) {
|
|
775
|
-
return this.http.put(this.formatUrl(url), body, {
|
|
776
|
-
headers: this.getHeaders(),
|
|
777
|
-
});
|
|
778
|
-
}
|
|
779
|
-
/**
|
|
780
|
-
* DELETE 请求
|
|
781
|
-
* 兼容支持:既支持 URL 参数,也支持 Body
|
|
782
|
-
*/
|
|
783
|
-
delete(url, params, body) {
|
|
784
|
-
return this.http.request('DELETE', this.formatUrl(url), {
|
|
785
|
-
headers: this.getHeaders(),
|
|
786
|
-
params: this.resolveParams(params),
|
|
787
|
-
body: body, // HttpClient 的 delete() 方法默认不支持 body,需用 request() 通用方法
|
|
788
|
-
});
|
|
789
|
-
}
|
|
790
|
-
// ================= 私有辅助方法 =================
|
|
791
|
-
/**
|
|
792
|
-
* 统一处理 URL
|
|
793
|
-
* 比如自动拼接 BaseUrl,或者处理斜杠
|
|
794
|
-
*/
|
|
795
|
-
formatUrl(url) {
|
|
796
|
-
if (url.startsWith('http'))
|
|
797
|
-
return url;
|
|
798
|
-
// 确保拼接顺滑
|
|
799
|
-
const baseUrl = this.storeService.getBaseUrl();
|
|
800
|
-
const cleanBase = baseUrl.replace(/\/$/, '');
|
|
801
|
-
const cleanUrl = url.startsWith('/') ? url : `/${url}`;
|
|
802
|
-
return `${cleanBase}${cleanUrl}`;
|
|
803
|
-
}
|
|
804
|
-
/**
|
|
805
|
-
* 统一清洗参数
|
|
806
|
-
* 过滤掉 null 和 undefined,防止传给后端 "null" 字符串
|
|
807
|
-
*/
|
|
808
|
-
resolveParams(params) {
|
|
809
|
-
let httpParams = new HttpParams();
|
|
810
|
-
if (params) {
|
|
811
|
-
Object.keys(params).forEach(key => {
|
|
812
|
-
const value = params[key];
|
|
813
|
-
if (value !== null && value !== undefined) {
|
|
814
|
-
if (Array.isArray(value)) {
|
|
815
|
-
// 支持数组参数 ids: [1, 2] => ids=1&ids=2
|
|
816
|
-
value.forEach(val => (httpParams = httpParams.append(key, val)));
|
|
817
|
-
}
|
|
818
|
-
else {
|
|
819
|
-
httpParams = httpParams.set(key, value);
|
|
820
|
-
}
|
|
821
|
-
}
|
|
822
|
-
});
|
|
823
|
-
}
|
|
824
|
-
return httpParams;
|
|
825
|
-
}
|
|
826
|
-
}
|
|
827
|
-
HttpService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HttpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
828
|
-
HttpService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HttpService, providedIn: 'root' });
|
|
829
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HttpService, decorators: [{
|
|
830
|
-
type: Injectable,
|
|
831
|
-
args: [{
|
|
832
|
-
providedIn: 'root',
|
|
833
|
-
}]
|
|
834
|
-
}] });
|
|
835
|
-
|
|
836
909
|
class HistoryGroupComponent {
|
|
837
910
|
constructor() {
|
|
838
911
|
this.select = new EventEmitter();
|
|
@@ -952,6 +1025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
952
1025
|
// chat-sidebar.component.ts
|
|
953
1026
|
class ChatSidebarComponent {
|
|
954
1027
|
constructor() {
|
|
1028
|
+
this.mode = 'full';
|
|
955
1029
|
this.http = inject(HttpService$1);
|
|
956
1030
|
this.storeService = inject(StoreService);
|
|
957
1031
|
this.isCollapsed = false;
|
|
@@ -1036,7 +1110,7 @@ class ChatSidebarComponent {
|
|
|
1036
1110
|
}
|
|
1037
1111
|
}
|
|
1038
1112
|
ChatSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1039
|
-
ChatSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChatSidebarComponent, selector: "ngx-chat-sidebar", viewQueries: [{ propertyName: "historyGroupRef", first: true, predicate: ["historyGroupRef"], descendants: true }], ngImport: i0, template: "<div class=\"sidebar\" [class.collapsed]=\"isCollapsed\">\n <div class=\"sidebar-inner\">\n <div class=\"sidebar-header\">\n <div class=\"logo-area\">\n <img src=\"assets/images/logo.png\" alt=\"Logo\" class=\"logo-img\" />\n <span class=\"app-name\">\u9752\u6E05\u6C34\u5229</span>\n </div>\n <button class=\"toggle-btn\" (click)=\"toggleSidebar()\">\n <img src=\"assets/images/sidebar/collapse.png\" />\n </button>\n </div>\n\n <div class=\"sidebar-content\">\n <button class=\"new-chat-btn\" (click)=\"openNewChat()\">\n <img src=\"assets/images/sidebar/new-chat.png\" />\n \u5F00\u542F\u65B0\u5BF9\u8BDD\n </button>\n\n <div class=\"divider\"></div>\n\n <div class=\"section-title\">\n <img src=\"assets/images/sidebar/history-chat.png\" />\n <span>\u5386\u53F2\u5BF9\u8BDD</span>\n </div>\n\n <div class=\"history-list-scroll\" *ngIf=\"historyGroups.length\">\n <history-group\n #historyGroupRef\n *ngFor=\"let group of historyGroups\"\n [group]=\"group\"\n (select)=\"selectConversation($event)\"\n (refresh)=\"refresh($event)\"\n >\n </history-group>\n </div>\n\n <div class=\"history-empty\" *ngIf=\"!historyGroups.length\">\u6682\u65E0\u5386\u53F2\u5BF9\u8BDD</div>\n </div>\n </div>\n</div>\n\n<div
|
|
1113
|
+
ChatSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChatSidebarComponent, selector: "ngx-chat-sidebar", inputs: { mode: "mode" }, viewQueries: [{ propertyName: "historyGroupRef", first: true, predicate: ["historyGroupRef"], descendants: true }], ngImport: i0, template: "<div class=\"sidebar\" [class.collapsed]=\"isCollapsed\" [class.floating]=\"mode === 'card'\">\n <div class=\"sidebar-inner\">\n <div class=\"sidebar-header\" *ngIf=\"mode === 'full'\">\n <div class=\"logo-area\">\n <img src=\"assets/images/logo.png\" alt=\"Logo\" class=\"logo-img\" />\n <span class=\"app-name\">\u9752\u6E05\u6C34\u5229</span>\n </div>\n <button class=\"toggle-btn\" (click)=\"toggleSidebar()\">\n <img src=\"assets/images/sidebar/collapse.png\" />\n </button>\n </div>\n\n <div class=\"sidebar-content\">\n <button class=\"new-chat-btn\" (click)=\"openNewChat()\" *ngIf=\"mode === 'full'\">\n <img src=\"assets/images/sidebar/new-chat.png\" />\n \u5F00\u542F\u65B0\u5BF9\u8BDD\n </button>\n\n <div class=\"divider\" *ngIf=\"mode === 'full'\"></div>\n\n <div class=\"section-title\">\n <img src=\"assets/images/sidebar/history-chat.png\" />\n <span>\u5386\u53F2\u5BF9\u8BDD</span>\n </div>\n\n <div class=\"history-list-scroll\" *ngIf=\"historyGroups.length\">\n <history-group\n #historyGroupRef\n *ngFor=\"let group of historyGroups\"\n [group]=\"group\"\n (select)=\"selectConversation($event)\"\n (refresh)=\"refresh($event)\"\n >\n </history-group>\n </div>\n\n <div class=\"history-empty\" *ngIf=\"!historyGroups.length\">\u6682\u65E0\u5386\u53F2\u5BF9\u8BDD</div>\n </div>\n </div>\n</div>\n\n<div\n class=\"logo-actions\"\n [@logoActionsAnimation]=\"isCollapsed ? 'leave' : 'enter'\"\n *ngIf=\"isCollapsed && mode === 'full'\"\n>\n <img src=\"assets/images/logo.png\" alt=\"Logo\" class=\"logo-img\" />\n <div class=\"left-top-bar\">\n <img src=\"assets/images/sidebar/expand.png\" (click)=\"toggleSidebar()\" />\n <img src=\"assets/images/sidebar/new-chat.png\" (click)=\"openNewChat()\" />\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:block;height:100%}.sidebar{width:280px;height:100%;background-color:#f3f4f6;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;transition:width .4s cubic-bezier(.25,.8,.25,1),border .4s;overflow:hidden;box-sizing:border-box}.sidebar.floating{background-color:#fff;border-right:none;height:600px}.sidebar.floating .sidebar-inner{padding:0!important}.sidebar.collapsed{width:0;padding:0;border-right:0 solid transparent}.sidebar-inner{width:280px;height:100%;display:flex;flex-direction:column;padding:16px;box-sizing:border-box}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;height:32px}.logo-area{display:flex;align-items:center;gap:8px;white-space:nowrap}.logo-img{width:28px;height:28px;object-fit:contain}.app-name{font-weight:600;font-size:16px;color:#000}.toggle-btn{background:none;border:none;cursor:pointer;color:#666;padding:4px;border-radius:4px}.toggle-btn img{width:16px;height:15px}.toggle-btn:hover{background-color:#0000000d}.sidebar-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.new-chat-btn{width:100%;background-color:#fff;border:1px solid #e0e0e0;border-radius:20px;padding:10px;color:#333;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 2px 5px #00000008;transition:all .2s;white-space:nowrap}.new-chat-btn img{width:16px;height:16px}.new-chat-btn:hover{box-shadow:0 4px 8px #00000014;border-color:#d0d0d0}.divider{height:1px;background-color:#e0e0e0;margin:20px 0}.section-title{display:flex;align-items:center;gap:8px;font-weight:600;color:#333;margin-bottom:10px;white-space:nowrap}.section-title img{width:16px;height:16px}.history-list-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding-right:4px}.history-empty{flex:1;display:flex;align-items:center;justify-content:center}.logo-actions{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:8px;z-index:99}.logo-actions .logo-img{width:40px;height:32px}.logo-actions .left-top-bar{flex-shrink:0;width:75px;height:40px;display:flex;align-items:center;justify-content:center;gap:19px;background:#FFFFFF;box-shadow:0 2px 4px #0000001a;border-radius:20px;border:1px solid #EEEEEE}.logo-actions .left-top-bar img{width:16px;height:16px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HistoryGroupComponent, selector: "history-group", inputs: ["group"], outputs: ["select", "refresh"] }], animations: [
|
|
1040
1114
|
trigger('logoActionsAnimation', [
|
|
1041
1115
|
transition(':enter', [
|
|
1042
1116
|
style({ opacity: 0, transform: 'translateX(20px)' }),
|
|
@@ -1055,8 +1129,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1055
1129
|
]),
|
|
1056
1130
|
transition(':leave', [animate('0ms ease-in', style({ opacity: 0, transform: 'translateX(20px)' }))]),
|
|
1057
1131
|
]),
|
|
1058
|
-
], template: "<div class=\"sidebar\" [class.collapsed]=\"isCollapsed\">\n <div class=\"sidebar-inner\">\n <div class=\"sidebar-header\">\n <div class=\"logo-area\">\n <img src=\"assets/images/logo.png\" alt=\"Logo\" class=\"logo-img\" />\n <span class=\"app-name\">\u9752\u6E05\u6C34\u5229</span>\n </div>\n <button class=\"toggle-btn\" (click)=\"toggleSidebar()\">\n <img src=\"assets/images/sidebar/collapse.png\" />\n </button>\n </div>\n\n <div class=\"sidebar-content\">\n <button class=\"new-chat-btn\" (click)=\"openNewChat()\">\n <img src=\"assets/images/sidebar/new-chat.png\" />\n \u5F00\u542F\u65B0\u5BF9\u8BDD\n </button>\n\n <div class=\"divider\"></div>\n\n <div class=\"section-title\">\n <img src=\"assets/images/sidebar/history-chat.png\" />\n <span>\u5386\u53F2\u5BF9\u8BDD</span>\n </div>\n\n <div class=\"history-list-scroll\" *ngIf=\"historyGroups.length\">\n <history-group\n #historyGroupRef\n *ngFor=\"let group of historyGroups\"\n [group]=\"group\"\n (select)=\"selectConversation($event)\"\n (refresh)=\"refresh($event)\"\n >\n </history-group>\n </div>\n\n <div class=\"history-empty\" *ngIf=\"!historyGroups.length\">\u6682\u65E0\u5386\u53F2\u5BF9\u8BDD</div>\n </div>\n </div>\n</div>\n\n<div
|
|
1059
|
-
}], propDecorators: {
|
|
1132
|
+
], template: "<div class=\"sidebar\" [class.collapsed]=\"isCollapsed\" [class.floating]=\"mode === 'card'\">\n <div class=\"sidebar-inner\">\n <div class=\"sidebar-header\" *ngIf=\"mode === 'full'\">\n <div class=\"logo-area\">\n <img src=\"assets/images/logo.png\" alt=\"Logo\" class=\"logo-img\" />\n <span class=\"app-name\">\u9752\u6E05\u6C34\u5229</span>\n </div>\n <button class=\"toggle-btn\" (click)=\"toggleSidebar()\">\n <img src=\"assets/images/sidebar/collapse.png\" />\n </button>\n </div>\n\n <div class=\"sidebar-content\">\n <button class=\"new-chat-btn\" (click)=\"openNewChat()\" *ngIf=\"mode === 'full'\">\n <img src=\"assets/images/sidebar/new-chat.png\" />\n \u5F00\u542F\u65B0\u5BF9\u8BDD\n </button>\n\n <div class=\"divider\" *ngIf=\"mode === 'full'\"></div>\n\n <div class=\"section-title\">\n <img src=\"assets/images/sidebar/history-chat.png\" />\n <span>\u5386\u53F2\u5BF9\u8BDD</span>\n </div>\n\n <div class=\"history-list-scroll\" *ngIf=\"historyGroups.length\">\n <history-group\n #historyGroupRef\n *ngFor=\"let group of historyGroups\"\n [group]=\"group\"\n (select)=\"selectConversation($event)\"\n (refresh)=\"refresh($event)\"\n >\n </history-group>\n </div>\n\n <div class=\"history-empty\" *ngIf=\"!historyGroups.length\">\u6682\u65E0\u5386\u53F2\u5BF9\u8BDD</div>\n </div>\n </div>\n</div>\n\n<div\n class=\"logo-actions\"\n [@logoActionsAnimation]=\"isCollapsed ? 'leave' : 'enter'\"\n *ngIf=\"isCollapsed && mode === 'full'\"\n>\n <img src=\"assets/images/logo.png\" alt=\"Logo\" class=\"logo-img\" />\n <div class=\"left-top-bar\">\n <img src=\"assets/images/sidebar/expand.png\" (click)=\"toggleSidebar()\" />\n <img src=\"assets/images/sidebar/new-chat.png\" (click)=\"openNewChat()\" />\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:block;height:100%}.sidebar{width:280px;height:100%;background-color:#f3f4f6;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;transition:width .4s cubic-bezier(.25,.8,.25,1),border .4s;overflow:hidden;box-sizing:border-box}.sidebar.floating{background-color:#fff;border-right:none;height:600px}.sidebar.floating .sidebar-inner{padding:0!important}.sidebar.collapsed{width:0;padding:0;border-right:0 solid transparent}.sidebar-inner{width:280px;height:100%;display:flex;flex-direction:column;padding:16px;box-sizing:border-box}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;height:32px}.logo-area{display:flex;align-items:center;gap:8px;white-space:nowrap}.logo-img{width:28px;height:28px;object-fit:contain}.app-name{font-weight:600;font-size:16px;color:#000}.toggle-btn{background:none;border:none;cursor:pointer;color:#666;padding:4px;border-radius:4px}.toggle-btn img{width:16px;height:15px}.toggle-btn:hover{background-color:#0000000d}.sidebar-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.new-chat-btn{width:100%;background-color:#fff;border:1px solid #e0e0e0;border-radius:20px;padding:10px;color:#333;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 2px 5px #00000008;transition:all .2s;white-space:nowrap}.new-chat-btn img{width:16px;height:16px}.new-chat-btn:hover{box-shadow:0 4px 8px #00000014;border-color:#d0d0d0}.divider{height:1px;background-color:#e0e0e0;margin:20px 0}.section-title{display:flex;align-items:center;gap:8px;font-weight:600;color:#333;margin-bottom:10px;white-space:nowrap}.section-title img{width:16px;height:16px}.history-list-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding-right:4px}.history-empty{flex:1;display:flex;align-items:center;justify-content:center}.logo-actions{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:8px;z-index:99}.logo-actions .logo-img{width:40px;height:32px}.logo-actions .left-top-bar{flex-shrink:0;width:75px;height:40px;display:flex;align-items:center;justify-content:center;gap:19px;background:#FFFFFF;box-shadow:0 2px 4px #0000001a;border-radius:20px;border:1px solid #EEEEEE}.logo-actions .left-top-bar img{width:16px;height:16px;cursor:pointer}\n"] }]
|
|
1133
|
+
}], propDecorators: { mode: [{
|
|
1134
|
+
type: Input
|
|
1135
|
+
}], historyGroupRef: [{
|
|
1060
1136
|
type: ViewChild,
|
|
1061
1137
|
args: ['historyGroupRef']
|
|
1062
1138
|
}] } });
|
|
@@ -1170,10 +1246,10 @@ class NgxAgentChatComponent {
|
|
|
1170
1246
|
}
|
|
1171
1247
|
}
|
|
1172
1248
|
NgxAgentChatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgxAgentChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1173
|
-
NgxAgentChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NgxAgentChatComponent, selector: "ngx-agent-chat", inputs: { baseUrl: "baseUrl", token: "token" }, viewQueries: [{ propertyName: "chatSidebarRef", first: true, predicate: ["chatSidebarRef"], descendants: true }, { propertyName: "chatMessagesRef", first: true, predicate: ["chatMessagesRef"], descendants: true }, { propertyName: "chatInputRef", first: true, predicate: ["chatInputRef"], descendants: true }], ngImport: i0, template: "<div class=\"qq-agent\">\n
|
|
1249
|
+
NgxAgentChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NgxAgentChatComponent, selector: "ngx-agent-chat", inputs: { baseUrl: "baseUrl", token: "token" }, viewQueries: [{ propertyName: "chatSidebarRef", first: true, predicate: ["chatSidebarRef"], descendants: true }, { propertyName: "chatMessagesRef", first: true, predicate: ["chatMessagesRef"], descendants: true }, { propertyName: "chatInputRef", first: true, predicate: ["chatInputRef"], descendants: true }], ngImport: i0, template: "<div class=\"qq-agent\">\n <!-- \u5DE6\u4FA7\u8FB9\u680F -->\n <ngx-chat-sidebar #chatSidebarRef></ngx-chat-sidebar>\n\n <!-- \u53F3\u4FA7\u4E3B\u5185\u5BB9 -->\n <div class=\"agent-main\">\n <ngx-chat-messages\n #chatMessagesRef\n [messages]=\"messages\"\n (regenerateAnswer)=\"regenerateAnswer($event)\"\n ></ngx-chat-messages>\n <ngx-chat-input #chatInputRef [messages]=\"messages\" (sendMessage)=\"onSendMessage($event)\"></ngx-chat-input>\n </div>\n</div>\n", styles: [":host{width:100%;height:100%}:host ::ng-deep ::-webkit-scrollbar{width:6px}:host ::ng-deep ::-webkit-scrollbar-track{background:transparent}:host ::ng-deep ::-webkit-scrollbar-thumb{background:#d1d1d1;border-radius:8px}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:#b0b0b0}.qq-agent{width:100%;height:100%;display:flex;overflow:hidden}.qq-agent .agent-left{width:280px;height:100%;background:#F3F4F6}.qq-agent .agent-main{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center}\n"], dependencies: [{ kind: "component", type: ChatInputComponent, selector: "ngx-chat-input", inputs: ["messages", "mode"], outputs: ["sendMessage", "messageChange", "enter", "paste"] }, { kind: "component", type: ChatMessagesComponent, selector: "ngx-chat-messages", inputs: ["messages"], outputs: ["regenerateAnswer"] }, { kind: "component", type: ChatSidebarComponent, selector: "ngx-chat-sidebar", inputs: ["mode"] }] });
|
|
1174
1250
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgxAgentChatComponent, decorators: [{
|
|
1175
1251
|
type: Component,
|
|
1176
|
-
args: [{ selector: 'ngx-agent-chat', template: "<div class=\"qq-agent\">\n
|
|
1252
|
+
args: [{ selector: 'ngx-agent-chat', template: "<div class=\"qq-agent\">\n <!-- \u5DE6\u4FA7\u8FB9\u680F -->\n <ngx-chat-sidebar #chatSidebarRef></ngx-chat-sidebar>\n\n <!-- \u53F3\u4FA7\u4E3B\u5185\u5BB9 -->\n <div class=\"agent-main\">\n <ngx-chat-messages\n #chatMessagesRef\n [messages]=\"messages\"\n (regenerateAnswer)=\"regenerateAnswer($event)\"\n ></ngx-chat-messages>\n <ngx-chat-input #chatInputRef [messages]=\"messages\" (sendMessage)=\"onSendMessage($event)\"></ngx-chat-input>\n </div>\n</div>\n", styles: [":host{width:100%;height:100%}:host ::ng-deep ::-webkit-scrollbar{width:6px}:host ::ng-deep ::-webkit-scrollbar-track{background:transparent}:host ::ng-deep ::-webkit-scrollbar-thumb{background:#d1d1d1;border-radius:8px}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:#b0b0b0}.qq-agent{width:100%;height:100%;display:flex;overflow:hidden}.qq-agent .agent-left{width:280px;height:100%;background:#F3F4F6}.qq-agent .agent-main{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center}\n"] }]
|
|
1177
1253
|
}], propDecorators: { baseUrl: [{
|
|
1178
1254
|
type: Input
|
|
1179
1255
|
}], token: [{
|
|
@@ -1189,6 +1265,221 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1189
1265
|
args: ['chatInputRef']
|
|
1190
1266
|
}] } });
|
|
1191
1267
|
|
|
1268
|
+
class FloatingChatComponent {
|
|
1269
|
+
constructor() {
|
|
1270
|
+
// 状态变量,用于控制组件的显示和动画
|
|
1271
|
+
this.isExpanded = false;
|
|
1272
|
+
// 标题
|
|
1273
|
+
this.title = 'AI-青清水利';
|
|
1274
|
+
/**
|
|
1275
|
+
* 接口baseUrl配置
|
|
1276
|
+
*/
|
|
1277
|
+
this.baseUrl = 'http://39.102.56.254:8082';
|
|
1278
|
+
this.token = '';
|
|
1279
|
+
this.md = inject(MarkdownStreamService);
|
|
1280
|
+
this.httpService = inject(HttpService$1);
|
|
1281
|
+
this.sseService = inject(SseService);
|
|
1282
|
+
this.storeService = inject(StoreService);
|
|
1283
|
+
this.sanitizer = inject(DomSanitizer);
|
|
1284
|
+
this.ngZone = inject(NgZone);
|
|
1285
|
+
this.messages = []; // 消息数组
|
|
1286
|
+
// 历史对话
|
|
1287
|
+
this.modelPopoverVisible = false;
|
|
1288
|
+
}
|
|
1289
|
+
/**
|
|
1290
|
+
* 切换聊天框的展开/收起状态
|
|
1291
|
+
*/
|
|
1292
|
+
toggleChatBox() {
|
|
1293
|
+
this.isExpanded = !this.isExpanded;
|
|
1294
|
+
}
|
|
1295
|
+
ngOnInit() {
|
|
1296
|
+
this.storeService.setToken(this.token);
|
|
1297
|
+
this.storeService.setBaseUrl(this.baseUrl);
|
|
1298
|
+
this.sseService.conversationICode$.subscribe(iCodeObj => {
|
|
1299
|
+
if (iCodeObj) {
|
|
1300
|
+
const currentMsg = this.messages[this.messages.length - 1];
|
|
1301
|
+
currentMsg.iCode = iCodeObj.question;
|
|
1302
|
+
currentMsg.answers[currentMsg.answerIndex].iCode = iCodeObj.answer;
|
|
1303
|
+
}
|
|
1304
|
+
});
|
|
1305
|
+
this.sseService.thinking$.subscribe(text => {
|
|
1306
|
+
if (this.messages.length > 0) {
|
|
1307
|
+
const currentMsg = this.messages[this.messages.length - 1];
|
|
1308
|
+
currentMsg.answers[currentMsg.answerIndex].think = text;
|
|
1309
|
+
}
|
|
1310
|
+
});
|
|
1311
|
+
this.sseService.currentMessage$.subscribe(text => {
|
|
1312
|
+
if (this.messages.length > 0) {
|
|
1313
|
+
const currentMsg = this.messages[this.messages.length - 1];
|
|
1314
|
+
currentMsg.answers[currentMsg.answerIndex].content = text;
|
|
1315
|
+
}
|
|
1316
|
+
});
|
|
1317
|
+
this.storeService.currentConversation$.subscribe(conversation => {
|
|
1318
|
+
if (!conversation) {
|
|
1319
|
+
this.messages = [];
|
|
1320
|
+
return;
|
|
1321
|
+
}
|
|
1322
|
+
this.httpService
|
|
1323
|
+
.get(`${this.storeService.getBaseUrl()}/api/ChatModel/conversation/questions`, { iCode: conversation === null || conversation === void 0 ? void 0 : conversation.iCode })
|
|
1324
|
+
.subscribe((res) => {
|
|
1325
|
+
this.messages = res.map(item => {
|
|
1326
|
+
item.answerIndex = 0;
|
|
1327
|
+
item.answers.forEach(answer => {
|
|
1328
|
+
answer.thinkExpand = true;
|
|
1329
|
+
});
|
|
1330
|
+
return item;
|
|
1331
|
+
});
|
|
1332
|
+
});
|
|
1333
|
+
});
|
|
1334
|
+
}
|
|
1335
|
+
ngAfterViewInit() {
|
|
1336
|
+
this.resizeObserver = new ResizeObserver(entries => {
|
|
1337
|
+
for (let entry of entries) {
|
|
1338
|
+
const newHeight = entry.contentRect.height;
|
|
1339
|
+
this.ngZone.run(() => {
|
|
1340
|
+
this.chatMessagesRef.inputHeight = newHeight + 60;
|
|
1341
|
+
});
|
|
1342
|
+
}
|
|
1343
|
+
});
|
|
1344
|
+
// 开始监听输入框元素
|
|
1345
|
+
this.resizeObserver.observe(this.chatInputRef.chatInputWrapper.nativeElement);
|
|
1346
|
+
}
|
|
1347
|
+
modelVisibleChange(value) {
|
|
1348
|
+
this.modelPopoverVisible = value;
|
|
1349
|
+
}
|
|
1350
|
+
// 打开新对话
|
|
1351
|
+
openNewChat() {
|
|
1352
|
+
this.storeService.setCurrentConversation(null);
|
|
1353
|
+
}
|
|
1354
|
+
// 重新生成回答(仅最新的回答允许重新生成)
|
|
1355
|
+
regenerateAnswer(msg) {
|
|
1356
|
+
this.chatInputRef.regenerateSend(msg);
|
|
1357
|
+
}
|
|
1358
|
+
// 发起提问请求
|
|
1359
|
+
onSendMessage(event) {
|
|
1360
|
+
if (!event.isRegenerate) {
|
|
1361
|
+
// 推入一个新问答,iCode在流接收到补上
|
|
1362
|
+
const qa = {
|
|
1363
|
+
iCode: '',
|
|
1364
|
+
question: event.message.question,
|
|
1365
|
+
answers: [
|
|
1366
|
+
{
|
|
1367
|
+
iCode: '',
|
|
1368
|
+
think: '',
|
|
1369
|
+
content: '',
|
|
1370
|
+
thinkExpand: true,
|
|
1371
|
+
},
|
|
1372
|
+
],
|
|
1373
|
+
answerIndex: 0,
|
|
1374
|
+
};
|
|
1375
|
+
this.messages.push(qa);
|
|
1376
|
+
}
|
|
1377
|
+
else {
|
|
1378
|
+
const latestMessage = this.messages[this.messages.length - 1];
|
|
1379
|
+
latestMessage.answers.push({
|
|
1380
|
+
iCode: '',
|
|
1381
|
+
think: '',
|
|
1382
|
+
content: '',
|
|
1383
|
+
thinkExpand: true,
|
|
1384
|
+
});
|
|
1385
|
+
latestMessage.answerIndex = latestMessage.answers.length - 1;
|
|
1386
|
+
}
|
|
1387
|
+
this.sseService.streamChat(event.message).then(res => {
|
|
1388
|
+
// 开启新对话,刷新左侧历史对话
|
|
1389
|
+
if (!event.message.conversation) {
|
|
1390
|
+
this.chatSidebarRef.getHistory(true);
|
|
1391
|
+
}
|
|
1392
|
+
});
|
|
1393
|
+
}
|
|
1394
|
+
}
|
|
1395
|
+
FloatingChatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1396
|
+
FloatingChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FloatingChatComponent, selector: "ngx-agent-floating-chat", inputs: { title: "title", baseUrl: "baseUrl", token: "token" }, viewQueries: [{ propertyName: "chatSidebarRef", first: true, predicate: ["chatSidebarRef"], descendants: true }, { propertyName: "chatMessagesRef", first: true, predicate: ["chatMessagesRef"], descendants: true }, { propertyName: "chatInputRef", first: true, predicate: ["chatInputRef"], descendants: true }], ngImport: i0, template: "<div class=\"floating-chat-container\">\n <div class=\"chat-box\" [@chatBoxState]=\"isExpanded ? 'expanded' : 'collapsed'\">\n <header class=\"chat-header\">\n <div class=\"header-content\">\n <span\n class=\"icon menu-icon\"\n nz-popover\n [nzPopoverContent]=\"historyTpl\"\n nzPopoverTrigger=\"click\"\n nzPopoverOverlayClassName=\"params-select-popover\"\n nzPopoverPlacement=\"rightTop\"\n [nzPopoverVisible]=\"modelPopoverVisible\"\n (nzPopoverVisibleChange)=\"modelVisibleChange($event)\"\n >\n <img src=\"/assets/images/floating/history-menu.png\" style=\"width: 16px\" />\n </span>\n <h3 class=\"chat-title\">{{ title }}</h3>\n <img src=\"/assets/images/floating/new-chat.png\" style=\"width: 20px; cursor: pointer\" (click)=\"openNewChat()\" />\n </div>\n </header>\n\n <div class=\"chat-main\">\n <ngx-chat-messages\n #chatMessagesRef\n [messages]=\"messages\"\n (regenerateAnswer)=\"regenerateAnswer($event)\"\n ></ngx-chat-messages>\n <ngx-chat-input\n #chatInputRef\n [messages]=\"messages\"\n mode=\"card\"\n (sendMessage)=\"onSendMessage($event)\"\n ></ngx-chat-input>\n </div>\n </div>\n\n <button class=\"toggle-button\" (click)=\"toggleChatBox()\">\n <span class=\"button-icon\" [@buttonIconState]=\"isExpanded ? 'expanded' : 'collapsed'\">\n <img src=\"/assets/images/logo.png\" style=\"width: 36px\" *ngIf=\"!isExpanded\" />\n <img src=\"/assets/images/floating/arrow-down.png\" style=\"width: 24px\" *ngIf=\"isExpanded\" />\n </span>\n </button>\n</div>\n\n<!-- \u5386\u53F2\u5BF9\u8BDD -->\n<ng-template #historyTpl>\n <div style=\"width: 100%; max-height: 600px\">\n <!-- <div class=\"select-title\"> -->\n <!-- <div class=\"section-title\"> -->\n <!-- <img src=\"assets/images/sidebar/history-chat.png\" /> -->\n <!-- <span>\u5386\u53F2\u5BF9\u8BDD</span> -->\n <!-- </div> -->\n <!-- <i nz-icon nzType=\"close\" style=\"color: #999\" (click)=\"modelVisibleChange(false)\"></i> -->\n <!-- </div> -->\n <ngx-chat-sidebar #chatSidebarRef mode=\"card\"></ngx-chat-sidebar>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host ::ng-deep ::-webkit-scrollbar{width:6px}:host ::ng-deep ::-webkit-scrollbar-track{background:transparent}:host ::ng-deep ::-webkit-scrollbar-thumb{background:#d1d1d1;border-radius:8px}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:#b0b0b0}.floating-chat-container{position:fixed;bottom:20px;right:20px;z-index:1000;display:flex;flex-direction:column;align-items:flex-end}.chat-box{width:660px;height:820px;background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;margin-bottom:10px;overflow:hidden;display:flex;flex-direction:column}.chat-header{background-color:#fff;color:#fff;padding:12px 15px;border-top-left-radius:8px;border-top-right-radius:8px}.header-content{display:flex;justify-content:space-between;align-items:center}.chat-title{margin:0;font-size:16px;font-weight:500;flex-grow:1;text-align:center}.icon{font-size:18px;cursor:pointer}.chat-main{flex-grow:1;display:flex;flex-direction:column;overflow-y:auto;background-color:#fff}.welcome-message{text-align:center;padding-top:50px}.chat-icon{color:#409eff;margin-bottom:10px}.chat-icon svg{fill:#409eff}.welcome-text{color:#333;font-size:14px}.chat-footer{border-top:1px solid #eee;padding:10px 15px;background-color:#fff}.input-area-placeholder{display:flex;align-items:center;border:1px solid #ddd;border-radius:20px;margin-bottom:8px;overflow:hidden}.input-area-placeholder input{flex-grow:1;border:none;padding:8px 12px;outline:none;background-color:#fff;cursor:default}.input-area-placeholder .send-btn{background:none;border:none;padding:6px 10px;cursor:default;color:#bbb}.input-area-placeholder .send-btn svg{fill:#bbb}.bottom-controls{display:flex;justify-content:space-between;font-size:12px;color:#888}.control-item{cursor:default}.send-btn-placeholder{color:#409eff;font-weight:700;font-size:14px}.toggle-button{width:50px;height:50px;border-radius:50%;background-color:#fff;border:none;box-shadow:0 4px 8px #00000026;cursor:pointer;display:flex;justify-content:center;align-items:center;outline:none;color:#2157ff;order:2}.button-icon{display:block}.button-icon svg{fill:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NzPopoverDirective, selector: "[nz-popover]", inputs: ["nzPopoverArrowPointAtCenter", "nzPopoverTitle", "nzPopoverContent", "nz-popover", "nzPopoverTrigger", "nzPopoverPlacement", "nzPopoverOrigin", "nzPopoverVisible", "nzPopoverMouseEnterDelay", "nzPopoverMouseLeaveDelay", "nzPopoverOverlayClassName", "nzPopoverOverlayStyle", "nzPopoverBackdrop"], outputs: ["nzPopoverVisibleChange"], exportAs: ["nzPopover"] }, { kind: "component", type: ChatInputComponent, selector: "ngx-chat-input", inputs: ["messages", "mode"], outputs: ["sendMessage", "messageChange", "enter", "paste"] }, { kind: "component", type: ChatMessagesComponent, selector: "ngx-chat-messages", inputs: ["messages"], outputs: ["regenerateAnswer"] }, { kind: "component", type: ChatSidebarComponent, selector: "ngx-chat-sidebar", inputs: ["mode"] }], animations: [
|
|
1397
|
+
// 定义容器的展开/收起动画
|
|
1398
|
+
trigger('chatBoxState', [
|
|
1399
|
+
state('collapsed', style({
|
|
1400
|
+
opacity: 0,
|
|
1401
|
+
transform: 'scale(0.8) translateY(20px)',
|
|
1402
|
+
display: 'none',
|
|
1403
|
+
// visibility: 'hidden',
|
|
1404
|
+
width: '660px',
|
|
1405
|
+
height: '820px', // 保持高度一致,但不可见
|
|
1406
|
+
})),
|
|
1407
|
+
state('expanded', style({
|
|
1408
|
+
opacity: 1,
|
|
1409
|
+
transform: 'scale(1) translateY(0)',
|
|
1410
|
+
display: 'flex',
|
|
1411
|
+
// visibility: 'visible',
|
|
1412
|
+
width: '660px',
|
|
1413
|
+
height: '820px',
|
|
1414
|
+
})),
|
|
1415
|
+
transition('collapsed <=> expanded', [
|
|
1416
|
+
animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)'), // 贝塞尔曲线提供更自然的动画
|
|
1417
|
+
]),
|
|
1418
|
+
]),
|
|
1419
|
+
// 定义悬浮按钮的旋转动画
|
|
1420
|
+
trigger('buttonIconState', [
|
|
1421
|
+
state('collapsed', style({
|
|
1422
|
+
transform: 'rotate(0deg)',
|
|
1423
|
+
})),
|
|
1424
|
+
state('expanded', style({
|
|
1425
|
+
transform: 'rotate(0deg)', // 展开时,X图标旋转45度
|
|
1426
|
+
})),
|
|
1427
|
+
transition('collapsed <=> expanded', [animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)')]),
|
|
1428
|
+
]),
|
|
1429
|
+
] });
|
|
1430
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingChatComponent, decorators: [{
|
|
1431
|
+
type: Component,
|
|
1432
|
+
args: [{ selector: 'ngx-agent-floating-chat', animations: [
|
|
1433
|
+
// 定义容器的展开/收起动画
|
|
1434
|
+
trigger('chatBoxState', [
|
|
1435
|
+
state('collapsed', style({
|
|
1436
|
+
opacity: 0,
|
|
1437
|
+
transform: 'scale(0.8) translateY(20px)',
|
|
1438
|
+
display: 'none',
|
|
1439
|
+
// visibility: 'hidden',
|
|
1440
|
+
width: '660px',
|
|
1441
|
+
height: '820px', // 保持高度一致,但不可见
|
|
1442
|
+
})),
|
|
1443
|
+
state('expanded', style({
|
|
1444
|
+
opacity: 1,
|
|
1445
|
+
transform: 'scale(1) translateY(0)',
|
|
1446
|
+
display: 'flex',
|
|
1447
|
+
// visibility: 'visible',
|
|
1448
|
+
width: '660px',
|
|
1449
|
+
height: '820px',
|
|
1450
|
+
})),
|
|
1451
|
+
transition('collapsed <=> expanded', [
|
|
1452
|
+
animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)'), // 贝塞尔曲线提供更自然的动画
|
|
1453
|
+
]),
|
|
1454
|
+
]),
|
|
1455
|
+
// 定义悬浮按钮的旋转动画
|
|
1456
|
+
trigger('buttonIconState', [
|
|
1457
|
+
state('collapsed', style({
|
|
1458
|
+
transform: 'rotate(0deg)',
|
|
1459
|
+
})),
|
|
1460
|
+
state('expanded', style({
|
|
1461
|
+
transform: 'rotate(0deg)', // 展开时,X图标旋转45度
|
|
1462
|
+
})),
|
|
1463
|
+
transition('collapsed <=> expanded', [animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)')]),
|
|
1464
|
+
]),
|
|
1465
|
+
], template: "<div class=\"floating-chat-container\">\n <div class=\"chat-box\" [@chatBoxState]=\"isExpanded ? 'expanded' : 'collapsed'\">\n <header class=\"chat-header\">\n <div class=\"header-content\">\n <span\n class=\"icon menu-icon\"\n nz-popover\n [nzPopoverContent]=\"historyTpl\"\n nzPopoverTrigger=\"click\"\n nzPopoverOverlayClassName=\"params-select-popover\"\n nzPopoverPlacement=\"rightTop\"\n [nzPopoverVisible]=\"modelPopoverVisible\"\n (nzPopoverVisibleChange)=\"modelVisibleChange($event)\"\n >\n <img src=\"/assets/images/floating/history-menu.png\" style=\"width: 16px\" />\n </span>\n <h3 class=\"chat-title\">{{ title }}</h3>\n <img src=\"/assets/images/floating/new-chat.png\" style=\"width: 20px; cursor: pointer\" (click)=\"openNewChat()\" />\n </div>\n </header>\n\n <div class=\"chat-main\">\n <ngx-chat-messages\n #chatMessagesRef\n [messages]=\"messages\"\n (regenerateAnswer)=\"regenerateAnswer($event)\"\n ></ngx-chat-messages>\n <ngx-chat-input\n #chatInputRef\n [messages]=\"messages\"\n mode=\"card\"\n (sendMessage)=\"onSendMessage($event)\"\n ></ngx-chat-input>\n </div>\n </div>\n\n <button class=\"toggle-button\" (click)=\"toggleChatBox()\">\n <span class=\"button-icon\" [@buttonIconState]=\"isExpanded ? 'expanded' : 'collapsed'\">\n <img src=\"/assets/images/logo.png\" style=\"width: 36px\" *ngIf=\"!isExpanded\" />\n <img src=\"/assets/images/floating/arrow-down.png\" style=\"width: 24px\" *ngIf=\"isExpanded\" />\n </span>\n </button>\n</div>\n\n<!-- \u5386\u53F2\u5BF9\u8BDD -->\n<ng-template #historyTpl>\n <div style=\"width: 100%; max-height: 600px\">\n <!-- <div class=\"select-title\"> -->\n <!-- <div class=\"section-title\"> -->\n <!-- <img src=\"assets/images/sidebar/history-chat.png\" /> -->\n <!-- <span>\u5386\u53F2\u5BF9\u8BDD</span> -->\n <!-- </div> -->\n <!-- <i nz-icon nzType=\"close\" style=\"color: #999\" (click)=\"modelVisibleChange(false)\"></i> -->\n <!-- </div> -->\n <ngx-chat-sidebar #chatSidebarRef mode=\"card\"></ngx-chat-sidebar>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host ::ng-deep ::-webkit-scrollbar{width:6px}:host ::ng-deep ::-webkit-scrollbar-track{background:transparent}:host ::ng-deep ::-webkit-scrollbar-thumb{background:#d1d1d1;border-radius:8px}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:#b0b0b0}.floating-chat-container{position:fixed;bottom:20px;right:20px;z-index:1000;display:flex;flex-direction:column;align-items:flex-end}.chat-box{width:660px;height:820px;background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;margin-bottom:10px;overflow:hidden;display:flex;flex-direction:column}.chat-header{background-color:#fff;color:#fff;padding:12px 15px;border-top-left-radius:8px;border-top-right-radius:8px}.header-content{display:flex;justify-content:space-between;align-items:center}.chat-title{margin:0;font-size:16px;font-weight:500;flex-grow:1;text-align:center}.icon{font-size:18px;cursor:pointer}.chat-main{flex-grow:1;display:flex;flex-direction:column;overflow-y:auto;background-color:#fff}.welcome-message{text-align:center;padding-top:50px}.chat-icon{color:#409eff;margin-bottom:10px}.chat-icon svg{fill:#409eff}.welcome-text{color:#333;font-size:14px}.chat-footer{border-top:1px solid #eee;padding:10px 15px;background-color:#fff}.input-area-placeholder{display:flex;align-items:center;border:1px solid #ddd;border-radius:20px;margin-bottom:8px;overflow:hidden}.input-area-placeholder input{flex-grow:1;border:none;padding:8px 12px;outline:none;background-color:#fff;cursor:default}.input-area-placeholder .send-btn{background:none;border:none;padding:6px 10px;cursor:default;color:#bbb}.input-area-placeholder .send-btn svg{fill:#bbb}.bottom-controls{display:flex;justify-content:space-between;font-size:12px;color:#888}.control-item{cursor:default}.send-btn-placeholder{color:#409eff;font-weight:700;font-size:14px}.toggle-button{width:50px;height:50px;border-radius:50%;background-color:#fff;border:none;box-shadow:0 4px 8px #00000026;cursor:pointer;display:flex;justify-content:center;align-items:center;outline:none;color:#2157ff;order:2}.button-icon{display:block}.button-icon svg{fill:#fff}\n"] }]
|
|
1466
|
+
}], propDecorators: { title: [{
|
|
1467
|
+
type: Input
|
|
1468
|
+
}], baseUrl: [{
|
|
1469
|
+
type: Input
|
|
1470
|
+
}], token: [{
|
|
1471
|
+
type: Input
|
|
1472
|
+
}], chatSidebarRef: [{
|
|
1473
|
+
type: ViewChild,
|
|
1474
|
+
args: ['chatSidebarRef']
|
|
1475
|
+
}], chatMessagesRef: [{
|
|
1476
|
+
type: ViewChild,
|
|
1477
|
+
args: ['chatMessagesRef']
|
|
1478
|
+
}], chatInputRef: [{
|
|
1479
|
+
type: ViewChild,
|
|
1480
|
+
args: ['chatInputRef']
|
|
1481
|
+
}] } });
|
|
1482
|
+
|
|
1192
1483
|
class AgentChatModule {
|
|
1193
1484
|
}
|
|
1194
1485
|
AgentChatModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AgentChatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -1197,7 +1488,8 @@ AgentChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
|
|
|
1197
1488
|
ChatMessagesComponent,
|
|
1198
1489
|
ChatSidebarComponent,
|
|
1199
1490
|
SimplePaginationComponent,
|
|
1200
|
-
HistoryGroupComponent
|
|
1491
|
+
HistoryGroupComponent,
|
|
1492
|
+
FloatingChatComponent], imports: [CommonModule,
|
|
1201
1493
|
NzAvatarModule,
|
|
1202
1494
|
NzSpinModule,
|
|
1203
1495
|
NzTagModule,
|
|
@@ -1211,8 +1503,11 @@ AgentChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
|
|
|
1211
1503
|
NzCheckboxModule,
|
|
1212
1504
|
NzIconModule,
|
|
1213
1505
|
NzPaginationModule,
|
|
1506
|
+
NzStepsModule,
|
|
1507
|
+
NzSelectModule,
|
|
1508
|
+
NzTreeSelectModule,
|
|
1214
1509
|
FormsModule,
|
|
1215
|
-
MarkdownPipe], exports: [NgxAgentChatComponent] });
|
|
1510
|
+
MarkdownPipe], exports: [NgxAgentChatComponent, FloatingChatComponent, FloatingChatComponent] });
|
|
1216
1511
|
AgentChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AgentChatModule, providers: [NzMessageService], imports: [CommonModule,
|
|
1217
1512
|
NzAvatarModule,
|
|
1218
1513
|
NzSpinModule,
|
|
@@ -1227,6 +1522,9 @@ AgentChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
|
|
|
1227
1522
|
NzCheckboxModule,
|
|
1228
1523
|
NzIconModule,
|
|
1229
1524
|
NzPaginationModule,
|
|
1525
|
+
NzStepsModule,
|
|
1526
|
+
NzSelectModule,
|
|
1527
|
+
NzTreeSelectModule,
|
|
1230
1528
|
FormsModule] });
|
|
1231
1529
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AgentChatModule, decorators: [{
|
|
1232
1530
|
type: NgModule,
|
|
@@ -1238,6 +1536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1238
1536
|
ChatSidebarComponent,
|
|
1239
1537
|
SimplePaginationComponent,
|
|
1240
1538
|
HistoryGroupComponent,
|
|
1539
|
+
FloatingChatComponent,
|
|
1241
1540
|
],
|
|
1242
1541
|
imports: [
|
|
1243
1542
|
CommonModule,
|
|
@@ -1254,11 +1553,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1254
1553
|
NzCheckboxModule,
|
|
1255
1554
|
NzIconModule,
|
|
1256
1555
|
NzPaginationModule,
|
|
1556
|
+
NzStepsModule,
|
|
1557
|
+
NzSelectModule,
|
|
1558
|
+
NzTreeSelectModule,
|
|
1257
1559
|
FormsModule,
|
|
1258
1560
|
MarkdownPipe,
|
|
1259
1561
|
],
|
|
1260
1562
|
providers: [NzMessageService],
|
|
1261
|
-
exports: [NgxAgentChatComponent],
|
|
1563
|
+
exports: [NgxAgentChatComponent, FloatingChatComponent, FloatingChatComponent],
|
|
1262
1564
|
}]
|
|
1263
1565
|
}] });
|
|
1264
1566
|
|
|
@@ -1266,5 +1568,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1266
1568
|
* Generated bundle index. Do not edit.
|
|
1267
1569
|
*/
|
|
1268
1570
|
|
|
1269
|
-
export { AgentChatModule, NgxAgentChatComponent };
|
|
1571
|
+
export { AgentChatModule, FloatingChatComponent, NgxAgentChatComponent };
|
|
1270
1572
|
//# sourceMappingURL=qqsl-agent-chat.mjs.map
|