:gem: [Feature] More widgets of agent info sidebar
Browse files- css/default.css +5 -0
- widgets/agent_info_widget.js +101 -1
css/default.css
CHANGED
@@ -15,6 +15,11 @@
|
|
15 |
}
|
16 |
}
|
17 |
|
|
|
|
|
|
|
|
|
|
|
18 |
body {
|
19 |
/* background-image: linear-gradient(90deg, #eef3ff, #ecf1ff); */
|
20 |
background-color: #ecf1ff;
|
|
|
15 |
}
|
16 |
}
|
17 |
|
18 |
+
.form-control {
|
19 |
+
margin: 0;
|
20 |
+
padding: 5px 5px 5px 5px;
|
21 |
+
}
|
22 |
+
|
23 |
body {
|
24 |
/* background-image: linear-gradient(90deg, #eef3ff, #ecf1ff); */
|
25 |
background-color: #ecf1ff;
|
widgets/agent_info_widget.js
CHANGED
@@ -21,10 +21,27 @@ export class AgentInfoWidget {
|
|
21 |
let agent_info = $("#agent-info");
|
22 |
agent_info.empty();
|
23 |
agent_info.append(this.widget);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
24 |
}
|
25 |
remove() {
|
26 |
this.widget.remove();
|
27 |
}
|
|
|
|
|
|
|
28 |
create_model_widget() {
|
29 |
this.model_widget = new AvailableModelsSelectWidget({
|
30 |
widget_id: this.model_widget_id,
|
@@ -32,21 +49,104 @@ export class AgentInfoWidget {
|
|
32 |
let model_widget_parent = this.widget.find(`#${this.model_widget_id}`);
|
33 |
this.model_widget.spawn_in_parent(model_widget_parent, "prepend");
|
34 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
35 |
create_widget() {
|
36 |
this.widget_html = `
|
37 |
<div id="${this.widget_id}">
|
38 |
<!-- name -->
|
39 |
<div class="form-floating mb-2">
|
40 |
-
<input id="${this.name_widget_id}
|
41 |
<label class="form-label">Name</label>
|
42 |
</div>
|
43 |
<!-- model -->
|
44 |
<div id="${this.model_widget_id}" class="form-floating mb-2">
|
45 |
<label class="form-label">Model</label>
|
46 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
47 |
</div>
|
48 |
`;
|
49 |
this.widget = $(this.widget_html);
|
|
|
50 |
this.create_model_widget();
|
|
|
|
|
|
|
|
|
|
|
51 |
}
|
52 |
}
|
|
|
21 |
let agent_info = $("#agent-info");
|
22 |
agent_info.empty();
|
23 |
agent_info.append(this.widget);
|
24 |
+
document
|
25 |
+
.getElementById(`${this.system_prompt_widget_id}`)
|
26 |
+
.addEventListener(
|
27 |
+
"input",
|
28 |
+
function () {
|
29 |
+
this.style.height = 0;
|
30 |
+
this.style.height = this.scrollHeight + 3 + "px";
|
31 |
+
},
|
32 |
+
false
|
33 |
+
);
|
34 |
+
$(`#${this.system_prompt_widget_id}`)
|
35 |
+
.css("resize", "none")
|
36 |
+
.css("max-height", "200px");
|
37 |
+
$(`#${this.description_widget_id}`).css("resize", "none");
|
38 |
}
|
39 |
remove() {
|
40 |
this.widget.remove();
|
41 |
}
|
42 |
+
create_name_widget() {
|
43 |
+
this.widget.find(`#${this.name_widget_id}`).val(this.agent.name);
|
44 |
+
}
|
45 |
create_model_widget() {
|
46 |
this.model_widget = new AvailableModelsSelectWidget({
|
47 |
widget_id: this.model_widget_id,
|
|
|
49 |
let model_widget_parent = this.widget.find(`#${this.model_widget_id}`);
|
50 |
this.model_widget.spawn_in_parent(model_widget_parent, "prepend");
|
51 |
}
|
52 |
+
create_system_prompt_widget() {
|
53 |
+
this.widget
|
54 |
+
.find(`#${this.system_prompt_widget_id}`)
|
55 |
+
.val(this.agent.system_prompt);
|
56 |
+
}
|
57 |
+
create_description_widget() {
|
58 |
+
this.widget
|
59 |
+
.find(`#${this.description_widget_id}`)
|
60 |
+
.val(this.agent.description);
|
61 |
+
}
|
62 |
+
create_temperature_widget() {
|
63 |
+
this.temperature_widget = new RangeNumberWidget({
|
64 |
+
widget_id: this.temperature_widget_id,
|
65 |
+
label_text: "Temperature",
|
66 |
+
default_val: this.agent.temperature || 0.5,
|
67 |
+
min_val: 0,
|
68 |
+
max_val: 1,
|
69 |
+
step_val: 0.1,
|
70 |
+
});
|
71 |
+
let temperature_widget_parent = this.widget.find(
|
72 |
+
`#${this.temperature_widget_id}`
|
73 |
+
);
|
74 |
+
this.temperature_widget.spawn_in_parent(temperature_widget_parent);
|
75 |
+
}
|
76 |
+
create_top_p_widget() {
|
77 |
+
this.top_p_widget = new RangeNumberWidget({
|
78 |
+
widget_id: this.top_p_widget_id,
|
79 |
+
label_text: "Top P",
|
80 |
+
default_val: this.agent.top_p || 0.9,
|
81 |
+
min_val: 0.0,
|
82 |
+
max_val: 1.0,
|
83 |
+
step_val: 0.01,
|
84 |
+
});
|
85 |
+
let top_p_widget_parent = this.widget.find(`#${this.top_p_widget_id}`);
|
86 |
+
this.top_p_widget.spawn_in_parent(top_p_widget_parent);
|
87 |
+
}
|
88 |
+
create_max_output_tokens_widget() {
|
89 |
+
this.max_output_tokens_widget = new RangeNumberWidget({
|
90 |
+
widget_id: this.max_output_tokens_widget_id,
|
91 |
+
label_text: "Max Output Tokens <code>(-1: auto)</code>",
|
92 |
+
default_val: -1,
|
93 |
+
min_val: -1,
|
94 |
+
max_val: 32768,
|
95 |
+
step_val: 1,
|
96 |
+
});
|
97 |
+
let max_output_tokens_widget_parent = this.widget.find(
|
98 |
+
`#${this.max_output_tokens_widget_id}`
|
99 |
+
);
|
100 |
+
this.max_output_tokens_widget.spawn_in_parent(
|
101 |
+
max_output_tokens_widget_parent
|
102 |
+
);
|
103 |
+
}
|
104 |
create_widget() {
|
105 |
this.widget_html = `
|
106 |
<div id="${this.widget_id}">
|
107 |
<!-- name -->
|
108 |
<div class="form-floating mb-2">
|
109 |
+
<input id="${this.name_widget_id}" class="form-control" type="text"/>
|
110 |
<label class="form-label">Name</label>
|
111 |
</div>
|
112 |
<!-- model -->
|
113 |
<div id="${this.model_widget_id}" class="form-floating mb-2">
|
114 |
<label class="form-label">Model</label>
|
115 |
</div>
|
116 |
+
<!-- system prompt -->
|
117 |
+
<div class="form-floating mb-2">
|
118 |
+
<textarea id="${this.system_prompt_widget_id}" class="form-control" rows="3"></textarea>
|
119 |
+
<label>System Prompt</label>
|
120 |
+
</div>
|
121 |
+
<a class="btn mx-0 px-0" data-bs-toggle="collapse" href="#agent-info-advanced-settings">
|
122 |
+
<b>Advanced Settings</b> <i class="fa fa-chevron-down"></i>
|
123 |
+
</a>
|
124 |
+
<div class="collapse show" id="agent-info-advanced-settings">
|
125 |
+
<!-- description -->
|
126 |
+
<div class="form-floating my-2">
|
127 |
+
<textarea id="${this.description_widget_id}" class="form-control" rows="1"></textarea>
|
128 |
+
<label>Description</label>
|
129 |
+
</div>
|
130 |
+
<!-- temperature -->
|
131 |
+
<div id="${this.temperature_widget_id}" class="row mb-0"">
|
132 |
+
</div>
|
133 |
+
<!-- top_p -->
|
134 |
+
<div id="${this.top_p_widget_id}" class="row mb-0"">
|
135 |
+
</div>
|
136 |
+
<!-- max output tokens -->
|
137 |
+
<div id="${this.max_output_tokens_widget_id}" class="row mb-2">
|
138 |
+
</div>
|
139 |
+
<!-- max history messages token -->
|
140 |
+
</div>
|
141 |
</div>
|
142 |
`;
|
143 |
this.widget = $(this.widget_html);
|
144 |
+
this.create_name_widget();
|
145 |
this.create_model_widget();
|
146 |
+
this.create_system_prompt_widget();
|
147 |
+
this.create_description_widget();
|
148 |
+
this.create_temperature_widget();
|
149 |
+
this.create_top_p_widget();
|
150 |
+
this.create_max_output_tokens_widget();
|
151 |
}
|
152 |
}
|