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

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