-
Notifications
You must be signed in to change notification settings - Fork 18
/
Copy pathindex.html
136 lines (97 loc) · 4.01 KB
/
index.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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!doctype html>
<html class="h-full bg-gray-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Generated by tailwindcss CLI -->
<link href="./css/global.min.css" rel="stylesheet">
<script type="module">
import './components/chatty-modal.js'
import './components/chatty-prompt.js'
import './views/left-menu.js'
import './views/settings-view.js'
import './views/create-chat.js'
import './views/chat-view.js'
</script>
</head>
<body class="h-full">
<!-- Page Container -->
<div class="h-full">
<left-menu></left-menu>
<div class="flex flex-1 flex-col pl-64 h-full">
<main class="flex-1 h-full">
<div id="main-content" class="relative h-full overflow-x-hidden overflow-y-auto">
<!-- content -->
<create-chat></create-chat>
</div>
</main>
</div>
</div>
<chatty-modal id="settings-modal">
<settings-view></settings-view>
</chatty-modal>
<chatty-prompt id="clear-all-prompt">
<chatty-icon slot="icon" name="trash" class="h-6 w-6 text-red-600"></chatty-icon>
<span slot="title">Clear all data</span>
<span slot="description">This will delete your chat history and reset you API key and Organization ID.</span>
<span slot="ok-label">Clear everything!</span>
<span slot="cancel-label">Cancel</span>
</chatty-prompt>
<script>
// TODO: Much of this, should be packed into something like a "router".
// The router should also take care of removing current content and injecting the new view.
// A router should also parse and use the URL parameters.
// Left menu listeners
document.querySelector('left-menu').addEventListener('settings', (evt) => {
evt.preventDefault()
evt.stopPropagation()
document.querySelector('#settings-modal').setAttribute('visible', true)
})
document.querySelector('left-menu').addEventListener('clear', (evt) => {
evt.preventDefault()
evt.stopPropagation()
document.querySelector('#clear-all-prompt').setAttribute('visible', true)
})
document.querySelector('left-menu').addEventListener('create-chat', (evt) => {
evt.preventDefault()
evt.stopPropagation()
document.querySelector('#main-content').innerHTML = '<create-chat />'
})
document.querySelector('left-menu').addEventListener('chat', (evt) => {
evt.preventDefault()
evt.stopPropagation()
document.querySelector('#main-content').innerHTML = `<chat-view chat-id="${evt.detail}" />`
})
// document.querySelector('left-menu').addEventListener('click', (evt) => {
// console.log(evt)
// })
// Settings and clear listeners
// Show the settings modal, when no API key has been set
if (!localStorage.getItem('openai-apikey')) {
document.querySelector('#settings-modal').setAttribute('visible', true)
}
// Close the modal, when done event is received
document.querySelector('settings-view').addEventListener('done', (evt) => {
document.querySelector('#settings-modal').setAttribute('visible', false)
document.querySelector('left-menu').update()
})
// Clear localStorage, update settings view and hide the prompt
document.querySelector('chatty-prompt').addEventListener('ok', (evt) => {
evt.preventDefault()
evt.stopPropagation()
localStorage.clear()
document.querySelector('settings-view').updateView()
document.querySelector('chatty-prompt').setAttribute('visible', false)
})
// "Create chat" listener
document.querySelector('#main-content').addEventListener('created', (evt) => {
document.querySelector('left-menu').update()
document.querySelector('#main-content').innerHTML = `<chat-view chat-id="${evt.detail}" />`
})
// Listen for any bubbled update-menu events on main-content
document.querySelector('#main-content').addEventListener('update-menu', (evt) => {
document.querySelector('left-menu').update()
})
</script>
</body>
</html>