nsarrazin HF Staff commited on
Commit
468c9ce
·
1 Parent(s): f0e8e0f
src/lib/components/chat/ChatInput.svelte CHANGED
@@ -144,8 +144,8 @@
144
  </div>
145
  {#if !assistant}
146
  <div
147
- class="scrollbar-custom -ml-0.5 flex max-w-[calc(100%-40px)] flex-wrap items-center justify-start gap-2 sm:gap-2.5 px-3 pb-2.5 pt-0.5
148
- text-gray-500 dark:text-gray-400 max-md:flex-nowrap max-md:overflow-x-auto"
149
  >
150
  <HoverTooltip
151
  label="Search the web"
@@ -215,42 +215,39 @@
215
  </button>
216
  </HoverTooltip>
217
  {#if modelIsMultimodal || modelHasTools}
218
- {@const mimeTypesString = mimeTypes
219
- .map((m) => {
220
- // if the mime type ends in *, grab the first part so image/* becomes image
221
- if (m.endsWith("*")) {
222
- return m.split("/")[0];
223
- }
224
- // otherwise, return the second part for example application/pdf becomes pdf
225
- return m.split("/")[1];
226
- })
227
- .join(", ")}
228
- <form class="flex items-center">
229
- <HoverTooltip
230
- label={`Upload ${mimeTypesString} files`}
231
- position="top"
232
- TooltipClassNames="text-xs !text-left !w-auto whitespace-nowrap !py-1 !mb-0 max-sm:hidden"
233
- >
234
- <label
235
- class="base-tool relative"
236
- class:active-tool={documentParserIsOn}
237
- >
238
- <input
239
- disabled={loading}
240
- class="absolute size-0 hidden"
241
- aria-label="Upload file"
242
- type="file"
243
- on:change={onFileChange}
244
- accept={mimeTypes.join(",")}
245
- />
246
- <IconPaperclip classNames="text-xl" />
247
- {#if documentParserIsOn}
248
- Document Parser
249
- {/if}
250
- </label>
251
- </HoverTooltip>
252
- </form>
253
- {/if}
254
  {/if}
255
  {#if modelHasTools}
256
  {#each extraTools as tool}
@@ -295,7 +292,7 @@
295
  }
296
 
297
  .base-tool {
298
- @apply flex h-[1.6rem] items-center gap-[.2rem] whitespace-nowrap text-xs outline-none transition-all sm:hover:text-purple-600 focus:outline-none active:outline-none dark:hover:text-gray-300;
299
  }
300
 
301
  .active-tool {
 
144
  </div>
145
  {#if !assistant}
146
  <div
147
+ class="scrollbar-custom -ml-0.5 flex max-w-[calc(100%-40px)] flex-wrap items-center justify-start gap-2 px-3 pb-2.5 pt-0.5 text-gray-500
148
+ dark:text-gray-400 max-md:flex-nowrap max-md:overflow-x-auto sm:gap-2.5"
149
  >
150
  <HoverTooltip
151
  label="Search the web"
 
215
  </button>
216
  </HoverTooltip>
217
  {#if modelIsMultimodal || modelHasTools}
218
+ {@const mimeTypesString = mimeTypes
219
+ .map((m) => {
220
+ // if the mime type ends in *, grab the first part so image/* becomes image
221
+ if (m.endsWith("*")) {
222
+ return m.split("/")[0];
223
+ }
224
+ // otherwise, return the second part for example application/pdf becomes pdf
225
+ return m.split("/")[1];
226
+ })
227
+ .join(", ")}
228
+ <form class="flex items-center">
229
+ <HoverTooltip
230
+ label={`Upload ${mimeTypesString} files`}
231
+ position="top"
232
+ TooltipClassNames="text-xs !text-left !w-auto whitespace-nowrap !py-1 !mb-0 max-sm:hidden"
233
+ >
234
+ <label class="base-tool relative" class:active-tool={documentParserIsOn}>
235
+ <input
236
+ disabled={loading}
237
+ class="absolute hidden size-0"
238
+ aria-label="Upload file"
239
+ type="file"
240
+ on:change={onFileChange}
241
+ accept={mimeTypes.join(",")}
242
+ />
243
+ <IconPaperclip classNames="text-xl" />
244
+ {#if documentParserIsOn}
245
+ Document Parser
246
+ {/if}
247
+ </label>
248
+ </HoverTooltip>
249
+ </form>
250
+ {/if}
 
 
 
251
  {/if}
252
  {#if modelHasTools}
253
  {#each extraTools as tool}
 
292
  }
293
 
294
  .base-tool {
295
+ @apply flex h-[1.6rem] items-center gap-[.2rem] whitespace-nowrap text-xs outline-none transition-all focus:outline-none active:outline-none dark:hover:text-gray-300 sm:hover:text-purple-600;
296
  }
297
 
298
  .active-tool {
src/lib/components/chat/ChatWindow.svelte CHANGED
@@ -454,12 +454,11 @@
454
 
455
  {#if loading}
456
  <button
457
- disabled
458
- class="btn absolute bottom-1 right-0.5 size-10 self-end rounded-lg bg-transparent text-gray-400 "
459
  >
460
- <EosIconsLoading />
461
  </button>
462
-
463
  {:else}
464
  <button
465
  class="btn absolute bottom-1 right-0.5 size-10 self-end rounded-lg bg-transparent text-gray-400 enabled:hover:text-gray-700 disabled:opacity-60 enabled:dark:hover:text-gray-100 dark:disabled:opacity-40"
 
454
 
455
  {#if loading}
456
  <button
457
+ disabled
458
+ class="btn absolute bottom-1 right-0.5 size-10 self-end rounded-lg bg-transparent text-gray-400"
459
  >
460
+ <EosIconsLoading />
461
  </button>
 
462
  {:else}
463
  <button
464
  class="btn absolute bottom-1 right-0.5 size-10 self-end rounded-lg bg-transparent text-gray-400 enabled:hover:text-gray-700 disabled:opacity-60 enabled:dark:hover:text-gray-100 dark:disabled:opacity-40"