loadDependencies = {import:ai-character-chat-dependencies-v1} // dexie.js, dompurify, etc.
aiTextPlugin = {import:ai-text-plugin}
textToImagePlugin = {import:text-to-image-plugin}
commentsPlugin = {import:comments-plugin}
tabbedCommentsPlugin = {import:tabbed-comments-plugin-v1}
uploadPlugin = {import:upload-plugin} // <-- for character share links
superFetch = {import:super-fetch-plugin} // <-- to bypass CORs issues in character custom code
fullscreenButtonPlugin = {import:fullscreen-button-plugin}
combineEmojis = {import:combine-emojis-plugin}
bugReport = {import:bug-report-plugin} // for comments-plugin-based feedback button - it's a helper for getting browser debug info like browser version, localStorage size limits, etc. - stuff that's relevant to bug reports

// HEADS UP:
// All the code you see here and in the bottom-right editor is what "powers" this chat app thing.
// Perchance allows you to make random generators, but it also allows you to create more complex applications like this one.
// If you accidentally opened this, then click the "fullscreen" button to go back to using the chat app.
// If you want to customize it to create your own chat app, then you can do that by editing this code, but it's pretty complex!
// I'd recommend starting simpler if you're new to Perchance.
// Start with the tutorial:  perchance.org/tutorial
// Then check out this plugin and the examples linked on the plugin page:  perchance.org/ai-text-plugin

