slash/ai.html at main · PythonLuvr/slash · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' https: data:; style-src 'self' 'unsafe-inline'; script-src 'self'; connect-src 'self' https:; font-src 'self'; object-src 'none'; base-uri 'none'; frame-src 'none'" />
    <title>Slash AI</title>
    <link rel="stylesheet" href="theme.css" />
    <link rel="stylesheet" href="ai.css" />
  </head>
  <body>
    <header id="header">
      <img id="brand-logo" src="assets/slash-logo.png" alt="Slash" title="Slash AI in Materia" />
      <button id="picker" type="button" title="Choose model and CLI/API" aria-label="Choose model and CLI/API" aria-haspopup="true" aria-expanded="false">
        <img id="picker-logo" class="pk-logo" alt="" />
        <span id="picker-label">Claude</span>
        <span class="caret">&#9662;</span>
      </button>
      <button id="expand" type="button" title="Open full screen (slash://ai)" aria-label="Open full screen (slash://ai)"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M21 16v3a2 2 0 0 1-2 2h-3M3 16v3a2 2 0 0 0 2 2h3"/></svg></button>
      <button id="dock" type="button" class="hidden" title="Dock to sidebar" aria-label="Dock to sidebar"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><line x1="15" y1="4" x2="15" y2="20"/></svg></button>
      <button id="gear" type="button" title="Settings (API keys)" aria-label="Settings (API keys)">&#9881;</button>
    </header>

    <div id="picker-menu" class="hidden"></div>

    <!-- Chat view -->
    <section id="chat">
      <div id="thread"></div>
      <div id="empty">
        <p class="empty-text">
          Ask anything. Claude answers through your CLI by default.
          Switch model or variant from the picker above, or add API keys with the gear.
        </p>
        <div id="starters" class="starters" aria-label="Conversation starters"></div>
      </div>
      <div id="composer">
        <textarea id="input" rows="1" placeholder="Message Claude" spellcheck="false" aria-label="Message"></textarea>
        <button id="send" type="button" title="Send" aria-label="Send">&#8593;</button>
      </div>
    </section>

    <!-- Settings view -->
    <section id="settings" class="hidden">
      <div class="settings-head">
        <button id="settings-back" type="button">&#8249; Back</button>
        <span class="settings-title">API keys</span>
      </div>
      <div class="settings-body" id="settings-body"></div>
      <div class="settings-foot">
        <button id="settings-save" type="button">Save</button>
        <p id="settings-note">
          Keys are stored locally on this machine and sent only to the provider you select.
          CLI variants need no key, they use your existing subscription.
        </p>
      </div>
    </section>

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