1import { p as prop, e as init, a as set_attribute, i as if_block, b as set_class, k as each, d as bind_this, f as set_style, u as index, r as rest_props, g as spread_props } from './i18n-CMo5lpzy.js'; 2import { R as push, a4 as createEventDispatcher, V as child, X as sibling, Y as reset, t as template_effect, a0 as set_text, Z as event, a as append, T as pop, U as flushSync, W as from_html, u as state, v as proxy, y as user_effect, x as set, w as get, aa as onMount, a7 as text, aw as $window, a5 as user_derived, a6 as comment, S as first_child, a8 as next, ak as remove_textarea_child, M as tick } from './index-BvBk1Iap.js'; 3import { G as Gradio } from './utils.svelte-CYLB_jIA.js'; 4import { t as transition, f as fade } from './StreamingBar.svelte_svelte_type_style_lang-CdFIGsJa.js'; 5import { b as bind_value } from './input-C317uaXR.js'; 6import { I as IconButton } from './ScrollFade.svelte_svelte_type_style_lang-Xm-PLg9E.js'; 7import { B as BlockTitle } from './BlockTitle-7XQ-8ENg.js'; 8import { C as Check } from './Check-BlnBgjLT.js'; 9import { C as Copy } from './Copy-DFFray7x.js'; 10import { P as Plus } from './Plus-CFoCxzu1.js'; 11import { S as Send } from './Send-Ee555fP_.js'; 12import { T as Trash } from './Trash-CGTLExrZ.js'; 13import { I as IconButtonWrapper } from './IconButtonWrapper-Ba0GidgU.js'; 14import { b as Dropdown, D as DropdownOptions } from './Dropdown-DUCTuRQm.js'; 15/* empty css */ 16import { B as Block } from './Block-Bx3BikCN.js'; 17import { S as Static } from './index-Lz7fsHFt.js'; 18export { default as BaseExample } from './Example-BIlLUrfo.js'; 19import './clone-DaB-S2nH.js'; 20import './html-CdUEtR5E.js'; 21import './index-C7e-J7CF.js'; 22import './snippet-Bl5YVoCg.js'; 23import './Info-BrkJhX6_.js'; 24import './window-BGXjFJtG.js'; 25import './DropdownArrow-Dw1NZKCM.js'; 26import './Clear-Dgs5UhTO.js'; 27 28var root$1 = from_html(`<div class="s s--slider svelte-1io85vl" style="font-size:var(--font-size-sm)px"><button role="switch" class="svelte-1io85vl"></button> <span> </span></div>`); 29 30function Switch($$anchor, $$props) { 31 push($$props, false); 32 33 // based on https://svelte.dev/playground/d65a4e9f0ae74d1eb1b08d13e428af32?version=3.35.0 34 let label = prop($$props, 'label', 12); 35 36 let checked = prop($$props, 'checked', 12, false); 37 let disabled = prop($$props, 'disabled', 12, false); 38 const dispatch = createEventDispatcher(); 39 40 // @ts-ignore 41 function handleClick(event) { 42 const target = event.target; 43 44 // @ts-ignore 45 const state = target.getAttribute("aria-checked"); 46 47 checked(state === "true" ? false : true); 48 dispatch("click", { checked: checked() }); 49 } 50 51 var $$exports = { 52 get label() { 53 return label(); 54 }, 55 56 set label($$value) { 57 label($$value); 58 flushSync(); 59 }, 60 61 get checked() { 62 return checked(); 63 }, 64 65 set checked($$value) { 66 checked($$value); 67 flushSync(); 68 }, 69 70 get disabled() { 71 return disabled(); 72 }, 73 74 set disabled($$value) { 75 disabled($$value); 76 flushSync(); 77 } 78 }; 79 80 init(); 81 82 var div = root$1(); 83 var button = child(div); 84 var span = sibling(button, 2); 85 var text = child(span, true); 86 87 reset(span); 88 reset(div); 89 90 template_effect(() => { 91 set_attribute(button, 'aria-checked', checked()); 92 button.disabled = disabled(); 93 set_text(text, label()); 94 }); 95 96 event('click', button, handleClick); 97 append($$anchor, div); 98 99 return pop($$exports); 100} 101 102var root_5 = from_html(`<div><!></div>`); 103var root_7 = from_html(`<div class="loading-overlay svelte-1p54cvv"><div class="loading-spinner svelte-1p54cvv"></div> <div class="loading-text svelte-1p54cvv">Converting to dialogue format...</div></div>`); 104var root_9 = from_html(`<textarea rows="1" readonly="" class="svelte-1p54cvv"></textarea>`); 105var root_11 = from_html(`<div id="tag-menu" class="tag-menu svelte-1p54cvv"><!></div>`); 106var root_12 = from_html(`<div><button class="add-button svelte-1p54cvv" aria-label="Add new line"><!></button></div>`); 107var root_8 = from_html(`<div class="dialogue-line svelte-1p54cvv"><div class="speaker-column svelte-1p54cvv" role="button" tabindex="0"><!></div> <div class="text-column svelte-1p54cvv"><div class="input-container svelte-1p54cvv"><textarea rows="1" class="svelte-1p54cvv"></textarea> <!></div></div> <!> <div><button class="delete-button svelte-1p54cvv" aria-label="Remove current line"><!></button></div></div>`); 108var root_6 = from_html(`<div><!> <!></div>`);
109var root_15 = from_html(`<div class="loading-overlay svelte-1p54cvv"><div class="loading-spinner svelte-1p54cvv"></div> <div class="loading-text svelte-1p54cvv">Converting to plain text...</div></div>`); 110var root_16 = from_html(`<div id="tag-menu" class="tag-menu-plain-text svelte-1p54cvv"><!></div>`); 111var root_14 = from_html(`<div><!> <textarea data-testid="textbox" class="svelte-1p54cvv"></textarea> <!></div>`); 112var root_17 = from_html(`<div class="submit-container svelte-1p54cvv"><button class="submit-button svelte-1p54cvv"><!></button></div>`); 113var root = from_html(`<div><!> <!> <!> <!> <!></div>`); 114 115function Dialogue($$anchor, $$props) { 116 push($$props, true); 117 const gradio = $$props.gradio; 118 let checked = state(false); 119 let disabled = user_derived(() => !gradio.shared.interactive); 120 let dialogue_lines = state(proxy([])); 121 122 user_effect(() => { 123 if (gradio.props.value && gradio.props.value.length && typeof gradio.props.value !== "string") { 124 set(dialogue_lines, [...gradio.props.value], true); 125 } else if (gradio.props.value && typeof gradio.props.value !== "string") { 126 set( 127 dialogue_lines, 128 [ 129 { 130 speaker: `${gradio.props.speakers.length ? gradio.props.speakers[0] : ""}`, 131 text: "" 132 } 133 ], 134 true 135 ); 136 } else if (typeof gradio.props.value === "string") { 137 set(textbox_value, gradio.props.value, true); 138 set(checked, true); 139 } 140 }); 141 142 let buttons = user_derived(() => gradio.props.buttons || ["copy"]); 143 144 let on_custom_button_click = (id) => { 145 gradio.dispatch("custom_button_click", { id }); 146 }; 147 148 let old_value = state(proxy(gradio.props.value)); 149 150 user_effect(() => { 151 if (get(old_value) != gradio.props.value) { 152 set(old_value, gradio.props.value, true); 153 gradio.dispatch("change"); 154 } 155 }); 156 157 let dialogue_container_element; 158 let showTagMenu = state(false); 159 let currentLineIndex = state(-1); 160 let selectedOptionIndex = state(0); 161 let filtered_tags = state(proxy([])); 162 let input_elements = proxy([]); 163 let textarea_element; 164 let offset_from_top = state(0); 165 let copied = state(false); 166 let timer; 167 let textbox_value = state(""); 168 let hoveredSpeaker = state(null); 169 let is_unformatting = state(false); 170 let is_formatting = state(false); 171 172 const defaultColorNames = [ 173 "red", 174 "green", 175 "blue", 176 "yellow", 177 "purple", 178 "teal", 179 "orange", 180 "cyan", 181 "lime", 182 "pink" 183 ]; 184 185 const colorNameToHex = { 186 red: "rgba(254, 202, 202, 0.7)", 187 green: "rgba(209, 250, 229, 0.7)", 188 blue: "rgba(219, 234, 254, 0.7)", 189 yellow: "rgba(254, 243, 199, 0.7)", 190 purple: "rgba(233, 213, 255, 0.7)", 191 teal: "rgba(204, 251, 241, 0.7)", 192 orange: "rgba(254, 215, 170, 0.7)", 193 cyan: "rgba(207, 250, 254, 0.7)", 194 lime: "rgba(217, 249, 157, 0.7)", 195 pink: "rgba(252, 231, 243, 0.7)" 196 }; 197 198 let speakerColors = user_derived(() => { 199 let _speakerColors = {}; 200 201 if (gradio.props.color_map) { 202 _speakerColors = { ...gradio.props.color_map }; 203 } else { 204 _speakerColors = {}; 205 206 gradio.props.speakers.forEach((speaker, index) => { 207 const colorName = defaultColorNames[index % defaultColorNames.length]; 208 209 _speakerColors[speaker] = colorNameToHex[colorName]; 210 }); 211 } 212 213 return _speakerColors; 214 }); 215 216 function add_line(index) { 217 const newSpeaker = gradio.props.speakers.length > 0 ? gradio.props.speakers[0] : ""; 218 219 set( 220 dialogue_lines, 221 [ 222 ...get(dialogue_lines).slice(0, index + 1), 223 { speaker: newSpeaker, text: "" }, 224 ...get(dialogue_lines).slice(index + 1) 225 ], 226 true 227 ); 228 229 tick().then(() => { 230 if (input_elements[index + 1]) { 231 input_elements[index + 1].focus(); 232 } 233 }); 234 235 gradio.props.value = [...get(dialogue_lines)]; 236 } 237 238 function delete_line(index) { 239 set( 240 dialogue_lines, 241 [ 242 ...get(dialogue_lines).slice(0, index), 243 ...get(dialogue_lines).slice(index + 1) 244 ], 245 true 246 ); 247 248 gradio.props.value = [...get(dialogue_lines)]; 249 } 250 251 function update_line(index, key, value) { 252 get(dialogue_lines)[index][key] = value; 253 set(dialogue_lines, [...get(dialogue_lines)], true); 254 gradio.props.value = [...get(dialogue_lines)]; 255 } 256 257 function handle_input(event, index) { 258 const input = event.target || HTMLTextAreaElement; 259 260 if (input && !input_elements[index]) { 261 input_elements[index] = input; 262 } 263 264 const cursor_position = input.selectionStart || 0; 265 const text = input.value; 266 let show_menu = false;
267 let position_reference_index = -1; 268 269 if (text[cursor_position - 1] === ":") { 270 set(currentLineIndex, index, true); 271 position_reference_index = cursor_position; 272 273 const search_text = get_tag_search_text(text, cursor_position); 274 275 set(filtered_tags, gradio.props.tags.filter((tag) => search_text === "" || tag.toLowerCase().includes(search_text.toLowerCase())), true); 276 show_menu = get(filtered_tags).length > 0; 277 set(selectedOptionIndex, 0); 278 } else { 279 const lastColonIndex = text.lastIndexOf(":", cursor_position - 1); 280 281 if (lastColonIndex >= 0 && !text.substring(lastColonIndex + 1, cursor_position).includes(" ")) { 282 set(currentLineIndex, index, true); 283 position_reference_index = lastColonIndex + 1; // Position menu relative to the start of the potential tag 284 285 const searchText = text.substring(lastColonIndex + 1, cursor_position); 286 287 set(filtered_tags, gradio.props.tags.filter((tag) => searchText === "" || tag.toLowerCase().includes(searchText.toLowerCase())), true); 288 show_menu = get(filtered_tags).length > 0; 289 set(selectedOptionIndex, 0); 290 } 291 } 292 293 if (show_menu && position_reference_index !== -1) { 294 set(showTagMenu, true); 295 296 const input_rect = input.getBoundingClientRect(); 297 298 // Position menu below the current input by calculating the distance from the top of the container 299 // and use 1.5 times the input height. 300 if (dialogue_container_element) { 301 const container_rect = dialogue_container_element.getBoundingClientRect(); 302 303 set(offset_from_top, container_rect.top + input_rect.height * (index + 1.5)); 304 } 305 } else { 306 set(showTagMenu, false); 307 } 308 309 gradio.dispatch("input"); 310 } 311 312 function get_tag_search_text(text, cursorPosition) { 313 const lastColonIndex = text.lastIndexOf(":", cursorPosition - 1); 314 315 if (lastColonIndex >= 0) { 316 return text.substring(lastColonIndex + 1, cursorPosition); 317 } 318 319 return ""; 320 } 321 322 async function insert_selected_tag() { 323 const tag = get(filtered_tags)[get(selectedOptionIndex)]; 324 325 if (tag) { 326 let text; 327 let currentInput; 328 329 if (get(checked)) { 330 currentInput = textarea_element; 331 text = get(textbox_value); 332 } else { 333 currentInput = input_elements[get(currentLineIndex)]; 334 text = get(dialogue_lines)[get(currentLineIndex)].text; 335 } 336 337 const cursorPosition = currentInput?.selectionStart || 0; 338 const lastColonIndex = text.lastIndexOf(":", cursorPosition - 1); 339 340 if (lastColonIndex >= 0) { 341 const beforeColon = text.substring(0, lastColonIndex); 342 const afterCursor = text.substring(cursorPosition); 343 344 if (get(checked)) { 345 // plain text mode: don't filter speaker tags 346 const newText = `${beforeColon}${tag} ${afterCursor}`; 347 348 set(textbox_value, newText); 349 350 if (gradio.props.speakers.length === 0) { 351 gradio.props.value = newText; 352 } else { 353 gradio.props.value = await gradio.shared.server.unformat({ text: newText }); 354 } 355 356 tick().then(() => { 357 if (textarea_element) { 358 const newCursorPosition = beforeColon.length + tag.length + 1; 359 360 textarea_element.setSelectionRange(newCursorPosition, newCursorPosition); 361 textarea_element.focus(); 362 } 363 }); 364 } else { 365 // dialogue line mode 366 const filteredBeforeColon = beforeColon.replace(/\[S\d+\]/g, "").trim(); 367 368 const newText = `${filteredBeforeColon}${tag} ${afterCursor}`; 369 370 update_line(get(currentLineIndex), "text", newText); 371 372 tick().then(() => { 373 const updatedInput = input_elements[get(currentLineIndex)]; 374 375 if (updatedInput) { 376 const newCursorPosition = filteredBeforeColon.length + tag.length + 1; 377 378 updatedInput.setSelectionRange(newCursorPosition, newCursorPosition); 379 updatedInput.focus(); 380 } 381 }); 382 } 383 } 384 385 set(showTagMenu, false); 386 set(selectedOptionIndex, 0); 387 } 388 } 389 390 async function insert_tag(index) { 391 index = parseInt(index); 392 393 const tag = gradio.props.tags[index]; 394 395 if (tag) { 396 let text; 397 let currentInput; 398 399 if (get(checked)) { 400 currentInput = textarea_element; 401 text = get(textbox_value); 402 } else { 403 currentInput = input_elements[get(currentLineIndex)]; 404 text = get(dialogue_lines)[get(currentLineIndex)].text; 405 } 406 407 const cursorPosition = currentInput?.selectionStart || 0; 408 const lastColonIndex = text.lastIndexOf(":", cursorPosition - 1); 409 410 if (lastColonIndex >= 0) { 411 const beforeColon = text.substring(0, lastColonIndex);
412 const afterCursor = text.substring(cursorPosition); 413 414 if (get(checked)) { 415 // plain text mode: don't filter speaker tags 416 const newText = `${beforeColon}${tag} ${afterCursor}`; 417 418 set(textbox_value, newText); 419 420 if (gradio.props.speakers.length === 0) { 421 gradio.props.value = newText; 422 } else { 423 gradio.props.value = await gradio.shared.server.unformat({ text: newText }); 424 } 425 426 tick().then(() => { 427 if (textarea_element) { 428 const newCursorPosition = beforeColon.length + tag.length + 1; 429 430 textarea_element.setSelectionRange(newCursorPosition, newCursorPosition); 431 textarea_element.focus(); 432 } 433 }); 434 } else { 435 // dialogue line mode 436 const filteredBeforeColon = beforeColon.replace(/\[S\d+\]/g, "").trim(); 437 438 const newText = `${filteredBeforeColon}${tag} ${afterCursor}`; 439 440 update_line(get(currentLineIndex), "text", newText); 441 442 tick().then(() => { 443 const updatedInput = input_elements[get(currentLineIndex)]; 444 445 if (updatedInput) { 446 const newCursorPosition = filteredBeforeColon.length + tag.length + 1; 447 448 updatedInput.setSelectionRange(newCursorPosition, newCursorPosition); 449 updatedInput.focus(); 450 } 451 }); 452 } 453 } 454 455 set(showTagMenu, false); 456 set(selectedOptionIndex, 0); 457 } 458 } 459 460 function handle_click_outside(event) { 461 if (get(showTagMenu)) { 462 const target = event.target; 463 const tagMenu = document.getElementById("tag-menu"); 464 465 if (tagMenu && !tagMenu.contains(target)) { 466 set(showTagMenu, false); 467 } 468 } 469 } 470 471 async function value_to_string(value) { 472 if (typeof value === "string") { 473 return value; 474 } 475 476 return await gradio.shared.server.format(value); 477 } 478 479 async function handle_copy() { 480 if ("clipboard" in navigator) { 481 const text = await value_to_string(gradio.props.value); 482 483 await navigator.clipboard.writeText(text); 484 copy_feedback(); 485 } 486 } 487 488 function copy_feedback() { 489 set(copied, true); 490 491 if (timer) clearTimeout(timer); 492 493 timer = setTimeout( 494 () => { 495 set(copied, false); 496 }, 497 1000 498 ); 499 } 500 501 async function handle_submit() { 502 if (get(checked)) { 503 gradio.props.value = await gradio.shared.server.unformat({ text: get(textbox_value) }); 504 } 505 506 gradio.dispatch("submit"); 507 } 508 509 onMount(async () => { 510 if (typeof gradio.props.value === "string") { 511 set(textbox_value, gradio.props.value, true); 512 } else if (gradio.props.value && gradio.props.value.length > 0) { 513 const formatted = await value_to_string(gradio.props.value); 514 515 set(textbox_value, formatted, true); 516 } else { 517 set(textbox_value, ""); 518 } 519 }); 520 521 var div = root(); 522 523 event('click', $window, handle_click_outside); 524 525 let classes; 526 var node = child(div); 527 528 { 529 var consequent_1 = ($$anchor) => { 530 IconButtonWrapper($$anchor, { 531 get buttons() { 532 return get(buttons); 533 }, 534 on_custom_button_click, 535 children: ($$anchor, $$slotProps) => { 536 var fragment_1 = comment();
537 var node_1 = first_child(fragment_1); 538 539 { 540 var consequent = ($$anchor) => { 541 { 542 let $0 = user_derived(() => get(copied) ? Check : Copy); 543 let $1 = user_derived(() => get(copied) ? "Copied" : "Copy"); 544 545 IconButton($$anchor, { 546 get Icon() { 547 return get($0); 548 }, 549 onclick: handle_copy, 550 get label() { 551 return get($1); 552 } 553 }); 554 } 555 }; 556 557 if_block(node_1, ($$render) => { 558 if (get(buttons).some((btn) => typeof btn === "string" && btn === "copy")) $$render(consequent); 559 }); 560 } 561 562 append($$anchor, fragment_1); 563 }, 564 $$slots: { default: true } 565 }); 566 }; 567 568 if_block(node, ($$render) => { 569 if (gradio.shared.show_label && (get(buttons).some((btn) => typeof btn === "string" && btn === "copy") || get(buttons).some((btn) => typeof btn !== "string"))) $$render(consequent_1); 570 }); 571 } 572 573 var node_2 = sibling(node, 2); 574 575 BlockTitle(node_2, { 576 get show_label() { 577 return gradio.shared.show_label; 578 }, 579 580 get info() { 581 return gradio.props.info; 582 }, 583 584 children: ($$anchor, $$slotProps) => { 585 next(); 586 587 var text_1 = text(); 588 589 template_effect(() => set_text(text_1, gradio.shared.label || "Dialogue")); 590 append($$anchor, text_1); 591 }, 592 $$slots: { default: true } 593 }); 594 595 var node_3 = sibling(node_2, 2); 596 597 { 598 var consequent_2 = ($$anchor) => { 599 var div_1 = root_5(); 600 let classes_1; 601 var node_4 = child(div_1); 602 603 { 604 let $0 = user_derived(() => get(is_formatting) || get(is_unformatting)); 605 606 Switch(node_4, { 607 label: 'Plain Text', 608 get disabled() { 609 return get($0); 610 }, 611 612 get checked() { 613 return get(checked); 614 }, 615 616 set checked($$value) { 617 set(checked, $$value, true); 618 }, 619 620 $$events: { 621 click: async (e) => { 622 if (!e.detail.checked) { 623 set(is_unformatting, true); 624 625 try { 626 gradio.props.value = await gradio.shared.server.unformat({ text: get(textbox_value) }); 627 set(dialogue_lines, [...gradio.props.value], true); 628 } finally { 629 set(is_unformatting, false); 630 } 631 } else { 632 set(is_formatting, true); 633 634 try { 635 set(textbox_value, await value_to_string(get(dialogue_lines)), true); 636 } finally { 637 set(is_formatting, false); 638 } 639 } 640 } 641 } 642 }); 643 } 644 645 reset(div_1); 646 647 template_effect(() => classes_1 = set_class(div_1, 1, 'switch-container top-switch svelte-1p54cvv', null, classes_1, { 648 'switch-disabled': get(is_formatting) || get(is_unformatting) 649 })); 650 651 append($$anchor, div_1); 652 }; 653 654 if_block(node_3, ($$render) => { 655 if (gradio.props.ui_mode === "both") $$render(consequent_2); 656 }); 657 } 658 659 var node_5 = sibling(node_3, 2); 660 661 { 662 var consequent_7 = ($$anchor) => { 663 var div_2 = root_6(); 664 let classes_2; 665 var node_6 = child(div_2); 666 667 { 668 var consequent_3 = ($$anchor) => { 669 var div_3 = root_7(); 670 671 transition(3, div_3, () => fade, () => ({ duration: 200 })); 672 append($$anchor, div_3); 673 }; 674 675 if_block(node_6, ($$render) => { 676 if (get(is_unformatting)) $$render(consequent_3); 677 }); 678 } 679 680 var node_7 = sibling(node_6, 2); 681 682 each(node_7, 17, () => get(dialogue_lines), index, ($$anchor, line, i) => { 683 var div_4 = root_8(); 684 var div_5 = child(div_4); 685 var node_8 = child(div_5); 686 687 { 688 var consequent_4 = ($$anchor) => { 689 var textarea = root_9(); 690 691 remove_textarea_child(textarea); 692 template_effect(() => textarea.disabled = get(disabled)); 693 bind_value(textarea, () => get(line).speaker, ($$value) => (get(line).speaker = $$value)); 694 append($$anchor, textarea); 695 }; 696 697 var alternate = ($$anchor) => { 698 { 699 let $0 = user_derived(() => gradio.props.speakers.map((s) => [s, s])); 700 701 Dropdown($$anchor, { 702 label: '', 703 show_label: false, 704 container: true, 705 interactive: true, 706 get value() { 707 return get(line).speaker; 708 }, 709 710 get choices() { 711 return get($0); 712 }, 713 on_change: (val) => update_line(i, "speaker", val) 714 }); 715 } 716 }; 717 718 if_block(node_8, ($$render) => { 719 if (get(disabled)) $$render(consequent_4); else $$render(alternate, false); 720 }); 721 } 722 723 reset(div_5); 724 725 var div_6 = sibling(div_5, 2); 726 var div_7 = child(div_6); 727 var textarea_1 = child(div_7); 728 729 remove_textarea_child(textarea_1); 730 bind_this(textarea_1, ($$value, i) => input_elements[i] = $$value, (i) => input_elements?.[i], () => [i]); 731 732 var node_9 = sibling(textarea_1, 2); 733 734 { 735 var consequent_5 = ($$anchor) => { 736 var div_8 = root_11();
737 var node_10 = child(div_8); 738 739 { 740 let $0 = user_derived(() => gradio.props.tags.map((s, i) => [s, i])); 741 let $1 = user_derived(() => get(filtered_tags).map((s) => gradio.props.tags.indexOf(s))); 742 let $2 = user_derived(() => get(filtered_tags).map((s) => gradio.props.tags.indexOf(s))[get(selectedOptionIndex)]); 743 744 DropdownOptions(node_10, { 745 get choices() { 746 return get($0); 747 }, 748 749 get filtered_indices() { 750 return get($1); 751 }, 752 753 get active_index() { 754 return get($2); 755 }, 756 show_options: true, 757 onchange: (e) => insert_tag(e), 758 get offset_from_top() { 759 return get(offset_from_top); 760 }, 761 from_top: true 762 }); 763 } 764 765 reset(div_8); 766 transition(3, div_8, () => fade, () => ({ duration: 100 })); 767 append($$anchor, div_8); 768 }; 769 770 if_block(node_9, ($$render) => { 771 if (get(showTagMenu) && get(currentLineIndex) === i) $$render(consequent_5); 772 }); 773 } 774 775 reset(div_7); 776 reset(div_6); 777
778 var node_11 = sibling(div_6, 2); 779 780 { 781 var consequent_6 = ($$anchor) => { 782 var div_9 = root_12(); 783 let classes_3; 784 var button = child(div_9); 785 var node_12 = child(button); 786 787 Plus(node_12); 788 reset(button); 789 reset(div_9); 790 791 template_effect(() => { 792 classes_3 = set_class(div_9, 1, 'svelte-1p54cvv', null, classes_3, { 'action-column': i == 0, hidden: get(disabled) }); 793 button.disabled = get(disabled); 794 }); 795 796 event('click', button, () => add_line(i)); 797 append($$anchor, div_9); 798 }; 799 800 if_block(node_11, ($$render) => { 801 if (gradio.props.max_lines == undefined || gradio.props.max_lines && i < gradio.props.max_lines - 1) $$render(consequent_6); 802 }); 803 } 804 805 var div_10 = sibling(node_11, 2); 806 let classes_4; 807 var button_1 = child(div_10); 808 var node_13 = child(button_1); 809 810 Trash(node_13); 811 reset(button_1); 812 reset(div_10); 813 reset(div_4); 814 815 template_effect(() => { 816 set_style(div_4, `--speaker-bg-color: ${(get(disabled) && (get(hoveredSpeaker) === null || get(hoveredSpeaker) === get(line).speaker) 817 ? get(speakerColors)[get(line).speaker] || 'transparent' 818 : 'transparent') ?? ''}`); 819 820 set_attribute(textarea_1, 'placeholder', gradio.props.placeholder); 821 textarea_1.disabled = get(disabled); 822 classes_4 = set_class(div_10, 1, 'action-column svelte-1p54cvv', null, classes_4, { hidden: get(disabled) || i == 0 }); 823 button_1.disabled = get(disabled); 824 }); 825 826 event('mouseenter', div_5, () => get(disabled) && set(hoveredSpeaker, get(line).speaker, true)); 827 event('mouseleave', div_5, () => get(disabled) && set(hoveredSpeaker, null)); 828 bind_value(textarea_1, () => get(line).text, ($$value) => (get(line).text = $$value)); 829 event('input', textarea_1, (event) => handle_input(event, i)); 830 event('focus', textarea_1, (event) => handle_input(event, i)); 831 832 event('keydown', textarea_1, (event) => { 833 if (event.key === "Escape" && get(showTagMenu)) { 834 set(showTagMenu, false); 835 set(selectedOptionIndex, 0); 836 event.preventDefault(); 837 } else if (get(showTagMenu) && get(currentLineIndex) === i) { 838 if (event.key === "ArrowDown") { 839 set(selectedOptionIndex, Math.min(get(selectedOptionIndex) + 1, get(filtered_tags).length - 1), true); 840 event.preventDefault(); 841 } else if (event.key === "ArrowUp") { 842 set(selectedOptionIndex, Math.max(get(selectedOptionIndex) - 1, 0), true); 843 event.preventDefault(); 844 } else if (event.key === "Enter") { 845 if (get(filtered_tags)[get(selectedOptionIndex)]) { 846 insert_selected_tag(); 847 } 848 849 event.preventDefault(); 850 } 851 } 852 }); 853 854 event('click', button_1, () => delete_line(i)); 855 append($$anchor, div_4); 856 }); 857 858 reset(div_2); 859 bind_this(div_2, ($$value) => dialogue_container_element = $$value, () => dialogue_container_element); 860 template_effect(() => classes_2 = set_class(div_2, 1, 'dialogue-container svelte-1p54cvv', null, classes_2, { loading: get(is_unformatting) })); 861 append($$anchor, div_2); 862 }; 863 864 var alternate_1 = ($$anchor) => { 865 var fragment_5 = comment(); 866 var node_14 = first_child(fragment_5); 867 868 { 869 var consequent_10 = ($$anchor) => { 870 var div_11 = root_14(); 871 let classes_5;
872 var node_15 = child(div_11); 873 874 { 875 var consequent_8 = ($$anchor) => { 876 var div_12 = root_15(); 877 878 transition(3, div_12, () => fade, () => ({ duration: 200 })); 879 append($$anchor, div_12); 880 }; 881 882 if_block(node_15, ($$render) => { 883 if (get(is_formatting)) $$render(consequent_8); 884 }); 885 } 886 887 var textarea_2 = sibling(node_15, 2); 888 889 remove_textarea_child(textarea_2); 890 set_attribute(textarea_2, 'rows', 5); 891 bind_this(textarea_2, ($$value) => textarea_element = $$value, () => textarea_element); 892 893 var node_16 = sibling(textarea_2, 2); 894 895 { 896 var consequent_9 = ($$anchor) => { 897 var div_13 = root_16(); 898 var node_17 = child(div_13); 899 900 { 901 let $0 = user_derived(() => gradio.props.tags.map((s, i) => [s, i])); 902 let $1 = user_derived(() => get(filtered_tags).map((s) => gradio.props.tags.indexOf(s))); 903 let $2 = user_derived(() => get(filtered_tags).map((s) => gradio.props.tags.indexOf(s))[get(selectedOptionIndex)]); 904 905 DropdownOptions(node_17, { 906 get choices() { 907 return get($0); 908 }, 909 910 get filtered_indices() { 911 return get($1); 912 }, 913 914 get active_index() { 915 return get($2); 916 }, 917 show_options: true, 918 $$events: { change: (e) => insert_tag(e) } 919 }); 920 } 921 922 reset(div_13); 923 transition(3, div_13, () => fade, () => ({ duration: 100 })); 924 append($$anchor, div_13); 925 }; 926 927 if_block(node_16, ($$render) => { 928 if (get(showTagMenu)) $$render(consequent_9); 929 }); 930 } 931 932 reset(div_11); 933 934 template_effect(() => { 935 classes_5 = set_class(div_11, 1, 'textarea-container svelte-1p54cvv', null, classes_5, { loading: get(is_formatting) }); 936 set_attribute(textarea_2, 'placeholder', gradio.props.placeholder); 937 textarea_2.disabled = get(disabled); 938 }); 939 940 bind_value(textarea_2, () => get(textbox_value), ($$value) => set(textbox_value, $$value)); 941 942 event('input', textarea_2, (event) => { 943 handle_input(event, 0); 944 gradio.props.value = get(textbox_value); 945 }); 946 947 event('focus', textarea_2, (event) => handle_input(event, 0)); 948 949 event('keydown', textarea_2, (event) => { 950 if (event.key === "Escape" && get(showTagMenu)) { 951 set(showTagMenu, false); 952 set(selectedOptionIndex, 0); 953 event.preventDefault(); 954 } else if (get(showTagMenu)) { 955 if (event.key === "ArrowDown") { 956 set(selectedOptionIndex, Math.min(get(selectedOptionIndex) + 1, get(filtered_tags).length - 1), true); 957 event.preventDefault(); 958 } else if (event.key === "ArrowUp") { 959 set(selectedOptionIndex, Math.max(get(selectedOptionIndex) - 1, 0), true); 960 event.preventDefault(); 961 } else if (event.key === "Enter") { 962 if (get(filtered_tags)[get(selectedOptionIndex)]) { 963 insert_selected_tag(); 964 } 965 966 event.preventDefault(); 967 } 968 } 969 }); 970 971 append($$anchor, div_11); 972 }; 973 974 if_block( 975 node_14, 976 ($$render) => { 977 if (get(checked) || gradio.props.ui_mode !== "dialogue") $$render(consequent_10); 978 }, 979 true 980 ); 981 } 982 983 append($$anchor, fragment_5); 984 }; 985 986 if_block(node_5, ($$render) => { 987 if (!get(checked) && gradio.props.ui_mode !== "text") $$render(consequent_7); else $$render(alternate_1, false); 988 }); 989 } 990 991 var node_18 = sibling(node_5, 2); 992 993 { 994 var consequent_12 = ($$anchor) => { 995 var div_14 = root_17(); 996 var button_2 = child(div_14); 997 var node_19 = child(button_2); 998 999 { 1000 var consequent_11 = ($$anchor) => { 1001 var text_2 = text(); 1002 1003 template_effect(() => set_text(text_2, gradio.props.submit_btn)); 1004 append($$anchor, text_2); 1005 }; 1006 1007 var alternate_2 = ($$anchor) => { 1008 Send($$anchor); 1009 }; 1010 1011 if_block(node_19, ($$render) => { 1012 if (typeof gradio.props.submit_btn === "string") $$render(consequent_11); else $$render(alternate_2, false); 1013 }); 1014 } 1015 1016 reset(button_2); 1017 reset(div_14); 1018 template_effect(() => button_2.disabled = get(disabled)); 1019 event('click', button_2, handle_submit); 1020 append($$anchor, div_14); 1021 }; 1022 1023 if_block(node_18, ($$render) => { 1024 if (gradio.props.submit_btn && !get(disabled)) $$render(consequent_12); 1025 }); 1026 } 1027 1028 reset(div); 1029 template_effect(() => classes = set_class(div, 1, 'svelte-1p54cvv', null, classes, { container: gradio.shared.container })); 1030 append($$anchor, div); 1031 pop(); 1032} 1033 1034var root_1 = from_html(`<!> <!>`, 1); 1035 1036function Index($$anchor, $$props) { 1037 push($$props, true); 1038 1039 const props = rest_props($$props, ['$$slots', '$$events', '$$legacy']); 1040 const gradio = new Gradio(props); 1041 1042 Block($$anchor, { 1043 get visible() { 1044 return gradio.shared.visible; 1045 }, 1046 1047 get elem_id() { 1048 return gradio.shared.elem_id; 1049 }, 1050 1051 get elem_classes() { 1052 return gradio.shared.elem_classes; 1053 }, 1054 1055 get scale() { 1056 return gradio.shared.scale; 1057 }, 1058 1059 get min_width() { 1060 return gradio.shared.min_width; 1061 }, 1062 allow_overflow: true, 1063 get padding() { 1064 return gradio.shared.container; 1065 }, 1066 1067 children: ($$anchor, $$slotProps) => { 1068 var fragment_1 = root_1(); 1069 var node = first_child(fragment_1); 1070 1071 { 1072 var consequent = ($$anchor) => { 1073 Static($$anchor, spread_props( 1074 { 1075 get autoscroll() { 1076 return gradio.shared.autoscroll; 1077 }, 1078 1079 get i18n() { 1080 return gradio.i18n; 1081 } 1082 }, 1083 () => gradio.shared.loading_status, 1084 { 1085 on_clear_status: () => gradio.dispatch("clear_status", gradio.shared.loading_status) 1086 } 1087 )); 1088 }; 1089 1090 if_block(node, ($$render) => { 1091 if (gradio.shared.loading_status) $$render(consequent); 1092 }); 1093 } 1094
1095 var node_1 = sibling(node, 2); 1096 1097 Dialogue(node_1, { 1098 get gradio() { 1099 return gradio; 1100 } 1101 }); 1102 1103 append($$anchor, fragment_1); 1104 }, 1105 $$slots: { default: true } 1106 }); 1107 1108 pop(); 1109} 1110 1111export { Dialogue as BaseDialogue, Index as default }; 1112//# sourceMappingURL=Index-BAJ5KXXp.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.