async generateShareLinkForCharacter(json) => 
  if(!window.CompressionStream) {
    alert("Share links use a feature that's only available in modern browsers. Please upgrade your browser to the latest version to use this feature. If you're using Safari, switch to Chrome instead.");
    return;
  }
  
  let loadingModal = createLoadingModal("⏳ Generating share link...");
  
  let jsonString = JSON.stringify(json); 
  
  let urlHashData = encodeURIComponent(JSON.stringify(json)).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16); // since encodeURIComponent doesn't encode some characters (like parentheses) and they mess up markdown links
  });
  console.log("shareUrl (hash version):", `https://perchance.org/${window.generatorName}#${urlHashData}`);
  
  // convert json text to blob:
  let dataUrlJsonString = jsonString.replace(/#/g, "%23"); // since hash is a special character in dataurls (like normal URLs)
  let blob = await fetch("data:text/plain;charset=utf-8,"+dataUrlJsonString).then(res => res.blob());
  
  // compress blob:
  let compressedBlob = await compressBlobWithGzip(blob);
  
  let { url, size, error } = await uploadPlugin(compressedBlob);
  if(error) {
    loadingModal.delete();
    alert(`error: ${error}`);
  } else {
    loadingModal.delete(); 
    let fileName = url.replace("https://user-uploads.perchance.org/file/", "");
    let characterName = json.addCharacter.name.replace(/\s+/g, "_").replaceAll("~", ""); // this is just so URL is more readable - doesn't affect stored data at all
    let shareUrl = `https://perchance.org/${window.generatorName}?data=${characterName}~${fileName}`;
    console.log("shareUrl:", shareUrl);

    let colorScheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
    let result = await window.prompt2({
      content: {type:"none", html:`<div style="margin-bottom:0.5rem; opacity:0.7; font-size:90%;">Here's a link to this character that you can share with others:</div><div style="display:flex; gap:0.5rem;"><input value="${shareUrl}" style="flex-grow:1; color-scheme:${colorScheme};"> <button onclick="navigator.clipboard.writeText(this.parentElement.querySelector('input').value); this.textContent='copied ✅'; setTimeout(() => { this.textContent='copy url'; }, 2000);">copy url</button> </div>`},
    }, {cancelButtonText:null, submitButtonText:"finished"});
  }

async compressBlobWithGzip(blob) =>
  const cs = new CompressionStream('gzip');
  const compressedStream = blob.stream().pipeThrough(cs);
  let outputBlob = await new Response(compressedStream).blob();
  return new Blob([outputBlob], { type: "application/gzip" }); // <-- to add the correct mime type
 
async loadDataFromUrlThatReferencesCloudStorageFile() => 
  if(!window.DecompressionStream) {
    alert("Character share links use a browser feature that's only available in modern browsers. Please upgrade your browser to the latest version to allow for loading data from character share links.");
    return null;
  }
  
  let loadingModal = createLoadingModal("Loading character data...");
  
  try {
    // example URL:  https://perchance.org/ai-character-chat?data=Game_Master~85jf93h8hiifnd84hdksrkeh.gz
    let searchParams = new URL(window.location.href).searchParams;
    let dataParamValue = searchParams.get("data");
    if(!dataParamValue) {
      if(searchParams.get("char") && urlNamedCharacters[searchParams.get("char")]) { // see `urlNamedCharacters` list below - for URLs like https://perchance.org/ai-character-chat?char=ai-adventure
        dataParamValue = "foo~"+urlNamedCharacters[searchParams.get("char")];
      } else {
        throw new Error("Invalid share URL.");
      }
    }
    let fileName = dataParamValue.split("~").slice(-1)[0];
    let fileUrl = "https://user-uploads.perchance.org/file/"+fileName;

    let blob = await fetch(fileUrl, {signal:AbortSignal.timeout ? AbortSignal.timeout(15000) : null}).then(res => res.blob());
    let text;
    if(fileUrl.endsWith(".gz")) {
      let decompressedBlob = await decompressBlobWithGzip(blob);
      text = await decompressedBlob.text();
    } else {
      // can add other file formats in the future if needed
      throw new Error("Invalid share URL.");
    }
    let data = JSON.parse(text);
    loadingModal.delete();
    return data;
  } catch(e) {
    alert(`Failed to load chat data: ${e.message}`);
    console.error(e);
  }
  
  loadingModal.delete();
  return null;
  
async decompressBlobWithGzip(blob) =>
  const ds = new DecompressionStream("gzip");
  const decompressedStream = blob.stream().pipeThrough(ds);
  return await new Response(decompressedStream).blob();

async evaluatePerchanceTextInSandbox(text, opts) =>
  if(!opts) opts = {};
  let iframe = document.querySelector('#perchanceCodeEvaluationSandboxIframe');
  if(!iframe) {
    iframe = document.createElement("iframe");
    iframe.src = "https://7deabe31ae18ea5ed27c5f71b9633999.perchance.org/ai-character-chat-sandboxed-executor";
    iframe.id = "perchanceCodeEvaluationSandboxIframe";
    iframe.sandbox = "allow-scripts allow-same-origin";
    iframe.style.cssText = "position:fixed; width:1px; height:1px; opacity:0.01; top:-10px; right:-10px; pointer-events:none; border:0; outline:0; user-select:none;";
    document.body.append(iframe);
    iframe._resolvers = {};
    let iframeLoadResolver;
    let iframeLoadPromise = new Promise(r => iframeLoadResolver=r);
    window.addEventListener('message', (event) => {
      if(event.origin === 'https://7deabe31ae18ea5ed27c5f71b9633999.perchance.org') {
        if(event.data.finishedLoading) {
          iframeLoadResolver();
          return;
        }
        const { requestId, text } = event.data;
        if(iframe._resolvers[requestId]) {
          iframe._resolvers[requestId](text);
          delete iframe._resolvers[requestId];
        }
      }
    });
    await iframeLoadPromise;
  }
  const requestId = Math.random().toString();
  return new Promise((resolve, reject) => {
    iframe._resolvers[requestId] = resolve;
    if(opts.timeout) {
      setTimeout(() => {
        if(iframe._resolvers[requestId]) reject("Sandbox did not respond in time.");
      }, opts.timeout);
    }
    iframe.contentWindow.postMessage({ text, requestId }, 'https://7deabe31ae18ea5ed27c5f71b9633999.perchance.org');
  });

urlNamedCharacters
  assistant = assistant
  psychologist = 615fdef95fa7e75cbbaf943dc44d72be.gz
  ai-adventure = 6c2f68e41de41e75a51971487c97b2d9.gz
  coding-assistant = 570b3c67b8ed9ed8f83ef652be549b1c.gz
  story-writer = 76b20593b117ab083d746312df4df296.gz
  world-war-simulator = e1cf5213432a7eb9e310ec269fe38672.gz
  therapist = 5cdaa39f9aabc7424c3b2e1b780a1e29.gz
  // NOTE: must add named chars to $meta.dynamic too

$meta
  // construct metadata based on character if the URL has a character reference:
  async dynamic(inputs) => // note that $meta.dynamic function *cannot reference/use any variables/lists/etc. that are outside of itself*. In other words, its code must be *fully* self-contained (i.e. only use `inputs.urlParams`). It must also use pure JavaScript (i.e. no Perchance-specific features like `foo.selectOne`, `foo.titleCase`, etc.).
    let defaults = {
      title: `AI Character Chat (online, free, no sign-up, unlimited)`,   
      description: `Perchance AI Chat - completely free, online, no login, unlimited messages, unlimited AI-generated images. Chat with AI characters via this Character.AI (C.AI) chat alternative. Custom AI character creation. Chat to the default Chloe character, or make your own AI character and talk to them freely - no limits, and no freemium gimicks that lure you to sign up. No message limits, no filter. You can create characters that can send pictures/images/photos, roleplay chatbots, AI RPGs/D&D experiences, an AI Dungeon alternative, anime AI chat, and basically anything else you can think of. No restrictions on daily usage. Like ChatGPT, but for fictional character RPs and AI characters, with image generation in chat.`,
    };
    let fileName;
    if(inputs.urlParams.data && inputs.urlParams.data.endsWith(".gz")) {
      fileName = inputs.urlParams.data.split("~").slice(-1)[0];
    } else if(inputs.urlParams.char) {
      if(inputs.urlParams.char === "assistant") {
        return {
          title: `AI Character Chat (online, free, no sign-up, unlimited)`,   
          description: `AI Chat with characters for roleplaying or to get help with writing, language practice, creative tasks, coding questions, and lots more. Completely free, online, no login, unlimited messages, unlimited AI-generated images. Basically a more creative (and unfiltered/uncensored) ChatGPT alternative. Chat to the Chloe or make an AI assistant/character and talk to them freely - no limits on credits, and no freemium gimicks that lure you to sign up. Completely unlimited, no filter. You can create characters that can send pictures/images/photos, roleplay chatbots, AI RPGs/D&D game masters. Like ChatGPT, but better at fictional character RPs and AI characters, with image generation in chat.`,
        };
      }
      let urlNamedCharacters = {
        "ai-adventure": "6c2f68e41de41e75a51971487c97b2d9.gz",
        "coding-assistant": "570b3c67b8ed9ed8f83ef652be549b1c.gz",
        "story-writer": "76b20593b117ab083d746312df4df296.gz",
        "world-war-simulator": "e1cf5213432a7eb9e310ec269fe38672.gz",
        "psychologist": "615fdef95fa7e75cbbaf943dc44d72be.gz",
        "therapist": "5cdaa39f9aabc7424c3b2e1b780a1e29.gz",
      };
      fileName = urlNamedCharacters[inputs.urlParams.char];
    }
    if(fileName) {
      try {   
        let fileUrl = "https://user-uploads.perchance.org/file/" +  fileName;
        let blob = await fetch(fileUrl, {signal:AbortSignal.timeout ? AbortSignal.timeout(8000) : null}).then(res => res.blob());
        const ds = new DecompressionStream("gzip");
        const decompressedStream = blob.stream().pipeThrough(ds);
        let decompressedBlob = await new Response(decompressedStream).blob();
        let text = await decompressedBlob.text();
        let data = JSON.parse(text);
        let character = data.addCharacter;
        return {
          title: character.metaTitle ? character.metaTitle : `${character.name.slice(0, 40)} - AI Character Chat (free, no sign-up, unlimited)`,
          description: character.metaDescription ? character.metaDescription : `Chat with the ${character.name} AI character. Here's this character's description: ${character.roleInstruction.slice(0, 450).replace(/\s+/g, " ")}`,
          image: character.metaImage ? character.metaImage : character.avatarUrl,
        };
      } catch(e) {
        console.error(e);
        return defaults;
      }
    } else {
      return defaults;   
    }




getMessageObjsWithoutSummarizedOnes(messages, opts) =>
  if(!opts) opts = {};
  messages = messages.slice(0);
  const minimumMessageLevel = opts.minimumMessageLevel || 0; // used by the summarization process.
  
  let messageObjsWithoutSummarizedOnes = [];
  let highestLevelSeen = 0;
  
  // it's we go backwards through the messages, and only 'collect' a message if its level is not below the highest level we've seen so far. it makes sense if you think about it for a bit.
  // said another way, we go from the end of the messages to the start while 'monotonically climbing' up a level whenever we hit a 'higher' message.
  while(messages.length > 0) {
    let m = messages.pop();
    let level = m.summariesEndingHere ? Math.max(...Object.keys(m.summariesEndingHere).map(n => Number(n))) : 0;
    if(level < minimumMessageLevel) continue;
    if(level >= highestLevelSeen) {
      messageObjsWithoutSummarizedOnes.unshift(m);
      highestLevelSeen = level;
    }
  }
  return messageObjsWithoutSummarizedOnes; // NOTE: that this returns the message objects - when actually using for inference, you need to **use the highest level summary available within each message** (or the message text itself if `message.summariesEndingHere` is undefined)

async injectHierarchicalSummariesAndComputeNextSummariesInBackgroundIfNeeded(threadId, opts) =>
  // HEADS UP: This function is a bit confusing/convoluted, in part because it was "ported" from /ai-chat
  // which uses a plain textarea instead of an IndexedDB database of actual message objects.
  if(!window.__aiHierarchicalSummaryStuff) window.__aiHierarchicalSummaryStuff = {};
  if(!window.__aiHierarchicalSummaryStuff[threadId]) {
    window.__aiHierarchicalSummaryStuff[threadId] = {};
    window.__aiHierarchicalSummaryStuff[threadId].summariesReadyToInject = [];
  }
  if(!opts) opts = {};
  
  // IMPORTANT: these messages will not have the latest N summaries (where N is defined below) in their summariesEndingHere property because we withhold them (see code below) until we have a few of them so that prefix cache invalidation doesn't happen every step.
  let originalMessages = await db.messages.where({threadId}).toArray();
  
  let idToOriginalMessage = originalMessages.reduce((a,v) => (a[v.id]=v, a), {});
  let preparedMessages = await prepareMessagesForBot({messages:originalMessages})
  for(let m of preparedMessages) {
    let originalMessage = idToOriginalMessage[m.id];
    if(originalMessage.summariesEndingHere) m.summariesEndingHere = originalMessage.summariesEndingHere;
  }
  
  let thread = await db.threads.get(threadId);
  let threadCharacter = await db.characters.get(thread.characterId);
  let userName = thread.userCharacter.name ?? threadCharacter.userCharacter.name ?? (await getUserCharacterObj()).name;
  let characterName = thread.character.name ?? threadCharacter.name;
  let roleInstruction = threadCharacter.roleInstruction.replaceAll("{{char}}", characterName).replaceAll("{{user}}", userName);
  let extraContext = `In case it's useful here's a description of the **${characterName}** character: `+roleInstruction.replace(/\n+/g, " ");
  
  let idToPreparedMessage = preparedMessages.reduce((a,v) => (a[v.id]=v, a), {});
  
  // inject summaries if we have any - NOTE: we inject them into the preparedMessages *regardless* of whether we actually inject them into the DB (see note below on prefix cache stuff), since the next summary to be computed needs to have a completely up-to-date version of the messages - otherwise it'll repeat summaries that it has already done.
  if(window.__aiHierarchicalSummaryStuff[threadId].summariesReadyToInject.length > 0) {
    // NOTE: lastMessageSummarizedId is the id of the message object, but one of that objects *summaries* (i.e. `message.summary[level]`) may have been what was actually last summarized
    let messagesToUpdate = new Set();
    for(let {summarizedMessages, lastMessageSummarizedId, summary, memories, level} of window.__aiHierarchicalSummaryStuff[threadId].summariesReadyToInject) {
      if(level <= 0) { console.error("summary level should be 1 or higher"); continue; }
      let lastSummarizedMessageText = summarizedMessages[summarizedMessages.length-1];
      let lastMessageObjInSummary = idToPreparedMessage[lastMessageSummarizedId];
      if(!lastMessageObjInSummary) {
        console.error(`!lastMessageObjInSummary ???? either the lastMessageSummarizedId is somehow wrong, or the original message no longer exists? custom code manipulating messages (specifically ids, maybe? or just deleted old message?)`, {preparedMessages, idToPreparedMessage, lastMessageSummarizedId});
        continue;
      }
      let expectedLastSummarizedText = level===1 ? `${lastMessageObjInSummary.name}: ${lastMessageObjInSummary.content}` : lastMessageObjInSummary.summariesEndingHere[level-1];
      if(expectedLastSummarizedText.trim() === lastSummarizedMessageText.trim()) { // mainly as a safety check in case of algorithm bugs, since we're only checking the *last* message
        let m = lastMessageObjInSummary;
        if(!m.summariesEndingHere) m.summariesEndingHere = {};
        m.summariesEndingHere[level] = summary;
        if(memories) {
          // NOTE: as of writing, we only do memory creation at a single level. But I'm making memoriesEndingHere a level-keyed object like summariesEndingHere just in case I end up adding 'multi-level' memories at some point.
          if(!m.memoriesEndingHere) m.memoriesEndingHere = {};
          if(!m.memoriesEndingHere[level]) m.memoriesEndingHere[level] = [];
          m.memoriesEndingHere[level].push(...(memories || []).map(memText => ({text:memText, embedding:null}))); // NOTE: this code gets run even when we're not injecting the updates from messagesToUpdate into the database. So we don't compute embedding here, because it's not needed for summary process, and this will get run every time this function is called, so we'd end up embedding the text multiple times for no reason. So instead we only do the embedding when we actually inject memories into the database (see window.embedTexts call below).
        }
        messagesToUpdate.add(m);
      } else {
        console.warn("Content of last-summmarized-message doesn't match content of message at lastMessageSummarizedId. Safe to ignore this warning if messages have been edited since last 'send' button click. This summary will simply be discarded and we'll compute a new one with the up-to-date messages.");
      }
    }
    // IMPORTANT: we only inject summaries into the actual database if we have more than N of them, to reduce prefix cache invalidation.
    if(window.__aiHierarchicalSummaryStuff[threadId].summariesReadyToInject.length >= 3) { // CAUTION: if you make this number higher, you might need to subtract more from idealMaxContextTokens, below. Otherwise middle-out stuff will do its own prefix cache invalidation.
      for(let m of messagesToUpdate) {
        // now that we're actually going to inject memories into the database, we compute the embeddings:
        if(window.textEmbedderFunction) { // can't save memories if the user's browser can't load the text embedder model (for whatever reason)
          if(m.memoriesEndingHere) {
            for(let level in m.memoriesEndingHere) {
              for(let memory of m.memoriesEndingHere[level]) {
                if(!memory.embedding) {
                  let [ embedding ] = await window.embedTexts({textArr:[memory.text], modelName:thread.textEmbeddingModelName});
                  memory.embedding = embedding;
                }
              }
            }
          }
        }
        let updateObj = {summariesEndingHere: m.summariesEndingHere};
        if(window.textEmbedderFunction) {
          if(m.memoriesEndingHere) updateObj.memoriesEndingHere = m.memoriesEndingHere;
        }
        await db.messages.update(m.id, updateObj);
      }
      window.__aiHierarchicalSummaryStuff[threadId].summariesReadyToInject = [];
    }
  }
  
  const { countTokens, idealMaxContextTokens } = root.aiTextPlugin({getMetaObject:true});
  let tokenCountToIdeallyStayUnder = idealMaxContextTokens-800; // leave buffer to allow for only intermittent summary injection (to prevent prefix cache invalidation after ~every message)
  
  const numCharsToSummarizeAtATime = 1500; // don't make this bigger without testing - IIRC, the summary calls to the AI could have context too large (causing implicit middle-out ablation) at when the summary hierarchy gets "deep"
  
  const messageTextWithSummaryReplacements = root.getMessageObjsWithoutSummarizedOnes(preparedMessages).map(m => {
    let level = m.summariesEndingHere ? Math.max(...Object.keys(m.summariesEndingHere).map(n => Number(n))) : 0;
    if(level === 0) return m.content;
    else return m.summariesEndingHere[level];
  });
  
  let currentlyUsedContextLength = countTokens(messageTextWithSummaryReplacements.join("\n\n") + (opts.extraTextForAccurateTokenCount || ""));
  if(currentlyUsedContextLength < tokenCountToIdeallyStayUnder) {
    console.log(`Summarization NOT needed. currentlyUsedContextLength=${currentlyUsedContextLength} which is less than ${tokenCountToIdeallyStayUnder}`, messageTextWithSummaryReplacements);
    window.summarizationWasNeededLastCheck = false;
    return;
  } else {
    console.log(`Summarization IS needed. currentlyUsedContextLength=${currentlyUsedContextLength} which is greater than ${tokenCountToIdeallyStayUnder}`, messageTextWithSummaryReplacements);
    window.summarizationWasNeededLastCheck = true;
  }
      
  // compute next summary in background if needed:
  (async function() {
    if(window.__aiHierarchicalSummaryStuff[threadId].alreadyDoingSummary) return;
    try {
      window.__aiHierarchicalSummaryStuff[threadId].alreadyDoingSummary = true;
      
      const allMessageObjs = [];
      let i = 0;
      for(let m of preparedMessages) {
        allMessageObjs.push({
          text: `${m.name}: ${m.content}`, // WARNING: if you change the format of this, you need to change the `expectedLastSummarizedText` check, above, since they need to *exactly* match for the sanity check to pass
          index: i++,
          messageId: m.id,
          level: 0,
        });
        let summaryEntries = Object.entries(m.summariesEndingHere || {}).sort((a,b) => Number(a[0])-Number(b[0]));
        for(let [level, summary] of summaryEntries) {
          level = Number(level);
          allMessageObjs.push({
            text: summary,
            index: i++,
            messageId: m.id,
            level,
          });
        }
      }
      
      // conceptually we treat each "level" just like the first.
      // the first level is just a bunch of messages with interspersed "SUMMARY^1: ..." messages, where the summary messages are a summary of the messages before them, up to the *previous* "SUMMARY^1: ..." message.
      // so for the next level, we just delete/ignore the ^0 messages (i.e. the *actual* messages), and do exactly the same thing - i.e. treat "SUMMARY^1: ..." as if they were "messages" and "SUMMARY^2: ..." are the summaries of those "messages".
      
      let summaryLevelToMessageBlocks = new Map();
      let summaryLevelBeingProcessed = 1;
      while(1) {
        // grab messages that are relevant to this 'level' (i.e. only this level and lower one):
        const thisLevelAndPreviousLevelMessageObjs = allMessageObjs.filter(m => m.level === summaryLevelBeingProcessed || m.level === summaryLevelBeingProcessed-1);
        
        if(thisLevelAndPreviousLevelMessageObjs.length === 0) {
          console.log("Finished creating summaryLevelToMessageBlocks.");
          break;
        }
        
        // get all summary 'blocks' (i.e. groups of messages ending with a summary message of this `level` that summarizes them, except for final block which doesn't have a summary at the end)
        const blocks = [];
        let currentBlock = [];
        currentBlock.messageData = []; // data for each message, in same order as the messages in the block
        for(let m of thisLevelAndPreviousLevelMessageObjs) {
          currentBlock.push(m.text);
          currentBlock.messageData.push(m);
          if(m.level === summaryLevelBeingProcessed) {
            blocks.push(currentBlock);
            currentBlock = [];
            currentBlock.messageData = [];
          }
        }
        if(summaryLevelBeingProcessed === 1 && currentBlock.length === 0) {
          console.warn("final block for summaryLevel==1 should have messages? if it doesn't, then we're maybe summarizing too close to the end of the chat log?");
        }
        blocks.push(currentBlock); // final block doesn't have a summary at the end
        summaryLevelToMessageBlocks.set(summaryLevelBeingProcessed, blocks);
        
        summaryLevelBeingProcessed++;
      }
      
      const summaryLevelBlockEntries = [...summaryLevelToMessageBlocks.entries()].sort((a,b) => a[0]-b[0]); // ascending order
      for(let [summaryLevel, blocks] of summaryLevelBlockEntries) {
        
        // note: a block is just an array of messages, and all of them have a summary message (i.e. higher-level message) at the end EXCEPT the last block - we're in the process of adding that summary message here.
        // but also note: the block has a messageData property which is also an array (see above)
        let messagesToSummarizeFromFinalBlock = blocks[blocks.length-1];
        
        // note that we can use numCharsToSummarizeAtATime here even for the first level without worrying about summarizing too close to the end of the chat because we have a currentlyUsedContextLength check before running this summarization process.
        let numCharsInFinalBlock = messagesToSummarizeFromFinalBlock.reduce((a,v) => a+v.length, 0);
        if(numCharsInFinalBlock < numCharsToSummarizeAtATime) { 
          console.log(`summaryLevel=${summaryLevel} doesn't need summarizing yet. numCharsInFinalBlock=${numCharsInFinalBlock}`);
          continue;
        }
      
        // remove messages from last block (which contains all messages after the last summary) until it's a good size for summarization:
        while(1) {
          if(messagesToSummarizeFromFinalBlock.length <= 1) break;
          let numChars = messagesToSummarizeFromFinalBlock.reduce((a,v) => a+v.length, 0);
          if(numChars < numCharsToSummarizeAtATime) break;
          
          // to speed things up, drop latter half if it's way too big:
          if(numChars > numCharsToSummarizeAtATime*10) {
            let halfOfMessagesCount = Math.floor(messagesToSummarizeFromFinalBlock.length/2);
            for(let j = 0; j < halfOfMessagesCount; j++) {
              messagesToSummarizeFromFinalBlock.pop();
              messagesToSummarizeFromFinalBlock.messageData.pop();
            }
          } else {
            messagesToSummarizeFromFinalBlock.pop();
            messagesToSummarizeFromFinalBlock.messageData.pop();
          }
        }

        if(messagesToSummarizeFromFinalBlock.length === 0) {
          console.error("No messages to summarize??");
          continue;
        }

        // let existingSummary = window.__aiHierarchicalSummaryStuff[threadId].summariesReadyToInject.filter(s => s.summarizedMessages.join("\n\n") === messagesToSummarizeFromFinalBlock.join("\n\n"))[0];
        // if(existingSummary) {
        //   console.error("Existing summary hasn't been injected yet?? Should have happened before this code ran.");
        //   return;
        // }
        
        // Note: It may seem brittle to choose an *index* to inject the summary at, but we also check to ensure the previous message matches.
        // And if the text has since been edited, that's fine - the summary just gets thrown away and we re-do it next time the send button is clicked.
        let lastMessageSummarizedData = messagesToSummarizeFromFinalBlock.messageData[messagesToSummarizeFromFinalBlock.length-1];
        let lastMessageSummarizedIndex = lastMessageSummarizedData.index;
        let lastMessageSummarizedId = lastMessageSummarizedData.messageId;
        if(messagesToSummarizeFromFinalBlock.messageData.length !== messagesToSummarizeFromFinalBlock.length) { console.error("should be one data object per message (aligned)"); return; }
        
        let exampleBlocksForStartWith = blocks.slice(-3, -1);
        let exampleBlockSummaries = exampleBlocksForStartWith.map(b => b[b.length-1]);
        
        // we get all messages for this summary level and above for placement in instruction (i.e. as context to help with summarization):
        let summariesAtThisLevelAndAbove = root.getMessageObjsWithoutSummarizedOnes(preparedMessages, {minimumMessageLevel:summaryLevel}).map(m => {
          let level = m.summariesEndingHere ? Math.max(...Object.keys(m.summariesEndingHere).map(n => Number(n))) : 0;
          if(level === 0) return m.content; 
          else return m.summariesEndingHere[level];
        });
        
        // note that we can't just remove the last two instruction summaries here - they aren't necessarily the same as the summaries from the `exampleBlocksForStartWith` because they may have been 'compressed' into a higher level, so there can actually be no overlap at all.
        // so we need to pop the instructionSummaries off based on the ones that are actually in the example blocks:
        let instructionSummaries = JSON.parse(JSON.stringify(summariesAtThisLevelAndAbove));
        while(1) {
          if(instructionSummaries.length === 0) break;
          if(exampleBlockSummaries.includes(instructionSummaries[instructionSummaries.length-1])) {
            instructionSummaries.pop();
            continue;
          }
          break;
        }
        
        let startWithBlocks = exampleBlocksForStartWith.map((block) => ({messages:block.slice(0, -1), summary:block.slice(-1)[0]}));
        startWithBlocks.push({messages:messagesToSummarizeFromFinalBlock, summary:""});
        
        let startWith = startWithBlocks.map(({messages, summary}, blockI) => {
          let letterLabel = "";
          if(blockI===0) letterLabel = "[A]";
          if(blockI===1) letterLabel = "[B]";
          if(blockI===2) letterLabel = "[C]";

          let messagesText = messages.map((message, mi) => {
            message = message.replace(/\n/g, " ").trim();
            return `${summaryLevel === 1 ? `(${mi+1}) ` : ""}${message}`; // we prefix bottom-level messages with numbers, but not SUMMARY^N messages.
          }).join(" ");
          
          summary = summary.replace(/\n/g, " ").trim();

          return `>>> FULL TEXT of ${letterLabel}: ${messagesText}\n>>> SUMMARY of ${letterLabel}: ${summary}`;
        }).join("\n\n");
        
        // since it's possible for there to be no blocks before the messages to summarize
        startWith = startWith.trim(); // this is also important to prevent whitespace at end of startWith
        
        // This shared prefix is extracted above so that memory creation (after summary creation) is sure to hit the prefix cache.
        let sharedContextPrefixText = [
          `Below is${extraContext ? ` some context, plus` : ""} a summary of some events. You must use this information to complete the '@@@ TASK' specified at the bottom of this instruction.`,
          `${extraContext ? `\n# Potentially Useful Context (may or may not be relevant):\n${extraContext}\n` : ""}`,
          `# Summary of Previous Events:`,
        ].join("\n").trim();

        // WARNING: In functions defined within Perchance lists, *full* dedentation of *every* line happens automatically. If you move this into a <script> function, then this needs to be dedented manually.
        const summaryTaskPrompt = `@@@ TASK: Your task is to generate some text and then a 'SUMMARY' of that text, and then do that a few more times. Above are the characters and the initial scenario, and a summary of earlier events. You must write the text, and then a summary of that text that you wrote, and then some more text, and a summary of that new text, and do it a few more times. Each summary should be a single paragraph of text which concisely compresses the recent text to roughly half its original size.
        IMPORTANT: Every summary must be UNIQUE, and it must be concise, and information dense. Avoid flowery prose in summaries. Write concise summaries, but don't miss any important facts/events.
        IMPORTANT: Summaries must contain ALL important details from the text they're summarizing. Try to include *every* important detail in your summaries, resulting in a summary that is about half the length of the original text.
        Use this format/template for your response:
        \`\`\`
        >>> FULL TEXT of [A]: <some text>
        >>> SUMMARY of [A]: <a dense, one-paragraph summary of the [A] text>
        ---
        >>> FULL TEXT of [B]: <some text>
        >>> SUMMARY of [B]: <a dense, one-paragraph summary of the [B] text>
        ---
        >>> FULL TEXT of [C]: <some text>
        >>> SUMMARY of [C]: <a dense, one-paragraph summary of the [C] text>
        \`\`\`
        Again, your task is to write some text labelled with a letter, and then a summary of that text, and then some new text, and then a summary of that new text, and so on. Each summary should be a single paragraph of text which compresses the new text to roughly half its original length. Don't add flowery prose to summarise. Summary messages should be *dense* with important facts and information. Include *all* the plausibly-relevant details from the text within the summary.
        IMPORTANT: Each 'SUMMARY' message must be UNIQUE and distinct from previous summaries. And 'SUMMARY of [C]' should include ALL important details from the [C] text and *never* invent any details that weren't in the text. Avoid accidentally repeating the events/details from earlier messages/summaries.
        IMPORTANT: The summaries must use short, information-dense sentences to compress the text into the key facts. Summaries should concisely capture *all* the *important* points from the text, compressing the text to about half its original length while retaining all important events/details.`.trim();

        let promptOptions = {
          instruction: [ // IMPORTANT: if you change this instruction, make sure you don't affect the shared prefix cache with the memory generation, below
            sharedContextPrefixText,
            (instructionSummaries.length > 0 ? instructionSummaries : ["(None.)"]).join("\n"),
            ``,
            summaryTaskPrompt,
          ].join("\n").trim(),
          startWith,
          stopSequences: ["\n\n", "\n---", "\n>>> FULL TEXT", "FULL TEXT"],
        };
        let data = await root.aiTextPlugin(promptOptions);
        if(data.stopReason === "error") continue; // could retry a few times, but this is no big deal, since every message sent triggers another attempt

        let summary = data.generatedText.trim().replace(/\n+/g, " ").trim().replace(/---$/, "").replace(">>> FULL TEXT", "").replace("FULL TEXT", "").trim();
        if(!summary.trim() || (instructionSummaries[instructionSummaries.length-1] || "").trim() === summary.trim()) {
          // AI has copied the previous summary, which sometimes happens.
          console.warn("AI copied previous summary. Skipping this summary level for this 'round'.");
          continue;
        }
        
        let messagesSummarizedText = messagesToSummarizeFromFinalBlock.map((message, i) => {
          message = message.replace(/\n/g, " ").trim();
          return `(${i+1}) ${message}`;
        }).join(" ");
        
        // Generate memories if they're enabled, and if this is a level 2 summary. We use level 2 summaries because level 1 tends not to have enough 'substance'/info-density to extract several lore/fact entries from.
        let memories;
        if(summaryLevel === 1 && opts.shouldCreateMemories) {  
        
          // WARNING: In functions defined within Perchance lists, *full* dedentation of *every* line happens automatically. If you move this into a <script> function, then this needs to be dedented manually.
          const memoryTaskPrompt = `@@@ TASK: Your task is condense the *NEW_TEXT* below into a series of up to 3 lore/memory/fact entries which can be added to a database of facts about this story/world/roleplay/chat. You must extract "timeless facts", not temporary facts.
          - An example of a "timeless fact" is "<char> was born in <town>". An example of a temporary fact is "<char> is hungry right now". We only want to put timeless facts in the database. Things that are likely to *always* be true.
          - You should aim to make each entry fully self-contained, since an entry may be read on its own. Within each fact, provide enough surrounding context such that it would make sense if read on its own. Each entry must be self-contained.
          - Give enough context so there there is no ambiguity in what/who is being referenced in each lore/memory entry that you write.
          - Each entry should be no more than 3 sentences.
          - Writing facts about specific significant/interesting events that happened is permissable, so long as you give enough details to deduce EXACTLY *when* AND *where* it happened. Don't leave any ambiguity.
          - Use actual *names* instead of pronouns or other relative references. For example, instead of "He said to her..." you should write "Bob said to Alice...". And instead of "this town" you should write the full name of the town/location.
          - If you're unsure whether a fact is "timeless", then you should err on the side of caution by adding more context. E.g. instead of "Bob is kind to Alice" (BAD, because may not be true forever), you should say "Bob was kind to Alice when he first met her." (GOOD because, if true, will *always* be true - i.e. it's a timeless version of the fact)
          
          IMPORTANT: Do NOT write about already-known things. Don't repeat things that we already know from the above context and previous events. Do NOT mention things from above character descriptions. Only add *new* things that we learned from the NEW_TEXT. Your task is to extract **NEW** information that we didn't already know. Only from NEW_TEXT.
          
          # NEW_TEXT:
          ${messagesSummarizedText}
          
          Use this format/template for your response:
          
          # Lore/memory entries from NEW_TEXT:
          1. <something we can deduce directly from NEW_TEXT>
          2. <something else can deduce directly from NEW_TEXT>
          3. <another thing can deduce directly from NEW_TEXT>
          `.trim();
          
          let data = await root.aiTextPlugin({
            instruction: [ // IMPORTANT: if you change this instruction, make sure you don't affect the shared prefix cache with the summary generation, above
              sharedContextPrefixText,
              (summariesAtThisLevelAndAbove.length > 0 ? summariesAtThisLevelAndAbove : ["(None.)"]).join("\n"),
              ``,
              memoryTaskPrompt,
            ].join("\n").trim(),
            startWith: [
              `# Lore/memory entries from NEW_TEXT:`,
              `1.`,
            ].join("\n"),
            stopSequences: ["\n4."],
          });
          if(data.stopReason === "error") continue; // could retry a few times, but this is no big deal, since every message sent triggers another attempt

          memories = ("1."+data.generatedText).trim().split("\n").map(l => l.trim()).filter(l => l && /^[0-9]\. .+/.test(l)).map(l => l.replace(/^[0-9]\. /, ""));
        }
        
        console.log("----------------");
        console.log("----------------");
        console.log("----------------");
        console.log("𝗟𝗘𝗩𝗘𝗟:", summaryLevel);
        // console.log("𝗜𝗡𝗦𝗧𝗥𝗨𝗖𝗧𝗜𝗢𝗡:", instruction);
        // console.log("𝗦𝗧𝗔𝗥𝗧𝗪𝗜𝗧𝗛:", startWith);
        console.log("𝗜𝗡𝗣𝗨𝗧 𝗧𝗘𝗫𝗧:", messagesSummarizedText);
        console.log("𝗦𝗨𝗠𝗠𝗔𝗥𝗬:", summary);
        console.log("𝗠𝗘𝗠𝗢𝗥𝗜𝗘𝗦:", memories || null);
        console.log("----------------");
        console.log("----------------");
        console.log("----------------");
        
        window.__aiHierarchicalSummaryStuff[threadId].summariesReadyToInject.push({summarizedMessages:messagesToSummarizeFromFinalBlock, lastMessageSummarizedId, summary, memories, level:summaryLevel});
      }
    } catch(e) {
      console.error(e);
    } finally {
      window.__aiHierarchicalSummaryStuff[threadId].alreadyDoingSummary = false;
    }
  })();


commentChannels
  chat
  chill
  rp
  spam
  vent
  share

defaultCommentOptions
  width = 100%
  height = 100%
  commentPlaceholderText = Add a friendly comment...
  fullscreenButtonStyle = ""
  customEmojis = {import:huge-emoji-list}
  bannedUsers // for comments plugin
    300cb70b21f2d67b1496
    c3fc848cb123db2793f8
    403b16b3422020848cd0
    
    
    
    
    
    MMORE 2
    
    
    
    
   <!--

Note: You can consider all the code below to be open source under the standard MIT licenced.
I.e. you're free to do as you wish with it, including copying it, hosting it yourself, and using it commercially.

-->

<script>window.pageLoadStartTime = Date.now(); console.log("pageLoadStartTime:", window.pageLoadStartTime);</script>    
<script>window.dbName = "chatbot-ui-v1";</script>
<div id="initialPageLoadingModal" style="pointer-events:none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index: 100; display: flex; justify-content: center; align-items: center; padding: 1rem; z-index: 99999999;"><div style="background-color: white; border-radius: 3px; background-color: var(--background); border-radius: var(--border-radius); padding: 1rem; text-align: center; box-shadow: 0px 1px 10px 3px rgb(130 130 130 / 24%);">Loading...</div></div>

<div id="emergencyExportCtn" hidden style="width:100%; position:fixed; top:1rem; z-index:1000;">
  <div style="background:var(--box-color); border: 2px solid red; border-radius:var(--border-radius); margin:0 auto; padding:1rem; max-width:max-content; text-align:center;">
    <div style="font-size:80%; display:block; text-align:center; margin-bottom: 0.5rem; color:red; font-weight:bold;">Error during load?<br>Try reloading the page, or:</div>
    <button id="emergencyExportBtn" onclick="emergencyExportClickHandler(this)" style="font-size:160%;">💾 export data</button>
    <button id="emergencyDeleteDataBtn" hidden onclick="emergencyDeleteAllDataClickHandler(this)" style="font-size:160%; display:block; margin:0 auto; margin-top:2rem;">🚨 delete all data</button>
  </div>
</div>

<script>
  // Display the 'emergency' export button after several seconds if the UI hasn't loaded yet.
  // This setInterval is cleared after UI load.
  window.lastKnownActivelyLoadingTime = Date.now(); // for e.g. lore loading, we update this, to inform this timeout that it's taking a long time for 'legit' reasons
  window.emergencyExportButtonDisplayTimeout = setInterval(() => {
    if(Date.now()-window.lastKnownActivelyLoadingTime > 10000) {
      emergencyExportCtn.hidden = false;
      initialPageLoadingModal.hidden = true;
      clearInterval(window.emergencyExportButtonDisplayTimeout);
    }
  }, 5000);

  async function emergencyDeleteAllDataClickHandler() {
    emergencyDeleteDataBtn.disabled = true;
    emergencyDeleteDataBtn.textContent = `Deleting...`;
    await new Promise(r => setTimeout(r, 500));
    
    const request = window.indexedDB.deleteDatabase(window.dbName);
    
    request.onerror = function(event) {
      console.error("Error deleting database:", event);
      emergencyDeleteDataBtn.textContent = `⚠️ error`;
      alert(`Failed to delete data. Please ask for help on the forum. Screenshot this error info: ${event}`);
    };
    request.onsuccess = function(event) {
      console.log("Database deleted successfully");
      emergencyDeleteDataBtn.textContent = `✅ deleted`;
      alert(`Database deleted successfully. You can now reload/refresh the page.`);
    };
  }

  async function emergencyExportClickHandler() {
    if(!window.alreadyTriedEmergencyExport && confirm(`This could take up to 10 minutes. Please keep this browser tab visible while it runs. It'll save your data to your downloads folder when it is finished. Continue?`)) {
      window.alreadyTriedEmergencyExport = true;
      emergencyExportBtn.textContent = '⏳ loading...';

      let error = null;
      
      let result = await exportRawDb(window.dbName, {
        onProgress:(e) => {
          console[e.type]("exportRawDb: "+e.message);
        },
        corruptItemReplacer: ({storeName, id, dbData}) => {
          let example = dbData[storeName][0] ? JSON.parse(JSON.stringify(dbData[storeName][0])) : {};
          if(storeName === "characters") {
            example.id = id;
            example.name = "CORRUPT";
            console.warn("REPLACED CORRUPT:", example);
            return example;
          }
          if(storeName === "threads") {
            // try to find characterId based on messages:
            let characterId;
            let firstNonUserNonSystemMessageInThread = dbData["messages"].filter(m => m.threadId === id).find(m => m.characterId >= 0);
            characterId = firstNonUserNonSystemMessageInThread ? firstNonUserNonSystemMessageInThread.characterId : dbData["characters"][0].id;
            example.id = id;
            example.characterId = characterId;
            example.name = "CORRUPT";
            return example;
          }
          // Note: we don't bother with indiviual messages/lore/etc. because they won't break the whole UI. I.e. we effectively just delete the corrupt item
        },
      }).catch(e => { error=e; console.error(e); return false; });
      
      await new Promise(r => setTimeout(r, 3000)); // just to be safe (e.g. in case of interference with file download permission popup)
      
      if(result === false) {
        emergencyExportBtn.textContent = '⚠️ failed (pls ask for help on forum)';
        alert(`Export failed. Please screenshot this and share on the forum:\n${error} ${error.stack}`);
      } else {
        emergencyExportBtn.textContent = '✅ exported';
        emergencyDeleteDataBtn.hidden = false;
        alert(`Export complete. It has been saved to your downloads folder (filename ends with '.cbor.gz'). Please try opening this page in an incognito/private/guest browsing session and import the file to test it works. If it does, then you can click the 'delete all data' button on this page to clear your current data, and then import the file.`);
      }
    }
  }
  
  async function exportRawDb(dbName, opts={}) {
    let startTime = performance.now();
    const databases = await indexedDB.databases();
    const dbInfo = databases.find(db => db.name === dbName);
    if (!dbInfo) throw new Error('Database not found');
    
    const db = await new Promise((resolve, reject) => {
      const request = indexedDB.open(dbName, dbInfo.version);
      request.onerror = () => reject(request.error);
      request.onsuccess = () => resolve(request.result);
    });
  
    const objectStores = Array.from(db.objectStoreNames);
    const exportObj = {};
    const storePromises = [];
    const corruptItems = [];
    
    for (const storeName of objectStores) {
      if(opts.skipStores && opts.skipStores.includes(storeName)) continue;
      let promise = (async function() {
        let storeStartTime = performance.now();
        const data = await new Promise((resolve, reject) => {
          const transaction = db.transaction(storeName, 'readonly');
          transaction.onabort = (e) => { alert(`TRANSACTION ABORTED (this doesn't mean the export process failed, it's still going, but please let me know on the forum if you see this): ${storeName} ${e.type}`) };
          
          const store = transaction.objectStore(storeName);
          // let request = storeName == "characters" ? {} : store.getAll(); // for testing
          let request = store.getAll();
              
          let getAllTimeout;
          request.onerror = () => { clearTimeout(getAllTimeout); reject(request.error); };
          request.onsuccess = () => { clearTimeout(getAllTimeout); resolve(request.result); };

          // If getAll times out, then we get all items one-by-one:
          getAllTimeout = setTimeout(async () => {
            if(opts.onProgress) opts.onProgress({message:`getAllTimeout: Doing individual gets for ${storeName}`, type:"warn"});
            let items = [];
            let consecutiveFails = 0;
            let alreadyGotIds = new Set(); // just for safety
            for (let id = 0; id < 1000000; id++) {
              await new Promise(r => setTimeout(r, 3));
              let resultPromise = new Promise((res, rej) => {
                let transaction = db.transaction(storeName, 'readonly');
                let store = transaction.objectStore(storeName);
                // let request = id===3814 ? {} : store.get(id); // for testing
                let request = store.get(id);
                
                request.onerror = () => rej(request.error);
                request.onsuccess = () => res(request.result);
              });
              
              let result = await Promise.race([
                resultPromise,
                new Promise(r => setTimeout(() => r({__TIMEOUT__:1}), 10000)),
              ]).catch(console.error);
              
              if (result && result.__TIMEOUT__) {
                if(opts.onProgress) opts.onProgress({message:`Timeout for id=${id} of storeName=${storeName}.${opts.corruptItemReplacer ? " Replacing with dummy item." : ""}`, type:"error"});
                corruptItems.push({storeName, id});
                result = null;
              }
              
              if (result) {
                if(!alreadyGotIds.has(result.id)) {
                  alreadyGotIds.add(result.id);
                  items.push(result);
                }
                consecutiveFails = 0;
              } else {
                consecutiveFails++;
                if(consecutiveFails > 10000) break;
              }
            }
            resolve(items);
          }, 30*1000); // it's actually okay if this triggers even when it doesn't need to, since whichever one resolves first (this, or getAll) will still just resolve with the correct data, and the second resolve call is ignored.
        }).catch(e => {
          console.error(e);
          if(opts.onProgress) opts.onProgress({message:`Error getting data for: ${storeName}: ${e}`, type:"error"});
          return null;
        });
        exportObj[storeName] = data;
        let timeTaken = performance.now()-storeStartTime;
        if(opts.onProgress) opts.onProgress({message:`Got data for: ${storeName} (took ${Math.round(timeTaken)}ms)`, timeTaken, type:"log"});
      })();
      storePromises.push(promise);
    }
    
    await Promise.race([
      new Promise(r => setTimeout(r, 5*60*1000)), // timeout
      Promise.all(storePromises),
    ]);
    
    if(opts.corruptItemReplacer) {
      for(let {storeName, id} of corruptItems) {
        if(!exportObj[storeName]) exportObj[storeName] = [];
        let item = opts.corruptItemReplacer({storeName, id, dbData:exportObj});
        if(item) exportObj[storeName].push(item);
      }
    }
    
    for (const storeName of objectStores) {
      if(!exportObj[storeName]) {
        if(opts.onProgress) opts.onProgress({message:`Timeout while waiting for data from: ${storeName}`, type:"error"});
      }
    }
    
    let CBOR = await import("https://user-uploads.perchance.org/file/4cc84b2c503aad595e5c6e9fffe24602.js").then(r => r.default).catch(console.error);
    if(!CBOR) CBOR = await import(`https://user-uploads.perchance.org/file/4cc84b2c503aad595e5c6e9fffe24602.js?v=${Math.random()}`).then(r => r.default).catch(console.error);
    if(!CBOR) CBOR = await import(URL.createObjectURL(await root.superFetch(`https://user-uploads.perchance.org/file/4cc84b2c503aad595e5c6e9fffe24602.js`).then(r => r.blob()))).then(r => r.default).catch(console.error);
    if(!CBOR) { // no idea why the above aren't working for some people, final fallback:
      await import(`https://unpkg.com/cbor-x@1.6.0/dist/index.js`).catch(console.error); // adds it as a global
      CBOR = self.CBOR;
    }
    
    let jsonToSave = { meta:{type:"ai-character-chat-db-raw-export-v1", dbName}, stores:exportObj };
  
    if(opts.onProgress) opts.onProgress({message:`Encoding...`, type:"log"});
    
    // Encode with CBOR and compress (encoding and compression take similar amounts of time, based on a 300MB test I did):
    let cborBytes = CBOR.encode(jsonToSave);
    let cborBlob = new Blob([cborBytes], { type: 'application/cbor' });
    if(opts.onProgress) opts.onProgress({message:`Compressing...`, type:"log"});
    let compressedCborBlob = await new Response(cborBlob.stream().pipeThrough(new CompressionStream('gzip'))).blob();
    
    let url = URL.createObjectURL(compressedCborBlob);
    let a = document.createElement('a');
    a.href = url;
    a.download = `ai-character-chat-db-raw-export-v1.cbor.gz`;
    a.click();
    setTimeout(() => URL.revokeObjectURL(url), 1000*60*2);
    db.close();
    let timeTaken = performance.now()-startTime;
    if(opts.onProgress) opts.onProgress({finished:true, message:`Done. (took ${Math.round(timeTaken)}ms)`, timeTaken, type:"log"});
  }
</script>

<!-- open characters base code + a loooot of hacky edits which I initially tried to keep track of, but have failed -->


<!--
notes to self:
 - Adding a new character property that can safely be undefined by default (=> no dexie db upgrade needed) just involves adding it to `characterDetailsPrompt` (with correct parsing/unparsing if needed) and optionally `characterPropertiesVisibleToCustomCode`, and possibly update getCharacterHash. If you need to react to custom code changes, you may need to add rendering/etc calls in `updateDbWithNewDataFromCustomCode`. In cases where undefined is not viable as default, you will also need to check/update `getUserCharacterObj` and `getSystemCharacterObj`.
-->


<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/dexie/4.0.8/dexie.min.js"></script>
<script src="https://unpkg.com/dexie-export-import@4.1.2/dist/dexie-export-import.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked@4.2.12/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.1/dist/purify.min.js"></script>
-->
<!-- BUNDLE OF ABOVE SCRIPTS: -->
<!-- old version 1: <script src="https://user-uploads.perchance.org/file/9992637c7d690500ce39ae476424fd7c.js"></script> --> 
<!-- old version 2: <script src="https://user-uploads.perchance.org/file/e7f08d9c863ca4a4a6c2eed28bf21ef9.js"></script> -->

<!-- <script id="mainDependencyBundleScriptEl" src="https://user-uploads.perchance.org/file/356cdae1f07f47ea93584f5dafea8a8c.js"></script> -->
<script>
  root.loadDependencies(); // dependencies script now put inside a generator that exports a function to execute it
</script>

<!-- <script src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.0/dist/index.min.js"></script> -->

<script>
  const aiTextPluginMetaObject = root.aiTextPlugin({getMetaObject:true});
  window.countTokens = aiTextPluginMetaObject.countTokens;
  window.idealMaxContextTokens = aiTextPluginMetaObject.idealMaxContextTokens;
  
  // TODO: swipe animation - slide it all the way off the screen, and slide a "..." dummy onto the screen

  window.$$ = (selector) => document.querySelectorAll(selector);

  // add a proxy to $ that captures function calls and has a getter for ids:
  window.$ = new Proxy(function(){}, {
    get: (target, prop) => {
      if(/^[a-zA-Z0-9]+$/.test(prop)) {
        return document.querySelector(`#${prop}`);
      }
    },
    apply: (target, thisArg, args) => {
      return document.querySelector(args[0]);
    }
  });

  window.showEl = (el) => {
    if(el.style.display !== 'none') return;
    el.style.display = el.dataset.originalDisplayValue || '';
  };
  window.hideEl = (el) => {
    if(el.style.display === 'none') return;
    el.dataset.originalDisplayValue = el.style.display;
    el.style.display = 'none';
  };

  window.delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));


  window.createFloatingWindow = function(opts={}) {
    const defaults = { backgroundColor: getComputedStyle(document.body).getPropertyValue('background-color'), borderColor: "#eaeaea", borderRadius: "3px", initialWidth: 500, initialHeight: 300 };
    Object.keys(defaults).forEach(key => { if (!opts[key]) opts[key] = createFloatingWindow.defaults?.[key] ?? defaults[key]; });

    let left = Math.max(0, (window.innerWidth - opts.initialWidth) / 2)
    let top = opts.top ?? 50;
    let windowEl = document.createElement("div");
    windowEl.innerHTML = `
      <div class="window" style="background-color:${opts.backgroundColor}; border:1px solid ${opts.borderColor}; border-radius:${opts.borderRadius}; width:${opts.initialWidth}px;height:${opts.initialHeight}px;z-index:999999999;position:fixed; top:${top}px; left:${left}px; box-shadow:0px 1px 10px 3px rgb(130 130 130 / 24%); display:flex; flex-direction:column;">
        <div class="header" style="user-select:none; cursor:move; border-bottom: 1px solid var(--border-color);display: flex;justify-content: space-between; padding:0.25rem;">
          <div>${opts.header || ""}</div>
          <div class="closeButton" style="min-width: 1.3rem; background: #9e9e9e; display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius:${opts.borderRadius};">✖</div>
        </div>
        <div class="body" style="overflow:auto; width:100%; height:100%;">${opts.body || ""}</div>
        <div class="cornerResizeHandle" style="position:absolute; bottom:0; right:0; cursor:se-resize; user-select:none;width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent #9e9e9e transparent; z-index: 2;"></div>
        <div class="leftResizeBar" style="position:absolute; top:0; left:0; width:5px; height:100%; cursor:ew-resize; z-index: 1;"></div>
        <div class="rightResizeBar" style="position:absolute; top:0; right:0; width:5px; height:100%; cursor:ew-resize; z-index: 1;"></div>
      </div>
    `;
    windowEl = windowEl.firstElementChild;

    const elements = ['header', 'body', 'closeButton', 'cornerResizeHandle', 'leftResizeBar', 'rightResizeBar'].reduce((acc, el) => ({ ...acc, [el]: windowEl.querySelector(`.${el}`) }), {});

    let dragState = { active: false, x: 0, y: 0 };
    let resizeState = { active: null, startX: 0, startWidth: 0, startLeft: 0 };

    const handlers = {
      mousedown: (e) => { dragState = { active: true, x: e.clientX, y: e.clientY }; },
      mousemove: (e) => {
        if (dragState.active) {
          const dx = e.clientX - dragState.x, dy = e.clientY - dragState.y;
          const newTop = Math.max(0, Math.min(parseInt(windowEl.style.top) + dy, window.innerHeight - windowEl.offsetHeight));
          const newLeft = Math.max(0, Math.min(parseInt(windowEl.style.left) + dx, window.innerWidth - windowEl.offsetWidth));
          windowEl.style.top = `${newTop}px`; windowEl.style.left = `${newLeft}px`;
          dragState.x = e.clientX; dragState.y = e.clientY;
        }
        if (resizeState.active) {
          const dx = e.clientX - resizeState.startX;
          if (resizeState.active === 'left') {
            const newWidth = Math.max(200, resizeState.startWidth - dx);
            const newLeft = resizeState.startLeft + (resizeState.startWidth - newWidth);
            if (newLeft >= 0 && newLeft + newWidth <= window.innerWidth) {
              windowEl.style.width = `${newWidth}px`; windowEl.style.left = `${newLeft}px`;
            }
          } else if (resizeState.active === 'right') {
            const newWidth = Math.max(200, resizeState.startWidth + dx);
            if (resizeState.startLeft + newWidth <= window.innerWidth) windowEl.style.width = `${newWidth}px`;
          } else if (resizeState.active === 'corner') {
            const dy = e.clientY - resizeState.startY;
            let newWidth = Math.min(resizeState.startWidth + dx, window.innerWidth - parseInt(windowEl.style.left));
            let newHeight = Math.min(resizeState.startHeight + dy, window.innerHeight - parseInt(windowEl.style.top));
            if(newWidth < 200) newWidth = 200;
            if(newHeight < 200) newHeight = 200;
            windowEl.style.width = `${newWidth}px`; windowEl.style.height = `${newHeight}px`;
          }
        }
      },
      mouseup: () => { dragState.active = false; resizeState.active = null; },
      startResize: (e, side) => {
        resizeState = {
          active: side,
          startX: e.clientX,
          startY: e.clientY,
          startWidth: parseInt(windowEl.style.width, 10),
          startHeight: parseInt(windowEl.style.height, 10),
          startLeft: parseInt(windowEl.style.left, 10)
        };
      }
    };

    elements.header.addEventListener('mousedown', handlers.mousedown);
    elements.leftResizeBar.addEventListener('mousedown', (e) => handlers.startResize(e, 'left'));
    elements.rightResizeBar.addEventListener('mousedown', (e) => handlers.startResize(e, 'right'));
    elements.cornerResizeHandle.addEventListener('mousedown', (e) => handlers.startResize(e, 'corner'));

    ['mousemove', 'mouseup', 'mouseleave', 'contextmenu'].forEach(event => document.documentElement.addEventListener(event, handlers[event] || handlers.mouseup));

    (opts.appendTo || document.body).appendChild(windowEl);

    const api = {
      ctn: windowEl,
      headerEl: elements.header,
      bodyEl: elements.body,
      hide: () => { windowEl.style.opacity = "0"; windowEl.style.pointerEvents = "none"; },
      show: () => { windowEl.style.opacity = "1"; windowEl.style.pointerEvents = "auto"; },
      delete: () => {
        windowEl.remove();
        ['mousemove', 'mouseup', 'mouseleave', 'contextmenu'].forEach(event => document.documentElement.removeEventListener(event, handlers[event] || handlers.mouseup));
      }
    };

    elements.closeButton.addEventListener("click", opts.closeButtonAction === "hide" ? api.hide : api.delete);

    return api;
  }


  window.sanitizeHtml = function(text) {
    if(text === undefined) text = "";
    text = text+"";
    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
  }




  speechSynthesis.getVoices(); // this is needed to populate the list of voices in (some?) browsers

  window.textToSpeech = function({text, voiceName}) {
    return new Promise((resolve, reject) => {
      const voices = speechSynthesis.getVoices();
      const voice = voices.find(v => v.name === voiceName);
      const utterance = new SpeechSynthesisUtterance();
      utterance.text = text;
      utterance.voice = voice;
      utterance.rate = 1.3;
      utterance.pitch = 1.0;
      utterance.onend = function() {
        resolve();
      };
      utterance.onerror = function(e) {
        reject(e);
      };
      speechSynthesis.speak(utterance);
    });
  }


  window.sha256Text = async function(text) {
    const msgUint8 = new TextEncoder().encode(text);                          
    const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);          
    const hashArray = Array.from(new Uint8Array(hashBuffer));                    
    const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
    return hashHex;
  }


  window.dedent = function(str) {
    // find the first non-whitespace character on each line, and then we find the minimum indent of all lines
    // then we remove that many spaces from the beginning of each line
    let match = str.match(/^[ \t]*(?=\S)/gm);
    if (!match) {
      return str;
    }
    let indent = Math.min(...match.map(x => x.length));
    let re = new RegExp(`^[ \\t]{${indent}}`, 'gm');
    let result = indent > 0 ? str.replace(re, '') : str;
    return result.trim(); // trim because with indented multi-line strings, the first line will almost always have a newline at the beginning, assuming regular code formatting
  }


  window.downloadTextOrBlob = function(textOrBlob, filename) {
    let blob;
    if(typeof textOrBlob === "string") blob = new Blob([textOrBlob], {type: "application/json"});
    else blob = textOrBlob;

    const dataUri = URL.createObjectURL(blob);
    let linkElement = document.createElement("a");
    linkElement.setAttribute("href", dataUri);
    linkElement.setAttribute("download", filename);
    linkElement.click();
    linkElement.remove();
    setTimeout(() => URL.revokeObjectURL(dataUri), 30*1000);
  } 


  window.cosineDistance = function(vector1, vector2) {
    let dotProduct = 0;
    let norm1 = 0;
    let norm2 = 0;
    for(let i=0; i<vector1.length; i++) {
      dotProduct += vector1[i] * vector2[i];
      norm1 += vector1[i] * vector1[i];
      norm2 += vector2[i] * vector2[i];
    }
    return 1 - (dotProduct / (Math.sqrt(norm1) * Math.sqrt(norm2)));
  }

  window.createLoadingModal = function(initialContent, parentElement) {
    if(!parentElement) parentElement = document.body;
    let loadingModalCtn = document.createElement("div");
    loadingModalCtn.innerHTML = `<style>
      .loadingModalCtn-856246272937 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem;
        z-index: 99999999;
      }
      .loadingModalContent-856246272937 {
        background-color: white;
        border-radius: 3px;
        background-color: var(--background);
        border-radius: var(--border-radius);
        padding: 1rem;
        text-align: center;
        box-shadow: 0px 1px 10px 3px rgb(130 130 130 / 24%);
      }
    </style>`
    let contentEl = document.createElement("div");
    contentEl.classList.add("loadingModalContent-856246272937");
    contentEl.innerHTML = initialContent || "";
    loadingModalCtn.appendChild(contentEl);
    loadingModalCtn.classList.add("loadingModalCtn-856246272937");
    parentElement.appendChild(loadingModalCtn);
    return {
      updateContent: function(content) {
        contentEl.innerHTML = content;
      },
      delete: function() {
        loadingModalCtn.remove();
      },
    }
  }




  // this function crawls deeply through the overrides object and applies values to `obj` in the same "position" within the object - either overriding existing values, or creating new key/value pairs if they don't exist
  window.applyObjectOverrides = function({object, overrides}) {
    for(let key in overrides) {
      if(Array.isArray(overrides[key])) {
        object[key] = structuredClone(overrides[key]); // arrays are treated as "final" values - we don't go "into" them
      } else if(typeof overrides[key] === "object" && overrides[key] !== null) {
        if (!object.hasOwnProperty(key) || typeof object[key] !== "object" || object[key] === null) {
          object[key] = {};
        }
        applyObjectOverrides({object:object[key], overrides:overrides[key]});
      } else {
        object[key] = overrides[key];
      }
    }
  }


  window.objectKeysAndTypesAreValid = function(obj, validStructure, opts={}) { // if you don't set opts.requireAllKeys=true, it allows missing keys in the obj
    if (typeof obj !== 'object' || obj === null || typeof validStructure !== 'object' || validStructure === null) {
      return false;
    }

    const objKeys = Object.keys(obj);
    const structureKeys = Object.keys(validStructure);

    if (opts.requireAllKeys && objKeys.length !== structureKeys.length) {
      return false;
    }

    for (let key of objKeys) {
      if (!structureKeys.includes(key)) {
        return false;
      }

      const objValue = obj[key];
      const structureValue = validStructure[key];

      if (typeof objValue !== typeof structureValue) {
        return false;
      }

      if (typeof objValue === 'object' && !objectKeysAndTypesAreValid(objValue, structureValue, {requireAllKeys:opts.requireAllKeys})) {
        return false;
      }
    }

    return true;
  }



  window.addBackgroundToElement = function(element) {
    // note: assumes that `element` has `position:relative;` so the position:absolute of the media elements works as expected
    const media = [
      { type: 'video', el: document.createElement('video') },
      { type: 'video', el: document.createElement('video') },
      { type: 'img', el: document.createElement('img') },
      { type: 'img', el: document.createElement('img') },
    ];
    let currentMedia = 0;

    media.forEach(item => {
      const { el } = item;
      el.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s;';
      if(item.type === 'video') {
        el.muted = true;
        el.loop = true;
      }
      element.appendChild(el);
    });

    function isVideoUrl(url) {
      return /\.(mp4|webm|ogg)$/i.test(url);
    }

    function getMediaType(url) {
      return isVideoUrl(url) ? 'video' : 'img';
    }

    let currentUrl = null;

    return {
      get currentUrl() { return currentUrl; },
      change: (url) => {
        currentUrl = url;
        if(url === null) {
          media.forEach(({ el }) => {
            el.style.opacity = 0;
          });
          return;
        }

        const nextMediaIndex = (currentMedia + 1) % 4;
        const mediaType = getMediaType(url);
        const nextMedia = media.find((item, index) => index !== currentMedia && item.type === mediaType);

        if(mediaType === 'video') {
          nextMedia.el.src = url;
          nextMedia.el.play();
          nextMedia.el.addEventListener('canplay', () => {
            media[currentMedia].el.style.opacity = 0;
            nextMedia.el.style.opacity = 1;
            currentMedia = media.indexOf(nextMedia);
          }, { once: true });
        } else {
          nextMedia.el.src = url;
          nextMedia.el.addEventListener('load', () => {
            media[currentMedia].el.style.opacity = 0;
            nextMedia.el.style.opacity = 1;
            currentMedia = media.indexOf(nextMedia);
          }, { once: true });
        }
      },
      filter: (filterValue) => {
        media.forEach(({ el }) => {
          el.style.filter = filterValue ?? "";
        });
      },
      destroy: () => {
        media.forEach(({ el }) => {
          el.remove();
        });
      },
    };
  }


  window.importStylesheet = function(src) {
    return new Promise(function (resolve, reject) {
      let link = document.createElement('link');
      link.href = src;
      link.rel = 'stylesheet';
      link.onload = () => resolve(link);
      link.onerror = () => reject(new Error(`Style load error for ${src}`));
      document.head.append(link);
    });
  }


  window.htmlToElement = function(html) {
    var template = document.createElement('template');
    html = html.trim();
    template.innerHTML = html;
    return template.content.firstChild;
  }


  // this function avoids maximum-string-length errors by not using JSON.stringify
  window.jsonToBlob = function(json) {
    const textEncoder = new TextEncoder();
    const seen = new WeakSet();
    let buffer = new Uint8Array(1024 * 1024); // Start with 1MB buffer
    let position = 0;
    let stringBuffer = '';

    function ensureCapacity(additionalBytes) {
      if (position + additionalBytes > buffer.length) {
        let newBufferSize = Math.max(Math.round(buffer.length * 1.5), position + additionalBytes);
        const newBuffer = new Uint8Array(newBufferSize);
        newBuffer.set(buffer);
        buffer = newBuffer;
        console.log(`jsonToBlob new buffer size: ${newBufferSize}`);
      }
    }

    function writeToBuffer(str) {
      const encoded = textEncoder.encode(str);
      ensureCapacity(encoded.length);
      buffer.set(encoded, position);
      position += encoded.length;
    }

    function flushStringBuffer() {
      if (stringBuffer.length > 0) {
        writeToBuffer(stringBuffer);
        stringBuffer = '';
      }
    }

    function processValue(value) {
      if (seen.has(value)) {
        throw new TypeError("Converting circular structure to JSON");
      }

      if (value && typeof value.toJSON === "function") {
        value = value.toJSON();
      }

      if (typeof value === 'object' && value !== null) {
        seen.add(value);

        const isArray = Array.isArray(value);
        stringBuffer += isArray ? '[' : '{';

        let first = true;
        for (const [key, val] of Object.entries(value)) {
          if (!first) stringBuffer += ',';
          first = false;

          if (!isArray) {
            stringBuffer += JSON.stringify(key) + ':';
          }

          processValue(val);
        }

        stringBuffer += isArray ? ']' : '}';
      } else if (typeof value === 'function' || typeof value === 'undefined') {
        stringBuffer += 'null';
      } else {
        stringBuffer += JSON.stringify(value);
      }

      // Flush the string buffer if it gets too large
      if (stringBuffer.length > 1024) {
        flushStringBuffer();
      }
    }

    processValue(json);
    flushStringBuffer();

    return new Blob([buffer.subarray(0, position)]);
  }
  
  window.applyCodeMirror5ToTextarea = async function(textarea, opts={}) { // opts.mode can be javascript, htmlmixed, etc.
    const defaultTheme = "material-darker";
    if(typeof CodeMirror === 'undefined') {
      const css = document.createElement('link'); css.rel = 'stylesheet'; css.href = 'https://cdn.jsdelivr.net/npm/codemirror@5.65.13/lib/codemirror.min.css';
      document.head.appendChild(css);
      const style = document.createElement('style');
      style.textContent = `
        .CodeMirror { border: 1px solid #7f7f7f; height:auto; min-height:150px; cursor: text; }
        .CodeMirror-empty.CodeMirror-focused { outline: none; }
        .CodeMirror pre.CodeMirror-placeholder { color: #666; border-radius: 3px; }
        .CodeMirror-scroll { max-width: 100%; padding-bottom:150px; }
      `;
      document.head.appendChild(style);
      
      // NOTE: must load codemirror *before* plugins:
      await new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/codemirror@5.65.17/lib/codemirror.min.js';
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
      });
      
      let pluginPromises = [
        'https://cdn.jsdelivr.net/npm/codemirror@5.65.17/addon/display/placeholder.js',
      ].map(src => {
        return new Promise((resolve, reject) => {
          const script = document.createElement('script'); script.src = src;
          script.onload = resolve;
          script.onerror = reject;
          document.head.appendChild(script);
        });
      });
      await Promise.all(pluginPromises);
    }
    if(!CodeMirror.modes[opts.mode]) {
      await new Promise(resolve => {
        const script = document.createElement('script'); script.src = `https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/${opts.mode}/${opts.mode}.js`;
        document.head.appendChild(script);
        script.onload = resolve;
      });
    }
    if(!document.querySelector(`link[href*="${opts.theme || defaultTheme}.min.css"]`)) { // Load theme
      await new Promise(resolve => {
        const themeCss = document.createElement('link');
        themeCss.rel = 'stylesheet';
        themeCss.href = `https://cdn.jsdelivr.net/npm/codemirror@5.65.13/theme/${opts.theme || defaultTheme}.min.css`;
        document.head.appendChild(themeCss);
        themeCss.onload = resolve;
      });
    }
    return CodeMirror.fromTextArea(textarea, {
      lineNumbers:true,
      mode:opts.mode,
      theme:opts.theme || defaultTheme,
      viewportMargin: Infinity, // along with height:auto on .CodeMirror, this makes editor auto-resize to content
    });
  }
  // document.body.innerHTML = `<textarea id="textareaEl"></textarea>`;
  // applyCodeMirror5ToTextarea(textareaEl, {mode:'htmlmixed', theme:'material-darker'});
  
  window.uploadDataUrlToTextInput = function(inputEl, opts = {}) {
    // Create a file input element
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = opts.type || '*/*';
    fileInput.click();
    fileInput.addEventListener('change', function(event) {
      const file = event.target.files[0];
      if (!file) return; // User cancelled, do nothing
      const reader = new FileReader();
      reader.onload = async function(e) {
        // RESIZE + CENTER CROP:
        // const maxSize = 768;
        // let blob = await fetch(e.target.result).then(r => r.blob());
        // const imageBitmap = await createImageBitmap(blob);
        // const canvas = document.createElement('canvas');
        // const ctx = canvas.getContext('2d');
        // const size = Math.min(imageBitmap.width, imageBitmap.height);
        // const startX = (imageBitmap.width - size) / 2;
        // const startY = (imageBitmap.height - size) / 2;
        // const scaleFactor = Math.min(1, maxSize / size);
        // canvas.width = canvas.height = Math.floor(size * scaleFactor);
        // ctx.drawImage(imageBitmap, startX, startY, size, size, 0, 0, canvas.width, canvas.height);
        // inputEl.value = canvas.toDataURL('image/jpeg');
        
        // JUST RESIZE:
        const maxSize = 768;
        let blob = await fetch(e.target.result).then(r => r.blob());
        const imageBitmap = await createImageBitmap(blob);
        const scaleFactor = Math.min(1, maxSize / Math.max(imageBitmap.width, imageBitmap.height));
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = Math.floor(imageBitmap.width * scaleFactor);
        canvas.height = Math.floor(imageBitmap.height * scaleFactor);
        ctx.drawImage(imageBitmap, 0, 0, canvas.width, canvas.height);
        inputEl.value = canvas.toDataURL('image/jpeg');
        try { if(inputEl.onchange) inputEl.onchange() } catch(e) { console.error(e); }
        try { if(inputEl.oninput) inputEl.oninput() } catch(e) { console.error(e); }
      };
      reader.readAsDataURL(file);
    });
  }

  window.prompt2 = async function(specs, opts={}) {

    if(!opts.backgroundColor) opts.backgroundColor = prompt2.defaults.backgroundColor ?? (getComputedStyle(document.body).getPropertyValue('background-color')==="rgba(0, 0, 0, 0)" ? "#e8e8e8" : getComputedStyle(document.body).getPropertyValue('background-color'));
    if(!opts.borderColor) opts.borderColor = prompt2.defaults.borderColor ?? "#eaeaea";
    if(!opts.borderRadius) opts.borderRadius = prompt2.defaults.borderRadius ?? "3px";

    function sanitizeHtml(text) {
      if(text === undefined) text = "";
      text = text+"";
      return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
    }
    
    let textLineButtonIdToCallback = {};
    
    let ctn = document.createElement("div");
    let sections = "";
    let structuredSectionsI = 0;
    let i = 0;
    for(let [key, spec] of Object.entries(specs)) {
      if(spec.type == "select") {
        sections += `
          <section data-spec-key="${sanitizeHtml(key)}" class="structuredInputSection" data-is-hidden-extra="${spec.hidden === true ? "yes" : "no"}" style="${spec.hidden === true ? "display:none" : ""};">
            <div class="sectionLabel" style="${structuredSectionsI === 0 ? "margin-top:0;" : ""}">${spec.label}${spec.infoTooltip ? ` <span title="${sanitizeHtml(spec.infoTooltip)}" style="cursor:pointer;" onclick="alert(this.title)">ℹ️</span>` : ""}</div>
            <div style="display:flex;">
              <div style="flex-grow:1;">
                <select data-spec-key="${sanitizeHtml(key)}" value="${sanitizeHtml(spec.defaultValue)}" ${spec.disabled === true ? "disabled" : ""} style="width:100%;height:100%; padding:0.25rem;">${spec.options.map(o => `<option value="${sanitizeHtml(o.value)}" ${o.value === spec.defaultValue ? "selected" :""}>${sanitizeHtml(o.content) || sanitizeHtml(o.value)}</option>`).join("")}</select>
              </div>
            </div>
          </section>`;
        structuredSectionsI++;
      } else if(spec.type == "textLine") {
        let buttonHtml = ``;
        if(spec.dataUrlUploadButton) buttonHtml = `<button onclick="window.uploadDataUrlToTextInput(this.parentElement.querySelector('input'), {type:'${spec.dataUrlUploadButton}'})" style="margin-left:0.25rem; padding:0 0.25rem;">📂</button>`;
        if(spec.button) {
          let id = Math.random().toString();
          buttonHtml = `<button data-prompt2-text-line-button-id="${id}" style="margin-left:0.25rem; padding:0 0.25rem; white-space:pre;">${spec.button.label}</button>`;
          textLineButtonIdToCallback[id] = spec.button.onClick;
        }
        sections += `
          <section data-spec-key="${sanitizeHtml(key)}" class="structuredInputSection" data-is-hidden-extra="${spec.hidden === true ? "yes" : "no"}" style="${spec.hidden === true ? "display:none" : ""};">
            <div style="display:flex;">
              <div class="leftSideHtml" style="max-width:max-content; min-width:min-content;">${spec.leftSideHtml || ""}</div>
              <div style="flex-grow:1;">
                <div class="sectionLabel" style="${structuredSectionsI === 0 ? "margin-top:0;" : ""}">${spec.label}${spec.infoTooltip ? ` <span title="${sanitizeHtml(spec.infoTooltip)}" style="cursor:pointer;" onclick="alert(this.title)">ℹ️</span>` : ""}</div>
                <div style="display:flex;">
                  <div style="flex-grow:1;">
                    <input data-initial-focus="${spec.focus === true ? "yes" : "no"}" data-spec-key="${sanitizeHtml(key)}" ${spec.disabled === true ? "disabled" : ""} value="${sanitizeHtml(spec.defaultValue)}" style="width:100%;height:100%; border: 1px solid lightgrey; border-radius: 3px; padding: 0.25rem; ${spec.cssText || ""}" type="text" placeholder="${sanitizeHtml(spec.placeholder)}" ${spec.validationPattern ? `pattern="${sanitizeHtml(spec.validationPattern)}"` : ""} ${spec.disableSpellCheck ? `spellcheck="false"` : ``}>
                  </div>
                  ${buttonHtml}
                </div>
              </div>
            </div>
          </section>`;
        structuredSectionsI++;
      } else if(spec.type == "text") {
        sections += `
          <section data-spec-key="${sanitizeHtml(key)}" class="structuredInputSection" data-is-hidden-extra="${spec.hidden === true ? "yes" : "no"}" style="${spec.hidden === true ? "display:none" : ""};">
            <div class="sectionLabel" style="${structuredSectionsI === 0 ? "margin-top:0;" : ""}">${spec.label}${spec.infoTooltip ? ` <span title="${sanitizeHtml(spec.infoTooltip)}" style="cursor:pointer;" onclick="alert(this.title)">ℹ️</span>` : ""}</div>
            <div style="display:flex;">
              <div style="flex-grow:1; max-width:100%;">
                <textarea ${spec.subType === "javascript" ? `data-is-javascript-editor="true"` : ``} data-initial-focus="${spec.focus === true ? "yes" : "no"}" data-spec-key="${sanitizeHtml(key)}" ${spec.height === "fit-content" ? `data-height="fit-content"` : ``} ${spec.disabled === true ? "disabled" : ""} style="width:100%; ${spec.height === "fit-content" ? "" : `height:${sanitizeHtml(spec.height)}`}; min-height:${spec.minHeight ?? "4rem"}; max-height:${spec.maxHeight ?? "50vh"}; border: 1px solid lightgrey; border-radius: 3px; padding:0.25rem; resize:vertical; ${spec.cssText || ""};" type="text" placeholder="${sanitizeHtml(spec.placeholder)}" ${spec.disableSpellCheck ? `spellcheck="false"` : ``}>${sanitizeHtml(spec.defaultValue)}</textarea>
              </div>
            </div>
          </section>`;
        structuredSectionsI++;
      } else if(spec.type == "buttons") {
        sections += `
          <section data-spec-key="${sanitizeHtml(key)}" class="structuredInputSection" data-is-hidden-extra="${spec.hidden === true ? "yes" : "no"}" style="${spec.hidden === true ? "display:none" : ""};">
            <div class="sectionLabel" style="${structuredSectionsI === 0 ? "margin-top:0;" : ""}">${spec.label ?? ""}${spec.infoTooltip ? ` <span title="${sanitizeHtml(spec.infoTooltip)}" style="cursor:pointer;" onclick="alert(this.title)">ℹ️</span>` : ""}</div>
            <div style="display:flex;">
              <div style="flex-grow:1; display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 200px)); gap: 1rem; justify-content:center;">
                ${spec.buttons.map(b => `<button ${b.disabled === true ? "disabled" : ""} style="width:max-content; justify-self:center; align-self:center; border: 1px solid lightgrey; border-radius: 3px; padding:0.25rem; ${b.cssText || ""};">${b.text}</button>`).join(" ")}
              </div>
            </div>
          </section>`;
        structuredSectionsI++;
      } else if(spec.type == "none") {
        sections += `
          <section data-spec-key="${sanitizeHtml(key)}" data-is-hidden-extra="${spec.hidden === true ? "yes" : "no"}" data-requires-element-insert="${typeof spec.html === "string" ? "no" : "yes"}" style="${spec.hidden === true ? "display:none" : ""};">
            ${typeof spec.html === "string" ? spec.html : ""}
          </section>`;
      }
      i++;
    }
    ctn.innerHTML = `
      <div class="promptModalInnerContainer" style="background:rgba(0,0,0,0.7); position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999999; display:flex; justify-content:center; color:inherit; font:inherit; padding:0.5rem;">
        <div style="width:600px; max-width:100%; background:${sanitizeHtml(opts.backgroundColor)}; height: min-content; padding:1rem; border:1px solid ${opts.borderColor}; border-radius:${opts.borderRadius}; box-shadow: 0px 1px 10px 3px rgb(130 130 130 / 24%); max-height: calc(100% - 1rem);display: flex; flex-direction: column;">
          <div class="sectionsContainer" style="overflow:auto;">
            ${sections}
            ${Object.values(specs).find(s => s.hidden === true) ? `
            <div style="text-align:center; margin-top:1rem; display:flex; justify-content:center;">
              <button class="showHidden" style="padding: 0.25rem;">${opts.showHiddenInputsText || "Show hidden inputs"}</button>
            </div>
            ` : ""}
          </div>
          <div style="text-align:center; margin-top:1rem; ${opts.cancelButtonText === null ? "" : `display:flex; justify-content:space-between;`}">
            ${opts.cancelButtonText === null ? "" : `<button class="cancel" style="padding: 0.25rem;">${opts.cancelButtonText ?? "cancel"}</button>`}
            <button class="submit" style="padding: 0.25rem; ${opts.submitButtonCssText || ""};">${opts.submitButtonText || "submit"}</button>
          </div>
        </div>
        <style>    
          .promptModalInnerContainer .sectionsContainer > section .sectionLabel {
            margin:0.125rem 0;
            font-size:85%;
          }
          
          .promptModalInnerContainer .sectionsContainer > section .sectionLabel,
          .promptModalInnerContainer .sectionsContainer .leftSideHtml {
            margin-top: 1rem;
          }
          
          .promptModalInnerContainer .sectionsContainer input:invalid {
            background-color: lightpink;
          }
          .promptModalInnerContainer .sectionsContainer {
            -ms-overflow-style: none;  /* Internet Explorer 10+ */
            scrollbar-width: none;  /* Firefox */
          }
          .promptModalInnerContainer .sectionsContainer::-webkit-scrollbar { 
            display: none;  /* Safari and Chrome */
          }
          .promptModalInnerContainer .sectionsContainer.scrollFade {
            padding-bottom: 30px;
            -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 30px), #ffffff00 100%);
            mask-image: linear-gradient(to bottom, black calc(100% - 30px), #ffffff00 100%);
          }
          .promptModalInnerContainer * {
            box-sizing: border-box;
          }
        </style>
      </div>
    `;
    document.body.appendChild(ctn);

    function updateFitHeights() { // settimeout to ensure rendered
      ctn.querySelectorAll("textarea[data-height=fit-content]").forEach(el => {
        let minHeight = el.offsetHeight; // textareas will always have min-height set, so we can use that via offsetHeight
        el.style.height = Math.max(minHeight, (el.scrollHeight+10)) + "px";
      });
    }

    setTimeout(updateFitHeights, 5);
    
    for(let id in textLineButtonIdToCallback) {
      ctn.querySelector(`button[data-prompt2-text-line-button-id='${id}']`).onclick = function() {
        textLineButtonIdToCallback[id]({inputEl:this.parentElement.querySelector('input')});
      }
    }
    
    if(ctn.querySelector("[data-is-javascript-editor='true']")) {
      let textareaEl = ctn.querySelector("[data-is-javascript-editor='true']");
      let observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(async entry => {
          if(entry.isIntersecting) {
            observer.disconnect();
            let editor = await window.applyCodeMirror5ToTextarea(textareaEl, {mode:"javascript"});
            editor.getWrapperElement().addEventListener("click", function() {
              editor.focus(); // by default it seems that you need to click on a line that 'exists' to focus the editor (which initially is only the first line), so this fixes that
            });
            Object.defineProperty(textareaEl, 'value', {
              get: function() {
                return editor.getValue();
              },
              set: function(newValue) {
                editor.setValue(newValue);
              }
            });
          }
        });
      });
      observer.observe(textareaEl);
    }

    if(ctn.querySelector("button.showHidden")) {
      ctn.querySelector("button.showHidden").onclick = () => {
        ctn.querySelectorAll('.sectionsContainer [data-is-hidden-extra=yes]').forEach(el => {
          el.style.display='';
          el.dataset.isHiddenExtra = "no";
        });
        ctn.querySelector("button.showHidden").remove();
        updateFitHeights();
        updateInputVisibilies();
      };
    }

    // insert non-string HTML elements for type==html specs
    let elementObjects = Object.values(specs).filter(s => s.html && typeof s.html !== "string").map(s => s.html);
    ctn.querySelectorAll('.sectionsContainer [data-requires-element-insert=yes]').forEach((el, i) => {
      el.append(elementObjects[i]);
    });

    
    // add onclick handlers for type==button specs
    let buttonSpecKeys = Object.entries(specs).filter(([key, spec]) => spec.type === "buttons").map(([key, spec]) => key);
    for(let key of buttonSpecKeys) {
      ctn.querySelectorAll(`.sectionsContainer [data-spec-key=${key}]`).forEach(el => {
        let buttonEls = [...el.querySelectorAll("button")];
        for(let i = 0; i < buttonEls.length; i++) {
          buttonEls[i].onclick = specs[key].buttons[i].onClick;
        }
      });
    }
    

    try {
      // add oninput and onchange handlers for all inputs that can have them
      for(let [key, spec] of Object.entries(specs)) {
        if(!specs[key].onInput && !specs[key].onChange) continue;
        
        if(spec.type === "textLine") {
          let el = ctn.querySelector(`.structuredInputSection[data-spec-key=${key}] input`);
          if(specs[key].onInput) el.oninput = specs[key].onInput;
          if(specs[key].onChange) el.onchange = specs[key].onChange;
        }
        if(spec.type === "text") {
          let el = ctn.querySelector(`.structuredInputSection[data-spec-key=${key}] textarea`);
          if(specs[key].onInput) el.oninput = specs[key].onInput;
          if(specs[key].onChange) el.onchange = specs[key].onChange;
        }
        if(spec.type === "select") {
          let el = ctn.querySelector(`.structuredInputSection[data-spec-key=${key}] select`);
          if(specs[key].onInput) el.oninput = specs[key].onInput;
          if(specs[key].onChange) el.onchange = specs[key].onChange;
        }
      }
    } catch(e) { console.error(e); }

    setTimeout(() => {
      // add scrollFade if sectionsContainer has scroll
      let sectionsContainerEl = ctn.querySelector(".promptModalInnerContainer .sectionsContainer");
      if(sectionsContainerEl.scrollHeight > sectionsContainerEl.offsetHeight) {
        sectionsContainerEl.classList.add("scrollFade");
      }
      // focus
      let focusEl = ctn.querySelector(".promptModalInnerContainer .sectionsContainer [data-initial-focus=yes]");
      if(!focusEl) focusEl = [...ctn.querySelectorAll(".promptModalInnerContainer input, .promptModalInnerContainer textarea")][0];
      if(focusEl) {
        focusEl.focus();
        focusEl.selectionStart = focusEl.value.length;
      }
    }, 5);
    
    function getAllValues() {
      let values = {};
      for(let el of [...ctn.querySelectorAll("[data-spec-key]")]) {
        if(el.tagName === "INPUT") {
          if(el.type == "file") {
            values[el.dataset.specKey] = el.files;
          } else {
            values[el.dataset.specKey] = el.value;
          }
        } else if(el.tagName === "TEXTAREA") {
          values[el.dataset.specKey] = el.value;
        } else if(el.tagName === "SELECT") {
          values[el.dataset.specKey] = el.value;
        }
      }
      return values;
    }

    // a spec can have a `show` function which determines whether it's shown based on the values of the other inputs
    function updateInputVisibilies() {
      const values = getAllValues();
      for(const el of [...ctn.querySelectorAll("[data-spec-key]")]) {
        const showFn = specs[el.dataset.specKey].show;
        if(!showFn) continue;
        if(showFn(values)) {
          el.closest('section').style.display = "";
        } else {
          el.closest('section').style.display = "none";
        }

        // the "show advanced" hidden-ness overrides the show() function
        if(el.closest("section").dataset.isHiddenExtra === "yes") {
          el.closest("section").style.display = "none";
        }
      }
    }
    updateInputVisibilies();
    for(const el of [...ctn.querySelectorAll("[data-spec-key]")]) {
      el.addEventListener("input", updateInputVisibilies);
    }

    let promptResolver;

    if(opts.controls) {
      // add a proxy to the controls object so that we can read and write spec values from the outside
      opts.controls.data = new Proxy({}, {
        set: function(obj, prop, value) {
          let el = ctn.querySelector(`[data-spec-key=${prop}]`);
          if(!el) return true;
          el.value = value;
          updateInputVisibilies();
          return true;
        },
        get: function(obj, prop) {
          let el = ctn.querySelector(`[data-spec-key=${prop}]`);
          if(!el) return undefined;
          return el.value;
        }
      });
      opts.controls.submit = function() {
        ctn.querySelector("button.submit").click();
      };
      opts.controls.cancel = function() {
        promptResolver(null);
      };
    }

    let values = await new Promise((resolve) => {
      promptResolver = resolve;
      ctn.querySelector("button.submit").onclick = () => {
        let values = getAllValues();
        resolve(values);
      };
      if(ctn.querySelector("button.cancel")) {
        ctn.querySelector("button.cancel").onclick = () => {
          resolve(null);
        };
      }
    });
    ctn.remove();
    return values;
  }
  prompt2.defaults = {};
