noice/options.html at main · dep/noice · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Noice - Settings</title>
  <link rel="stylesheet" href="options.css">
</head>
<body>
  <div class="container">
    <h1>Noice Settings</h1>
    <p class="subtitle">Configure your LLM assistant</p>

    <form id="settings-form">
      <div class="form-group">
        <label for="provider">Provider</label>
        <select id="provider" name="provider">
          <option value="openai">OpenAI</option>
          <option value="anthropic">Anthropic</option>
          <option value="gemini">Google Gemini</option>
        </select>
      </div>

      <div class="form-group">
        <label for="api-key">API Key</label>
        <div class="input-with-toggle">
          <input type="password" id="api-key" name="apiKey" placeholder="Enter your API key">
          <button type="button" id="toggle-visibility" class="toggle-btn" title="Show/hide API key">
            <svg class="eye-icon" viewBox="0 0 24 24" width="20" height="20">
              <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
            </svg>
          </button>
        </div>
        <p class="help-text" id="api-key-help">Get your API key from OpenAI dashboard</p>
      </div>

      <div class="form-group">
        <label for="model">Model</label>
        <select id="model" name="model">
          <!-- Populated dynamically based on provider -->
        </select>
      </div>

      <div class="form-group">
        <label for="system-prompt">System Prompt (optional)</label>
        <textarea id="system-prompt" name="systemPrompt" rows="3" placeholder="Custom instructions for the AI assistant..."></textarea>
      </div>

      <div class="form-actions">
        <button type="submit" class="btn-primary">Save Settings</button>
        <span id="save-status" class="save-status"></span>
      </div>
    </form>

    <div class="shortcut-info">
      <h2>Keyboard Shortcut</h2>
      <p>
        Press <kbd>Ctrl+J</kbd> to open the assistant.
      </p>
      <p class="help-text">
        To change the shortcut, go to <code>about:addons</code> &rarr; Gear icon &rarr; Manage Extension Shortcuts
      </p>
    </div>
  </div>

  <script src="options.js"></script>
</body>
</html>