options.html

<!DOCTYPE html>
<html>
<body>
<style type="text/css">
    table input[type="text"],
    table input[type="number"],
    table input[type="email"],
    table textarea {
        width: 100%; /* Make the input fields fill the width of the cell */
        box-sizing: border-box; /* Include padding and border within the specified width */
    }
    textarea {
        width: 300px;
        height: 70px;
    }
</style>
<div id="customMessagesForm">
    <h1>Settings</h1>
    <label for="authToken">OpenAI API token:</label>
    <input type="password" id="authToken"><br/>
    <br/>
    <details>
        <summary>Default Settings (JSON): </summary>
        <pre>
        {
            "model": "gpt-3.5-turbo"
        }
        </pre>
        Example settings:
        <pre>
        { "model": "gpt-4-1106-preview" }
        </pre>
        See for more parameters <a href="https://platform.openai.com/docs/api-reference/chat/create">https://platform.openai.com/docs/api-reference/chat/create</a>
    </details>
    <br/>
    <details>
        <summary>Default Popup Style (CSS):</summary>
        <textarea id="defaultPopupStyle"></textarea>
    </details>
    <br>
    <label for="extButtonPrompt">System Prompt for extension button popup box:</label><br>
    <textarea id="extButtonPrompt"></textarea>
    <br>
    <p>Following variables can be used in your prompts:<br>
    <pre>
    VAR_SELECTED_TEXT
    VAR_PAGE_TITLE
    VAR_PAGE_URL
    </pre>
    </p>
    <input type="checkbox" id="toggleAdvancedColumns"><label for="toggleAdvancedColumns">Show Advanced Columns</label>
    <h2>Your custom prompts</h2>
    <table id="promptTable" border="1" width="100%">
        <thead>
        <tr>
            <th style="width: 2%;">Up/Down</th>
            <th style="width: 2%;">Enabled</th>
            <th class="advanced" style="width: 5%;">Context</th>
            <th style="width: 2%;">Replace text</th>
            <th style="width: 10%;">Title</th>
            <th style="width: 30%;">System Prompt</th>
            <th class="advanced" style="width: 10%;">User Message</th>
            <th class="advanced" style="width: 10%;">Prompt Settings (JSON)</th>
            <th class="advanced" style="width: 10%;">Popup Style (CSS properties for .lookupchatgpt-popup)</th>
            <th style="width: 5%;">Action</th>
        </tr>
        </thead>
        <tbody>
        <!-- Rows will be added here -->
        </tbody>
    </table>
    
    <button id="addNewPrompt">Add prompt</button>
    <button id="savePrompts">Save</button>
</div>
<script src="defaults.js"></script>
<script src="options.js"></script>
</body>
</html>