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 -0Showing whitespace changes
public/css/toggle-dependent.css+14 -0
@@ -530,3 +530,17 @@ label[for="trim_spaces"]:not(:has(input:checked)) small {
530label[for="bind_preset_to_connection"]:has(input:checked) {530label[for="bind_preset_to_connection"]:has(input:checked) {
531 color: var(--active);531 color: var(--active);
532}532}
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 @@
1988 <label for="openai_function_calling" class="checkbox_label flexWrap widthFreeExpand">1988 <label for="openai_function_calling" class="checkbox_label flexWrap widthFreeExpand">
1989 <input id="openai_function_calling" type="checkbox" />1989 <input id="openai_function_calling" type="checkbox" />
1990 <span data-i18n="Enable function calling">Enable function calling</span>1990 <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>
1991 </label>1995 </label>
1992 <div class="flexBasis100p toggle-description justifyLeft">1996 <div class="flexBasis100p toggle-description justifyLeft">
1993 <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>.1997 <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 @@
1999 <label for="openai_image_inlining" class="checkbox_label flexWrap widthFreeExpand">2003 <label for="openai_image_inlining" class="checkbox_label flexWrap widthFreeExpand">
2000 <input id="openai_image_inlining" type="checkbox" />2004 <input id="openai_image_inlining" type="checkbox" />
2001 <span data-i18n="Send inline images">Send inline images</span>2005 <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>
2002 </label>2010 </label>
2003 <div id="image_inlining_hint" class="flexBasis100p toggle-description justifyLeft">2011 <div id="image_inlining_hint" class="flexBasis100p toggle-description justifyLeft">
2004 <span data-i18n="image_inlining_hint_1">Sends images in prompts if the model supports it. Use the</span>2012 <span data-i18n="image_inlining_hint_1">Sends images in prompts if the model supports it. Use the</span>
@@ -2024,6 +2032,10 @@
2024 <label for="openai_video_inlining" class="checkbox_label flexWrap widthFreeExpand">2032 <label for="openai_video_inlining" class="checkbox_label flexWrap widthFreeExpand">
2025 <input id="openai_video_inlining" type="checkbox" />2033 <input id="openai_video_inlining" type="checkbox" />
2026 <span data-i18n="Send inline videos">Send inline videos</span>2034 <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>
2027 </label>2039 </label>
2028 <div id="video_inlining_hint" class="flexBasis100p toggle-description justifyLeft">2040 <div id="video_inlining_hint" class="flexBasis100p toggle-description justifyLeft">
2029 <span data-i18n="video_inlining_hint_1">Sends videos in prompts if the model supports it. Use the</span>2041 <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() {
4970 $('#openai_max_context_counter').attr('max', Number($('#openai_max_context').attr('max')));4970 $('#openai_max_context_counter').attr('max', Number($('#openai_max_context').attr('max')));
49714971
4972 saveSettingsDebounced();4972 saveSettingsDebounced();
4973 updateFeatureSupportFlags();
4973 eventSource.emit(event_types.CHATCOMPLETION_MODEL_CHANGED, value);4974 eventSource.emit(event_types.CHATCOMPLETION_MODEL_CHANGED, value);
4974}4975}
49754976
@@ -5726,7 +5727,20 @@ function updateVertexAIServiceAccountStatus(isValid = false, message = '') {
5726 }5727 }
5727}5728}
57285729
5730function 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
5731export function initOpenAI() {5745export function initOpenAI() {
5732 SlashCommandParser.addCommandObject(SlashCommand.fromProps({5746 SlashCommandParser.addCommandObject(SlashCommand.fromProps({
@@ -5950,6 +5964,7 @@ export function initOpenAI() {
5950 saveSettingsDebounced();5964 saveSettingsDebounced();
5951 reconnectOpenAi();5965 reconnectOpenAi();
5952 forceCharacterEditorTokenize();5966 forceCharacterEditorTokenize();
5967 updateFeatureSupportFlags();
5953 eventSource.emit(event_types.CHATCOMPLETION_SOURCE_CHANGED, oai_settings.chat_completion_source);5968 eventSource.emit(event_types.CHATCOMPLETION_SOURCE_CHANGED, oai_settings.chat_completion_source);
5954 });5969 });
59555970