:zap: [Enhance] new agent model select auto synced with available models
Browse files
widgets/available_models_select_widget.js
CHANGED
@@ -2,6 +2,8 @@ export class AvailableModelsSelectWidget {
|
|
2 |
constructor({ widget_id = null, widget_title = null } = {}) {
|
3 |
this.widget_id = widget_id;
|
4 |
this.widget_title = widget_title || "Available Models";
|
|
|
|
|
5 |
}
|
6 |
spawn_in_parent(parent, position = "append") {
|
7 |
this.create_widget();
|
@@ -11,6 +13,7 @@ export class AvailableModelsSelectWidget {
|
|
11 |
} else {
|
12 |
parent.append(this.widget);
|
13 |
}
|
|
|
14 |
}
|
15 |
create_widget() {
|
16 |
this.widget_html = `
|
@@ -19,11 +22,24 @@ export class AvailableModelsSelectWidget {
|
|
19 |
this.widget = $(this.widget_html);
|
20 |
}
|
21 |
update_select_options() {
|
22 |
-
let
|
23 |
-
let options = available_models_select.find("option");
|
24 |
this.widget.empty();
|
25 |
options.each((i, option) => {
|
26 |
this.widget.append($(option).clone());
|
27 |
});
|
28 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
29 |
}
|
|
|
2 |
constructor({ widget_id = null, widget_title = null } = {}) {
|
3 |
this.widget_id = widget_id;
|
4 |
this.widget_title = widget_title || "Available Models";
|
5 |
+
this.observer = null;
|
6 |
+
this.available_models_select = $("#available-models-select");
|
7 |
}
|
8 |
spawn_in_parent(parent, position = "append") {
|
9 |
this.create_widget();
|
|
|
13 |
} else {
|
14 |
parent.append(this.widget);
|
15 |
}
|
16 |
+
this.observe_changes();
|
17 |
}
|
18 |
create_widget() {
|
19 |
this.widget_html = `
|
|
|
22 |
this.widget = $(this.widget_html);
|
23 |
}
|
24 |
update_select_options() {
|
25 |
+
let options = this.available_models_select.find("option");
|
|
|
26 |
this.widget.empty();
|
27 |
options.each((i, option) => {
|
28 |
this.widget.append($(option).clone());
|
29 |
});
|
30 |
}
|
31 |
+
observe_changes() {
|
32 |
+
this.observer = new MutationObserver((mutationsList, observer) => {
|
33 |
+
for (let mutation of mutationsList) {
|
34 |
+
if (mutation.type === "childList") {
|
35 |
+
this.update_select_options();
|
36 |
+
}
|
37 |
+
}
|
38 |
+
});
|
39 |
+
this.observer.observe(this.available_models_select[0], {
|
40 |
+
attributes: false,
|
41 |
+
childList: true,
|
42 |
+
subtree: true,
|
43 |
+
});
|
44 |
+
}
|
45 |
}
|