@gradio/multimodaltextbox 0.11.4 → 0.11.5

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.
Files changed (14) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/Example.svelte +14 -10
  3. package/Index.svelte +17 -19
  4. package/dist/Example.svelte +14 -10
  5. package/dist/Example.svelte.d.ts +4 -18
  6. package/dist/Index.svelte +17 -19
  7. package/dist/shared/MultimodalTextbox.svelte +191 -152
  8. package/dist/shared/MultimodalTextbox.svelte.d.ts +18 -36
  9. package/dist/shared/types.d.ts +1 -1
  10. package/dist/types.d.ts +0 -2
  11. package/package.json +8 -8
  12. package/shared/MultimodalTextbox.svelte +191 -152
  13. package/shared/types.ts +1 -1
  14. package/types.ts +0 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @gradio/multimodaltextbox
2
2
 
3
+ ## 0.11.5
4
+
5
+ ### Fixes
6
+
7
+ - [#12789](https://github.com/gradio-app/gradio/pull/12789) [`af5e86f`](https://github.com/gradio-app/gradio/commit/af5e86f10d95cc71ee4cb950e455dbdc8e138983) - Migrate gr.MultimodalTextbox. Thanks @hannahblair!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/atoms@0.21.0
12
+ - @gradio/client@2.0.4
13
+ - @gradio/statustracker@0.12.3
14
+ - @gradio/image@0.25.2
15
+ - @gradio/upload@0.17.5
16
+ - @gradio/video@0.20.2
17
+ - @gradio/audio@0.22.2
18
+
3
19
  ## 0.11.4
4
20
 
5
21
  ### Fixes
package/Example.svelte CHANGED
@@ -1,17 +1,19 @@
1
1
  <script lang="ts">
2
- import { onMount } from "svelte";
3
2
  import { Image } from "@gradio/image/shared";
4
3
  import { Video } from "@gradio/video/shared";
5
4
  import type { FileData } from "@gradio/client";
6
5
 
7
- export let value: { text: string; files: FileData[] } = {
8
- text: "",
9
- files: []
10
- };
11
- export let type: "gallery" | "table";
12
- export let selected = false;
6
+ let {
7
+ value = { text: "", files: [] },
8
+ type,
9
+ selected = false
10
+ }: {
11
+ value?: { text: string; files: FileData[] };
12
+ type: "gallery" | "table";
13
+ selected?: boolean;
14
+ } = $props();
13
15
 
14
- let size: number;
16
+ let size = $state<number>(0);
15
17
  let el: HTMLDivElement;
16
18
 
17
19
  function set_styles(element: HTMLElement, el_width: number): void {
@@ -22,8 +24,10 @@
22
24
  element.style.whiteSpace = "unset";
23
25
  }
24
26
 
25
- onMount(() => {
26
- set_styles(el, size);
27
+ $effect(() => {
28
+ if (el && size) {
29
+ set_styles(el, size);
30
+ }
27
31
  });
28
32
  </script>
29
33
 
package/Index.svelte CHANGED
@@ -17,7 +17,7 @@
17
17
  MultimodalTextboxEvents
18
18
  } from "./types";
19
19
 
20
- let upload_promise = $state<Promise<any>>();
20
+ let upload_promise = $state<Promise<any> | null>(null);
21
21
 
22
22
  class MultimodalTextboxGradio extends Gradio<
23
23
  MultimodalTextboxEvents,
@@ -37,7 +37,7 @@
37
37
  let props = $props();
38
38
  const gradio = new MultimodalTextboxGradio(props);
39
39
 
40
- const value = $derived(gradio.props.value || { text: "", files: [] });
40
+ gradio.props.value = gradio.props.value ?? { text: "", files: [] };
41
41
 
42
42
  let dragging = $state<boolean>(false);
43
43
  let active_source = $state<"microphone" | null>(null);
@@ -135,7 +135,7 @@
135
135
 
136
136
  <MultimodalTextbox
137
137
  bind:upload_promise
138
- {value}
138
+ bind:value={gradio.props.value}
139
139
  value_is_output
140
140
  bind:dragging
141
141
  bind:active_source
@@ -160,24 +160,22 @@
160
160
  file_count={gradio.props.file_count}
161
161
  {sources_string}
162
162
  max_file_size={gradio.shared.max_file_size}
163
- on:change={(e) => (
164
- (gradio.props.value = e.detail),
165
- gradio.dispatch("change", gradio.props.value)
166
- )}
167
- on:input={() => gradio.dispatch("input")}
168
- on:submit={() => gradio.dispatch("submit")}
169
- on:stop={() => gradio.dispatch("stop")}
170
- on:blur={() => gradio.dispatch("blur")}
171
- on:select={(e) => gradio.dispatch("select", e.detail)}
172
- on:focus={() => gradio.dispatch("focus")}
173
- on:error={({ detail }) => {
163
+ onchange={(e) => {
164
+ gradio.props.value = e;
165
+ gradio.dispatch("change", gradio.props.value);
166
+ }}
167
+ oninput={() => gradio.dispatch("input")}
168
+ onsubmit={() => gradio.dispatch("submit")}
169
+ onstop={() => gradio.dispatch("stop")}
170
+ onblur={() => gradio.dispatch("blur")}
171
+ onselect={(e) => gradio.dispatch("select", e)}
172
+ onfocus={() => gradio.dispatch("focus")}
173
+ onerror={(detail) => {
174
174
  gradio.dispatch("error", detail);
175
175
  }}
176
- on:start_recording={() => gradio.dispatch("start_recording")}
177
- on:pause_recording={() => gradio.dispatch("pause_recording")}
178
- on:stop_recording={() => gradio.dispatch("stop_recording")}
179
- on:upload={(e) => gradio.dispatch("upload", e.detail)}
180
- on:clear={() => gradio.dispatch("clear")}
176
+ onstop_recording={() => gradio.dispatch("stop_recording")}
177
+ onupload={(e) => gradio.dispatch("upload", e)}
178
+ onclear={() => gradio.dispatch("clear")}
181
179
  disabled={!gradio.shared.interactive}
182
180
  upload={upload_fn}
183
181
  stream_handler={stream_handler_fn}
package/dist/Example.svelte CHANGED
@@ -1,17 +1,19 @@
1
1
  <script lang="ts">
2
- import { onMount } from "svelte";
3
2
  import { Image } from "@gradio/image/shared";
4
3
  import { Video } from "@gradio/video/shared";
5
4
  import type { FileData } from "@gradio/client";
6
5
 
7
- export let value: { text: string; files: FileData[] } = {
8
- text: "",
9
- files: []
10
- };
11
- export let type: "gallery" | "table";
12
- export let selected = false;
6
+ let {
7
+ value = { text: "", files: [] },
8
+ type,
9
+ selected = false
10
+ }: {
11
+ value?: { text: string; files: FileData[] };
12
+ type: "gallery" | "table";
13
+ selected?: boolean;
14
+ } = $props();
13
15
 
14
- let size: number;
16
+ let size = $state<number>(0);
15
17
  let el: HTMLDivElement;
16
18
 
17
19
  function set_styles(element: HTMLElement, el_width: number): void {
@@ -22,8 +24,10 @@
22
24
  element.style.whiteSpace = "unset";
23
25
  }
24
26
 
25
- onMount(() => {
26
- set_styles(el, size);
27
+ $effect(() => {
28
+ if (el && size) {
29
+ set_styles(el, size);
30
+ }
27
31
  });
28
32
  </script>
29
33
 
package/dist/Example.svelte.d.ts CHANGED
@@ -1,26 +1,12 @@
1
1
  import type { FileData } from "@gradio/client";
2
- interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
3
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
- $$bindings?: Bindings;
5
- } & Exports;
6
- (internal: unknown, props: Props & {
7
- $$events?: Events;
8
- $$slots?: Slots;
9
- }): Exports & {
10
- $set?: any;
11
- $on?: any;
12
- };
13
- z_$$bindings?: Bindings;
14
- }
15
- declare const Example: $$__sveltets_2_IsomorphicComponent<{
2
+ type $$ComponentProps = {
16
3
  value?: {
17
4
  text: string;
18
5
  files: FileData[];
19
6
  };
20
7
  type: "gallery" | "table";
21
8
  selected?: boolean;
22
- }, {
23
- [evt: string]: CustomEvent<any>;
24
- }, {}, {}, string>;
25
- type Example = InstanceType<typeof Example>;
9
+ };
10
+ declare const Example: import("svelte").Component<$$ComponentProps, {}, "">;
11
+ type Example = ReturnType<typeof Example>;
26
12
  export default Example;
package/dist/Index.svelte CHANGED
@@ -17,7 +17,7 @@
17
17
  MultimodalTextboxEvents
18
18
  } from "./types";
19
19
 
20
- let upload_promise = $state<Promise<any>>();
20
+ let upload_promise = $state<Promise<any> | null>(null);
21
21
 
22
22
  class MultimodalTextboxGradio extends Gradio<
23
23
  MultimodalTextboxEvents,
@@ -37,7 +37,7 @@
37
37
  let props = $props();
38
38
  const gradio = new MultimodalTextboxGradio(props);
39
39
 
40
- const value = $derived(gradio.props.value || { text: "", files: [] });
40
+ gradio.props.value = gradio.props.value ?? { text: "", files: [] };
41
41
 
42
42
  let dragging = $state<boolean>(false);
43
43
  let active_source = $state<"microphone" | null>(null);
@@ -135,7 +135,7 @@
135
135
 
136
136
  <MultimodalTextbox
137
137
  bind:upload_promise
138
- {value}
138
+ bind:value={gradio.props.value}
139
139
  value_is_output
140
140
  bind:dragging
141
141
  bind:active_source
@@ -160,24 +160,22 @@
160
160
  file_count={gradio.props.file_count}
161
161
  {sources_string}
162
162
  max_file_size={gradio.shared.max_file_size}
163
- on:change={(e) => (
164
- (gradio.props.value = e.detail),
165
- gradio.dispatch("change", gradio.props.value)
166
- )}
167
- on:input={() => gradio.dispatch("input")}
168
- on:submit={() => gradio.dispatch("submit")}
169
- on:stop={() => gradio.dispatch("stop")}
170
- on:blur={() => gradio.dispatch("blur")}
171
- on:select={(e) => gradio.dispatch("select", e.detail)}
172
- on:focus={() => gradio.dispatch("focus")}
173
- on:error={({ detail }) => {
163
+ onchange={(e) => {
164
+ gradio.props.value = e;
165
+ gradio.dispatch("change", gradio.props.value);
166
+ }}
167
+ oninput={() => gradio.dispatch("input")}
168
+ onsubmit={() => gradio.dispatch("submit")}
169
+ onstop={() => gradio.dispatch("stop")}
170
+ onblur={() => gradio.dispatch("blur")}
171
+ onselect={(e) => gradio.dispatch("select", e)}
172
+ onfocus={() => gradio.dispatch("focus")}
173
+ onerror={(detail) => {
174
174
  gradio.dispatch("error", detail);
175
175
  }}
176
- on:start_recording={() => gradio.dispatch("start_recording")}
177
- on:pause_recording={() => gradio.dispatch("pause_recording")}
178
- on:stop_recording={() => gradio.dispatch("stop_recording")}
179
- on:upload={(e) => gradio.dispatch("upload", e.detail)}
180
- on:clear={() => gradio.dispatch("clear")}
176
+ onstop_recording={() => gradio.dispatch("stop_recording")}
177
+ onupload={(e) => gradio.dispatch("upload", e)}
178
+ onclear={() => gradio.dispatch("clear")}
181
179
  disabled={!gradio.shared.interactive}
182
180
  upload={upload_fn}
183
181
  stream_handler={stream_handler_fn}