@gradio/multimodaltextbox 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @gradio/multimodaltextbox
+
+## 0.2.0
+
+### Features
+
+- [#7420](https://github.com/gradio-app/gradio/pull/7420) [`15da39f`](https://github.com/gradio-app/gradio/commit/15da39fca01d09a30cf47e7e72d7efa5052f61f8) - Multimodal Textbox (Chat Input Component).  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/client@0.14.0
+- @gradio/upload@0.8.0
+- @gradio/image@0.9.7

package/Example.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { Image } from "@gradio/image/shared";
+	import type { FileData } from "@gradio/client";
+
+	export let value: { text: string; files: FileData[] } = {
+		text: "",
+		files: []
+	};
+	export let type: "gallery" | "table";
+	export let selected = false;
+
+	let size: number;
+	let el: HTMLDivElement;
+
+	function set_styles(element: HTMLElement, el_width: number): void {
+		if (!element || !el_width) return;
+		el.style.setProperty(
+			"--local-text-width",
+			`${el_width < 150 ? el_width : 200}px`
+		);
+		el.style.whiteSpace = "unset";
+	}
+
+	onMount(() => {
+		set_styles(el, size);
+	});
+</script>
+
+<div
+	bind:clientWidth={size}
+	bind:this={el}
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	<p>{value.text ? value.text : ""}</p>
+	{#each value.files as file}
+		{#if file.mime_type && file.mime_type.includes("image")}
+			<Image src={file.url} alt="" />
+		{:else}
+			{file.path}
+		{/if}
+	{/each}
+</div>
+
+<style>
+	.gallery {
+		padding: var(--size-1) var(--size-2);
+		display: flex;
+		align-items: center;
+		gap: 20px;
+		overflow-x: auto;
+	}
+
+	div {
+		overflow: hidden;
+		min-width: var(--local-text-width);
+
+		white-space: nowrap;
+	}
+
+	:global(img) {
+		width: 100px;
+		height: 100px;
+	}
+
+	div > :global(p) {
+		font-size: var(--text-lg);
+		white-space: normal;
+	}
+</style>

package/Index.svelte

@@ -0,0 +1,94 @@
+<svelte:options accessors={true} />
+
+<script context="module" lang="ts">
+	export { default as BaseMultimodalTextbox } from "./shared/MultimodalTextbox.svelte";
+	export { default as BaseExample } from "./Example.svelte";
+</script>
+
+<script lang="ts">
+	import type { Gradio, SelectData } from "@gradio/utils";
+	import MultimodalTextbox from "./shared/MultimodalTextbox.svelte";
+	import { Block } from "@gradio/atoms";
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { LoadingStatus } from "@gradio/statustracker";
+	import type { FileData } from "@gradio/client";
+
+	export let gradio: Gradio<{
+		change: typeof value;
+		submit: never;
+		blur: never;
+		select: SelectData;
+		input: never;
+		focus: never;
+	}>;
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value: { text: string; files: FileData[] } = {
+		text: "",
+		files: []
+	};
+	export let file_types: string[] | null = null;
+	export let lines: number;
+	export let placeholder = "";
+	export let label = "MultimodalTextbox";
+	export let info: string | undefined = undefined;
+	export let show_label: boolean;
+	export let max_lines: number;
+	export let container = true;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let submit_btn = "⌲";
+	export let loading_status: LoadingStatus | undefined = undefined;
+	export let value_is_output = false;
+	export let rtl = false;
+	export let text_align: "left" | "right" | undefined = undefined;
+	export let autofocus = false;
+	export let autoscroll = true;
+	export let interactive: boolean;
+	export let root: string;
+</script>
+
+<Block
+	{visible}
+	{elem_id}
+	{elem_classes}
+	{scale}
+	{min_width}
+	allow_overflow={false}
+	padding={container}
+>
+	{#if loading_status}
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+		/>
+	{/if}
+
+	<MultimodalTextbox
+		bind:value
+		bind:value_is_output
+		{file_types}
+		{root}
+		{label}
+		{info}
+		{show_label}
+		{lines}
+		{rtl}
+		{text_align}
+		max_lines={!max_lines ? lines + 1 : max_lines}
+		{placeholder}
+		{submit_btn}
+		{autofocus}
+		{container}
+		{autoscroll}
+		on:change={() => gradio.dispatch("change", value)}
+		on:input={() => gradio.dispatch("input")}
+		on:submit={() => gradio.dispatch("submit")}
+		on:blur={() => gradio.dispatch("blur")}
+		on:select={(e) => gradio.dispatch("select", e.detail)}
+		on:focus={() => gradio.dispatch("focus")}
+		disabled={!interactive}
+	/>
+</Block>

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/MultimodalTextbox.stories.svelte

@@ -0,0 +1,75 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import MultimodalTextbox from "./Index.svelte";
+</script>
+
+<Meta
+	title="Components/MultimodalTextbox"
+	component={MultimodalTextbox}
+	argTypes={{
+		label: {
+			control: "text",
+			description: "The textbox label",
+			name: "label"
+		},
+		show_label: {
+			options: [true, false],
+			description: "Whether to show the label",
+			control: { type: "boolean" },
+			defaultValue: true
+		},
+		text_align: {
+			options: ["left", "right"],
+			description: "Whether to align the text left or right",
+			control: { type: "select" },
+			defaultValue: "left"
+		},
+		lines: {
+			options: [1, 5, 10, 20],
+			description: "The number of lines to display in the textbox",
+			control: { type: "select" },
+			defaultValue: 1
+		},
+		max_lines: {
+			options: [1, 5, 10, 20],
+			description:
+				"The maximum number of lines to allow users to type in the textbox",
+			control: { type: "select" },
+			defaultValue: 1
+		},
+		rtl: {
+			options: [true, false],
+			description: "Whether to render right-to-left",
+			control: { type: "boolean" },
+			defaultValue: false
+		}
+	}}
+/>
+
+<Template let:args>
+	<MultimodalTextbox {...args} />
+</Template>
+
+<Story
+	name="MultimodalTextbox with file and label"
+	args={{
+		value: {
+			text: "sample text",
+			files: [
+				{
+					path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+					url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+					orig_name: "cheetah.jpg"
+				}
+			]
+		},
+		label: "My simple label",
+		show_label: true
+	}}
+/>
+<Story
+	name="MultimodalTextbox with 5 lines and max 5 lines"
+	args={{ lines: 5, max_lines: 5 }}
+/>
+<Story name="Right aligned textbox" args={{ text_align: "right" }} />
+<Story name="RTL textbox" args={{ rtl: true }} />

package/MultimodalTextbox.test.ts

@@ -0,0 +1,69 @@
+import { test, describe, assert, afterEach } from "vitest";
+import { spy } from "tinyspy";
+import { cleanup, fireEvent, render, get_text, wait } from "@gradio/tootils";
+import event from "@testing-library/user-event";
+
+import MultimodalTextbox from "./Index.svelte";
+import type { LoadingStatus } from "@gradio/statustracker";
+
+const loading_status: LoadingStatus = {
+	eta: 0,
+	queue_position: 1,
+	queue_size: 1,
+	status: "complete" as LoadingStatus["status"],
+	scroll_to_output: false,
+	visible: true,
+	fn_index: 0,
+	show_progress: "full"
+};
+
+describe("MultimodalTextbox", () => {
+	afterEach(() => cleanup());
+
+	test("renders provided value", async () => {
+		const { getByDisplayValue } = await render(MultimodalTextbox, {
+			show_label: true,
+			max_lines: 1,
+			loading_status,
+			lines: 1,
+			value: { text: "hello world", files: [] },
+			label: "Textbox",
+			interactive: false,
+			root: ""
+		});
+
+		const item: HTMLInputElement = getByDisplayValue(
+			"hello world"
+		) as HTMLInputElement;
+		assert.equal(item.value, "hello world");
+	});
+
+	test("changing the text should update the value", async () => {
+		const { component, getByDisplayValue, listen } = await render(
+			MultimodalTextbox,
+			{
+				show_label: true,
+				max_lines: 10,
+				loading_status,
+				lines: 1,
+				value: { text: "hi ", files: [] },
+				label: "MultimodalTextbox",
+				interactive: true,
+				root: ""
+			}
+		);
+
+		const item: HTMLInputElement = getByDisplayValue("hi") as HTMLInputElement;
+
+		const mock = listen("change");
+
+		item.focus();
+		await event.keyboard("some text");
+
+		assert.equal(item.value, "hi some text");
+		assert.equal(component.value.text, "hi some text");
+		assert.equal(mock.callCount, 9);
+		assert.equal(mock.calls[8][0].detail.data.text, "hi some text");
+		assert.equal(mock.calls[8][0].detail.data.files.length, 0);
+	});
+});

package/MultimodalTextboxExample.stories.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import MultimodalTextbox from "./Example.svelte";
+</script>
+
+<Meta
+	title="Components/MultimodalTextbox/Example"
+	component={MultimodalTextbox}
+/>
+
+<Template let:args>
+	<MultimodalTextbox {...args} />
+</Template>
+
+<Story
+	name="Text value"
+	args={{
+		value: { text: "the quick brown fox", files: [] }
+	}}
+/>
+
+<Story
+	name="Empty Value"
+	args={{
+		value: { text: "", files: [] }
+	}}
+/>

package/README.md

@@ -0,0 +1,34 @@
+# `@gradio/multimodaltextbox`
+
+```html
+<script>
+    import { BaseMultimodalTextbox, BaseExample } from "@gradio/multimodaltextbox";
+</script>
+```
+
+BaseMultimodalTextbox
+```javascript
+	export let value = "";
+	export let value_is_output = false;
+	export let lines = 1;
+	export let placeholder = "Type here...";
+	export let label: string;
+	export let info: string | undefined = undefined;
+	export let disabled = false;
+	export let show_label = true;
+	export let container = true;
+	export let max_lines: number;
+	export let type: "text" | "password" | "email" = "text";
+	export let show_copy_button = false;
+	export let rtl = false;
+	export let autofocus = false;
+	export let text_align: "left" | "right" | undefined = undefined;
+	export let autoscroll = true;
+```
+
+BaseExample
+```javascript
+	export let value: string;
+	export let type: "gallery" | "table";
+	export let selected = false;
+```

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@gradio/multimodaltextbox",
+  "version": "0.2.0",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "main_changeset": true,
+  "main": "Index.svelte",
+  "exports": {
+    ".": "./Index.svelte",
+    "./example": "./Example.svelte",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@gradio/atoms": "^0.5.3",
+    "@gradio/icons": "^0.3.3",
+    "@gradio/upload": "^0.8.0",
+    "@gradio/utils": "^0.3.0",
+    "@gradio/image": "^0.9.7",
+    "@gradio/client": "^0.14.0",
+    "@gradio/statustracker": "^0.4.8"
+  }
+}

package/shared/MultimodalTextbox.svelte

@@ -0,0 +1,421 @@
+<script lang="ts">
+	import {
+		beforeUpdate,
+		afterUpdate,
+		createEventDispatcher,
+		tick
+	} from "svelte";
+	import { text_area_resize, resize } from "../shared/utils";
+	import { BlockTitle } from "@gradio/atoms";
+	import { Upload } from "@gradio/upload";
+	import { Image } from "@gradio/image/shared";
+	import type { FileData } from "@gradio/client";
+	import { Clear, File, Music, Video } from "@gradio/icons";
+	import type { SelectData } from "@gradio/utils";
+
+	export let value: { text: string; files: FileData[] } = {
+		text: "",
+		files: []
+	};
+
+	export let value_is_output = false;
+	export let lines = 1;
+	export let placeholder = "Type here...";
+	export let disabled = false;
+	export let label: string;
+	export let info: string | undefined = undefined;
+	export let show_label = true;
+	export let container = true;
+	export let max_lines: number;
+	export let submit_btn = "⌲";
+	export let rtl = false;
+	export let autofocus = false;
+	export let text_align: "left" | "right" | undefined = undefined;
+	export let autoscroll = true;
+	export let root: string;
+	export let file_types: string[] | null = null;
+
+	let el: HTMLTextAreaElement | HTMLInputElement;
+	let can_scroll: boolean;
+	let previous_scroll_top = 0;
+	let user_has_scrolled_up = false;
+	let dragging = false;
+	let oldValue = value.text;
+	$: dispatch("drag", dragging);
+
+	$: if (oldValue !== value.text) {
+		dispatch("change", value);
+		oldValue = value.text;
+	}
+	let accept_file_types: string | null;
+	if (file_types == null) {
+		accept_file_types = null;
+	} else {
+		file_types = file_types.map((x) => {
+			if (x.startsWith(".")) {
+				return x;
+			}
+			return x + "/*";
+		});
+		accept_file_types = file_types.join(", ");
+	}
+
+	$: if (value === null) value = { text: "", files: [] };
+	$: value, el && lines !== max_lines && resize(el, lines, max_lines);
+
+	const dispatch = createEventDispatcher<{
+		change: typeof value;
+		submit: undefined;
+		blur: undefined;
+		select: SelectData;
+		input: undefined;
+		focus: undefined;
+		drag: boolean;
+		upload: FileData[] | FileData;
+		clear: undefined;
+		load: FileData[] | FileData;
+		error: string;
+	}>();
+
+	beforeUpdate(() => {
+		can_scroll = el && el.offsetHeight + el.scrollTop > el.scrollHeight - 100;
+	});
+
+	const scroll = (): void => {
+		if (can_scroll && autoscroll && !user_has_scrolled_up) {
+			el.scrollTo(0, el.scrollHeight);
+		}
+	};
+
+	async function handle_change(): Promise<void> {
+		dispatch("change", value);
+		if (!value_is_output) {
+			dispatch("input");
+		}
+	}
+
+	afterUpdate(() => {
+		if (autofocus && el !== null) {
+			el.focus();
+		}
+		if (can_scroll && autoscroll) {
+			scroll();
+		}
+		value_is_output = false;
+	});
+
+	function handle_select(event: Event): void {
+		const target: HTMLTextAreaElement | HTMLInputElement = event.target as
+			| HTMLTextAreaElement
+			| HTMLInputElement;
+		const text = target.value;
+		const index: [number, number] = [
+			target.selectionStart as number,
+			target.selectionEnd as number
+		];
+		dispatch("select", { value: text.substring(...index), index: index });
+	}
+
+	async function handle_keypress(e: KeyboardEvent): Promise<void> {
+		await tick();
+		if (e.key === "Enter" && e.shiftKey && lines > 1) {
+			e.preventDefault();
+			dispatch("submit");
+		} else if (
+			e.key === "Enter" &&
+			!e.shiftKey &&
+			lines === 1 &&
+			max_lines >= 1
+		) {
+			e.preventDefault();
+			dispatch("submit");
+		}
+	}
+
+	function handle_scroll(event: Event): void {
+		const target = event.target as HTMLElement;
+		const current_scroll_top = target.scrollTop;
+		if (current_scroll_top < previous_scroll_top) {
+			user_has_scrolled_up = true;
+		}
+		previous_scroll_top = current_scroll_top;
+
+		const max_scroll_top = target.scrollHeight - target.clientHeight;
+		const user_has_scrolled_to_bottom = current_scroll_top >= max_scroll_top;
+		if (user_has_scrolled_to_bottom) {
+			user_has_scrolled_up = false;
+		}
+	}
+
+	async function handle_upload({
+		detail
+	}: CustomEvent<FileData | FileData[]>): Promise<void> {
+		handle_change();
+		if (Array.isArray(detail)) {
+			for (let file of detail) {
+				value.files.push(file);
+			}
+		} else {
+			value.files.push(detail);
+			value = value;
+		}
+		await tick();
+		dispatch("change", value);
+		dispatch("upload", detail);
+	}
+
+	function remove_thumbnail(event: MouseEvent, index: number): void {
+		handle_change();
+		event.stopPropagation();
+		value.files.splice(index, 1);
+		value = value;
+	}
+
+	let hidden_upload: HTMLInputElement;
+
+	function handle_upload_click(): void {
+		if (hidden_upload) {
+			hidden_upload.click();
+		}
+	}
+
+	async function handle_submit(): Promise<void> {
+		dispatch("submit");
+	}
+</script>
+
+<!-- svelte-ignore a11y-autofocus -->
+<label class:container>
+	<BlockTitle {show_label} {info}>{label}</BlockTitle>
+	<div class="input-container">
+		<Upload
+			on:load={handle_upload}
+			filetype={accept_file_types}
+			{root}
+			bind:dragging
+			disable_click={true}
+			bind:hidden_upload
+		>
+			{#if submit_btn}
+				<button class:disabled class="submit-button" on:click={handle_submit}
+					>{submit_btn}</button
+				>
+			{/if}
+			<button class:disabled class="plus-button" on:click={handle_upload_click}
+				>+</button
+			>
+			{#if value.files.length > 0}
+				<div
+					class="thumbnails scroll-hide"
+					data-testid="container_el"
+					style="display: {value.files.length > 0 ? 'flex' : 'none'};"
+				>
+					{#each value.files as file, index}
+						<button class="thumbnail-item thumbnail-small">
+							<button
+								class:disabled
+								class="delete-button"
+								on:click={(event) => remove_thumbnail(event, index)}
+								><Clear /></button
+							>
+							{#if file.mime_type && file.mime_type.includes("image")}
+								<Image
+									src={file.url}
+									title={null}
+									alt=""
+									loading="lazy"
+									class={"thumbnail-image"}
+								/>
+							{:else if file.mime_type && file.mime_type.includes("audio")}
+								<Music />
+							{:else if file.mime_type && file.mime_type.includes("video")}
+								<Video />
+							{:else}
+								<File />
+							{/if}
+						</button>
+					{/each}
+				</div>
+			{/if}
+			<textarea
+				data-testid="textbox"
+				use:text_area_resize={{
+					text: value.text,
+					lines: lines,
+					max_lines: max_lines
+				}}
+				class="scroll-hide"
+				dir={rtl ? "rtl" : "ltr"}
+				bind:value={value.text}
+				bind:this={el}
+				{placeholder}
+				rows={lines}
+				{disabled}
+				{autofocus}
+				on:keypress={handle_keypress}
+				on:blur
+				on:select={handle_select}
+				on:focus
+				on:scroll={handle_scroll}
+				style={text_align ? "text-align: " + text_align : ""}
+			/>
+		</Upload>
+	</div>
+</label>
+
+<style>
+	.input-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	textarea {
+		align-self: flex-start;
+		outline: none !important;
+		background: var(--input-background-fill);
+		padding: var(--input-padding);
+		width: 90%;
+		max-height: 100%;
+		height: 25px;
+		color: var(--body-text-color);
+		font-weight: var(--input-text-weight);
+		font-size: var(--input-text-size);
+		line-height: var(--line-sm);
+		border: none;
+		margin-top: 0px;
+		margin-bottom: 0px;
+		margin-left: 30px;
+		padding-top: 12px;
+	}
+
+	textarea:disabled {
+		-webkit-text-fill-color: var(--body-text-color);
+		-webkit-opacity: 1;
+		opacity: 1;
+		width: 100%;
+		margin-left: 0px;
+	}
+
+	textarea::placeholder {
+		color: var(--input-placeholder-color);
+	}
+
+	.plus-button,
+	.submit-button {
+		position: absolute;
+		background: var(--button-secondary-background-fill);
+		color: var(--button-secondary-text-color);
+		border: none;
+		text-align: center;
+		text-decoration: none;
+		font-size: 20px;
+		cursor: pointer;
+		border-radius: 50%;
+		width: 30px;
+		height: 30px;
+		bottom: 15px;
+	}
+
+	.plus-button:hover,
+	.submit-button:hover {
+		background: var(--button-secondary-background-fill-hover);
+	}
+
+	.plus-button:active,
+	.submit-button:active {
+		box-shadow: var(--button-shadow-active);
+	}
+
+	.submit-button {
+		right: 10px;
+		margin-left: 5px;
+		padding-bottom: 5px;
+		padding-left: 2px;
+	}
+
+	.plus-button {
+		left: 10px;
+		margin-right: 5px;
+	}
+
+	.thumbnails :global(img) {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: cover;
+		border-radius: var(--radius-lg);
+	}
+
+	.thumbnails {
+		align-self: flex-start;
+		display: flex;
+		justify-content: left;
+		align-items: center;
+		gap: var(--spacing-lg);
+	}
+
+	.thumbnail-item {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		--ring-color: transparent;
+		position: relative;
+		box-shadow:
+			0 0 0 2px var(--ring-color),
+			var(--shadow-drop);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-lg);
+		background: var(--background-fill-secondary);
+		aspect-ratio: var(--ratio-square);
+		width: var(--size-full);
+		height: var(--size-full);
+		cursor: default;
+	}
+
+	.thumbnail-small {
+		flex: none;
+		transform: scale(0.9);
+		transition: 0.075s;
+		width: var(--size-12);
+		height: var(--size-12);
+	}
+
+	.thumbnail-item :global(svg) {
+		width: 30px;
+		height: 30px;
+	}
+
+	.delete-button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: absolute;
+		right: -7px;
+		top: -7px;
+		color: var(--button-secondary-text-color);
+		background: var(--button-secondary-background-fill);
+		border: none;
+		text-align: center;
+		text-decoration: none;
+		font-size: 10px;
+		cursor: pointer;
+		border-radius: 50%;
+		width: 20px;
+		height: 20px;
+	}
+
+	.disabled {
+		display: none;
+	}
+
+	.delete-button :global(svg) {
+		width: 12px;
+		height: 12px;
+	}
+
+	.delete-button:hover {
+		filter: brightness(1.2);
+		border: 0.8px solid var(--color-grey-500);
+	}
+</style>

package/shared/utils.ts

@@ -0,0 +1,58 @@
+import { tick } from "svelte";
+
+interface Value {
+	lines: number;
+	max_lines: number;
+	text: string;
+}
+
+export async function resize(
+	target: HTMLTextAreaElement | HTMLInputElement,
+	lines: number,
+	max_lines: number
+): Promise<void> {
+	await tick();
+	if (lines === max_lines) return;
+
+	let max =
+		max_lines === undefined
+			? false
+			: max_lines === undefined // default
+			? 21 * 11
+			: 21 * (max_lines + 1);
+	let min = 21 * (lines + 1);
+
+	target.style.height = "1px";
+
+	let scroll_height;
+	if (max && target.scrollHeight > max) {
+		scroll_height = max;
+	} else if (target.scrollHeight < min) {
+		scroll_height = min;
+	} else {
+		scroll_height = target.scrollHeight;
+	}
+
+	target.style.height = `${scroll_height}px`;
+}
+
+export function text_area_resize(
+	_el: HTMLTextAreaElement,
+	_value: Value
+): any | undefined {
+	if (_value.lines === _value.max_lines) return;
+	_el.style.overflowY = "scroll";
+	_el.addEventListener("input", (event: Event) =>
+		resize(event.target as HTMLTextAreaElement, _value.lines, _value.max_lines)
+	);
+
+	if (!_value.text.trim()) return;
+	resize(_el, _value.lines, _value.max_lines);
+
+	return {
+		destroy: () =>
+			_el.removeEventListener("input", (e: Event) =>
+				resize(e.target as HTMLTextAreaElement, _value.lines, _value.max_lines)
+			)
+	};
+}