</script>
<!-- <script async defer src="https://cdn.jsdelivr.net/npm/morphdom@2.7.2/dist/morphdom-umd.min.js"></script> -->

<script>console.log("load log: after bundle", Date.now()-window.pageLoadStartTime);</script>

<style>
  hr {
    height: 1px;
    background: #d6d6d6;
    font-size: 0;
    border: 0;
  }
  :root {
    color-scheme: dark light;
  }
  @media (prefers-color-scheme: dark) {
    hr {
      background: #4d4d4d;
    }
  }
  
  /* PERCHANCE EDIT */
  body *:not(button) {
    text-align: left; 
  }
  
  .loading-animation-ctn { background-color: #cbcbcb; color: grey; }
  .loading-animation-dot { animation: 1s loading-animation-blink infinite; fill: grey; }
  .loading-animation-dot:nth-child(2) { animation-delay: 250ms }
  .loading-animation-dot:nth-child(3) { animation-delay: 500ms }
  @keyframes loading-animation-blink { 50% { fill: transparent }}
  
  :root, :root.light {
    --background: #e8e8e8;
    --button-bg: #c8c8c8;
    --button-bg-hover: #b4b4b4;
    --text-color: black;
    --textarea-bg: #f1f1f1;
    --selected-thread-bg: lightgray;
    --border-color: #c8c8c8;
    --border-radius: 3px;
    --avatar-bg: lightgrey;
    --notification-bg-color: #005ac2;
    --button-border-color: #b4b4b4;
    --button-font-size: 0.825rem;
    --inline-reminder-message-default-visibility: hidden;
    --shortcut-buttons-display: initial;
    --link-color: blue;
    --box-color: #f1f1f1;
    --box-color-hover: #ffffff; 
    --selected-thread-border-color: #909090;
  }

  

  /* Detect browser dark mode and change variables */
  @media (prefers-color-scheme: dark) {
    :root {
      --background: #151515;
      --button-bg: #333;
      --button-bg-hover: #444;
      --text-color: #e9e9e9; /*#efefef;*/
      --textarea-bg: #333;
      --selected-thread-bg: #444;
      --border-color: #333;
      --avatar-bg: #3d3d3d;
      --button-border-color: #515151;
      --link-color: #3b7eff;
      --box-color: #222222;
      --box-color-hover: #333333;
      --selected-thread-border-color: #606060;
    }
  }
  
  .inlineReminderMessage {
    visibility: var(--inline-reminder-message-default-visibility);
  }
  
  blockquote {
    margin-left:1rem; 
  }

  body, html {
    margin:0;
    background: var(--background);
    color: var(--text-color);
    font-family: sans-serif;
  }
  body * {
    box-sizing:border-box;
    color: inherit;
    font-family: inherit;
  }
  body a {
    color: var(--link-color);
  }

  .messageText {
    position: relative; 
  }
  .messageText pre[data-markdown-codeblock] {
    font-family: monospace;
    background: rgb(35 35 35);
    padding: 0.5rem;
    color: rgb(232, 232, 232);
    border-radius: var(--border-radius);
    overflow-x: auto;
  }
  .messageText p code {
    font-family: monospace;
    background: rgb(35 35 35);
    padding: 0.125rem;
    color: rgb(232, 232, 232);
    border-radius: var(--border-radius);
  }
  .messageText table {
    border-collapse: collapse;
  }
  .messageText table, .messageText th, .messageText td {
    border: 1px solid var(--border-color);
  }
  .messageText em, .messageText i {
    opacity: 0.7;
  }

  

  button {
    background: var(--button-bg);
    border-radius: var(--border-radius);
    cursor:pointer;
    padding: 0.125rem;
    border: 1px solid var(--button-border-color);
    font-size: var(--button-font-size);
  }
  @media (hover: hover) and (pointer: fine) {
    button:hover {
      background: var(--button-bg-hover);
    }
  }
  button:disabled {
    cursor: not-allowed;
  }
  textarea {
    background: var(--textarea-bg);
    border: 1px solid var(--button-border-color);
    border-radius: var(--border-radius);
  }

  input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input:not([type]), select {
    background: var(--textarea-bg);
    border: 1px solid var(--button-border-color);
    border-radius: var(--border-radius);
  }

  #appOptions .appOptionButton {
    width:100%;
    cursor:pointer;
    margin-top:0.5rem;
    min-height: 2rem;
  }
  #chatThreads {
    flex-grow:1;
    overflow-y:auto;
    margin-top:0.5rem;
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 30px), #ffffff00 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 30px), #ffffff00 100%);
    padding-bottom:2rem;
  }
  #chatThreads .thread, #chatThreads .threadFolder {
    border-radius: var(--border-radius);
    display:flex;
    padding:0.5rem;
    cursor:pointer;
    border: 1px solid var(--border-color);
    position: relative;
    user-select:none;
  }
  #chatThreads .thread, #chatThreads .threadFolder {
    margin-top: 0.5rem;
    background: var(--box-color);
  }
  
  @media (hover: hover) and (pointer: fine) {
    #chatThreads .thread:hover, #chatThreads .threadFolder:hover {
      background: var(--box-color-hover);
    }
  }
  #chatThreads .thread:first-child, #chatThreads .threadFolder:first-child {
    margin-top: 0;
  }

  #chatThreads .threadFolder {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #chatThreads .thread .favStar, #chatThreads .thread .changeFolderPath {
    position: absolute;
    font-size: 80%;
    opacity: 0.5;
    display: none;
    text-shadow: 0px 1px 2px #515151;
  }
  #chatThreads .thread .favStar {
    top: 0.0625rem;
    left: 0.0625rem;
  }
  #chatThreads .thread .changeFolderPath {
    bottom: 0.0625rem;
    left: 0.0625rem;
  }
  @media (hover: hover) and (pointer: fine) {
    body:not(.isMobile) #chatThreads .thread .favStar:hover { opacity: 1; }
    body:not(.isMobile) #chatThreads .thread .duplicateThreadBtn:hover { opacity: 1; }
    #chatThreads .thread .changeFolderPath:hover { opacity: 1; }
    #chatThreads .thread:hover .favStar, #chatThreads .thread:hover .changeFolderPath { display: inline; }
  }
  
  /* can't hover on mobile, so display button on selected thread: */
  body.isMobile #chatThreads .thread.selected .favStar, body.isMobile #chatThreads .thread.selected .changeFolderPath {
    display: inline;
  }
  #chatThreads .thread .favStar[data-is-fav="true"] {
    opacity: 1;
    display: inline;
  }

  #chatThreads .thread:not(:first-child) {
    margin-top: 0.5rem;
  }
  #chatThreads .thread .button {
    opacity:0.5;
  }
  @media (hover: hover) and (pointer: fine) {
    #chatThreads .thread .button:hover {
      opacity:1;
    }
  }
  #chatThreads .thread.selected {
    background-color: var(--selected-thread-bg);
  }
  #chatThreads .thread.selected {
    border-color: var(--selected-thread-border-color);
  }
  #chatThreads .thread .info {
    max-width: 100%;
  }
  #chatThreads .thread .nameWrapper {
    overflow: hidden;
    white-space: nowrap;
    max-width: 150px;
    display: flex;
  }
  #chatThreads .thread .name {
    /* truncate long thread names */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow: 1;
  }
  #chatThreads .thread .avatar, #characterSelection  .character .avatar {
    width:50px;
    height:50px;
    border-radius: var(--border-radius);
    min-width:50px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--avatar-bg);
  }
  #messageFeed .message .avatar {
    width: 50px;
    height: 50px;
    border-radius: var(--border-radius);
    min-width: 50px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--avatar-bg);
  }
  #chatThreads .characterEditButton {
    font-size: 0.65rem;
    opacity: 0.5;
  }
  
  @media (hover: hover) and (pointer: fine) {
    #chatThreads .characterEditButton:hover {
      opacity: 1;
    }
  }

  /* hide threads scrollbar */
  #chatThreads {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
  }
  #chatThreads::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
  }

  /* hide message feed scrollbar */
  /* #messageFeed {
    -ms-overflow-style: none; 
    scrollbar-width: none; 
  }
  #messageFeed::-webkit-scrollbar { 
    display: none;  
  } */

  /* custom scrollbar */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--button-bg);
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--button-bg-hover);
  }


  #builtInChatInterfaceWrapper {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    height: 100%;
    position:relative;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  #messageFeed .message {
    margin-top:0.5rem;
    margin-bottom:0.5rem;
  }

  #messageFeed .message .bottomButtons {
    display:none;
    position:absolute;
    bottom: 0rem;
    right: 0.5rem;
    z-index:10;
  }
  #messageFeed .message:hover .bottomButtons {
    display: flex;
  }
  .emojiButton {
    opacity:0.5;
    cursor:pointer;
  }
  
  @media (hover: hover) and (pointer: fine) {
    .emojiButton:hover {
      opacity:1;
    }
  }
  
  /* this is a bit too 'magic' for my liking, but it just hides any hidden messsage that has a hidden message immediately after it, so to see the earlier hidden message, they first need to display the one below it (prevents a wall of "show hidden messages" buttons  */
  #messageFeed .message.hiddenFromUser:has(+ .message.hiddenFromUser) {
    display: none;
  }
  
  #messageFeed .message.hiddenFromUser .showHiddenMessageButton {
    display: inline-block;
    color: var(--text-color);
  }
  #messageFeed .message:not(.hiddenFromUser) .showHiddenMessageButton {
    display: none;
  }
  #messageFeed .message.hiddenFromUser .messageWrap {
    display: none;
  }
  #messageFeed .message:not(.hiddenFromUser) .messageWrap {
    display: flex;
  }
  #messageFeed .messageText p {
    white-space: pre-wrap;
  }
  #messageFeed .messageText {
    margin-top: 0.125rem;
    overflow: hidden; /* keep messageText content from "escaping" the message area */
  }
  #messageFeed .messageText p:first-child {
    margin-top:0;
  }
  #messageFeed .messageText p:last-child {
    margin-bottom:0;
  }
  #messageFeed .messageText img {
    max-width: 100%;
  }
  #messageFeed .message .avatar {

  }

  /* prevent custom message styles from messing with inline message editor */
  #messageFeed .message textarea { color:revert; }
  #messageFeed .message button { color:revert; font-family:revert; }
  #messageFeed .message .messageVariantsCtn { color:var(--text-color) !important; font-family:sans-serif !important; text-shadow:none !important; }

  #messageFeed > *:first-child {
    /* PERCHANCE EDIT */
    /* margin-top: 3rem; */
  }

  #characterFoldersList {
    display: grid;
    grid-template-columns: repeat(auto-fill, 280px);
    grid-gap: 0.5rem;
    justify-content: center;
    margin-bottom: 0.5rem;
  }
  #characterFoldersList .characterFolder {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    width: 100%;
    padding:0.5rem;
    cursor:pointer;
    user-select:none;
  }

  @media (hover: hover) and (pointer: fine) {
    #characterSelection .character:hover {
      background: var(--box-color-hover); 
    }
  }
  #characterSelection .character {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    width: 100%;
    background: var(--box-color); 
  }
  #characterSelection .character .info .buttons {
    margin-top: 0.25rem;
  }
  #characterSelection .character .info .buttons button {
    font-size: 0.7rem;
    margin-left: 0.5rem;
  }
  #characterList, #starterCharacterList {
    display: grid;
    grid-template-columns: repeat(auto-fill, 280px);
    grid-gap: 0.5rem;
    justify-content: center;
  }
  #characterFoldersList .characterFolder {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #characterSelection .character {
    user-select:none;
  }

  #customCodeIframeHorizontalResizeBar {
    width:5px;
    background:var(--button-bg);
    cursor:ew-resize;
  }
  
  @media (hover: hover) and (pointer: fine) {
    #customCodeIframeHorizontalResizeBar:hover {
      background:var(--button-bg-hover);
    }
  }

  #userMessagesSentHistoryCtn {
    z-index: 10;
    bottom:0.25rem;
    position:relative;
  }
  #userMessagesSentHistoryCtn:empty {
    display: none;
  }
  #userMessagesSentHistoryCtn .historyItem {
    cursor: pointer;
    padding: 0.25rem;
    font-size: 85%;
    overflow: hidden;
    white-space: pre;
    display: flex;
  }
  #userMessagesSentHistoryCtn .historyItem .text {
    text-overflow: ellipsis;
    overflow: hidden;
    margin-left: 0.25rem;
  }
  #userMessagesSentHistoryCtn .historyItem .deleteButton {
    margin-left: auto;
  }
  @media (hover: hover) and (pointer: fine) {
    #userMessagesSentHistoryCtn .historyItem:hover {
      background: var(--background);
    }
  }
  #userMessagesSentHistoryCtn .historyItem .pinButton,
  #userMessagesSentHistoryCtn .historyItem .deleteButton {
    opacity: 0.5;
  }
  #userMessagesSentHistoryCtn .historyItem[data-is-pinned="true"] .pinButton {
    opacity: 1;
  }
  
  @media (hover: hover) and (pointer: fine) {
    body:not(.isMobile) #userMessagesSentHistoryCtn .historyItem .pinButton:hover,
    body:not(.isMobile) #userMessagesSentHistoryCtn .historyItem .deleteButton:hover {
      opacity: 1;
    }
  }

  #shortcutButtonsCtn {
    margin-bottom:0.25rem;
    position:relative;
    overflow-y: auto;
    display: var(--shortcut-buttons-display); /* so we can make it invisible until they've sent at least a few messages - to reduce clutter */
  }
  #shortcutButtonsCtn:empty {
    display:none;
  }

  #shortcutButtonsCtn button:first-child {
    /* the bulk edit button */
    border: none;
    background: transparent;
  }
  #shortcutButtonsCtn button:not(:first-child) {
    margin-left:0.25rem;
    padding-left: 0.3rem; 
    padding-right: 0.3rem; 
  }
  
  #threadOptionsPopup button {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem; 
  }

  /* typing indicator from https://codepen.io/arthak/pen/rmqvgo */
  .tiblock { align-items: center; display: flex; height: 17px; }
  .ticontainer{ display: inline-block; }
  .ticontainer .tidot { background-color: #90949c;  }
  .tidot { animation: mercuryTypingAnimation 1.5s infinite ease-in-out; border-radius: 2px; display: inline-block; height: 4px; margin-right: 2px; width: 4px; }
  @keyframes mercuryTypingAnimation{ 0%{ -webkit-transform:translateY(0px); transform:translateY(0px); } 28% { transform:translateY(-5px); } 44%{ transform:translateY(0px); } } .tidot:nth-child(1){ animation-delay:200ms; } .tidot:nth-child(2){ animation-delay:300ms; } .tidot:nth-child(3){ animation-delay:400ms; }
  
  
  @keyframes rotate {
    to { transform: rotate(360deg); }
  }
  
  .rotate-jiggle {
    animation: rotate-jiggle 0.2s infinite;
    transform: rotate(-1deg);
  }
  @keyframes rotate-jiggle {
    0% { transform: rotate(-1deg); }
    50% { transform: rotate(1deg); }
  }
</style>

<h1 id="hiddenH1Element" style="display:none;">AI Character Chat</h1>

<div id="topNotification" style="position:fixed; top:1rem; left:0; right:0; z-index:1000; display:none;">
  <div id="topNotificationContent" style="margin:0 auto; max-width:350px; background:var(--notification-bg-color); color:white; text-align: center; padding: 0.5rem; border-radius: var(--border-radius);"></div>
</div>

<div id="main" style="visibility:hidden; display:flex; position:fixed; top:0; right:0; left:0; bottom:0;">
  <div id="leftColumn" style="display:flex; flex-direction:column; width:270px; min-width:270px; padding:0.5rem; ">
    <div style="display:flex;">
      <button id="newThreadButton" style="width:100%; cursor:pointer; min-height:2rem;">💬 new chat / character</button>
      <button id="closeLeftColumnButton" style="cursor:pointer;min-height:2rem;margin-left: 0.5rem;min-width: 2rem;">☰</button>
    </div>
    <div id="threadSearchCtn" style="display:flex; width:100%; margin-top:0.5rem;">
      <input id="threadSearchInput" title="Surround your search in slashes to do a wildcard search, like this: /mouse.+forest/ This will find any chats with messages that have the text 'mouse' and then some point later 'forest'. The '.+' part is the wildcard that represents any text. For more complex searches, you can use any valid 'Regular Expression'." style="height: 100%; flex-grow: 1; min-width: 0; padding-left: 0.5rem;" type="text" placeholder="search threads...">
      <button id="threadSearchButton" style="cursor:pointer;min-height: 2rem;min-width: 2rem;margin-left: 0.5rem;">🔎</button>
    </div>
    <!-- <div id="threadFolderNavigationBar" style="display:flex; width:100%; margin-top:0.5rem;">
      <button id="threadFolderBackButton" style="cursor:pointer;min-height: 2rem;min-width: 2rem;margin-left: 0.5rem;">🔙</button>
    </div> -->
    <!-- <div id="chatThreadFolders" data-current-folder-path=""></div> -->
    <div id="chatThreads" data-current-folder-path=""></div>
    <div id="appOptions">
      <div style="display:flex;">
        <button id="settingsButton" class="appOptionButton">⚙️ settings</button> 
        <button id="tipsButton" class="appOptionButton" style="margin-left: 0.5rem; max-width:max-content; padding:0 0.5rem;" onclick="window.open('https://rentry.org/uerop')">❓ tips</button>
        <button class="appOptionButton" style="margin-left: 0.5rem; max-width:max-content; padding:0 0.5rem;">[fullscreenButtonPlugin("⇱", "⇲", "background:transparent; border:none; color:inherit; width:min-content; height:100%;")]</button> <!--<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"/></svg></button>-->
      </div>
      <div style="display: flex;">
        <button id="clearDataButton" class="appOptionButton" style="width: 4rem;">🗑️</button>
        <button id="exportDataButton" class="appOptionButton" style="margin-left: 0.5rem; margin-right: 0.5rem;">💾 export</button>
        <button class="appOptionButton" style="position:relative;">📁 import<input id="importDataFileInput" style="position:absolute; top:0; left:0; right:0; bottom:0; opacity:0; cursor:pointer;" type="file"></button>
      </div>
      <!-- PERCHANCE EDIT: -->
      <!--<div style="height:0px; position:relative;">
        <div id="feedbackModalCtn" style="position:absolute; bottom:-0.5rem; width:100.5%;"></div>
      </div>
      <button id="toggleFeedbackButton" onclick="toggleFeedbackModal()" class="appOptionButton">💬 feedback / chat</button> 
      <script>
        function toggleFeedbackModal() {
          if(!feedbackModalCtn.innerHTML) {
            let html = root.commentsPlugin({width:"100%", height:"min(600px,80vh)"});
            feedbackModalCtn.innerHTML = html;
            toggleFeedbackButton.innerHTML = "❌ hide feedback / chat";
          } else {
            feedbackModalCtn.innerHTML = "";
            toggleFeedbackButton.innerHTML = "💬 feedback / chat";
          }
        }
      </script>-->
      <div style="display:flex;">
        <button id="showFeedbackButton" onclick="showFeedbackModal()" class="appOptionButton" style="max-width: max-content; padding: 0 0.5rem;">📝 feedback</button> 
        <button id="showCommentsButton" onclick="showCommentsModal()" class="appOptionButton" style="margin-left:0.5rem;">🙋 comments</button> 
      </div>
      <script>
        function showFeedbackModal() {
          let feedbackWindow = createFloatingWindow({
            header:"Feedback",
            initialWidth: Math.min(700, window.innerWidth-20),
            initialHeight: Math.min(300, window.innerHeight-20),
            top: 20,
          });
          
          // Change the below variable to `false` to disable debug info (e.g. browser version, device type, localStorage size limits, etc.) with feedback submissions.
          // See   perchance.org/bug-report-plugin   for more info.
          let enableBrowserDebugInfoWithFeedback = true;

          if(enableBrowserDebugInfoWithFeedback) bugReport.initAutoErrorCapture(); // <-- must be initialized at page load

          let options = {channel:"feedback", width:"100%", height:"100%", hideComments: (location.hash==="#showfeedback" ? false : true), commentPlaceholderText:"Feel free to make suggestions or provide feedback here. Don't share personal info - feedback data is public. If you're running into errors/issues, please provide as much detail as possible, including the device, browser, etc. that you're using, and the error messages you saw (if any), character share link (if possible), and so on. I recommend using 𝗖𝗵𝗿𝗼𝗺𝗲 𝗼𝗿 𝗙𝗶𝗿𝗲𝗳𝗼𝘅.\n\nNote: Your chat data is stored 𝗰𝗼𝗺𝗽𝗹𝗲𝘁𝗲𝗹𝘆 privately in your browser storage - 𝗻𝗼𝘁 on a server. So I'm unable to debug issues related to your specific chats unless you provide enough explanation and/or links to exports/characters/etc.\n\n", hideFullscreenButton:true, hideSettingsButton:true}
          async function beforeSubmit({inputText}) {
            if(!inputText.trim()) return null;
            
            let url = await bugReport.createTemporaryDebugInfoUrl({ // this URL is not permanent - i.e. debug data is deleted after a few months. See   perchance.org/bug-report-plugin   for more info.
              customData: {
                // possible sources of lag/bugs:
                numCharacters: await db.characters.count(),
                numThreads: await db.threads.count(),
                numMessages: await db.messages.count(),
                timeSincePageLoad: Date.now()-window.pageLoadStartTime,
                lastWindowOnErrorMessage: window.lastWindowOnErrorMessage,
                storageEstimate: await navigator.storage.estimate(),
              },
              // Debug info is encrypted with this public key to increase user privacy. IF you're developing your own version of this generator, you can generate your own public/private key pairs here:  https://perchance.org/public-key-encryption-tool
              publicKey: "PUBLIC_1_VhWWC5YZSOvjJcKEPLEA6FfirbpAaSqNFkEFyuEk78CUdWGJyfSUt4HXL4fZZLZSCV8GVaSeZSsyVUiXLwd8PuFFcYMDLoig04JpvQAgvGGYZPJtDQ4aDdpTIUZSLBSkZZVFiCdqgnFk8xQWKq0dVkipUCQiZSO7beiEfEQ71PJ6AstsiolKwUBH8Cy28DmETkopYDe9y4QlohxXholANkpUdNLGgfctNAdebGw7O1CPABAhWFJRYlVpa4tEn2JUgcBywPUFQ7tEV1eRVqm7gJFMC0ItxvuwUYokiZSQpAbDN0WptNCWZP5CiG5owi0iqV0ncQ3sM1MgsKRadF3EqiHni0ceY9OoQ0wzhZSQ2tL6dCeZSxGW9Wt0AWirPlQvNzaqeJBZPVfe0R7SaNKdWm9OVFRKkJtIZS5WRlfDUUyTmdHGuFkBoZZalqrugNG62WSffMczMofsiaqeVxakUpW5XyFhRsPUATIdws7KeqgX8MZP6zAtZZ8BM6fkkg6ywT4oepCGAqwYY8iWJ1lGbdkBXrqN7y7iXQDRlAEFVmAgzaMK41oJQgcuZSB2MZPHZPGCHkeINZPVLwGpIDsyp8zuXDxA0w0YzmnSEWPRdIOVgGZPaGa4W5TSy01co9Oip2YLobLKYCrXt5Dca44UB0GowQMlqWZP2xVS7MS2ngZPyGmH1fpzNakwM5wEnJsTZPFsql6LN9aXPYhqrpYtw7bmEVTUqpDYVdOFUbepspmQJdgRFBDUb0UwZSZShB4kHCyZZigcZZ4Ae5HBIFNcYcLid6KeLe8whUyyVE7d8ukG8Y2Ed4FsYRxO8HbpzJiS6WBCyu9uPYga6OVSGB8M6SUuKaZZhlxNmpwrZZZShXF5ZZTxVOJvMouWDm9yvUBu0ygpZSfyAN5locFrSwtZShAD7eT7EYPcAEe8CQUmgF8ddUTTzhWzbmk5eBjDBHHZS1w2NTGRoVnGsfCwZPrCzLLCpFASyZZ4mAcWoGBpJXuDKMftslWRGCvZZKQFCCZZVYtvC8eJIWlZP97dus9GfKZSXOEKcZZFeeH3ZPkUbipiaPMEXZSIuzjUkeZPmM9uhxM1Cap3tf5iXBG3QU0Aiw2sK8NXYkrwiyQNxsGIA02ZSJ2K7hZZsJFVjmWQB3JjSrmHF0PFpWYXRRx4puQ7m2hlqSNPxEkGpaADR6d80Ahpartj9UZZ1DGxzKMex7sKZSCgehOfi64rcdTfDIEZPxMoJhXhlZZ5YFJcLXQjeHOwFQkUXTh2BxQf48O7VpagJlwEGBlYBkghVLShBElVHEU2p8RUcLQbX4YQNlBPzZZO8TRnBvuK8jKEIY4xsWadBUEPOZPWAJStNLDrOiRtedt3vNpUQKh4ZZOqNSXdAECgVtmTVBVuBAri0uEyjer39ZZH6WUXYYo5CKG9RfQrXhhfqeVyUIUK8XcUQjMpeotKQFGdyhsrD4aOFsEmqzrFf3BnWFYruIsY5Kx9ADpyZZdWFTzyMzyhpWaRJviBjx1IZSQFSf92A93bUU8Ka83hZZIE1WyKGwkgAlKD2qcNZZFhVkAY7DNqHCAIg6ZZARFgzQ5ecr1iCQ4mUY6EncnNrPRbn5m0jeXYX1pjIcSoTPNn69P7E8ZP8wk4RXw84ZE_PUBLIC_END",
            });
            return `${inputText}\n\nBrowser Debug Info:\n${url}`;
          }
          if(enableBrowserDebugInfoWithFeedback) options.beforeSubmit = beforeSubmit;

          com = root.commentsPlugin(options);
          feedbackWindow.bodyEl.innerHTML = com;
          feedbackWindow.bodyEl.style.overflow = "hidden";
        } 
        
        function showCommentsModal() {
          let feedbackWindow = createFloatingWindow({
            header:"Comments",
            initialWidth: Math.min(700, window.innerWidth-20),
            initialHeight: Math.min(500, window.innerHeight-100),
          });
          feedbackWindow.bodyEl.innerHTML = "";
          feedbackWindow.bodyEl.append(tabbedCommentsPlugin({
            channels: root.commentChannels,
            defaultChannelOptions: root.defaultCommentOptions,
            allowBots: false,
            fillHeight: true,
          })); // root.commentsPlugin(root.commentsPluginOptions);
          feedbackWindow.bodyEl.style.overflow = "hidden";
        } 
      </script>
    </div>
  </div>

  <div id="middleColumn" style="flex-grow:1; display:flex; flex-direction:column; position:relative; overflow:hidden; min-width:200px; z-index:1;">
    <div id="middleColumnShadowOverlay" style="display:none; position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5); z-index:20;"></div>
    <div id="characterSelection" class="middleColumnScreen" style="flex-grow:1; display:none; overflow: auto;">
      <button id="characterSelectionOpenLeftColumnButton" class="openLeftColumnButton" style="background: var(--button-bg);border-radius: var(--border-radius);border: 1px solid var(--button-border-color);padding: 0.25rem;width: 2rem;min-height: 2rem;margin-right: 0.5rem;position: absolute;top: 0.5rem;left: 0.5rem;">☰</button>
      
      <div id="createCharacterAreaCtn" style="display:flex; flex-direction:column; margin-top:1rem; justify-content:center; align-items:center; gap:0.5rem;">
        <div style="width:500px; max-width:100%; background:var(--box-color); padding:0.4rem; border:1px solid var(--border-color); border-radius:3px;">
          <div style="opacity:0.7; font-size:80%; margin-bottom:0.125rem;">🌐 Generate a character from <b>any</b> web page:</div>
          <div style="margin:0 auto; display:flex; gap:0.25rem;">
            <input id="generateCharacterFromUrlInputEl" oninput="charFromUrlExtraInstrCtn.hidden=!this.value.trim()" placeholder="https://shrek.fandom.com/wiki/Shrek_(character)" style="flex-grow:1; min-width:8rem;"><button id="generateCharacterFromUrlBtn" style="padding:0.25rem 0.5rem; min-width:max-content;" onclick="generateCharacterFromUrl()">✨ generate</button>
          </div>
          <div hidden id="charFromUrlExtraInstrCtn" style="margin:0 auto;display:flex;gap:0.25rem;margin-top: 0.25rem;">
            <input id="generateCharacterFromUrlExtraInstructionsInputEl" placeholder="Optional instructions - e.g. 'AU where he is a Hogwarts professor'" style="flex-grow:1; min-width:8rem;">
            <script>if(window.innerWidth < 500) generateCharacterFromUrlExtraInstructionsInputEl.placeholder=`(Optional) e.g. 'AU where he is a Hogwarts professor'`;</script>
          </div>
        </div>
        <button id="newCharacterButton" style="padding:0.25rem; font-size:110%; display:block; max-height:min-content;">🛠️ create new character</button>
      </div>
      <style>
        @media screen and (max-width: 630px) {
          #createCharacterAreaCtn {
            padding-left: 3rem; 
          }
        }
      </style>
      
      <h2 id="yourCharactersTitleEl" style="text-align:center; margin-bottom: 0.25rem; margin-top: 1.5rem; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
        <span>Your Characters</span>
        <button onclick="yourCharactersTitleEl.hidden=true; characterSearchCtn.hidden=false; characterSearchInputEl.focus()">🔎</button>
      </h2>
      <div id="characterSearchCtn" hidden="" style="margin-top: 1.75rem; display:flex; align-items:center; justify-content:center; gap: 0.25rem;">
        <input id="characterSearchInputEl" placeholder="search your characters..." onkeydown="if(event.which===13) { characterSearchBtn.click() }">
        <button id="characterSearchBtn" onclick="filterAndRenderCharacterList(characterSearchInputEl.value)">🔎</button>
      </div>
      <div style="margin-bottom: 0.5rem;display: flex;justify-content: center;">
        <!-- <button id="newFolderCharacterButton" style="padding: 0.25rem; margin-left: 0.5rem;">📁 new folder</button> -->
      </div>
      <div id="characterFoldersList" data-current-folder-path=""></div>
      <div id="characterList"></div>
      <button id="loadAllCharactersBtn" onclick="this.disabled=true; window.renderCharacterList({characterCountLimit:999999999}).then(_ => this.disabled=false)" style="margin:0 auto; display:block; margin-top:1rem; padding:0.5rem 0.75rem; font-size:1rem;">show all characters</button>
      <div hidden id="tapACharacterHintEl" style="text-align: center; opacity: 0.7; font-size: 80%; margin-top: 1rem;">(<b>tap a character</b> to start a new chat with them)</div>
      <script>if(!localStorage.hasStartedThreadViaCharacterTap) tapACharacterHintEl.hidden=false;</script>
      
      <div><h2 style="text-align:center; margin-bottom: 0.75rem; margin-top: 4rem; font-size: 1.3rem;">Example Characters</h2></div>
      <div id="starterCharacterList"></div>
      
      <br><br>
      <p id="storageNoticeEl" style="text-align:left; font-size:70%; opacity:0.8; padding:0.4rem; border:1px solid var(--border-color); border-radius:3px; max-width:500px; margin:0 auto; background:var(--box-color);"></p>

      <!--
      <div id="introVideoCtn" style="text-align:center; padding:0.4rem; border:1px solid var(--border-color); border-radius:3px; max-width:max-content; margin:0 auto; background:var(--box-color); margin-top:2rem;">
        <div style="margin-bottom:0.25rem; font-size:70%; opacity:0.7; text-align:center;">I found this helpful intro video by <a href="https://www.youtube.com/watch?v=V8R1P6jM1es" target="_blank">CrossLax on YouTube</a>:</div>
        <div id="introVideoIframeWrapperEl"></div>
        <div style="text-align:center;"><button onclick="localStorage.seenIntroVideo='1'; introVideoCtn.remove();">hide</button></div>
      </div>
      <script>
        if(localStorage.seenIntroVideo) {
          introVideoCtn.remove();
        } else {
          introVideoIframeWrapperEl.innerHTML = `<iframe style="max-width:100%; aspect-ratio:336/189;" width="336" height="189" src="https://www.youtube-nocookie.com/embed/V8R1P6jM1es?si=yu1HV7DbKKNlHKLI&amp;hd=1&amp;start=158" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`;
        }
      </script>
      -->
      
      <p style="text-align: center;font-size: 80%;opacity: 0.8; padding:0 0.5rem; margin-bottom:0.25rem; margin-top:1rem;">This chat app thing is powered by the <a href="/ai-text-plugin" target="_blank">ai-text-plugin</a> and the <a href="/text-to-image-plugin" target="_blank">text-to-image-plugin</a>.</p>
      <p style="text-align: center;font-size: 80%;opacity: 0.8; padding:0 0.5rem; margin-bottom:0.25rem; margin-top:0;">For a simpler interface, try <a href="https://perchance.org/ai-chat" target="_blank">/ai-chat</a>.</p>
      <br><br>
    </div> 
    <div id="chatInterface" class="middleColumnScreen" style="display:flex; flex-grow:1; flex-direction:column; height:100%; position:relative;">
      <div id="customCodeChatInterfaceWrapper" style="display:none;"></div>
      <div id="builtInChatInterfaceWrapper">
        <div id="musicPlayerCtn" hidden style="display:flex; position:fixed; top:0; right:0; width:max-content; gap:0.5rem; padding:0.25rem; z-index:10;">
          <audio id="musicPlayer" controls hidden style="min-width:40vw;"></audio>
          <button style="height: min-content;" onclick="musicPlayer.hidden=!musicPlayer.hidden;">🔊</button>
        </div>
        <div id="messageFeedHeaderBar" style="pointer-events:none; opacity:0; display: flex; position:absolute;height: 2rem;right: 0;left: 0;margin: 0.5rem; z-index:9999999999;"> <!-- HIGH Z INDEX to be above thread loading modal in case of infinite load due to customCode error or whatever - necessary to 'escape' thread on mobile -->
          <button id="messageFeedOpenLeftColumnButton" class="openLeftColumnButton" style="display:none; pointer-events:auto; background: var(--button-bg);border-radius: var(--border-radius);border: 1px solid var(--button-border-color);padding: 0.25rem; min-width: 2rem; height: 100%; margin-right:0.5rem;">☰</button>
          <div style="opacity:0; pointer-events:none; background: var(--button-bg); display:flex; height: 100%; border-radius: var(--border-radius);border: 1px solid var(--button-border-color);padding: 0.25rem;">
            <div style="display: flex;align-items: center;font-size:var(--button-font-size);margin-right: 0.25rem;">model:</div>
            <select id="threadModelSelector" style="max-width:130px;"></select>