nsarrazin HF Staff commited on
Commit
83ddae9
·
unverified ·
1 Parent(s): 9fc7651

fix: show file picker for assistant with mime types (#1763)

Browse files

* fix: show file picker for assistant with mime types

closes #1652

* fix: lint

src/lib/components/chat/ChatInput.svelte CHANGED
@@ -150,6 +150,13 @@
150
  ![documentParserToolId, imageGenToolId, webSearchToolId, fetchUrlToolId].includes(t._id)
151
  ) satisfies ToolFront[]
152
  );
 
 
 
 
 
 
 
153
  </script>
154
 
155
  <div class="flex min-h-full flex-1 flex-col" onpaste={onPaste}>
@@ -175,47 +182,51 @@
175
  {disabled}
176
  ></textarea>
177
 
178
- {#if !assistant}
179
  <div
180
- class="scrollbar-custom -ml-0.5 flex max-w-[calc(100%-40px)] flex-wrap items-center justify-start gap-2.5 px-3 pb-2.5 pt-1.5 text-gray-500 dark:text-gray-400 max-md:flex-nowrap max-md:overflow-x-auto sm:gap-2"
 
 
181
  >
182
- <HoverTooltip
183
- label="Search the web"
184
- position="top"
185
- TooltipClassNames="text-xs !text-left !w-auto whitespace-nowrap !py-1 !mb-0 max-sm:hidden {webSearchIsOn
186
- ? 'hidden'
187
- : ''}"
188
- >
189
- <button
190
- class="base-tool"
191
- class:active-tool={webSearchIsOn}
192
- disabled={loading}
193
- onclick={async (e) => {
194
- e.preventDefault();
195
- if (modelHasTools) {
196
- if (webSearchIsOn) {
197
- await settings.instantSet({
198
- tools: ($settings.tools ?? []).filter(
199
- (t) => t !== webSearchToolId && t !== fetchUrlToolId
200
- ),
201
- });
 
 
 
 
 
 
202
  } else {
203
- await settings.instantSet({
204
- tools: [...($settings.tools ?? []), webSearchToolId, fetchUrlToolId],
205
- });
206
  }
207
- } else {
208
- $webSearchParameters.useSearch = !webSearchIsOn;
209
- }
210
- }}
211
- >
212
- <IconInternet classNames="text-xl" />
213
- {#if webSearchIsOn}
214
- Search
215
- {/if}
216
- </button>
217
- </HoverTooltip>
218
- {#if modelHasTools}
219
  <HoverTooltip
220
  label="Generate images"
221
  position="top"
@@ -249,7 +260,7 @@
249
  </button>
250
  </HoverTooltip>
251
  {/if}
252
- {#if modelIsMultimodal || modelHasTools}
253
  {@const mimeTypesString = mimeTypes
254
  .map((m) => {
255
  // if the mime type ends in *, grab the first part so image/* becomes image
@@ -311,7 +322,7 @@
311
  </HoverTooltip>
312
  {/if}
313
  {/if}
314
- {#if modelHasTools}
315
  {#each extraTools as tool}
316
  <button
317
  class="active-tool base-tool"
@@ -327,8 +338,6 @@
327
  {tool.displayName}
328
  </button>
329
  {/each}
330
- {/if}
331
- {#if modelHasTools}
332
  <HoverTooltip
333
  label="Browse more tools"
334
  position="right"
 
150
  ![documentParserToolId, imageGenToolId, webSearchToolId, fetchUrlToolId].includes(t._id)
151
  ) satisfies ToolFront[]
152
  );
153
+
154
+ let showWebSearch = $derived(!assistant);
155
+ let showImageGen = $derived(modelHasTools && !assistant);
156
+ let showFileUpload = $derived((modelIsMultimodal || modelHasTools) && mimeTypes.length > 0);
157
+ let showExtraTools = $derived(modelHasTools && !assistant);
158
+
159
+ let showNoTools = $derived(!showWebSearch && !showImageGen && !showFileUpload && !showExtraTools);
160
  </script>
161
 
162
  <div class="flex min-h-full flex-1 flex-col" onpaste={onPaste}>
 
182
  {disabled}
183
  ></textarea>
184
 
185
+ {#if !showNoTools}
186
  <div
187
+ class={[
188
+ "scrollbar-custom -ml-0.5 flex max-w-[calc(100%-40px)] flex-wrap items-center justify-start gap-2.5 px-3 pb-2.5 pt-1.5 text-gray-500 dark:text-gray-400 max-md:flex-nowrap max-md:overflow-x-auto sm:gap-2",
189
+ ]}
190
  >
191
+ {#if showWebSearch}
192
+ <HoverTooltip
193
+ label="Search the web"
194
+ position="top"
195
+ TooltipClassNames="text-xs !text-left !w-auto whitespace-nowrap !py-1 !mb-0 max-sm:hidden {webSearchIsOn
196
+ ? 'hidden'
197
+ : ''}"
198
+ >
199
+ <button
200
+ class="base-tool"
201
+ class:active-tool={webSearchIsOn}
202
+ disabled={loading}
203
+ onclick={async (e) => {
204
+ e.preventDefault();
205
+ if (modelHasTools) {
206
+ if (webSearchIsOn) {
207
+ await settings.instantSet({
208
+ tools: ($settings.tools ?? []).filter(
209
+ (t) => t !== webSearchToolId && t !== fetchUrlToolId
210
+ ),
211
+ });
212
+ } else {
213
+ await settings.instantSet({
214
+ tools: [...($settings.tools ?? []), webSearchToolId, fetchUrlToolId],
215
+ });
216
+ }
217
  } else {
218
+ $webSearchParameters.useSearch = !webSearchIsOn;
 
 
219
  }
220
+ }}
221
+ >
222
+ <IconInternet classNames="text-xl" />
223
+ {#if webSearchIsOn}
224
+ Search
225
+ {/if}
226
+ </button>
227
+ </HoverTooltip>
228
+ {/if}
229
+ {#if showImageGen}
 
 
230
  <HoverTooltip
231
  label="Generate images"
232
  position="top"
 
260
  </button>
261
  </HoverTooltip>
262
  {/if}
263
+ {#if showFileUpload}
264
  {@const mimeTypesString = mimeTypes
265
  .map((m) => {
266
  // if the mime type ends in *, grab the first part so image/* becomes image
 
322
  </HoverTooltip>
323
  {/if}
324
  {/if}
325
+ {#if showExtraTools}
326
  {#each extraTools as tool}
327
  <button
328
  class="active-tool base-tool"
 
338
  {tool.displayName}
339
  </button>
340
  {/each}
 
 
341
  <HoverTooltip
342
  label="Browse more tools"
343
  position="right"