-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathsidepanel.html
78 lines (78 loc) · 3.46 KB
/
sidepanel.html
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
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GPT Chat Assistant</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="sidebar" class="expanded">
<div id="sidebar-header">
<button id="new-chat-button">New Chat</button>
<button id="settings-button" class="icon-button" title="Settings">⚙️</button>
<button id="minimize-button" class="icon-button" title="Collapse Sidebar"><<</button>
</div>
<div id="chat-history"></div>
</div>
<div id="chat-container">
<div id="chat-messages"></div>
<div id="input-area">
<div id="user-input" contenteditable="true" data-placeholder="Enter your query, human..."></div>
<div id="controls">
<select id="model-select"></select>
<button id="send-button">Send</button>
</div>
</div>
</div>
<div id="collapsed-sidebar">
<button id="expand-sidebar-button" class="icon-button" title="Expand Sidebar">>></button>
<button id="settings-button-collapsed" class="icon-button" title="Settings">⚙️</button>
<button id="new-chat-button-collapsed" class="icon-button" title="New Chat">+</button>
</div>
<div id="settings-modal" class="modal">
<div class="modal-content">
<h2>Chat Assistant Settings</h2>
<div class="provider-tabs">
<button class="provider-tab active" data-provider="openai">OpenAI</button>
<button class="provider-tab" data-provider="anthropic">Anthropic</button>
<button class="provider-tab" data-provider="local">Local</button>
<button class="provider-tab" data-provider="shortcuts">Shortcuts</button>
</div>
<div class="form-group" id="model-group">
<label for="settings-model-select">Model:</label>
<select id="settings-model-select"></select>
</div>
<div class="form-group" id="local-model-group" style="display: none">
<label for="local-model-input">Add Local Model:</label>
<div class="input-group">
<input type="text" id="local-model-input" placeholder="Enter model name" />
<button id="add-local-model">Add</button>
</div>
</div>
<div class="form-group" id="api-key-group">
<label for="api-key-input">API Key:</label>
<input type="password" id="api-key-input" placeholder="Enter API Key" />
</div>
<div class="form-group" id="local-url-group" style="display: none">
<label for="local-url-input">Local URL:</label>
<input type="text" id="local-url-input" placeholder="Enter Local URL" />
</div>
<div id="shortcuts-content" style="display: none">
<h3>Keyboard Shortcuts</h3>
<ul id="shortcuts-list">
<li><strong>Ctrl + L:</strong> Toggle GPT Chat Side Panel</li>
<li><strong>Ctrl + M:</strong> Toggle GPT Model</li>
<li><strong>Ctrl + B:</strong> Toggle Chat History Sidebar</li>
<li><strong>Ctrl + N:</strong> Create a new chat</li>
</ul>
</div>
<button id="save-button">Save Settings</button>
<button id="close-settings">Close</button>
</div>
</div>
<script src="marked.min.js"></script>
<script src="settings.js" type="module"></script>
<script src="sidepanel.js" type="module"></script>
</body>
</html>