qqsl-agent 0.0.3 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/images/floating/arrow-down.png +0 -0
- package/assets/images/floating/history-menu.png +0 -0
- package/assets/images/floating/new-chat.png +0 -0
- package/assets/styles/index.css +6 -1
- package/chat/chat-input/chat-input.component.d.ts +18 -4
- package/chat/chat-sidebar/chat-sidebar.component.d.ts +2 -1
- package/chat/chat.module.d.ts +21 -17
- package/chat/floating-chat/floating-chat.component.d.ts +43 -0
- package/chat/models/knowledge-list.model.d.ts +14 -0
- package/chat/models/send-message.model.d.ts +15 -6
- package/chat/public-api.d.ts +1 -0
- package/esm2020/chat/chat-input/chat-input.component.mjs +92 -22
- package/esm2020/chat/chat-messages/chat-messages.component.mjs +3 -3
- package/esm2020/chat/chat-sidebar/chat-sidebar.component.mjs +8 -5
- package/esm2020/chat/chat.component.mjs +3 -3
- package/esm2020/chat/chat.module.mjs +19 -4
- package/esm2020/chat/floating-chat/floating-chat.component.mjs +228 -0
- package/esm2020/chat/models/knowledge-list.model.mjs +1 -1
- package/esm2020/chat/models/send-message.model.mjs +1 -1
- package/esm2020/chat/public-api.mjs +2 -1
- package/fesm2015/qqsl-agent-chat.mjs +432 -130
- package/fesm2015/qqsl-agent-chat.mjs.map +1 -1
- package/fesm2020/qqsl-agent-chat.mjs +432 -130
- package/fesm2020/qqsl-agent-chat.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -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,50 +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.
|
|
407
|
-
item.checked = false;
|
|
408
|
-
return item;
|
|
409
|
-
});
|
|
530
|
+
.get(`${this.storeService.getBaseUrl()}/api/ChatModel/knowledgeTypes`)
|
|
531
|
+
.subscribe(res => {
|
|
532
|
+
this.typesData = res;
|
|
410
533
|
});
|
|
411
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
|
+
}
|
|
412
574
|
modelVisibleChange(value) {
|
|
413
575
|
this.modelPopoverVisible = value;
|
|
414
576
|
}
|
|
@@ -460,8 +622,11 @@ class ChatInputComponent {
|
|
|
460
622
|
model: this.currentModel?.iCode ?? '',
|
|
461
623
|
think: this.deepThink,
|
|
462
624
|
question: msg.question,
|
|
463
|
-
|
|
464
|
-
|
|
625
|
+
parameter: {
|
|
626
|
+
type: this.selectedTypes,
|
|
627
|
+
catalogs: this.selectedCategories,
|
|
628
|
+
tags: this.selectedTags,
|
|
629
|
+
},
|
|
465
630
|
};
|
|
466
631
|
this.sendMessage.emit({ message, isRegenerate: true });
|
|
467
632
|
}
|
|
@@ -477,18 +642,21 @@ class ChatInputComponent {
|
|
|
477
642
|
model: this.currentModel?.iCode ?? '',
|
|
478
643
|
think: this.deepThink,
|
|
479
644
|
question: text,
|
|
480
|
-
|
|
481
|
-
|
|
645
|
+
parameter: {
|
|
646
|
+
type: this.selectedTypes,
|
|
647
|
+
catalogs: this.selectedCategories,
|
|
648
|
+
tags: this.selectedTags,
|
|
649
|
+
},
|
|
482
650
|
};
|
|
483
651
|
this.clearInput();
|
|
484
652
|
this.sendMessage.emit({ message, isRegenerate: false });
|
|
485
653
|
}
|
|
486
654
|
}
|
|
487
655
|
ChatInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
488
|
-
ChatInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChatInputComponent, selector: "ngx-chat-input", inputs: { messages: "messages" }, outputs: { sendMessage: "sendMessage", messageChange: "messageChange", enter: "enter", paste: "paste" }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editorRef"], descendants: true }, { propertyName: "chatInputWrapper", first: true, predicate: ["chatInputWrapper"], descendants: true }], ngImport: i0, template: "<!-- \u65B0\u804A\u5929\u4F4D\u4E8E\u5C4F\u5E55\u4E2D\u95F4\uFF0C\u53D1\u9001\u6D88\u606F\u4E4B\u540E\u4F4D\u4E8E\u5E95\u90E8 -->\n<div class=\"chat-input-wrapper\" #chatInputWrapper [class.center]=\"!messages.length\">\n <div class=\"new-chat-title\" *ngIf=\"!messages.length\">\n <img src=\"/assets/images/logo.png\" />\n <span>\u4F60\u597D\uFF0C\u6709\u4EC0\u4E48\u53EF\u4EE5\u5E2E\u5230\u4F60\uFF1F\u5F00\u59CB\u5BF9\u8BDD\u5427</span>\n </div>\n <div class=\"chat-input\">\n <div\n #editorRef\n class=\"input-creative-editor\"\n contenteditable=\"true\"\n spellcheck=\"false\"\n data-placeholder=\"\u8BF7\u8F93\u5165\u5E76\u53D1\u9001\u6D88\u606F\"\n [attr.data-empty]=\"isEmpty\"\n (input)=\"handleInput()\"\n (keydown.enter)=\"handleEnter($event)\"\n (paste)=\"handlePaste($event)\"\n ></div>\n <div class=\"input-bottom\">\n <div class=\"input-tools\">\n <div class=\"select-tool\" [ngClass]=\"{ 'select-tool-active': deepThink }\" (click)=\"toggleDeepThink()\">\n <svg\n t=\"1764131026949\"\n style=\"width: 14px; height: 14px\"\n class=\"icon\"\n viewBox=\"0 0 1024 1024\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n p-id=\"5012\"\n width=\"64\"\n height=\"64\"\n >\n <path\n d=\"M903.36 512a795.52 795.52 0 0 1 65.536 136.704c48 132.16 39.616 230.528-25.024 295.168-64.64 64.64-163.008 72.96-295.168 24.96A795.52 795.52 0 0 1 512 903.424a795.52 795.52 0 0 1-136.704 65.536c-132.096 48-230.528 39.616-295.168-25.024-64.64-64.64-72.96-163.008-24.96-295.104 16.64-46.016 38.528-91.52 65.536-136.768A795.52 795.52 0 0 1 55.04 375.232C7.04 243.2 15.36 144.768 80 80.128 144.768 15.488 243.2 7.168 375.296 55.04c46.016 16.64 91.584 38.528 136.768 65.536A795.52 795.52 0 0 1 648.768 55.104c132.096-48 230.464-39.616 295.104 25.024 64.64 64.64 72.96 163.008 25.024 295.104A795.52 795.52 0 0 1 903.36 512z m-53.12-79.424c15.168-28.736 27.968-57.536 38.464-86.4 35.584-98.112 33.92-166.656-5.12-205.696-39.04-39.04-107.648-40.768-205.696-5.12a685.44 685.44 0 0 0-86.4 38.4 1240.96 1240.96 0 0 1 138.432 120.32 1240.832 1240.832 0 0 1 120.32 138.496zM432.576 173.824a685.44 685.44 0 0 0-86.4-38.528c-98.112-35.584-166.656-33.92-205.696 5.12-39.04 39.04-40.768 107.648-5.12 205.696 10.432 28.928 23.296 57.728 38.4 86.4a1240.896 1240.896 0 0 1 120.32-138.432 1240.832 1240.832 0 0 1 138.496-120.32zM173.824 591.488a685.44 685.44 0 0 0-38.464 86.4c-35.648 98.048-33.92 166.592 5.12 205.632 39.04 39.04 107.584 40.768 205.696 5.12a685.44 685.44 0 0 0 86.4-38.4 1240.768 1240.768 0 0 1-138.496-120.32 1240.96 1240.96 0 0 1-120.256-138.432z m495.744 78.08A1112.064 1112.064 0 0 0 802.048 512a1112.064 1112.064 0 0 0-132.48-157.568A1112.128 1112.128 0 0 0 512 221.952a1112.128 1112.128 0 0 0-157.504 132.48A1112.064 1112.064 0 0 0 222.016 512a1112.192 1112.192 0 0 0 132.416 157.568A1112.064 1112.064 0 0 0 512 802.048a1112.128 1112.128 0 0 0 157.568-132.48z m-78.08 180.608c28.672 15.168 57.472 28.032 86.4 38.464 98.048 35.648 166.592 33.92 205.632-5.12 39.04-39.04 40.768-107.584 5.12-205.696a685.504 685.504 0 0 0-38.4-86.4 1240.832 1240.832 0 0 1-120.32 138.496 1240.96 1240.96 0 0 1-138.432 120.32zM585.088 512a73.152 73.152 0 1 1-146.24 0 73.152 73.152 0 0 1 146.304 0z\"\n fill=\"currentColor\"\n p-id=\"5013\"\n ></path>\n </svg>\n \u6DF1\u5EA6\u601D\u8003\n </div>\n <div\n class=\"select-tool\"\n nz-popover\n [nzPopoverContent]=\"modelListContent\"\n nzPopoverTrigger=\"click\"\n nzPopoverOverlayClassName=\"params-select-popover\"\n [nzPopoverVisible]=\"modelPopoverVisible\"\n (nzPopoverVisibleChange)=\"modelVisibleChange($event)\"\n >\n <img src=\"/assets/images/input/toggle-model.png\" style=\"width: 12px; height: 12px\" />\n {{ currentModel ? currentModel?.name : '\u9009\u62E9\u6A21\u578B' }}\n </div>\n <div\n class=\"select-tool\"\n nz-popover\n [nzPopoverContent]=\"knowledgeListContent\"\n nzPopoverTrigger=\"click\"\n nzPopoverOverlayClassName=\"params-select-popover\"\n [nzPopoverVisible]=\"knowledgePopoverVisible\"\n (nzPopoverVisibleChange)=\"knowledgeVisibleChange($event)\"\n >\n <img src=\"/assets/images/input/relate.png\" style=\"width: 14px; height: 8px\" />\n \u5173\u8054\u77E5\u8BC6\u5E93\n </div>\n </div>\n <img class=\"send\" src=\"/assets/images/input/send.png\" (click)=\"send()\" [hidden]=\"sseService.loading$ | async\" />\n <div class=\"send-loading\" *ngIf=\"sseService.loading$ | async\">\n <div class=\"send-loading-inner\">\n <svg viewBox=\"0 0 36 36\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" data-icon=\"spin\">\n <defs>\n <linearGradient x1=\"0%\" y1=\"100%\" x2=\"100%\" y2=\"100%\" id=\"linearGradient-1\">\n <stop stop-color=\"currentColor\" stop-opacity=\"0\" offset=\"0%\"></stop>\n <stop stop-color=\"currentColor\" stop-opacity=\"0.50\" offset=\"39.9430698%\"></stop>\n <stop stop-color=\"currentColor\" offset=\"100%\"></stop>\n </linearGradient>\n </defs>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <rect fill-opacity=\"0.01\" fill=\"none\" x=\"0\" y=\"0\" width=\"36\" height=\"36\"></rect>\n <path\n d=\"M34,18 C34,9.163444 26.836556,2 18,2 C11.6597233,2 6.18078805,5.68784135 3.59122325,11.0354951\"\n stroke=\"url(#linearGradient-1)\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n ></path>\n </g>\n </svg>\n </div>\n </div>\n <!-- <img class=\"send\" src=\"/assets/images/input/send-gray.png\" /> -->\n </div>\n </div>\n <div class=\"chat-input-backdrop\"></div>\n</div>\n\n<ng-template #modelListContent>\n <div style=\"width: 200px\">\n <div class=\"select-title\">\n \u5207\u6362\u6A21\u578B\n <i nz-icon nzType=\"close\" style=\"color: #999\" (click)=\"modelVisibleChange(false)\"></i>\n </div>\n <div class=\"select-content\">\n <nz-radio-group [(ngModel)]=\"currentModel\">\n <label\n nz-radio\n [nzValue]=\"item\"\n [style.margin-top.px]=\"i === 0 ? 0 : 10\"\n *ngFor=\"let item of modelList; let i = index\"\n >\n {{ item.name }}\n </label>\n </nz-radio-group>\n </div>\n </div>\n</ng-template>\n\n<ng-template #knowledgeListContent>\n <div style=\"width: 150px\">\n <div class=\"select-title\">\n \u5173\u8054\u77E5\u8BC6\u5E93\n <i nz-icon nzType=\"close\" style=\"color: #999\" (click)=\"knowledgeVisibleChange(false)\"></i>\n </div>\n <div class=\"select-content\">\n <nz-checkbox-wrapper style=\"width: 100%\" (nzOnChange)=\"knowledgeSelectChange($event)\">\n <div *ngFor=\"let item of knowledgeList\">\n <label nz-checkbox [nzValue]=\"item.iCode\" [(ngModel)]=\"item.checked\">{{ item.name }}</label>\n </div>\n </nz-checkbox-wrapper>\n </div>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.chat-input-wrapper{position:absolute;bottom:0;left:0;right:0;max-width:800px;min-width:350px;margin:0 auto;padding-bottom:40px}.chat-input-wrapper.center{bottom:50%;transform:translateY(50%)}.new-chat-title{display:flex;align-items:center;justify-content:center;padding-bottom:40px;text-align:center;font-weight:500;font-size:24px;color:#000}.new-chat-title img{width:40px;height:32px;margin-right:12px;margin-top:-6px}.chat-input{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:20px 18px;margin:0 auto;background:#FFFFFF;box-shadow:0 2px 8px #0000001a;border-radius:20px;border:1px solid #D9DADB;z-index:30}.chat-input .input-creative-editor{min-height:60px;max-height:300px;overflow-y:auto;outline:none;box-shadow:none;border:none}.chat-input .input-creative-editor[data-empty=true]:before{content:attr(data-placeholder);color:#9a9b9b}.chat-input .input-bottom{padding-top:16px;display:flex;align-items:center;justify-content:space-between;-webkit-user-select:none;user-select:none}.chat-input .input-bottom .input-tools{display:flex;align-items:center;gap:10px}.chat-input .input-bottom .select-tool{display:flex;align-items:center;justify-content:center;height:36px;padding:0 12px;gap:12px;background:#FFFFFF;border-radius:12px;border:1px solid #DBDCE0;cursor:pointer}.chat-input .input-bottom .select-tool-active{border-color:#b7c8fe;color:#3964fe;background:#edf3fe}.chat-input .input-bottom .send{width:32px;height:32px}::ng-deep .params-select-popover .ant-popover-inner{border-radius:10px}::ng-deep .params-select-popover .select-title{display:flex;align-items:center;justify-content:center;position:relative}::ng-deep .params-select-popover .select-title i{position:absolute;right:0;top:3px;cursor:pointer}::ng-deep .params-select-popover .select-content{max-height:200px;padding:16px 0;overflow-y:auto}.chat-input-backdrop{position:absolute;bottom:0;left:0;width:100%;height:100px;z-index:10;background-image:linear-gradient(to bottom,hsl(0,0%,99%),hsla(0,0%,99%,.8))}.send-loading{min-width:34px;height:34px;border-radius:50%;margin-top:auto;display:flex;flex-shrink:0;align-items:center;flex-direction:column;justify-content:center;cursor:not-allowed;white-space:nowrap;color:#fff;background:#3964fe;transition:background .2s;opacity:.4}.send-loading-inner{width:16px;height:16px}.send-loading svg{will-change:transform;animation:.6s linear infinite send-loading}@keyframes send-loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i3.NzPopoverDirective, selector: "[nz-popover]", inputs: ["nzPopoverArrowPointAtCenter", "nzPopoverTitle", "nzPopoverContent", "nz-popover", "nzPopoverTrigger", "nzPopoverPlacement", "nzPopoverOrigin", "nzPopoverVisible", "nzPopoverMouseEnterDelay", "nzPopoverMouseLeaveDelay", "nzPopoverOverlayClassName", "nzPopoverOverlayStyle", "nzPopoverBackdrop"], outputs: ["nzPopoverVisibleChange"], exportAs: ["nzPopover"] }, { kind: "component", type: i4.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus"], exportAs: ["nzRadio"] }, { kind: "component", type: i4.NzRadioGroupComponent, selector: "nz-radio-group", inputs: ["nzDisabled", "nzButtonStyle", "nzSize", "nzName"], exportAs: ["nzRadioGroup"] }, { kind: "component", type: i5.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "component", type: i5.NzCheckboxWrapperComponent, selector: "nz-checkbox-wrapper", outputs: ["nzOnChange"], exportAs: ["nzCheckboxWrapper"] }, { kind: "directive", type: i6.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
|
|
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 nzHideUnMatched\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" }] });
|
|
489
657
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatInputComponent, decorators: [{
|
|
490
658
|
type: Component,
|
|
491
|
-
args: [{ selector: 'ngx-chat-input', template: "<!-- \u65B0\u804A\u5929\u4F4D\u4E8E\u5C4F\u5E55\u4E2D\u95F4\uFF0C\u53D1\u9001\u6D88\u606F\u4E4B\u540E\u4F4D\u4E8E\u5E95\u90E8 -->\n<div class=\"chat-input-wrapper\" #chatInputWrapper [class.center]=\"!messages.length\">\n <div class=\"new-chat-title\" *ngIf=\"!messages.length\">\n <img src=\"/assets/images/logo.png\" />\n <span>\u4F60\u597D\uFF0C\u6709\u4EC0\u4E48\u53EF\u4EE5\u5E2E\u5230\u4F60\uFF1F\u5F00\u59CB\u5BF9\u8BDD\u5427</span>\n </div>\n <div class=\"chat-input\">\n <div\n #editorRef\n class=\"input-creative-editor\"\n contenteditable=\"true\"\n spellcheck=\"false\"\n data-placeholder=\"\u8BF7\u8F93\u5165\u5E76\u53D1\u9001\u6D88\u606F\"\n [attr.data-empty]=\"isEmpty\"\n (input)=\"handleInput()\"\n (keydown.enter)=\"handleEnter($event)\"\n (paste)=\"handlePaste($event)\"\n ></div>\n <div class=\"input-bottom\">\n <div class=\"input-tools\">\n <div class=\"select-tool\" [ngClass]=\"{ 'select-tool-active': deepThink }\" (click)=\"toggleDeepThink()\">\n <svg\n t=\"1764131026949\"\n style=\"width: 14px; height: 14px\"\n class=\"icon\"\n viewBox=\"0 0 1024 1024\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n p-id=\"5012\"\n width=\"64\"\n height=\"64\"\n >\n <path\n d=\"M903.36 512a795.52 795.52 0 0 1 65.536 136.704c48 132.16 39.616 230.528-25.024 295.168-64.64 64.64-163.008 72.96-295.168 24.96A795.52 795.52 0 0 1 512 903.424a795.52 795.52 0 0 1-136.704 65.536c-132.096 48-230.528 39.616-295.168-25.024-64.64-64.64-72.96-163.008-24.96-295.104 16.64-46.016 38.528-91.52 65.536-136.768A795.52 795.52 0 0 1 55.04 375.232C7.04 243.2 15.36 144.768 80 80.128 144.768 15.488 243.2 7.168 375.296 55.04c46.016 16.64 91.584 38.528 136.768 65.536A795.52 795.52 0 0 1 648.768 55.104c132.096-48 230.464-39.616 295.104 25.024 64.64 64.64 72.96 163.008 25.024 295.104A795.52 795.52 0 0 1 903.36 512z m-53.12-79.424c15.168-28.736 27.968-57.536 38.464-86.4 35.584-98.112 33.92-166.656-5.12-205.696-39.04-39.04-107.648-40.768-205.696-5.12a685.44 685.44 0 0 0-86.4 38.4 1240.96 1240.96 0 0 1 138.432 120.32 1240.832 1240.832 0 0 1 120.32 138.496zM432.576 173.824a685.44 685.44 0 0 0-86.4-38.528c-98.112-35.584-166.656-33.92-205.696 5.12-39.04 39.04-40.768 107.648-5.12 205.696 10.432 28.928 23.296 57.728 38.4 86.4a1240.896 1240.896 0 0 1 120.32-138.432 1240.832 1240.832 0 0 1 138.496-120.32zM173.824 591.488a685.44 685.44 0 0 0-38.464 86.4c-35.648 98.048-33.92 166.592 5.12 205.632 39.04 39.04 107.584 40.768 205.696 5.12a685.44 685.44 0 0 0 86.4-38.4 1240.768 1240.768 0 0 1-138.496-120.32 1240.96 1240.96 0 0 1-120.256-138.432z m495.744 78.08A1112.064 1112.064 0 0 0 802.048 512a1112.064 1112.064 0 0 0-132.48-157.568A1112.128 1112.128 0 0 0 512 221.952a1112.128 1112.128 0 0 0-157.504 132.48A1112.064 1112.064 0 0 0 222.016 512a1112.192 1112.192 0 0 0 132.416 157.568A1112.064 1112.064 0 0 0 512 802.048a1112.128 1112.128 0 0 0 157.568-132.48z m-78.08 180.608c28.672 15.168 57.472 28.032 86.4 38.464 98.048 35.648 166.592 33.92 205.632-5.12 39.04-39.04 40.768-107.584 5.12-205.696a685.504 685.504 0 0 0-38.4-86.4 1240.832 1240.832 0 0 1-120.32 138.496 1240.96 1240.96 0 0 1-138.432 120.32zM585.088 512a73.152 73.152 0 1 1-146.24 0 73.152 73.152 0 0 1 146.304 0z\"\n fill=\"currentColor\"\n p-id=\"5013\"\n ></path>\n </svg>\n \u6DF1\u5EA6\u601D\u8003\n </div>\n <div\n class=\"select-tool\"\n nz-popover\n [nzPopoverContent]=\"modelListContent\"\n nzPopoverTrigger=\"click\"\n nzPopoverOverlayClassName=\"params-select-popover\"\n [nzPopoverVisible]=\"modelPopoverVisible\"\n (nzPopoverVisibleChange)=\"modelVisibleChange($event)\"\n >\n <img src=\"/assets/images/input/toggle-model.png\" style=\"width: 12px; height: 12px\" />\n {{ currentModel ? currentModel?.name : '\u9009\u62E9\u6A21\u578B' }}\n </div>\n <div\n class=\"select-tool\"\n nz-popover\n [nzPopoverContent]=\"knowledgeListContent\"\n nzPopoverTrigger=\"click\"\n nzPopoverOverlayClassName=\"params-select-popover\"\n [nzPopoverVisible]=\"knowledgePopoverVisible\"\n (nzPopoverVisibleChange)=\"knowledgeVisibleChange($event)\"\n >\n <img src=\"/assets/images/input/relate.png\" style=\"width: 14px; height: 8px\" />\n \u5173\u8054\u77E5\u8BC6\u5E93\n </div>\n </div>\n <img class=\"send\" src=\"/assets/images/input/send.png\" (click)=\"send()\" [hidden]=\"sseService.loading$ | async\" />\n <div class=\"send-loading\" *ngIf=\"sseService.loading$ | async\">\n <div class=\"send-loading-inner\">\n <svg viewBox=\"0 0 36 36\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" data-icon=\"spin\">\n <defs>\n <linearGradient x1=\"0%\" y1=\"100%\" x2=\"100%\" y2=\"100%\" id=\"linearGradient-1\">\n <stop stop-color=\"currentColor\" stop-opacity=\"0\" offset=\"0%\"></stop>\n <stop stop-color=\"currentColor\" stop-opacity=\"0.50\" offset=\"39.9430698%\"></stop>\n <stop stop-color=\"currentColor\" offset=\"100%\"></stop>\n </linearGradient>\n </defs>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <rect fill-opacity=\"0.01\" fill=\"none\" x=\"0\" y=\"0\" width=\"36\" height=\"36\"></rect>\n <path\n d=\"M34,18 C34,9.163444 26.836556,2 18,2 C11.6597233,2 6.18078805,5.68784135 3.59122325,11.0354951\"\n stroke=\"url(#linearGradient-1)\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n ></path>\n </g>\n </svg>\n </div>\n </div>\n <!-- <img class=\"send\" src=\"/assets/images/input/send-gray.png\" /> -->\n </div>\n </div>\n <div class=\"chat-input-backdrop\"></div>\n</div>\n\n<ng-template #modelListContent>\n <div style=\"width: 200px\">\n <div class=\"select-title\">\n \u5207\u6362\u6A21\u578B\n <i nz-icon nzType=\"close\" style=\"color: #999\" (click)=\"modelVisibleChange(false)\"></i>\n </div>\n <div class=\"select-content\">\n <nz-radio-group [(ngModel)]=\"currentModel\">\n <label\n nz-radio\n [nzValue]=\"item\"\n [style.margin-top.px]=\"i === 0 ? 0 : 10\"\n *ngFor=\"let item of modelList; let i = index\"\n >\n {{ item.name }}\n </label>\n </nz-radio-group>\n </div>\n </div>\n</ng-template>\n\n<ng-template #knowledgeListContent>\n <div style=\"width: 150px\">\n <div class=\"select-title\">\n \u5173\u8054\u77E5\u8BC6\u5E93\n <i nz-icon nzType=\"close\" style=\"color: #999\" (click)=\"knowledgeVisibleChange(false)\"></i>\n </div>\n <div class=\"select-content\">\n <nz-checkbox-wrapper style=\"width: 100%\" (nzOnChange)=\"knowledgeSelectChange($event)\">\n <div *ngFor=\"let item of knowledgeList\">\n <label nz-checkbox [nzValue]=\"item.iCode\" [(ngModel)]=\"item.checked\">{{ item.name }}</label>\n </div>\n </nz-checkbox-wrapper>\n </div>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.chat-input-wrapper{position:absolute;bottom:0;left:0;right:0;max-width:800px;min-width:350px;margin:0 auto;padding-bottom:40px}.chat-input-wrapper.center{bottom:50%;transform:translateY(50%)}.new-chat-title{display:flex;align-items:center;justify-content:center;padding-bottom:40px;text-align:center;font-weight:500;font-size:24px;color:#000}.new-chat-title img{width:40px;height:32px;margin-right:12px;margin-top:-6px}.chat-input{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:20px 18px;margin:0 auto;background:#FFFFFF;box-shadow:0 2px 8px #0000001a;border-radius:20px;border:1px solid #D9DADB;z-index:30}.chat-input .input-creative-editor{min-height:60px;max-height:300px;overflow-y:auto;outline:none;box-shadow:none;border:none}.chat-input .input-creative-editor[data-empty=true]:before{content:attr(data-placeholder);color:#9a9b9b}.chat-input .input-bottom{padding-top:16px;display:flex;align-items:center;justify-content:space-between;-webkit-user-select:none;user-select:none}.chat-input .input-bottom .input-tools{display:flex;align-items:center;gap:10px}.chat-input .input-bottom .select-tool{display:flex;align-items:center;justify-content:center;height:36px;padding:0 12px;gap:12px;background:#FFFFFF;border-radius:12px;border:1px solid #DBDCE0;cursor:pointer}.chat-input .input-bottom .select-tool-active{border-color:#b7c8fe;color:#3964fe;background:#edf3fe}.chat-input .input-bottom .send{width:32px;height:32px}::ng-deep .params-select-popover .ant-popover-inner{border-radius:10px}::ng-deep .params-select-popover .select-title{display:flex;align-items:center;justify-content:center;position:relative}::ng-deep .params-select-popover .select-title i{position:absolute;right:0;top:3px;cursor:pointer}::ng-deep .params-select-popover .select-content{max-height:200px;padding:16px 0;overflow-y:auto}.chat-input-backdrop{position:absolute;bottom:0;left:0;width:100%;height:100px;z-index:10;background-image:linear-gradient(to bottom,hsl(0,0%,99%),hsla(0,0%,99%,.8))}.send-loading{min-width:34px;height:34px;border-radius:50%;margin-top:auto;display:flex;flex-shrink:0;align-items:center;flex-direction:column;justify-content:center;cursor:not-allowed;white-space:nowrap;color:#fff;background:#3964fe;transition:background .2s;opacity:.4}.send-loading-inner{width:16px;height:16px}.send-loading svg{will-change:transform;animation:.6s linear infinite send-loading}@keyframes send-loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
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 nzHideUnMatched\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"] }]
|
|
492
660
|
}], propDecorators: { editor: [{
|
|
493
661
|
type: ViewChild,
|
|
494
662
|
args: ['editorRef']
|
|
@@ -497,6 +665,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
497
665
|
args: ['chatInputWrapper']
|
|
498
666
|
}], messages: [{
|
|
499
667
|
type: Input
|
|
668
|
+
}], mode: [{
|
|
669
|
+
type: Input
|
|
500
670
|
}], sendMessage: [{
|
|
501
671
|
type: Output
|
|
502
672
|
}], messageChange: [{
|
|
@@ -705,7 +875,7 @@ class ChatMessagesComponent {
|
|
|
705
875
|
}
|
|
706
876
|
}
|
|
707
877
|
ChatMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatMessagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
708
|
-
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: [
|
|
709
879
|
trigger('expandCollapse', [
|
|
710
880
|
state('collapsed', style({ height: '0px', opacity: 0 })),
|
|
711
881
|
state('expanded', style({ height: '*', opacity: 1 })),
|
|
@@ -720,7 +890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
720
890
|
state('expanded', style({ height: '*', opacity: 1 })),
|
|
721
891
|
transition('expanded <=> collapsed', animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
722
892
|
]),
|
|
723
|
-
], 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"] }]
|
|
724
894
|
}], propDecorators: { messages: [{
|
|
725
895
|
type: Input
|
|
726
896
|
}], messagesContainer: [{
|
|
@@ -730,103 +900,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
730
900
|
type: Output
|
|
731
901
|
}] } });
|
|
732
902
|
|
|
733
|
-
class HttpService {
|
|
734
|
-
constructor() {
|
|
735
|
-
this.http = inject(HttpClient);
|
|
736
|
-
this.storeService = inject(StoreService);
|
|
737
|
-
this.BASE_URL = '/api'; // 或者完整域名
|
|
738
|
-
}
|
|
739
|
-
/**
|
|
740
|
-
* 统一获取 Headers
|
|
741
|
-
*/
|
|
742
|
-
getHeaders() {
|
|
743
|
-
return new HttpHeaders({
|
|
744
|
-
'Content-Type': 'application/json',
|
|
745
|
-
Authorization: `${this.storeService.getToken()}`,
|
|
746
|
-
});
|
|
747
|
-
}
|
|
748
|
-
/**
|
|
749
|
-
* GET 请求
|
|
750
|
-
*/
|
|
751
|
-
get(url, params) {
|
|
752
|
-
return this.http.get(this.formatUrl(url), {
|
|
753
|
-
headers: this.getHeaders(),
|
|
754
|
-
params: this.resolveParams(params),
|
|
755
|
-
});
|
|
756
|
-
}
|
|
757
|
-
/**
|
|
758
|
-
* POST 请求
|
|
759
|
-
*/
|
|
760
|
-
post(url, body) {
|
|
761
|
-
return this.http.post(this.formatUrl(url), body, {
|
|
762
|
-
headers: this.getHeaders(),
|
|
763
|
-
});
|
|
764
|
-
}
|
|
765
|
-
/**
|
|
766
|
-
* PUT 请求
|
|
767
|
-
*/
|
|
768
|
-
put(url, body) {
|
|
769
|
-
return this.http.put(this.formatUrl(url), body, {
|
|
770
|
-
headers: this.getHeaders(),
|
|
771
|
-
});
|
|
772
|
-
}
|
|
773
|
-
/**
|
|
774
|
-
* DELETE 请求
|
|
775
|
-
* 兼容支持:既支持 URL 参数,也支持 Body
|
|
776
|
-
*/
|
|
777
|
-
delete(url, params, body) {
|
|
778
|
-
return this.http.request('DELETE', this.formatUrl(url), {
|
|
779
|
-
headers: this.getHeaders(),
|
|
780
|
-
params: this.resolveParams(params),
|
|
781
|
-
body: body, // HttpClient 的 delete() 方法默认不支持 body,需用 request() 通用方法
|
|
782
|
-
});
|
|
783
|
-
}
|
|
784
|
-
// ================= 私有辅助方法 =================
|
|
785
|
-
/**
|
|
786
|
-
* 统一处理 URL
|
|
787
|
-
* 比如自动拼接 BaseUrl,或者处理斜杠
|
|
788
|
-
*/
|
|
789
|
-
formatUrl(url) {
|
|
790
|
-
if (url.startsWith('http'))
|
|
791
|
-
return url;
|
|
792
|
-
// 确保拼接顺滑
|
|
793
|
-
const baseUrl = this.storeService.getBaseUrl();
|
|
794
|
-
const cleanBase = baseUrl.replace(/\/$/, '');
|
|
795
|
-
const cleanUrl = url.startsWith('/') ? url : `/${url}`;
|
|
796
|
-
return `${cleanBase}${cleanUrl}`;
|
|
797
|
-
}
|
|
798
|
-
/**
|
|
799
|
-
* 统一清洗参数
|
|
800
|
-
* 过滤掉 null 和 undefined,防止传给后端 "null" 字符串
|
|
801
|
-
*/
|
|
802
|
-
resolveParams(params) {
|
|
803
|
-
let httpParams = new HttpParams();
|
|
804
|
-
if (params) {
|
|
805
|
-
Object.keys(params).forEach(key => {
|
|
806
|
-
const value = params[key];
|
|
807
|
-
if (value !== null && value !== undefined) {
|
|
808
|
-
if (Array.isArray(value)) {
|
|
809
|
-
// 支持数组参数 ids: [1, 2] => ids=1&ids=2
|
|
810
|
-
value.forEach(val => (httpParams = httpParams.append(key, val)));
|
|
811
|
-
}
|
|
812
|
-
else {
|
|
813
|
-
httpParams = httpParams.set(key, value);
|
|
814
|
-
}
|
|
815
|
-
}
|
|
816
|
-
});
|
|
817
|
-
}
|
|
818
|
-
return httpParams;
|
|
819
|
-
}
|
|
820
|
-
}
|
|
821
|
-
HttpService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HttpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
822
|
-
HttpService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HttpService, providedIn: 'root' });
|
|
823
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HttpService, decorators: [{
|
|
824
|
-
type: Injectable,
|
|
825
|
-
args: [{
|
|
826
|
-
providedIn: 'root',
|
|
827
|
-
}]
|
|
828
|
-
}] });
|
|
829
|
-
|
|
830
903
|
class HistoryGroupComponent {
|
|
831
904
|
constructor() {
|
|
832
905
|
this.select = new EventEmitter();
|
|
@@ -946,6 +1019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
946
1019
|
// chat-sidebar.component.ts
|
|
947
1020
|
class ChatSidebarComponent {
|
|
948
1021
|
constructor() {
|
|
1022
|
+
this.mode = 'full';
|
|
949
1023
|
this.http = inject(HttpService$1);
|
|
950
1024
|
this.storeService = inject(StoreService);
|
|
951
1025
|
this.isCollapsed = false;
|
|
@@ -1029,7 +1103,7 @@ class ChatSidebarComponent {
|
|
|
1029
1103
|
}
|
|
1030
1104
|
}
|
|
1031
1105
|
ChatSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1032
|
-
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: [
|
|
1033
1107
|
trigger('logoActionsAnimation', [
|
|
1034
1108
|
transition(':enter', [
|
|
1035
1109
|
style({ opacity: 0, transform: 'translateX(20px)' }),
|
|
@@ -1048,8 +1122,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1048
1122
|
]),
|
|
1049
1123
|
transition(':leave', [animate('0ms ease-in', style({ opacity: 0, transform: 'translateX(20px)' }))]),
|
|
1050
1124
|
]),
|
|
1051
|
-
], 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
|
|
1052
|
-
}], 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: [{
|
|
1053
1129
|
type: ViewChild,
|
|
1054
1130
|
args: ['historyGroupRef']
|
|
1055
1131
|
}] } });
|
|
@@ -1163,10 +1239,10 @@ class NgxAgentChatComponent {
|
|
|
1163
1239
|
}
|
|
1164
1240
|
}
|
|
1165
1241
|
NgxAgentChatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgxAgentChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1166
|
-
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"] }] });
|
|
1167
1243
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgxAgentChatComponent, decorators: [{
|
|
1168
1244
|
type: Component,
|
|
1169
|
-
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"] }]
|
|
1170
1246
|
}], propDecorators: { baseUrl: [{
|
|
1171
1247
|
type: Input
|
|
1172
1248
|
}], token: [{
|
|
@@ -1182,6 +1258,221 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1182
1258
|
args: ['chatInputRef']
|
|
1183
1259
|
}] } });
|
|
1184
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:9998;display:flex;flex-direction:column;align-items:flex-end}.chat-box{width:660px;height:82vh;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: '82vh', // 保持高度一致,但不可见
|
|
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: '82vh',
|
|
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: '82vh', // 保持高度一致,但不可见
|
|
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: '82vh',
|
|
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:9998;display:flex;flex-direction:column;align-items:flex-end}.chat-box{width:660px;height:82vh;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
|
+
|
|
1185
1476
|
class AgentChatModule {
|
|
1186
1477
|
}
|
|
1187
1478
|
AgentChatModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AgentChatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -1190,7 +1481,8 @@ AgentChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
|
|
|
1190
1481
|
ChatMessagesComponent,
|
|
1191
1482
|
ChatSidebarComponent,
|
|
1192
1483
|
SimplePaginationComponent,
|
|
1193
|
-
HistoryGroupComponent
|
|
1484
|
+
HistoryGroupComponent,
|
|
1485
|
+
FloatingChatComponent], imports: [CommonModule,
|
|
1194
1486
|
NzAvatarModule,
|
|
1195
1487
|
NzSpinModule,
|
|
1196
1488
|
NzTagModule,
|
|
@@ -1204,8 +1496,11 @@ AgentChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
|
|
|
1204
1496
|
NzCheckboxModule,
|
|
1205
1497
|
NzIconModule,
|
|
1206
1498
|
NzPaginationModule,
|
|
1499
|
+
NzStepsModule,
|
|
1500
|
+
NzSelectModule,
|
|
1501
|
+
NzTreeSelectModule,
|
|
1207
1502
|
FormsModule,
|
|
1208
|
-
MarkdownPipe], exports: [NgxAgentChatComponent] });
|
|
1503
|
+
MarkdownPipe], exports: [NgxAgentChatComponent, FloatingChatComponent] });
|
|
1209
1504
|
AgentChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AgentChatModule, providers: [NzMessageService], imports: [CommonModule,
|
|
1210
1505
|
NzAvatarModule,
|
|
1211
1506
|
NzSpinModule,
|
|
@@ -1220,6 +1515,9 @@ AgentChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
|
|
|
1220
1515
|
NzCheckboxModule,
|
|
1221
1516
|
NzIconModule,
|
|
1222
1517
|
NzPaginationModule,
|
|
1518
|
+
NzStepsModule,
|
|
1519
|
+
NzSelectModule,
|
|
1520
|
+
NzTreeSelectModule,
|
|
1223
1521
|
FormsModule] });
|
|
1224
1522
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AgentChatModule, decorators: [{
|
|
1225
1523
|
type: NgModule,
|
|
@@ -1231,6 +1529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1231
1529
|
ChatSidebarComponent,
|
|
1232
1530
|
SimplePaginationComponent,
|
|
1233
1531
|
HistoryGroupComponent,
|
|
1532
|
+
FloatingChatComponent,
|
|
1234
1533
|
],
|
|
1235
1534
|
imports: [
|
|
1236
1535
|
CommonModule,
|
|
@@ -1247,11 +1546,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1247
1546
|
NzCheckboxModule,
|
|
1248
1547
|
NzIconModule,
|
|
1249
1548
|
NzPaginationModule,
|
|
1549
|
+
NzStepsModule,
|
|
1550
|
+
NzSelectModule,
|
|
1551
|
+
NzTreeSelectModule,
|
|
1250
1552
|
FormsModule,
|
|
1251
1553
|
MarkdownPipe,
|
|
1252
1554
|
],
|
|
1253
1555
|
providers: [NzMessageService],
|
|
1254
|
-
exports: [NgxAgentChatComponent],
|
|
1556
|
+
exports: [NgxAgentChatComponent, FloatingChatComponent],
|
|
1255
1557
|
}]
|
|
1256
1558
|
}] });
|
|
1257
1559
|
|
|
@@ -1259,5 +1561,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1259
1561
|
* Generated bundle index. Do not edit.
|
|
1260
1562
|
*/
|
|
1261
1563
|
|
|
1262
|
-
export { AgentChatModule, NgxAgentChatComponent };
|
|
1564
|
+
export { AgentChatModule, FloatingChatComponent, NgxAgentChatComponent };
|
|
1263
1565
|
//# sourceMappingURL=qqsl-agent-chat.mjs.map
|