-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
173 lines (165 loc) · 8.52 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"
/>
<title>Saddle</title>
<meta name="description" content="TODO" />
<link rel="canonical" href="TODO" />
<meta name="theme-color" content="#000" />
<meta name="robots" content="index, follow" />
<link
rel="icon"
type="image/png"
sizes="512x512"
href="./assets/logo.jpg"
/>
<link rel="icon" type="image/x-icon" href="./assets/favicon.ico" />
<meta property="og:image" content="./assets/social_preview.png" />
<meta property="og:title" content="TODO" />
<meta property="og:site_name" content="TODO" />
<meta property="og:url" content="TODO" />
<meta property="og:description" content="TODO" />
<meta property="og:type" content="product" />
<link rel="manifest" href="./manifest.json" />
<link rel="stylesheet" href="./assets/github-markdown-dark.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/inter-ui/4.0.2/inter.css"
/>
<link rel="stylesheet" href="https://cdn.toolbomber.com/css/tw.css" />
<link rel="stylesheet" href="./assets/custom.css" />
<link rel="stylesheet" href="./assets/syntax.css" />
<link rel="stylesheet" href="./assets/fonts.css" />
<script src="https://unpkg.com/alpinejs" defer></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.6/purify.min.js"
defer
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.2/marked.min.js"
defer
></script>
<script src="https://cdn.toolbomber.com/js/WebArray.min.js" defer></script>
<script src="./_components/ResponseBubble.js"></script>
<script src="./Saddle.js"></script>
<script src="./app.js"></script>
</head>
<body class="font-inter">
<div x-data="$store.app" class="page bg-white c">
<div
class="w-full min-h-screen max-w-3xl flex flex-col flex-col-reverse py-12"
>
<div class="w-full fc flex-grow">
<div
id="history"
class="flex-grow bg-blue-100x flex flex-col flex-col px-4 items-start overflow-y-scroll h-96 tw-scrollbar gap-4 pb-4"
>
<template x-for="(message, index) in history" :key="index">
<div
:class="{ 'self-end': message.role === 'user' }"
x-html="ResponseBubble(message)"
x-effect="scrollToBottom()"
></div>
</template>
</div>
<div class="controls flex flex-col px-4">
<div
class="language-none flex w-full flex-1 items-center justify-between rounded-lg border border-neutral-200 font-medium text-neutral-600 focus:border-neutral-200 focus:ring-0 focus:ring-transparent"
>
<textarea
id="input-field"
class="border-r-1 p-3 relative w-full border-0 border-r-[1px] border-neutral-200 bg-transparent align-middle text-[13px] focus:border-neutral-200 focus:outline-none focus:ring-0 focus:ring-transparent"
placeholder="Message"
style="resize: none; overflow: hidden"
oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
rows="1"
></textarea>
<button
class="cursor-pointer px-2 py-1 text-neutral-500 hover:text-black focus:outline-none"
@click="handleSend()"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
color="#000000"
fill="none"
>
<path
d="M11.922 4.79004C16.6963 3.16245 19.0834 2.34866 20.3674 3.63261C21.6513 4.91656 20.8375 7.30371 19.21 12.078L18.1016 15.3292C16.8517 18.9958 16.2267 20.8291 15.1964 20.9808C14.9195 21.0216 14.6328 20.9971 14.3587 20.9091C13.3395 20.5819 12.8007 18.6489 11.7231 14.783C11.4841 13.9255 11.3646 13.4967 11.0924 13.1692C11.0134 13.0742 10.9258 12.9866 10.8308 12.9076C10.5033 12.6354 10.0745 12.5159 9.21705 12.2769C5.35111 11.1993 3.41814 10.6605 3.0909 9.64127C3.00292 9.36724 2.97837 9.08053 3.01916 8.80355C3.17088 7.77332 5.00419 7.14834 8.6708 5.89838L11.922 4.79004Z"
stroke="currentColor"
stroke-width="1.5"
/>
</svg>
</button>
</div>
<div class="settings py-1 text-xs">
<div
class="c flex flex-col text-opacity-70 hover:text-opacity-90 t c-p"
>
<div
class="title py-2 text-gray-900 text-opacity-60"
@click="isSettingsVisible = !isSettingsVisible"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="16"
height="16"
color="currentColor"
fill="none"
>
<path
d="M15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.067 10.067 8.5 12 8.5C13.933 8.5 15.5 10.067 15.5 12Z"
stroke="currentColor"
stroke-width="1.5"
/>
<path
d="M21.011 14.0965C21.5329 13.9558 21.7939 13.8854 21.8969 13.7508C22 13.6163 22 13.3998 22 12.9669V11.0332C22 10.6003 22 10.3838 21.8969 10.2493C21.7938 10.1147 21.5329 10.0443 21.011 9.90358C19.0606 9.37759 17.8399 7.33851 18.3433 5.40087C18.4817 4.86799 18.5509 4.60156 18.4848 4.44529C18.4187 4.28902 18.2291 4.18134 17.8497 3.96596L16.125 2.98673C15.7528 2.77539 15.5667 2.66972 15.3997 2.69222C15.2326 2.71472 15.0442 2.90273 14.6672 3.27873C13.208 4.73448 10.7936 4.73442 9.33434 3.27864C8.95743 2.90263 8.76898 2.71463 8.60193 2.69212C8.43489 2.66962 8.24877 2.77529 7.87653 2.98663L6.15184 3.96587C5.77253 4.18123 5.58287 4.28891 5.51678 4.44515C5.45068 4.6014 5.51987 4.86787 5.65825 5.4008C6.16137 7.3385 4.93972 9.37763 2.98902 9.9036C2.46712 10.0443 2.20617 10.1147 2.10308 10.2492C2 10.3838 2 10.6003 2 11.0332V12.9669C2 13.3998 2 13.6163 2.10308 13.7508C2.20615 13.8854 2.46711 13.9558 2.98902 14.0965C4.9394 14.6225 6.16008 16.6616 5.65672 18.5992C5.51829 19.1321 5.44907 19.3985 5.51516 19.5548C5.58126 19.7111 5.77092 19.8188 6.15025 20.0341L7.87495 21.0134C8.24721 21.2247 8.43334 21.3304 8.6004 21.3079C8.76746 21.2854 8.95588 21.0973 9.33271 20.7213C10.7927 19.2644 13.2088 19.2643 14.6689 20.7212C15.0457 21.0973 15.2341 21.2853 15.4012 21.3078C15.5682 21.3303 15.7544 21.2246 16.1266 21.0133L17.8513 20.034C18.2307 19.8187 18.4204 19.711 18.4864 19.5547C18.5525 19.3984 18.4833 19.132 18.3448 18.5991C17.8412 16.6616 19.0609 14.6226 21.011 14.0965Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
/>
</svg>
</div>
<div
x-show="isSettingsVisible"
class="bg-white text-base bg-opacity-10 w-full rounded-lg overflow-hidden"
>
<div class="px-4 py-2 f w-full border-b border-opacity-20">
<div class="text-xs p-2 w-full">
<div class="p-2">Model</div>
<select
class="w-full rounded-md bg-white px-2 py-2 text-sm items-center font-medium text-neutral-900 shadow-sm ring-1 ring-inset ring-neutral-300 hover:bg-neutral-50"
id="dropdown-model"
x-model="selectedModel"
x-on:change="changeModel(event)"
>
<template x-for="(model, index) in models" :key="index">
<option
x-text="model"
class="p-2 text-black"
:value="model"
></option>
</template>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>