@gradio/multimodaltextbox 0.11.11 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @gradio/multimodaltextbox
 
+## 0.13.0
+
+### Features
+
+- [#13526](https://github.com/gradio-app/gradio/pull/13526) [`53cb4ca`](https://github.com/gradio-app/gradio/commit/53cb4cae1ec3521e9170d12867253516413ba37a) - Run `pnpm lint` and `pnpm ts:check` on CI.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/atoms@0.25.0
+- @gradio/statustracker@0.15.0
+- @gradio/utils@0.13.0
+- @gradio/client@2.3.0
+- @gradio/upload@0.18.0
+- @gradio/image@0.27.0
+- @gradio/video@0.21.0
+- @gradio/audio@0.24.0
+
+## 0.12.0
+
+### Features
+
+- [#13509](https://github.com/gradio-app/gradio/pull/13509) [`dcd072c`](https://github.com/gradio-app/gradio/commit/dcd072cd57f09ffd2dc5f97ae6afc505894824a6) - Migrate Chatbot, Tabs, TabItem to Svelte 5.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/client@2.2.2
+- @gradio/audio@0.23.4
+
+## 0.11.11
+
+### Dependency updates
+
+- @gradio/client@2.2.1
+- @gradio/upload@0.17.10
+
 ## 0.11.11
 
 ### Dependency updates

package/Index.svelte

@@ -91,7 +91,7 @@
 
 	// Create const references to the callbacks so that afterUpdate in child is not called on every prop change
 	// in the DOM. See https://github.com/gradio-app/gradio/issues/11933
-	// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+
 	const upload_fn = (...args: Parameters<typeof gradio.shared.client.upload>) =>
 		gradio.shared.client.upload(...args);
 	const i18n = (s: string | null | undefined): string => gradio.i18n(s);

package/MultimodalTextbox.stories.svelte

@@ -81,29 +81,6 @@
 	}}
 	{template}
 />
