Hugging Face's logo

Spaces:
nisten
/
chat-ui
Build error

App Files Community
victor HF staff commited on
Commit
663005a
•
1 Parent(s): dc0d663

dark mode

Browse files
Files changed (4) hide show
  1. src/app.html +1 -1
  2. src/lib/chat/ChatBox.svelte +2 -2
  3. src/lib/chat/ChatIntroduction.svelte +18 -6
  4. src/routes/+page.svelte +23 -9
src/app.html CHANGED
@@ -23,7 +23,7 @@
23
  };
24
  </script>
25
  </head>
26
- <body data-sveltekit-preload-data="hover">
27
  <div style="display: contents">%sveltekit.body%</div>
28
  </body>
29
  </html>
 
23
  };
24
  </script>
25
  </head>
26
+ <body data-sveltekit-preload-data="hover" class="dark:bg-gray-900">
27
  <div style="display: contents">%sveltekit.body%</div>
28
  </body>
29
  </html>
src/lib/chat/ChatBox.svelte CHANGED
@@ -10,7 +10,7 @@
10
  class="mt-5 w-3 h-3 flex-none rounded-full shadow-lg"
11
  />
12
  <div
13
- class="group relative rounded-2xl px-5 py-3.5 border border-gray-100 bg-gradient-to-br from-gray-50"
14
  >
15
  {message.content}
16
  </div>
@@ -19,7 +19,7 @@
19
  {#if message.from === 'user'}
20
  <div class="flex items-start justify-start gap-4">
21
  <div class="mt-5 w-3 h-3 flex-none rounded-full" />
22
- <div class="rounded-2xl px-5 py-3.5 text-gray-500">
23
  {message.content}
24
  </div>
25
  </div>
 
10
  class="mt-5 w-3 h-3 flex-none rounded-full shadow-lg"
11
  />
12
  <div
13
+ class="group relative rounded-2xl px-5 py-3.5 border border-gray-100 bg-gradient-to-br from-gray-50 dark:from-gray-800/40 dark:border-gray-800"
14
  >
15
  {message.content}
16
  </div>
 
19
  {#if message.from === 'user'}
20
  <div class="flex items-start justify-start gap-4">
21
  <div class="mt-5 w-3 h-3 flex-none rounded-full" />
22
+ <div class="rounded-2xl px-5 py-3.5 text-gray-500 dark:text-gray-400">
23
  {message.content}
24
  </div>
25
  </div>
src/lib/chat/ChatIntroduction.svelte CHANGED
@@ -7,10 +7,22 @@
7
  <h1 class="text-3xl font-bold mb-1.5">{title}</h1>
8
  <p class="text-lg text-gray-500">Lorem ipsum dolor sit.</p>
9
  </div>
10
- <div class="bg-gray-50 rounded-xl text-gray-500 p-4">Create</div>
11
- <div class="bg-gray-50 rounded-xl text-gray-500 p-4">Discover</div>
12
- <div class="bg-gray-50 rounded-xl text-gray-500 p-4">Overcome</div>
13
- <div class="bg-gray-50 rounded-xl text-gray-500 p-4">Create</div>
14
- <div class="bg-gray-50 rounded-xl text-gray-500 p-4">Discover</div>
15
- <div class="bg-gray-50 rounded-xl text-gray-500 p-4">Overcome</div>
 
 
 
 
 
 
 
 
 
 
 
 
16
  </div>
 
7
  <h1 class="text-3xl font-bold mb-1.5">{title}</h1>
8
  <p class="text-lg text-gray-500">Lorem ipsum dolor sit.</p>
9
  </div>
10
+ <div class="bg-gray-50 dark:bg-gray-700 rounded-xl text-gray-500 dark:text-gray-400 p-4">
11
+ Create
12
+ </div>
13
+ <div class="bg-gray-50 dark:bg-gray-700 rounded-xl text-gray-500 dark:text-gray-400 p-4">
14
+ Discover
15
+ </div>
16
+ <div class="bg-gray-50 dark:bg-gray-700 rounded-xl text-gray-500 dark:text-gray-400 p-4">
17
+ Overcome
18
+ </div>
19
+ <div class="bg-gray-50 dark:bg-gray-700 rounded-xl text-gray-500 dark:text-gray-400 p-4">
20
+ Create
21
+ </div>
22
+ <div class="bg-gray-50 dark:bg-gray-700 rounded-xl text-gray-500 dark:text-gray-400 p-4">
23
+ Discover
24
+ </div>
25
+ <div class="bg-gray-50 dark:bg-gray-700 rounded-xl text-gray-500 dark:text-gray-400 p-4">
26
+ Overcome
27
+ </div>
28
  </div>
src/routes/+page.svelte CHANGED
@@ -61,25 +61,39 @@
61
  }
62
  </script>
63
 
64
- <div class="grid h-screen w-screen md:grid-cols-[280px,1fr] overflow-hidden text-smd">
 
 
65
  <nav
66
- class="max-md:hidden grid grid-rows-[auto,1fr,auto] grid-cols-1 max-h-screen bg-gradient-to-l from-gray-50"
67
  >
68
  <div class="flex-none sticky top-0 relative p-3 flex flex-col">
69
- <button class="border px-12 py-2.5 rounded-lg border shadow bg-white">New Chat</button>
 
 
 
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>
@@ -92,15 +106,15 @@
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"
 
61
  }
62
  </script>
63
 
64
+ <div
65
+ class="grid h-screen w-screen md:grid-cols-[280px,1fr] overflow-hidden text-smd dark:text-gray-300"
66
+ >
67
  <nav
68
+ 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"
69
  >
70
  <div class="flex-none sticky top-0 relative p-3 flex flex-col">
71
+ <button
72
+ class="border px-12 py-2.5 rounded-lg border shadow bg-white dark:bg-gray-700 dark:border-gray-600"
73
+ >New Chat</button
74
+ >
75
  </div>
76
  <div class="flex flex-col overflow-y-auto p-3 -mt-3 gap-2">
77
  {#each Array(5) as _}
78
+ <a
79
+ href="/"
80
+ 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"
81
+ >
82
  Amet consectetur adipisicing elit. Eos dolorum nihil alias.
83
  </a>
84
  {/each}
85
  </div>
86
  <div class="flex flex-col p-3 gap-2">
87
+ <a
88
+ href="/"
89
+ 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"
90
+ >
91
  Appearance
92
  </a>
93
+ <a
94
+ href="/"
95
+ 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"
96
+ >
97
  Settings
98
  </a>
99
  </div>
 
106
  {:else}
107
  <ChatIntroduction title="Joi 20B Instruct" />
108
  {/each}
109
+ <div class="h-32 flex-none" />
110
  </div>
111
  </div>
112
  <div
113
+ 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 h-32 w-full"
114
  >
115
  <form
116
  on:submit={onWrite}
117
+ 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"
118
  >
119
  <svg
120
  class="absolute left-3 text-gray-300 top-1/2 transform -translate-y-1/2 pointer-events-none"