victor HF staff nsarrazin HF staff commited on
Commit
e0c0b0e
1 Parent(s): 2cb745f

Misc UI (#616)

Browse files

* fix bottom gradient

* larger textarea

* dropzone

* lint

---------

Co-authored-by: Nathan Sarrazin <sarrazin.nathan@gmail.com>

src/lib/components/chat/ChatWindow.svelte CHANGED
@@ -110,35 +110,35 @@
110
  />
111
 
112
  <div
113
- class="pointer-events-none absolute inset-x-0 bottom-0 z-0 mx-auto flex w-full max-w-3xl flex-col items-center justify-center md:px-5 md:py-8 xl:max-w-4xl [&>*]:pointer-events-auto"
114
  >
115
- <div class="flex flex-row flex-wrap justify-center gap-2.5 max-md:pb-3">
116
- {#each sources as source, index}
117
- {#await source then src}
118
- <div class="relative h-24 w-24 overflow-hidden rounded-lg shadow-lg">
119
- <img
120
- src={`data:image/*;base64,${src}`}
121
- alt="input content"
122
- class="h-full w-full rounded-lg bg-gray-400 object-cover dark:bg-gray-900"
123
- />
124
- <!-- add a button on top that deletes this image from sources -->
125
- <button
126
- class="absolute left-1 top-1"
127
- on:click={() => {
128
- files = files.filter((_, i) => i !== index);
129
- }}
130
- >
131
- <CarbonClose class="text-md font-black text-gray-300 hover:text-gray-100" />
132
- </button>
133
- </div>
134
- {/await}
135
- {/each}
136
- </div>
 
 
137
 
138
- <div
139
- class="dark:via-gray-80 w-full bg-gradient-to-t from-white via-white/80 to-white/0 dark:border-gray-800 dark:from-gray-900 dark:to-gray-900/0 max-md:border-t max-md:bg-white max-md:px-4 max-md:dark:bg-gray-900"
140
- >
141
- <div class="flex w-full pb-3 max-md:pt-3">
142
  {#if $page.data.settings?.searchEnabled}
143
  <WebSearchToggle />
144
  {/if}
@@ -184,7 +184,7 @@
184
  loginModalOpen = true;
185
  }
186
  }}
187
- maxRows={4}
188
  disabled={isReadOnly || lastIsError}
189
  />
190
  {/if}
 
110
  />
111
 
112
  <div
113
+ class="dark:via-gray-80 pointer-events-none absolute inset-x-0 bottom-0 z-0 mx-auto flex w-full max-w-3xl flex-col items-center justify-center bg-gradient-to-t from-white via-white/80 to-white/0 px-3.5 py-4 dark:border-gray-800 dark:from-gray-900 dark:to-gray-900/0 max-md:border-t max-md:bg-white max-md:dark:bg-gray-900 sm:px-5 md:py-8 xl:max-w-4xl [&>*]:pointer-events-auto"
114
  >
115
+ {#if sources.length}
116
+ <div class="flex flex-row flex-wrap justify-center gap-2.5 max-md:pb-3">
117
+ {#each sources as source, index}
118
+ {#await source then src}
119
+ <div class="relative h-16 w-16 overflow-hidden rounded-lg shadow-lg">
120
+ <img
121
+ src={`data:image/*;base64,${src}`}
122
+ alt="input content"
123
+ class="h-full w-full rounded-lg bg-gray-400 object-cover dark:bg-gray-900"
124
+ />
125
+ <!-- add a button on top that deletes this image from sources -->
126
+ <button
127
+ class="absolute left-1 top-1"
128
+ on:click={() => {
129
+ files = files.filter((_, i) => i !== index);
130
+ }}
131
+ >
132
+ <CarbonClose class="text-md font-black text-gray-300 hover:text-gray-100" />
133
+ </button>
134
+ </div>
135
+ {/await}
136
+ {/each}
137
+ </div>
138
+ {/if}
139
 
140
+ <div class="w-full">
141
+ <div class="flex w-full pb-3">
 
 
142
  {#if $page.data.settings?.searchEnabled}
143
  <WebSearchToggle />
144
  {/if}
 
184
  loginModalOpen = true;
185
  }
186
  }}
187
+ maxRows={6}
188
  disabled={isReadOnly || lastIsError}
189
  />
190
  {/if}
src/lib/components/chat/FileDropzone.svelte CHANGED
@@ -63,7 +63,7 @@
63
  id="dropzone"
64
  role="form"
65
  on:drop={dropHandle}
66
- class="relative flex w-full max-w-4xl flex-col items-center rounded-xl border bg-gray-100 focus-within:border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:focus-within:border-gray-500"
67
  >
68
  <div class="object-center">
69
  {#if file_error_message}
@@ -82,10 +82,10 @@
82
  </div>
83
  {/if}
84
  <div class="mt-3 flex justify-center" class:opacity-0={file_error_message}>
85
- <CarbonImage class="text-5xl text-gray-500 dark:text-gray-400" />
86
  </div>
87
  <p
88
- class="mb-3 mt-3 text-sm text-gray-500 dark:text-gray-400"
89
  class:opacity-0={file_error_message}
90
  >
91
  Drag and drop <span class="font-semibold">one image</span> here
 
63
  id="dropzone"
64
  role="form"
65
  on:drop={dropHandle}
66
+ class="relative flex w-full max-w-4xl flex-col items-center rounded-xl border border-dashed bg-gray-100 focus-within:border-gray-300 dark:border-gray-500 dark:bg-gray-700 dark:focus-within:border-gray-500"
67
  >
68
  <div class="object-center">
69
  {#if file_error_message}
 
82
  </div>
83
  {/if}
84
  <div class="mt-3 flex justify-center" class:opacity-0={file_error_message}>
85
+ <CarbonImage class="text-xl text-gray-500 dark:text-gray-400" />
86
  </div>
87
  <p
88
+ class="mb-3 mt-1.5 text-sm text-gray-500 dark:text-gray-400"
89
  class:opacity-0={file_error_message}
90
  >
91
  Drag and drop <span class="font-semibold">one image</span> here