File size: 4,325 Bytes
58f9352
4a8deab
 
 
 
 
c98264e
734e6b6
c98264e
82b5a4a
 
2fcfb26
82b5a4a
 
 
2fcfb26
82b5a4a
 
 
65e47ec
734e6b6
 
 
 
4a8deab
 
 
 
 
82b5a4a
 
4a8deab
734e6b6
82b5a4a
 
4a8deab
7445f95
82b5a4a
2fcfb26
 
65e47ec
734e6b6
 
 
2fcfb26
a348252
65e47ec
a348252
 
65e47ec
a348252
 
 
65e47ec
a348252
 
65e47ec
a348252
 
65e47ec
a348252
65e47ec
c98264e
a348252
65e47ec
a348252
c98264e
4a8deab
 
 
09ac9b3
 
 
 
 
 
4b68ad4
 
09ac9b3
 
 
 
4b68ad4
09ac9b3
4b68ad4
09ac9b3
4a8deab
 
09ac9b3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4b68ad4
 
09ac9b3
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
class MessagerViewer {
    constructor(message) {
        this.message = message;
        this.create_elements();
    }
    create_elements() {
        this.container = $("<div>")
            .addClass("mt-2 row no-gutters message-viewer position-relative")
            .addClass(`message-${this.message.role}`);
        this.create_role_displayer();
        this.create_content_displayer();
        this.create_button_group();
        this.container
            .append(this.role_displayer)
            .append(this.content_displayer)
            .append(this.button_group);
    }
    create_role_displayer() {
        this.role_displayer = $("<div>")
            .addClass("position-absolute px-2")
            .addClass("role-displayer")
            .css("z-index", "1")
            .css("padding", "auto")
            .css("color", "red");
        if (this.message.role === "user") {
            this.role_displayer.append("You");
        } else {
            this.role_displayer.append(this.message.model);
        }
    }
    create_content_displayer() {
        this.content_displayer = $("<div>")
            .addClass("col-12 px-2 pt-4")
            .addClass("content-displayer")
            .addClass(`chat-${this.message.role}`)
            .append(this.message.content);
        this.content_displayer.data("raw_content", "");
    }
    create_button_group() {
        this.button_group = $("<div>")
            .addClass("position-absolute text-end px-1")
            .addClass("button-group")
            .css("z-index", "1")
            .css("padding", "auto");

        this.edit_button = $("<button>")
            .addClass("btn pt-0 px-2")
            .addClass("edit-button")
            .attr("title", "Edit")
            .append($("<span>").addClass("fa fa-small fa-edit"));
        this.button_group.append(this.edit_button);

        this.copy_button = $("<button>")
            .addClass("btn pt-0 px-2")
            .addClass("copy-button")
            .attr("title", "Copy")
            .append($("<span>").addClass("fa fa-small fa-copy"));
        this.button_group.append(this.copy_button);

        if (this.message.role === "assistant") {
            this.regenerate_button = $("<button>")
                .addClass("btn pt-0 px-2")
                .addClass("regenerate-button")
                .attr("title", "Regenerate")
                .append($("<span>").addClass("fa fa-small fa-rotate"));
            this.button_group.append(this.regenerate_button);
        } else {
        }
    }
}

export class Messager {
    constructor(message) {
        this.message = message;
        this.create_viewer();
    }

    get_request_message() {
        this.request_message = {
            role: this.message.role,
            content: this.message.content,
        };
        return this.request_message;
    }

    create_viewer() {
        let messager_viewer = new MessagerViewer(this.message);
        this.viewer = messager_viewer.container;
    }
}

export class MessagerList {
    constructor(messagers_container) {
        this.messagers_container = messagers_container;
        this.messagers = [];
    }

    push(messager) {
        this.messagers.push(messager);
        this.messagers_container.append(messager.viewer);
    }

    pop(n = 1) {
        let popped_messagers = this.messagers.splice(-n, n);
        this.messagers_container.children().slice(-n).remove();
        return popped_messagers;
    }

    extend(messagers) {
        this.messagers = this.messagers.concat(
            messagers.map(function (messager) {
                return messager;
            })
        );
        this.messagers_container.append(
            messagers.map(function (messager) {
                return messager.viewer;
            })
        );
    }

    clear() {
        this.messagers = [];
        this.messagers_container.empty();
    }

    get_messages() {
        return this.messagers.map(function (messager) {
            return messager.message;
        });
    }
    get_request_messages() {
        return this.messagers.slice(0, -1).map(function (messager) {
            return messager.get_request_message();
        });
    }

    get_message_viewers() {
        return this.messagers.map(function (messager) {
            return messager.viewer;
        });
    }
}