@gradio/multimodaltextbox 0.5.5 → 0.5.7
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 +35 -0
- package/Index.svelte +13 -1
- package/MultimodalTextbox.test.ts +1 -2
- package/dist/Example.svelte +96 -0
- package/dist/Example.svelte.d.ts +22 -0
- package/dist/Index.svelte +101 -0
- package/dist/Index.svelte.d.ts +164 -0
- package/dist/shared/MultimodalTextbox.svelte +500 -0
- package/dist/shared/MultimodalTextbox.svelte.d.ts +58 -0
- package/dist/shared/utils.d.ts +8 -0
- package/dist/shared/utils.js +36 -0
- package/package.json +28 -12
- package/shared/MultimodalTextbox.svelte +161 -97
|
@@ -0,0 +1,500 @@
|
|
|
1
|
+
<script>import {
|
|
2
|
+
beforeUpdate,
|
|
3
|
+
afterUpdate,
|
|
4
|
+
createEventDispatcher,
|
|
5
|
+
tick
|
|
6
|
+
} from "svelte";
|
|
7
|
+
import { text_area_resize, resize } from "../shared/utils";
|
|
8
|
+
import { BlockTitle } from "@gradio/atoms";
|
|
9
|
+
import { Upload } from "@gradio/upload";
|
|
10
|
+
import { Image } from "@gradio/image/shared";
|
|
11
|
+
import { Clear, File, Music, Paperclip, Video, Send } from "@gradio/icons";
|
|
12
|
+
export let value = {
|
|
13
|
+
text: "",
|
|
14
|
+
files: []
|
|
15
|
+
};
|
|
16
|
+
export let value_is_output = false;
|
|
17
|
+
export let lines = 1;
|
|
18
|
+
export let placeholder = "Type here...";
|
|
19
|
+
export let disabled = false;
|
|
20
|
+
export let label;
|
|
21
|
+
export let info = void 0;
|
|
22
|
+
export let show_label = true;
|
|
23
|
+
export let container = true;
|
|
24
|
+
export let max_lines;
|
|
25
|
+
export let submit_btn = null;
|
|
26
|
+
export let rtl = false;
|
|
27
|
+
export let autofocus = false;
|
|
28
|
+
export let text_align = void 0;
|
|
29
|
+
export let autoscroll = true;
|
|
30
|
+
export let root;
|
|
31
|
+
export let file_types = null;
|
|
32
|
+
export let max_file_size = null;
|
|
33
|
+
export let upload;
|
|
34
|
+
export let stream_handler;
|
|
35
|
+
export let file_count = "multiple";
|
|
36
|
+
let upload_component;
|
|
37
|
+
let hidden_upload;
|
|
38
|
+
let el;
|
|
39
|
+
let can_scroll;
|
|
40
|
+
let previous_scroll_top = 0;
|
|
41
|
+
let user_has_scrolled_up = false;
|
|
42
|
+
export let dragging = false;
|
|
43
|
+
let uploading = false;
|
|
44
|
+
let oldValue = value.text;
|
|
45
|
+
$:
|
|
46
|
+
dispatch("drag", dragging);
|
|
47
|
+
let full_container;
|
|
48
|
+
$:
|
|
49
|
+
if (oldValue !== value.text) {
|
|
50
|
+
dispatch("change", value);
|
|
51
|
+
oldValue = value.text;
|
|
52
|
+
}
|
|
53
|
+
let accept_file_types;
|
|
54
|
+
if (file_types == null) {
|
|
55
|
+
accept_file_types = null;
|
|
56
|
+
} else {
|
|
57
|
+
file_types = file_types.map((x) => {
|
|
58
|
+
if (x.startsWith(".")) {
|
|
59
|
+
return x;
|
|
60
|
+
}
|
|
61
|
+
return x + "/*";
|
|
62
|
+
});
|
|
63
|
+
accept_file_types = file_types.join(", ");
|
|
64
|
+
}
|
|
65
|
+
$:
|
|
66
|
+
if (value === null)
|
|
67
|
+
value = { text: "", files: [] };
|
|
68
|
+
$:
|
|
69
|
+
value, el && lines !== max_lines && resize(el, lines, max_lines);
|
|
70
|
+
const dispatch = createEventDispatcher();
|
|
71
|
+
beforeUpdate(() => {
|
|
72
|
+
can_scroll = el && el.offsetHeight + el.scrollTop > el.scrollHeight - 100;
|
|
73
|
+
});
|
|
74
|
+
const scroll = () => {
|
|
75
|
+
if (can_scroll && autoscroll && !user_has_scrolled_up) {
|
|
76
|
+
el.scrollTo(0, el.scrollHeight);
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
async function handle_change() {
|
|
80
|
+
dispatch("change", value);
|
|
81
|
+
if (!value_is_output) {
|
|
82
|
+
dispatch("input");
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
afterUpdate(() => {
|
|
86
|
+
if (autofocus && el !== null) {
|
|
87
|
+
el.focus();
|
|
88
|
+
}
|
|
89
|
+
if (can_scroll && autoscroll) {
|
|
90
|
+
scroll();
|
|
91
|
+
}
|
|
92
|
+
value_is_output = false;
|
|
93
|
+
});
|
|
94
|
+
function handle_select(event) {
|
|
95
|
+
const target = event.target;
|
|
96
|
+
const text = target.value;
|
|
97
|
+
const index = [
|
|
98
|
+
target.selectionStart,
|
|
99
|
+
target.selectionEnd
|
|
100
|
+
];
|
|
101
|
+
dispatch("select", { value: text.substring(...index), index });
|
|
102
|
+
}
|
|
103
|
+
async function handle_keypress(e) {
|
|
104
|
+
await tick();
|
|
105
|
+
if (e.key === "Enter" && e.shiftKey && lines > 1) {
|
|
106
|
+
e.preventDefault();
|
|
107
|
+
dispatch("submit");
|
|
108
|
+
} else if (e.key === "Enter" && !e.shiftKey && lines === 1 && max_lines >= 1) {
|
|
109
|
+
e.preventDefault();
|
|
110
|
+
dispatch("submit");
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
function handle_scroll(event) {
|
|
114
|
+
const target = event.target;
|
|
115
|
+
const current_scroll_top = target.scrollTop;
|
|
116
|
+
if (current_scroll_top < previous_scroll_top) {
|
|
117
|
+
user_has_scrolled_up = true;
|
|
118
|
+
}
|
|
119
|
+
previous_scroll_top = current_scroll_top;
|
|
120
|
+
const max_scroll_top = target.scrollHeight - target.clientHeight;
|
|
121
|
+
const user_has_scrolled_to_bottom = current_scroll_top >= max_scroll_top;
|
|
122
|
+
if (user_has_scrolled_to_bottom) {
|
|
123
|
+
user_has_scrolled_up = false;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
async function handle_upload({
|
|
127
|
+
detail
|
|
128
|
+
}) {
|
|
129
|
+
handle_change();
|
|
130
|
+
if (Array.isArray(detail)) {
|
|
131
|
+
for (let file of detail) {
|
|
132
|
+
value.files.push(file);
|
|
133
|
+
}
|
|
134
|
+
value = value;
|
|
135
|
+
} else {
|
|
136
|
+
value.files.push(detail);
|
|
137
|
+
value = value;
|
|
138
|
+
}
|
|
139
|
+
await tick();
|
|
140
|
+
dispatch("change", value);
|
|
141
|
+
dispatch("upload", detail);
|
|
142
|
+
}
|
|
143
|
+
function remove_thumbnail(event, index) {
|
|
144
|
+
handle_change();
|
|
145
|
+
event.stopPropagation();
|
|
146
|
+
value.files.splice(index, 1);
|
|
147
|
+
value = value;
|
|
148
|
+
}
|
|
149
|
+
function handle_upload_click() {
|
|
150
|
+
if (hidden_upload) {
|
|
151
|
+
hidden_upload.value = "";
|
|
152
|
+
hidden_upload.click();
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
async function handle_submit() {
|
|
156
|
+
dispatch("submit");
|
|
157
|
+
}
|
|
158
|
+
function handle_paste(event) {
|
|
159
|
+
if (!event.clipboardData)
|
|
160
|
+
return;
|
|
161
|
+
const items = event.clipboardData.items;
|
|
162
|
+
for (let index in items) {
|
|
163
|
+
const item = items[index];
|
|
164
|
+
if (item.kind === "file" && item.type.includes("image")) {
|
|
165
|
+
const blob = item.getAsFile();
|
|
166
|
+
if (blob)
|
|
167
|
+
upload_component.load_files([blob]);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
function handle_dragenter(event) {
|
|
172
|
+
event.preventDefault();
|
|
173
|
+
dragging = true;
|
|
174
|
+
}
|
|
175
|
+
function handle_dragleave(event) {
|
|
176
|
+
event.preventDefault();
|
|
177
|
+
const rect = full_container.getBoundingClientRect();
|
|
178
|
+
const { clientX, clientY } = event;
|
|
179
|
+
if (clientX <= rect.left || clientX >= rect.right || clientY <= rect.top || clientY >= rect.bottom) {
|
|
180
|
+
dragging = false;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
function handle_drop(event) {
|
|
184
|
+
event.preventDefault();
|
|
185
|
+
dragging = false;
|
|
186
|
+
if (event.dataTransfer && event.dataTransfer.files) {
|
|
187
|
+
upload_component.load_files(Array.from(event.dataTransfer.files));
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
</script>
|
|
191
|
+
|
|
192
|
+
<div
|
|
193
|
+
class="full-container"
|
|
194
|
+
class:dragging
|
|
195
|
+
bind:this={full_container}
|
|
196
|
+
on:dragenter={handle_dragenter}
|
|
197
|
+
on:dragleave={handle_dragleave}
|
|
198
|
+
on:dragover|preventDefault
|
|
199
|
+
on:drop={handle_drop}
|
|
200
|
+
role="group"
|
|
201
|
+
aria-label="Multimedia input field"
|
|
202
|
+
>
|
|
203
|
+
<!-- svelte-ignore a11y-autofocus -->
|
|
204
|
+
<label class:container>
|
|
205
|
+
<BlockTitle {show_label} {info}>{label}</BlockTitle>
|
|
206
|
+
{#if value.files.length > 0 || uploading}
|
|
207
|
+
<div
|
|
208
|
+
class="thumbnails scroll-hide"
|
|
209
|
+
aria-label="Uploaded files"
|
|
210
|
+
data-testid="container_el"
|
|
211
|
+
style="display: {value.files.length > 0 || uploading
|
|
212
|
+
? 'flex'
|
|
213
|
+
: 'none'};"
|
|
214
|
+
>
|
|
215
|
+
{#each value.files as file, index}
|
|
216
|
+
<span role="listitem" aria-label="File thumbnail">
|
|
217
|
+
<button class="thumbnail-item thumbnail-small">
|
|
218
|
+
<button
|
|
219
|
+
class:disabled
|
|
220
|
+
class="delete-button"
|
|
221
|
+
on:click={(event) => remove_thumbnail(event, index)}
|
|
222
|
+
><Clear /></button
|
|
223
|
+
>
|
|
224
|
+
{#if file.mime_type && file.mime_type.includes("image")}
|
|
225
|
+
<Image
|
|
226
|
+
src={file.url}
|
|
227
|
+
title={null}
|
|
228
|
+
alt=""
|
|
229
|
+
loading="lazy"
|
|
230
|
+
class={"thumbnail-image"}
|
|
231
|
+
/>
|
|
232
|
+
{:else if file.mime_type && file.mime_type.includes("audio")}
|
|
233
|
+
<Music />
|
|
234
|
+
{:else if file.mime_type && file.mime_type.includes("video")}
|
|
235
|
+
<Video />
|
|
236
|
+
{:else}
|
|
237
|
+
<File />
|
|
238
|
+
{/if}
|
|
239
|
+
</button>
|
|
240
|
+
</span>
|
|
241
|
+
{/each}
|
|
242
|
+
{#if uploading}
|
|
243
|
+
<div class="loader" role="status" aria-label="Uploading"></div>
|
|
244
|
+
{/if}
|
|
245
|
+
</div>
|
|
246
|
+
{/if}
|
|
247
|
+
<div class="input-container">
|
|
248
|
+
<Upload
|
|
249
|
+
bind:this={upload_component}
|
|
250
|
+
on:load={handle_upload}
|
|
251
|
+
{file_count}
|
|
252
|
+
{root}
|
|
253
|
+
{max_file_size}
|
|
254
|
+
bind:dragging
|
|
255
|
+
bind:uploading
|
|
256
|
+
show_progress={false}
|
|
257
|
+
disable_click={true}
|
|
258
|
+
bind:hidden_upload
|
|
259
|
+
on:error
|
|
260
|
+
hidden={true}
|
|
261
|
+
{upload}
|
|
262
|
+
{stream_handler}
|
|
263
|
+
></Upload>
|
|
264
|
+
<button
|
|
265
|
+
data-testid="upload-button"
|
|
266
|
+
class="upload-button"
|
|
267
|
+
on:click={handle_upload_click}><Paperclip /></button
|
|
268
|
+
>
|
|
269
|
+
<textarea
|
|
270
|
+
data-testid="textbox"
|
|
271
|
+
use:text_area_resize={{
|
|
272
|
+
text: value.text,
|
|
273
|
+
lines: lines,
|
|
274
|
+
max_lines: max_lines
|
|
275
|
+
}}
|
|
276
|
+
class="scroll-hide"
|
|
277
|
+
dir={rtl ? "rtl" : "ltr"}
|
|
278
|
+
bind:value={value.text}
|
|
279
|
+
bind:this={el}
|
|
280
|
+
{placeholder}
|
|
281
|
+
rows={lines}
|
|
282
|
+
{disabled}
|
|
283
|
+
{autofocus}
|
|
284
|
+
on:keypress={handle_keypress}
|
|
285
|
+
on:blur
|
|
286
|
+
on:select={handle_select}
|
|
287
|
+
on:focus
|
|
288
|
+
on:scroll={handle_scroll}
|
|
289
|
+
on:paste={handle_paste}
|
|
290
|
+
style={text_align ? "text-align: " + text_align : ""}
|
|
291
|
+
/>
|
|
292
|
+
{#if submit_btn}
|
|
293
|
+
<button
|
|
294
|
+
class="submit-button"
|
|
295
|
+
class:padded-button={submit_btn !== true}
|
|
296
|
+
on:click={handle_submit}
|
|
297
|
+
>
|
|
298
|
+
{#if submit_btn === true}
|
|
299
|
+
<Send />
|
|
300
|
+
{:else}
|
|
301
|
+
Hello World
|
|
302
|
+
{/if}
|
|
303
|
+
</button>
|
|
304
|
+
{/if}
|
|
305
|
+
</div>
|
|
306
|
+
</label>
|
|
307
|
+
</div>
|
|
308
|
+
|
|
309
|
+
<style>
|
|
310
|
+
.full-container {
|
|
311
|
+
width: 100%;
|
|
312
|
+
position: relative;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.full-container.dragging::after {
|
|
316
|
+
content: "";
|
|
317
|
+
position: absolute;
|
|
318
|
+
top: 0;
|
|
319
|
+
left: 0;
|
|
320
|
+
right: 0;
|
|
321
|
+
bottom: 0;
|
|
322
|
+
pointer-events: none;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.input-container {
|
|
326
|
+
display: flex;
|
|
327
|
+
position: relative;
|
|
328
|
+
align-items: flex-end;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
textarea {
|
|
332
|
+
flex-grow: 1;
|
|
333
|
+
outline: none !important;
|
|
334
|
+
background: var(--input-background-fill);
|
|
335
|
+
padding: var(--input-padding);
|
|
336
|
+
color: var(--body-text-color);
|
|
337
|
+
font-weight: var(--input-text-weight);
|
|
338
|
+
font-size: var(--input-text-size);
|
|
339
|
+
line-height: var(--line-sm);
|
|
340
|
+
border: none;
|
|
341
|
+
margin-top: 0px;
|
|
342
|
+
margin-bottom: 0px;
|
|
343
|
+
resize: none;
|
|
344
|
+
position: relative;
|
|
345
|
+
z-index: 1;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
textarea:disabled {
|
|
349
|
+
-webkit-opacity: 1;
|
|
350
|
+
opacity: 1;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
textarea::placeholder {
|
|
354
|
+
color: var(--input-placeholder-color);
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.upload-button,
|
|
358
|
+
.submit-button {
|
|
359
|
+
background: var(--button-secondary-background-fill);
|
|
360
|
+
color: var(--button-secondary-text-color);
|
|
361
|
+
border: none;
|
|
362
|
+
text-align: center;
|
|
363
|
+
text-decoration: none;
|
|
364
|
+
font-size: 14px;
|
|
365
|
+
cursor: pointer;
|
|
366
|
+
border-radius: 15px;
|
|
367
|
+
min-width: 30px;
|
|
368
|
+
height: 30px;
|
|
369
|
+
flex-shrink: 0;
|
|
370
|
+
display: flex;
|
|
371
|
+
justify-content: center;
|
|
372
|
+
align-items: center;
|
|
373
|
+
margin-bottom: 5px;
|
|
374
|
+
z-index: var(--layer-1);
|
|
375
|
+
}
|
|
376
|
+
.padded-button {
|
|
377
|
+
padding: 0 10px;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.upload-button:hover,
|
|
381
|
+
.submit-button:hover {
|
|
382
|
+
background: var(--button-secondary-background-fill-hover);
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.upload-button:active,
|
|
386
|
+
.submit-button:active {
|
|
387
|
+
box-shadow: var(--button-shadow-active);
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
.submit-button :global(svg) {
|
|
391
|
+
height: 22px;
|
|
392
|
+
width: 22px;
|
|
393
|
+
}
|
|
394
|
+
.upload-button :global(svg) {
|
|
395
|
+
height: 17px;
|
|
396
|
+
width: 17px;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
.loader {
|
|
400
|
+
display: flex;
|
|
401
|
+
justify-content: center;
|
|
402
|
+
align-items: center;
|
|
403
|
+
--ring-color: transparent;
|
|
404
|
+
position: relative;
|
|
405
|
+
border: 5px solid #f3f3f3;
|
|
406
|
+
border-top: 5px solid var(--color-accent);
|
|
407
|
+
border-radius: 50%;
|
|
408
|
+
width: 25px;
|
|
409
|
+
height: 25px;
|
|
410
|
+
animation: spin 2s linear infinite;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
@keyframes spin {
|
|
414
|
+
0% {
|
|
415
|
+
transform: rotate(0deg);
|
|
416
|
+
}
|
|
417
|
+
100% {
|
|
418
|
+
transform: rotate(360deg);
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.thumbnails :global(img) {
|
|
423
|
+
width: var(--size-full);
|
|
424
|
+
height: var(--size-full);
|
|
425
|
+
object-fit: cover;
|
|
426
|
+
border-radius: var(--radius-lg);
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
.thumbnails {
|
|
430
|
+
display: flex;
|
|
431
|
+
align-items: center;
|
|
432
|
+
gap: var(--spacing-lg);
|
|
433
|
+
overflow-x: scroll;
|
|
434
|
+
padding-top: var(--spacing-sm);
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
.thumbnail-item {
|
|
438
|
+
display: flex;
|
|
439
|
+
justify-content: center;
|
|
440
|
+
align-items: center;
|
|
441
|
+
--ring-color: transparent;
|
|
442
|
+
position: relative;
|
|
443
|
+
box-shadow:
|
|
444
|
+
0 0 0 2px var(--ring-color),
|
|
445
|
+
var(--shadow-drop);
|
|
446
|
+
border: 1px solid var(--border-color-primary);
|
|
447
|
+
border-radius: var(--radius-lg);
|
|
448
|
+
background: var(--background-fill-secondary);
|
|
449
|
+
aspect-ratio: var(--ratio-square);
|
|
450
|
+
width: var(--size-full);
|
|
451
|
+
height: var(--size-full);
|
|
452
|
+
cursor: default;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
.thumbnail-small {
|
|
456
|
+
flex: none;
|
|
457
|
+
transform: scale(0.9);
|
|
458
|
+
transition: 0.075s;
|
|
459
|
+
width: var(--size-12);
|
|
460
|
+
height: var(--size-12);
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
.thumbnail-item :global(svg) {
|
|
464
|
+
width: 30px;
|
|
465
|
+
height: 30px;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
.delete-button {
|
|
469
|
+
display: flex;
|
|
470
|
+
justify-content: center;
|
|
471
|
+
align-items: center;
|
|
472
|
+
position: absolute;
|
|
473
|
+
right: -7px;
|
|
474
|
+
top: -7px;
|
|
475
|
+
color: var(--button-secondary-text-color);
|
|
476
|
+
background: var(--button-secondary-background-fill);
|
|
477
|
+
border: none;
|
|
478
|
+
text-align: center;
|
|
479
|
+
text-decoration: none;
|
|
480
|
+
font-size: 10px;
|
|
481
|
+
cursor: pointer;
|
|
482
|
+
border-radius: 50%;
|
|
483
|
+
width: 20px;
|
|
484
|
+
height: 20px;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
.disabled {
|
|
488
|
+
display: none;
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
.delete-button :global(svg) {
|
|
492
|
+
width: 12px;
|
|
493
|
+
height: 12px;
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
.delete-button:hover {
|
|
497
|
+
filter: brightness(1.2);
|
|
498
|
+
border: 0.8px solid var(--color-grey-500);
|
|
499
|
+
}
|
|
500
|
+
</style>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import type { FileData, Client } from "@gradio/client";
|
|
3
|
+
import type { SelectData } from "@gradio/utils";
|
|
4
|
+
declare const __propDef: {
|
|
5
|
+
props: {
|
|
6
|
+
value?: {
|
|
7
|
+
text: string;
|
|
8
|
+
files: FileData[];
|
|
9
|
+
} | undefined;
|
|
10
|
+
value_is_output?: boolean | undefined;
|
|
11
|
+
lines?: number | undefined;
|
|
12
|
+
placeholder?: string | undefined;
|
|
13
|
+
disabled?: boolean | undefined;
|
|
14
|
+
label: string;
|
|
15
|
+
info?: string | undefined;
|
|
16
|
+
show_label?: boolean | undefined;
|
|
17
|
+
container?: boolean | undefined;
|
|
18
|
+
max_lines: number;
|
|
19
|
+
submit_btn?: (string | boolean | null) | undefined;
|
|
20
|
+
rtl?: boolean | undefined;
|
|
21
|
+
autofocus?: boolean | undefined;
|
|
22
|
+
text_align?: "left" | "right" | undefined;
|
|
23
|
+
autoscroll?: boolean | undefined;
|
|
24
|
+
root: string;
|
|
25
|
+
file_types?: (string[] | null) | undefined;
|
|
26
|
+
max_file_size?: (number | null) | undefined;
|
|
27
|
+
upload: Client["upload"];
|
|
28
|
+
stream_handler: Client["stream"];
|
|
29
|
+
file_count?: ("single" | "multiple" | "directory") | undefined;
|
|
30
|
+
dragging?: boolean | undefined;
|
|
31
|
+
};
|
|
32
|
+
events: {
|
|
33
|
+
dragover: DragEvent;
|
|
34
|
+
error: CustomEvent<any>;
|
|
35
|
+
blur: CustomEvent<any>;
|
|
36
|
+
focus: CustomEvent<any>;
|
|
37
|
+
change: CustomEvent<{
|
|
38
|
+
text: string;
|
|
39
|
+
files: FileData[];
|
|
40
|
+
}>;
|
|
41
|
+
submit: CustomEvent<undefined>;
|
|
42
|
+
select: CustomEvent<SelectData>;
|
|
43
|
+
input: CustomEvent<undefined>;
|
|
44
|
+
drag: CustomEvent<boolean>;
|
|
45
|
+
upload: CustomEvent<FileData | FileData[]>;
|
|
46
|
+
clear: CustomEvent<undefined>;
|
|
47
|
+
load: CustomEvent<FileData | FileData[]>;
|
|
48
|
+
} & {
|
|
49
|
+
[evt: string]: CustomEvent<any>;
|
|
50
|
+
};
|
|
51
|
+
slots: {};
|
|
52
|
+
};
|
|
53
|
+
export type MultimodalTextboxProps = typeof __propDef.props;
|
|
54
|
+
export type MultimodalTextboxEvents = typeof __propDef.events;
|
|
55
|
+
export type MultimodalTextboxSlots = typeof __propDef.slots;
|
|
56
|
+
export default class MultimodalTextbox extends SvelteComponent<MultimodalTextboxProps, MultimodalTextboxEvents, MultimodalTextboxSlots> {
|
|
57
|
+
}
|
|
58
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
interface Value {
|
|
2
|
+
lines: number;
|
|
3
|
+
max_lines: number;
|
|
4
|
+
text: string;
|
|
5
|
+
}
|
|
6
|
+
export declare function resize(target: HTMLTextAreaElement | HTMLInputElement, lines: number, max_lines: number): Promise<void>;
|
|
7
|
+
export declare function text_area_resize(_el: HTMLTextAreaElement, _value: Value): any | undefined;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { tick } from "svelte";
|
|
2
|
+
export async function resize(target, lines, max_lines) {
|
|
3
|
+
await tick();
|
|
4
|
+
if (lines === max_lines)
|
|
5
|
+
return;
|
|
6
|
+
let max = max_lines === undefined
|
|
7
|
+
? false
|
|
8
|
+
: max_lines === undefined // default
|
|
9
|
+
? 21 * 11
|
|
10
|
+
: 21 * (max_lines + 1);
|
|
11
|
+
let min = 21 * (lines + 1);
|
|
12
|
+
target.style.height = "1px";
|
|
13
|
+
let scroll_height;
|
|
14
|
+
if (max && target.scrollHeight > max) {
|
|
15
|
+
scroll_height = max;
|
|
16
|
+
}
|
|
17
|
+
else if (target.scrollHeight < min) {
|
|
18
|
+
scroll_height = min;
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
scroll_height = target.scrollHeight;
|
|
22
|
+
}
|
|
23
|
+
target.style.height = `${scroll_height}px`;
|
|
24
|
+
}
|
|
25
|
+
export function text_area_resize(_el, _value) {
|
|
26
|
+
if (_value.lines === _value.max_lines)
|
|
27
|
+
return;
|
|
28
|
+
_el.style.overflowY = "scroll";
|
|
29
|
+
_el.addEventListener("input", (event) => resize(event.target, _value.lines, _value.max_lines));
|
|
30
|
+
if (!_value.text.trim())
|
|
31
|
+
return;
|
|
32
|
+
resize(_el, _value.lines, _value.max_lines);
|
|
33
|
+
return {
|
|
34
|
+
destroy: () => _el.removeEventListener("input", (e) => resize(e.target, _value.lines, _value.max_lines))
|
|
35
|
+
};
|
|
36
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/multimodaltextbox",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.7",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
@@ -9,21 +9,37 @@
|
|
|
9
9
|
"main_changeset": true,
|
|
10
10
|
"main": "Index.svelte",
|
|
11
11
|
"exports": {
|
|
12
|
-
".":
|
|
13
|
-
|
|
12
|
+
".": {
|
|
13
|
+
"gradio": "./Index.svelte",
|
|
14
|
+
"svelte": "./dist/Index.svelte",
|
|
15
|
+
"types": "./dist/Index.svelte.d.ts"
|
|
16
|
+
},
|
|
17
|
+
"./example": {
|
|
18
|
+
"gradio": "./Example.svelte",
|
|
19
|
+
"svelte": "./dist/Example.svelte",
|
|
20
|
+
"types": "./dist/Example.svelte.d.ts"
|
|
21
|
+
},
|
|
14
22
|
"./package.json": "./package.json"
|
|
15
23
|
},
|
|
16
24
|
"dependencies": {
|
|
17
|
-
"@gradio/
|
|
18
|
-
"@gradio/
|
|
19
|
-
"@gradio/
|
|
20
|
-
"@gradio/
|
|
21
|
-
"@gradio/
|
|
22
|
-
"@gradio/
|
|
23
|
-
"@gradio/
|
|
24
|
-
"@gradio/
|
|
25
|
+
"@gradio/atoms": "^0.8.1",
|
|
26
|
+
"@gradio/icons": "^0.7.2",
|
|
27
|
+
"@gradio/statustracker": "^0.7.6",
|
|
28
|
+
"@gradio/utils": "^0.6.1",
|
|
29
|
+
"@gradio/upload": "^0.12.4",
|
|
30
|
+
"@gradio/image": "^0.15.1",
|
|
31
|
+
"@gradio/video": "^0.10.4",
|
|
32
|
+
"@gradio/client": "^1.5.2"
|
|
25
33
|
},
|
|
26
34
|
"devDependencies": {
|
|
27
|
-
"@gradio/preview": "^0.
|
|
35
|
+
"@gradio/preview": "^0.11.1"
|
|
36
|
+
},
|
|
37
|
+
"peerDependencies": {
|
|
38
|
+
"svelte": "^4.0.0"
|
|
39
|
+
},
|
|
40
|
+
"repository": {
|
|
41
|
+
"type": "git",
|
|
42
|
+
"url": "git+https://github.com/gradio-app/gradio.git",
|
|
43
|
+
"directory": "js/multimodaltextbox"
|
|
28
44
|
}
|
|
29
45
|
}
|