Spaces:
Build error
Build error
ui
Browse files- src/routes/+page.svelte +47 -46
src/routes/+page.svelte
CHANGED
@@ -70,61 +70,62 @@
|
|
70 |
</div>
|
71 |
<div class="flex flex-col overflow-y-auto p-3 -mt-3 gap-2">
|
72 |
{#each Array(5) as _}
|
73 |
-
<a href="/" class="truncate py-3 px-3 rounded-lg flex-none text-gray-
|
74 |
Amet consectetur adipisicing elit. Eos dolorum nihil alias.
|
75 |
</a>
|
76 |
{/each}
|
77 |
</div>
|
78 |
<div class="flex flex-col p-3 gap-2">
|
79 |
-
<a href="/" class="truncate py-3 px-3 rounded-lg
|
80 |
-
|
|
|
|
|
|
|
|
|
81 |
</div>
|
82 |
</nav>
|
83 |
-
<div class="
|
84 |
-
<div class="
|
85 |
-
|
86 |
-
|
87 |
-
|
88 |
-
|
89 |
-
|
90 |
-
|
|
|
|
|
91 |
</div>
|
92 |
-
|
93 |
-
|
94 |
-
class="flex items-center justify-center absolute left-0 md:left-[280px] right-0 px-8 md:px-24 bottom-0 h-32"
|
95 |
-
>
|
96 |
-
<form
|
97 |
-
on:submit={onWrite}
|
98 |
-
class="shadow-alternate relative flex items-center rounded-xl flex-1 max-w-4xl mx-4 border bg-gray-100"
|
99 |
>
|
100 |
-
<
|
101 |
-
class="absolute left-3 text-gray-300 top-1/2 transform -translate-y-1/2 pointer-events-none"
|
102 |
-
xmlns="http://www.w3.org/2000/svg"
|
103 |
-
xmlns:xlink="http://www.w3.org/1999/xlink"
|
104 |
-
aria-hidden="true"
|
105 |
-
focusable="false"
|
106 |
-
role="img"
|
107 |
-
width="1em"
|
108 |
-
height="1em"
|
109 |
-
preserveAspectRatio="xMidYMid meet"
|
110 |
-
viewBox="0 0 32 32"
|
111 |
-
><path
|
112 |
-
d="M30 28.59L22.45 21A11 11 0 1 0 21 22.45L28.59 30zM5 14a9 9 0 1 1 9 9a9 9 0 0 1-9-9z"
|
113 |
-
fill="currentColor"
|
114 |
-
/></svg
|
115 |
-
>
|
116 |
-
<input
|
117 |
-
class="flex-1 border-none bg-transparent px-1 py-3 pr-3 pl-10 outline-none"
|
118 |
-
bind:value={message}
|
119 |
on:submit={onWrite}
|
120 |
-
|
121 |
-
|
122 |
-
|
123 |
-
|
124 |
-
|
125 |
-
|
126 |
-
|
127 |
-
|
128 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
129 |
</div>
|
130 |
</div>
|
|
|
70 |
</div>
|
71 |
<div class="flex flex-col overflow-y-auto p-3 -mt-3 gap-2">
|
72 |
{#each Array(5) as _}
|
73 |
+
<a href="/" class="truncate py-3 px-3 rounded-lg flex-none text-gray-500 hover:bg-gray-100">
|
74 |
Amet consectetur adipisicing elit. Eos dolorum nihil alias.
|
75 |
</a>
|
76 |
{/each}
|
77 |
</div>
|
78 |
<div class="flex flex-col p-3 gap-2">
|
79 |
+
<a href="/" class="truncate py-3 px-3 rounded-lg flex-none text-gray-500 hover:bg-gray-100">
|
80 |
+
Appearance
|
81 |
+
</a>
|
82 |
+
<a href="/" class="truncate py-3 px-3 rounded-lg flex-none text-gray-500 hover:bg-gray-100">
|
83 |
+
Settings
|
84 |
+
</a>
|
85 |
</div>
|
86 |
</nav>
|
87 |
+
<div class="relative h-screen">
|
88 |
+
<div class="overflow-y-auto h-full">
|
89 |
+
<div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8 h-full">
|
90 |
+
{#each messages as message}
|
91 |
+
<ChatBox {message} />
|
92 |
+
{:else}
|
93 |
+
<ChatIntroduction title="Joi 20B Instruct" />
|
94 |
+
{/each}
|
95 |
+
<div class="h-32" />
|
96 |
+
</div>
|
97 |
</div>
|
98 |
+
<div
|
99 |
+
class="flex items-center bg-gradient-to-t from-white via-white to-white/0 justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-5 bottom-0 h-32 w-full bg-white"
|
|
|
|
|
|
|
|
|
|
|
100 |
>
|
101 |
+
<form
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
102 |
on:submit={onWrite}
|
103 |
+
class="shadow-alternate relative flex items-center rounded-xl flex-1 max-w-4xl border bg-gray-100"
|
104 |
+
>
|
105 |
+
<svg
|
106 |
+
class="absolute left-3 text-gray-300 top-1/2 transform -translate-y-1/2 pointer-events-none"
|
107 |
+
xmlns="http://www.w3.org/2000/svg"
|
108 |
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
109 |
+
aria-hidden="true"
|
110 |
+
focusable="false"
|
111 |
+
role="img"
|
112 |
+
width="1em"
|
113 |
+
height="1em"
|
114 |
+
preserveAspectRatio="xMidYMid meet"
|
115 |
+
viewBox="0 0 32 32"
|
116 |
+
><path
|
117 |
+
d="M30 28.59L22.45 21A11 11 0 1 0 21 22.45L28.59 30zM5 14a9 9 0 1 1 9 9a9 9 0 0 1-9-9z"
|
118 |
+
fill="currentColor"
|
119 |
+
/></svg
|
120 |
+
>
|
121 |
+
<input
|
122 |
+
class="flex-1 border-none bg-transparent px-1 py-3 pr-3 pl-10 outline-none"
|
123 |
+
bind:value={message}
|
124 |
+
on:submit={onWrite}
|
125 |
+
placeholder="Ask anything"
|
126 |
+
autofocus
|
127 |
+
/>
|
128 |
+
</form>
|
129 |
+
</div>
|
130 |
</div>
|
131 |
</div>
|