Hugging Face's logo

Spaces:
JCTN
/
chat-ui
Build error

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

ui

Browse files
Files changed (1) hide show
  1. src/routes/+page.svelte +47 -46
src/routes/+page.svelte CHANGED
@@ -70,61 +70,62 @@
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-400 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 mt-auto"> Appearance </a>
80
- <a href="/" class="truncate py-3 px-3 rounded-lg"> Settings </a>
 
 
 
 
81
  </div>
82
  </nav>
83
- <div class="overflow-y-auto">
84
- <div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8 h-full">
85
- {#each messages as message}
86
- <ChatBox {message} />
87
- {:else}
88
- <ChatIntroduction title="Joi 20B Instruct" />
89
- {/each}
90
- <div class="h-32" />
 
 
91
  </div>
92
- </div>
93
- <div
94
- class="flex items-center justify-center absolute left-0 md:left-[280px] right-0 px-8 md:px-24 bottom-0 h-32"
95
- >
96
- <form
97
- on:submit={onWrite}
98
- class="shadow-alternate relative flex items-center rounded-xl flex-1 max-w-4xl mx-4 border bg-gray-100"
99
  >
100
- <svg
101
- class="absolute left-3 text-gray-300 top-1/2 transform -translate-y-1/2 pointer-events-none"
102
- xmlns="http://www.w3.org/2000/svg"
103
- xmlns:xlink="http://www.w3.org/1999/xlink"
104
- aria-hidden="true"
105
- focusable="false"
106
- role="img"
107
- width="1em"
108
- height="1em"
109
- preserveAspectRatio="xMidYMid meet"
110
- viewBox="0 0 32 32"
111
- ><path
112
- d="M30 28.59L22.45 21A11 11 0 1 0 21 22.45L28.59 30zM5 14a9 9 0 1 1 9 9a9 9 0 0 1-9-9z"
113
- fill="currentColor"
114
- /></svg
115
- >
116
- <input
117
- class="flex-1 border-none bg-transparent px-1 py-3 pr-3 pl-10 outline-none"
118
- bind:value={message}
119
  on:submit={onWrite}
120
- placeholder="Ask anything"
121
- autofocus
122
- />
123
- </form>
124
- <!-- <input
125
- type="text"
126
- placeholder="Type anything..."
127
- class="w-full rounded-2xl border border-black bg-black px-4 py-3.5 shadow-2xl shadow-white/5 outline-none ring-gray-700 focus:ring-1 max-w-4xl"
128
- /> -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
129
  </div>
130
  </div>
 
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>
86
  </nav>
87
+ <div class="relative h-screen">
88
+ <div class="overflow-y-auto h-full">
89
+ <div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8 h-full">
90
+ {#each messages as message}
91
+ <ChatBox {message} />
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"
107
+ xmlns="http://www.w3.org/2000/svg"
108
+ xmlns:xlink="http://www.w3.org/1999/xlink"
109
+ aria-hidden="true"
110
+ focusable="false"
111
+ role="img"
112
+ width="1em"
113
+ height="1em"
114
+ preserveAspectRatio="xMidYMid meet"
115
+ viewBox="0 0 32 32"
116
+ ><path
117
+ d="M30 28.59L22.45 21A11 11 0 1 0 21 22.45L28.59 30zM5 14a9 9 0 1 1 9 9a9 9 0 0 1-9-9z"
118
+ fill="currentColor"
119
+ /></svg
120
+ >
121
+ <input
122
+ class="flex-1 border-none bg-transparent px-1 py-3 pr-3 pl-10 outline-none"
123
+ bind:value={message}
124
+ on:submit={onWrite}
125
+ placeholder="Ask anything"
126
+ autofocus
127
+ />
128
+ </form>
129
+ </div>
130
  </div>
131
  </div>