CC: Add model support indicators for function calling, image, and video inlining

c03fd6a86784ffacd465f48ed09d34ed4bfbbe28

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: e9be0f1c64814135274f443f03429fb8583fad92
3 files changed, +41 -0Ignore whitespace
public/css/toggle-dependent.css+14 -0
@@ -530,3 +530,17 @@ label[for="trim_spaces"]:not(:has(input:checked)) small {
530530label[for="bind_preset_to_connection"]:has(input:checked) {
531531 color: var(--active);
532532}
533+
534+#openai_settings input[type="checkbox"]:not(:checked)~[data-cc-toggle],
535+#openai_settings [data-cc-toggle="false"]>.icon-supported,
536+#openai_settings [data-cc-toggle="true"]>.icon-unsupported {
537+ display: none;
538+}
539+
540+#openai_settings [data-cc-toggle="true"]>.icon-supported {
541+ color: var(--active);
542+}
543+
544+#openai_settings [data-cc-toggle="false"]>.icon-unsupported {
545+ color: var(--golden);
546+}
public/index.html+12 -0
@@ -1988,6 +1988,10 @@
19881988 <label for="openai_function_calling" class="checkbox_label flexWrap widthFreeExpand">
19891989 <input id="openai_function_calling" type="checkbox" />
19901990 <span data-i18n="Enable function calling">Enable function calling</span>
1991+ <div id="openai_function_calling_supported" data-cc-toggle="false">
1992+ <i class="icon-supported fa-solid fa-circle-check" title="Supported by the current model" data-i18n="[title]Supported by the current model"></i>
1993+ <i class="icon-unsupported fa-solid fa-circle-exclamation" title="Unsupported by the current model" data-i18n="[title]Unsupported by the current model"></i>
1994+ </div>
19911995 </label>
19921996 <div class="flexBasis100p toggle-description justifyLeft">
19931997 <span data-i18n="enable_functions_desc_1">Allows using </span><a href="https://platform.openai.com/docs/guides/function-calling" target="_blank" data-i18n="enable_functions_desc_2">function tools</a>.
@@ -1999,6 +2003,10 @@
19992003 <label for="openai_image_inlining" class="checkbox_label flexWrap widthFreeExpand">
20002004 <input id="openai_image_inlining" type="checkbox" />
20012005 <span data-i18n="Send inline images">Send inline images</span>
2006+ <div id="openai_image_inlining_supported" data-cc-toggle="false">
2007+ <i class="icon-supported fa-solid fa-circle-check" title="Supported by the current model" data-i18n="[title]Supported by the current model"></i>
2008+ <i class="icon-unsupported fa-solid fa-circle-exclamation" title="Unsupported by the current model" data-i18n="[title]Unsupported by the current model"></i>
2009+ </div>
20022010 </label>
20032011 <div id="image_inlining_hint" class="flexBasis100p toggle-description justifyLeft">
20042012 <span data-i18n="image_inlining_hint_1">Sends images in prompts if the model supports it. Use the</span>
@@ -2024,6 +2032,10 @@
20242032 <label for="openai_video_inlining" class="checkbox_label flexWrap widthFreeExpand">
20252033 <input id="openai_video_inlining" type="checkbox" />
20262034 <span data-i18n="Send inline videos">Send inline videos</span>
2035+ <div id="openai_video_inlining_supported" data-cc-toggle="false">
2036+ <i class="icon-supported fa-solid fa-circle-check" title="Supported by the current model" data-i18n="[title]Supported by the current model"></i>
2037+ <i class="icon-unsupported fa-solid fa-circle-exclamation" title="Unsupported by the current model" data-i18n="[title]Unsupported by the current model"></i>
2038+ </div>
20272039 </label>
20282040 <div id="video_inlining_hint" class="flexBasis100p toggle-description justifyLeft">
20292041 <span data-i18n="video_inlining_hint_1">Sends videos in prompts if the model supports it. Use the</span>
public/scripts/openai.js+15 -0
@@ -4970,6 +4970,7 @@ async function onModelChange() {
49704970 $('#openai_max_context_counter').attr('max', Number($('#openai_max_context').attr('max')));
49714971
49724972 saveSettingsDebounced();
4973+ updateFeatureSupportFlags();
49734974 eventSource.emit(event_types.CHATCOMPLETION_MODEL_CHANGED, value);
49744975}
49754976
@@ -5726,7 +5727,20 @@ function updateVertexAIServiceAccountStatus(isValid = false, message = '') {
57265727 }
57275728}
57285729
5730+function updateFeatureSupportFlags() {
5731+ const featureFlags = {
5732+ openai_function_calling_supported: ToolManager.isToolCallingSupported(),
5733+ openai_image_inlining_supported: isImageInliningSupported(),
5734+ openai_video_inlining_supported: isVideoInliningSupported(),
5735+ };
57295736
5737+ for (const [key, value] of Object.entries(featureFlags)) {
5738+ const element = document.getElementById(key);
5739+ if (element) {
5740+ element.dataset.ccToggle = String(value);
5741+ }
5742+ }
5743+}
57305744
57315745export function initOpenAI() {
57325746 SlashCommandParser.addCommandObject(SlashCommand.fromProps({
@@ -5950,6 +5964,7 @@ export function initOpenAI() {
59505964 saveSettingsDebounced();
59515965 reconnectOpenAi();
59525966 forceCharacterEditorTokenize();
5967+ updateFeatureSupportFlags();
59535968 eventSource.emit(event_types.CHATCOMPLETION_SOURCE_CHANGED, oai_settings.chat_completion_source);
59545969 });
59555970