Skip to content

Commit 65afffd

Browse files
aliabid94Ali Abidgradio-pr-bot
authored
Fix multimodal chat look (#8590)
* changes * add changeset * changes * changes * changes * changes * add changeset --------- Co-authored-by: Ali Abid <[email protected]> Co-authored-by: gradio-pr-bot <[email protected]>
1 parent 7289c4b commit 65afffd

File tree

4 files changed

+103
-116
lines changed

4 files changed

+103
-116
lines changed

‎.changeset/fifty-peaches-hug.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@gradio/icons": minor
3+
"@gradio/multimodaltextbox": minor
4+
"gradio": minor
5+
---
6+
7+
feat:Fix multimodal chat look

‎gradio/components/multimodal_textbox.py

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ def __init__(
7575
key: int | str | None = None,
7676
text_align: Literal["left", "right"] | None = None,
7777
rtl: bool = False,
78-
submit_btn: str | Literal[False] | None = None,
78+
submit_btn: str | bool | None = True,
7979
):
8080
"""
8181
Parameters:
@@ -101,7 +101,7 @@ def __init__(
101101
text_align: How to align the text in the textbox, can be: "left", "right", or None (default). If None, the alignment is left if `rtl` is False, or right if `rtl` is True. Can only be changed if `type` is "text".
102102
rtl: If True and `type` is "text", sets the direction of the text to right-to-left (cursor appears on the left of the text). Default is False, which renders cursor on the right.
103103
autoscroll: If True, will automatically scroll to the bottom of the textbox when the value changes, unless the user scrolls up. If False, will not scroll to the bottom of the textbox when the value changes.
104-
submit_btn: If False, will not show a submit button. If a string, will use that string as the submit button text. Only applies if `interactive` is True.
104+
submit_btn: If False, will not show a submit button. If a string, will use that string as the submit button text.
105105
"""
106106
self.file_types = file_types
107107
if value is None:

‎js/icons/src/Send.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<svg
2-
viewBox="0 -2 24 24"
2+
viewBox="0 0 22 24"
33
width="100%"
44
height="100%"
55
fill="none"

‎js/multimodaltextbox/shared/MultimodalTextbox.svelte

Lines changed: 93 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
export let show_label = true;
2828
export let container = true;
2929
export let max_lines: number;
30-
export let submit_btn: string | null = null;
30+
export let submit_btn: string | boolean | null = null;
3131
export let rtl = false;
3232
export let autofocus = false;
3333
export let text_align: "left" | "right" | undefined = undefined;
@@ -204,6 +204,42 @@
204204
<!-- svelte-ignore a11y-autofocus -->
205205
<label class:container>
206206
<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}
207243
<div class="input-container">
208244
<Upload
209245
bind:this={upload_component}
@@ -217,124 +253,79 @@
217253
disable_click={true}
218254
bind:hidden_upload
219255
on:error
256+
hidden={true}
220257
{upload}
221258
{stream_handler}
259+
></Upload>
260+
<button
261+
data-testid="upload-button"
262+
class="upload-button"
263+
on:click={handle_upload_click}><Paperclip /></button
222264
>
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}
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}
232289
<button
233-
data-testid="upload-button"
234-
class="upload-button"
235-
on:click={handle_upload_click}><Paperclip /></button
290+
class="submit-button"
291+
class:padded-button={submit_btn !== true}
292+
on:click={handle_submit}
236293
>
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>
294+
{#if submit_btn === true}
295+
<Send />
296+
{:else}
297+
Hello World
298+
{/if}
299+
</button>
300+
{/if}
299301
</div>
300302
</label>
301303

302304
<style>
303305
.input-container {
304306
display: flex;
305-
flex-direction: column;
306-
justify-content: flex-end;
307-
align-items: center;
308307
position: relative;
308+
align-items: center;
309309
}
310310
311311
textarea {
312-
align-self: flex-start;
312+
flex-grow: 1;
313313
outline: none !important;
314314
background: var(--input-background-fill);
315315
padding: var(--input-padding);
316-
width: 90%;
317-
max-width: 95%;
318-
max-height: 100%;
319-
height: 25px;
320316
color: var(--body-text-color);
321317
font-weight: var(--input-text-weight);
322318
font-size: var(--input-text-size);
323319
line-height: var(--line-sm);
324320
border: none;
325321
margin-top: 0px;
326322
margin-bottom: 0px;
327-
margin-left: 5%;
328-
padding-top: 12px;
329323
resize: none;
330324
}
331325
332326
textarea:disabled {
333327
-webkit-opacity: 1;
334328
opacity: 1;
335-
width: 90%;
336-
max-width: 95%;
337-
margin-left: 35px;
338329
}
339330
340331
textarea::placeholder {
@@ -343,18 +334,23 @@
343334
344335
.upload-button,
345336
.submit-button {
346-
position: absolute;
347337
background: var(--button-secondary-background-fill);
348338
color: var(--button-secondary-text-color);
349339
border: none;
350340
text-align: center;
351341
text-decoration: none;
352-
font-size: 20px;
342+
font-size: 14px;
353343
cursor: pointer;
354-
border-radius: 50%;
355-
width: 30px;
344+
border-radius: 15px;
345+
min-width: 30px;
356346
height: 30px;
357-
bottom: 5px;
347+
flex-shrink: 0;
348+
display: flex;
349+
justify-content: center;
350+
align-items: center;
351+
}
352+
.padded-button {
353+
padding: 0 10px;
358354
}
359355
360356
.upload-button:hover,
@@ -367,29 +363,13 @@
367363
box-shadow: var(--button-shadow-active);
368364
}
369365
370-
.submit-button {
371-
right: 0px;
372-
margin-left: 5px;
373-
padding-bottom: 5px;
374-
padding-left: 2px;
375-
}
376-
377366
.submit-button :global(svg) {
378-
height: 23px;
379-
width: 23px;
380-
padding-left: 4px;
381-
padding-top: 2px;
367+
height: 22px;
368+
width: 22px;
382369
}
383-
384-
.upload-button {
385-
left: 0px;
386-
margin-right: 5px;
387-
}
388-
389370
.upload-button :global(svg) {
390-
height: 23px;
391-
width: 23px;
392-
padding-left: 7px;
371+
height: 17px;
372+
width: 17px;
393373
}
394374
395375
.loader {

0 commit comments

Comments
 (0)