qqsl-agent 0.0.2 → 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 +15 -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 -19
- 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 -127
- package/fesm2015/qqsl-agent-chat.mjs.map +1 -1
- package/fesm2020/qqsl-agent-chat.mjs +432 -127
- package/fesm2020/qqsl-agent-chat.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -15,11 +15,15 @@ import * as i3 from 'ng-zorro-antd/popover';
|
|
|
15
15
|
import { NzPopoverModule } from 'ng-zorro-antd/popover';
|
|
16
16
|
import * as i4 from 'ng-zorro-antd/radio';
|
|
17
17
|
import { NzRadioModule } from 'ng-zorro-antd/radio';
|
|
18
|
-
import * as i5 from 'ng-zorro-antd/
|
|
19
|
-
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
|
|
20
|
-
import * as i6 from 'ng-zorro-antd/icon';
|
|
18
|
+
import * as i5 from 'ng-zorro-antd/icon';
|
|
21
19
|
import { NzIconModule } from 'ng-zorro-antd/icon';
|
|
22
|
-
import * as
|
|
20
|
+
import * as i6 from 'ng-zorro-antd/steps';
|
|
21
|
+
import { NzStepsModule } from 'ng-zorro-antd/steps';
|
|
22
|
+
import * as i7 from 'ng-zorro-antd/select';
|
|
23
|
+
import { NzSelectModule } from 'ng-zorro-antd/select';
|
|
24
|
+
import * as i8 from 'ng-zorro-antd/tree-select';
|
|
25
|
+
import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
|
|
26
|
+
import * as i9 from '@angular/forms';
|
|
23
27
|
import { FormsModule } from '@angular/forms';
|
|
24
28
|
import { NzMessageService } from 'ng-zorro-antd/message';
|
|
25
29
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
@@ -32,6 +36,7 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
|
|
|
32
36
|
import { NzListModule } from 'ng-zorro-antd/list';
|
|
33
37
|
import { NzSliderModule } from 'ng-zorro-antd/slider';
|
|
34
38
|
import { NzLayoutModule } from 'ng-zorro-antd/layout';
|
|
39
|
+
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
|
|
35
40
|
import { NzPaginationModule } from 'ng-zorro-antd/pagination';
|
|
36
41
|
|
|
37
42
|
// markdown-stream.service.ts
|
|
@@ -365,47 +370,207 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
365
370
|
}]
|
|
366
371
|
}] });
|
|
367
372
|
|
|
373
|
+
class HttpService {
|
|
374
|
+
constructor() {
|
|
375
|
+
this.http = inject(HttpClient);
|
|
376
|
+
this.storeService = inject(StoreService);
|
|
377
|
+
this.BASE_URL = '/api'; // 或者完整域名
|
|
378
|
+
}
|
|
379
|
+
/**
|
|
380
|
+
* 统一获取 Headers
|
|
381
|
+
*/
|
|
382
|
+
getHeaders() {
|
|
383
|
+
return new HttpHeaders({
|
|
384
|
+
'Content-Type': 'application/json',
|
|
385
|
+
Authorization: `${this.storeService.getToken()}`,
|
|
386
|
+
});
|
|
387
|
+
}
|
|
388
|
+
/**
|
|
389
|
+
* GET 请求
|
|
390
|
+
*/
|
|
391
|
+
get(url, params) {
|
|
392
|
+
return this.http.get(this.formatUrl(url), {
|
|
393
|
+
headers: this.getHeaders(),
|
|
394
|
+
params: this.resolveParams(params),
|
|
395
|
+
});
|
|
396
|
+
}
|
|
397
|
+
/**
|
|
398
|
+
* POST 请求
|
|
399
|
+
*/
|
|
400
|
+
post(url, body) {
|
|
401
|
+
return this.http.post(this.formatUrl(url), body, {
|
|
402
|
+
headers: this.getHeaders(),
|
|
403
|
+
});
|
|
404
|
+
}
|
|
405
|
+
/**
|
|
406
|
+
* PUT 请求
|
|
407
|
+
*/
|
|
408
|
+
put(url, body) {
|
|
409
|
+
return this.http.put(this.formatUrl(url), body, {
|
|
410
|
+
headers: this.getHeaders(),
|
|
411
|
+
});
|
|
412
|
+
}
|
|
413
|
+
/**
|
|
414
|
+
* DELETE 请求
|
|
415
|
+
* 兼容支持:既支持 URL 参数,也支持 Body
|
|
416
|
+
*/
|
|
417
|
+
delete(url, params, body) {
|
|
418
|
+
return this.http.request('DELETE', this.formatUrl(url), {
|
|
419
|
+
headers: this.getHeaders(),
|
|
420
|
+
params: this.resolveParams(params),
|
|
421
|
+
body: body, // HttpClient 的 delete() 方法默认不支持 body,需用 request() 通用方法
|
|
422
|
+
});
|
|
423
|
+
}
|
|
424
|
+
// ================= 私有辅助方法 =================
|
|
425
|
+
/**
|
|
426
|
+
* 统一处理 URL
|
|
427
|
+
* 比如自动拼接 BaseUrl,或者处理斜杠
|
|
428
|
+
*/
|
|
429
|
+
formatUrl(url) {
|
|
430
|
+
if (url.startsWith('http'))
|
|
431
|
+
return url;
|
|
432
|
+
// 确保拼接顺滑
|
|
433
|
+
const baseUrl = this.storeService.getBaseUrl();
|
|
434
|
+
const cleanBase = baseUrl.replace(/\/$/, '');
|
|
435
|
+
const cleanUrl = url.startsWith('/') ? url : `/${url}`;
|
|
436
|
+
return `${cleanBase}${cleanUrl}`;
|
|
437
|
+
}
|
|
438
|
+
/**
|
|
439
|
+
* 统一清洗参数
|
|
440
|
+
* 过滤掉 null 和 undefined,防止传给后端 "null" 字符串
|
|
441
|
+
*/
|
|
442
|
+
resolveParams(params) {
|
|
443
|
+
let httpParams = new HttpParams();
|
|
444
|
+
if (params) {
|
|
445
|
+
Object.keys(params).forEach(key => {
|
|
446
|
+
const value = params[key];
|
|
447
|
+
if (value !== null && value !== undefined) {
|
|
448
|
+
if (Array.isArray(value)) {
|
|
449
|
+
// 支持数组参数 ids: [1, 2] => ids=1&ids=2
|
|
450
|
+
value.forEach(val => (httpParams = httpParams.append(key, val)));
|
|
451
|
+
}
|
|
452
|
+
else {
|
|
453
|
+
httpParams = httpParams.set(key, value);
|
|
454
|
+
}
|
|
455
|
+
}
|
|
456
|
+
});
|
|
457
|
+
}
|
|
458
|
+
return httpParams;
|
|
459
|
+
}
|
|
460
|
+
}
|
|
461
|
+
HttpService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HttpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
462
|
+
HttpService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HttpService, providedIn: 'root' });
|
|
463
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HttpService, decorators: [{
|
|
464
|
+
type: Injectable,
|
|
465
|
+
args: [{
|
|
466
|
+
providedIn: 'root',
|
|
467
|
+
}]
|
|
468
|
+
}] });
|
|
469
|
+
|
|
368
470
|
// chat-input.component.ts
|
|
369
471
|
class ChatInputComponent {
|
|
370
472
|
constructor() {
|
|
371
473
|
this.messages = [];
|
|
474
|
+
this.mode = 'full';
|
|
372
475
|
this.sendMessage = new EventEmitter();
|
|
373
476
|
this.messageChange = new EventEmitter();
|
|
374
477
|
this.enter = new EventEmitter();
|
|
375
478
|
this.paste = new EventEmitter();
|
|
376
|
-
this.httpService = inject(HttpService
|
|
479
|
+
this.httpService = inject(HttpService);
|
|
377
480
|
this.storeService = inject(StoreService);
|
|
378
481
|
this.sseService = inject(SseService);
|
|
379
482
|
this.isEmpty = true;
|
|
380
483
|
this.currentModel = null;
|
|
381
484
|
this.currentKnowledge = [];
|
|
382
485
|
this.modelList = [];
|
|
383
|
-
this.knowledgeList = [];
|
|
384
486
|
this.modelPopoverVisible = false;
|
|
385
487
|
this.knowledgePopoverVisible = false;
|
|
386
488
|
this.deepThink = true;
|
|
489
|
+
this.knowledgeStepIndex = 0;
|
|
490
|
+
this.typesData = [];
|
|
491
|
+
this.categoriesData = [];
|
|
492
|
+
this.tagsData = [];
|
|
493
|
+
this.selectedTypes = [];
|
|
494
|
+
this.selectedCategories = [];
|
|
495
|
+
this.selectedTags = [];
|
|
387
496
|
}
|
|
388
497
|
ngOnInit() {
|
|
389
498
|
this.getModelList();
|
|
390
|
-
this.
|
|
499
|
+
this.loadTypes();
|
|
391
500
|
}
|
|
392
501
|
// 可供交互的模型
|
|
393
502
|
getModelList() {
|
|
394
|
-
this.httpService.get(`${this.storeService.getBaseUrl()}/api/ChatModel/models`).subscribe(
|
|
503
|
+
this.httpService.get(`${this.storeService.getBaseUrl()}/api/ChatModel/models`).subscribe(res => {
|
|
395
504
|
this.modelList = res;
|
|
396
505
|
if (res.length) {
|
|
397
506
|
this.currentModel = res[0];
|
|
398
507
|
}
|
|
399
508
|
});
|
|
400
509
|
}
|
|
401
|
-
|
|
402
|
-
|
|
510
|
+
onTypeChange(types) {
|
|
511
|
+
this.selectedTypes = types;
|
|
512
|
+
this.loadCategories(types);
|
|
513
|
+
this.selectedCategories = [];
|
|
514
|
+
this.selectedTags = [];
|
|
515
|
+
this.tagsData = [];
|
|
516
|
+
this.knowledgeStepIndex = types.length ? 1 : 0;
|
|
517
|
+
}
|
|
518
|
+
onCategoryChange(categories) {
|
|
519
|
+
this.selectedCategories = categories;
|
|
520
|
+
this.loadTags(categories);
|
|
521
|
+
this.selectedTags = [];
|
|
522
|
+
this.knowledgeStepIndex = categories.length ? 2 : 1;
|
|
523
|
+
}
|
|
524
|
+
onTagChange(tags) {
|
|
525
|
+
this.knowledgeStepIndex = tags.length ? 2 : 1;
|
|
526
|
+
}
|
|
527
|
+
// 获取分类
|
|
528
|
+
loadTypes() {
|
|
403
529
|
this.httpService
|
|
404
|
-
.get(`${this.storeService.getBaseUrl()}/api/ChatModel/
|
|
405
|
-
.subscribe(
|
|
406
|
-
this.
|
|
530
|
+
.get(`${this.storeService.getBaseUrl()}/api/ChatModel/knowledgeTypes`)
|
|
531
|
+
.subscribe(res => {
|
|
532
|
+
this.typesData = res;
|
|
407
533
|
});
|
|
408
534
|
}
|
|
535
|
+
// 获取目录
|
|
536
|
+
loadCategories(types) {
|
|
537
|
+
this.httpService
|
|
538
|
+
.post(`${this.storeService.getBaseUrl()}/api/ChatModel/knowledge/catalogs`, {
|
|
539
|
+
types: this.selectedTypes,
|
|
540
|
+
})
|
|
541
|
+
.subscribe(res => {
|
|
542
|
+
this.categoriesData = this.convertToTree(res);
|
|
543
|
+
});
|
|
544
|
+
}
|
|
545
|
+
loadTags(categories) {
|
|
546
|
+
this.httpService
|
|
547
|
+
.post(`${this.storeService.getBaseUrl()}/api/ChatModel/knowledge/tags`, {
|
|
548
|
+
catalog: categories,
|
|
549
|
+
})
|
|
550
|
+
.subscribe(res => {
|
|
551
|
+
this.tagsData = res;
|
|
552
|
+
});
|
|
553
|
+
}
|
|
554
|
+
convertToTree(data) {
|
|
555
|
+
if (Array.isArray(data)) {
|
|
556
|
+
return data.map(item => convertNode(item));
|
|
557
|
+
}
|
|
558
|
+
function convertNode(node) {
|
|
559
|
+
let result = {
|
|
560
|
+
title: node.name || '',
|
|
561
|
+
value: node.iCode,
|
|
562
|
+
key: node.iCode,
|
|
563
|
+
};
|
|
564
|
+
if (node.children && node.children.length > 0) {
|
|
565
|
+
result.children = node.children.map((child) => convertNode(child));
|
|
566
|
+
}
|
|
567
|
+
else {
|
|
568
|
+
result.children = [];
|
|
569
|
+
}
|
|
570
|
+
return result;
|
|
571
|
+
}
|
|
572
|
+
return convertNode(data); // 如果是单个对象
|
|
573
|
+
}
|
|
409
574
|
modelVisibleChange(value) {
|
|
410
575
|
this.modelPopoverVisible = value;
|
|
411
576
|
}
|
|
@@ -457,8 +622,11 @@ class ChatInputComponent {
|
|
|
457
622
|
model: this.currentModel?.iCode ?? '',
|
|
458
623
|
think: this.deepThink,
|
|
459
624
|
question: msg.question,
|
|
460
|
-
|
|
461
|
-
|
|
625
|
+
parameter: {
|
|
626
|
+
type: this.selectedTypes,
|
|
627
|
+
catalogs: this.selectedCategories,
|
|
628
|
+
tags: this.selectedTags,
|
|
629
|
+
},
|
|
462
630
|
};
|
|
463
631
|
this.sendMessage.emit({ message, isRegenerate: true });
|
|
464
632
|
}
|
|
@@ -474,18 +642,21 @@ class ChatInputComponent {
|
|
|
474
642
|
model: this.currentModel?.iCode ?? '',
|
|
475
643
|
think: this.deepThink,
|
|
476
644
|
question: text,
|
|
477
|
-
|
|
478
|
-
|
|
645
|
+
parameter: {
|
|
646
|
+
type: this.selectedTypes,
|
|
647
|
+
catalogs: this.selectedCategories,
|
|
648
|
+
tags: this.selectedTags,
|
|
649
|
+
},
|
|
479
650
|
};
|
|
480
651
|
this.clearInput();
|
|
481
652
|
this.sendMessage.emit({ message, isRegenerate: false });
|
|
482
653
|
}
|
|
483
654
|
}
|
|
484
655
|
ChatInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
485
|
-
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\">{{ 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" }] });
|
|
656
|
+
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" }] });
|
|
486
657
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatInputComponent, decorators: [{
|
|
487
658
|
type: Component,
|
|
488
|
-
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\">{{ 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"] }]
|
|
659
|
+
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"] }]
|
|
489
660
|
}], propDecorators: { editor: [{
|
|
490
661
|
type: ViewChild,
|
|
491
662
|
args: ['editorRef']
|
|
@@ -494,6 +665,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
494
665
|
args: ['chatInputWrapper']
|
|
495
666
|
}], messages: [{
|
|
496
667
|
type: Input
|
|
668
|
+
}], mode: [{
|
|
669
|
+
type: Input
|
|
497
670
|
}], sendMessage: [{
|
|
498
671
|
type: Output
|
|
499
672
|
}], messageChange: [{
|
|
@@ -702,7 +875,7 @@ class ChatMessagesComponent {
|
|
|
702
875
|
}
|
|
703
876
|
}
|
|
704
877
|
ChatMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatMessagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
705
|
-
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: [
|
|
878
|
+
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: [
|
|
706
879
|
trigger('expandCollapse', [
|
|
707
880
|
state('collapsed', style({ height: '0px', opacity: 0 })),
|
|
708
881
|
state('expanded', style({ height: '*', opacity: 1 })),
|
|
@@ -717,7 +890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
717
890
|
state('expanded', style({ height: '*', opacity: 1 })),
|
|
718
891
|
transition('expanded <=> collapsed', animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
719
892
|
]),
|
|
720
|
-
], 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"] }]
|
|
893
|
+
], 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"] }]
|
|
721
894
|
}], propDecorators: { messages: [{
|
|
722
895
|
type: Input
|
|
723
896
|
}], messagesContainer: [{
|
|
@@ -727,103 +900,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
727
900
|
type: Output
|
|
728
901
|
}] } });
|
|
729
902
|
|
|
730
|
-
class HttpService {
|
|
731
|
-
constructor() {
|
|
732
|
-
this.http = inject(HttpClient);
|
|
733
|
-
this.storeService = inject(StoreService);
|
|
734
|
-
this.BASE_URL = '/api'; // 或者完整域名
|
|
735
|
-
}
|
|
736
|
-
/**
|
|
737
|
-
* 统一获取 Headers
|
|
738
|
-
*/
|
|
739
|
-
getHeaders() {
|
|
740
|
-
return new HttpHeaders({
|
|
741
|
-
'Content-Type': 'application/json',
|
|
742
|
-
Authorization: `${this.storeService.getToken()}`,
|
|
743
|
-
});
|
|
744
|
-
}
|
|
745
|
-
/**
|
|
746
|
-
* GET 请求
|
|
747
|
-
*/
|
|
748
|
-
get(url, params) {
|
|
749
|
-
return this.http.get(this.formatUrl(url), {
|
|
750
|
-
headers: this.getHeaders(),
|
|
751
|
-
params: this.resolveParams(params),
|
|
752
|
-
});
|
|
753
|
-
}
|
|
754
|
-
/**
|
|
755
|
-
* POST 请求
|
|
756
|
-
*/
|
|
757
|
-
post(url, body) {
|
|
758
|
-
return this.http.post(this.formatUrl(url), body, {
|
|
759
|
-
headers: this.getHeaders(),
|
|
760
|
-
});
|
|
761
|
-
}
|
|
762
|
-
/**
|
|
763
|
-
* PUT 请求
|
|
764
|
-
*/
|
|
765
|
-
put(url, body) {
|
|
766
|
-
return this.http.put(this.formatUrl(url), body, {
|
|
767
|
-
headers: this.getHeaders(),
|
|
768
|
-
});
|
|
769
|
-
}
|
|
770
|
-
/**
|
|
771
|
-
* DELETE 请求
|
|
772
|
-
* 兼容支持:既支持 URL 参数,也支持 Body
|
|
773
|
-
*/
|
|
774
|
-
delete(url, params, body) {
|
|
775
|
-
return this.http.request('DELETE', this.formatUrl(url), {
|
|
776
|
-
headers: this.getHeaders(),
|
|
777
|
-
params: this.resolveParams(params),
|
|
778
|
-
body: body, // HttpClient 的 delete() 方法默认不支持 body,需用 request() 通用方法
|
|
779
|
-
});
|
|
780
|
-
}
|
|
781
|
-
// ================= 私有辅助方法 =================
|
|
782
|
-
/**
|
|
783
|
-
* 统一处理 URL
|
|
784
|
-
* 比如自动拼接 BaseUrl,或者处理斜杠
|
|
785
|
-
*/
|
|
786
|
-
formatUrl(url) {
|
|
787
|
-
if (url.startsWith('http'))
|
|
788
|
-
return url;
|
|
789
|
-
// 确保拼接顺滑
|
|
790
|
-
const baseUrl = this.storeService.getBaseUrl();
|
|
791
|
-
const cleanBase = baseUrl.replace(/\/$/, '');
|
|
792
|
-
const cleanUrl = url.startsWith('/') ? url : `/${url}`;
|
|
793
|
-
return `${cleanBase}${cleanUrl}`;
|
|
794
|
-
}
|
|
795
|
-
/**
|
|
796
|
-
* 统一清洗参数
|
|
797
|
-
* 过滤掉 null 和 undefined,防止传给后端 "null" 字符串
|
|
798
|
-
*/
|
|
799
|
-
resolveParams(params) {
|
|
800
|
-
let httpParams = new HttpParams();
|
|
801
|
-
if (params) {
|
|
802
|
-
Object.keys(params).forEach(key => {
|
|
803
|
-
const value = params[key];
|
|
804
|
-
if (value !== null && value !== undefined) {
|
|
805
|
-
if (Array.isArray(value)) {
|
|
806
|
-
// 支持数组参数 ids: [1, 2] => ids=1&ids=2
|
|
807
|
-
value.forEach(val => (httpParams = httpParams.append(key, val)));
|
|
808
|
-
}
|
|
809
|
-
else {
|
|
810
|
-
httpParams = httpParams.set(key, value);
|
|
811
|
-
}
|
|
812
|
-
}
|
|
813
|
-
});
|
|
814
|
-
}
|
|
815
|
-
return httpParams;
|
|
816
|
-
}
|
|
817
|
-
}
|
|
818
|
-
HttpService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HttpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
819
|
-
HttpService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HttpService, providedIn: 'root' });
|
|
820
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HttpService, decorators: [{
|
|
821
|
-
type: Injectable,
|
|
822
|
-
args: [{
|
|
823
|
-
providedIn: 'root',
|
|
824
|
-
}]
|
|
825
|
-
}] });
|
|
826
|
-
|
|
827
903
|
class HistoryGroupComponent {
|
|
828
904
|
constructor() {
|
|
829
905
|
this.select = new EventEmitter();
|
|
@@ -943,6 +1019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
943
1019
|
// chat-sidebar.component.ts
|
|
944
1020
|
class ChatSidebarComponent {
|
|
945
1021
|
constructor() {
|
|
1022
|
+
this.mode = 'full';
|
|
946
1023
|
this.http = inject(HttpService$1);
|
|
947
1024
|
this.storeService = inject(StoreService);
|
|
948
1025
|
this.isCollapsed = false;
|
|
@@ -1026,7 +1103,7 @@ class ChatSidebarComponent {
|
|
|
1026
1103
|
}
|
|
1027
1104
|
}
|
|
1028
1105
|
ChatSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1029
|
-
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
|
|
1106
|
+
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: [
|
|
1030
1107
|
trigger('logoActionsAnimation', [
|
|
1031
1108
|
transition(':enter', [
|
|
1032
1109
|
style({ opacity: 0, transform: 'translateX(20px)' }),
|
|
@@ -1045,8 +1122,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1045
1122
|
]),
|
|
1046
1123
|
transition(':leave', [animate('0ms ease-in', style({ opacity: 0, transform: 'translateX(20px)' }))]),
|
|
1047
1124
|
]),
|
|
1048
|
-
], 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
|
|
1049
|
-
}], propDecorators: {
|
|
1125
|
+
], 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"] }]
|
|
1126
|
+
}], propDecorators: { mode: [{
|
|
1127
|
+
type: Input
|
|
1128
|
+
}], historyGroupRef: [{
|
|
1050
1129
|
type: ViewChild,
|
|
1051
1130
|
args: ['historyGroupRef']
|
|
1052
1131
|
}] } });
|
|
@@ -1160,10 +1239,10 @@ class NgxAgentChatComponent {
|
|
|
1160
1239
|
}
|
|
1161
1240
|
}
|
|
1162
1241
|
NgxAgentChatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgxAgentChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1163
|
-
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
|
|
1242
|
+
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"] }] });
|
|
1164
1243
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgxAgentChatComponent, decorators: [{
|
|
1165
1244
|
type: Component,
|
|
1166
|
-
args: [{ selector: 'ngx-agent-chat', template: "<div class=\"qq-agent\">\n
|
|
1245
|
+
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"] }]
|
|
1167
1246
|
}], propDecorators: { baseUrl: [{
|
|
1168
1247
|
type: Input
|
|
1169
1248
|
}], token: [{
|
|
@@ -1179,6 +1258,221 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1179
1258
|
args: ['chatInputRef']
|
|
1180
1259
|
}] } });
|
|
1181
1260
|
|
|
1261
|
+
class FloatingChatComponent {
|
|
1262
|
+
constructor() {
|
|
1263
|
+
// 状态变量,用于控制组件的显示和动画
|
|
1264
|
+
this.isExpanded = false;
|
|
1265
|
+
// 标题
|
|
1266
|
+
this.title = 'AI-青清水利';
|
|
1267
|
+
/**
|
|
1268
|
+
* 接口baseUrl配置
|
|
1269
|
+
*/
|
|
1270
|
+
this.baseUrl = 'http://39.102.56.254:8082';
|
|
1271
|
+
this.token = '';
|
|
1272
|
+
this.md = inject(MarkdownStreamService);
|
|
1273
|
+
this.httpService = inject(HttpService$1);
|
|
1274
|
+
this.sseService = inject(SseService);
|
|
1275
|
+
this.storeService = inject(StoreService);
|
|
1276
|
+
this.sanitizer = inject(DomSanitizer);
|
|
1277
|
+
this.ngZone = inject(NgZone);
|
|
1278
|
+
this.messages = []; // 消息数组
|
|
1279
|
+
// 历史对话
|
|
1280
|
+
this.modelPopoverVisible = false;
|
|
1281
|
+
}
|
|
1282
|
+
/**
|
|
1283
|
+
* 切换聊天框的展开/收起状态
|
|
1284
|
+
*/
|
|
1285
|
+
toggleChatBox() {
|
|
1286
|
+
this.isExpanded = !this.isExpanded;
|
|
1287
|
+
}
|
|
1288
|
+
ngOnInit() {
|
|
1289
|
+
this.storeService.setToken(this.token);
|
|
1290
|
+
this.storeService.setBaseUrl(this.baseUrl);
|
|
1291
|
+
this.sseService.conversationICode$.subscribe(iCodeObj => {
|
|
1292
|
+
if (iCodeObj) {
|
|
1293
|
+
const currentMsg = this.messages[this.messages.length - 1];
|
|
1294
|
+
currentMsg.iCode = iCodeObj.question;
|
|
1295
|
+
currentMsg.answers[currentMsg.answerIndex].iCode = iCodeObj.answer;
|
|
1296
|
+
}
|
|
1297
|
+
});
|
|
1298
|
+
this.sseService.thinking$.subscribe(text => {
|
|
1299
|
+
if (this.messages.length > 0) {
|
|
1300
|
+
const currentMsg = this.messages[this.messages.length - 1];
|
|
1301
|
+
currentMsg.answers[currentMsg.answerIndex].think = text;
|
|
1302
|
+
}
|
|
1303
|
+
});
|
|
1304
|
+
this.sseService.currentMessage$.subscribe(text => {
|
|
1305
|
+
if (this.messages.length > 0) {
|
|
1306
|
+
const currentMsg = this.messages[this.messages.length - 1];
|
|
1307
|
+
currentMsg.answers[currentMsg.answerIndex].content = text;
|
|
1308
|
+
}
|
|
1309
|
+
});
|
|
1310
|
+
this.storeService.currentConversation$.subscribe(conversation => {
|
|
1311
|
+
if (!conversation) {
|
|
1312
|
+
this.messages = [];
|
|
1313
|
+
return;
|
|
1314
|
+
}
|
|
1315
|
+
this.httpService
|
|
1316
|
+
.get(`${this.storeService.getBaseUrl()}/api/ChatModel/conversation/questions`, { iCode: conversation?.iCode })
|
|
1317
|
+
.subscribe((res) => {
|
|
1318
|
+
this.messages = res.map(item => {
|
|
1319
|
+
item.answerIndex = 0;
|
|
1320
|
+
item.answers.forEach(answer => {
|
|
1321
|
+
answer.thinkExpand = true;
|
|
1322
|
+
});
|
|
1323
|
+
return item;
|
|
1324
|
+
});
|
|
1325
|
+
});
|
|
1326
|
+
});
|
|
1327
|
+
}
|
|
1328
|
+
ngAfterViewInit() {
|
|
1329
|
+
this.resizeObserver = new ResizeObserver(entries => {
|
|
1330
|
+
for (let entry of entries) {
|
|
1331
|
+
const newHeight = entry.contentRect.height;
|
|
1332
|
+
this.ngZone.run(() => {
|
|
1333
|
+
this.chatMessagesRef.inputHeight = newHeight + 60;
|
|
1334
|
+
});
|
|
1335
|
+
}
|
|
1336
|
+
});
|
|
1337
|
+
// 开始监听输入框元素
|
|
1338
|
+
this.resizeObserver.observe(this.chatInputRef.chatInputWrapper.nativeElement);
|
|
1339
|
+
}
|
|
1340
|
+
modelVisibleChange(value) {
|
|
1341
|
+
this.modelPopoverVisible = value;
|
|
1342
|
+
}
|
|
1343
|
+
// 打开新对话
|
|
1344
|
+
openNewChat() {
|
|
1345
|
+
this.storeService.setCurrentConversation(null);
|
|
1346
|
+
}
|
|
1347
|
+
// 重新生成回答(仅最新的回答允许重新生成)
|
|
1348
|
+
regenerateAnswer(msg) {
|
|
1349
|
+
this.chatInputRef.regenerateSend(msg);
|
|
1350
|
+
}
|
|
1351
|
+
// 发起提问请求
|
|
1352
|
+
onSendMessage(event) {
|
|
1353
|
+
if (!event.isRegenerate) {
|
|
1354
|
+
// 推入一个新问答,iCode在流接收到补上
|
|
1355
|
+
const qa = {
|
|
1356
|
+
iCode: '',
|
|
1357
|
+
question: event.message.question,
|
|
1358
|
+
answers: [
|
|
1359
|
+
{
|
|
1360
|
+
iCode: '',
|
|
1361
|
+
think: '',
|
|
1362
|
+
content: '',
|
|
1363
|
+
thinkExpand: true,
|
|
1364
|
+
},
|
|
1365
|
+
],
|
|
1366
|
+
answerIndex: 0,
|
|
1367
|
+
};
|
|
1368
|
+
this.messages.push(qa);
|
|
1369
|
+
}
|
|
1370
|
+
else {
|
|
1371
|
+
const latestMessage = this.messages[this.messages.length - 1];
|
|
1372
|
+
latestMessage.answers.push({
|
|
1373
|
+
iCode: '',
|
|
1374
|
+
think: '',
|
|
1375
|
+
content: '',
|
|
1376
|
+
thinkExpand: true,
|
|
1377
|
+
});
|
|
1378
|
+
latestMessage.answerIndex = latestMessage.answers.length - 1;
|
|
1379
|
+
}
|
|
1380
|
+
this.sseService.streamChat(event.message).then(res => {
|
|
1381
|
+
// 开启新对话,刷新左侧历史对话
|
|
1382
|
+
if (!event.message.conversation) {
|
|
1383
|
+
this.chatSidebarRef.getHistory(true);
|
|
1384
|
+
}
|
|
1385
|
+
});
|
|
1386
|
+
}
|
|
1387
|
+
}
|
|
1388
|
+
FloatingChatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1389
|
+
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: [
|
|
1390
|
+
// 定义容器的展开/收起动画
|
|
1391
|
+
trigger('chatBoxState', [
|
|
1392
|
+
state('collapsed', style({
|
|
1393
|
+
opacity: 0,
|
|
1394
|
+
transform: 'scale(0.8) translateY(20px)',
|
|
1395
|
+
display: 'none',
|
|
1396
|
+
// visibility: 'hidden',
|
|
1397
|
+
width: '660px',
|
|
1398
|
+
height: '820px', // 保持高度一致,但不可见
|
|
1399
|
+
})),
|
|
1400
|
+
state('expanded', style({
|
|
1401
|
+
opacity: 1,
|
|
1402
|
+
transform: 'scale(1) translateY(0)',
|
|
1403
|
+
display: 'flex',
|
|
1404
|
+
// visibility: 'visible',
|
|
1405
|
+
width: '660px',
|
|
1406
|
+
height: '820px',
|
|
1407
|
+
})),
|
|
1408
|
+
transition('collapsed <=> expanded', [
|
|
1409
|
+
animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)'), // 贝塞尔曲线提供更自然的动画
|
|
1410
|
+
]),
|
|
1411
|
+
]),
|
|
1412
|
+
// 定义悬浮按钮的旋转动画
|
|
1413
|
+
trigger('buttonIconState', [
|
|
1414
|
+
state('collapsed', style({
|
|
1415
|
+
transform: 'rotate(0deg)',
|
|
1416
|
+
})),
|
|
1417
|
+
state('expanded', style({
|
|
1418
|
+
transform: 'rotate(0deg)', // 展开时,X图标旋转45度
|
|
1419
|
+
})),
|
|
1420
|
+
transition('collapsed <=> expanded', [animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)')]),
|
|
1421
|
+
]),
|
|
1422
|
+
] });
|
|
1423
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingChatComponent, decorators: [{
|
|
1424
|
+
type: Component,
|
|
1425
|
+
args: [{ selector: 'ngx-agent-floating-chat', animations: [
|
|
1426
|
+
// 定义容器的展开/收起动画
|
|
1427
|
+
trigger('chatBoxState', [
|
|
1428
|
+
state('collapsed', style({
|
|
1429
|
+
opacity: 0,
|
|
1430
|
+
transform: 'scale(0.8) translateY(20px)',
|
|
1431
|
+
display: 'none',
|
|
1432
|
+
// visibility: 'hidden',
|
|
1433
|
+
width: '660px',
|
|
1434
|
+
height: '820px', // 保持高度一致,但不可见
|
|
1435
|
+
})),
|
|
1436
|
+
state('expanded', style({
|
|
1437
|
+
opacity: 1,
|
|
1438
|
+
transform: 'scale(1) translateY(0)',
|
|
1439
|
+
display: 'flex',
|
|
1440
|
+
// visibility: 'visible',
|
|
1441
|
+
width: '660px',
|
|
1442
|
+
height: '820px',
|
|
1443
|
+
})),
|
|
1444
|
+
transition('collapsed <=> expanded', [
|
|
1445
|
+
animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)'), // 贝塞尔曲线提供更自然的动画
|
|
1446
|
+
]),
|
|
1447
|
+
]),
|
|
1448
|
+
// 定义悬浮按钮的旋转动画
|
|
1449
|
+
trigger('buttonIconState', [
|
|
1450
|
+
state('collapsed', style({
|
|
1451
|
+
transform: 'rotate(0deg)',
|
|
1452
|
+
})),
|
|
1453
|
+
state('expanded', style({
|
|
1454
|
+
transform: 'rotate(0deg)', // 展开时,X图标旋转45度
|
|
1455
|
+
})),
|
|
1456
|
+
transition('collapsed <=> expanded', [animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)')]),
|
|
1457
|
+
]),
|
|
1458
|
+
], 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"] }]
|
|
1459
|
+
}], propDecorators: { title: [{
|
|
1460
|
+
type: Input
|
|
1461
|
+
}], baseUrl: [{
|
|
1462
|
+
type: Input
|
|
1463
|
+
}], token: [{
|
|
1464
|
+
type: Input
|
|
1465
|
+
}], chatSidebarRef: [{
|
|
1466
|
+
type: ViewChild,
|
|
1467
|
+
args: ['chatSidebarRef']
|
|
1468
|
+
}], chatMessagesRef: [{
|
|
1469
|
+
type: ViewChild,
|
|
1470
|
+
args: ['chatMessagesRef']
|
|
1471
|
+
}], chatInputRef: [{
|
|
1472
|
+
type: ViewChild,
|
|
1473
|
+
args: ['chatInputRef']
|
|
1474
|
+
}] } });
|
|
1475
|
+
|
|
1182
1476
|
class AgentChatModule {
|
|
1183
1477
|
}
|
|
1184
1478
|
AgentChatModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AgentChatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -1187,7 +1481,8 @@ AgentChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
|
|
|
1187
1481
|
ChatMessagesComponent,
|
|
1188
1482
|
ChatSidebarComponent,
|
|
1189
1483
|
SimplePaginationComponent,
|
|
1190
|
-
HistoryGroupComponent
|
|
1484
|
+
HistoryGroupComponent,
|
|
1485
|
+
FloatingChatComponent], imports: [CommonModule,
|
|
1191
1486
|
NzAvatarModule,
|
|
1192
1487
|
NzSpinModule,
|
|
1193
1488
|
NzTagModule,
|
|
@@ -1201,8 +1496,11 @@ AgentChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
|
|
|
1201
1496
|
NzCheckboxModule,
|
|
1202
1497
|
NzIconModule,
|
|
1203
1498
|
NzPaginationModule,
|
|
1499
|
+
NzStepsModule,
|
|
1500
|
+
NzSelectModule,
|
|
1501
|
+
NzTreeSelectModule,
|
|
1204
1502
|
FormsModule,
|
|
1205
|
-
MarkdownPipe], exports: [NgxAgentChatComponent] });
|
|
1503
|
+
MarkdownPipe], exports: [NgxAgentChatComponent, FloatingChatComponent, FloatingChatComponent] });
|
|
1206
1504
|
AgentChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AgentChatModule, providers: [NzMessageService], imports: [CommonModule,
|
|
1207
1505
|
NzAvatarModule,
|
|
1208
1506
|
NzSpinModule,
|
|
@@ -1217,6 +1515,9 @@ AgentChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
|
|
|
1217
1515
|
NzCheckboxModule,
|
|
1218
1516
|
NzIconModule,
|
|
1219
1517
|
NzPaginationModule,
|
|
1518
|
+
NzStepsModule,
|
|
1519
|
+
NzSelectModule,
|
|
1520
|
+
NzTreeSelectModule,
|
|
1220
1521
|
FormsModule] });
|
|
1221
1522
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AgentChatModule, decorators: [{
|
|
1222
1523
|
type: NgModule,
|
|
@@ -1228,6 +1529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1228
1529
|
ChatSidebarComponent,
|
|
1229
1530
|
SimplePaginationComponent,
|
|
1230
1531
|
HistoryGroupComponent,
|
|
1532
|
+
FloatingChatComponent,
|
|
1231
1533
|
],
|
|
1232
1534
|
imports: [
|
|
1233
1535
|
CommonModule,
|
|
@@ -1244,11 +1546,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1244
1546
|
NzCheckboxModule,
|
|
1245
1547
|
NzIconModule,
|
|
1246
1548
|
NzPaginationModule,
|
|
1549
|
+
NzStepsModule,
|
|
1550
|
+
NzSelectModule,
|
|
1551
|
+
NzTreeSelectModule,
|
|
1247
1552
|
FormsModule,
|
|
1248
1553
|
MarkdownPipe,
|
|
1249
1554
|
],
|
|
1250
1555
|
providers: [NzMessageService],
|
|
1251
|
-
exports: [NgxAgentChatComponent],
|
|
1556
|
+
exports: [NgxAgentChatComponent, FloatingChatComponent, FloatingChatComponent],
|
|
1252
1557
|
}]
|
|
1253
1558
|
}] });
|
|
1254
1559
|
|
|
@@ -1256,5 +1561,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1256
1561
|
* Generated bundle index. Do not edit.
|
|
1257
1562
|
*/
|
|
1258
1563
|
|
|
1259
|
-
export { AgentChatModule, NgxAgentChatComponent };
|
|
1564
|
+
export { AgentChatModule, FloatingChatComponent, NgxAgentChatComponent };
|
|
1260
1565
|
//# sourceMappingURL=qqsl-agent-chat.mjs.map
|