igniteui-angular/src/app/chat-wrapper/chat-wrapper.sample.ts at bad2b9ab8ff83dab316c61eba160eeef921dda3f · IgniteUI/igniteui-angular · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import { NgTemplateOutlet } from '@angular/common';
import {
    AfterViewInit,
    Component,
    CUSTOM_ELEMENTS_SCHEMA,
    TemplateRef,
    ViewChild,
    ViewEncapsulation,
} from '@angular/core';
import {
    IgxButtonDirective,
    IgxChatWrapperComponent,
} from 'igniteui-angular';
import {
    defineComponents,
    IgcChatComponent
} from 'igniteui-webcomponents';


defineComponents(
    IgcChatComponent
);

@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'app-chat-wrapper-sample',
    styleUrls: ['chat-wrapper.sample.scss'],
    templateUrl: 'chat-wrapper.sample.html',
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    imports: [
        IgxButtonDirective,
        IgxChatWrapperComponent,
        NgTemplateOutlet
    ]
})
export class ChatWrapperSampleComponent implements AfterViewInit {
    private msgTemplate?: TemplateRef<any>;

    @ViewChild('chatWrapper', { read: IgxChatWrapperComponent })
    public chatWrapper!: IgxChatWrapperComponent;

    @ViewChild('messageTemplate1', { static: true })
    public messageTemplate1!: TemplateRef<any>;

    @ViewChild('messageTemplate2', { static: true })
    public messageTemplate2!: TemplateRef<any>;

    @ViewChild('attachmentsTemplate', { static: true })
    public attachmentsTemplate!: TemplateRef<any>;

    public messages = [
        {
            id: '1',
            text: 'Hello! How can I help you today?',
            sender: 'bot',
            timestamp: new Date(Date.now() - 3600000),
        }
    ];

    public options = {
        templates: {}
    };

    ngAfterViewInit() {
        this.options.templates = {
            messageTemplate: this.messageTemplate1,
            textAreaAttachmentsTemplate: this.attachmentsTemplate
        };
        this.chatWrapper.options.set({ ...this.options, templates: this.options.templates });
    }

    public onClick(context: any) {
        console.log('Context: ' + context);
    }

    public switchMessageTemplate() {
        this.msgTemplate = this.msgTemplate === this.messageTemplate2 ? this.messageTemplate1 : this.messageTemplate2;
        this.options.templates = {
            ...this.options.templates,
            messageTemplate: this.msgTemplate,
            textAreaAttachmentsTemplate: this.attachmentsTemplate
        };
        this.chatWrapper.options.set({ ...this.options, templates: this.options.templates });
        this.messages = [...this.chatWrapper.messages()];
    }

    public onMessageCreated($event: any) {
        const newMessage = $event.detail;
        this.messages = [...this.messages, newMessage];
    }
}