bridge.html

---
layout: default
---
      <h1 class="text-center mt-1">SAMMI Bridge </h1>
      <!-- Connection Info -->
      <div class="row justify-content-center">
        <div class="col col-auto">
          <svg id="toclient_circle" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="red" class="bi bi-circle-fill d-md-none me-1" viewBox="0 0 16 16">
            <circle cx="8" cy="8" r="8" />
          </svg>
          <span>SAMMI Core</span><span class="d-none d-md-inline-flex me-1">: </span><span id="toclient" class="disconnected d-none d-md-inline-flex">Not connected.</span>
        </div>
        <div class="col col-auto">
          <i id="extensions_icon" class="fas fa-times-circle d-md-none me-1"></i>
          <span>Extensions</span><span class="d-none d-md-inline-flex me-1">: </span><span id="extensions_status" class="d-none d-md-inline-flex">No extensions installed.</span>
        </div>
      </div>
      <br>
      <!-- Modal -->
      <div class="modal fade" id="sammiModalElem" tabindex="-1" aria-labelledby="sammiModalElemLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="sammiModalElemTitle">SAMMI</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="sammiModalElemContent">
              ..
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">OK</button>
            </div>
          </div>
        </div>
      </div>
      <!--Tabs -->
      <span id="close-tab-button">
        &times;
      </span>
      <div class="row justify-content-center g-0">
        <ul class="nav nav-pills mb-0" id="extensions-tab" role="tablist">
      </div>
      <!-- Tab Content -->
      <div class="tab-content" id="extensions-tabContent">
        <div class="tab-pane" id="content-settings" role="tabpanel" title="Settings" data-type="settings">
          <div class='row pt-3'>
            <h5>Bridge Connection</h5>
            <div class="fs-7 mb-2"><span class="me-2">Version:</span><span name="version"></span></div>
            <div class="fs-7 mb-0"><span class="me-2">Current IP:</span><span name="currentIP"></span></div>
            <div class="fs-7 mb-2"><span class="me-2">Current Port:</span><span name="currentPort"></span></div>
            <div class="col">
              <div class="row">
                <label for="inputPassword" class="col-sm-5 col-form-label">IP Address:</label>
                <div class="col-sm-4 w-auto">
                  <input type="text" name="nIPbox" value='127.0.0.1' class="form-control form-control-sm">
                </div>
              </div>
              <div class="row">
                <label for="inputPassword" class="col-sm-5 col-form-label">Port:</label>
                <div class="col-sm-4 w-auto">
                  <input type="number" min="0" max="65535" name="nPortBox" value=9425 class="form-control form-control-sm">
                </div>
              </div>
              <div class="row">
                <label for="inputPassword" class="col-sm-5 col-form-label">Password (optional):</label>
                <div class="col-sm-4 w-auto">
                  <input type="password" name="nPassBox" size="20" value='' class="form-control form-control-sm">
                </div>
              </div>
              <div class="mt-1 row">
                <button type="button" id="cnctbutton" class="btn btn-primary btn-sm mb-2 w-auto ms-3">Connect</button>
              </div>
            </div>
          </div>
          <div class='row pt-3'>
            <h5>Twitch Extension WebSocket</h5>

            <div class="mb-2">
              Status: <span id="twext-status" class="disconnected">Disconnected</span>
            </div>

            <div class="mb-2">
              <button id="twext-toggle" class="btn btn-primary btn-sm">
                Toggle Connection
              </button>
            </div>
          </div>
          <div class='row pt-3 d-block'>
            <h5>Message Logging</h5>
            <div class='pl-5 ml-5'>
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="dbgBridge" onclick="SAMMIDebugLog(this)">
                <label class="form-check-label" for="flexSwitchCheckDefault">SAMMI</label>
              </div>
              <div class="tab-content p-0 mt-2" id="debugLogContent">
                <!--SAMMI Core Log-->
                <div class="tab-pane fade show active" id="SAMMIBridge" role="tabpanel" aria-labelledby="SAMMIBridge-tab">
                  <div id="SAMMIcorelog" class="col col-10 text-wrap">Logging is disabled.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane non-draggable" id="content-extensions" role="tabpanel" title="Extensions" data-type="default">
            <div class='row pt-3'>
                <h5>Extensions</h5>
            </div>
            <div class="table-responsive">
                <table class="table table-sm table-hover table-dark" id="extensionTable">
                    <thead>
                        <tr>
                            <th class="pl-5" id="ExtensionsSortName">Name</th>
                            <th class="pl-5 d-none d-md-table-cell" id="ExtensionsSortAuthor">Author</th>
                            <th class="pl-5">
                              <span class="d-none d-xl-inline">Current</span>
                              <i class="fas fa-clock d-xl-none"></i>
                            </th>
                            <th class="pl-5">
                              <span class="d-none d-xl-inline">Latest</span>
                              <i class="fas fa-rocket d-xl-none"></i>
                            </th>
                            <th class="pl-5 extension-download-header" id="ExtensionsSortDownload">
                              <span class="d-none d-xl-inline">Download</span>
                              <i class="fas fa-download d-xl-none"></i>
                            </th>
                        </tr>
                    </thead>
                    <tbody id="extensionTableBody">
                    </tbody>
                </table>
            </div>
          </div>
        <!--Twitch Triggers-->
        <div class="tab-pane" id="content-triggers" role="tabpanel" title="Twitch Triggers" data-type="default">
          <form id="SAMMITestTwitchChat" class="SAMMITestTriggers">
          <div>
            <button type="submit" class="btn btn-primary btn-sm me-1">Chat Message</button>
            <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hidechatmsg" role="button" aria-expanded="false" aria-controls="hidechatmsg"></a>
          </div>
          <div class="collapse" id="hidechatmsg" data-bs-parent="#content-triggers">
            <div class="form-check ps-0 d-flex align-items-center mb-2">
              <label class="form-check-label me-1">Username:</label>
              <input type="text" class="form-control form-control-sm me-2" name="name">
            </div>
            <div class="form-check ps-0 d-flex align-items-center mb-2">
              <label class="form-check-label me-1">Message:</label>
              <textarea class="form-control form-control-sm" name="chatMsg"></textarea>
            </div>
            <div class="form-group mb-2">
              <label>Message Options:</label>
              <input type="checkbox" class="form-check-input" name="chatFirstTime"> 1st Message<br>
              <input type="checkbox" class="form-check-input" name="chatBroadcaster"> Broadcaster<br>
              <input type="checkbox" class="form-check-input" name="chatLeadModerator"> Lead Moderator<br>
              <input type="checkbox" class="form-check-input" name="chatMod"> Moderator<br>
              <input type="checkbox" class="form-check-input" name="chatSub"> Subscriber<br>
              <input type="checkbox" class="form-check-input" name="chatVip"> VIP<br>
              <input type="checkbox" class="form-check-input" name="chatFounder"> Founder<br>
              <input type="checkbox" class="form-check-input" name="chatOwnChat" checked> Is Own Chat<br>
              <input type="checkbox" class="form-check-input" name="chatTurbo"> Turbo
            </div>
          </div>
        </form>
          <form id="SAMMITestTwitchAnnouncement" class="SAMMITestTriggers">
          <div>
            <button type="submit" class="btn btn-primary btn-sm me-1">Announcement</button>
            <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hideannouncement" role="button" aria-expanded="false" aria-controls="hideannouncement"></a>
          </div>
          <div class="collapse" id="hideannouncement" data-bs-parent="#content-triggers">
            <div class="form-group mb-2">
              <label>Username:</label>
              <input type="text" class="form-control form-control-sm" name="name">
            </div>
            <div class="form-group mb-2">
              <label>Color:</label>
              <select class="form-select form-select-sm" name="announcementColor">
                <option value="primary" selected>Primary</option>
                <option value="blue">Blue</option>
                <option value="green">Green</option>
                <option value="orange">Orange</option>
                <option value="purple">Purple</option>
              </select>
            </div>
            <div class="form-group mb-2">
              <label>Message:</label>
              <textarea class="form-control form-control-sm" rows="1" name="announcementMessage"></textarea>
            </div>
          </div>
        </form>
          <form id="SAMMITestTwitchWhisper" class="SAMMITestTriggers">
          <div>
            <button type="submit" class="btn btn-primary btn-sm me-1">Whisper</button>
            <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hidewhisper" role="button" aria-expanded="false" aria-controls="hidewhisper"></a>
          </div>
          <div class="collapse" id="hidewhisper" data-bs-parent="#content-triggers">
            <div class="form-group mb-2">
              <label>Username:</label>
              <input type="text" class="form-control form-control-sm" name="name">
            </div>
            <div class="form-group mb-2">
              <label>Message:</label>
              <textarea class="form-control form-control-sm" rows="1" name="whisperMessage"></textarea>
            </div>
          </div>
        </form>
          <form id="SAMMITestTwitchFollow" class="SAMMITestTriggers">
          <div class="form-check ps-0 d-flex align-items-center">
            <button type="submit" class="btn btn-primary btn-sm me-1">Follower</button>
            <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hidefollow" role="button" aria-expanded="false" aria-controls="hidefollow"></a>
          </div>
          <div class="collapse" id="hidefollow" data-bs-parent="#content-triggers">
            <div class="form-group mb-2">
              <label>Username:</label>
              <input type="text" class="form-control form-control-sm" name="name">
            </div>
          </div>
        </form>
          <form id="SAMMITestTwitchRaid" class="SAMMITestTriggers">
          <button type="submit" class="btn btn-primary btn-sm me-1">Raid</button>
          <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hideraid" role="button" aria-expanded="false" aria-controls="hideraid"></a>
          <div class="collapse" id="hideraid" data-bs-parent="#content-triggers">
            <div class="form-group mb-2">
              <label>Username:</label>
              <input type="text" class="form-control form-control-sm" name="name">
            </div>
            <div class="form-group mb-2">
              <label>Amount:</label>
              <input type="number" class="form-control form-control-sm" min="1" max="999" name="raidAmount" value=5>
            </div>
          </div>
        </form>
          <form id="SAMMITestTwitchShoutout" class="SAMMITestTriggers">
          <div class="form-group d-flex align-items-center">
            <button type="submit" class="btn btn-primary btn-sm me-1">Shoutout</button>
            <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hideshoutout" role="button" aria-expanded="false" aria-controls="hideshoutout"></a>
          </div>
          <div class="collapse" id="hideshoutout" data-bs-parent="#content-triggers">
            <div class="form-group mb-2">
              <label>Shoutout Type:</label>
              <select class="form-select form-select-sm me-2" aria-label="Shoutout Type" name="shoutoutType">
                <option value="received" selected>Received</option>
                <option value="created">Created</option>
              </select>
            </div>
            <div class="form-group mb-2">
              <label>Username:</label>
              <input type="text" class="form-control form-control-sm" name="name">
            </div>
          </div>
        </form>
          <form id="SAMMITestTwitchSubs" class="SAMMITestTriggers">
          <button type="submit" class="btn btn-primary btn-sm me-1">Sub</button>
          <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hidesubs" role="button" aria-expanded="false" aria-controls="hidesubs"></a>
          <div class="collapse" id="hidesubs" data-bs-parent="#content-triggers">
            <div class="form-group">
              <label>Username:</label>
              <input type="text" class="form-control form-control-sm" name="name">
            </div>
            <div class="form-group mb-2">
              <label class="me-2">Tier:</label>
              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="tier" value="Tier 1" checked>
                <label class="form-check-label">Tier 1</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="tier" value="Tier 2">
                <label class="form-check-label">Tier 2</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="tier" value="Tier 3">
                <label class="form-check-label">Tier 3</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="tier" value="Prime">
                <label class="form-check-label">Prime</label>
              </div>
            </div>
            <div class="form-group mb-2">
              <label class="me-2">Gift Options:</label>
              <div class="form-check form-check-inline">
                <input type="checkbox" class="form-check-input" name="subgift" value="subgift">
                <label class="form-check-label">SubGift</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="checkbox" class="form-check-input" name="anongift" value="anongift">
                <label class="form-check-label">AnonGift</label>
              </div>
            </div>
            <div class="form-group mb-2">
              <label>Months:</label>
              <input type="number" class="form-control form-control-sm" min="1" max="999" name="submonths" value=1>
            </div>
            <div class="form-group mb-2">
              <label>Message:</label>
              <textarea class="form-control form-control-sm" rows="1" name="submessage"></textarea>
            </div>
          </div>
        </form>
          <form id="SAMMITestTwitchSubGift" class="SAMMITestTriggers">
          <button type="submit" class="btn btn-primary btn-sm me-1">Community Gift</button>
          <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hidesubgiftamount" role="button" aria-expanded="false" aria-controls="hidesubgiftamount"></a>

          <div class="collapse" id="hidesubgiftamount" data-bs-parent="#content-triggers">
            <div class="form-group mb-2">
              <label>Gifter Username:</label>
              <input type="text" class="form-control form-control-sm" name="gifterName" placeholder="optional">
            </div>

            <div class="form-group mb-2">
              <label class="me-2">Tier:</label>

              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="giftTier" value="Tier 1" checked>
                <label class="form-check-label">Tier 1</label>
              </div>

              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="giftTier" value="Tier 2">
                <label class="form-check-label">Tier 2</label>
              </div>

              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="giftTier" value="Tier 3">
                <label class="form-check-label">Tier 3</label>
              </div>
            </div>

            <div class="form-group mb-2">
              <label>Amount:</label>
              <input type="number" class="form-control form-control-sm" min="1" max="999" name="subGiftAmount" value="1">
            </div>
          </div>
        </form>
          <form id="SAMMITestTwitchBits" class="SAMMITestTriggers">
          <button type="submit" class="btn btn-primary btn-sm me-1">Bits</button>
          <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hidebits" role="button" aria-expanded="false" aria-controls="hidebits"></a>
          <div class='collapse' id="hidebits" data-bs-parent="#content-triggers">
            <div class="form-check ps-0 d-flex align-items-center mb-2">
              <label class="form-check-label me-1">Username:</label>
              <input type="text" name="name" class="form-control form-control-sm me-2" value="">
            </div>
            <div class="form-check ps-0 d-flex align-items-center mb-2">
              <label class="form-check-label me-1">Amount of bits:</label>
              <input type="number" min="1" max="99999" name="bitsamount" class="form-control form-control-sm me-2" value=10>
            </div>
            <div class="form-check ps-0 d-flex align-items-center mb-2">
              <label class="form-check-label me-1">Message:</label>
              <textarea name="bitsmessage" class="form-control form-control-sm" rows="1" style="margin:5px 0px;">Hello World!</textarea>
            </div>
          </div>
        </form>
          <form id="SAMMITestTwitchWatchStreak" class="SAMMITestTriggers">
          <button type="submit" class="btn btn-primary btn-sm me-1">Watch Streak</button>
          <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hidewatchstreak" role="button" aria-expanded="false" aria-controls="hidewatchstreak"></a>
          <div class="collapse" id="hidewatchstreak" data-bs-parent="#content-triggers">
            <div class="form-check ps-0 d-flex align-items-center mb-2">
              <label class="form-check-label me-1">Username:</label>
              <input type="text" name="name" class="form-control form-control-sm me-2">
            </div>

            <div class="form-check ps-0 d-flex align-items-center mb-2">
              <label class="form-check-label me-1">Amount:</label>
              <input type="number" min="1" max="999" name="amount" class="form-control form-control-sm me-2" value="5">
            </div>

            <div class="form-check ps-0 d-flex align-items-center mb-2">
              <label class="form-check-label me-1">Message:</label>
              <textarea name="message" class="form-control form-control-sm" rows="1">Hello World!</textarea>
            </div>
          </div>
        </form>
          <form id="SAMMITestTwitchPowerups" class="SAMMITestTriggers">
                <button type="submit" class="btn btn-primary btn-sm me-1">Default Power-Up</button>
                <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hidepowerups" role="button" aria-expanded="false" aria-controls="hidepowerups"></a>
                <div class="collapse" id="hidepowerups" data-bs-parent="#content-triggers">
                  <div class="form-check ps-0 d-flex align-items-center mb-2">
                    <label class="form-check-label me-1">Power Up:</label>
                    <select name="poweruptype" class="form-select form-select-sm me-2">
                      <option value="gigantify">Gigantify an Emote</option>
                      <option value="message_effect">Message Effects</option>
                      <option value="celebration">On-Screen Celebrations</option>
                    </select>
                  </div>

                  <div class="form-check ps-0 d-flex align-items-center mb-2">
                    <label class="form-check-label me-1">Username:</label>
                    <input type="text" name="name" class="form-control form-control-sm me-2" value="">
                  </div>
                  <div class="form-check ps-0 d-flex align-items-center mb-2">
                    <label class="form-check-label me-1">Amount of bits:</label>
                    <input type="number" min="1" max="99999" name="bitsamount" class="form-control form-control-sm me-2" value=10>
                  </div>
                  <div class="form-check ps-0 d-flex align-items-center mb-2">
                    <label class="form-check-label me-1">Message:</label>
                    <textarea name="powerupsmessage" class="form-control form-control-sm" rows="1" style="margin:5px 0px;">Hello World!</textarea>
                  </div>
                </div>
              </form>
          <form id="SAMMITestTwitchCustomPowerUps" class="SAMMITestTriggers">
          <div>
            <button type="submit" class="btn btn-primary btn-sm me-1">Custom Power-Up</button>
            <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hidecustompowerups" role="button" aria-expanded="false" aria-controls="hidecustompowerups"></a>
          </div>
          <div class="collapse" id="hidecustompowerups" data-bs-parent="#content-triggers">
            <div class="form-group mb-2">
              <label>Username:</label>
              <input type="text" class="form-control form-control-sm" name="name">
            </div>
            <div class="form-group mb-2">
              <label>Power-Up Name:</label>
              <input type="text" class="form-control form-control-sm mb-1" name="customPowerUpName">
            </div>
            <div class="form-group mb-2">
              <label>Bits Value:</label>
              <input type="number" class="form-control form-control-sm" min="1" max="100000" name="customPowerUpBits" value=10>
            </div>
            <div class="form-group mb-2">
              <label>Message:</label>
              <textarea class="form-control form-control-sm" rows="1" name="customPowerUpMessage"></textarea>
            </div>
          </div>
        </form>
          <form id="SAMMITestTwitchAutomaticReward" class="SAMMITestTriggers">
          <div>
            <button type="submit" class="btn btn-primary btn-sm me-1">Automatic Reward Redemption</button>
            <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hideautomaticreward" role="button" aria-expanded="false" aria-controls="hideautomaticreward"></a>
          </div>
          <div class="collapse" id="hideautomaticreward" data-bs-parent="#content-triggers">
            <div class="form-group mb-2">
              <label>Username:</label>
              <input type="text" class="form-control form-control-sm" name="name">
            </div>
            <div class="form-group mb-2">
              <label>Reward Type:</label>
              <select class="form-select form-select-sm" name="automaticRewardType">
                <option value="send_highlighted_message" selected>Highlight my Message</option>
                <option value="single_message_bypass_sub_mode">Send a Message in Sub-Only Mode</option>
                <option value="random_sub_emote_unlock">Unlock a Random Sub Emote</option>
                <option value="chosen_sub_emote_unlock">Choose an Emote to Unlock</option>
                <option value="chosen_modified_sub_emote_unlock">Modify a Single Emote</option>
              </select>
            </div>
            <div class="form-group mb-2">
              <label>Reward Cost:</label>
              <input type="number" class="form-control form-control-sm" min="1" max="999999" name="automaticRewardCost" value=100>
            </div>
            <div class="form-group mb-2">
              <label>Message:</label>
              <textarea class="form-control form-control-sm" rows="1" name="automaticRewardMessage"></textarea>
            </div>
            <div class="form-group mb-2">
              <label>Emote ID:</label>
              <input type="text" class="form-control form-control-sm" name="automaticRewardEmoteId">
            </div>
            <div class="form-group mb-2">
              <label>Emote Name:</label>
              <input type="text" class="form-control form-control-sm" name="automaticRewardEmoteName">
            </div>
          </div>
        </form>
          <form id="SAMMITestTwitchPoints" class="SAMMITestTriggers">
          <div>
            <button type="submit" class="btn btn-primary btn-sm me-1">Channel Point Redemption</button>
            <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hidepoints" role="button" aria-expanded="false" aria-controls="hidebits"></a>
          </div>
          <div class="collapse" id="hidepoints" data-bs-parent="#content-triggers">
            <div class="form-group mb-2">
              <label>Username:</label>
              <input type="text" class="form-control form-control-sm" name="name">
            </div>
            <div class="form-group mb-2">
              <label>Redeem Name:</label>
              <input type="text" class="form-control form-control-sm mb-1" name="channelPointsName">
            </div>
            <div class="form-group mb-2">
              <label>Redeem Cost:</label>
              <input type="number" class="form-control form-control-sm" min="1" max="9999" name="channelPointsCost" value=50>
            </div>
            <div class="form-group mb-2">
              <label>Redeem Message:</label>
              <textarea class="form-control form-control-sm" rows="1" name="channelPointsMsg"></textarea>
              <div class="form-check mt-1">
                <input type="checkbox" class="form-check-input" name="channelPointsInput">
                <label class="form-check-label">User Input Required</label>
              </div>
            </div>
          </div>
        </form>
          <form id="SAMMITestTwitchPoll" class="SAMMITestTriggers form-inline">
          <div class="form-group d-flex align-items-center">
            <button type="submit" class="btn btn-primary btn-sm me-2">Poll</button>
            <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hidepoll" role="button" aria-expanded="false" aria-controls="hidepoll"></a>
          </div>
          <div class="collapse mt-2 mb-1" id="hidepoll" data-bs-parent="#content-triggers">
            <div class="form-group mb-2">
              <label>Poll type:</label>
              <select class="form-select-sm me-2" aria-label="Poll Type" name="pollType">
                <option value="begin" selected>Created</option>
                <option value="progress">Voted</option>
                <option value="end">Ended</option>
                <option value="archive">Archived</option>
              </select>
            </div>
            <div class="form-group mb-2">
              <label>Choice amount:</label>
              <input class="form-control form-control-sm" type="number" min="2" max="5" name="pollChoiceAmount" value=3>
            </div>
            <div class="form-group mb-2">
              <label>Duration:</label>
              <input class="form-control form-control-sm" type="number" min="1" max="3600" name="pollDuration" value=60>
            </div>
            <div class="form-group mb-2">
              <label>Allow Channel Points:</label>
              <input type="checkbox" class="form-check-input" name="pollAllowPoints">
            </div>
          </div>
        </form>
          <form id="SAMMITestTwitchPrediction" class="form-inline SAMMITestTriggers">
          <div class="form-group d-flex align-items-center">
            <button type="submit" class="btn btn-primary btn-sm me-2">Prediction</button>
            <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hideprediction" role="button" aria-expanded="false" aria-controls="hideprediction"></a>
          </div>
          <div class="collapse" id="hideprediction" data-bs-parent="#content-triggers">
            <div class="form-group mb-2">
              <label>Prediction type:</label>
              <select class="form-select form-select-sm me-2" aria-label="Prediction Type" name="predictType">
                <option value="begin" selected>Created</option>
                <option value="progress">Voted</option>
                <option value="end">Locked</option>
                <option value="archive">Resolved</option>
                <option value="cancel">Canceled</option>
              </select>
            </div>
            <div class="form-group mb-2">
              <label>Outcome amount:</label>
              <input type="number" class="form-control form-control-sm" min="2" max="5" name="predictChoiceAmount" value=3>
            </div>
            <div class="form-group mb-2">
              <label>Duration:</label>
              <input type="number" class="form-control form-control-sm" min="1" max="3600" name="predictionDuration" value=60>
            </div>
          </div>
        </form>
          <form id="SAMMITestTwitchHypeTrain" class="SAMMITestTriggers">
          <div class="d-flex align-items-center">
            <button type="submit" class="btn btn-primary btn-sm me-2">Hype Train</button>
            <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hidehypetrain" role="button" aria-expanded="false" aria-controls="hidehypetrain"></a>
          </div>
          <div class="collapse mb-1" id="hidehypetrain" data-bs-parent="#content-triggers">
            <div class="form-group mb-2">
              <label>Hype Train type:</label>
              <select class="form-select form-select-sm me-2" aria-label="Hype Train Type" name="hypeTrainType">
                <option value="begin">Begin</option>
                <option value="progress">Progress</option>
                <option value="end">End</option>
              </select>
            </div>
            <div class="form-group mb-2">
              <label>Current level:</label>
              <input type="number" class="form-control form-control-sm" min="1" max="50" name="hypeTrainLevel" value=3>
            </div>
            <div class="form-group mb-2">
              <label>Current goal:</label>
              <input type="number" class="form-control form-control-sm" min="1" max="10000" name="hypeTrainGoal" value=150>
            </div>
            <div class="form-group mb-2">
              <label>Goal progress:</label>
              <input type="number" class="form-control form-control-sm" min="1" max="10000" name="hypeTrainProgress" value=50>
            </div>
          </div>
        </form>
          <form id="SAMMITestTwitchStream" class="SAMMITestTriggers">
          <div class="form-group d-flex align-items-center">
            <button type="submit" class="btn btn-primary btn-sm me-1">Stream</button>
            <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hidestream" role="button" aria-expanded="false" aria-controls="hidestream"></a>
          </div>
          <div class="collapse" id="hidestream" data-bs-parent="#content-triggers">
            <div class="form-group mb-2">
              <label>Event:</label>
              <select class="form-select form-select-sm me-2" aria-label="Type" name="streamType">
                <option value="started" selected>Started</option>
                <option value="ended">Ended</option>
              </select>
            </div>
          </div>
        </form>
          <form id="SAMMITestTwitchAdbreak" class="SAMMITestTriggers">
          <button type="submit" class="btn btn-primary btn-sm me-1">Ad Break</button>
          <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hideadbreak" role="button" aria-expanded="false" aria-controls="hideadbreak"></a>
          <div class="collapse" id="hideadbreak" data-bs-parent="#content-triggers">
            <div class="form-group mb-2">
              <label>Requester Username:</label>
              <input type="text" class="form-control form-control-sm" name="name">
            </div>
            <div class="form-group mb-2">
              <input type="checkbox" class="form-check-input" name="adbreakAuto"> Is Automatic
            </div>
          </div>
        </form>
          <form id="SAMMITestTwitchCharity" class="SAMMITestTriggers">
          <div class="form-group d-flex align-items-center">
            <button type="submit" class="btn btn-primary btn-sm me-1">Charity</button>
            <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hidecharity" role="button" aria-expanded="false" aria-controls="hidecharity"></a>
          </div>
          <div class="collapse" id="hidecharity" data-bs-parent="#content-triggers">
            <div class="form-group mb-2">
              <label>Event:</label>
              <select class="form-select form-select-sm me-2" aria-label="Type" name="charityType">
                <option value="start" selected>Started</option>
                <option value="progress">Progressed</option>
                <option value="stop">Stopped</option>
                <option value="donate">Donated</option>
              </select>
            </div>
          </div>
        </form>
          <form id="SAMMITestExtensionTrigger" class="SAMMITestTriggers">
          <div>
            <button type="submit" class="btn btn-primary btn-sm me-1">Extension Trigger</button>
            <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hideextensiontrigger" role="button" aria-expanded="false" aria-controls="hideextensiontrigger"></a>
          </div>
          <div class="collapse" id="hideextensiontrigger" data-bs-parent="#content-triggers">
            <div class="form-group mb-2">
              <label>Trigger Name:</label>
              <input type="text" class="form-control form-control-sm" name="extensionTriggerName" placeholder="Extension Trigger">
            </div>
            <div class="form-group mb-2">
              <label>Payload JSON:</label>
              <textarea class="form-control form-control-sm" rows="10" name="extensionTriggerPayload" placeholder='{
    "String": "Test",
    "Number": 5,
    "Array": [1, 2, 3],
    "Object": {
        "String": "Test",
        "Number": 1
    }
}'></textarea>
            </div>
          </div>
        </form>
          <form id="SAMMITestTwitchExtension" class="SAMMITestTriggers">
          <div>
            <button type="submit" class="btn btn-primary btn-sm me-1">Twitch Extension</button>
            <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#hidetwitchextension" role="button" aria-expanded="false" aria-controls="hidetwitchextension"></a>
          </div>
          <div class="collapse" id="hidetwitchextension" data-bs-parent="#content-triggers">
            <div class="form-group mb-2">
              <label>Display Name:</label>
              <input type="text" class="form-control form-control-sm" name="name">
            </div>
            <div class="form-group mb-2">
              <label>Redemption Name:</label>
              <input type="text" class="form-control form-control-sm" name="twitchExtensionRedemptionName">
            </div>
            <div class="form-group mb-2">
              <label>Trigger Name:</label>
              <input type="text" class="form-control form-control-sm" name="twitchExtensionTriggerName">
            </div>
            <div class="form-group mb-2">
              <label>Power:</label>
              <input type="number" class="form-control form-control-sm" min="0" max="999" name="twitchExtensionAmount" value=100>
            </div>
          </div>
        </form>
        </div>
        <!--YouTube Triggers-->
        <div class="tab-pane" id="content-yttriggers" role="tabpanel" title="YouTube Triggers" data-type="default">
            <div>
            <button type="button" class="btn btn-primary btn-sm" id="ytLiveTestSub">Subscriber</button>
        </div>
            <div>
            <button type="button" class="btn btn-primary btn-sm" id="ytLiveTestMember">Member</button>
        </div>
            <div>
            <div class="yt-trigger-row">
                <button type="button" class="btn btn-primary btn-sm" id="ytLiveTestMilestone">Member Renewal</button>
                <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#YTLiveHideMilestone" role="button"
                    aria-expanded="false" aria-controls="HideMilestone"></a>
            </div>
            <div class="collapse" id="YTLiveHideMilestone" data-bs-parent="#content-yttriggers">
                <div class="form-check ps-0 d-flex align-items-center">
                    <label class="form-check-label me-1">Level name:</label>
                    <input type="text" class="form-control form-control-sm me-2" id="YTLiveMilestoneLevel">
				</div>
                <div class="form-check ps-0 d-flex align-items-center">
                    <label class="form-check-label me-1">Months:</label>
                    <input type="number" class="form-control form-control-sm" min="1" max="99" id="YTLiveMilestoneMonth">
                </div>
                <div class="form-check ps-0 d-flex align-items-center">
                    <label class="form-check-label me-1">Message:</label>
                    <textarea type="text" rows="1" class="form-control form-control-sm" id="YTLiveMilestoneMsg"></textarea>
                </div>
            </div>
        </div>
            <div>
            <div class="yt-trigger-row">
                <button type="button" class="btn btn-primary btn-sm" id="ytLiveTestSuperChat">Super Chat</button>
                <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#YTLiveHideSuperChat" role="button"
                    aria-expanded="false" aria-controls="HideSuperChat"></a>
            </div>
            <div class="collapse" id="YTLiveHideSuperChat" data-bs-parent="#content-yttriggers">
                <div class="form-check ps-0 d-flex align-items-center">
                    <label class="form-check-label me-1">Amount:</label>
                    <input type="number" min="1" max="500000000" class="form-control form-control-sm me-2"
                        id="YTLiveSuperChatAmount">
                </div>
                <div class="form-check ps-0 d-flex align-items-center">
                    <label class="form-check-label me-1">Tier:</label>
                    <input type="number" class="form-control form-control-sm" min="1" max="9" id="YTLiveSuperChatTier">
                </div>
                <div class="form-check ps-0 d-flex align-items-center">
                    <label class="form-check-label me-1">Message:</label>
                    <textarea type="text" rows="1" class="form-control form-control-sm" id="YTLiveSuperChatMsg"></textarea>
                </div>
            </div>
        </div>
            <div>
            <div class="yt-trigger-row">
                <button type="button" class="btn btn-primary btn-sm" id="ytLiveTestSuperSticker">Super Sticker</button>
                <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#YTLiveHideSuperSticker" role="button"
                    aria-expanded="false" aria-controls="HideSuperSticker"></a>
            </div>
            <div class="collapse" id="YTLiveHideSuperSticker" data-bs-parent="#content-yttriggers">
                <div class="form-check ps-0 d-flex align-items-center">
                    <label class="form-check-label me-1">Amount:</label>
                    <input type="number" min="1" max="100000" class="form-control form-control-sm me-2"
                        id="YTLiveSuperStickerAmount">
                </div>
            </div>
        </div>
            <div>
            <div class="yt-trigger-row">
                <button type="button" class="btn btn-primary btn-sm" id="ytLiveTestChatMessage">Chat Message</button>
                <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#YTLiveHideChatMessage" role="button"
                    aria-expanded="false" aria-controls="HideChatMessage"></a>
            </div>
            <div class="collapse" id="YTLiveHideChatMessage" data-bs-parent="#content-yttriggers">
                <div class="form-check ps-0 d-flex align-items-center">
                    <label class="form-check-label me-1">Display Name:</label>
                    <input type="text" class="form-control form-control-sm me-2" id="YTLiveChatMessageName">
                </div>
                <div class="form-check ps-0 d-flex align-items-center">
                    <label class="form-check-label me-1">Message:</label>
                    <textarea type="text" rows="1" class="form-control form-control-sm"
                        id="YTLiveChatMessageMsg"></textarea>
                </div>
                <div class="form-group mb-2">
                    <label>Badges:</label>
                    <input type="checkbox" id="YTLiveChatMessageBroadcaster"> Broadcaster
                    <input type="checkbox" id="YTLiveChatMessageMod"> Mod
                    <input type="checkbox" id="YTLiveChatMessageMember"> Member
                    <input type="checkbox" id="YTLiveChatMessageVerified"> Verified
                </div>
            </div>
        </div>
        </div>

        <!--Your external script will be inserted here-->
        <!--<script src="example.js"></script>-->
        <!--INSERT PART 1-->
        <div class="row justify-content-center mt-3 px-2 mb-5" id="footer">
          <a class="tslCollapse collapsed" data-bs-toggle="collapse" href="#installedextensions" role="button"
            aria-expanded="false" aria-controls="installedextensions"></a>
          <div class="collapse" id="installedextensions">
            <table class="tab-visibility-table">
              <thead>
                <tr>
                  <th class="visible-column">Visible</th>
                  <th>Extension</th>
                </tr>
              </thead>
              <tbody id="installedextensionsbody"></tbody>
            </table>
          </div>
          <span id='extensions-tab-buttons' class="mt-2">
            <button id="extensionsshow" class="btn btn-primary btn-sm me-1">Show All Tabs</button> <button id="extensionshide"
              class="btn btn-primary btn-sm me-1">Hide All Tabs</button> <button id="extensionsresetorder"
              class="btn btn-primary btn-sm me-1">Reset Tab Order</button> <button onclick="SAMMIRefreshBridge()"
              class="btn btn-primary btn-sm me-1">Refresh</button></span>
        </div>