File size: 4,041 Bytes
4a8deab
 
 
 
 
 
c98264e
 
 
82b5a4a
 
2fcfb26
82b5a4a
 
 
2fcfb26
82b5a4a
 
 
5b497e6
82b5a4a
4a8deab
 
 
 
 
82b5a4a
 
4a8deab
5b497e6
82b5a4a
 
4a8deab
7445f95
82b5a4a
2fcfb26
 
5b497e6
2fcfb26
 
a348252
 
 
 
 
 
 
 
 
 
 
 
 
 
4a8deab
a348252
 
c98264e
a348252
c98264e
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
export class MessagerViewer {
    constructor(message) {
        this.message = message;
        this.create_elements();
    }
    create_elements() {
        this.container = $("<div>")
            .addClass("mt-2 row no-gutters message-viewer")
            .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("col-2 p-2")
            .addClass("role-displayer");
        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-8 p-2")
            .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("col-2")
            .addClass("button-group");

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

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

        if (this.message.role === "user") {
            this.regenerate_button = $("<button>")
                .addClass("btn px-2")
                .addClass("regenerate-button")
                .attr("title", "Regenerate")
                .append($("<i>").addClass("fa 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;
        });
    }
}