File size: 4,544 Bytes
58f9352
4a8deab
 
 
 
 
c98264e
c60e6fd
c98264e
82b5a4a
 
2fcfb26
82b5a4a
 
 
2fcfb26
82b5a4a
 
 
734e6b6
c60e6fd
09f5b61
82b5a4a
 
4a8deab
82b5a4a
b9716d2
 
d0078b0
82b5a4a
2fcfb26
 
65e47ec
734e6b6
 
 
2fcfb26
10e33e0
d0078b0
 
10e33e0
d0078b0
 
 
 
 
 
 
a348252
10e33e0
a348252
 
65e47ec
a348252
 
 
10e33e0
a348252
 
65e47ec
a348252
 
d0078b0
 
 
 
 
 
 
 
 
 
 
 
 
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
145
146
147
148
149
150
151
class MessagerViewer {
    constructor(message) {
        this.message = message;
        this.create_elements();
    }
    create_elements() {
        this.container = $("<div>")
            .addClass("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("role-displayer")
            .css("z-index", "1");
        this.role_displayer.append(this.message.nickname);
    }
    create_content_displayer() {
        this.content_displayer = $("<div>")
            .addClass("content-displayer")
            .addClass(`chat-${this.message.role}`);
        this.content_displayer.text(this.message.content);
        this.content_displayer.data("raw_content", this.message.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");

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

        this.edit_button = $("<button>")
            .addClass(btn_class)
            .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_class)
            .addClass("copy-button")
            .attr("title", "Copy")
            .append($("<span>").addClass("fa fa-small fa-copy"));
        this.button_group.append(this.copy_button);

        this.copy_button.click(function () {
            let content = $(this)
                .closest(".message-viewer")
                .find(".content-displayer")
                .data("raw_content");
            console.log("Copy");
            console.log(content);
            let clipboard = new ClipboardJS(this, {
                text: function () {
                    return content;
                },
            });
        });
    }
}

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;
        });
    }
}