@gradio/multimodaltextbox 0.4.11 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/Example.svelte +2 -2
  3. package/Index.svelte +2 -0
  4. package/package.json +9 -9
  5. package/shared/MultimodalTextbox.svelte +97 -114
package/CHANGELOG.md CHANGED
@@ -1,5 +1,35 @@
1
1
  # @gradio/multimodaltextbox
2
2
 
3
+ ## 0.5.1
4
+
5
+ ### Fixes
6
+
7
+ - [#8608](https://github.com/gradio-app/gradio/pull/8608) [`c12f82a`](https://github.com/gradio-app/gradio/commit/c12f82a36dc75ff30918dc2ce5f24e583b676f22) - Bugfix: Add a `file_count` parameter to `gr.MultimodalTextbox`. Multiple files cab be uploaded by setting `file_count="multiple"`. Default is `"single"` to preserve the previous behavior. Thanks @freddyaboulton!
8
+ - [#8637](https://github.com/gradio-app/gradio/pull/8637) [`c348392`](https://github.com/gradio-app/gradio/commit/c34839293f7ebad91d71caced84eea4a3790a558) - Multimodal textbox buttons alignment. Thanks @dawoodkhan82!
9
+
10
+ ### Dependency updates
11
+
12
+ - @gradio/upload@0.11.4
13
+ - @gradio/client@1.2.1
14
+ - @gradio/image@0.12.1
15
+
16
+ ## 0.5.0
17
+
18
+ ### Features
19
+
20
+ - [#8131](https://github.com/gradio-app/gradio/pull/8131) [`bb504b4`](https://github.com/gradio-app/gradio/commit/bb504b494947a287d6386e0e7ead3860c0f15223) - Gradio components in `gr.Chatbot()`. Thanks @dawoodkhan82!
21
+ - [#8590](https://github.com/gradio-app/gradio/pull/8590) [`65afffd`](https://github.com/gradio-app/gradio/commit/65afffd34b79ba9117e8d9506ea82477204cb57d) - Fix multimodal chat look. Thanks @aliabid94!
22
+
23
+ ### Dependency updates
24
+
25
+ - @gradio/atoms@0.7.5
26
+ - @gradio/image@0.12.0
27
+ - @gradio/utils@0.5.0
28
+ - @gradio/icons@0.5.0
29
+ - @gradio/client@1.2.0
30
+ - @gradio/statustracker@0.7.0
31
+ - @gradio/upload@0.11.3
32
+
3
33
  ## 0.4.11
4
34
 
5
35
  ### Dependency updates
package/Example.svelte CHANGED
@@ -60,10 +60,10 @@
60
60
  white-space: nowrap;
61
61
  }
62
62
 
63
- :global(img) {
63
+ /* :global(img) {
64
64
  width: 100px;
65
65
  height: 100px;
66
- }
66
+ } */
67
67
 
68
68
  div > :global(p) {
69
69
  font-size: var(--text-lg);
package/Index.svelte CHANGED
@@ -49,6 +49,7 @@
49
49
  export let autoscroll = true;
50
50
  export let interactive: boolean;
51
51
  export let root: string;
52
+ export let file_count: "single" | "multiple" | "directory";
52
53
  </script>
53
54
 
54
55
  <Block
@@ -86,6 +87,7 @@
86
87
  {autofocus}
87
88
  {container}
88
89
  {autoscroll}
90
+ {file_count}
89
91
  max_file_size={gradio.max_file_size}
90
92
  on:change={() => gradio.dispatch("change", value)}
91
93
  on:input={() => gradio.dispatch("input")}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/multimodaltextbox",
3
- "version": "0.4.11",
3
+ "version": "0.5.1",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -14,15 +14,15 @@
14
14
  "./package.json": "./package.json"
15
15
  },
16
16
  "dependencies": {
17
- "@gradio/atoms": "^0.7.4",
18
- "@gradio/icons": "^0.4.1",
19
- "@gradio/statustracker": "^0.6.0",
20
- "@gradio/utils": "^0.4.2",
21
- "@gradio/image": "^0.11.10",
22
- "@gradio/client": "^1.1.1",
23
- "@gradio/upload": "^0.11.2"
17
+ "@gradio/icons": "^0.5.0",
18
+ "@gradio/atoms": "^0.7.5",
19
+ "@gradio/statustracker": "^0.7.0",
20
+ "@gradio/upload": "^0.11.4",
21
+ "@gradio/utils": "^0.5.0",
22
+ "@gradio/image": "^0.12.1",
23
+ "@gradio/client": "^1.2.1"
24
24
  },
25
25
  "devDependencies": {
26
- "@gradio/preview": "^0.9.1"
26
+ "@gradio/preview": "^0.10.0"
27
27
  }
28
28
  }
package/shared/MultimodalTextbox.svelte CHANGED
@@ -27,7 +27,7 @@
27
27
  export let show_label = true;
28
28
  export let container = true;
29
29
  export let max_lines: number;
30
- export let submit_btn: string | null = null;
30
+ export let submit_btn: string | boolean | null = null;
31
31
  export let rtl = false;
32
32
  export let autofocus = false;
33
33
  export let text_align: "left" | "right" | undefined = undefined;
@@ -37,6 +37,7 @@
37
37
  export let max_file_size: number | null = null;
38
38
  export let upload: Client["upload"];
39
39
  export let stream_handler: Client["stream"];
40
+ export let file_count: "single" | "multiple" | "directory" = "multiple";
40
41
 
41
42
  let upload_component: Upload;
42
43
  let hidden_upload: HTMLInputElement;
@@ -161,6 +162,7 @@
161
162
  for (let file of detail) {
162
163
  value.files.push(file);
163
164
  }
165
+ value = value;
164
166
  } else {
165
167
  value.files.push(detail);
166
168
  value = value;
@@ -204,11 +206,47 @@
204
206
  <!-- svelte-ignore a11y-autofocus -->
205
207
  <label class:container>
206
208
  <BlockTitle {show_label} {info}>{label}</BlockTitle>
209
+ {#if value.files.length > 0 || uploading}
210
+ <div
211
+ class="thumbnails scroll-hide"
212
+ data-testid="container_el"
213
+ style="display: {value.files.length > 0 || uploading ? 'flex' : 'none'};"
214
+ >
215
+ {#each value.files as file, index}
216
+ <button class="thumbnail-item thumbnail-small">
217
+ <button
218
+ class:disabled
219
+ class="delete-button"
220
+ on:click={(event) => remove_thumbnail(event, index)}
221
+ ><Clear /></button
222
+ >
223
+ {#if file.mime_type && file.mime_type.includes("image")}
224
+ <Image
225
+ src={file.url}
226
+ title={null}
227
+ alt=""
228
+ loading="lazy"
229
+ class={"thumbnail-image"}
230
+ />
231
+ {:else if file.mime_type && file.mime_type.includes("audio")}
232
+ <Music />
233
+ {:else if file.mime_type && file.mime_type.includes("video")}
234
+ <Video />
235
+ {:else}
236
+ <File />
237
+ {/if}
238
+ </button>
239
+ {/each}
240
+ {#if uploading}
241
+ <div class="loader"></div>
242
+ {/if}
243
+ </div>
244
+ {/if}
207
245
  <div class="input-container">
208
246
  <Upload
209
247
  bind:this={upload_component}
210
248
  on:load={handle_upload}
211
- filetype={accept_file_types}
249
+ {file_count}
212
250
  {root}
213
251
  {max_file_size}
214
252
  bind:dragging
@@ -217,106 +255,66 @@
217
255
  disable_click={true}
218
256
  bind:hidden_upload
219
257
  on:error
258
+ hidden={true}
220
259
  {upload}
221
260
  {stream_handler}
261
+ ></Upload>
262
+ <button
263
+ data-testid="upload-button"
264
+ class="upload-button"
265
+ on:click={handle_upload_click}><Paperclip /></button
222
266
  >
223
- {#if submit_btn !== null}
224
- <button class:disabled class="submit-button" on:click={handle_submit}
225
- >{submit_btn}</button
226
- >
227
- {:else}
228
- <button class:disabled class="submit-button" on:click={handle_submit}
229
- ><Send /></button
230
- >
231
- {/if}
267
+ <textarea
268
+ data-testid="textbox"
269
+ use:text_area_resize={{
270
+ text: value.text,
271
+ lines: lines,
272
+ max_lines: max_lines
273
+ }}
274
+ class="scroll-hide"
275
+ dir={rtl ? "rtl" : "ltr"}
276
+ bind:value={value.text}
277
+ bind:this={el}
278
+ {placeholder}
279
+ rows={lines}
280
+ {disabled}
281
+ {autofocus}
282
+ on:keypress={handle_keypress}
283
+ on:blur
284
+ on:select={handle_select}
285
+ on:focus
286
+ on:scroll={handle_scroll}
287
+ on:paste={handle_paste}
288
+ style={text_align ? "text-align: " + text_align : ""}
289
+ />
290
+ {#if submit_btn}
232
291
  <button
233
- data-testid="upload-button"
234
- class="upload-button"
235
- on:click={handle_upload_click}><Paperclip /></button
292
+ class="submit-button"
293
+ class:padded-button={submit_btn !== true}
294
+ on:click={handle_submit}
236
295
  >
237
- {#if value.files.length > 0 || uploading}
238
- <div
239
- class="thumbnails scroll-hide"
240
- data-testid="container_el"
241
- style="display: {value.files.length > 0 || uploading
242
- ? 'flex'
243
- : 'none'};"
244
- >
245
- {#each value.files as file, index}
246
- <button class="thumbnail-item thumbnail-small">
247
- <button
248
- class:disabled
249
- class="delete-button"
250
- on:click={(event) => remove_thumbnail(event, index)}
251
- ><Clear /></button
252
- >
253
- {#if file.mime_type && file.mime_type.includes("image")}
254
- <Image
255
- src={file.url}
256
- title={null}
257
- alt=""
258
- loading="lazy"
259
- class={"thumbnail-image"}
260
- />
261
- {:else if file.mime_type && file.mime_type.includes("audio")}
262
- <Music />
263
- {:else if file.mime_type && file.mime_type.includes("video")}
264
- <Video />
265
- {:else}
266
- <File />
267
- {/if}
268
- </button>
269
- {/each}
270
- {#if uploading}
271
- <div class="loader"></div>
272
- {/if}
273
- </div>
274
- {/if}
275
- <textarea
276
- data-testid="textbox"
277
- use:text_area_resize={{
278
- text: value.text,
279
- lines: lines,
280
- max_lines: max_lines
281
- }}
282
- class="scroll-hide"
283
- dir={rtl ? "rtl" : "ltr"}
284
- bind:value={value.text}
285
- bind:this={el}
286
- {placeholder}
287
- rows={lines}
288
- {disabled}
289
- {autofocus}
290
- on:keypress={handle_keypress}
291
- on:blur
292
- on:select={handle_select}
293
- on:focus
294
- on:scroll={handle_scroll}
295
- on:paste={handle_paste}
296
- style={text_align ? "text-align: " + text_align : ""}
297
- />
298
- </Upload>
296
+ {#if submit_btn === true}
297
+ <Send />
298
+ {:else}
299
+ Hello World
300
+ {/if}
301
+ </button>
302
+ {/if}
299
303
  </div>
300
304
  </label>
301
305
 
302
306
  <style>
303
307
  .input-container {
304
308
  display: flex;
305
- flex-direction: column;
306
- justify-content: flex-end;
307
- align-items: center;
308
309
  position: relative;
310
+ align-items: flex-end;
309
311
  }
310
312
 
311
313
  textarea {
312
- align-self: flex-start;
314
+ flex-grow: 1;
313
315
  outline: none !important;
314
316
  background: var(--input-background-fill);
315
317
  padding: var(--input-padding);
316
- width: 90%;
317
- max-width: 95%;
318
- max-height: 100%;
319
- height: 25px;
320
318
  color: var(--body-text-color);
321
319
  font-weight: var(--input-text-weight);
322
320
  font-size: var(--input-text-size);
@@ -324,17 +322,12 @@
324
322
  border: none;
325
323
  margin-top: 0px;
326
324
  margin-bottom: 0px;
327
- margin-left: 5%;
328
- padding-top: 12px;
329
325
  resize: none;
330
326
  }
331
327
 
332
328
  textarea:disabled {
333
329
  -webkit-opacity: 1;
334
330
  opacity: 1;
335
- width: 90%;
336
- max-width: 95%;
337
- margin-left: 35px;
338
331
  }
339
332
 
340
333
  textarea::placeholder {
@@ -343,18 +336,24 @@
343
336
 
344
337
  .upload-button,
345
338
  .submit-button {
346
- position: absolute;
347
339
  background: var(--button-secondary-background-fill);
348
340
  color: var(--button-secondary-text-color);
349
341
  border: none;
350
342
  text-align: center;
351
343
  text-decoration: none;
352
- font-size: 20px;
344
+ font-size: 14px;
353
345
  cursor: pointer;
354
- border-radius: 50%;
355
- width: 30px;
346
+ border-radius: 15px;
347
+ min-width: 30px;
356
348
  height: 30px;
357
- bottom: 5px;
349
+ flex-shrink: 0;
350
+ display: flex;
351
+ justify-content: center;
352
+ align-items: center;
353
+ margin-bottom: 5px;
354
+ }
355
+ .padded-button {
356
+ padding: 0 10px;
358
357
  }
359
358
 
360
359
  .upload-button:hover,
@@ -367,29 +366,13 @@
367
366
  box-shadow: var(--button-shadow-active);
368
367
  }
369
368
 
370
- .submit-button {
371
- right: 0px;
372
- margin-left: 5px;
373
- padding-bottom: 5px;
374
- padding-left: 2px;
375
- }
376
-
377
369
  .submit-button :global(svg) {
378
- height: 23px;
379
- width: 23px;
380
- padding-left: 4px;
381
- padding-top: 2px;
370
+ height: 22px;
371
+ width: 22px;
382
372
  }
383
-
384
- .upload-button {
385
- left: 0px;
386
- margin-right: 5px;
387
- }
388
-
389
373
  .upload-button :global(svg) {
390
- height: 23px;
391
- width: 23px;
392
- padding-left: 7px;
374
+ height: 17px;
375
+ width: 17px;
393
376
  }
394
377
 
395
378
  .loader {