Spaces:
Paused
Paused
UI update misc (#4)
Browse files* mobile input
* rename and move files
* rm unused component
* clean + theme switch
* rm test
* mobile navigation
src/app.html
CHANGED
|
@@ -9,4 +9,7 @@
|
|
| 9 |
<body data-sveltekit-preload-data="hover" class="dark:bg-gray-900">
|
| 10 |
<div style="display: contents">%sveltekit.body%</div>
|
| 11 |
</body>
|
|
|
|
|
|
|
|
|
|
| 12 |
</html>
|
|
|
|
| 9 |
<body data-sveltekit-preload-data="hover" class="dark:bg-gray-900">
|
| 10 |
<div style="display: contents">%sveltekit.body%</div>
|
| 11 |
</body>
|
| 12 |
+
<script>
|
| 13 |
+
localStorage.theme === 'dark' && document.documentElement.classList.add('dark');
|
| 14 |
+
</script>
|
| 15 |
</html>
|
src/lib/components/{UserInput.svelte → chat/ChatInput.svelte}
RENAMED
|
File without changes
|
src/lib/{chat → components/chat}/ChatIntroduction.svelte
RENAMED
|
File without changes
|
src/lib/{chat/ChatBox.svelte → components/chat/ChatMessage.svelte}
RENAMED
|
File without changes
|
src/routes/+page.svelte
CHANGED
|
@@ -1,10 +1,14 @@
|
|
| 1 |
<script lang="ts">
|
|
|
|
|
|
|
| 2 |
import { afterUpdate } from 'svelte';
|
|
|
|
| 3 |
import { fetchEventSource } from '@microsoft/fetch-event-source';
|
| 4 |
-
|
| 5 |
-
import
|
| 6 |
-
import
|
| 7 |
-
import
|
|
|
|
| 8 |
import {
|
| 9 |
PUBLIC_ASSISTANT_MESSAGE_TOKEN,
|
| 10 |
PUBLIC_ENDPOINT,
|
|
@@ -26,6 +30,17 @@
|
|
| 26 |
messagesContainer.scrollTo(0, messagesContainer.scrollHeight);
|
| 27 |
});
|
| 28 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 29 |
function onWrite() {
|
| 30 |
if (!message) return;
|
| 31 |
|
|
@@ -90,12 +105,12 @@
|
|
| 90 |
class="grid h-screen w-screen md:grid-cols-[280px,1fr] overflow-hidden text-smd dark:text-gray-300"
|
| 91 |
>
|
| 92 |
<nav
|
| 93 |
-
class="max-md:hidden grid grid-rows-[auto,1fr,auto] grid-cols-1 max-h-screen bg-gradient-to-l from-gray-50 dark:from-gray-800/30"
|
| 94 |
>
|
| 95 |
-
<div class="flex-none sticky top-0
|
| 96 |
<button
|
| 97 |
on:click={() => location.reload()}
|
| 98 |
-
class="border px-12 py-2.5 rounded-lg
|
| 99 |
>New Chat</button
|
| 100 |
>
|
| 101 |
</div>
|
|
@@ -110,12 +125,12 @@
|
|
| 110 |
{/each}
|
| 111 |
</div>
|
| 112 |
<div class="flex flex-col p-3 gap-2">
|
| 113 |
-
<
|
| 114 |
-
|
| 115 |
-
class="truncate py-3 px-3 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
|
| 116 |
>
|
| 117 |
-
|
| 118 |
-
</
|
| 119 |
<a
|
| 120 |
href="/"
|
| 121 |
class="truncate py-3 px-3 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
|
|
@@ -125,10 +140,17 @@
|
|
| 125 |
</div>
|
| 126 |
</nav>
|
| 127 |
<div class="relative h-screen">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 128 |
<div class="overflow-y-auto h-full" bind:this={messagesContainer}>
|
| 129 |
<div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8 h-full">
|
| 130 |
{#each messages as message}
|
| 131 |
-
<
|
| 132 |
{:else}
|
| 133 |
<ChatIntroduction />
|
| 134 |
{/each}
|
|
@@ -136,14 +158,14 @@
|
|
| 136 |
</div>
|
| 137 |
</div>
|
| 138 |
<div
|
| 139 |
-
class="flex items-center bg-gradient-to-t from-white dark:from-gray-900 to-transparent justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-5 bottom-0 py-8 w-full"
|
| 140 |
>
|
| 141 |
<form
|
| 142 |
on:submit={onWrite}
|
| 143 |
class="shadow-alternate relative flex items-center rounded-xl flex-1 max-w-4xl border bg-gray-100 dark:bg-gray-700 dark:border-gray-600"
|
| 144 |
>
|
| 145 |
<div class="flex flex-1 border-none bg-transparent">
|
| 146 |
-
<
|
| 147 |
placeholder="Ask anything"
|
| 148 |
bind:value={message}
|
| 149 |
on:submit={onWrite}
|
|
|
|
| 1 |
<script lang="ts">
|
| 2 |
+
import type { Message, StreamResponse } from '$lib/Types';
|
| 3 |
+
|
| 4 |
import { afterUpdate } from 'svelte';
|
| 5 |
+
|
| 6 |
import { fetchEventSource } from '@microsoft/fetch-event-source';
|
| 7 |
+
|
| 8 |
+
import ChatMessage from '$lib/components/chat/ChatMessage.svelte';
|
| 9 |
+
import ChatIntroduction from '$lib/components/chat/ChatIntroduction.svelte';
|
| 10 |
+
import ChatInput from '$lib/components/chat/ChatInput.svelte';
|
| 11 |
+
|
| 12 |
import {
|
| 13 |
PUBLIC_ASSISTANT_MESSAGE_TOKEN,
|
| 14 |
PUBLIC_ENDPOINT,
|
|
|
|
| 30 |
messagesContainer.scrollTo(0, messagesContainer.scrollHeight);
|
| 31 |
});
|
| 32 |
|
| 33 |
+
function switchTheme() {
|
| 34 |
+
const { classList } = document.querySelector('html') as HTMLElement;
|
| 35 |
+
if (classList.contains('dark')) {
|
| 36 |
+
classList.remove('dark');
|
| 37 |
+
localStorage.theme = 'light';
|
| 38 |
+
} else {
|
| 39 |
+
classList.add('dark');
|
| 40 |
+
localStorage.theme = 'dark';
|
| 41 |
+
}
|
| 42 |
+
}
|
| 43 |
+
|
| 44 |
function onWrite() {
|
| 45 |
if (!message) return;
|
| 46 |
|
|
|
|
| 105 |
class="grid h-screen w-screen md:grid-cols-[280px,1fr] overflow-hidden text-smd dark:text-gray-300"
|
| 106 |
>
|
| 107 |
<nav
|
| 108 |
+
class="max-md:hidden grid grid-rows-[auto,1fr,auto] grid-cols-1 max-h-screen bg-gradient-to-l from-gray-50 dark:from-gray-800/30 rounded-r-xl"
|
| 109 |
>
|
| 110 |
+
<div class="flex-none sticky top-0 p-3 flex flex-col">
|
| 111 |
<button
|
| 112 |
on:click={() => location.reload()}
|
| 113 |
+
class="border px-12 py-2.5 rounded-lg shadow bg-white dark:bg-gray-700 dark:border-gray-600"
|
| 114 |
>New Chat</button
|
| 115 |
>
|
| 116 |
</div>
|
|
|
|
| 125 |
{/each}
|
| 126 |
</div>
|
| 127 |
<div class="flex flex-col p-3 gap-2">
|
| 128 |
+
<button
|
| 129 |
+
on:click={switchTheme}
|
| 130 |
+
class="text-left flex items-center first-letter:capitalize truncate py-3 px-3 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
|
| 131 |
>
|
| 132 |
+
Theme
|
| 133 |
+
</button>
|
| 134 |
<a
|
| 135 |
href="/"
|
| 136 |
class="truncate py-3 px-3 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
|
|
|
|
| 140 |
</div>
|
| 141 |
</nav>
|
| 142 |
<div class="relative h-screen">
|
| 143 |
+
<nav
|
| 144 |
+
class="sm:hidden flex items-center h-12 border-b px-4 justify-between dark:border-gray-800"
|
| 145 |
+
>
|
| 146 |
+
<button>[ ]</button>
|
| 147 |
+
<button>New Chat</button>
|
| 148 |
+
<button>+</button>
|
| 149 |
+
</nav>
|
| 150 |
<div class="overflow-y-auto h-full" bind:this={messagesContainer}>
|
| 151 |
<div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8 h-full">
|
| 152 |
{#each messages as message}
|
| 153 |
+
<ChatMessage {message} />
|
| 154 |
{:else}
|
| 155 |
<ChatIntroduction />
|
| 156 |
{/each}
|
|
|
|
| 158 |
</div>
|
| 159 |
</div>
|
| 160 |
<div
|
| 161 |
+
class="flex max-md:border-t dark:border-gray-800 items-center max-md:dark:bg-gray-900 max-md:bg-white bg-gradient-to-t from-white dark:from-gray-900 to-transparent justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-5 bottom-0 py-4 md:py-8 w-full"
|
| 162 |
>
|
| 163 |
<form
|
| 164 |
on:submit={onWrite}
|
| 165 |
class="shadow-alternate relative flex items-center rounded-xl flex-1 max-w-4xl border bg-gray-100 dark:bg-gray-700 dark:border-gray-600"
|
| 166 |
>
|
| 167 |
<div class="flex flex-1 border-none bg-transparent">
|
| 168 |
+
<ChatInput
|
| 169 |
placeholder="Ask anything"
|
| 170 |
bind:value={message}
|
| 171 |
on:submit={onWrite}
|
tailwind.config.cjs
CHANGED
|
@@ -2,6 +2,7 @@ const defaultTheme = require('tailwindcss/defaultTheme');
|
|
| 2 |
|
| 3 |
/** @type {import('tailwindcss').Config} */
|
| 4 |
export default {
|
|
|
|
| 5 |
content: ['./src/**/*.{html,js,svelte,ts}'],
|
| 6 |
theme: {
|
| 7 |
extend: {
|
|
|
|
| 2 |
|
| 3 |
/** @type {import('tailwindcss').Config} */
|
| 4 |
export default {
|
| 5 |
+
darkMode: 'class',
|
| 6 |
content: ['./src/**/*.{html,js,svelte,ts}'],
|
| 7 |
theme: {
|
| 8 |
extend: {
|