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

c03fd6a86784ffacd465f48ed09d34ed4bfbbe28

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

public/css/toggle-dependent.css+14 -0 Viewed

 label[for="bind_preset_to_connection"]:has(input:checked) {
     color: var(--active);
+}
++
 +#openai_settings input[type="checkbox"]:not(:checked)~[data-cc-toggle],
 +#openai_settings [data-cc-toggle="false"]>.icon-supported,
 +#openai_settings [data-cc-toggle="true"]>.icon-unsupported {
 +    display: none;
 +}
++
 +#openai_settings [data-cc-toggle="true"]>.icon-supported {
 +    color: var(--active);
 +}
++
 +#openai_settings [data-cc-toggle="false"]>.icon-unsupported {
 +    color: var(--golden);
 +}

public/index.html+12 -0 Viewed

                                         <label for="openai_function_calling" class="checkbox_label flexWrap widthFreeExpand">
                                             <input id="openai_function_calling" type="checkbox" />
                                             <span data-i18n="Enable function calling">Enable function calling</span>
 +                                            <div id="openai_function_calling_supported" data-cc-toggle="false">
 +                                                <i class="icon-supported fa-solid fa-circle-check" title="Supported by the current model" data-i18n="[title]Supported by the current model"></i>
 +                                                <i class="icon-unsupported fa-solid fa-circle-exclamation" title="Unsupported by the current model" data-i18n="[title]Unsupported by the current model"></i>
 +                                            </div>
                                         </label>
                                         <div class="flexBasis100p toggle-description justifyLeft">
                                             <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>.

                                         <label for="openai_image_inlining" class="checkbox_label flexWrap widthFreeExpand">
                                             <input id="openai_image_inlining" type="checkbox" />
                                             <span data-i18n="Send inline images">Send inline images</span>
 +                                            <div id="openai_image_inlining_supported" data-cc-toggle="false">
 +                                                <i class="icon-supported fa-solid fa-circle-check" title="Supported by the current model" data-i18n="[title]Supported by the current model"></i>
 +                                                <i class="icon-unsupported fa-solid fa-circle-exclamation" title="Unsupported by the current model" data-i18n="[title]Unsupported by the current model"></i>
 +                                            </div>
                                         </label>
                                         <div id="image_inlining_hint" class="flexBasis100p toggle-description justifyLeft">
                                             <span data-i18n="image_inlining_hint_1">Sends images in prompts if the model supports it. Use the</span>

                                         <label for="openai_video_inlining" class="checkbox_label flexWrap widthFreeExpand">
                                             <input id="openai_video_inlining" type="checkbox" />
                                             <span data-i18n="Send inline videos">Send inline videos</span>
 +                                            <div id="openai_video_inlining_supported" data-cc-toggle="false">
 +                                                <i class="icon-supported fa-solid fa-circle-check" title="Supported by the current model" data-i18n="[title]Supported by the current model"></i>
 +                                                <i class="icon-unsupported fa-solid fa-circle-exclamation" title="Unsupported by the current model" data-i18n="[title]Unsupported by the current model"></i>
 +                                            </div>
                                         </label>
                                         <div id="video_inlining_hint" class="flexBasis100p toggle-description justifyLeft">
                                             <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 Viewed

     $('#openai_max_context_counter').attr('max', Number($('#openai_max_context').attr('max')));
     saveSettingsDebounced();
 +    updateFeatureSupportFlags();
     eventSource.emit(event_types.CHATCOMPLETION_MODEL_CHANGED, value);
+}

+    }
+}
 +function updateFeatureSupportFlags() {
 +    const featureFlags = {
 +        openai_function_calling_supported: ToolManager.isToolCallingSupported(),
 +        openai_image_inlining_supported: isImageInliningSupported(),
 +        openai_video_inlining_supported: isVideoInliningSupported(),
 +    };
 +    for (const [key, value] of Object.entries(featureFlags)) {
 +        const element = document.getElementById(key);
 +        if (element) {
 +            element.dataset.ccToggle = String(value);
 +        }
 +    }
 +}
 export function initOpenAI() {
     SlashCommandParser.addCommandObject(SlashCommand.fromProps({

         saveSettingsDebounced();
         reconnectOpenAi();
         forceCharacterEditorTokenize();
 +        updateFeatureSupportFlags();
         eventSource.emit(event_types.CHATCOMPLETION_SOURCE_CHANGED, oai_settings.chat_completion_source);
     });