:gem: [Feature] Request with parameters of current agent

components/chat_operator.js

@@ -19,17 +19,11 @@ export function get_latest_messager() {
     return get_active_messager_list().messagers.slice(-1)[0];
 }
 
-export function create_messager(
-    role,
-    content = "",
-    model = "",
-    temperature = ""
-) {
+export function create_messager(role, content = "", model = "") {
     let message = {
         role: role,
         content: content,
         model: model,
-        temperature: temperature,
     };
     let messager = new Messager(message);
     get_active_messager_list().push(messager);

index.html

@@ -73,7 +73,7 @@
                     <i class="fa fa-plus"></i> New Agent
                 </button>
             </div>
-            <div id="agent-info"></div>
+            <div id="agent-info-container"></div>
         </div>
         <div class="my-2 row no-gutters justify-content-start">
             <div class="col">

networks/llm_requester.js

@@ -6,33 +6,38 @@ import {
     update_message,
     create_messager,
     get_request_messages,
-    get_selected_llm_model,
-    get_selected_temperature,
     ContentDisplayerUpdater,
 } from "../components/chat_operator.js";
 
+import { get_current_agent_info } from "../storages/agent_storage.js";
+
 export class ChatCompletionsRequester {
     constructor({
         prompt,
         model = null,
-        temperature = 0.5,
-        top_p = 0.95,
         openai_endpoint = null,
+        temperature = null,
+        top_p = null,
+        max_output_tokens = null,
     } = {}) {
+        this.agent_info = get_current_agent_info();
+        console.log("agent_info:", this.agent_info);
         this.prompt = prompt;
+        this.model_id_with_endpoint = this.agent_info.model;
         this.openai_endpoint =
-            openai_endpoint || this.extract_endpoint_and_model()[0];
-        this.model = model || this.extract_endpoint_and_model()[1];
-        this.temperature = temperature;
-        this.top_p = top_p;
+            openai_endpoint || this.extract_openai_endpoint_and_model()[0];
+        this.model = model || this.extract_openai_endpoint_and_model()[1];
+        this.temperature = temperature || this.agent_info.temperature;
+        this.top_p = top_p || this.agent_info.top_p;
+        this.max_output_tokens =
+            max_output_tokens || this.agent_info.max_output_tokens;
         this.backend_request_endpoint = "/chat/completions";
         this.controller = new AbortController();
     }
-    extract_endpoint_and_model() {
-        let model_id_with_endpoint = get_selected_llm_model();
-        this.openai_endpoint = model_id_with_endpoint.split("|")[0];
-        this.model = model_id_with_endpoint.split("|")[1];
-        return [this.openai_endpoint, this.model];
+    extract_openai_endpoint_and_model() {
+        let openai_endpoint = this.model_id_with_endpoint.split("|")[0];
+        let model = this.model_id_with_endpoint.split("|")[1];
+        return [openai_endpoint, model];
     }
     construct_openai_request_headers() {
         this.backend_request_headers = {
@@ -54,6 +59,7 @@ export class ChatCompletionsRequester {
                 messages: this.openai_request_messages,
                 temperature: this.temperature,
                 top_p: this.top_p,
+                max_tokens: this.max_output_tokens,
                 stream: true,
             },
         };
@@ -71,7 +77,7 @@ export class ChatCompletionsRequester {
     }
     create_messager_components() {
         create_messager("user", this.prompt);
-        create_messager("assistant", "", this.model, this.temperature);
+        create_messager("assistant", "", this.model);
     }
     async handle_read_stream_data(reader) {
         let buffer = "";
@@ -112,7 +118,6 @@ export class ChatCompletionsRequester {
     }
 }
 
-// export var available_models = { "user-customized": ["notes"] };
 export class AvailableModelsRequester {
     constructor(openai_endpoint) {
         this.openai_endpoint = openai_endpoint;

storages/agent_storage.js

@@ -6,6 +6,35 @@ class AgentStorageItem {
     }
 }
 
+export function get_current_agent_info() {
+    let widget_id = "agent-info";
+    let agent_info_widget = $(`#${widget_id}`);
+    let name = agent_info_widget.find(`#${widget_id}-name`).val();
+    let model = agent_info_widget.find(`#${widget_id}-model-select`).val();
+    let system_prompt = agent_info_widget
+        .find(`#${widget_id}-system-prompt`)
+        .val();
+    let description = agent_info_widget.find(`#${widget_id}-description`).val();
+    let temperature = parseFloat(
+        agent_info_widget.find(`#${widget_id}-temperature-number`).val()
+    );
+    let top_p = parseFloat(
+        agent_info_widget.find(`#${widget_id}-top-p-number`).val()
+    );
+    let max_output_tokens = parseInt(
+        agent_info_widget.find(`#${widget_id}-max-output-tokens-number`).val()
+    );
+    return {
+        name: name,
+        model: model,
+        system_prompt: system_prompt,
+        description: description,
+        temperature: temperature,
+        top_p: top_p,
+        max_output_tokens: max_output_tokens,
+    };
+}
+
 class AgentStorage {
     constructor() {
         this.init_database();

widgets/agent_info_widget.js

@@ -4,7 +4,7 @@ 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.widget_id = `agent-info`;
         this.name_widget_id = `${this.widget_id}-name`;
         this.model_widget_id = `${this.widget_id}-model`;
         this.description_widget_id = `${this.widget_id}-description`;
@@ -18,9 +18,9 @@ export class AgentInfoWidget {
         this.append_to_agent_sidebar();
     }
     append_to_agent_sidebar() {
-        let agent_info = $("#agent-info");
-        agent_info.empty();
-        agent_info.append(this.widget);
+        let agent_info_container = $("#agent-info-container");
+        agent_info_container.empty();
+        agent_info_container.append(this.widget);
         document
             .getElementById(`${this.system_prompt_widget_id}`)
             .addEventListener(