Vector Storage: change NomicAI key input

d0b368f29cc4f11b3c2dd4d6c2a896f0b70f42de

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

public/scripts/extensions/vectors/index.js+25 -7 Viewed

 import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
 import { SlashCommand } from '../../slash-commands/SlashCommand.js';
 import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
+import { callGenericPopup, POPUP_RESULT, POPUP_TYPE } from '../../popup.js';
 const MODULE_NAME = 'vectors';

         saveSettingsDebounced();
         toggleSettings();
     });
-    $('#api_key_nomicai').on('change', () => {
+    $('#api_key_nomicai').on('click', async () => {
-        const nomicKey = String($('#api_key_nomicai').val()).trim();
+        const popupText = 'NomicAI API Key:';
-        if (nomicKey.length) {
+        const key = await callGenericPopup(popupText, POPUP_TYPE.INPUT, '', {
-            writeSecret(SECRET_KEYS.NOMICAI, nomicKey);
+            customButtons: [{
+                text: 'Remove Key',
+                appendAtEnd: true,
+                result: POPUP_RESULT.NEGATIVE,
+                action: async () => {
+                    await writeSecret(SECRET_KEYS.NOMICAI, '');
+                    toastr.success('API Key removed');
+                    $('#api_key_nomicai').toggleClass('success', !!secret_state[SECRET_KEYS.NOMICAI]);
+                    saveSettingsDebounced();
+                },
+            }],
+        });
+        if (!key) {
+            return;
+        }
+        await writeSecret(SECRET_KEYS.NOMICAI, String(key));
+        $('#api_key_nomicai').toggleClass('success', !!secret_state[SECRET_KEYS.NOMICAI]);
+        toastr.success('API Key saved');
         saveSettingsDebounced();
     });
     $('#vectors_togetherai_model').val(settings.togetherai_model).on('change', () => {

         $('#dialogue_popup_input').val(presetModel);
     });
-    const validSecret = !!secret_state[SECRET_KEYS.NOMICAI];
+    $('#api_key_nomicai').toggleClass('success', !!secret_state[SECRET_KEYS.NOMICAI]);
-    const placeholder = validSecret ? '✔️ Key saved' : '❌ Missing key';
-    $('#api_key_nomicai').attr('placeholder', placeholder);
     toggleSettings();
     eventSource.on(event_types.MESSAGE_DELETED, onChatEvent);

public/scripts/extensions/vectors/settings.html+5 -9 Viewed

                 </span>
             </small>
-            <div class="flex-container flexFlowColumn" id="nomicai_apiKey">
+            <div class="flex-container alignItemsCenter" id="nomicai_apiKey">
-                <label for="api_key_nomicai">
+                <label for="api_key_nomicai" class="flex1">
                     <span data-i18n="NomicAI API Key">NomicAI API Key</span>
                 </label>
-                <div class="flex-container">
+                <div id="api_key_nomicai" class="menu_button menu_button_icon">
-                    <input id="api_key_nomicai" name="api_key_nomicai" class="text_pole flex1 wide100p" maxlength="500" size="35" type="text" autocomplete="off">
+                    <i class="fa-solid fa-key"></i>
-                    <div title="Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_nomicai">
+                    <span data-i18n="Click to set">Click to set</span>
-                    </div>
-                </div>
-                <div data-for="api_key_nomicai" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
-                    For privacy reasons, your API key will be hidden after you reload the page.
                 </div>
             </div>