Hugging Face's logo

Spaces:
nisten
/
chat-ui
Build error

App Files Community
victor HF staff commited on
Commit
1a39133
•
1 Parent(s): ef5513c

wip

Browse files
Files changed (2) hide show
  1. src/app.html +6 -1
  2. src/routes/+page.svelte +16 -6
src/app.html CHANGED
@@ -1,5 +1,5 @@
1
  <!DOCTYPE html>
2
- <html lang="en" class="bg-black/95 text-gray-200">
3
  <head>
4
  <meta charset="utf-8" />
5
  <link rel="icon" href="%sveltekit.assets%/favicon.png" />
@@ -10,6 +10,11 @@
10
  tailwind.config = {
11
  theme: {
12
  extend: {
 
 
 
 
 
13
  fontSize: {
14
  smd: '0.94rem'
15
  }
 
1
  <!DOCTYPE html>
2
+ <html lang="en" class="bg-gray-950 text-gray-200">
3
  <head>
4
  <meta charset="utf-8" />
5
  <link rel="icon" href="%sveltekit.assets%/favicon.png" />
 
10
  tailwind.config = {
11
  theme: {
12
  extend: {
13
+ colors: {
14
+ gray: {
15
+ 950: '#0b0f19'
16
+ }
17
+ },
18
  fontSize: {
19
  smd: '0.94rem'
20
  }
src/routes/+page.svelte CHANGED
@@ -59,12 +59,22 @@
59
  </script>
60
 
61
  <div class="grid h-screen w-screen md:grid-cols-[256px,1fr] overflow-hidden text-smd">
62
- <div class="max-md:hidden bg-gray-900/20 pt-6 px-6">
63
  <button
64
  class="border px-12 py-2.5 rounded-lg bg-gray-800/20 border border-gray-800/50 shadow w-full"
65
  >New Chat</button
66
  >
67
- </div>
 
 
 
 
 
 
 
 
 
 
68
  <div class="overflow-y-auto">
69
  <div class="max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8">
70
  {#each messages as { from, content }}
@@ -72,7 +82,7 @@
72
  <div class="flex items-start justify-start gap-4 leading-relaxed">
73
  <img
74
  src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
75
- class="mt-4 w-3 h-3 flex-none rounded-full shadow-lg shadow-white/40"
76
  />
77
  <div
78
  class="group relative rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 py-3.5"
@@ -83,7 +93,7 @@
83
  {/if}
84
  {#if from === 'user'}
85
  <div class="flex items-start justify-start gap-4 text-gray-300/80">
86
- <div class="mt-4 w-3 h-3 flex-none rounded-full" />
87
  <div class="rounded-2xl px-5 py-3.5">
88
  {content}
89
  </div>
@@ -94,11 +104,11 @@
94
  </div>
95
  </div>
96
  <div
97
- class="flex items-center justify-center absolute left-[256px] right-0 px-24 bottom-0 h-32 bg-gradient-to-t from-gray-900/50 to-black/0"
98
  >
99
  <form
100
  on:submit={onWrite}
101
- class="shadow-alternate relative flex items-center rounded-xl border border-gray-900 bg-black shadow-xl flex-1 max-w-4xl"
102
  >
103
  <svg
104
  class="absolute left-3 text-gray-300 top-1/2 transform -translate-y-1/2 pointer-events-none"
 
59
  </script>
60
 
61
  <div class="grid h-screen w-screen md:grid-cols-[256px,1fr] overflow-hidden text-smd">
62
+ <nav class="max-md:hidden bg-gradient-to-l from-gray-800/10 p-4 flex flex-col gap-2">
63
  <button
64
  class="border px-12 py-2.5 rounded-lg bg-gray-800/20 border border-gray-800/50 shadow w-full"
65
  >New Chat</button
66
  >
67
+ <a href="" class="truncate text-gray-400 hover:bg-gray-800/50 py-3 px-3 rounded-lg">
68
+ sit amet consectetur adipisicing elit. Eos dolorum nihil alias.
69
+ </a>
70
+
71
+ <a href="" class="truncate text-gray-400 hover:bg-gray-800/50 py-3 px-3 rounded-lg mt-auto">
72
+ Appearance
73
+ </a>
74
+ <a href="" class="truncate text-gray-400 hover:bg-gray-800/50 py-3 px-3 rounded-lg">
75
+ Settings
76
+ </a>
77
+ </nav>
78
  <div class="overflow-y-auto">
79
  <div class="max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8">
80
  {#each messages as { from, content }}
 
82
  <div class="flex items-start justify-start gap-4 leading-relaxed">
83
  <img
84
  src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
85
+ class="mt-5 w-3 h-3 flex-none rounded-full shadow-lg shadow-white/40"
86
  />
87
  <div
88
  class="group relative rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 py-3.5"
 
93
  {/if}
94
  {#if from === 'user'}
95
  <div class="flex items-start justify-start gap-4 text-gray-300/80">
96
+ <div class="mt-5 w-3 h-3 flex-none rounded-full" />
97
  <div class="rounded-2xl px-5 py-3.5">
98
  {content}
99
  </div>
 
104
  </div>
105
  </div>
106
  <div
107
+ class="flex items-center justify-center absolute left-0 md:left-[256px] right-0 px-8 md:px-24 bottom-0 h-32 bg-gradient-to-t from-gray-900/50 to-black/0"
108
  >
109
  <form
110
  on:submit={onWrite}
111
+ class="shadow-alternate relative flex items-center rounded-xl border border-gray-900 bg-black shadow-xl flex-1 max-w-4xl mx-4"
112
  >
113
  <svg
114
  class="absolute left-3 text-gray-300 top-1/2 transform -translate-y-1/2 pointer-events-none"