llm-mixer / widgets /agent_info_widget.js
Hansimov's picture
:gem: [Feature] Render agent info at sidebar
dd32c33
raw
history blame
1.98 kB
import { RangeNumberWidget } from "./range_number_widget.js";
import { AvailableModelsSelectWidget } from "./available_models_select_widget.js";
export class AgentInfoWidget {
constructor({ agent } = {}) {
this.agent = agent;
this.widget_id = `agent-x-${this.agent.name}-x`;
this.name_widget_id = `${this.widget_id}-name`;
this.model_widget_id = `${this.widget_id}-model`;
this.description_widget_id = `${this.widget_id}-description`;
this.temperature_widget_id = `${this.widget_id}-temperature`;
this.top_p_widget_id = `${this.widget_id}-top-p`;
this.max_output_tokens_widget_id = `${this.widget_id}-max-output-tokens`;
this.system_prompt_widget_id = `${this.widget_id}-system-prompt`;
}
spawn() {
this.create_widget();
this.append_to_agent_sidebar();
}
append_to_agent_sidebar() {
let agent_info = $("#agent-info");
agent_info.empty();
agent_info.append(this.widget);
}
remove() {
this.widget.remove();
}
create_model_widget() {
this.model_widget = new AvailableModelsSelectWidget({
widget_id: this.model_widget_id,
});
let model_widget_parent = this.widget.find(`#${this.model_widget_id}`);
this.model_widget.spawn_in_parent(model_widget_parent, "prepend");
}
create_widget() {
this.widget_html = `
<div id="${this.widget_id}">
<!-- name -->
<div class="form-floating mb-2">
<input id="${this.name_widget_id} " class="form-control" type="text"/>
<label class="form-label">Name</label>
</div>
<!-- model -->
<div id="${this.model_widget_id}" class="form-floating mb-2">
<label class="form-label">Model</label>
</div>
</div>
`;
this.widget = $(this.widget_html);
this.create_model_widget();
}
}