work in progress, moved html to connection-ui.js, starting to move the relative methods. see #438
This commit is contained in:
Mic
parent
ef78043bb9
commit
c8d0d430d3
7 changed files with 819 additions and 567 deletions
|
|
@ -104,40 +104,6 @@ div#miczTranslate{
|
||||||
font-size:smaller;
|
font-size:smaller;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr.conntype_chatgpt_api, tr.conntype_chatgpt_api2{
|
|
||||||
background-color: rgb(185, 220, 252);
|
|
||||||
}
|
|
||||||
|
|
||||||
tr.conntype_chatgpt_web, tr.conntype_chatgpt_web2{
|
|
||||||
background-color: rgb(255, 209, 183);
|
|
||||||
}
|
|
||||||
|
|
||||||
tr.conntype_ollama_api, tr.conntype_ollama_api2{
|
|
||||||
background-color: rgb(177, 238, 169);
|
|
||||||
}
|
|
||||||
|
|
||||||
tr.conntype_openai_comp_api, tr.conntype_openai_comp_api2{
|
|
||||||
background-color: rgb(213, 169, 238);
|
|
||||||
}
|
|
||||||
|
|
||||||
tr.conntype_google_gemini_api, tr.conntype_google_gemini_api2{
|
|
||||||
background-color: rgb(233, 238, 169);
|
|
||||||
}
|
|
||||||
|
|
||||||
tr.conntype_anthropic_api, tr.conntype_anthropic_api2{
|
|
||||||
background-color: rgb(255, 168, 204);
|
|
||||||
}
|
|
||||||
|
|
||||||
#chatgpt_model_fetch_loading{
|
|
||||||
display: none;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
#google_gemini_model_fetch_loading{
|
|
||||||
display: none;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
#no_sparks td{
|
#no_sparks td{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 1em !important;
|
padding: 1em !important;
|
||||||
|
|
@ -149,48 +115,6 @@ textarea.option-textarea{
|
||||||
height: 10em;
|
height: 10em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.api_key-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.api_key-container input {
|
|
||||||
width: -moz-available;
|
|
||||||
margin-right: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="text"], input[type="password"]{
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input.option-input[type="text"]{
|
|
||||||
width: -moz-available;
|
|
||||||
}
|
|
||||||
|
|
||||||
.api_key-container .toggle-icon {
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ollama_model_fetch_loading{
|
|
||||||
display: none;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
#openai_comp_model_fetch_loading{
|
|
||||||
display: none;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
#anthropic_model_fetch_loading{
|
|
||||||
display: none;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
#owl_warning{
|
#owl_warning{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -235,10 +159,6 @@ input.option-input[type="text"]{
|
||||||
color: #FF6600;
|
color: #FF6600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.conntype_chatgpt_web_option{
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn_small{
|
.btn_small{
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="stylesheet" href="mzta-options.css">
|
<link rel="stylesheet" href="mzta-options.css">
|
||||||
|
<link rel="stylesheet" href="../pages/_lib/connection-ui.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="miczRelNotes"><a href="mzta-release-notes.html">__MSG_prefs_OptionText_release_notes__</a></div>
|
<div id="miczRelNotes"><a href="mzta-release-notes.html">__MSG_prefs_OptionText_release_notes__</a></div>
|
||||||
|
|
@ -113,368 +114,7 @@
|
||||||
</label>
|
</label>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr id="connection_ui_anchor"></tr>
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<span class="opt_title">__MSG_prefs_Connection_type__</span>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<select id="connection_type" name="connection_type" class="option-input"></select>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<tr class="conntype_chatgpt_web">
|
|
||||||
<td><label>
|
|
||||||
<span class="opt_title">__MSG_apiwebchat_info__</span>
|
|
||||||
</label></td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
__MSG_prefs_OptionText_chatgpt_web_br_replace_info__
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_chatgpt_web">
|
|
||||||
<td><label>
|
|
||||||
<span class="opt_title">__MSG_prefs_OptionText_chatgpt_web_model__</span>
|
|
||||||
<br><table title="__MSG_prefs_OptionText_chatgpt_web_model_tooltip__"><tr id="chatgpt_web_models_list"></tr></table>
|
|
||||||
</label></td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<input type="text" id="chatgpt_web_model" name="chatgpt_web_model" class="option-input" />
|
|
||||||
<br>__MSG_prefs_OptionText_chatgpt_web_model_info__
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_chatgpt_web">
|
|
||||||
<td><label>
|
|
||||||
<span class="opt_title">__MSG_prefs_OptionText_chatgpt_web_project__</span>
|
|
||||||
<br><i class="small_info" id="chatgpt_web_project_info">__MSG_prefs_OptionText_chatgpt_web_custom_data_info__ <b class="lightbold">/g/PROJECT-ID-PROJECT-NAME/project</b>
|
|
||||||
<br>__MSG_prefs_OptionText_chatgpt_web_custom_data_info2__</i>
|
|
||||||
</label></td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<input type="text" id="chatgpt_web_project" name="chatgpt_web_project" class="option-input" />
|
|
||||||
<br>__MSG_prefs_OptionText_chatgpt_web_project_info__
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_chatgpt_web">
|
|
||||||
<td><label>
|
|
||||||
<span class="opt_title">__MSG_prefs_OptionText_chatgpt_web_custom_gpt__</span>
|
|
||||||
<br><i class="small_info" id="chatgpt_web_custom_gpt_info">__MSG_prefs_OptionText_chatgpt_web_custom_data_info__ <b class="lightbold">/g/CUSTOM-GPT-ID</b>
|
|
||||||
<br>__MSG_prefs_OptionText_chatgpt_web_custom_data_info2__</i>
|
|
||||||
</label></td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<input type="text" id="chatgpt_web_custom_gpt" name="chatgpt_web_custom_gpt" class="option-input" />
|
|
||||||
<br>__MSG_prefs_OptionText_chatgpt_web_custom_gpt_info__
|
|
||||||
<br>__MSG_prefs_OptionText_CustomGPT_Warn__
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_chatgpt_web">
|
|
||||||
<td><label>
|
|
||||||
<span class="opt_title">__MSG_prefs_OptionText_chatgpt_web_tempchat__</span>
|
|
||||||
</label></td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" id="chatgpt_web_tempchat" name="chatgpt_web_tempchat" class="option-input" />
|
|
||||||
<span>__MSG_prefs_OptionText_chatgpt_web_tempchat_info__
|
|
||||||
<br>__MSG_prefs_OptionText_Project_No_temporary_chat_warn__
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_chatgpt_web">
|
|
||||||
<td colspan="2" style="padding:0px 2em;text-align:center;"><span>__MSG_OpenChatGPTTab_Info__</span>
|
|
||||||
<br><br><button id="btnChatGPTWeb_Tab">__MSG_OpenChatGPTTab__</button>
|
|
||||||
<br><br>__MSG_OpenChatGPTTab_Info2__
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_chatgpt_api">
|
|
||||||
<td><label>
|
|
||||||
<span class="opt_title">__MSG_prefs_ChatGPT_API_Key__</span>
|
|
||||||
</label></td>
|
|
||||||
<td>
|
|
||||||
<div class="api_key-container">
|
|
||||||
<label>
|
|
||||||
<input type="password" id="chatgpt_api_key" name="chatgpt_api_key" class="option-input"/>
|
|
||||||
</label>
|
|
||||||
<span class="toggle-icon" id="toggle_chatgpt_api_key"><img src="../images/pwd-show.png" id="pwd-icon_chatgpt_api_key"></span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_chatgpt_api">
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<span class="opt_title">__MSG_ChatGPT_Models__</span>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<button id="btnUpdateChatGPTModels">__MSG_ChatGPT_Models_Fetch__</button> <span id="chatgpt_model_fetch_loading">__MSG_Loading__</span><br>
|
|
||||||
<label>
|
|
||||||
<select id="chatgpt_model" name="chatgpt_model" class="option-input">
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_chatgpt_api">
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<span class="opt_title">__MSG_ChatGPT_chatgpt_api_store__</span>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" id="chatgpt_api_store" name="chatgpt_api_store" class="option-input" />
|
|
||||||
<span>__MSG_ChatGPT_chatgpt_api_store_info__</span>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_chatgpt_api">
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<span class="opt_title">__MSG_ChatGPT_Developer_Messages__</span>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<textarea id="chatgpt_developer_messages" name="chatgpt_developer_messages" class="option-input option-textarea"></textarea>
|
|
||||||
<br>__MSG_ChatGPT_Developer_Messages_Info__
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_google_gemini_api">
|
|
||||||
<td><label>
|
|
||||||
<span class="opt_title">__MSG_prefs_GoogleGemini_API_Key__</span>
|
|
||||||
</label></td>
|
|
||||||
<td>
|
|
||||||
<div class="api_key-container">
|
|
||||||
<label>
|
|
||||||
<input type="password" id="google_gemini_api_key" name="google_gemini_api_key" class="option-input"/>
|
|
||||||
</label>
|
|
||||||
<span class="toggle-icon" id="toggle_google_gemini_api_key"><img src="../images/pwd-show.png" id="pwd-icon_google_gemini_api_key"></span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_google_gemini_api">
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<span class="opt_title">__MSG_GoogleGemini_Models__</span>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<button id="btnUpdateGoogleGeminiModels">__MSG_GoogleGemini_Models_Fetch__</button> <span id="google_gemini_model_fetch_loading">__MSG_Loading__</span><br>
|
|
||||||
<label>
|
|
||||||
<select id="google_gemini_model" name="google_gemini_model" class="option-input">
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_google_gemini_api">
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<span class="opt_title">__MSG_GoogleGemini_SystemInstruction__</span>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<textarea id="google_gemini_system_instruction" name="google_gemini_system_instruction" class="option-input option-textarea"></textarea>
|
|
||||||
<br>__MSG_GoogleGemini_SystemInstruction_Info__
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_ollama_api">
|
|
||||||
<td><label>
|
|
||||||
<span class="opt_title">__MSG_prefs_API_Host__</span>
|
|
||||||
<br><i class="small_info">__MSG_prefs_API_Host_Info__ http://127.0.0.1:11434</i>
|
|
||||||
</label></td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<input type="text" id="ollama_host" name="ollama_host" class="option-input"/>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_ollama_api" id="ollama_api_cors_warning">
|
|
||||||
<td colspan="2" style="text-align:center;">
|
|
||||||
__MSG_remember_CORS__ [<a href="https://micz.it/thunderbird-addon-thunderai/ollama-cors-information/">__MSG_more_info_string__</a>]
|
|
||||||
<br><br><b>__MSG_CORS_alternative_1__</b>
|
|
||||||
<br>__MSG_CORS_alternative_2__
|
|
||||||
<br><br><button id="btnGiveAllUrlsPermission_ollama_api">__MSG_CORS_give_allurls_perm__</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_ollama_api">
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<span class="opt_title">__MSG_Ollama_Models__</span>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<button id="btnUpdateOllamaModels">__MSG_Ollama_Models_Fetch__</button> <span id="ollama_model_fetch_loading">__MSG_Loading__</span><br>
|
|
||||||
<label>
|
|
||||||
<select id="ollama_model" name="ollama_model" class="option-input">
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_ollama_api">
|
|
||||||
<td><label>
|
|
||||||
<span class="opt_title">__MSG_prefs_ollama_think__</span>
|
|
||||||
</label></td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" id="ollama_think" name="ollama_think" class="option-input"/>
|
|
||||||
__MSG_prefs_ollama_think_Info__
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_ollama_api">
|
|
||||||
<td><label>
|
|
||||||
<span class="opt_title">__MSG_prefs_ollama_num_ctx__ <i>[num_ctx]</i></span>
|
|
||||||
</label></td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<input type="number" id="ollama_num_ctx" name="ollama_num_ctx" class="option-input"/>
|
|
||||||
<br>__MSG_prefs_ollama_num_ctx_Info__
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_openai_comp_api">
|
|
||||||
<td><label>
|
|
||||||
<span class="opt_title">__MSG_prefs_OpenAIComp_AvailableServices__</span>
|
|
||||||
</label></td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<select id="openai_comp_services_shortcut">
|
|
||||||
</select>
|
|
||||||
<br>__MSG_prefs_OpenAIComp_AvailableServices_Info__
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_openai_comp_api">
|
|
||||||
<td><label>
|
|
||||||
<span class="opt_title">__MSG_prefs_API_Host__</span>
|
|
||||||
<br><i class="small_info">__MSG_prefs_API_Host_Info__ http://localhost:1234</i>
|
|
||||||
</label></td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<input type="text" id="openai_comp_host" name="openai_comp_host" class="option-input" />
|
|
||||||
<br>__MSG_prefs_OptionText_openai_comp_info_remote__
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_openai_comp_api" id="openai_comp_api_cors_warning">
|
|
||||||
<td colspan="2" style="text-align:center;">
|
|
||||||
__MSG_maybe_CORS_openai_comp__ [<a href="https://micz.it/thunderbird-addon-thunderai/ollama-cors-information/">__MSG_more_info_string__</a>]
|
|
||||||
<br><br><b>__MSG_CORS_alternative_1__</b>
|
|
||||||
<br>__MSG_CORS_alternative_2__
|
|
||||||
<br><br><button id="btnGiveAllUrlsPermission_openai_comp_api">__MSG_CORS_give_allurls_perm__</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_openai_comp_api">
|
|
||||||
<td><label>
|
|
||||||
<span class="opt_title">__MSG_prefs_OptionText_openai_comp_use_v1__</span>
|
|
||||||
</label></td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" id="openai_comp_use_v1" name="openai_comp_use_v1" class="option-input" />
|
|
||||||
<span>__MSG_prefs_OptionText_openai_comp_use_v1_info__</span>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_openai_comp_api">
|
|
||||||
<td><label>
|
|
||||||
<span class="opt_title">__MSG_prefs_OpenAIComp_API_Key__</span>
|
|
||||||
<br><i class="small_info">__MSG_Optional__</i>
|
|
||||||
</label></td>
|
|
||||||
<td>
|
|
||||||
<div class="api_key-container">
|
|
||||||
<label>
|
|
||||||
<input type="password" id="openai_comp_api_key" name="openai_comp_api_key" class="option-input"/>
|
|
||||||
</label>
|
|
||||||
<span class="toggle-icon" id="toggle_openai_comp_api_key"><img src="../images/pwd-show.png" id="pwd-icon_openai_comp_api_key"></span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_openai_comp_api">
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<span class="opt_title">__MSG_OpenAIComp_Models__</span>
|
|
||||||
<br><button id="btnOpenAICompForceModel" class="btn_small">__MSG_prefs_OpenAIComp_ForceModel__</button>
|
|
||||||
<br><button id="btnOpenAICompClearModelsList" class="btn_small">__MSG_prefs_OpenAIComp_ClearModelsList__</button></td>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<button id="btnUpdateOpenAICompModels">__MSG_OpenAIComp_Models_Fetch__</button> <span id="openai_comp_model_fetch_loading">__MSG_Loading__</span><br>
|
|
||||||
<label>
|
|
||||||
<select id="openai_comp_model" name="openai_comp_model" class="option-input">
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_openai_comp_api">
|
|
||||||
<td><label>
|
|
||||||
<span class="opt_title">__MSG_prefs_OpenAIComp_ChatName__</span>
|
|
||||||
</label></td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<input type="text" id="openai_comp_chat_name" name="openai_comp_chat_name" class="option-input" />
|
|
||||||
<br>__MSG_prefs_OpenAIComp_ChatName_Info__
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_anthropic_api">
|
|
||||||
<td><label>
|
|
||||||
<span class="opt_title">__MSG_prefs_Anthropic_API_Key__</span>
|
|
||||||
</label></td>
|
|
||||||
<td>
|
|
||||||
<div class="api_key-container">
|
|
||||||
<label>
|
|
||||||
<input type="password" id="anthropic_api_key" name="anthropic_api_key" class="option-input"/>
|
|
||||||
</label>
|
|
||||||
<span class="toggle-icon" id="toggle_anthropic_api_key"><img src="../images/pwd-show.png" id="pwd-icon_anthropic_api_key"></span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_anthropic_api">
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<span class="opt_title">__MSG_Anthropic_Models__</span>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<button id="btnUpdateAnthropicModels">__MSG_Anthropic_Models_Fetch__</button> <span id="anthropic_model_fetch_loading">__MSG_Loading__</span><br>
|
|
||||||
<label>
|
|
||||||
<select id="anthropic_model" name="anthropic_model" class="option-input">
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_anthropic_api">
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<span class="opt_title">__MSG_Anthropic_Version__</span>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<input type="text" id="anthropic_version" name="anthropic_version" class="option-input" />
|
|
||||||
<br>__MSG_Anthropic_Version_Info__ <a href="https://docs.anthropic.com/en/api/versioning">https://docs.anthropic.com/en/api/versioning</a>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="conntype_anthropic_api">
|
|
||||||
<td><span class="opt_title">__MSG_prefs_OptionText_anthropic_max_tokens__</span></td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<input type="number" id="anthropic_max_tokens" name="anthropic_max_tokens" class="option-input" />
|
|
||||||
<br>__MSG_prefs_OptionText_anthropic_max_tokens_Info__
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr id="max_prompt_length_tr">
|
<tr id="max_prompt_length_tr">
|
||||||
<td><span class="opt_title">__MSG_prefs_OptionText_max_prompt_length__</span></td>
|
<td><span class="opt_title">__MSG_prefs_OptionText_max_prompt_length__</span></td>
|
||||||
<td>
|
<td>
|
||||||
|
|
|
||||||
|
|
@ -23,12 +23,12 @@ import { Ollama } from '../js/api/ollama.js';
|
||||||
import { OpenAIComp } from '../js/api/openai_comp.js'
|
import { OpenAIComp } from '../js/api/openai_comp.js'
|
||||||
import { GoogleGemini } from '../js/api/google_gemini.js';
|
import { GoogleGemini } from '../js/api/google_gemini.js';
|
||||||
import { Anthropic } from '../js/api/anthropic.js';
|
import { Anthropic } from '../js/api/anthropic.js';
|
||||||
import { ChatGPTWeb_models, checkSparksPresence, isThunderbird128OrGreater, openTab, sanitizeChatGPTModelData, sanitizeChatGPTWebCustomData, validateCustomData_ChatGPTWeb, getChatGPTWebModelsList_HTML, populateConnectionTypeOptions } from '../js/mzta-utils.js';
|
import { ChatGPTWeb_models, checkSparksPresence, isThunderbird128OrGreater, openTab, sanitizeChatGPTModelData, sanitizeChatGPTWebCustomData, validateCustomData_ChatGPTWeb, getChatGPTWebModelsList_HTML, isAPIKeyValue } from '../js/mzta-utils.js';
|
||||||
import { openAICompConfigs } from '../js/api/openai_comp_configs.js';
|
import { openAICompConfigs } from '../js/api/openai_comp_configs.js';
|
||||||
|
import { injectConnectionUI, varConnectionUI, showConnectionOptions } from '../pages/_lib/connection-ui.js';
|
||||||
|
|
||||||
let taLog = new taLogger("mzta-options",true);
|
let taLog = new taLogger("mzta-options",true);
|
||||||
let _isThunderbird128OrGreater = true;
|
let _isThunderbird128OrGreater = true;
|
||||||
let permission_all_urls = false;
|
|
||||||
|
|
||||||
function saveOptions(e) {
|
function saveOptions(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
@ -70,7 +70,7 @@ function saveOptions(e) {
|
||||||
async function restoreOptions() {
|
async function restoreOptions() {
|
||||||
function setCurrentChoice(result) {
|
function setCurrentChoice(result) {
|
||||||
document.querySelectorAll(".option-input").forEach(element => {
|
document.querySelectorAll(".option-input").forEach(element => {
|
||||||
taLog.log("Options restoring " + element.id + " = " + (element.id=="chatgpt_api_key" || element.id=="openai_comp_api_key" || element.id=="google_gemini_api_key" || element.id=="anthropic_api_key" ? "****************" : result[element.id]));
|
taLog.log("Options restoring " + element.id + " = " + (isAPIKeyValue(element.id) ? "****************" : result[element.id]));
|
||||||
switch (element.type) {
|
switch (element.type) {
|
||||||
case 'checkbox':
|
case 'checkbox':
|
||||||
element.checked = result[element.id] || false;
|
element.checked = result[element.id] || false;
|
||||||
|
|
@ -109,79 +109,6 @@ async function restoreOptions() {
|
||||||
setCurrentChoice(getting);
|
setCurrentChoice(getting);
|
||||||
}
|
}
|
||||||
|
|
||||||
function showConnectionOptions() {
|
|
||||||
disable_MaxPromptLength();
|
|
||||||
disable_AddTags();
|
|
||||||
disable_SpamFilter();
|
|
||||||
disable_GetCalendarEvent();
|
|
||||||
let chatgpt_web_display = 'table-row';
|
|
||||||
let chatgpt_api_display = 'none';
|
|
||||||
let ollama_api_display = 'none';
|
|
||||||
let openai_comp_api_display = 'none';
|
|
||||||
let google_gemini_api_display = 'none';
|
|
||||||
let anthropic_api_display = 'none';
|
|
||||||
let conntype_select = document.getElementById("connection_type");
|
|
||||||
let parent = conntype_select.parentElement.parentElement.parentElement;
|
|
||||||
parent.classList.toggle("conntype_chatgpt_web", (conntype_select.value === "chatgpt_web"));
|
|
||||||
parent.classList.toggle("conntype_chatgpt_api", (conntype_select.value === "chatgpt_api"));
|
|
||||||
parent.classList.toggle("conntype_ollama_api", (conntype_select.value === "ollama_api"));
|
|
||||||
parent.classList.toggle("conntype_openai_comp_api", (conntype_select.value === "openai_comp_api"));
|
|
||||||
parent.classList.toggle("conntype_google_gemini_api", (conntype_select.value === "google_gemini_api"));
|
|
||||||
parent.classList.toggle("conntype_anthropic_api", (conntype_select.value === "anthropic_api"));
|
|
||||||
if (conntype_select.value === "chatgpt_web") {
|
|
||||||
chatgpt_web_display = 'table-row';
|
|
||||||
}else{
|
|
||||||
chatgpt_web_display = 'none';
|
|
||||||
}
|
|
||||||
if (conntype_select.value === "chatgpt_api") {
|
|
||||||
chatgpt_api_display = 'table-row';
|
|
||||||
}else{
|
|
||||||
chatgpt_api_display = 'none';
|
|
||||||
}
|
|
||||||
if (conntype_select.value === "ollama_api") {
|
|
||||||
ollama_api_display = 'table-row';
|
|
||||||
}else{
|
|
||||||
ollama_api_display = 'none';
|
|
||||||
}
|
|
||||||
if (conntype_select.value === "openai_comp_api") {
|
|
||||||
openai_comp_api_display = 'table-row';
|
|
||||||
}else{
|
|
||||||
openai_comp_api_display = 'none';
|
|
||||||
}
|
|
||||||
if (conntype_select.value === "google_gemini_api") {
|
|
||||||
google_gemini_api_display = 'table-row';
|
|
||||||
}else{
|
|
||||||
google_gemini_api_display = 'none';
|
|
||||||
}
|
|
||||||
if (conntype_select.value === "anthropic_api") {
|
|
||||||
anthropic_api_display = 'table-row';
|
|
||||||
}else{
|
|
||||||
anthropic_api_display = 'none';
|
|
||||||
}
|
|
||||||
document.querySelectorAll(".conntype_chatgpt_web").forEach(element => {
|
|
||||||
element.style.display = chatgpt_web_display;
|
|
||||||
});
|
|
||||||
document.querySelectorAll(".conntype_chatgpt_api").forEach(element => {
|
|
||||||
element.style.display = chatgpt_api_display;
|
|
||||||
});
|
|
||||||
document.querySelectorAll(".conntype_ollama_api").forEach(element => {
|
|
||||||
element.style.display = ollama_api_display;
|
|
||||||
});
|
|
||||||
document.querySelectorAll(".conntype_openai_comp_api").forEach(element => {
|
|
||||||
element.style.display = openai_comp_api_display;
|
|
||||||
});
|
|
||||||
document.querySelectorAll(".conntype_google_gemini_api").forEach(element => {
|
|
||||||
element.style.display = google_gemini_api_display;
|
|
||||||
});
|
|
||||||
document.querySelectorAll(".conntype_anthropic_api").forEach(element => {
|
|
||||||
element.style.display = anthropic_api_display;
|
|
||||||
});
|
|
||||||
if (permission_all_urls) {
|
|
||||||
document.getElementById('openai_comp_api_cors_warning').style.display = 'none';
|
|
||||||
document.getElementById('ollama_api_cors_warning').style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function warn_ChatGPT_APIKeyEmpty() {
|
function warn_ChatGPT_APIKeyEmpty() {
|
||||||
let apiKeyInput = document.getElementById('chatgpt_api_key');
|
let apiKeyInput = document.getElementById('chatgpt_api_key');
|
||||||
let btnFetchChatGPTModels = document.getElementById('btnUpdateChatGPTModels');
|
let btnFetchChatGPTModels = document.getElementById('btnUpdateChatGPTModels');
|
||||||
|
|
@ -405,10 +332,10 @@ function resetMaxPromptLength(){
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', async () => {
|
document.addEventListener('DOMContentLoaded', async () => {
|
||||||
populateConnectionTypeOptions('connection_type');
|
injectConnectionUI({ afterTrId: 'connection_ui_anchor', selectId: 'connection_type' });
|
||||||
await restoreOptions();
|
await restoreOptions();
|
||||||
|
|
||||||
permission_all_urls = await messenger.permissions.contains({ origins: ["<all_urls>"] })
|
varConnectionUI.permission_all_urls = await messenger.permissions.contains({ origins: ["<all_urls>"] })
|
||||||
|
|
||||||
_isThunderbird128OrGreater = await isThunderbird128OrGreater();
|
_isThunderbird128OrGreater = await isThunderbird128OrGreater();
|
||||||
|
|
||||||
|
|
@ -503,38 +430,38 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||||
openTab('/pages/get-task/mzta-get-task.html');
|
openTab('/pages/get-task/mzta-get-task.html');
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById('btnOpenAICompForceModel').addEventListener('click', () => {
|
// document.getElementById('btnOpenAICompForceModel').addEventListener('click', () => {
|
||||||
let modelName = prompt(browser.i18n.getMessage('OpenAIComp_force_model_ask')).trim();
|
// let modelName = prompt(browser.i18n.getMessage('OpenAIComp_force_model_ask')).trim();
|
||||||
if ((modelName !== null) && (modelName !== undefined) && (modelName !== '')) {
|
// if ((modelName !== null) && (modelName !== undefined) && (modelName !== '')) {
|
||||||
let select_openai_comp_model = document.getElementById('openai_comp_model');
|
// let select_openai_comp_model = document.getElementById('openai_comp_model');
|
||||||
let option = document.createElement('option');
|
// let option = document.createElement('option');
|
||||||
option.value = modelName;
|
// option.value = modelName;
|
||||||
option.text = modelName;
|
// option.text = modelName;
|
||||||
select_openai_comp_model.appendChild(option);
|
// select_openai_comp_model.appendChild(option);
|
||||||
select_openai_comp_model.value = modelName;
|
// select_openai_comp_model.value = modelName;
|
||||||
select_openai_comp_model.dispatchEvent(new Event('change', { bubbles: true }));
|
// select_openai_comp_model.dispatchEvent(new Event('change', { bubbles: true }));
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
|
|
||||||
document.getElementById('btnOpenAICompClearModelsList').addEventListener('click', () => {
|
// document.getElementById('btnOpenAICompClearModelsList').addEventListener('click', () => {
|
||||||
if (!confirm(browser.i18n.getMessage('OpenAIComp_ClearModelsList_Confirm'))) {
|
// if (!confirm(browser.i18n.getMessage('OpenAIComp_ClearModelsList_Confirm'))) {
|
||||||
return;
|
// return;
|
||||||
}
|
// }
|
||||||
let select_openai_comp_model = document.getElementById('openai_comp_model');
|
// let select_openai_comp_model = document.getElementById('openai_comp_model');
|
||||||
while (select_openai_comp_model.options.length > 0) {
|
// while (select_openai_comp_model.options.length > 0) {
|
||||||
select_openai_comp_model.remove(0);
|
// select_openai_comp_model.remove(0);
|
||||||
}
|
// }
|
||||||
select_openai_comp_model.value = '';
|
// select_openai_comp_model.value = '';
|
||||||
select_openai_comp_model.dispatchEvent(new Event('change', { bubbles: true }));
|
// select_openai_comp_model.dispatchEvent(new Event('change', { bubbles: true }));
|
||||||
});
|
// });
|
||||||
|
|
||||||
document.getElementById('btnGiveAllUrlsPermission_ollama_api').addEventListener('click', async () => {
|
// document.getElementById('btnGiveAllUrlsPermission_ollama_api').addEventListener('click', async () => {
|
||||||
permission_all_urls = await messenger.permissions.request({ origins: ["<all_urls>"] });
|
// permission_all_urls = await messenger.permissions.request({ origins: ["<all_urls>"] });
|
||||||
});
|
// });
|
||||||
|
|
||||||
document.getElementById('btnGiveAllUrlsPermission_openai_comp_api').addEventListener('click', async () => {
|
// document.getElementById('btnGiveAllUrlsPermission_openai_comp_api').addEventListener('click', async () => {
|
||||||
permission_all_urls = await messenger.permissions.request({ origins: ["<all_urls>"] });
|
// permission_all_urls = await messenger.permissions.request({ origins: ["<all_urls>"] });
|
||||||
});
|
// });
|
||||||
|
|
||||||
getChatGPTWebModelsList_HTML(ChatGPTWeb_models, 'chatgpt_web_models_list');
|
getChatGPTWebModelsList_HTML(ChatGPTWeb_models, 'chatgpt_web_models_list');
|
||||||
document.querySelectorAll(".conntype_chatgpt_web_option").forEach(element => {
|
document.querySelectorAll(".conntype_chatgpt_web_option").forEach(element => {
|
||||||
|
|
@ -546,13 +473,13 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
let conntype_select = document.getElementById("connection_type");
|
let conntype_select = document.getElementById("connection_type");
|
||||||
conntype_select.addEventListener("change", showConnectionOptions);
|
|
||||||
conntype_select.addEventListener("change", warn_ChatGPT_APIKeyEmpty);
|
conntype_select.addEventListener("change", warn_ChatGPT_APIKeyEmpty);
|
||||||
conntype_select.addEventListener("change", warn_Ollama_HostEmpty);
|
conntype_select.addEventListener("change", warn_Ollama_HostEmpty);
|
||||||
conntype_select.addEventListener("change", warn_OpenAIComp_HostEmpty);
|
conntype_select.addEventListener("change", warn_OpenAIComp_HostEmpty);
|
||||||
conntype_select.addEventListener("change", warn_GoogleGemini_APIKeyEmpty);
|
conntype_select.addEventListener("change", warn_GoogleGemini_APIKeyEmpty);
|
||||||
conntype_select.addEventListener("change", warn_Anthropic_APIKeyEmpty);
|
conntype_select.addEventListener("change", warn_Anthropic_APIKeyEmpty);
|
||||||
conntype_select.addEventListener("change", warn_Anthropic_VersionEmpty);
|
conntype_select.addEventListener("change", warn_Anthropic_VersionEmpty);
|
||||||
|
conntype_select.addEventListener("change", disable_MaxPromptLength);
|
||||||
conntype_select.addEventListener("change", disable_AddTags);
|
conntype_select.addEventListener("change", disable_AddTags);
|
||||||
conntype_select.addEventListener("change", disable_SpamFilter);
|
conntype_select.addEventListener("change", disable_SpamFilter);
|
||||||
conntype_select.addEventListener("change", disable_GetCalendarEvent);
|
conntype_select.addEventListener("change", disable_GetCalendarEvent);
|
||||||
|
|
@ -568,7 +495,12 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||||
document.getElementById("openai_comp_chat_name").addEventListener("input", resetOpenAICompConfigs);
|
document.getElementById("openai_comp_chat_name").addEventListener("input", resetOpenAICompConfigs);
|
||||||
document.getElementById("openai_comp_use_v1").addEventListener("input", resetOpenAICompConfigs);
|
document.getElementById("openai_comp_use_v1").addEventListener("input", resetOpenAICompConfigs);
|
||||||
|
|
||||||
|
showConnectionOptions(conntype_select);
|
||||||
|
disable_MaxPromptLength();
|
||||||
|
disable_AddTags();
|
||||||
|
disable_SpamFilter();
|
||||||
|
disable_GetCalendarEvent();
|
||||||
|
|
||||||
let prefs = await browser.storage.sync.get({chatgpt_web_model: '', chatgpt_model: '', ollama_model: '', openai_comp_model: '', google_gemini_model: '', anthropic_model: '', anthropic_version: '', chatgpt_win_height: 0, chatgpt_win_width: 0 });
|
let prefs = await browser.storage.sync.get({chatgpt_web_model: '', chatgpt_model: '', ollama_model: '', openai_comp_model: '', google_gemini_model: '', anthropic_model: '', anthropic_version: '', chatgpt_win_height: 0, chatgpt_win_width: 0 });
|
||||||
|
|
||||||
// OpenAI API ChatGPT model fetching
|
// OpenAI API ChatGPT model fetching
|
||||||
|
|
@ -793,14 +725,12 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||||
warn_Anthropic_APIKeyEmpty();
|
warn_Anthropic_APIKeyEmpty();
|
||||||
});
|
});
|
||||||
|
|
||||||
showConnectionOptions();
|
|
||||||
warn_ChatGPT_APIKeyEmpty();
|
warn_ChatGPT_APIKeyEmpty();
|
||||||
warn_Ollama_HostEmpty();
|
warn_Ollama_HostEmpty();
|
||||||
warn_OpenAIComp_HostEmpty();
|
warn_OpenAIComp_HostEmpty();
|
||||||
warn_GoogleGemini_APIKeyEmpty();
|
warn_GoogleGemini_APIKeyEmpty();
|
||||||
warn_Anthropic_APIKeyEmpty();
|
warn_Anthropic_APIKeyEmpty();
|
||||||
warn_Anthropic_VersionEmpty();
|
warn_Anthropic_VersionEmpty();
|
||||||
disable_MaxPromptLength();
|
|
||||||
disable_AddTags();
|
disable_AddTags();
|
||||||
disable_SpamFilter();
|
disable_SpamFilter();
|
||||||
disable_GetCalendarEvent();
|
disable_GetCalendarEvent();
|
||||||
|
|
|
||||||
109
pages/_lib/connection-ui.css
Normal file
109
pages/_lib/connection-ui.css
Normal file
|
|
@ -0,0 +1,109 @@
|
||||||
|
tr.conntype_chatgpt_api, tr.conntype_chatgpt_api2{
|
||||||
|
background-color: rgb(185, 220, 252);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.conntype_chatgpt_web, tr.conntype_chatgpt_web2{
|
||||||
|
background-color: rgb(255, 209, 183);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.conntype_ollama_api, tr.conntype_ollama_api2{
|
||||||
|
background-color: rgb(177, 238, 169);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.conntype_openai_comp_api, tr.conntype_openai_comp_api2{
|
||||||
|
background-color: rgb(213, 169, 238);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.conntype_google_gemini_api, tr.conntype_google_gemini_api2{
|
||||||
|
background-color: rgb(233, 238, 169);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.conntype_anthropic_api, tr.conntype_anthropic_api2{
|
||||||
|
background-color: rgb(255, 168, 204);
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatgpt_model_fetch_loading{
|
||||||
|
display: none;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
#google_gemini_model_fetch_loading{
|
||||||
|
display: none;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.api_key-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.api_key-container input {
|
||||||
|
width: -moz-available;
|
||||||
|
margin-right: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"], input[type="password"]{
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.option-input[type="text"]{
|
||||||
|
width: -moz-available;
|
||||||
|
}
|
||||||
|
|
||||||
|
.api_key-container .toggle-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ollama_model_fetch_loading{
|
||||||
|
display: none;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
#openai_comp_model_fetch_loading{
|
||||||
|
display: none;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
#anthropic_model_fetch_loading{
|
||||||
|
display: none;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conntype_chatgpt_web_option{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
tr.conntype_chatgpt_api, tr.conntype_chatgpt_api2{
|
||||||
|
background-color: rgb(0, 0, 58);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.conntype_chatgpt_web,tr.conntype_chatgpt_web2{
|
||||||
|
background-color: rgb(39, 11, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.conntype_ollama_api, tr.conntype_ollama_api2{
|
||||||
|
background-color: rgb(7, 58, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.conntype_openai_comp_api, tr.conntype_openai_comp_api2{
|
||||||
|
background-color: rgb(89, 20, 129);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.conntype_google_gemini_api, tr.conntype_google_gemini_api2{
|
||||||
|
background-color: rgb(72, 77, 3);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.conntype_anthropic_api, tr.conntype_anthropic_api2{
|
||||||
|
background-color: rgb(83, 0, 35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.api_key-container .toggle-icon img {
|
||||||
|
filter: invert(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
652
pages/_lib/connection-ui.js
Normal file
652
pages/_lib/connection-ui.js
Normal file
|
|
@ -0,0 +1,652 @@
|
||||||
|
// connection-ui.js
|
||||||
|
// Public API:
|
||||||
|
// injectConnectionUI({ afterTrId, groupId?, selectId?, defaultType?, idSuffix?, onTypeChange? })
|
||||||
|
//
|
||||||
|
// All variable names and comments are in English.
|
||||||
|
// It generates the connection type UI rows and handles basic show/hide behavior.
|
||||||
|
|
||||||
|
export const varConnectionUI = {
|
||||||
|
permission_all_urls: false
|
||||||
|
}
|
||||||
|
|
||||||
|
export function injectConnectionUI({
|
||||||
|
afterTrId = '',
|
||||||
|
selectId = '',
|
||||||
|
no_chatgpt_web = false,
|
||||||
|
defaultType = '',
|
||||||
|
tr_class = '',
|
||||||
|
} = {}) {
|
||||||
|
|
||||||
|
const anchorTr = document.getElementById(afterTrId);
|
||||||
|
if (!anchorTr) {
|
||||||
|
console.error(`[ThuderAI | injectConnectionUI] Can't find tr#${afterTrId}`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
let tpl = `
|
||||||
|
<tr ${tr_class}>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<span class="opt_title">__MSG_prefs_Connection_type__</span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<select id="${selectId}" name="${selectId}" class="option-input"></select>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_chatgpt_web">
|
||||||
|
<td><label>
|
||||||
|
<span class="opt_title">__MSG_apiwebchat_info__</span>
|
||||||
|
</label></td>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
__MSG_prefs_OptionText_chatgpt_web_br_replace_info__
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_chatgpt_web">
|
||||||
|
<td><label>
|
||||||
|
<span class="opt_title">__MSG_prefs_OptionText_chatgpt_web_model__</span>
|
||||||
|
<br><table title="__MSG_prefs_OptionText_chatgpt_web_model_tooltip__"><tr id="chatgpt_web_models_list"></tr></table>
|
||||||
|
</label></td>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<input type="text" id="chatgpt_web_model" name="chatgpt_web_model" class="option-input" />
|
||||||
|
<br>__MSG_prefs_OptionText_chatgpt_web_model_info__
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_chatgpt_web">
|
||||||
|
<td><label>
|
||||||
|
<span class="opt_title">__MSG_prefs_OptionText_chatgpt_web_project__</span>
|
||||||
|
<br><i class="small_info" id="chatgpt_web_project_info">__MSG_prefs_OptionText_chatgpt_web_custom_data_info__ <b class="lightbold">/g/PROJECT-ID-PROJECT-NAME/project</b>
|
||||||
|
<br>__MSG_prefs_OptionText_chatgpt_web_custom_data_info2__</i>
|
||||||
|
</label></td>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<input type="text" id="chatgpt_web_project" name="chatgpt_web_project" class="option-input" />
|
||||||
|
<br>__MSG_prefs_OptionText_chatgpt_web_project_info__
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_chatgpt_web">
|
||||||
|
<td><label>
|
||||||
|
<span class="opt_title">__MSG_prefs_OptionText_chatgpt_web_custom_gpt__</span>
|
||||||
|
<br><i class="small_info" id="chatgpt_web_custom_gpt_info">__MSG_prefs_OptionText_chatgpt_web_custom_data_info__ <b class="lightbold">/g/CUSTOM-GPT-ID</b>
|
||||||
|
<br>__MSG_prefs_OptionText_chatgpt_web_custom_data_info2__</i>
|
||||||
|
</label></td>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<input type="text" id="chatgpt_web_custom_gpt" name="chatgpt_web_custom_gpt" class="option-input" />
|
||||||
|
<br>__MSG_prefs_OptionText_chatgpt_web_custom_gpt_info__
|
||||||
|
<br>__MSG_prefs_OptionText_CustomGPT_Warn__
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_chatgpt_web">
|
||||||
|
<td><label>
|
||||||
|
<span class="opt_title">__MSG_prefs_OptionText_chatgpt_web_tempchat__</span>
|
||||||
|
</label></td>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="chatgpt_web_tempchat" name="chatgpt_web_tempchat" class="option-input" />
|
||||||
|
<span>__MSG_prefs_OptionText_chatgpt_web_tempchat_info__
|
||||||
|
<br>__MSG_prefs_OptionText_Project_No_temporary_chat_warn__
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_chatgpt_web">
|
||||||
|
<td colspan="2" style="padding:0px 2em;text-align:center;"><span>__MSG_OpenChatGPTTab_Info__</span>
|
||||||
|
<br><br><button id="btnChatGPTWeb_Tab">__MSG_OpenChatGPTTab__</button>
|
||||||
|
<br><br>__MSG_OpenChatGPTTab_Info2__
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_chatgpt_api">
|
||||||
|
<td><label>
|
||||||
|
<span class="opt_title">__MSG_prefs_ChatGPT_API_Key__</span>
|
||||||
|
</label></td>
|
||||||
|
<td>
|
||||||
|
<div class="api_key-container">
|
||||||
|
<label>
|
||||||
|
<input type="password" id="chatgpt_api_key" name="chatgpt_api_key" class="option-input"/>
|
||||||
|
</label>
|
||||||
|
<span class="toggle-icon" id="toggle_chatgpt_api_key"><img src="/images/pwd-show.png" id="pwd-icon_chatgpt_api_key"></span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_chatgpt_api">
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<span class="opt_title">__MSG_ChatGPT_Models__</span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button id="btnUpdateChatGPTModels">__MSG_ChatGPT_Models_Fetch__</button> <span id="chatgpt_model_fetch_loading">__MSG_Loading__</span><br>
|
||||||
|
<label>
|
||||||
|
<select id="chatgpt_model" name="chatgpt_model" class="option-input"></select>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_chatgpt_api">
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<span class="opt_title">__MSG_ChatGPT_chatgpt_api_store__</span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="chatgpt_api_store" name="chatgpt_api_store" class="option-input" />
|
||||||
|
<span>__MSG_ChatGPT_chatgpt_api_store_info__</span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_chatgpt_api">
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<span class="opt_title">__MSG_ChatGPT_Developer_Messages__</span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<textarea id="chatgpt_developer_messages" name="chatgpt_developer_messages" class="option-input option-textarea"></textarea>
|
||||||
|
<br>__MSG_ChatGPT_Developer_Messages_Info__
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_google_gemini_api">
|
||||||
|
<td><label>
|
||||||
|
<span class="opt_title">__MSG_prefs_GoogleGemini_API_Key__</span>
|
||||||
|
</label></td>
|
||||||
|
<td>
|
||||||
|
<div class="api_key-container">
|
||||||
|
<label>
|
||||||
|
<input type="password" id="google_gemini_api_key" name="google_gemini_api_key" class="option-input"/>
|
||||||
|
</label>
|
||||||
|
<span class="toggle-icon" id="toggle_google_gemini_api_key"><img src="/images/pwd-show.png" id="pwd-icon_google_gemini_api_key"></span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_google_gemini_api">
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<span class="opt_title">__MSG_GoogleGemini_Models__</span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button id="btnUpdateGoogleGeminiModels">__MSG_GoogleGemini_Models_Fetch__</button> <span id="google_gemini_model_fetch_loading">__MSG_Loading__</span><br>
|
||||||
|
<label>
|
||||||
|
<select id="google_gemini_model" name="google_gemini_model" class="option-input"></select>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_google_gemini_api">
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<span class="opt_title">__MSG_GoogleGemini_SystemInstruction__</span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<textarea id="google_gemini_system_instruction" name="google_gemini_system_instruction" class="option-input option-textarea"></textarea>
|
||||||
|
<br>__MSG_GoogleGemini_SystemInstruction_Info__
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_ollama_api">
|
||||||
|
<td><label>
|
||||||
|
<span class="opt_title">__MSG_prefs_API_Host__</span>
|
||||||
|
<br><i class="small_info">__MSG_prefs_API_Host_Info__ http://127.0.0.1:11434</i>
|
||||||
|
</label></td>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<input type="text" id="ollama_host" name="ollama_host" class="option-input"/>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_ollama_api" id="ollama_api_cors_warning">
|
||||||
|
<td colspan="2" style="text-align:center;">
|
||||||
|
__MSG_remember_CORS__ [<a href="https://micz.it/thunderbird-addon-thunderai/ollama-cors-information/">__MSG_more_info_string__</a>]
|
||||||
|
<br><br><b>__MSG_CORS_alternative_1__</b>
|
||||||
|
<br>__MSG_CORS_alternative_2__
|
||||||
|
<br><br><button id="btnGiveAllUrlsPermission_ollama_api">__MSG_CORS_give_allurls_perm__</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_ollama_api">
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<span class="opt_title">__MSG_Ollama_Models__</span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button id="btnUpdateOllamaModels">__MSG_Ollama_Models_Fetch__</button> <span id="ollama_model_fetch_loading">__MSG_Loading__</span><br>
|
||||||
|
<label>
|
||||||
|
<select id="ollama_model" name="ollama_model" class="option-input"></select>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_ollama_api">
|
||||||
|
<td><label>
|
||||||
|
<span class="opt_title">__MSG_prefs_ollama_think__</span>
|
||||||
|
</label></td>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="ollama_think" name="ollama_think" class="option-input"/>
|
||||||
|
__MSG_prefs_ollama_think_Info__
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_ollama_api">
|
||||||
|
<td><label>
|
||||||
|
<span class="opt_title">__MSG_prefs_ollama_num_ctx__ <i>[num_ctx]</i></span>
|
||||||
|
</label></td>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<input type="number" id="ollama_num_ctx" name="ollama_num_ctx" class="option-input"/>
|
||||||
|
<br>__MSG_prefs_ollama_num_ctx_Info__
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_openai_comp_api">
|
||||||
|
<td><label>
|
||||||
|
<span class="opt_title">__MSG_prefs_OpenAIComp_AvailableServices__</span>
|
||||||
|
</label></td>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<select id="openai_comp_services_shortcut"></select>
|
||||||
|
<br>__MSG_prefs_OpenAIComp_AvailableServices_Info__
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_openai_comp_api">
|
||||||
|
<td><label>
|
||||||
|
<span class="opt_title">__MSG_prefs_API_Host__</span>
|
||||||
|
<br><i class="small_info">__MSG_prefs_API_Host_Info__ http://localhost:1234</i>
|
||||||
|
</label></td>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<input type="text" id="openai_comp_host" name="openai_comp_host" class="option-input" />
|
||||||
|
<br>__MSG_prefs_OptionText_openai_comp_info_remote__
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_openai_comp_api" id="openai_comp_api_cors_warning">
|
||||||
|
<td colspan="2" style="text-align:center;">
|
||||||
|
__MSG_maybe_CORS_openai_comp__ [<a href="https://micz.it/thunderbird-addon-thunderai/ollama-cors-information/">__MSG_more_info_string__</a>]
|
||||||
|
<br><br><b>__MSG_CORS_alternative_1__</b>
|
||||||
|
<br>__MSG_CORS_alternative_2__
|
||||||
|
<br><br><button id="btnGiveAllUrlsPermission_openai_comp_api">__MSG_CORS_give_allurls_perm__</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_openai_comp_api">
|
||||||
|
<td><label>
|
||||||
|
<span class="opt_title">__MSG_prefs_OptionText_openai_comp_use_v1__</span>
|
||||||
|
</label></td>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="openai_comp_use_v1" name="openai_comp_use_v1" class="option-input" />
|
||||||
|
<span>__MSG_prefs_OptionText_openai_comp_use_v1_info__</span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_openai_comp_api">
|
||||||
|
<td><label>
|
||||||
|
<span class="opt_title">__MSG_prefs_OpenAIComp_API_Key__</span>
|
||||||
|
<br><i class="small_info">__MSG_Optional__</i>
|
||||||
|
</label></td>
|
||||||
|
<td>
|
||||||
|
<div class="api_key-container">
|
||||||
|
<label>
|
||||||
|
<input type="password" id="openai_comp_api_key" name="openai_comp_api_key" class="option-input"/>
|
||||||
|
</label>
|
||||||
|
<span class="toggle-icon" id="toggle_openai_comp_api_key"><img src="/images/pwd-show.png" id="pwd-icon_openai_comp_api_key"></span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_openai_comp_api">
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<span class="opt_title">__MSG_OpenAIComp_Models__</span>
|
||||||
|
<br><button id="btnOpenAICompForceModel" class="btn_small">__MSG_prefs_OpenAIComp_ForceModel__</button>
|
||||||
|
<br><button id="btnOpenAICompClearModelsList" class="btn_small">__MSG_prefs_OpenAIComp_ClearModelsList__</button></td>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button id="btnUpdateOpenAICompModels">__MSG_OpenAIComp_Models_Fetch__</button> <span id="openai_comp_model_fetch_loading">__MSG_Loading__</span><br>
|
||||||
|
<label>
|
||||||
|
<select id="openai_comp_model" name="openai_comp_model" class="option-input"></select>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_openai_comp_api">
|
||||||
|
<td><label>
|
||||||
|
<span class="opt_title">__MSG_prefs_OpenAIComp_ChatName__</span>
|
||||||
|
</label></td>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<input type="text" id="openai_comp_chat_name" name="openai_comp_chat_name" class="option-input" />
|
||||||
|
<br>__MSG_prefs_OpenAIComp_ChatName_Info__
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_anthropic_api">
|
||||||
|
<td><label>
|
||||||
|
<span class="opt_title">__MSG_prefs_Anthropic_API_Key__</span>
|
||||||
|
</label></td>
|
||||||
|
<td>
|
||||||
|
<div class="api_key-container">
|
||||||
|
<label>
|
||||||
|
<input type="password" id="anthropic_api_key" name="anthropic_api_key" class="option-input"/>
|
||||||
|
</label>
|
||||||
|
<span class="toggle-icon" id="toggle_anthropic_api_key"><img src="/images/pwd-show.png" id="pwd-icon_anthropic_api_key"></span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_anthropic_api">
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<span class="opt_title">__MSG_Anthropic_Models__</span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button id="btnUpdateAnthropicModels">__MSG_Anthropic_Models_Fetch__</button> <span id="anthropic_model_fetch_loading">__MSG_Loading__</span><br>
|
||||||
|
<label>
|
||||||
|
<select id="anthropic_model" name="anthropic_model" class="option-input"></select>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_anthropic_api">
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<span class="opt_title">__MSG_Anthropic_Version__</span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<input type="text" id="anthropic_version" name="anthropic_version" class="option-input" />
|
||||||
|
<br>__MSG_Anthropic_Version_Info__ <a href="https://docs.anthropic.com/en/api/versioning">https://docs.anthropic.com/en/api/versioning</a>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="conntype_anthropic_api">
|
||||||
|
<td><span class="opt_title">__MSG_prefs_OptionText_anthropic_max_tokens__</span></td>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<input type="number" id="anthropic_max_tokens" name="anthropic_max_tokens" class="option-input" />
|
||||||
|
<br>__MSG_prefs_OptionText_anthropic_max_tokens_Info__
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const template = document.createElement('template');
|
||||||
|
template.innerHTML = tpl.trim();
|
||||||
|
const frag = template.content;
|
||||||
|
|
||||||
|
const parent = anchorTr.parentElement;
|
||||||
|
const nodes = Array.from(frag.childNodes);
|
||||||
|
let last = anchorTr;
|
||||||
|
nodes.forEach(node => {
|
||||||
|
if (node.nodeType === Node.ELEMENT_NODE) {
|
||||||
|
parent.insertBefore(node, last.nextSibling);
|
||||||
|
last = node;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Bindings
|
||||||
|
const bindClick = (id, cb) => { const el = document.getElementById(id); if (el && typeof cb === 'function') el.addEventListener('click', cb); };
|
||||||
|
const bindChange = (id, cb) => { const el = document.getElementById(id); if (el && typeof cb === 'function') el.addEventListener('change', cb); };
|
||||||
|
const bindInput = (id, cb) => { const el = document.getElementById(id); if (el && typeof cb === 'function') el.addEventListener('input', cb); };
|
||||||
|
|
||||||
|
populateConnectionTypeOptions(selectId, no_chatgpt_web);
|
||||||
|
|
||||||
|
let selectEl = document.getElementById(selectId);
|
||||||
|
|
||||||
|
if (!selectEl) {
|
||||||
|
console.error('[ThuderAI | injectConnectionUI] Select not found after insertion.');
|
||||||
|
}
|
||||||
|
|
||||||
|
const bindPasswordToggle = (idBase) => {
|
||||||
|
const input = document.getElementById(idBase);
|
||||||
|
const toggler = document.getElementById(`toggle_\${idBase}`);
|
||||||
|
const icon = document.getElementById(`pwd-icon_\${idBase}`);
|
||||||
|
if (!input || !toggler) return;
|
||||||
|
toggler.addEventListener('click', () => {
|
||||||
|
input.type = input.type === 'password' ? 'text' : 'password';
|
||||||
|
if (icon) icon.src = input.type === 'password' ? '/images/pwd-show.png' : '/images/pwd-hide.png';
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
bindPasswordToggle('chatgpt_api_key');
|
||||||
|
bindPasswordToggle('google_gemini_api_key');
|
||||||
|
bindPasswordToggle('openai_comp_api_key');
|
||||||
|
bindPasswordToggle('anthropic_api_key');
|
||||||
|
|
||||||
|
// Live warnings and enable/disable logic
|
||||||
|
const applyLiveWarnings = () => {
|
||||||
|
// ChatGPT API
|
||||||
|
const chatgptKey = document.getElementById('chatgpt_api_key');
|
||||||
|
const btnChatGPT = document.getElementById('btnUpdateChatGPTModels');
|
||||||
|
const selChatGPT = document.getElementById('chatgpt_model');
|
||||||
|
if (chatgptKey && btnChatGPT && selChatGPT) {
|
||||||
|
const empty = !chatgptKey.value;
|
||||||
|
chatgptKey.style.border = empty ? '2px solid red' : '';
|
||||||
|
btnChatGPT.disabled = !!empty;
|
||||||
|
selChatGPT.disabled = !!empty;
|
||||||
|
if (!empty) {
|
||||||
|
selChatGPT.style.border = (!selChatGPT.value || selChatGPT.selectedIndex === -1) ? '2px solid red' : '';
|
||||||
|
} else {
|
||||||
|
selChatGPT.style.border = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Google Gemini API
|
||||||
|
const geminiKey = document.getElementById('google_gemini_api_key');
|
||||||
|
const btnGemini = document.getElementById('btnUpdateGoogleGeminiModels');
|
||||||
|
const selGemini = document.getElementById('google_gemini_model');
|
||||||
|
if (geminiKey && btnGemini && selGemini) {
|
||||||
|
const empty = !geminiKey.value;
|
||||||
|
geminiKey.style.border = empty ? '2px solid red' : '';
|
||||||
|
btnGemini.disabled = !!empty;
|
||||||
|
selGemini.disabled = !!empty;
|
||||||
|
if (!empty) {
|
||||||
|
selGemini.style.border = (!selGemini.value || selGemini.selectedIndex === -1) ? '2px solid red' : '';
|
||||||
|
} else {
|
||||||
|
selGemini.style.border = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ollama API
|
||||||
|
const ollamaHost = document.getElementById('ollama_host');
|
||||||
|
const btnOllama = document.getElementById('btnUpdateOllamaModels');
|
||||||
|
const selOllama = document.getElementById('ollama_model');
|
||||||
|
if (ollamaHost && btnOllama && selOllama) {
|
||||||
|
const empty = !ollamaHost.value;
|
||||||
|
ollamaHost.style.border = empty ? '2px solid red' : '';
|
||||||
|
btnOllama.disabled = !!empty;
|
||||||
|
selOllama.disabled = !!empty;
|
||||||
|
if (!empty) {
|
||||||
|
selOllama.style.border = (!selOllama.value || selOllama.selectedIndex === -1) ? '2px solid red' : '';
|
||||||
|
} else {
|
||||||
|
selOllama.style.border = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// OpenAI-Compatible API
|
||||||
|
const openaiCompHost = document.getElementById('openai_comp_host');
|
||||||
|
const btnOpenAIComp = document.getElementById('btnUpdateOpenAICompModels');
|
||||||
|
const selOpenAIComp = document.getElementById('openai_comp_model');
|
||||||
|
if (openaiCompHost && btnOpenAIComp && selOpenAIComp) {
|
||||||
|
const empty = !openaiCompHost.value;
|
||||||
|
openaiCompHost.style.border = empty ? '2px solid red' : '';
|
||||||
|
btnOpenAIComp.disabled = !!empty;
|
||||||
|
selOpenAIComp.disabled = !!empty;
|
||||||
|
if (!empty) {
|
||||||
|
selOpenAIComp.style.border = (!selOpenAIComp.value || selOpenAIComp.selectedIndex === -1) ? '2px solid red' : '';
|
||||||
|
} else {
|
||||||
|
selOpenAIComp.style.border = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Anthropic API
|
||||||
|
const anthropicKey = document.getElementById('anthropic_api_key');
|
||||||
|
const btnAnthropic = document.getElementById('btnUpdateAnthropicModels');
|
||||||
|
const selAnthropic = document.getElementById('anthropic_model');
|
||||||
|
const anthropicVersion = document.getElementById('anthropic_version');
|
||||||
|
if (anthropicKey && selAnthropic) {
|
||||||
|
const emptyKey = !anthropicKey.value;
|
||||||
|
anthropicKey.style.border = emptyKey ? '2px solid red' : '';
|
||||||
|
if (btnAnthropic) btnAnthropic.disabled = !!emptyKey;
|
||||||
|
if (selAnthropic) selAnthropic.disabled = !!emptyKey;
|
||||||
|
if (!emptyKey && selAnthropic) {
|
||||||
|
selAnthropic.style.border = (!selAnthropic.value || selAnthropic.selectedIndex === -1) ? '2px solid red' : '';
|
||||||
|
} else if (selAnthropic) {
|
||||||
|
selAnthropic.style.border = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (anthropicVersion) {
|
||||||
|
const emptyVer = !anthropicVersion.value;
|
||||||
|
anthropicVersion.style.border = emptyVer ? '2px solid red' : '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Bind inputs to live warnings
|
||||||
|
bindInput('chatgpt_api_key', applyLiveWarnings);
|
||||||
|
bindInput('google_gemini_api_key', applyLiveWarnings);
|
||||||
|
bindInput('ollama_host', applyLiveWarnings);
|
||||||
|
bindInput('openai_comp_host', applyLiveWarnings);
|
||||||
|
bindInput('anthropic_api_key', applyLiveWarnings);
|
||||||
|
bindInput('anthropic_version', applyLiveWarnings);
|
||||||
|
|
||||||
|
bindChange('chatgpt_model', applyLiveWarnings);
|
||||||
|
bindChange('google_gemini_model', applyLiveWarnings);
|
||||||
|
bindChange('ollama_model', applyLiveWarnings);
|
||||||
|
bindChange('openai_comp_model', applyLiveWarnings);
|
||||||
|
bindChange('anthropic_model', applyLiveWarnings);
|
||||||
|
|
||||||
|
// Run once on init
|
||||||
|
applyLiveWarnings();
|
||||||
|
|
||||||
|
|
||||||
|
// Bind button clicks to provided callbacks (page-specific logic stays outside)
|
||||||
|
// bindClick('btnChatGPTWeb_Tab', onOpenChatGPTWebTab);
|
||||||
|
// bindClick('btnUpdateChatGPTModels', onFetchChatGPTModels);
|
||||||
|
// bindClick('btnUpdateGoogleGeminiModels', onFetchGoogleGeminiModels);
|
||||||
|
// bindClick('btnUpdateOllamaModels', onFetchOllamaModels);
|
||||||
|
// bindClick('btnUpdateOpenAICompModels', onFetchOpenAICompModels);
|
||||||
|
// bindClick('btnOpenAICompForceModel', onOpenAICompForceModel);
|
||||||
|
// bindClick('btnOpenAICompClearModelsList', onOpenAICompClearModelsList);
|
||||||
|
// bindClick('btnUpdateAnthropicModels', onFetchAnthropicModels);
|
||||||
|
// bindClick('btnGiveAllUrlsPermission_ollama_api', onGiveAllUrlsPermissionOllama);
|
||||||
|
// bindClick('btnGiveAllUrlsPermission_openai_comp_api', onGiveAllUrlsPermissionOpenAIComp);
|
||||||
|
|
||||||
|
selectEl.addEventListener("change", () => showConnectionOptions(selectEl));
|
||||||
|
|
||||||
|
showConnectionOptions(selectEl);
|
||||||
|
|
||||||
|
return {
|
||||||
|
select: selectEl,
|
||||||
|
onTypeChange: (fn) => { onTypeChange = fn; fn(selectEl.value, { select: selectEl }); }
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function populateConnectionTypeOptions(selectId, no_chatgpt_web = false) {
|
||||||
|
const selectEl = document.getElementById(selectId);
|
||||||
|
if (!selectEl) return;
|
||||||
|
|
||||||
|
const prevValue = selectEl.value;
|
||||||
|
|
||||||
|
const options = [
|
||||||
|
{ value: 'chatgpt_web', msgKey: 'prefs_Connection_type_ChatGPT_Web' },
|
||||||
|
{ value: 'chatgpt_api', msgKey: 'prefs_Connection_type_ChatGPT_API' },
|
||||||
|
{ value: 'google_gemini_api', msgKey: 'prefs_Connection_type_Google_Gemini_API' },
|
||||||
|
{ value: 'anthropic_api', msgKey: 'prefs_Connection_type_Anthropic_API' },
|
||||||
|
{ value: 'ollama_api', msgKey: 'prefs_Connection_type_Ollama_API' },
|
||||||
|
{ value: 'openai_comp_api', msgKey: 'prefs_Connection_type_OpenAI_Comp_API' }
|
||||||
|
];
|
||||||
|
|
||||||
|
selectEl.innerHTML = '';
|
||||||
|
|
||||||
|
for (const opt of options.filter(o => !(no_chatgpt_web && o.value === 'chatgpt_web'))) {
|
||||||
|
const optionEl = document.createElement('option');
|
||||||
|
optionEl.value = opt.value;
|
||||||
|
optionEl.textContent = browser.i18n.getMessage(opt.msgKey) || opt.msgKey;
|
||||||
|
selectEl.appendChild(optionEl);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.some(o => o.value === prevValue)) {
|
||||||
|
selectEl.value = prevValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function showConnectionOptions(conntype_select) {
|
||||||
|
let chatgpt_web_display = 'table-row';
|
||||||
|
let chatgpt_api_display = 'none';
|
||||||
|
let ollama_api_display = 'none';
|
||||||
|
let openai_comp_api_display = 'none';
|
||||||
|
let google_gemini_api_display = 'none';
|
||||||
|
let anthropic_api_display = 'none';
|
||||||
|
let parent = conntype_select.parentElement.parentElement.parentElement;
|
||||||
|
parent.classList.toggle("conntype_chatgpt_web", (conntype_select.value === "chatgpt_web"));
|
||||||
|
parent.classList.toggle("conntype_chatgpt_api", (conntype_select.value === "chatgpt_api"));
|
||||||
|
parent.classList.toggle("conntype_ollama_api", (conntype_select.value === "ollama_api"));
|
||||||
|
parent.classList.toggle("conntype_openai_comp_api", (conntype_select.value === "openai_comp_api"));
|
||||||
|
parent.classList.toggle("conntype_google_gemini_api", (conntype_select.value === "google_gemini_api"));
|
||||||
|
parent.classList.toggle("conntype_anthropic_api", (conntype_select.value === "anthropic_api"));
|
||||||
|
if (conntype_select.value === "chatgpt_web") {
|
||||||
|
chatgpt_web_display = 'table-row';
|
||||||
|
}else{
|
||||||
|
chatgpt_web_display = 'none';
|
||||||
|
}
|
||||||
|
if (conntype_select.value === "chatgpt_api") {
|
||||||
|
chatgpt_api_display = 'table-row';
|
||||||
|
}else{
|
||||||
|
chatgpt_api_display = 'none';
|
||||||
|
}
|
||||||
|
if (conntype_select.value === "ollama_api") {
|
||||||
|
ollama_api_display = 'table-row';
|
||||||
|
}else{
|
||||||
|
ollama_api_display = 'none';
|
||||||
|
}
|
||||||
|
if (conntype_select.value === "openai_comp_api") {
|
||||||
|
openai_comp_api_display = 'table-row';
|
||||||
|
}else{
|
||||||
|
openai_comp_api_display = 'none';
|
||||||
|
}
|
||||||
|
if (conntype_select.value === "google_gemini_api") {
|
||||||
|
google_gemini_api_display = 'table-row';
|
||||||
|
}else{
|
||||||
|
google_gemini_api_display = 'none';
|
||||||
|
}
|
||||||
|
if (conntype_select.value === "anthropic_api") {
|
||||||
|
anthropic_api_display = 'table-row';
|
||||||
|
}else{
|
||||||
|
anthropic_api_display = 'none';
|
||||||
|
}
|
||||||
|
document.querySelectorAll(".conntype_chatgpt_web").forEach(element => {
|
||||||
|
element.style.display = chatgpt_web_display;
|
||||||
|
});
|
||||||
|
document.querySelectorAll(".conntype_chatgpt_api").forEach(element => {
|
||||||
|
element.style.display = chatgpt_api_display;
|
||||||
|
});
|
||||||
|
document.querySelectorAll(".conntype_ollama_api").forEach(element => {
|
||||||
|
element.style.display = ollama_api_display;
|
||||||
|
});
|
||||||
|
document.querySelectorAll(".conntype_openai_comp_api").forEach(element => {
|
||||||
|
element.style.display = openai_comp_api_display;
|
||||||
|
});
|
||||||
|
document.querySelectorAll(".conntype_google_gemini_api").forEach(element => {
|
||||||
|
element.style.display = google_gemini_api_display;
|
||||||
|
});
|
||||||
|
document.querySelectorAll(".conntype_anthropic_api").forEach(element => {
|
||||||
|
element.style.display = anthropic_api_display;
|
||||||
|
});
|
||||||
|
if (varConnectionUI.permission_all_urls) {
|
||||||
|
document.getElementById('openai_comp_api_cors_warning').style.display = 'none';
|
||||||
|
document.getElementById('ollama_api_cors_warning').style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>ThunderAI - __MSG_AddTags_PageTitle__</title>
|
<title>ThunderAI - __MSG_AddTags_PageTitle__</title>
|
||||||
<link rel="stylesheet" href="mzta-add-tags.css">
|
<link rel="stylesheet" href="mzta-add-tags.css">
|
||||||
|
<link rel="stylesheet" href="../_lib/connection-ui.css">
|
||||||
<link rel="icon" href="../../images/icon-16px.png">
|
<link rel="icon" href="../../images/icon-16px.png">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -23,15 +24,7 @@
|
||||||
</label>
|
</label>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr class="add_tags_tr specific_integration specific_integration_sub">
|
<tr id="connection_ui_anchor"></tr>
|
||||||
<td><span>__MSG_prefs_Connection_type__</span>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<label>
|
|
||||||
<select id="add_tags_connection_type" name="add_tags_connection_type" class="option-input"></select>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="add_tags_tr">
|
<tr class="add_tags_tr">
|
||||||
<td><span>__MSG_prefs_OptionText_add_tags_maxnum__</span></td>
|
<td><span>__MSG_prefs_OptionText_add_tags_maxnum__</span></td>
|
||||||
<td>
|
<td>
|
||||||
|
|
|
||||||
|
|
@ -22,15 +22,23 @@ import { getSpecialPrompts, setSpecialPrompts } from "../../js/mzta-prompts.js";
|
||||||
import { getPlaceholders } from "../../js/mzta-placeholders.js";
|
import { getPlaceholders } from "../../js/mzta-placeholders.js";
|
||||||
import { textareaAutocomplete } from "../../js/mzta-placeholders-autocomplete.js";
|
import { textareaAutocomplete } from "../../js/mzta-placeholders-autocomplete.js";
|
||||||
import { addTags_getExclusionList, addTags_setExclusionList } from "../../js/mzta-addatags-exclusion-list.js";
|
import { addTags_getExclusionList, addTags_setExclusionList } from "../../js/mzta-addatags-exclusion-list.js";
|
||||||
import { getAccountsList, normalizeStringList, populateConnectionTypeOptions } from "../../js/mzta-utils.js";
|
import { getAccountsList, normalizeStringList, isAPIKeyValue } from "../../js/mzta-utils.js";
|
||||||
|
import { injectConnectionUI } from "../_lib/connection-ui.js";
|
||||||
|
|
||||||
let autocompleteSuggestions = [];
|
let autocompleteSuggestions = [];
|
||||||
let taLog = new taLogger("mzta-addtags-page",true);
|
let taLog = new taLogger("mzta-addtags-page",true);
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', async () => {
|
document.addEventListener('DOMContentLoaded', async () => {
|
||||||
|
try {
|
||||||
|
injectConnectionUI({
|
||||||
|
afterTrId: 'connection_ui_anchor',
|
||||||
|
selectId: 'add_tags_connection_type',
|
||||||
|
no_chatgpt_web: true
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to inject connection UI (add-tags)', e);
|
||||||
|
}
|
||||||
i18n.updateDocument();
|
i18n.updateDocument();
|
||||||
populateConnectionTypeOptions('add_tags_connection_type', true);
|
|
||||||
await restoreOptions();
|
await restoreOptions();
|
||||||
|
|
||||||
document.querySelectorAll(".option-input").forEach(element => {
|
document.querySelectorAll(".option-input").forEach(element => {
|
||||||
|
|
@ -257,7 +265,7 @@ function saveOptions(e) {
|
||||||
async function restoreOptions() {
|
async function restoreOptions() {
|
||||||
function setCurrentChoice(result) {
|
function setCurrentChoice(result) {
|
||||||
document.querySelectorAll(".option-input").forEach(element => {
|
document.querySelectorAll(".option-input").forEach(element => {
|
||||||
taLog.log("Options restoring " + element.id + " = " + (element.id=="chatgpt_api_key" || element.id=="openai_comp_api_key" ? "****************" : result[element.id]));
|
taLog.log("Options restoring " + element.id + " = " + (isAPIKeyValue(element.id) ? "****************" : result[element.id]));
|
||||||
switch (element.type) {
|
switch (element.type) {
|
||||||
case 'checkbox':
|
case 'checkbox':
|
||||||
element.checked = result[element.id] || false;
|
element.checked = result[element.id] || false;
|
||||||
|
|
@ -296,4 +304,4 @@ async function restoreOptions() {
|
||||||
|
|
||||||
let getting = await browser.storage.sync.get(prefs_default);
|
let getting = await browser.storage.sync.get(prefs_default);
|
||||||
setCurrentChoice(getting);
|
setCurrentChoice(getting);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue