https://rohitdiwane-audio.hf.space/assets/Index-DL_2b7d7.js

1import { p as prop, s as slot, d as bind_this, b as set_class, a as set_attribute, f as set_style, g as spread_props, i as if_block, r as rest_props } from './i18n-CMo5lpzy.js';
2import { aj as delegate, R as push, aa as onMount, x as set, w as get, y as user_effect, V as child, X as sibling, Y as reset, t as template_effect, a as append, T as pop, u as state, a5 as user_derived, W as from_html, S as first_child, a6 as comment } from './index-BvBk1Iap.js';
3import { G as Gradio } from './utils.svelte-CYLB_jIA.js';
4import { S as Static } from './index-Lz7fsHFt.js';
5import './StreamingBar.svelte_svelte_type_style_lang-CdFIGsJa.js';
6import { B as BaseColumn } from './Index.svelte_svelte_type_style_lang-C97CbKPo.js';
7import './clone-DaB-S2nH.js';
8import './ScrollFade.svelte_svelte_type_style_lang-Xm-PLg9E.js';
9import './snippet-Bl5YVoCg.js';
10import './Clear-Dgs5UhTO.js';
11import './html-CdUEtR5E.js';
12import './index-C7e-J7CF.js';
13
14var root$1 = from_html(`<div><button class="toggle-button svelte-1uruprb" aria-label="Toggle Sidebar"><div class="chevron svelte-1uruprb"><span class="chevron-left svelte-1uruprb"></span></div></button> <div class="sidebar-content svelte-1uruprb"><!></div></div>`);
15
16function Sidebar($$anchor, $$props) {
17	push($$props, true);
18
19	let open = prop($$props, 'open', 15, true),
20		position = prop($$props, 'position', 11, "left"),
21		elem_classes = prop($$props, 'elem_classes', 19, () => []),
22		elem_id = prop($$props, 'elem_id', 3, ""),
23		onexpand = prop($$props, 'onexpand', 3, () => {}),
24		oncollapse = prop($$props, 'oncollapse', 3, () => {});
25
26	// Using a temporary variable to animate the sidebar opening at the start
27	let mounted = state(false);
28
29	let _open = state(false);
30	let sidebar_div;
31	let overlap_amount = state(0);
32	let width_css = user_derived(() => typeof $$props.width === "number" ? `${$$props.width}px` : $$props.width);
33	let prefersReducedMotion = state(false);
34
35	// Check if the sidebar overlaps with the main content
36	function check_overlap() {
37		if (!sidebar_div.closest(".wrap")) return;
38
39		const parent_rect = sidebar_div.closest(".wrap")?.getBoundingClientRect();
40
41		if (!parent_rect) return;
42
43		const sidebar_rect = sidebar_div.getBoundingClientRect();
44
45		const available_space = position() === "left"
46			? parent_rect.left
47			: window.innerWidth - parent_rect.right;
48
49		set(overlap_amount, Math.max(0, sidebar_rect.width - available_space + 30), true);
50	}
51
52	onMount(() => {
53		sidebar_div.closest(".wrap")?.classList.add("sidebar-parent");
54		check_overlap();
55		window.addEventListener("resize", check_overlap);
56
57		const update_parent_overlap = () => {
58			document.documentElement.style.setProperty("--overlap-amount", `${get(overlap_amount)}px`);
59		};
60
61		update_parent_overlap();
62		set(mounted, true);
63
64		const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
65
66		set(prefersReducedMotion, mediaQuery.matches, true);
67
68		const updateMotionPreference = (e) => {
69			set(prefersReducedMotion, e.matches, true);
70		};
71
72		mediaQuery.addEventListener("change", updateMotionPreference);
73
74		return () => {
75			window.removeEventListener("resize", check_overlap);
76			mediaQuery.removeEventListener("change", updateMotionPreference);
77		};
78	});
79
80	// We need to wait for the component to be mounted before we can set the open state
81	// so that it animates correctly.
82	user_effect(() => {
83		if (get(mounted)) set(_open, open(), true);
84	});
85
86	let _elem_classes = user_derived(() => elem_classes()?.join(" ") || "");
87	var div = root$1();
88	let classes;
89	var button = child(div);
90
91	button.__click = () => {
92		set(_open, !get(_open));
93		open(get(_open));
94
95		if (get(_open)) {
96			onexpand()?.();
97		} else {
98			oncollapse()?.();
99		}
100	};
101
102	var div_1 = sibling(button, 2);
103	var node = child(div_1);
104
105	slot(node, $$props, 'default', {});
106	reset(div_1);
107	reset(div);
108	bind_this(div, ($$value) => sidebar_div = $$value, () => sidebar_div);
109
110	template_effect(() => {
111		classes = set_class(div, 1, `sidebar ${get(_elem_classes) ?? ''}`, 'svelte-1uruprb', classes, {
112			open: get(_open),
113			right: position() === "right",
114			'reduce-motion': get(prefersReducedMotion)
115		});
116
117		set_attribute(div, 'id', elem_id());
118		set_style(div, `width: ${get(width_css) ?? ''}; ${position() ?? ''}: calc(${get(width_css) ?? ''} * -1)`);
119	});
120
121	append($$anchor, div);
122	pop();
123}
124
125delegate(['click']);
126
127var root = from_html(`<!> <!>`, 1);
128
129function Index($$anchor, $$props) {
130	push($$props, true);
131
132	const props = rest_props($$props, ['$$slots', '$$events', '$$legacy']);
133	const gradio = new Gradio(props);
134	var fragment = root();
135	var node = first_child(fragment);
136
137	Static(node, spread_props(
138		{
139			get autoscroll() {
140				return gradio.shared.autoscroll;
141			},
142
143			get i18n() {
144				return gradio.i18n;
145			}
146		},
147		() => gradio.shared.loading_status
148	));
149

150	var node_1 = sibling(node, 2);
151
152	{
153		var consequent = ($$anchor) => {
154			Sidebar($$anchor, {
155				get width() {
156					return gradio.props.width;
157				},
158				onexpand: () => gradio.dispatch("expand"),
159				oncollapse: () => gradio.dispatch("collapse"),
160				get elem_classes() {
161					return gradio.shared.elem_classes;
162				},
163
164				get elem_id() {
165					return gradio.shared.elem_id;
166				},
167
168				get open() {
169					return gradio.props.open;
170				},
171
172				set open($$value) {
173					gradio.props.open = $$value;
174				},
175
176				get position() {
177					return gradio.props.position;
178				},
179
180				set position($$value) {
181					gradio.props.position = $$value;
182				},
183
184				children: ($$anchor, $$slotProps) => {
185					BaseColumn($$anchor, {
186						children: ($$anchor, $$slotProps) => {
187							var fragment_3 = comment();
188							var node_2 = first_child(fragment_3);
189
190							slot(node_2, $$props, 'default', {});
191							append($$anchor, fragment_3);
192						},
193						$$slots: { default: true }
194					});
195				},
196				$$slots: { default: true }
197			});
198		};
199
200		if_block(node_1, ($$render) => {
201			if (gradio.shared.visible) $$render(consequent);
202		});
203	}
204
205	append($$anchor, fragment);
206	pop();
207}
208
209export { Index as default };
210//# sourceMappingURL=Index-DL_2b7d7.js.map