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); document .getElementById(`${this.system_prompt_widget_id}`) .addEventListener( "input", function () { this.style.height = 0; this.style.height = this.scrollHeight + 3 + "px"; }, false ); $(`#${this.system_prompt_widget_id}`) .css("resize", "none") .css("max-height", "200px"); $(`#${this.description_widget_id}`).css("resize", "none"); } remove() { this.widget.remove(); } create_name_widget() { this.widget.find(`#${this.name_widget_id}`).val(this.agent.name); } 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_system_prompt_widget() { this.widget .find(`#${this.system_prompt_widget_id}`) .val(this.agent.system_prompt); } create_description_widget() { this.widget .find(`#${this.description_widget_id}`) .val(this.agent.description); } create_temperature_widget() { this.temperature_widget = new RangeNumberWidget({ widget_id: this.temperature_widget_id, label_text: "Temperature", default_val: this.agent.temperature || 0.5, min_val: 0, max_val: 1, step_val: 0.1, }); let temperature_widget_parent = this.widget.find( `#${this.temperature_widget_id}` ); this.temperature_widget.spawn_in_parent(temperature_widget_parent); } create_top_p_widget() { this.top_p_widget = new RangeNumberWidget({ widget_id: this.top_p_widget_id, label_text: "Top P", default_val: this.agent.top_p || 0.9, min_val: 0.0, max_val: 1.0, step_val: 0.01, }); let top_p_widget_parent = this.widget.find(`#${this.top_p_widget_id}`); this.top_p_widget.spawn_in_parent(top_p_widget_parent); } create_max_output_tokens_widget() { this.max_output_tokens_widget = new RangeNumberWidget({ widget_id: this.max_output_tokens_widget_id, label_text: "Max Output Tokens (-1: auto)", default_val: -1, min_val: -1, max_val: 32768, step_val: 1, }); let max_output_tokens_widget_parent = this.widget.find( `#${this.max_output_tokens_widget_id}` ); this.max_output_tokens_widget.spawn_in_parent( max_output_tokens_widget_parent ); } create_widget() { this.widget_html = `
Advanced Settings
`; this.widget = $(this.widget_html); this.create_name_widget(); this.create_model_widget(); this.create_system_prompt_widget(); this.create_description_widget(); this.create_temperature_widget(); this.create_top_p_widget(); this.create_max_output_tokens_widget(); } }