Hugging Face's logo

Spaces:
huggingchat
/
chat-ui
Paused

App Files Community
515
victor HF staff commited on
Commit
1dc44c8
•
1 Parent(s): 0f32539

theme

Browse files
Files changed (2) hide show
  1. src/app.html +6 -6
  2. src/routes/+page.svelte +37 -28
src/app.html CHANGED
@@ -1,5 +1,5 @@
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" />
@@ -9,12 +9,12 @@
9
  <script>
10
  tailwind.config = {
11
  theme: {
 
 
 
 
 
12
  extend: {
13
- colors: {
14
- gray: {
15
- 950: '#0b0f19'
16
- }
17
- },
18
  fontSize: {
19
  smd: '0.94rem'
20
  }
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
  <meta charset="utf-8" />
5
  <link rel="icon" href="%sveltekit.assets%/favicon.png" />
 
9
  <script>
10
  tailwind.config = {
11
  theme: {
12
+ // colors: {
13
+ // gray: {
14
+ // 950: '#0b0f19'
15
+ // }
16
+ // },
17
  extend: {
 
 
 
 
 
18
  fontSize: {
19
  smd: '0.94rem'
20
  }
src/routes/+page.svelte CHANGED
@@ -12,9 +12,28 @@
12
  content: string;
13
  };
14
 
15
- let messages: Message[] = [];
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  let message = '';
17
 
 
 
18
  function onWrite() {
19
  messages = [...messages, { from: 'user', content: message }];
20
  message = '';
@@ -60,53 +79,43 @@
60
  </script>
61
 
62
  <div class="grid h-screen w-screen md:grid-cols-[280px,1fr] overflow-hidden text-smd">
63
- <nav
64
- class="max-md:hidden bg-gradient-to-l from-gray-800/10 grid grid-rows-[auto,1fr,auto] grid-cols-1 max-h-screen"
65
- >
66
- <div class="flex-none sticky top-0 relative p-3 flex flex-col bg-black">
67
- <button class="border px-12 py-2.5 rounded-lg bg-gray-800/20 border border-gray-800/50 shadow"
68
- >New Chat</button
69
- >
70
  </div>
71
  <div class="flex flex-col overflow-y-auto p-3 -mt-3 gap-2">
72
- {#each Array(4) as _}
73
- <a
74
- href=""
75
- class="truncate text-gray-400 hover:bg-gray-800/50 py-3 px-3 rounded-lg flex-none"
76
- >
77
- sit amet consectetur adipisicing elit. Eos dolorum nihil alias.
78
  </a>
79
  {/each}
80
  </div>
81
  <div class="flex flex-col p-3 gap-2">
82
- <a href="" class="truncate text-gray-400 hover:bg-gray-800/50 py-3 px-3 rounded-lg mt-auto">
83
- Appearance
84
- </a>
85
- <a href="" class="truncate text-gray-400 hover:bg-gray-800/50 py-3 px-3 rounded-lg">
86
- Settings
87
- </a>
88
  </div>
89
  </nav>
90
  <div class="overflow-y-auto">
91
- <div class="max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8">
92
  {#each messages as { from, content }}
93
  {#if from === 'bot'}
94
  <div class="flex items-start justify-start gap-4 leading-relaxed">
95
  <img
 
96
  src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
97
- class="mt-5 w-3 h-3 flex-none rounded-full shadow-lg shadow-white/40"
98
  />
99
  <div
100
- class="group relative rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 py-3.5"
101
  >
102
  {content}
103
  </div>
104
  </div>
105
  {/if}
106
  {#if from === 'user'}
107
- <div class="flex items-start justify-start gap-4 text-gray-300/80">
108
  <div class="mt-5 w-3 h-3 flex-none rounded-full" />
109
- <div class="rounded-2xl px-5 py-3.5">
110
  {content}
111
  </div>
112
  </div>
@@ -116,11 +125,11 @@
116
  </div>
117
  </div>
118
  <div
119
- class="flex items-center justify-center absolute left-0 md:left-[280px] right-0 px-8 md:px-24 bottom-0 h-32 bg-gradient-to-t from-gray-900/50 to-black/0"
120
  >
121
  <form
122
  on:submit={onWrite}
123
- class="shadow-alternate relative flex items-center rounded-xl border border-gray-900 bg-black shadow-xl flex-1 max-w-4xl mx-4"
124
  >
125
  <svg
126
  class="absolute left-3 text-gray-300 top-1/2 transform -translate-y-1/2 pointer-events-none"
@@ -139,7 +148,7 @@
139
  /></svg
140
  >
141
  <input
142
- class="flex-1 border-none bg-transparent px-1 py-3 pr-3 pl-10 outline-none placeholder:text-gray-400"
143
  bind:value={message}
144
  on:submit={onWrite}
145
  placeholder="Ask anything"
 
12
  content: string;
13
  };
14
 
15
+ let messages: Message[] = [
16
+ {
17
+ from: 'user',
18
+ content: 'hello bot'
19
+ },
20
+ {
21
+ from: 'bot',
22
+ content: " Hello! I'm a conversational chatbot. What can I help you with today?<|endoftext|>"
23
+ },
24
+ {
25
+ from: 'user',
26
+ content: 'how are you?'
27
+ },
28
+ {
29
+ from: 'bot',
30
+ content: " I'm fine, thank you for asking. How are you?<|endoftext|>"
31
+ }
32
+ ];
33
  let message = '';
34
 
35
+ $: console.log(messages);
36
+
37
  function onWrite() {
38
  messages = [...messages, { from: 'user', content: message }];
39
  message = '';
 
79
  </script>
80
 
81
  <div class="grid h-screen w-screen md:grid-cols-[280px,1fr] overflow-hidden text-smd">
82
+ <nav class="max-md:hidden grid grid-rows-[auto,1fr,auto] grid-cols-1 max-h-screen bg-gray-50">
83
+ <div class="flex-none sticky top-0 relative p-3 flex flex-col">
84
+ <button class="border px-12 py-2.5 rounded-lg border shadow bg-white">New Chat</button>
 
 
 
 
85
  </div>
86
  <div class="flex flex-col overflow-y-auto p-3 -mt-3 gap-2">
87
+ {#each Array(5) as _}
88
+ <a href="" class="truncate py-3 px-3 rounded-lg flex-none text-gray-400 hover:bg-gray-100">
89
+ Amet consectetur adipisicing elit. Eos dolorum nihil alias.
 
 
 
90
  </a>
91
  {/each}
92
  </div>
93
  <div class="flex flex-col p-3 gap-2">
94
+ <a href="" class="truncate py-3 px-3 rounded-lg mt-auto"> Appearance </a>
95
+ <a href="" class="truncate py-3 px-3 rounded-lg"> Settings </a>
 
 
 
 
96
  </div>
97
  </nav>
98
  <div class="overflow-y-auto">
99
+ <div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8">
100
  {#each messages as { from, content }}
101
  {#if from === 'bot'}
102
  <div class="flex items-start justify-start gap-4 leading-relaxed">
103
  <img
104
+ alt=""
105
  src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
106
+ class="mt-5 w-3 h-3 flex-none rounded-full shadow-lg"
107
  />
108
  <div
109
+ class="group relative rounded-2xl px-5 py-3.5 border border-gray-100 bg-gradient-to-br from-gray-50"
110
  >
111
  {content}
112
  </div>
113
  </div>
114
  {/if}
115
  {#if from === 'user'}
116
+ <div class="flex items-start justify-start gap-4">
117
  <div class="mt-5 w-3 h-3 flex-none rounded-full" />
118
+ <div class="rounded-2xl px-5 py-3.5 text-gray-500">
119
  {content}
120
  </div>
121
  </div>
 
125
  </div>
126
  </div>
127
  <div
128
+ class="flex items-center justify-center absolute left-0 md:left-[280px] right-0 px-8 md:px-24 bottom-0 h-32"
129
  >
130
  <form
131
  on:submit={onWrite}
132
+ class="shadow-alternate relative flex items-center rounded-xl flex-1 max-w-4xl mx-4 border bg-gray-100"
133
  >
134
  <svg
135
  class="absolute left-3 text-gray-300 top-1/2 transform -translate-y-1/2 pointer-events-none"
 
148
  /></svg
149
  >
150
  <input
151
+ class="flex-1 border-none bg-transparent px-1 py-3 pr-3 pl-10 outline-none"
152
  bind:value={message}
153
  on:submit={onWrite}
154
  placeholder="Ask anything"