-<Story
-	name="MultimodalTextbox with 5 lines and max 5 lines"
-	args={{
-		lines: 5,
-		max_lines: 5,
-		sources: ["upload", "microphone"],
-		file_types: [],
-		value: { text: "", files: [] }
-	}}
-	{template}
-/>
-<Story
-	name="Right aligned textbox"
-	args={{
-		text_align: "right",
-		sources: ["upload", "microphone"],
-		file_types: [],
-		lines: 1,
-		max_lines: 5,
-		value: { text: "", files: [] }
-	}}
-	{template}
-/>
 <Story
 	name="Single file upload"
 	args={{

package/MultimodalTextbox.test.ts

@@ -3,7 +3,7 @@ import { cleanup, render } from "@self/tootils/render";
 import event from "@testing-library/user-event";
 
 import MultimodalTextbox from "./Index.svelte";
-import type { LoadingStatus } from "@gradio/statustracker";
+import type { ILoadingStatus as LoadingStatus } from "@gradio/statustracker";
 
 const loading_status: LoadingStatus = {
 	eta: 0,

package/MultimodalTextboxExample.stories.svelte

@@ -18,14 +18,3 @@
 		<MultimodalTextbox {...args} />
 	{/snippet}
 </Story>
-
-<Story
-	name="Empty Value"
-	args={{
-		value: { text: "", files: [] }
-	}}
->
-	{#snippet template(args)}
-		<MultimodalTextbox {...args} />
-	{/snippet}
-</Story>

package/dist/Index.svelte

@@ -91,7 +91,7 @@
 
 	// Create const references to the callbacks so that afterUpdate in child is not called on every prop change
 	// in the DOM. See https://github.com/gradio-app/gradio/issues/11933
-	// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+
 	const upload_fn = (...args: Parameters<typeof gradio.shared.client.upload>) =>
 		gradio.shared.client.upload(...args);
 	const i18n = (s: string | null | undefined): string => gradio.i18n(s);

package/dist/shared/MultimodalTextbox.svelte

@@ -26,7 +26,10 @@
 	import type { InputHTMLAttributes } from "./types";
 
 	let {
-		value = $bindable(),
+		value = $bindable<{ text: string; files: FileData[] }>({
+			text: "",
+			files: []
+		}),
 		value_is_output = false,
 		lines = 1,
 		i18n: _i18n,
@@ -173,6 +176,7 @@
 	});
 
 	$effect(() => {
+		value?.text;
 		if (el && lines !== max_lines) {
 			resize(el, lines, max_lines);
 		}

package/dist/shared/utils.js

@@ -23,11 +23,23 @@ export async function resize(target, lines, max_lines) {
         scroll_height = target.scrollHeight;
     }
     target.style.height = `${scroll_height}px`;
+    update_scrollbar_visibility(target);
+}
+function update_scrollbar_visibility(textarea) {
+    const content_height = textarea.scrollHeight;
+    const visible_height = textarea.clientHeight;
+    const line_height = parseFloat(window.getComputedStyle(textarea).lineHeight);
+    if (content_height > visible_height + line_height) {
+        textarea.style.overflowY = "scroll";
+    }
+    else {
+        textarea.style.overflowY = "hidden";
+    }
 }
 export function text_area_resize(_el, _value) {
     if (_value.lines === _value.max_lines)
         return;
-    _el.style.overflowY = "scroll";
+    update_scrollbar_visibility(_el);
     function handle_input(event) {
         resize(event.target, _value.lines, _value.max_lines);
     }

package/dist/types.d.ts

@@ -1,6 +1,6 @@
 import type { FileData } from "@gradio/client";
 import type { SelectData } from "@gradio/utils";
-import type { LoadingStatus } from "@gradio/statustracker";
+import type { ILoadingStatus as LoadingStatus } from "@gradio/statustracker";
 import type { InputHTMLAttributes } from "./shared/types";
 import type { WaveformOptions } from "js/audio/shared/types";
 export interface MultimodalTextboxEvents {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/multimodaltextbox",
-  "version": "0.11.11",
+  "version": "0.13.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -22,15 +22,15 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/atoms": "^0.24.0",
+    "@gradio/atoms": "^0.25.0",
     "@gradio/icons": "^0.15.1",
-    "@gradio/statustracker": "^0.14.1",
-    "@gradio/utils": "^0.12.2",
-    "@gradio/upload": "^0.17.9",
-    "@gradio/image": "^0.26.3",
-    "@gradio/audio": "^0.23.3",
-    "@gradio/client": "^2.2.0",
-    "@gradio/video": "^0.20.8"
+    "@gradio/statustracker": "^0.15.0",
+    "@gradio/utils": "^0.13.0",
+    "@gradio/upload": "^0.18.0",
+    "@gradio/image": "^0.27.0",
+    "@gradio/video": "^0.21.0",
+    "@gradio/audio": "^0.24.0",
+    "@gradio/client": "^2.3.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.16.2"

package/shared/MultimodalTextbox.svelte

@@ -26,7 +26,10 @@
 	import type { InputHTMLAttributes } from "./types";
 
 	let {
-		value = $bindable(),
+		value = $bindable<{ text: string; files: FileData[] }>({
+			text: "",
+			files: []
+		}),
 		value_is_output = false,
 		lines = 1,
 		i18n: _i18n,
@@ -173,6 +176,7 @@
 	});
 
 	$effect(() => {
+		value?.text;
 		if (el && lines !== max_lines) {
 			resize(el, lines, max_lines);
 		}

package/shared/utils.ts

@@ -37,6 +37,20 @@ export async function resize(
 	}
 
 	target.style.height = `${scroll_height}px`;
+	update_scrollbar_visibility(target);
+}
+
+function update_scrollbar_visibility(
+	textarea: HTMLTextAreaElement | HTMLInputElement
+): void {
+	const content_height = textarea.scrollHeight;
+	const visible_height = textarea.clientHeight;
+	const line_height = parseFloat(window.getComputedStyle(textarea).lineHeight);
+	if (content_height > visible_height + line_height) {
+		textarea.style.overflowY = "scroll";
+	} else {
+		textarea.style.overflowY = "hidden";
+	}
 }
 
 export function text_area_resize(
@@ -44,7 +58,7 @@ export function text_area_resize(
 	_value: Value
 ): any | undefined {
 	if (_value.lines === _value.max_lines) return;
-	_el.style.overflowY = "scroll";
+	update_scrollbar_visibility(_el);
 
 	function handle_input(event: Event): void {
 		resize(event.target as HTMLTextAreaElement, _value.lines, _value.max_lines);

package/types.ts

@@ -1,6 +1,6 @@
 import type { FileData } from "@gradio/client";
 import type { SelectData } from "@gradio/utils";
-import type { LoadingStatus } from "@gradio/statustracker";
+import type { ILoadingStatus as LoadingStatus } from "@gradio/statustracker";
 import type { InputHTMLAttributes } from "./shared/types";
 import type { WaveformOptions } from "js/audio/shared/types";