@gradio/multimodaltextbox 0.12.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @gradio/multimodaltextbox
 
+## 0.14.0
+
+### Features
+
+- [#13543](https://github.com/gradio-app/gradio/pull/13543) [`0533483`](https://github.com/gradio-app/gradio/commit/0533483bccdee38f334a598f18297e8c02966343) - Migrate Image components to Svelte 5.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.15.1
+- @gradio/icons@0.16.0
+- @gradio/atoms@0.26.0
+- @gradio/image@0.28.0
+- @gradio/video@0.22.0
+- @gradio/client@2.3.1
+- @gradio/upload@0.18.1
+- @gradio/audio@0.24.1
+
+## 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

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,

package/dist/shared/utils.js

@@ -28,8 +28,12 @@ export async function resize(target, lines, max_lines) {
 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) {
+    const computed_style = window.getComputedStyle(textarea);
+    const line_height = parseFloat(computed_style.lineHeight);
+    const threshold = Number.isFinite(line_height)
+        ? line_height
+        : parseFloat(computed_style.fontSize) * 1.2;
+    if (content_height > visible_height + threshold) {
         textarea.style.overflowY = "scroll";
     }
     else {

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.12.0",
+  "version": "0.14.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -22,15 +22,15 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/icons": "^0.15.1",
-    "@gradio/atoms": "^0.24.0",
-    "@gradio/utils": "^0.12.2",
-    "@gradio/statustracker": "^0.14.1",
-    "@gradio/upload": "^0.17.10",
-    "@gradio/client": "^2.2.2",
-    "@gradio/video": "^0.20.9",
-    "@gradio/image": "^0.26.3",
-    "@gradio/audio": "^0.23.4"
+    "@gradio/atoms": "^0.26.0",
+    "@gradio/icons": "^0.16.0",
+    "@gradio/statustracker": "^0.15.1",
+    "@gradio/utils": "^0.13.0",
+    "@gradio/image": "^0.28.0",
+    "@gradio/video": "^0.22.0",
+    "@gradio/upload": "^0.18.1",
+    "@gradio/client": "^2.3.1",
+    "@gradio/audio": "^0.24.1"
   },
   "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,

package/shared/utils.ts

@@ -45,8 +45,12 @@ function update_scrollbar_visibility(
 ): 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) {
+	const computed_style = window.getComputedStyle(textarea);
+	const line_height = parseFloat(computed_style.lineHeight);
+	const threshold = Number.isFinite(line_height)
+		? line_height
+		: parseFloat(computed_style.fontSize) * 1.2;
+	if (content_height > visible_height + threshold) {
 		textarea.style.overflowY = "scroll";
 	} else {
 		textarea.style.overflowY = "hidden";

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";