@gradio/multimodaltextbox 0.4.10 → 0.5.0
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.
- package/CHANGELOG.md +25 -0
- package/Example.svelte +2 -2
- package/package.json +9 -9
- package/shared/MultimodalTextbox.svelte +93 -113
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
# @gradio/multimodaltextbox
|
|
2
2
|
|
|
3
|
+
## 0.5.0
|
|
4
|
+
|
|
5
|
+
### Features
|
|
6
|
+
|
|
7
|
+
- [#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!
|
|
8
|
+
- [#8590](https://github.com/gradio-app/gradio/pull/8590) [`65afffd`](https://github.com/gradio-app/gradio/commit/65afffd34b79ba9117e8d9506ea82477204cb57d) - Fix multimodal chat look. Thanks @aliabid94!
|
|
9
|
+
|
|
10
|
+
### Dependency updates
|
|
11
|
+
|
|
12
|
+
- @gradio/atoms@0.7.5
|
|
13
|
+
- @gradio/image@0.12.0
|
|
14
|
+
- @gradio/utils@0.5.0
|
|
15
|
+
- @gradio/icons@0.5.0
|
|
16
|
+
- @gradio/client@1.2.0
|
|
17
|
+
- @gradio/statustracker@0.7.0
|
|
18
|
+
- @gradio/upload@0.11.3
|
|
19
|
+
|
|
20
|
+
## 0.4.11
|
|
21
|
+
|
|
22
|
+
### Dependency updates
|
|
23
|
+
|
|
24
|
+
- @gradio/client@1.1.1
|
|
25
|
+
- @gradio/upload@0.11.2
|
|
26
|
+
- @gradio/image@0.11.10
|
|
27
|
+
|
|
3
28
|
## 0.4.10
|
|
4
29
|
|
|
5
30
|
### Dependency updates
|
package/Example.svelte
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/multimodaltextbox",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
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.
|
|
18
|
-
"@gradio/icons": "^0.
|
|
19
|
-
"@gradio/
|
|
20
|
-
"@gradio/statustracker": "^0.
|
|
21
|
-
"@gradio/
|
|
22
|
-
"@gradio/
|
|
23
|
-
"@gradio/
|
|
17
|
+
"@gradio/atoms": "^0.7.5",
|
|
18
|
+
"@gradio/icons": "^0.5.0",
|
|
19
|
+
"@gradio/upload": "^0.11.3",
|
|
20
|
+
"@gradio/statustracker": "^0.7.0",
|
|
21
|
+
"@gradio/client": "^1.2.0",
|
|
22
|
+
"@gradio/utils": "^0.5.0",
|
|
23
|
+
"@gradio/image": "^0.12.0"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@gradio/preview": "^0.
|
|
26
|
+
"@gradio/preview": "^0.10.0"
|
|
27
27
|
}
|
|
28
28
|
}
|
|
@@ -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;
|
|
@@ -204,6 +204,42 @@
|
|
|
204
204
|
<!-- svelte-ignore a11y-autofocus -->
|
|
205
205
|
<label class:container>
|
|
206
206
|
<BlockTitle {show_label} {info}>{label}</BlockTitle>
|
|
207
|
+
{#if value.files.length > 0 || uploading}
|
|
208
|
+
<div
|
|
209
|
+
class="thumbnails scroll-hide"
|
|
210
|
+
data-testid="container_el"
|
|
211
|
+
style="display: {value.files.length > 0 || uploading ? 'flex' : 'none'};"
|
|
212
|
+
>
|
|
213
|
+
{#each value.files as file, index}
|
|
214
|
+
<button class="thumbnail-item thumbnail-small">
|
|
215
|
+
<button
|
|
216
|
+
class:disabled
|
|
217
|
+
class="delete-button"
|
|
218
|
+
on:click={(event) => remove_thumbnail(event, index)}
|
|
219
|
+
><Clear /></button
|
|
220
|
+
>
|
|
221
|
+
{#if file.mime_type && file.mime_type.includes("image")}
|
|
222
|
+
<Image
|
|
223
|
+
src={file.url}
|
|
224
|
+
title={null}
|
|
225
|
+
alt=""
|
|
226
|
+
loading="lazy"
|
|
227
|
+
class={"thumbnail-image"}
|
|
228
|
+
/>
|
|
229
|
+
{:else if file.mime_type && file.mime_type.includes("audio")}
|
|
230
|
+
<Music />
|
|
231
|
+
{:else if file.mime_type && file.mime_type.includes("video")}
|
|
232
|
+
<Video />
|
|
233
|
+
{:else}
|
|
234
|
+
<File />
|
|
235
|
+
{/if}
|
|
236
|
+
</button>
|
|
237
|
+
{/each}
|
|
238
|
+
{#if uploading}
|
|
239
|
+
<div class="loader"></div>
|
|
240
|
+
{/if}
|
|
241
|
+
</div>
|
|
242
|
+
{/if}
|
|
207
243
|
<div class="input-container">
|
|
208
244
|
<Upload
|
|
209
245
|
bind:this={upload_component}
|
|
@@ -217,106 +253,66 @@
|
|
|
217
253
|
disable_click={true}
|
|
218
254
|
bind:hidden_upload
|
|
219
255
|
on:error
|
|
256
|
+
hidden={true}
|
|
220
257
|
{upload}
|
|
221
258
|
{stream_handler}
|
|
259
|
+
></Upload>
|
|
260
|
+
<button
|
|
261
|
+
data-testid="upload-button"
|
|
262
|
+
class="upload-button"
|
|
263
|
+
on:click={handle_upload_click}><Paperclip /></button
|
|
222
264
|
>
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
{
|
|
265
|
+
<textarea
|
|
266
|
+
data-testid="textbox"
|
|
267
|
+
use:text_area_resize={{
|
|
268
|
+
text: value.text,
|
|
269
|
+
lines: lines,
|
|
270
|
+
max_lines: max_lines
|
|
271
|
+
}}
|
|
272
|
+
class="scroll-hide"
|
|
273
|
+
dir={rtl ? "rtl" : "ltr"}
|
|
274
|
+
bind:value={value.text}
|
|
275
|
+
bind:this={el}
|
|
276
|
+
{placeholder}
|
|
277
|
+
rows={lines}
|
|
278
|
+
{disabled}
|
|
279
|
+
{autofocus}
|
|
280
|
+
on:keypress={handle_keypress}
|
|
281
|
+
on:blur
|
|
282
|
+
on:select={handle_select}
|
|
283
|
+
on:focus
|
|
284
|
+
on:scroll={handle_scroll}
|
|
285
|
+
on:paste={handle_paste}
|
|
286
|
+
style={text_align ? "text-align: " + text_align : ""}
|
|
287
|
+
/>
|
|
288
|
+
{#if submit_btn}
|
|
232
289
|
<button
|
|
233
|
-
|
|
234
|
-
class
|
|
235
|
-
on:click={
|
|
290
|
+
class="submit-button"
|
|
291
|
+
class:padded-button={submit_btn !== true}
|
|
292
|
+
on:click={handle_submit}
|
|
236
293
|
>
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
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>
|
|
294
|
+
{#if submit_btn === true}
|
|
295
|
+
<Send />
|
|
296
|
+
{:else}
|
|
297
|
+
Hello World
|
|
298
|
+
{/if}
|
|
299
|
+
</button>
|
|
300
|
+
{/if}
|
|
299
301
|
</div>
|
|
300
302
|
</label>
|
|
301
303
|
|
|
302
304
|
<style>
|
|
303
305
|
.input-container {
|
|
304
306
|
display: flex;
|
|
305
|
-
flex-direction: column;
|
|
306
|
-
justify-content: flex-end;
|
|
307
|
-
align-items: center;
|
|
308
307
|
position: relative;
|
|
308
|
+
align-items: center;
|
|
309
309
|
}
|
|
310
310
|
|
|
311
311
|
textarea {
|
|
312
|
-
|
|
312
|
+
flex-grow: 1;
|
|
313
313
|
outline: none !important;
|
|
314
314
|
background: var(--input-background-fill);
|
|
315
315
|
padding: var(--input-padding);
|
|
316
|
-
width: 90%;
|
|
317
|
-
max-width: 95%;
|
|
318
|
-
max-height: 100%;
|
|
319
|
-
height: 25px;
|
|
320
316
|
color: var(--body-text-color);
|
|
321
317
|
font-weight: var(--input-text-weight);
|
|
322
318
|
font-size: var(--input-text-size);
|
|
@@ -324,17 +320,12 @@
|
|
|
324
320
|
border: none;
|
|
325
321
|
margin-top: 0px;
|
|
326
322
|
margin-bottom: 0px;
|
|
327
|
-
margin-left: 5%;
|
|
328
|
-
padding-top: 12px;
|
|
329
323
|
resize: none;
|
|
330
324
|
}
|
|
331
325
|
|
|
332
326
|
textarea:disabled {
|
|
333
327
|
-webkit-opacity: 1;
|
|
334
328
|
opacity: 1;
|
|
335
|
-
width: 90%;
|
|
336
|
-
max-width: 95%;
|
|
337
|
-
margin-left: 35px;
|
|
338
329
|
}
|
|
339
330
|
|
|
340
331
|
textarea::placeholder {
|
|
@@ -343,18 +334,23 @@
|
|
|
343
334
|
|
|
344
335
|
.upload-button,
|
|
345
336
|
.submit-button {
|
|
346
|
-
position: absolute;
|
|
347
337
|
background: var(--button-secondary-background-fill);
|
|
348
338
|
color: var(--button-secondary-text-color);
|
|
349
339
|
border: none;
|
|
350
340
|
text-align: center;
|
|
351
341
|
text-decoration: none;
|
|
352
|
-
font-size:
|
|
342
|
+
font-size: 14px;
|
|
353
343
|
cursor: pointer;
|
|
354
|
-
border-radius:
|
|
355
|
-
width: 30px;
|
|
344
|
+
border-radius: 15px;
|
|
345
|
+
min-width: 30px;
|
|
356
346
|
height: 30px;
|
|
357
|
-
|
|
347
|
+
flex-shrink: 0;
|
|
348
|
+
display: flex;
|
|
349
|
+
justify-content: center;
|
|
350
|
+
align-items: center;
|
|
351
|
+
}
|
|
352
|
+
.padded-button {
|
|
353
|
+
padding: 0 10px;
|
|
358
354
|
}
|
|
359
355
|
|
|
360
356
|
.upload-button:hover,
|
|
@@ -367,29 +363,13 @@
|
|
|
367
363
|
box-shadow: var(--button-shadow-active);
|
|
368
364
|
}
|
|
369
365
|
|
|
370
|
-
.submit-button {
|
|
371
|
-
right: 0px;
|
|
372
|
-
margin-left: 5px;
|
|
373
|
-
padding-bottom: 5px;
|
|
374
|
-
padding-left: 2px;
|
|
375
|
-
}
|
|
376
|
-
|
|
377
366
|
.submit-button :global(svg) {
|
|
378
|
-
height:
|
|
379
|
-
width:
|
|
380
|
-
padding-left: 4px;
|
|
381
|
-
padding-top: 2px;
|
|
367
|
+
height: 22px;
|
|
368
|
+
width: 22px;
|
|
382
369
|
}
|
|
383
|
-
|
|
384
|
-
.upload-button {
|
|
385
|
-
left: 0px;
|
|
386
|
-
margin-right: 5px;
|
|
387
|
-
}
|
|
388
|
-
|
|
389
370
|
.upload-button :global(svg) {
|
|
390
|
-
height:
|
|
391
|
-
width:
|
|
392
|
-
padding-left: 7px;
|
|
371
|
+
height: 17px;
|
|
372
|
+
width: 17px;
|
|
393
373
|
}
|
|
394
374
|
|
|
395
375
|
.loader {
|