# UI 扩展

/**
 * Import a member from a module by URL， bypassing webpack.
 * @param {string} url URL to import from
 * @param {string} what Name of the member to import
 * @param {any} defaultValue Fallback value
 * @returns {Promise<any>} Imported member
 */
export async function importFromUrl(url， what， defaultValue = null) {
    try {
        const module = await import(/* webpackIgnore: true */ url);
        if (!Object.hasOwn(module， what)) {
            throw new Error(`No ${what} in module`);
        }
        return module[what];
    } catch (error) {
        console.error(`Failed to import ${what} from ${url}: ${error}`);
        return defaultValue;
     }
}

// Import a function from 'script.js' module
const generateRaw = await importFromUrl('/script.js'， 'generateRaw');

{
    "display_name": "The name of the extension"，
    "loading_order": 1，
    "requires": []，
    "optional": []，
    "dependencies": []，
    "js": "index.js"，
    "css": "style.css"，
    "author": "Your name"，
    "version": "1.0.0"，
    "homePage": "https://github.com/your/extension"，
    "auto_update": true，
    "minimum_client_version": "1.0.0"，
    "i18n": {
        "de-de": "i18n/de-de.json"
    }
}

const context = SillyTavern.getContext();
context.chat; // Chat log - MUTABLE
context.characters; // Character list
context.characterId; // Index of the current character
context.groups; // Group list
context.groupId; // ID of the current group
// And many more...

const { DOMPurify } = SillyTavern.libs;

const sanitizedHtml = DOMPurify.sanitize('<script>"dirty HTML"</script>');

export {};

// 1. Import for user-scoped extensions
import '../../../../public/global';
// 2. Import for server-scoped extensions
import '../../../../global';

// Define additional types if needed...
declare global {
    // Add global type declarations here
}

import { generateQuietPrompt } from "../../../../script.js";

async function handleMessage(data) {
    const text = data.message;
    const translated = await generateQuietPrompt({ quietPrompt: text });
    // ...
}

const { extensionSettings， saveSettingsDebounced } = SillyTavern.getContext();

// Define a unique identifier for your extension
const MODULE_NAME = 'my_extension';

// Define default settings
const defaultSettings = Object.freeze({
    enabled: false，
    option1: 'default'，
    option2: 5
});

// Define a function to get or initialize settings
function getSettings() {
    // Initialize settings if they don't exist
    if (!extensionSettings[MODULE_NAME]) {
        extensionSettings[MODULE_NAME] = structuredClone(defaultSettings);
    }

    // Ensure all default keys exist (helpful after updates)
    for (const key of Object.keys(defaultSettings)) {
        if (!Object.hasOwn(extensionSettings[MODULE_NAME]， key)) {
            extensionSettings[MODULE_NAME][key] = defaultSettings[key];
        }
    }

    return extensionSettings[MODULE_NAME];
}

// Use the settings
const settings = getSettings();
settings.option1 = 'new value';

// Save the settings
saveSettingsDebounced();

const { chatMetadata， saveMetadata } = SillyTavern.getContext();

// Set some metadata for the current chat
chatMetadata['my_key'] = 'my_value';

// Get the metadata for the current chat
const value = chatMetadata['my_key'];

// Save the metadata to the server
await saveMetadata();

const { writeExtensionField， characterId } = SillyTavern.getContext();

// Write some data to the character card
await writeExtensionField(characterId， 'my_extension_key'， {
    someData: 'value'，
    anotherData: 42
});

// Read the data back from the character card
const character = SillyTavern.getContext().characters[characterId];
// The data is stored in the `extensions` object of the character's data
const myData = character.data?.extensions?.my_extension_key;

const { getPresetManager } = SillyTavern.getContext();

// Get the preset manager for the current API type
const pm = getPresetManager();

// Write data to the preset extension field:
// - path: the path to the field in the preset data
// - value: the value to write
// - name (optional): the name of the preset to write to， defaults to the currently selected preset
await pm.writePresetExtensionField({ path: 'hello'， value: 'world' });

// Read data from the preset extension field:
// - path: the path to the field in the preset data
// - name (optional): the name of the preset to read from， defaults to the currently selected preset
const value = pm.readPresetExtensionField({ path: 'hello' });

SillyTavern.getContext().addLocaleData('fr-fr'， { 'Hello': 'Bonjour' });
SillyTavern.getContext().addLocaleData('de-de'， { 'Hello': 'Hallo' });

{
  "display_name": "Foobar"，
  "js": "index.js"，
  // rest of the fields
  "i18n": {
    "fr-fr": "i18n/french.json"，
    "de-de": "i18n/german.json"
  }
}

SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'repeat'，
    callback: (namedArgs， unnamedArgs) => {
        return Array(namedArgs.times ?? 5)
            .fill(unnamedArgs.toString())
            .join(isTrueBoolean(namedArgs.space.toString()) ? ' ' : '')
        ;
    }，
    aliases: ['example-command']，
    returns: 'the repeated text'，
    namedArgumentList: [
        SlashCommandNamedArgument.fromProps({ name: 'times'，
            description: 'number of times to repeat the text'，
            typeList: ARGUMENT_TYPE.NUMBER，
            defaultValue: '5'，
        })，
        SlashCommandNamedArgument.fromProps({ name: 'space'，
            description: 'whether to separate the texts with a space'，
            typeList: ARGUMENT_TYPE.BOOLEAN，
            defaultValue: 'off'，
            enumList: ['on'， 'off']，
        })，
    ]，
    unnamedArgumentList: [
        SlashCommandArgument.fromProps({ description: 'the text to repeat'，
            typeList: ARGUMENT_TYPE.STRING，
            isRequired: true，
        })，
    ]，
    helpString: `
        <div>
            Repeats the provided text a number of times.
        </div>
        <div>
            <strong>Example:</strong>
            <ul>
                <li>
                    <pre><code class="language-stscript">/repeat foo</code></pre>
                    returns "foofoofoofoofoo"
                </li>
                <li>
                    <pre><code class="language-stscript">/repeat times=3 space=on bar</code></pre>
                    returns "bar bar bar"
                </li>
            </ul>
        </div>
    `，
}));

const { eventSource， event_types } = SillyTavern.getContext();

eventSource.on(event_types.MESSAGE_RECEIVED， handleIncomingMessage);

function handleIncomingMessage(data) {
    // Handle message
}

const { eventSource } = SillyTavern.getContext();

// Can be a built-in event_types field or any string.
const eventType = 'myCustomEvent';

// Use `await` to ensure all event handlers complete before continuing execution.
await eventSource.emit(eventType， { data: 'custom event data' });

{
    "display_name": "My Interceptor Extension"，
    "loading_order": 10， // Affects execution order
    "generate_interceptor": "myCustomInterceptorFunction"，
    // ... other manifest properties
}

globalThis.myCustomInterceptorFunction = async function(chat， contextSize， abort， type) {
    // Example: Add a system note before the last user message
    const systemNote = {
        is_user: false，
        name: "System Note"，
        send_date: Date.now()，
        mes: "This was added by my extension!"
    };
    // Insert before the last message
    chat.splice(chat.length - 1， 0， systemNote);
}

const { generateQuietPrompt } = SillyTavern.getContext();

const quietPrompt = 'Generate a summary of the chat history.';

const result = await generateQuietPrompt({
    quietPrompt，
});

const { generateRaw } = SillyTavern.getContext();

const systemPrompt = 'You are a helpful assistant.';
const prompt = 'Generate a story about a brave knight.';
const prefill = 'Once upon a time，';

/*
In Chat Completion mode， will produce a prompt like this:
[
  {role: 'system'， content: 'You are a helpful assistant.'}，
  {role: 'user'， content: 'Generate a story about a brave knight.'}，
  {role: 'assistant'， content: 'Once upon a time，'}
]
*/

/*
In Text Completion mode (no instruct)， will produce a prompt like this:
"You are a helpful assistant.\nGenerate a story about a brave knight.\nOnce upon a time，"
*/

const result = await generateRaw({
    systemPrompt，
    prompt，
    prefill，
});

const { generateRaw， generateQuietPrompt } = SillyTavern.getContext();

// Define a JSON schema for the expected output
const jsonSchema = {
    // Required: a name for the schema
    name: 'StoryStateModel'，
    // Optional: a description of the schema
    description: 'A schema for a story state with location， plans， and memories.'，
    // Optional:  the schema will be used in strict mode， meaning that only the fields defined in the schema will be allowed
    strict: true，
    // Required: a definition of the schema
    value: {
        '$schema': 'http://json-schema.org/draft-04/schema#'，
        'type': 'object'，
        'properties': {
            'location': {
                'type': 'string'
            }，
            'plans': {
                'type': 'string'
            }，
            'memories': {
                'type': 'string'
            }
        }，
        'required': [
            'location'，
            'plans'，
            'memories'
        ]，
    }，
};

const prompt = 'Generate a story state with location， plans， and memories. Output as a JSON object.';

const rawResult = await generateRaw({
    prompt，
    jsonSchema，
});

const quietResult = await generateQuietPrompt({
    quietPrompt: prompt，
    jsonSchema，
});

const { registerMacro } = SillyTavern.getContext();

// Simple string macro
registerMacro('fizz'， 'buzz');
// Function macro
registerMacro('tomorrow'， () => {
    return new Date(Date.now() + 24 * 60 * 60 * 1000).toLocaleDateString();
});

const { unregisterMacro } = SillyTavern.getContext();

// Unregister the 'fizz' macro
unregisterMacro('fizz');

import { getApiUrl， doExtrasFetch } from "../../extensions.js";

const url = new URL(getApiUrl());
url.pathname = '/api/summarize';

const apiResult = await doExtrasFetch(url， {
    method: 'POST'，
    headers: {
        'Content-Type': 'application/json'，
        'Bypass-Tunnel-Reminder': 'bypass'，
    }，
    body: JSON.stringify({
        // Request body
    })
});