Hugging Face's logo

Spaces:
Lockthewi
/
chat-ui
Paused

App Files Community
victor HF Staff commited on
Commit
6a35655
·
unverified ·
1 Parent(s): fc5999a

UI update misc (#4)

Browse files

* mobile input

* rename and move files

* rm unused component

* clean + theme switch

* rm test

* mobile navigation

Files changed (6) hide show
  1. src/app.html +3 -0
  2. src/lib/components/{UserInput.svelte → chat/ChatInput.svelte} +0 -0
  3. src/lib/{chat → components/chat}/ChatIntroduction.svelte +0 -0
  4. src/lib/{chat/ChatBox.svelte → components/chat/ChatMessage.svelte} +0 -0
  5. src/routes/+page.svelte +37 -15
  6. tailwind.config.cjs +1 -0
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
- import ChatBox from '$lib/chat/ChatBox.svelte';
5
- import ChatIntroduction from '$lib/chat/ChatIntroduction.svelte';
6
- import UserInput from '$lib/components/UserInput.svelte';
7
- import type { Message, StreamResponse } from '$lib/Types';
 
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 relative p-3 flex flex-col">
96
  <button
97
  on:click={() => location.reload()}
98
- class="border px-12 py-2.5 rounded-lg border shadow bg-white dark:bg-gray-700 dark:border-gray-600"
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
- <a
114
- href="/"
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
- Appearance
118
- </a>
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
- <ChatBox {message} />
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
- <UserInput
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: {